/* ============================================================
   Cantori Animation System
   Entrance orchestration · Scroll reveals · Ambient glow
   · Micro-interactions · Page load indicator

   Owns: all animation keyframes and transition utilities
   Does not own: component layout, color tokens, spacing
   ============================================================ */

/* ========== PAGE LOAD PROGRESS BAR ========== */

/* Thin gold line animates across the top of the page on load */
.page-load-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #a87c28, #c9a961, #e0b44a, #c9a961);
  z-index: 9999;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .page-load-bar {
    animation: pageLoadProgress 800ms ease-out forwards;
  }
}

@keyframes pageLoadProgress {
  0%   { width: 0%;   opacity: 1; }
  75%  { width: 100%; opacity: 1; }
  90%  { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

/* ========== HERO STAGGERED ENTRANCE ========== */

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Each major child of .hero-inner enters in sequence */
@media (prefers-reduced-motion: no-preference) {
  .hero-wordmark-wrap {
    opacity: 0;
    animation: heroFadeUp 500ms ease-out 0ms both;
  }

  .hero .litur-day {
    opacity: 0;
    animation: heroFadeUp 500ms ease-out 120ms both;
  }

  .hero h1 {
    opacity: 0;
    animation: heroFadeUp 600ms ease-out 220ms both;
  }

  .hero .hero-lede {
    opacity: 0;
    animation: heroFadeUp 600ms ease-out 400ms both;
  }

  .hero .hero-cta {
    opacity: 0;
    animation: heroFadeUp 500ms ease-out 580ms both;
  }
}

/* ========== LOGO CANDLELIGHT GLOW PULSE ========== */

/* Hero-only: the ::before radial glow behind the wordmark breathes like candlelight */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-wordmark-wrap::before {
    animation: glowPulse 3.5s ease-in-out 1s infinite;
  }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.70; }
  50%       { opacity: 1.00; }
}

/* ========== SCROLL-TRIGGERED REVEALS ========== */

/* .animate-on-scroll: base state — hidden below viewport */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

/* .animate-heading variant — slightly longer, more deliberate */
.animate-heading {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

/* .animate-card variant — scale from 0.95 */
.animate-card {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* .animate-fade — pure opacity, no translate */
.animate-fade {
  opacity: 0;
  transition: opacity 500ms ease-out;
}

/* .animate-img — scale reveal for images */
.animate-img {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

/* Revealed state — JS adds .is-visible when element enters viewport */
.animate-on-scroll.is-visible,
.animate-heading.is-visible,
.animate-card.is-visible,
.animate-fade.is-visible,
.animate-img.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger delays for sibling cards — applied via data-stagger-index in JS */
.animate-card:nth-child(1) { transition-delay:   0ms; }
.animate-card:nth-child(2) { transition-delay:  80ms; }
.animate-card:nth-child(3) { transition-delay: 160ms; }
.animate-card:nth-child(4) { transition-delay: 240ms; }
.animate-card:nth-child(5) { transition-delay: 320ms; }
.animate-card:nth-child(6) { transition-delay: 400ms; }

/* Follow-up heading has a short delay after its section scrolls in */
.animate-heading + .animate-on-scroll {
  transition-delay: 100ms;
}

/* Reduced-motion: instant reveal, no transitions */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-heading,
  .animate-card,
  .animate-fade,
  .animate-img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========== NAV LINK HOVER UNDERLINE ========== */

/* Gold underline slides in from left on hover */
.site-nav-link {
  position: relative;
}

.site-nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 1.5px;
  background: var(--au4, #e0b44a);
  transition: width 200ms ease-out;
}

.site-nav-link:hover::after,
.site-nav-link--active::after {
  width: 100%;
}

/* ========== IMAGE HOVER SCALE ========== */

/* Screenshots, gallery frames, feature images lift gently on hover */
@media (prefers-reduced-motion: no-preference) {
  .screens-img,
  .ctv-screen,
  .gallery-frame img,
  .musician-screens-img {
    transition: transform 300ms ease-out, box-shadow 300ms ease-out;
  }

  .screens-img:hover,
  .ctv-screen:hover,
  .gallery-frame:hover img,
  .musician-screens-img:hover {
    transform: scale(1.025);
    box-shadow: 0 12px 40px rgba(26, 20, 8, 0.22);
  }
}

/* ========== BUTTON HOVER GLOW ========== */

/* Primary buttons: warm gold glow blooms on hover */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary {
    transition: background 150ms ease-out,
                box-shadow 150ms ease-out,
                transform   150ms ease-out,
                filter      150ms ease-out;
  }

  .btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 20px rgba(201, 169, 97, 0.55),
                0 0 28px rgba(201, 169, 97, 0.28),
                inset 0 1px 0 rgba(255,255,255,0.2);
  }

  /* Ghost / secondary buttons */
  .btn-ghost {
    transition: border-color 150ms ease-out,
                color        150ms ease-out,
                box-shadow   150ms ease-out;
  }

  .btn-ghost:hover {
    border-color: var(--au4, #e0b44a);
    color: var(--au4, #e0b44a);
    box-shadow: 0 0 12px rgba(201, 169, 97, 0.18);
  }
}

/* ========== LOGO NAV HOVER ========== */

@media (prefers-reduced-motion: no-preference) {
  .site-nav-brand:hover .logo-glow-wrap img,
  .footer-logo-mark:hover .logo-glow-wrap img {
    filter: brightness(1.1);
    transition: filter 200ms ease-out;
  }

  .logo-glow-wrap img {
    transition: filter 200ms ease-out;
  }
}

/* ========== HERO PARALLAX ========== */

/* The hero treble-clef watermark drifts subtly — JS controls the deeper parallax */
.hero-treble {
  will-change: transform;
}

/* ========== FOOTER SCROLL REVEAL ========== */

/* Footer visible by default — JS adds .footer-anim to opt in to the reveal.
   Essential content must never be hidden behind JS that may not run. */
.site-footer.footer-anim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.site-footer.footer-anim.footer-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== CARD HOVER LIFT ========== */

/* Feature cards, side cards: translateY(-4px) lift on hover */
@media (prefers-reduced-motion: no-preference) {
  .feature-item,
  .scard,
  .qc,
  .prx-tier-card {
    transition: transform 200ms ease-out,
                box-shadow 200ms ease-out,
                border-color 200ms ease-out;
  }

  .feature-item:hover,
  .scard:hover,
  .qc:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(26, 20, 8, 0.18),
                0 4px 16px rgba(26, 20, 8, 0.10);
  }
}

/* ========== ARIA CHAT PANEL PILLS STAGGER ========== */

/* Pills stagger into view when the Aria panel opens */
@media (prefers-reduced-motion: no-preference) {
  .aria-pill {
    animation: ariaPillIn 250ms ease-out both;
  }
  .aria-pill:nth-child(1) { animation-delay:  0ms; }
  .aria-pill:nth-child(2) { animation-delay: 50ms; }
  .aria-pill:nth-child(3) { animation-delay: 100ms; }
  .aria-pill:nth-child(4) { animation-delay: 150ms; }
  .aria-pill:nth-child(5) { animation-delay: 200ms; }
  .aria-pill:nth-child(6) { animation-delay: 250ms; }
}

@keyframes ariaPillIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}