/* Per-band choreography and micro-interactions, on top of the engine in motion.css.
   Same rules: transform, opacity and clip-path only; hover effects only where hover exists. */

/* ---------- 2 · Proof strip: the rule draws in from the left, the figures count up ---------- */

.proof {
  position: relative;
}

.js .proof {
  background-image: none;
}

.js .proof::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--stitch-dot);
  background-image: var(--stitch);
  background-size: var(--stitch-pitch) var(--stitch-dot);
  background-repeat: repeat-x;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1300ms var(--ease-out-expo);
}

.js .proof.is-in::before {
  transform: scaleX(1);
}

.proof__figure {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- 3 · Theme: the staircase grows out from the centre, the questions follow the title ---------- */

.js .theme-card::before {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1300ms var(--ease-out-expo) 120ms;
}

.js .theme-card.is-in::before {
  clip-path: inset(0 0 0 0);
}

.js .questions > * {
  transition-delay: calc(520ms + var(--i, 0) * 70ms);
}

@media (hover: hover) {
  .patch {
    transition: rotate var(--duration-slow) var(--ease-spring);
  }

  .patch:hover {
    rotate: calc(var(--tilt) * -0.5);
  }
}

/* ---------- 4 · Stage: the legend keys follow the mandala; the drawer slides open ---------- */

.js .legend--keys > * {
  transition-delay: calc(360ms + var(--i, 0) * 70ms);
}

.past {
  interpolate-size: allow-keywords;
}

.past::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size 560ms var(--ease-out-expo),
    content-visibility 560ms allow-discrete;
}

.past[open]::details-content {
  block-size: auto;
}

@media (hover: hover) {
  .speaker-lead__avatar {
    transition: transform var(--duration-normal) var(--ease-spring);
  }

  .speaker-lead:hover .speaker-lead__avatar {
    transform: scale(1.12) rotate(-4deg);
  }
}

/* ---------- 5 · Programme: tiles settle in; hovering ripples the motif ring by ring ---------- */

.js .tracks > li {
  transform: translateY(18px) scale(0.97);
}

.js .is-in.tracks > li {
  transform: none;
}

@media (hover: hover) {
  .track:hover .motif > * {
    transform: scale(1.2);
  }

  .track__index {
    transition:
      transform var(--duration-normal) var(--ease-spring),
      opacity var(--duration-normal) var(--ease-out-expo);
  }

  .track:hover .track__index {
    transform: translateX(-4px);
    opacity: 1;
  }
}

/* ---------- 6 · Compete: the cards tilt towards the pointer, the photo sits deeper ---------- */

.js .is-in.stagger > [data-tilt] {
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:
    opacity 600ms var(--ease-out-expo),
    transform 560ms var(--ease-out-expo);
  transition-delay: 0ms;
}

.js .is-in.stagger > [data-tilt].is-tilting {
  transition-duration: 600ms, 160ms;
  transition-timing-function: var(--ease-out-expo), linear;
}

/* ---------- 8 · Press: the outlet's colours return on hover ---------- */

@media (hover: hover) {
  .clipping__logo {
    transition: filter var(--duration-normal) var(--ease-out-expo);
  }

  .clipping:hover .clipping__logo {
    filter: none;
  }
}

/* ---------- 9 · Partners: the wall fills from the top left ---------- */

.js .logo-wall > * {
  transform: translateY(10px) scale(0.94);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.js .is-in.logo-wall > * {
  transform: none;
}

/* ---------- 10 · Doors: the stitch runs, the name steps forward ---------- */

.door__name,
.door__index {
  transition:
    color var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-spring);
}

.door__arrow::before,
.door__arrow::after {
  transition: transform 420ms var(--ease-spring);
}

@media (hover: hover) {
  .door:hover .door__name {
    transform: translateX(6px);
  }

  .door:hover .door__index {
    color: var(--hue);
  }

  .door:hover .door__arrow::before {
    transform: translateX(5px);
  }

  .door:hover .door__arrow::after {
    transform: translateX(11px);
    transition-delay: 70ms;
  }
}

.door:focus-visible .door__arrow::before {
  transform: translateX(5px);
}

.door:focus-visible .door__arrow::after {
  transform: translateX(11px);
  transition-delay: 70ms;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .proof {
    background-image: var(--stitch);
  }

  .js .proof::before {
    display: none;
  }

  .js .theme-card::before {
    clip-path: none;
    transition: none;
  }

  .js .tracks > li,
  .js .logo-wall > *,
  .js .is-in.stagger > [data-tilt] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .past::details-content {
    transition: none;
  }

  .patch,
  .speaker-lead__avatar,
  .track__index,
  .door__name,
  .door__index,
  .door__arrow::before,
  .door__arrow::after,
  .clipping__logo {
    transition: none;
  }

  .track:hover .motif > * {
    transform: scale(1);
  }
}