/* ============================================================
   motion.css — hover affordances, entrance animations, scroll
   reveals, glass nav, progress bar, sticky storytelling, and
   the prefers-reduced-motion accessibility kill-switch.

   Split from app.css so the static layout layer stays under
   600 lines and the motion layer is easy to find/tune.
   Loaded AFTER app.css from base.html so its rules win on
   specificity ties.
   ============================================================ */

:root {
  /* Cinematic timing tokens. Slow, premium, ease-out. */
  --dur-cine: 800ms;
  --dur-cine-slow: 1100ms;
  --dur-cine-fast: 450ms;
  --ease-cine: cubic-bezier(.16, 1, .3, 1);
}

/* -- Scroll progress bar -------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 30;
  pointer-events: none;
  background: transparent;
}
.scroll-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--po-yellow), var(--po-orange));
  box-shadow: 0 0 14px rgba(242, 184, 48, .55);
  transition: width 80ms linear;
}

/* -- Glass nav: denser state once scrolled past 40px ---------------------- */
body.scrolled .header {
  background: rgba(255, 255, 255, .88);
  border-bottom-color: rgba(194, 207, 214, .55);
  box-shadow: 0 8px 32px rgba(13, 19, 28, .08);
  padding-top: .7rem;
  padding-bottom: .7rem;
}

/* -- Scroll reveal -------------------------------------------------------- */
/* Only hide reveal elements once JS is loaded; otherwise they stay visible
   so no-JS visitors get the full content. */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-cine) var(--ease-cine),
              transform var(--dur-cine) var(--ease-cine);
  will-change: opacity, transform;
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a .reveal-stagger.is-visible parent */
html.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-cine) var(--ease-cine),
              transform var(--dur-cine) var(--ease-cine);
}
html.js .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
html.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 110ms; }
html.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 220ms; }
html.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 330ms; }
html.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 440ms; }
html.js .reveal-stagger.is-visible > *:nth-child(n+6) { transition-delay: 550ms; }
html.js .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* -- Hero entrance cascade (CSS-only, on initial paint) ------------------- */
@keyframes po-hero-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-feature-content > * {
  opacity: 0;
  animation: po-hero-up var(--dur-cine-slow) var(--ease-cine) both;
}
.hero-feature-content > *:nth-child(1) { animation-delay: 120ms; }
.hero-feature-content > *:nth-child(2) { animation-delay: 240ms; }
.hero-feature-content > *:nth-child(3) { animation-delay: 360ms; }
.hero-feature-content > *:nth-child(4) { animation-delay: 480ms; }
.hero-feature-content > *:nth-child(5) { animation-delay: 600ms; }

/* -- Hero parallax: ensure the image can translate without revealing gaps */
.hero-feature-media img {
  will-change: transform;
}

/* -- Package card hover (preserved from previous pass) -------------------- */
.package-card {
  transition: transform .35s var(--ease-cine),
              box-shadow .35s ease,
              border-color .35s ease;
  will-change: transform;
}
.package-card:hover,
.package-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--po-yellow);
  box-shadow:
    0 24px 60px rgba(242, 184, 48, .28),
    0 0 0 1px var(--po-yellow) inset;
}
.package-photo {
  transition: transform .55s var(--ease-cine);
  will-change: transform;
}
.package-card:hover .package-photo,
.package-card:focus-within .package-photo {
  transform: scale(1.06);
}
.package-code {
  transition: color .25s ease, text-shadow .25s ease;
}
.package-card:hover .package-code,
.package-card:focus-within .package-code {
  color: var(--po-yellow);
  text-shadow: 0 0 14px rgba(242, 184, 48, .65);
}

/* -- Custom option card hover --------------------------------------------- */
.custom-option-card {
  transition: transform .35s var(--ease-cine),
              box-shadow .35s ease,
              border-color .35s ease;
}
.custom-option-card:hover,
.custom-option-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--po-yellow);
  box-shadow: 0 20px 40px rgba(26, 41, 66, .14);
}
.custom-option-photo {
  transition: transform .55s var(--ease-cine);
}
.custom-option-card:hover .custom-option-photo,
.custom-option-card:focus-within .custom-option-photo {
  transform: scale(1.05);
}
.custom-option-card h3 {
  transition: color .25s ease;
}
.custom-option-card:hover h3,
.custom-option-card:focus-within h3 {
  color: var(--po-orange);
}

/* -- FAQ hover ------------------------------------------------------------- */
.faq-item:hover,
.faq-item:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(26, 41, 66, .10);
}
.faq-item[open]:hover,
.faq-item[open]:focus-within {
  box-shadow: 0 22px 48px rgba(242, 184, 48, .2);
}

/* -- Stat card hover (preserved) ------------------------------------------ */
.stat {
  transition: transform .25s var(--ease-cine),
              box-shadow .25s ease,
              border-left-color .25s ease;
}
.stat:hover,
.stat:focus-within {
  transform: translateY(-3px);
  border-left-color: var(--po-orange);
  box-shadow: 0 16px 32px rgba(26, 41, 66, .10);
}

/* -- prefers-reduced-motion kill-switch ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .hero-feature-content > * { opacity: 1 !important; animation: none !important; }
  .hero-feature-media img { transform: none !important; }
  html.js .reveal,
  html.js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .package-card:hover,
  .package-card:focus-within,
  .custom-option-card:hover,
  .custom-option-card:focus-within,
  .faq-item:hover,
  .faq-item:focus-within,
  .stat:hover { transform: none !important; }
  .package-card:hover .package-photo,
  .custom-option-card:hover .custom-option-photo { transform: none !important; }
}