/* =========================================================================
   Animation layer — scroll reveals, keyframes, decorative motion.
   All motion here is neutralized by the prefers-reduced-motion block
   at the bottom of this file.
   ========================================================================= */

/* ---- Page-enter fade (home.html, arriving from the splash) ----------------- */
@keyframes page-enter-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}
.page-enter-fade {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: #fff;
  pointer-events: none;
  animation: page-enter-fade 0.6s ease forwards;
}

/* ---- Scroll reveal ---------------------------------------------------------
   Usage: add class="reveal" to any element, optional modifiers
   reveal--left / reveal--right, and data-delay="100" (ms) for stagger.
   js/main.js adds .is-visible via IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal--left { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ---- Hero text entrance (index.html, on load not scroll) ------------------- */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__kicker, .hero__title, .hero__tagline, .hero__cta {
  opacity: 0;
  animation: hero-rise 0.8s var(--ease-out) forwards;
}
.hero__kicker { animation-delay: 0.1s; }
.hero__title { animation-delay: 0.3s; }
.hero__tagline { animation-delay: 0.55s; }
.hero__cta { animation-delay: 0.8s; }

/* ---- Gold glow pulse (badges, wax-seal accents) ----------------------------- */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(199,154,63,0.4); }
  50% { box-shadow: 0 0 18px rgba(228,186,99,0.65); }
}
.onair-badge { animation: glow-pulse 2.6s ease-in-out infinite; }

/* ---- Parchment texture (static — see note below) ------------------------------ */
/* This used to drift via an animated background-position. Animating
   background-position forces a full repaint of this layer on every frame
   (it isn't compositor-only like transform/opacity), and since this layer
   covers the entire viewport on every page, that repaint cost added up —
   it was one of several small compositing costs that, combined with the
   splash page's other effects, stalled the hero video. The texture itself
   was subtle enough that a static version reads almost identically. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(199,154,63,0.03) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(-45deg, rgba(58,46,34,0.02) 0 2px, transparent 2px 60px);
}

/* ---- KCRP marquee ------------------------------------------------------------ */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- Card corner flourish subtle shimmer (very restrained) ------------------- */
@keyframes corner-shimmer {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.card::before, .card::after { animation: corner-shimmer 4s ease-in-out infinite; }

/* ---- Reduced motion: neutralize everything ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    transition: opacity 0.3s linear;
    transform: none !important;
  }
  .hero__kicker, .hero__title, .hero__tagline, .hero__cta {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .onair-badge,
  .card::before, .card::after {
    animation: none !important;
  }
  .onair-marquee {
    animation: none !important;
    flex-wrap: wrap;
    white-space: normal;
  }
  .card:hover { transform: none; }
  .btn--primary:hover, .btn--outline:hover, .btn--glass:hover { transform: none; }
  .btn--glass:hover::after { animation: none !important; }
  .loading-overlay { transition: opacity 0.2s linear; }
  .page-enter-fade { animation: none; opacity: 0; }
}