/* ==========================================================================
   CSC — Animations
   Scroll-triggered, looping, and hover animations for illustrations.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.7; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes pulse-node {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.15); }
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes flow-line {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}
@keyframes grow-bar {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes shrink-bar {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.5); opacity: 0.5; }
}
@keyframes count-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes rotate-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dash-shift { to { stroke-dashoffset: -40; } }
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(35, 183, 156,0)); }
  50% { filter: drop-shadow(0 0 12px rgba(35, 183, 156,0.6)); }
}
@keyframes pan-right {
  0% { transform: translateX(0); }
  100% { transform: translateX(20px); }
}
@keyframes sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes shimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.9; }
}
@keyframes appear-from-bottom {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes morph-cost {
  0%   { d: path('M 0 200 L 200 200 L 200 100 L 0 100 Z'); }
  100% { d: path('M 0 200 L 200 200 L 200 130 L 0 130 Z'); }
}
@keyframes drop-in {
  0%   { transform: translateY(-180px); opacity: 0; }
  70%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes winner-pop {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- Reveal-and-animate (triggered when .is-revealed) ---------- */
.is-revealed .anim-grow-bar { animation: grow-bar 1.2s var(--ease, cubic-bezier(0.4,0,0.2,1)) forwards; transform-origin: bottom; }
.is-revealed .anim-grow-bar-1 { animation-delay: 0.1s; }
.is-revealed .anim-grow-bar-2 { animation-delay: 0.25s; }
.is-revealed .anim-grow-bar-3 { animation-delay: 0.4s; }
.is-revealed .anim-grow-bar-4 { animation-delay: 0.55s; }
.is-revealed .anim-grow-bar-5 { animation-delay: 0.7s; }
.is-revealed .anim-grow-bar-6 { animation-delay: 0.85s; }
.is-revealed .anim-grow-bar-7 { animation-delay: 1.0s; }

.is-revealed .anim-draw-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw-line 1.6s var(--ease) forwards; }
.is-revealed .anim-draw-path-1 { animation-delay: 0.2s; }
.is-revealed .anim-draw-path-2 { animation-delay: 0.6s; }
.is-revealed .anim-draw-path-3 { animation-delay: 1.0s; }

.is-revealed .anim-count { animation: count-fade 0.6s var(--ease) forwards; opacity: 0; }
.is-revealed .anim-count-1 { animation-delay: 0.3s; }
.is-revealed .anim-count-2 { animation-delay: 0.5s; }
.is-revealed .anim-count-3 { animation-delay: 0.7s; }
.is-revealed .anim-count-4 { animation-delay: 0.9s; }

.is-revealed .anim-shrink { animation: shrink-bar 1.4s var(--ease) 0.8s forwards; transform-origin: top; }

.is-revealed .anim-drop { opacity: 0; animation: drop-in 0.9s cubic-bezier(0.34, 1.36, 0.64, 1) forwards; }
.is-revealed .anim-drop-1 { animation-delay: 1.0s; }
.is-revealed .anim-drop-2 { animation-delay: 1.2s; }
.is-revealed .anim-drop-3 { animation-delay: 1.4s; }
.is-revealed .anim-drop-4 { animation-delay: 1.6s; }

.is-revealed .anim-winner-pop { opacity: 0; animation: winner-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 2.2s; transform-origin: center; }

/* ---------- Always-on loops ---------- */
.anim-pulse-ring { transform-origin: center; animation: pulse-ring 2.4s ease-out infinite; }
.anim-pulse-node { animation: pulse-node 2s ease-in-out infinite; }
.anim-pulse-node-1 { animation-delay: 0s; }
.anim-pulse-node-2 { animation-delay: 0.3s; }
.anim-pulse-node-3 { animation-delay: 0.6s; }
.anim-pulse-node-4 { animation-delay: 0.9s; }
.anim-pulse-node-5 { animation-delay: 1.2s; }
.anim-pulse-node-6 { animation-delay: 1.5s; }

.anim-flow { stroke-dasharray: 6 6; animation: dash-shift 2s linear infinite; }
.anim-flow-slow { stroke-dasharray: 6 6; animation: dash-shift 4s linear infinite; }

.anim-float { animation: float 4s ease-in-out infinite; }
.anim-rotate { animation: rotate-slow 18s linear infinite; transform-origin: center; }
.anim-glow { animation: glow 2.6s ease-in-out infinite; }
.anim-shimmer { animation: shimmer 2s ease-in-out infinite; }

/* Sweep / scanline */
.scanline { position: relative; overflow: hidden; }
.scanline::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(35, 183, 156,0.18), transparent); animation: sweep 3s linear infinite; }

/* Stagger helper */
.stagger > * { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.is-revealed.stagger > *,
.stagger.is-revealed > * { opacity: 1; transform: translateY(0); }
.is-revealed.stagger > *:nth-child(1) { transition-delay: 0.05s; }
.is-revealed.stagger > *:nth-child(2) { transition-delay: 0.15s; }
.is-revealed.stagger > *:nth-child(3) { transition-delay: 0.25s; }
.is-revealed.stagger > *:nth-child(4) { transition-delay: 0.35s; }
.is-revealed.stagger > *:nth-child(5) { transition-delay: 0.45s; }
.is-revealed.stagger > *:nth-child(6) { transition-delay: 0.55s; }
.is-revealed.stagger > *:nth-child(7) { transition-delay: 0.65s; }
.is-revealed.stagger > *:nth-child(8) { transition-delay: 0.75s; }

/* Hover-driven micro-interactions */
.tile { overflow: hidden; position: relative; }
.tile::before { content: ""; position: absolute; inset: -2px; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(35, 183, 156,0.12), transparent 40%); opacity: 0; transition: opacity 250ms var(--ease); pointer-events: none; }
.tile:hover::before { opacity: 1; }

/* Illustration container — gives illustrations a consistent floor */
.illus { width: 100%; height: auto; display: block; }
.illus-wide { aspect-ratio: 16 / 9; background: var(--color-bg-2); border-radius: var(--radius-lg); padding: var(--space-6); position: relative; overflow: hidden; }
.illus-square { aspect-ratio: 1 / 1; }
.illus-tall { aspect-ratio: 3 / 4; }

/* Marquee for logo bar (animated) */
.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: var(--space-12); animation: marquee 40s linear infinite; flex-shrink: 0; padding-right: var(--space-12); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .anim-pulse-ring, .anim-pulse-node, .anim-flow, .anim-flow-slow, .anim-float, .anim-rotate, .anim-glow, .anim-shimmer, .scanline::after, .marquee-track {
    animation: none !important;
  }
  .is-revealed .anim-grow-bar, .is-revealed .anim-draw-path, .is-revealed .anim-count, .is-revealed .anim-shrink, .is-revealed .anim-drop, .is-revealed .anim-winner-pop, .is-revealed.stagger > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   THEME SWITCH — headlight beam sweep
   A tall, blurred shaft of light (skewed ~14°, like a beam hitting the
   road at an angle) sweeps across the screen in ~0.9s. main.js flips the
   theme at ~420ms, right as the beam crosses mid-screen, so the color
   change is "revealed" by the light passing over the page.
   To light  = warm amber-white beam (headlights flicking on toward you).
   To dark   = cool, dim blue-grey sweep (lights fading off).
   GPU-friendly: fixed overlay, transform-only animation, no layout work.
   ========================================================================== */

.theme-beam {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

/* The beam itself: skewed gradient shaft, blurred, swept via translateX.
   The cubic-bezier accelerates through the middle of the screen. */
.theme-beam::before {
  content: "";
  position: absolute;
  top: -25vh;
  bottom: -25vh;
  left: 0;
  width: 34vw;
  min-width: 220px;
  filter: blur(16px);
  transform: translateX(-80vw) skewX(-14deg);
  will-change: transform;
  animation: theme-beam-sweep 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Warm amber-white — lights on */
.theme-beam-to-light::before {
  background: linear-gradient(90deg,
    rgba(255, 196, 92, 0)     0%,
    rgba(255, 205, 112, 0.45) 16%,
    rgba(255, 236, 196, 0.92) 42%,
    rgba(255, 248, 230, 0.98) 50%,
    rgba(255, 236, 196, 0.92) 58%,
    rgba(255, 205, 112, 0.45) 84%,
    rgba(255, 196, 92, 0)     100%);
}

/* Cool blue-grey — lights fading off */
.theme-beam-to-dark::before {
  background: linear-gradient(90deg,
    rgba(116, 138, 172, 0)    0%,
    rgba(126, 148, 184, 0.22) 16%,
    rgba(158, 180, 214, 0.48) 42%,
    rgba(176, 196, 226, 0.55) 50%,
    rgba(158, 180, 214, 0.48) 58%,
    rgba(126, 148, 184, 0.22) 84%,
    rgba(116, 138, 172, 0)    100%);
}

@keyframes theme-beam-sweep {
  from { transform: translateX(-80vw)  skewX(-14deg); }
  to   { transform: translateX(180vw) skewX(-14deg); }
}

/* Reduced motion: no beam at all (main.js also skips straight to the flip) */
@media (prefers-reduced-motion: reduce) {
  .theme-beam { display: none; }
}