/* ============================================================
   CareerWand — scroll-driven animation layer (native-first)
   Animate transform / opacity / filter only.
   ============================================================ */

/* Reading depth via scroll timeline */
@supports (animation-timeline: scroll()) {
  .progress-bar {
    animation: progress-grow linear;
    animation-timeline: scroll(root);
    animation-range: 0% 100%;
  }
}

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

/* Section reveals */
@supports (animation-timeline: view()) {
  .reveal {
    animation: fade-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  .hero-plane {
    animation: hero-parallax linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }

  /* Kinetic lines animate FROM visible (never blank hero / never wait on JS) */
  @media (prefers-reduced-motion: no-preference) {
    .headline.kinetic .line-inner {
      animation: line-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .headline.kinetic .line-mask:nth-child(1) .line-inner {
      animation-delay: 0.04s;
    }
    .headline.kinetic .line-mask:nth-child(2) .line-inner {
      animation-delay: 0.14s;
    }
    .headline.kinetic .line-mask:nth-child(3) .line-inner {
      animation-delay: 0.24s;
    }
  }

  .tree-phase {
    animation: phase-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}

@keyframes fade-rise {
  from {
    opacity: 0.25;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-parallax {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(8%) scale(1.04);
  }
}

@keyframes line-rise {
  from {
    transform: translateY(0.4em);
    opacity: 1;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes phase-rise {
  from {
    opacity: 0.15;
    transform: translateY(1.6rem) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Fallback when scroll-driven animations unsupported */
@supports not (animation-timeline: view()) {
  .reveal {
    opacity: 1;
    transform: none;
  }

  .headline.kinetic .line-inner {
    transform: none;
    opacity: 1;
  }
}

/* Reduced motion — collapse to simple fades or nothing */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-timeline: none !important;
    animation-timeline: auto !important;
  }

  .reveal,
  .headline.kinetic .line-inner,
  .hero-plane,
  .tree-phase,
  .progress-bar {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .hero-plane::before,
  .btn-primary::after {
    animation: none !important;
    display: none !important;
  }

  .brand-wand::after {
    animation: none !important;
  }

  .embers-canvas {
    display: none !important;
  }

  .progress-bar {
    display: none;
  }
}