/* =============================================================================
 * HONORICH — Motion
 * Keyframes, reveal helpers, parallax hooks, reduced-motion overrides.
 * ===========================================================================*/

/* ----------------------------------------------------------
 * Keyframes
 * ---------------------------------------------------------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-8px) rotate(1.5deg); }
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes pulseGold {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200, 160, 85, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(200, 160, 85, 0);
  }
}

/* ----------------------------------------------------------
 * Reveal helpers — applied by IntersectionObserver in motion.js
 * ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--d-slow) var(--e-out),
              transform var(--d-slow) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--fade {
  transform: none;
}

.reveal--left {
  transform: translateX(-24px);
}

.reveal--left.is-visible {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(24px);
}

.reveal--right.is-visible {
  transform: translateX(0);
}

/* Staggered children inside the same group */
.stagger > .reveal:nth-child(1)  { --reveal-delay: 0ms; }
.stagger > .reveal:nth-child(2)  { --reveal-delay: 80ms; }
.stagger > .reveal:nth-child(3)  { --reveal-delay: 160ms; }
.stagger > .reveal:nth-child(4)  { --reveal-delay: 240ms; }
.stagger > .reveal:nth-child(5)  { --reveal-delay: 320ms; }
.stagger > .reveal:nth-child(6)  { --reveal-delay: 400ms; }
.stagger > .reveal:nth-child(7)  { --reveal-delay: 480ms; }
.stagger > .reveal:nth-child(8)  { --reveal-delay: 560ms; }
.stagger > .reveal:nth-child(9)  { --reveal-delay: 640ms; }
.stagger > .reveal:nth-child(10) { --reveal-delay: 720ms; }

/* Heading highlight sweep on first paint for the hero */
.sweep {
  background: linear-gradient(
    90deg,
    var(--c-gold) 0%,
    rgba(250, 248, 244, 0.95) 50%,
    var(--c-gold) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 6s linear infinite;
}

/* ----------------------------------------------------------
 * Parallax hook (motion.js writes `--parallax-y` on .parallax-bg)
 * ---------------------------------------------------------- */
.parallax-bg {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

.no-parallax .parallax-bg {
  transform: none !important;
}

/* ----------------------------------------------------------
 * Marquee for partner/category ticker (optional section)
 * ---------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  --gap: 3rem;
}

.marquee__track {
  display: inline-flex;
  gap: var(--gap);
  animation: marquee 30s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ----------------------------------------------------------
 * Focus pulse for primary CTA on first paint (subtle, can be disabled)
 * ---------------------------------------------------------- */
.cta-pulse {
  animation: pulseGold 2.4s var(--e-in-out) 1;
}

/* ----------------------------------------------------------
 * Respect prefers-reduced-motion at the keyframe level
 * ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .sweep,
  .marquee__track,
  .mascot-floats,
  .cta-pulse {
    animation: none !important;
  }

  .parallax-bg {
    transform: none !important;
  }
}

/* ----------------------------------------------------------
 * Print rules (best-effort legal readability)
 * ---------------------------------------------------------- */
@media print {
  body {
    color: #000;
    background: #fff;
  }

  .site-header,
  .site-footer,
  .consent-banner,
  .nav-drawer {
    display: none !important;
  }

  .legal__toc {
    page-break-after: avoid;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }
}