/* Motion layer - Astryx-inspired micro-interactions (vanilla CSS, no React) */

@media (prefers-reduced-motion: no-preference) {
  /* Only hide when JS opted in; never leave blank layout if observer misses */
  html.js .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(16px);
  }

  html.js .reveal {
    transition:
      opacity var(--dur-slow) var(--ease-emphasized),
      transform var(--dur-slow) var(--ease-emphasized);
  }

  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  html.js .reveal-stagger:not(.is-visible) > * {
    opacity: 0;
    transform: translateY(12px);
  }

  html.js .reveal-stagger > * {
    transition:
      opacity var(--dur-slow) var(--ease-emphasized),
      transform var(--dur-slow) var(--ease-emphasized);
  }

  html.js .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  html.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
  html.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }

  html.js .reveal-stagger.is-visible > * {
    opacity: 1;
    transform: none;
  }

  /* Hero load - only hide when JS opts in; never leave a blank page if JS misses */
  html.js .hero-stagger:not(.is-ready) > * {
    opacity: 0;
    transform: translateY(18px);
  }

  html.js .hero-stagger > * {
    transition:
      opacity 520ms var(--ease-emphasized),
      transform 520ms var(--ease-emphasized);
  }

  html.js .hero-stagger.is-ready > *:nth-child(1) { transition-delay: 0ms; }
  html.js .hero-stagger.is-ready > *:nth-child(2) { transition-delay: 70ms; }
  html.js .hero-stagger.is-ready > *:nth-child(3) { transition-delay: 140ms; }
  html.js .hero-stagger.is-ready > *:nth-child(4) { transition-delay: 210ms; }
  html.js .hero-stagger.is-ready > *:nth-child(5) { transition-delay: 280ms; }
  html.js .hero-stagger.is-ready > *:nth-child(6) { transition-delay: 350ms; }

  html.js .hero-stagger.is-ready > * {
    opacity: 1;
    transform: none;
  }

  /* Results - score card + bar reveal */
  .results.is-entering .score-card {
    animation: score-rise 640ms var(--ease-emphasized) both;
  }

  .results.is-entering .bar .bt i {
    transform: scaleX(0);
    animation: bar-grow 720ms var(--ease-emphasized) forwards;
  }

  .results.is-entering .bar:nth-child(2) .bt i { animation-delay: 80ms; }
  .results.is-entering .bar:nth-child(3) .bt i { animation-delay: 140ms; }
  .results.is-entering .bar:nth-child(4) .bt i { animation-delay: 200ms; }
  .results.is-entering .bar:nth-child(5) .bt i { animation-delay: 260ms; }
  .results.is-entering .bar:nth-child(6) .bt i { animation-delay: 320ms; }
  .results.is-entering .bar:nth-child(7) .bt i { animation-delay: 380ms; }

  @keyframes score-rise {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes bar-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .hero-stagger > * {
    opacity: 1;
    transform: none;
  }
}

/* Buttons - arrow slide on hover (Astryx-style affordance) */
.btn {
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast),
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    opacity: 1;
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(0);
  }

  .btn svg {
    transition: transform var(--dur-base) var(--ease-emphasized);
  }

  .btn:hover svg {
    transform: translateX(3px);
  }
}

.btn:focus-visible {
  outline: 2px solid var(--rodan-lavender);
  outline-offset: 3px;
}

/* Assessment option cards */
@media (prefers-reduced-motion: no-preference) {
  .opt {
    transition:
      border-color var(--dur-base) var(--ease-standard),
      background var(--dur-base),
      transform var(--dur-fast) var(--ease-standard);
  }

  .opt:hover {
    transform: translateY(-2px);
  }

  .opt:active {
    transform: translateY(0);
  }
}

.opt:focus-visible {
  outline: 2px solid var(--rodan-lavender);
  outline-offset: 2px;
}