/* =====================================================================
   Interactions - v2 (magnetic buttons, tilt cards, drawn underlines)
   ===================================================================== */

/* ---------- magnetic buttons ---------- */
.btn {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 200ms var(--ease-out), background-color var(--dur-quick) var(--ease-out),
              color var(--dur-quick) var(--ease-out), box-shadow var(--dur-std) var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px)); }
.btn.is-leaving { transition: transform 500ms var(--ease-spring); }
.btn:active, .btn.is-pressed {
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.97);
  transition-duration: 90ms;
}
.btn > span[aria-hidden] {
  display: inline-block;
  transition: transform var(--dur-std) var(--ease-out);
}
.btn:hover > span[aria-hidden] { transform: translate(3px, -3px); }

/* ---------- text links: arrow slides, underline draws ---------- */
.text-link {
  position: relative;
  transition: color var(--dur-quick) var(--ease-out);
}
.text-link > span[aria-hidden] {
  display: inline-block;
  transition: transform var(--dur-std) var(--ease-out);
}
.text-link:hover > span[aria-hidden] { transform: translate(3px, -3px); }
.text-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-std) var(--ease-out);
}
.text-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- nav ---------- */
.nav a {
  position: relative;
  transition: color var(--dur-quick) var(--ease-out), opacity var(--dur-quick) var(--ease-out);
}
.nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--blue);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-std) var(--ease-out);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav:hover a:not(:hover) { opacity: .55; }

/* ---------- header ---------- */
.site-header {
  transition: box-shadow var(--dur-std) var(--ease-out), background-color var(--dur-std) var(--ease-out);
}
.site-header .wordmark img {
  transform-origin: left center;
  transition: transform var(--dur-std) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(17, 17, 26, .08); }
.site-header.is-scrolled .wordmark img { transform: scale(.92); }

/* ---------- tilt cards ---------- */
.route-option, .story-card, .case-card {
  transition: transform var(--dur-std) var(--ease-out), box-shadow var(--dur-std) var(--ease-out);
  transform-style: preserve-3d;
}
.route-option:hover, .story-card:hover, .case-card:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(17, 17, 26, .35);
}
.route-option.is-tilting, .story-card.is-tilting, .case-card.is-tilting { transition-duration: 80ms; }
.route-option img, .story-card .video-box, .case-card img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.route-option:hover img, .case-card:hover img { transform: scale(1.04); }

/* ---------- why list / academy notes: label shift ---------- */
.why-list article, .academy-notes article {
  transition: transform var(--dur-std) var(--ease-out), background-color var(--dur-std) var(--ease-out);
}
.why-list article:hover, .academy-notes article:hover { transform: translateX(6px); }

/* ---------- steps: number spins in on hover ---------- */
.steps li > span { transition: transform var(--dur-std) var(--ease-spring); }
.steps li:hover > span { transform: rotate(-8deg) scale(1.08); }

/* ---------- lab accordion ---------- */
.lab-badge-trigger {
  transition: transform var(--dur-std) var(--ease-spring), background-color var(--dur-quick) var(--ease-out);
}
.lab-badge-trigger:hover { transform: scale(1.05); }
.lab-badge-trigger[aria-expanded="true"] { transform: scale(1.05) rotate(-3deg); }
/* Desktop shows all three cards; the accordion only exists on mobile (styles.css <=720px).
   There the hidden card is display:none, so animate the card that opens. */
@media (max-width: 720px) {
  .lab-feature-card.is-open { animation: mm-card var(--dur-slow) var(--ease-expo) backwards; --r: var(--radius-md); }
}

/* ---------- FAQ details ---------- */
.faq-list details {
  transition: background-color var(--dur-std) var(--ease-out), transform var(--dur-std) var(--ease-out);
}
.faq-list details:hover:not([open]) { transform: translateX(4px); }
.faq-list summary { transition: color var(--dur-quick) var(--ease-out); }
.faq-list summary::after, .faq-list summary > span:last-child {
  transition: transform var(--dur-std) var(--ease-spring);
}
.faq-list details[open] summary::after,
.faq-list details[open] summary > span:last-child { transform: rotate(45deg); }
.faq-list details.is-closing summary::after,
.faq-list details.is-closing summary > span:last-child { transform: rotate(0deg); }
.faq-list details[open] > *:not(summary) {
  animation: mm-focus var(--dur-std) var(--ease-out) backwards;
}

/* ---------- carousel controls / class list ---------- */
.carousel-controls button { transition: transform var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out); }
.carousel-controls button:hover { transform: scale(1.08); }
.carousel-controls button.is-pressed { transform: scale(.92); }
.class-list li { transition: transform var(--dur-std) var(--ease-out); }
.class-list li:hover { transform: translateX(6px); }

/* ---------- hero dots ---------- */
.hero-dots span { transition: transform var(--dur-std) var(--ease-spring), background-color var(--dur-std) var(--ease-out); }
.hero-dots span.is-active { transform: scale(1.2); }

/* ---------- focus ---------- */
:is(a, button, summary):focus-visible { outline-offset: 3px; transition: outline-offset var(--dur-quick) var(--ease-out); }

/* ---------- touch: no hover gestures ---------- */
@media (hover: none) {
  .btn:hover { transform: none; }
  .route-option:hover, .story-card:hover, .case-card:hover { transform: none; box-shadow: none; }
  .route-option:hover img, .case-card:hover img { transform: none; }
  .why-list article:hover, .academy-notes article:hover, .class-list li:hover,
  .faq-list details:hover:not([open]) { transform: none; }
  .nav:hover a:not(:hover) { opacity: 1; }
  .nav a::after, .text-link::after { display: none; }
  .btn.is-pressed { transform: scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active, .btn.is-pressed { transform: none; }
  .route-option:hover, .story-card:hover, .case-card:hover,
  .route-option:hover img, .case-card:hover img,
  .why-list article:hover, .academy-notes article:hover, .class-list li:hover,
  .steps li:hover > span, .lab-badge-trigger:hover, .lab-badge-trigger[aria-expanded="true"],
  .faq-list details:hover:not([open]), .carousel-controls button:hover,
  .site-header.is-scrolled .wordmark img { transform: none; }
  .lab-feature-card.is-open { animation: none; }
  .faq-list details[open] > *:not(summary) { animation: none; }
  .nav a::after, .text-link::after { transition: none; }
}