/* Motion lab — page-scoped animation studies built on the shared classical theme. */
.animation-lab-page {
  --tile-duration: 18s;
  --tile-duration-reverse: 13s;
  --wind-duration: 4.8s;
  --wind-angle: 0deg;
  --rapport-human: #d39a35;
  --rapport-robot: #4c9d97;
  --rapport-connection: #b99858;
}

.animation-lab {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(var(--space-8) * 1.35) 0 calc(var(--space-8) * 1.6);
}

.animation-lab-header {
  max-width: 58em;
  margin-bottom: calc(var(--space-8) * 1.25);
}

.animation-lab-kicker,
.animation-medium {
  color: var(--color-accent-700);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.animation-lab-header h1 {
  margin: 6px 0 var(--space-3);
  color: var(--color-heading);
  font-size: 48px;
}

.animation-lab-header .summary {
  margin-top: var(--space-3);
}

.animation-master-controls,
.animation-panel-controls,
.animation-lab-footer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.animation-master-controls {
  margin-top: var(--space-5, 23px);
}

.animation-master-controls .button,
.animation-panel-controls .button,
.animation-lab-footer-actions .button {
  margin-top: 0;
}

.animation-status {
  min-height: 1.6em;
  margin-top: var(--space-2);
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font-size: 13.5px;
}

.animation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.animation-panel {
  min-width: 0;
  overflow: hidden;
  scroll-margin-top: 88px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 56%, transparent);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.animation-panel.is-random-highlight {
  border-color: var(--color-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent),
    var(--shadow-md);
}

.animation-panel-wide {
  grid-column: 1 / -1;
}

.animation-panel-header {
  min-height: 168px;
  padding: var(--space-5, 23px) var(--space-5, 23px) var(--space-4);
}

.animation-panel-wide .animation-panel-header {
  min-height: 0;
}

.animation-panel-header h2 {
  margin: 5px 0 var(--space-2);
  color: var(--color-heading);
  font-size: 28px;
}

.animation-panel-header > p:last-child {
  max-width: 48em;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-size: 15.5px;
  line-height: 1.8;
}

.motion-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 310px;
  overflow: hidden;
  border-block: 1px solid var(--color-divider);
  background:
    radial-gradient(
      circle at 24% 20%,
      color-mix(in srgb, var(--color-heading) 12%, transparent),
      transparent 38%
    ),
    radial-gradient(
      circle at 82% 76%,
      color-mix(in srgb, var(--color-accent) 10%, transparent),
      transparent 34%
    ),
    color-mix(in srgb, var(--color-bg) 64%, var(--color-surface));
  isolation: isolate;
}

.animation-panel-controls {
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  justify-content: space-between;
}

.animation-panel-controls-stack {
  align-items: stretch;
}

.range-control {
  display: grid;
  grid-template-columns: auto minmax(110px, 1fr) 3.2em;
  align-items: center;
  gap: var(--space-2);
  min-width: min(100%, 290px);
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
  font-size: 13.5px;
}

.range-control input {
  width: 100%;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.range-control output {
  color: var(--color-accent-700);
  text-align: right;
  font-feature-settings: "tnum";
}

.text-control {
  display: grid;
  grid-template-columns: auto minmax(170px, 1fr);
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
  font-size: 13.5px;
}

.text-control input {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 8px 11px;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  font: inherit;
}

.text-control input:focus-visible {
  border-color: var(--color-accent);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* 01 — Persian tile */
.tile-stage {
  min-height: 430px;
  cursor: pointer;
}

.tile-mandala {
  width: min(350px, 78vw);
  height: auto;
  overflow: visible;
  transform: scale(0.88);
  filter: drop-shadow(0 14px 24px color-mix(in srgb, var(--color-heading) 16%, transparent));
  transition:
    transform 0.8s cubic-bezier(0.2, 0.76, 0.25, 1),
    filter 0.8s ease;
}

.tile-stage.is-bloomed .tile-mandala {
  transform: scale(1.04);
  filter: drop-shadow(0 18px 34px color-mix(in srgb, var(--color-accent) 22%, transparent));
}

.tile-water-ring,
.tile-star-outline,
.tile-diamond,
.tile-orbit {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.tile-water-ring {
  stroke: color-mix(in srgb, var(--color-heading) 28%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 8;
}

.tile-water-ring-inner {
  stroke: color-mix(in srgb, var(--color-accent) 34%, transparent);
  stroke-dasharray: 1 9;
}

.tile-star-outline {
  stroke: var(--color-heading);
  stroke-width: 2;
}

.tile-diamond {
  stroke: color-mix(in srgb, var(--color-accent) 74%, transparent);
  stroke-width: 1.4;
}

.tile-star-fill {
  fill: color-mix(in srgb, var(--color-heading) 15%, transparent);
  stroke: color-mix(in srgb, var(--color-heading) 76%, transparent);
  stroke-width: 1.5;
}

.tile-orbit {
  stroke: var(--color-accent);
  stroke-width: 1.2;
  stroke-dasharray: 5 7;
}

.tile-center-halo {
  fill: color-mix(in srgb, var(--color-accent) 16%, transparent);
  stroke: color-mix(in srgb, var(--color-accent) 58%, transparent);
  animation: tilePulse 3.4s ease-in-out infinite;
}

.tile-center {
  fill: var(--color-accent);
}

.tile-wheel {
  transform-box: fill-box;
  transform-origin: center;
}

.tile-wheel-slow {
  animation: tileSpin var(--tile-duration) linear infinite;
}

.tile-wheel-reverse {
  animation: tileSpinReverse var(--tile-duration-reverse) linear infinite;
}

/* 02 — Wind */
.wind-stage {
  --wind-shift: 14px;
  touch-action: none;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-heading) 12%, transparent),
      transparent 58%
    ),
    color-mix(in srgb, var(--color-bg) 70%, var(--color-surface));
}

.wind-light {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  filter: blur(3px);
  animation: lightDrift 8s ease-in-out infinite alternate;
}

.wind-light-one {
  top: -54px;
  left: 9%;
}
.wind-light-two {
  right: 6%;
  bottom: -74px;
  animation-delay: -3s;
}

.wind-branch {
  position: absolute;
  left: 4%;
  bottom: 60px;
  width: 88%;
  height: 118px;
  border-bottom: 8px solid #5a4430;
  border-radius: 0 0 62% 46%;
  transform: rotate(var(--wind-angle));
  transform-origin: 8% 100%;
  animation: branchSway var(--wind-duration) ease-in-out infinite alternate;
}

.wind-branch::before,
.wind-branch::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 44%;
  border-bottom: 4px solid #5a4430;
  transform-origin: left center;
}

.wind-branch::before {
  left: 30%;
  transform: rotate(-28deg);
}
.wind-branch::after {
  left: 55%;
  transform: rotate(-42deg);
}
.wind-branch-back {
  opacity: 0.42;
  transform: translateY(-38px) scale(0.92) rotate(var(--wind-angle));
  animation-delay: -1.8s;
}

.wind-leaves {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wind-leaf {
  position: absolute;
  left: var(--leaf-x, 50%);
  top: var(--leaf-y, 50%);
  width: calc(14px * var(--leaf-scale, 1));
  height: calc(8px * var(--leaf-scale, 1));
  border: 1px solid color-mix(in srgb, var(--color-heading) 72%, transparent);
  border-radius: 100% 0 100% 0;
  background: color-mix(in srgb, var(--color-heading) 32%, var(--color-surface));
  transform-origin: left center;
  opacity: 0.88;
  animation: leafFloat var(--leaf-duration, var(--wind-duration)) ease-in-out var(--leaf-delay, 0s)
    infinite alternate;
  transition: opacity 0.35s ease;
}

.wind-leaf.is-resting {
  opacity: 0.16;
}

.wind-leaf:nth-child(3n) {
  border-color: color-mix(in srgb, var(--color-accent) 66%, transparent);
  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));
}

.wind-stage.is-gusting .wind-leaf,
.wind-stage.gust .wind-leaf {
  animation-name: leafGust;
  animation-duration: 1.1s;
}

/* 03 — Bird route */
.bird-stage {
  min-height: 310px;
}

.bird-flight-svg {
  width: min(100%, 620px);
  height: auto;
  overflow: visible;
}

.route-path {
  fill: none;
  stroke: color-mix(in srgb, var(--color-text) 20%, transparent);
  stroke-width: 1.2;
  stroke-dasharray: 4 8;
  transition:
    stroke 0.25s ease,
    stroke-width 0.25s ease;
}

.route-path.is-selected {
  stroke: color-mix(in srgb, var(--color-accent) 80%, transparent);
  stroke-width: 1.8;
}

.bird-perch {
  fill: none;
  stroke: #5a4430;
  stroke-width: 7;
  stroke-linecap: round;
}

.route-node {
  fill: var(--color-surface);
  stroke: var(--color-accent);
  stroke-width: 2;
}

.motion-bird-body,
.motion-bird-head {
  fill: #667a4d;
  stroke: #263126;
  stroke-width: 1.5;
}
.motion-bird-tail {
  fill: #40563c;
  stroke: #263126;
  stroke-width: 1.3;
}
.motion-bird-wing {
  fill: #4c5a3c;
  stroke: #263126;
  stroke-width: 1.3;
  transform-box: fill-box;
  transform-origin: 80% 50%;
  animation: labWingBeat 0.2s ease-in-out infinite alternate;
}
.motion-bird-beak {
  fill: var(--color-accent);
  stroke: #332d25;
  stroke-width: 1;
}
.motion-bird-eye {
  fill: #201f1d;
}
.motion-bird.is-resting .motion-bird-wing {
  animation-play-state: paused;
}

.route-controls {
  justify-content: center;
}

.route-button {
  min-width: 72px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  color: var(--color-text);
  background: transparent;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.route-button:hover,
.route-button.is-selected {
  color: var(--color-accent-700);
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
}

/* 04 — Canvas rapport */
.canvas-stage {
  min-height: 382px;
}

.canvas-stage canvas {
  display: block;
  width: 100%;
  height: 382px;
  touch-action: none;
  cursor: grab;
}

.canvas-stage canvas:active {
  cursor: grabbing;
}

.stage-hint {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  color: color-mix(in srgb, var(--color-text) 54%, transparent);
  font-size: 12px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* 05 — Cat and yarn */
.yarn-lab-stage {
  min-height: 382px;
  touch-action: none;
}

.play-cat {
  position: absolute;
  left: 11%;
  bottom: 28px;
  width: min(168px, 36%);
  user-select: none;
  pointer-events: none;
  transform: translate(var(--cat-shift-x, 0), var(--cat-shift-y, 0)) rotate(var(--cat-tilt, 0deg));
  transform-origin: 72% 82%;
  transition: transform 0.18s ease-out;
  filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--color-text) 13%, transparent));
}

.lab-yarn-ball {
  position: absolute;
  left: 72%;
  top: 48%;
  width: 46px;
  height: 46px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      ellipse at 35% 36%,
      transparent 0 4px,
      color-mix(in srgb, var(--color-accent) 52%, transparent) 5px 6px
    ),
    color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
  box-shadow: 0 9px 16px color-mix(in srgb, var(--color-text) 18%, transparent);
  cursor: grab;
  touch-action: none;
  z-index: 4;
}

.lab-yarn-ball:active {
  cursor: grabbing;
}
.lab-yarn-ball:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 4px;
}

.yarn-thread {
  position: absolute;
  left: 30%;
  bottom: 42px;
  width: 48%;
  height: 90px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 66%, transparent);
  border-radius: 50%;
  transform: rotate(-7deg);
  transform-origin: left bottom;
  pointer-events: none;
}

/* 06 — Rain window */
.rain-stage {
  min-height: 382px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-heading) 24%, transparent),
      transparent 72%
    ),
    color-mix(in srgb, var(--color-bg) 68%, var(--color-surface));
}

.rain-haze {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 0;
  height: 46%;
  border-radius: 50% 50% 0 0;
  background: color-mix(in srgb, var(--color-heading) 16%, var(--color-surface));
  opacity: 0.64;
  filter: blur(5px);
}

.rain-haze-back {
  bottom: 19%;
  height: 31%;
  transform: translateX(-12%) scaleX(0.9);
  opacity: 0.38;
}

.rain-haze-front {
  transform: translateX(18%) scaleX(1.08);
}

.rain-window {
  position: relative;
  z-index: 2;
  width: min(300px, 72%);
  height: 270px;
  overflow: hidden;
  border: 7px solid color-mix(in srgb, var(--color-heading) 68%, var(--color-text));
  border-radius: 48% 48% 8px 8px / 34% 34% 4% 4%;
  background:
    linear-gradient(
      90deg,
      transparent 49.25%,
      color-mix(in srgb, var(--color-heading) 62%, transparent) 49.5% 50.5%,
      transparent 50.75%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-heading) 22%, var(--color-surface)),
      color-mix(in srgb, var(--color-bg) 72%, var(--color-surface))
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 38%, transparent),
    0 18px 38px color-mix(in srgb, var(--color-text) 18%, transparent);
}

.rain-window::before,
.rain-window::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.rain-window::before {
  left: 0;
  right: 0;
  top: 47%;
  height: 2px;
  background: color-mix(in srgb, var(--color-heading) 64%, transparent);
}

.rain-window::after {
  inset: 0;
  background: linear-gradient(
    118deg,
    color-mix(in srgb, var(--color-surface) 16%, transparent),
    transparent 31% 72%,
    color-mix(in srgb, var(--color-accent) 7%, transparent)
  );
}

.rain-window-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 68% 22%,
    color-mix(in srgb, var(--color-accent) 16%, transparent),
    transparent 38%
  );
  pointer-events: none;
}

.rain-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.rain-drop {
  position: absolute;
  top: -28%;
  left: var(--rain-x, 50%);
  width: 1px;
  height: var(--rain-length, 34px);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--color-surface) 76%, var(--color-heading))
  );
  opacity: var(--rain-opacity, 0.58);
  transform: translate3d(0, -30px, 0) rotate(8deg);
  animation: rainFall var(--rain-duration, 1.4s) linear var(--rain-delay, 0s) infinite;
}

.rain-wiper {
  position: absolute;
  z-index: 5;
  right: 47%;
  bottom: 4px;
  width: 42%;
  height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  transform: rotate(-12deg);
  transform-origin: calc(100% - 7px) 50%;
  cursor: pointer;
}

.rain-wiper::before,
.rain-wiper span {
  content: "";
  position: absolute;
  display: block;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 72%, var(--color-heading));
}

.rain-wiper span {
  left: 0;
  top: 20px;
  width: calc(100% - 7px);
  height: 5px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.rain-wiper::before {
  right: 0;
  top: 17px;
  width: 12px;
  height: 12px;
}

.rain-wiper:hover span,
.rain-wiper:focus-visible span {
  background: var(--color-accent-700);
}

.rain-stage.is-wiping .rain-wiper {
  animation: rainWiperSweep 1.25s cubic-bezier(0.35, 0.02, 0.24, 1) both;
}

/* 07 — Pond ripples */
.ripple-stage {
  min-height: 382px;
  background:
    radial-gradient(
      circle at 50% 44%,
      color-mix(in srgb, var(--color-heading) 20%, transparent),
      transparent 42%
    ),
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--color-heading) 68%, var(--color-surface)),
      color-mix(in srgb, var(--color-text) 42%, var(--color-bg))
    );
}

.ripple-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      107deg,
      transparent 20%,
      color-mix(in srgb, var(--color-surface) 7%, transparent) 39%,
      transparent 58%
    ),
    repeating-linear-gradient(
      174deg,
      transparent 0 24px,
      color-mix(in srgb, var(--color-heading) 8%, transparent) 25px 26px
    );
  pointer-events: none;
}

.ripple-stage canvas,
.magnet-stage canvas {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 382px;
  touch-action: none;
  cursor: crosshair;
}

/* 08 — Breathing type */
.type-stage {
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: clamp(32px, 6vw, 52px);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.7;
  text-align: center;
  text-wrap: balance;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--color-accent) 9%, transparent),
      transparent 58%
    ),
    color-mix(in srgb, var(--color-surface) 56%, var(--color-bg));
}

.type-letter {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 72%;
  animation: typeBreath 4.8s ease-in-out var(--letter-delay, 0s) infinite;
  will-change: transform, opacity;
}

.type-controls {
  gap: var(--space-3);
}

/* 09 — Constellation */
.constellation-stage {
  min-height: 382px;
  background:
    radial-gradient(
      circle at 18% 24%,
      color-mix(in srgb, var(--color-heading) 14%, transparent),
      transparent 34%
    ),
    radial-gradient(
      circle at 76% 78%,
      color-mix(in srgb, var(--color-accent) 8%, transparent),
      transparent 26%
    ),
    color-mix(in srgb, var(--color-heading) 42%, var(--color-bg));
}

.constellation-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--color-surface) 62%, transparent) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle,
      color-mix(in srgb, var(--color-accent) 42%, transparent) 0 1px,
      transparent 1.5px
    );
  background-position:
    0 0,
    31px 47px;
  background-size:
    71px 83px,
    97px 109px;
  opacity: 0.42;
  pointer-events: none;
}

.constellation-svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 382px;
  overflow: visible;
  touch-action: manipulation;
}

.constellation-line {
  stroke: var(--color-heading);
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: var(--line-opacity, 0.74);
  vector-effect: non-scaling-stroke;
  animation: constellationLineIn 0.55s ease both;
}

.constellation-line.is-selected {
  stroke: var(--color-accent);
  stroke-width: 2.4;
  opacity: 1;
}

.animation-lab-page.motion-paused .constellation-line,
.constellation-svg.is-motion-paused .constellation-line {
  animation: none;
  stroke-dasharray: none;
  opacity: 0.74;
}

.animation-lab-page.motion-paused .constellation-line.is-selected,
.constellation-svg.is-motion-paused .constellation-line.is-selected {
  opacity: 1;
}

.constellation-star {
  fill: var(--color-surface);
  stroke: color-mix(in srgb, var(--color-heading) 82%, transparent);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition:
    fill 0.2s ease,
    stroke 0.2s ease,
    filter 0.2s ease,
    r 0.2s ease;
}

.constellation-star:hover,
.constellation-star:focus,
.constellation-star.is-selected,
.constellation-star[aria-pressed="true"] {
  fill: var(--color-accent);
  stroke: var(--color-accent-100);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--color-accent) 72%, transparent));
}

.constellation-star-hit {
  fill: transparent;
  stroke: transparent;
  cursor: pointer;
  outline: none;
}

.constellation-star-hit:focus-visible {
  stroke: var(--color-accent-100);
  stroke-width: 2;
}

/* 10 — Magnetic field */
.magnet-stage {
  min-height: 382px;
  background:
    radial-gradient(
      circle at center,
      color-mix(in srgb, var(--color-accent) 10%, transparent),
      transparent 34%
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 31px,
      color-mix(in srgb, var(--color-divider) 28%, transparent) 32px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 31px,
      color-mix(in srgb, var(--color-divider) 24%, transparent) 32px
    ),
    color-mix(in srgb, var(--color-bg) 72%, var(--color-surface));
}

.magnet-stage canvas {
  cursor: grab;
}

.magnet-stage canvas:active {
  cursor: grabbing;
}

/* 11 — Pendulum synchronization */
.pendulum-stage {
  min-height: 382px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 4vw, 34px);
  padding: 60px clamp(14px, 5vw, 42px) 34px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-heading) 9%, transparent),
      transparent 54%
    ),
    color-mix(in srgb, var(--color-surface) 56%, var(--color-bg));
}

.pendulum-stage::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 44px;
  left: 12%;
  right: 12%;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-heading) 66%, var(--color-text));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--color-accent) 34%, transparent);
}

.pendulum {
  position: relative;
  z-index: 3;
  width: clamp(42px, 12%, 70px);
  height: 228px;
  transform-origin: 50% 0;
  animation: pendulumSwing var(--pendulum-duration, 2.2s) ease-in-out var(--pendulum-delay, 0s)
    infinite alternate;
  will-change: transform;
}

.pendulum-string {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: calc(100% - 30px);
  background: color-mix(in srgb, var(--color-text) 58%, transparent);
  transform: translateX(-50%);
}

.pendulum-bob {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 38px;
  height: 38px;
  border: 2px solid color-mix(in srgb, var(--color-accent) 78%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-heading) 62%, var(--color-surface));
  box-shadow: 0 8px 16px color-mix(in srgb, var(--color-text) 16%, transparent);
  transform: translateX(-50%);
}

.pendulum:nth-child(even) .pendulum-bob {
  background: color-mix(in srgb, var(--color-accent) 42%, var(--color-surface));
}

.pendulum-stage.is-synchronized .pendulum {
  animation-delay: 0s !important;
  animation-duration: var(--pendulum-sync-duration, 2.2s);
}

/* 12 — Four seasons window */
.season-stage {
  min-height: 430px;
  --season-sky: color-mix(in srgb, var(--color-heading) 24%, var(--color-surface));
  --season-hill-back: color-mix(in srgb, var(--color-heading) 52%, var(--color-surface));
  --season-hill-front: color-mix(in srgb, var(--color-heading) 78%, var(--color-bg));
  --season-tree: color-mix(in srgb, var(--color-heading) 72%, var(--color-surface));
  background:
    radial-gradient(
      circle at 50% 18%,
      color-mix(in srgb, var(--season-sky) 52%, transparent),
      transparent 52%
    ),
    color-mix(in srgb, var(--color-bg) 70%, var(--color-surface));
  transition: background-color 0.7s ease;
}

.season-stage.is-summer {
  --season-sky: color-mix(in srgb, var(--color-heading) 48%, var(--color-surface));
  --season-hill-back: color-mix(in srgb, var(--color-heading) 72%, var(--color-surface));
  --season-hill-front: color-mix(in srgb, var(--color-heading) 88%, var(--color-bg));
  --season-tree: color-mix(in srgb, var(--color-heading) 90%, var(--color-surface));
}

.season-stage.is-autumn {
  --season-sky: color-mix(in srgb, var(--color-accent) 34%, var(--color-surface));
  --season-hill-back: color-mix(in srgb, var(--color-accent) 68%, var(--color-surface));
  --season-hill-front: color-mix(in srgb, var(--color-accent-700) 74%, var(--color-bg));
  --season-tree: color-mix(in srgb, var(--color-accent) 78%, var(--color-surface));
}

.season-stage.is-winter {
  --season-sky: color-mix(in srgb, var(--color-divider) 62%, var(--color-surface));
  --season-hill-back: color-mix(in srgb, var(--color-divider) 76%, var(--color-surface));
  --season-hill-front: color-mix(in srgb, var(--color-heading) 34%, var(--color-divider));
  --season-tree: color-mix(in srgb, var(--color-text) 38%, var(--color-divider));
}

.season-window {
  position: relative;
  width: min(620px, 82%);
  height: 330px;
  overflow: hidden;
  border: 8px solid color-mix(in srgb, var(--color-heading) 66%, var(--color-text));
  border-radius: 50% 50% 8px 8px / 38% 38% 4% 4%;
  background: linear-gradient(
    180deg,
    var(--season-sky),
    color-mix(in srgb, var(--season-sky) 56%, var(--color-surface))
  );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent),
    0 18px 38px color-mix(in srgb, var(--color-text) 17%, transparent);
  transition:
    background 0.7s ease,
    border-color 0.7s ease;
}

.season-sun {
  position: absolute;
  top: 54px;
  right: 18%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 72%, var(--color-surface));
  box-shadow: 0 0 28px color-mix(in srgb, var(--color-accent) 35%, transparent);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.season-stage.is-winter .season-sun {
  opacity: 0.42;
  transform: translateY(12px);
}

.season-hill {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -19%;
  height: 58%;
  border-radius: 52% 48% 0 0;
  background: var(--season-hill-front);
  transition: background 0.7s ease;
}

.season-hill-back {
  left: 14%;
  right: -30%;
  bottom: 11%;
  height: 34%;
  background: var(--season-hill-back);
  opacity: 0.82;
}

.season-tree {
  position: absolute;
  z-index: 3;
  left: 25%;
  bottom: 24px;
  width: 13px;
  height: 150px;
  border-radius: 999px 999px 3px 3px;
  background: color-mix(in srgb, var(--color-text) 64%, var(--color-accent));
}

.season-tree i {
  position: absolute;
  left: 50%;
  width: 104px;
  height: 82px;
  border-radius: 50%;
  background: var(--season-tree);
  transform: translateX(-50%);
  transition:
    background 0.7s ease,
    opacity 0.7s ease,
    transform 0.7s ease;
}

.season-tree i:nth-child(1) {
  top: -24px;
}
.season-tree i:nth-child(2) {
  top: 17px;
  left: 2px;
  width: 88px;
  height: 74px;
}
.season-tree i:nth-child(3) {
  top: 14px;
  left: 13px;
  width: 82px;
  height: 68px;
}
.season-stage.is-winter .season-tree i {
  opacity: 0.22;
  transform: translateX(-50%) scale(0.7);
}

.season-particle {
  position: absolute;
  z-index: 4;
  left: var(--particle-x, 50%);
  top: var(--particle-y, -12%);
  width: var(--particle-size, 10px);
  height: var(--particle-size, 10px);
  pointer-events: none;
  opacity: 0.82;
  animation: seasonParticleFall var(--particle-duration, 7s) linear var(--particle-delay, 0s)
    infinite;
}

.season-petal {
  border-radius: 70% 12% 70% 22%;
  background: color-mix(in srgb, var(--color-accent) 44%, var(--color-surface));
}

.season-leaf {
  border-radius: 100% 0 100% 0;
  background: color-mix(in srgb, var(--season-tree) 76%, var(--color-accent));
}

.season-snow {
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 0 4px color-mix(in srgb, var(--color-surface) 62%, transparent);
}

.season-sprout {
  border-radius: 100% 0 100% 0;
  background: color-mix(in srgb, var(--color-heading) 64%, var(--color-surface));
}

.season-control {
  width: min(100%, 520px);
}

.animation-lab-footer-actions {
  justify-content: flex-end;
  margin-top: calc(var(--space-8) * 1.35);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

.animation-lab-page.motion-paused .tile-wheel,
.animation-lab-page.motion-paused .tile-center-halo,
.animation-lab-page.motion-paused .wind-light,
.animation-lab-page.motion-paused .wind-branch,
.animation-lab-page.motion-paused .wind-leaf,
.animation-lab-page.motion-paused .motion-bird-wing,
.animation-lab-page.motion-paused .rain-drop,
.animation-lab-page.motion-paused .type-letter,
.animation-lab-page.motion-paused .pendulum,
.animation-lab-page.motion-paused .season-particle,
.animation-lab-page.motion-ready .animation-panel:not(.is-in-view) .tile-wheel,
.animation-lab-page.motion-ready .animation-panel:not(.is-in-view) .tile-center-halo,
.animation-lab-page.motion-ready .animation-panel:not(.is-in-view) .wind-light,
.animation-lab-page.motion-ready .animation-panel:not(.is-in-view) .wind-branch,
.animation-lab-page.motion-ready .animation-panel:not(.is-in-view) .wind-leaf,
.animation-lab-page.motion-ready .animation-panel:not(.is-in-view) .motion-bird-wing,
.animation-lab-page.motion-ready .animation-panel:not(.is-in-view) .rain-drop,
.animation-lab-page.motion-ready .animation-panel:not(.is-in-view) .type-letter,
.animation-lab-page.motion-ready .animation-panel:not(.is-in-view) .pendulum,
.animation-lab-page.motion-ready .animation-panel:not(.is-in-view) .season-particle,
.rain-stage.is-motion-paused .rain-drop,
.type-stage.is-motion-paused .type-letter,
.pendulum-stage.is-motion-paused .pendulum,
.season-stage.is-motion-paused .season-particle {
  animation-play-state: paused !important;
}

@keyframes tileSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes tileSpinReverse {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes tilePulse {
  50% {
    transform: scale(1.25);
    opacity: 0.46;
  }
}
@keyframes lightDrift {
  to {
    transform: translate(42px, 18px) scale(1.12);
  }
}
@keyframes branchSway {
  from {
    rotate: -1.5deg;
  }
  to {
    rotate: 2.2deg;
  }
}
@keyframes leafFloat {
  from {
    transform: translate3d(0, 0, 0) rotate(-8deg);
  }
  to {
    transform: translate3d(
        calc(var(--leaf-drift, 28px) + var(--wind-shift)),
        var(--leaf-rise, -8px),
        0
      )
      rotate(var(--leaf-spin, 22deg));
  }
}
@keyframes leafGust {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  50% {
    transform: translate3d(
        calc(var(--leaf-drift, 28px) + var(--wind-shift) + var(--wind-shift)),
        calc(var(--leaf-rise, -8px) - 24px),
        0
      )
      rotate(var(--leaf-spin, 120deg));
  }
  100% {
    transform: translate3d(
        calc(var(--leaf-drift, 28px) + var(--wind-shift)),
        var(--leaf-rise, -8px),
        0
      )
      rotate(var(--leaf-spin, 22deg));
  }
}
@keyframes labWingBeat {
  from {
    transform: rotate(-18deg) scaleY(0.72);
  }
  to {
    transform: rotate(15deg) scaleY(1.12);
  }
}
@keyframes rainFall {
  from {
    transform: translate3d(0, -34px, 0) rotate(8deg);
  }
  to {
    transform: translate3d(var(--rain-drift, 18px), 390px, 0) rotate(8deg);
  }
}
@keyframes rainWiperSweep {
  0%,
  100% {
    transform: rotate(-12deg);
  }
  46%,
  58% {
    transform: rotate(-112deg);
  }
}
@keyframes typeBreath {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translateY(var(--wave-distance, -6px)) scale(1.035);
    opacity: 1;
  }
}
@keyframes constellationLineIn {
  from {
    stroke-dasharray: 1 160;
    opacity: 0.18;
  }
  to {
    stroke-dasharray: 180 1;
    opacity: 0.74;
  }
}
@keyframes pendulumSwing {
  from {
    transform: rotate(var(--pendulum-angle-negative, -14deg));
  }
  to {
    transform: rotate(var(--pendulum-angle, 14deg));
  }
}
@keyframes seasonParticleFall {
  from {
    transform: translate3d(0, -24px, 0) rotate(0deg);
  }
  to {
    transform: translate3d(var(--particle-drift, 42px), 470px, 0)
      rotate(var(--particle-spin, 300deg));
  }
}

@media (max-width: 900px) {
  .animation-grid {
    grid-template-columns: 1fr;
  }
  .animation-panel-wide {
    grid-column: auto;
  }
  .animation-panel-header,
  .animation-panel-wide .animation-panel-header {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .animation-lab {
    padding-top: var(--space-8);
  }
  .animation-lab-header h1 {
    font-size: 37px;
  }
  .animation-panel-header {
    padding: var(--space-4);
  }
  .animation-panel-header h2 {
    font-size: 25px;
  }
  .motion-stage {
    min-height: 270px;
  }
  .tile-stage {
    min-height: 330px;
  }
  .canvas-stage,
  .yarn-lab-stage,
  .rain-stage,
  .ripple-stage,
  .constellation-stage,
  .magnet-stage,
  .pendulum-stage {
    min-height: 310px;
  }
  .canvas-stage canvas,
  .ripple-stage canvas,
  .magnet-stage canvas,
  .constellation-svg {
    height: 310px;
  }
  .rain-window {
    width: min(270px, 78%);
    height: 236px;
  }
  .type-stage {
    min-height: 280px;
    padding: 32px 18px;
    font-size: 29px;
    letter-spacing: 0.05em;
  }
  .pendulum-stage {
    padding: 54px 8px 26px;
    gap: 4px;
  }
  .pendulum-stage::before {
    top: 40px;
    left: 7%;
    right: 7%;
  }
  .pendulum {
    width: 52px;
    height: 185px;
  }
  .pendulum-bob {
    width: 32px;
    height: 32px;
  }
  .season-stage {
    min-height: 340px;
  }
  .season-window {
    width: 86%;
    height: 270px;
  }
  .season-tree {
    left: 28%;
    height: 120px;
  }
  .season-tree i {
    width: 82px;
    height: 64px;
  }
  .animation-panel-controls {
    align-items: stretch;
  }
  .range-control {
    grid-template-columns: 1fr 3.1em;
    width: 100%;
  }
  .range-control > span {
    grid-column: 1 / -1;
  }
  .text-control {
    grid-template-columns: 1fr;
  }
  .animation-panel-controls .button {
    flex: 1 1 100%;
  }
  .route-controls .route-button {
    flex: 1;
    min-width: 0;
  }
  .play-cat {
    width: 142px;
  }
  .animation-lab-footer-actions {
    justify-content: stretch;
  }
  .animation-lab-footer-actions .button {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animation-lab-page .tile-mandala,
  .animation-lab-page .play-cat,
  .animation-lab-page .animation-panel,
  .animation-lab-page .text-control input,
  .animation-lab-page .season-window,
  .animation-lab-page .season-sun,
  .animation-lab-page .season-tree i {
    transition: none;
  }
}

[data-theme="dark"] .animation-lab-page {
  --rapport-human: #e1b863;
  --rapport-robot: #8fc8bb;
  --rapport-connection: #d6c28f;
}