/*
 * WebVegas — logo motion system. The mark, alive.
 * Animates the REAL mark (assets/logo-mark-transparent.svg, derived from the
 * locked artwork — never a redraw). Canonical motion source. WebVegas-owned
 * surfaces only. Locked 2026-06-13 · v2 2026-06-14.
 *
 * DOCTRINE (Sif + Baldr): it's a STAR. Stars don't spin — they TWINKLE.
 * The only allowed motions are twinkle physics: get slightly bigger (scale),
 * drift left<->right, shake a little, glow on/off, and spawn small accent dots.
 * NO rotation anywhere (CEO 2026-06-14). Premium brands breathe, they don't
 * blink: the resting logo carries a slow glow with a RARE twinkle. Glow color
 * is the brand coral constant so it works in or out of .wv-scope.
 * ACCESSIBILITY FLOOR: all perpetual motion is killed under
 * prefers-reduced-motion; a static soft glow remains.
 */

:root {
  --logo-glow:        rgba(232, 72, 85, 0.50);  /* sunset coral bloom */
  --logo-glow-soft:   rgba(232, 72, 85, 0.22);
  --logo-glow-strong: rgba(255, 140, 90, 0.65);
}

/* ── Keyframes (twinkle physics only — no rotate) ───────────────────────── */
/* LIVE — resting wink: breathing glow + a rare twinkle = slightly bigger + a
   tiny left-right shake. One keyframe so glow (filter) and motion (transform)
   never conflict; rides a single mark element so it works on a bare mark or
   inside a full lockup (only the mark moves). Most of the 7s is stillness. */
/* Breathing glow — the "turns on/off to glow," slow + calm */
@keyframes wv-logo-glow {
  0%, 100% { filter: drop-shadow(0 0 2px var(--logo-glow-soft)); }
  50%      { filter: drop-shadow(0 0 9px var(--logo-glow)); }
}
/* GRADIENT REVERSE-FLOW — the sunset gently reverses behind the mark, so the
   star feels in motion with NO jitter (CEO 2026-06-14: the shake felt awkward).
   Animates the inline gradient stop colors back and forth (orange<->coral),
   which reads as the sunset flowing through the silhouette. Requires INLINE SVG
   with stops classed .wv-gs1 / .wv-gs2; an <img> mark falls back to the glow only. */
/* FLASH — every ~4s the coral/red rips through the mark fast (a couple quick
   passes), then rest. CEO 2026-06-14: the slow reverse was barely noticeable.
   Top stop flashes a beat before the bottom so the flash reads as a pass.
   Glow flashes in sync (wv-logo-glow-flash). */
@keyframes wv-grad-1 {
  0%, 80%, 100% { stop-color: #FFAB50; }
  84% { stop-color: #FF6B5C; } 87% { stop-color: #E84855; } 90% { stop-color: #FF5A4D; } 94% { stop-color: #FFAB50; }
}
@keyframes wv-grad-2 {
  0%, 82%, 100% { stop-color: #E84855; }
  86% { stop-color: #FF6B5C; } 89% { stop-color: #C42D3C; } 92% { stop-color: #FF5A4D; } 96% { stop-color: #E84855; }
}
@keyframes wv-logo-glow-flash {
  0%, 100% { filter: drop-shadow(0 0 2px var(--logo-glow-soft)); }
  40% { filter: drop-shadow(0 0 6px var(--logo-glow)); }        /* gentle breathe */
  80% { filter: drop-shadow(0 0 2px var(--logo-glow-soft)); }
  85% { filter: drop-shadow(0 0 14px var(--logo-glow-strong)); }/* FLASH */
  89% { filter: drop-shadow(0 0 3px var(--logo-glow-soft)); }
  92% { filter: drop-shadow(0 0 11px var(--logo-glow)); }       /* second quick flash */
  96% { filter: drop-shadow(0 0 2px var(--logo-glow-soft)); }
}
/* PULSE — loader main mark: gets bigger/smaller + glows. NO spin. */
@keyframes wv-logo-pulse {
  0%, 100% { transform: scale(0.9);  filter: drop-shadow(0 0 2px var(--logo-glow-soft)); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 0 9px var(--logo-glow)); }
}
/* TWINKLE-POP — an accent dot spawns, peaks, fades (in place) */
@keyframes wv-twinkle-pop {
  0%, 100% { transform: scale(0); opacity: 0; }
  40%      { transform: scale(1); opacity: 1; }
  70%      { transform: scale(0.6); opacity: 0.5; }
}
/* ENTRANCE — twinkle-IN: scale up with a glow flash, NO rotation */
@keyframes wv-logo-pop {
  0%   { transform: scale(0.35); opacity: 0; }
  55%  { transform: scale(1.14); opacity: 1; filter: drop-shadow(0 0 13px var(--logo-glow)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--logo-glow-soft)); }
}
/* SUCCESS BURST — scale flash + glow spike, NO rotation */
@keyframes wv-logo-burst {
  0%   { transform: scale(1); filter: drop-shadow(0 0 2px var(--logo-glow-soft)); }
  35%  { transform: scale(1.34); filter: drop-shadow(0 0 16px var(--logo-glow-strong)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--logo-glow-soft)); }
}
/* Burst ring — an expanding sunset ring behind the mark */
@keyframes wv-logo-ring {
  0%   { transform: scale(0.6); opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0; }
}
/* Burst accent dot — a small accent flies outward (per-dot --tx/--ty) */
@keyframes wv-burst-sat {
  0%   { transform: translate(0,0) scale(0); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.1); opacity: 0; }
}

/* ── Accent dot — a tiny decorative CSS shape (a UI particle, not an asset) ─ */
.wv-sat {
  position: absolute; width: 9px; height: 9px; pointer-events: none;
  background: linear-gradient(135deg, var(--sunset-from, #FFAB50), var(--sunset-to, #E84855));
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  transform: scale(0); opacity: 0;
}
.wv-sat--sm { width: 6px; height: 6px; }
.wv-sat--lg { width: 12px; height: 12px; }

/* ── Wrapper + mark target ──────────────────────────────────────────────── */
.wv-spark { display: inline-flex; line-height: 0; }
.wv-spark svg, .wv-spark img { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
/* SVG sub-path must pivot around ITS OWN center, not the SVG (0,0) origin. */
.wv-spark .wv-spk { transform-box: fill-box; transform-origin: 50% 50%; }

/* RESTING WINK — slow glow + rare twinkle (bigger + shake), on the mark element. */
/* RESTING WINK — calm breathing glow + the gradient slowly reversing. NO shake. */
.wv-spark--wink .wv-spk,
.wv-spark--wink img       { animation: wv-logo-glow-flash 4s ease-in-out infinite; }
.wv-spark--wink .wv-gs1   { animation: wv-grad-1 4s ease-in-out infinite; }
.wv-spark--wink .wv-gs2   { animation: wv-grad-2 4s ease-in-out infinite; }

/* GLOW-ONLY — calmest option (no twinkle), for dense/serious surfaces */
.wv-spark--glow .wv-spk,
.wv-spark--glow img       { animation: wv-logo-glow 4.2s ease-in-out infinite; }

/* HOVER — a deliberate quick shimmer (glow + one fast gradient sweep) */
.wv-spark--interactive { cursor: pointer; }
.wv-spark--interactive:hover .wv-spk,
.wv-spark--interactive:hover img { animation: wv-logo-glow 0.7s ease-out 1; }

/* ENTRANCE — twinkle-in on mount */
.wv-spark--enter .wv-spk,
.wv-spark--enter img { animation: wv-logo-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* SUCCESS BURST — add .wv-spark--burst to fire. Mark flashes, a ring expands,
   and accent dots fly outward (place .wv-sat children for the dots). */
.wv-spark--burst { position: relative; }
.wv-spark--burst .wv-spk,
.wv-spark--burst img { animation: wv-logo-burst 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
.wv-spark--burst::after {
  content: ""; position: absolute; inset: -10%; border-radius: 50%;
  background: radial-gradient(circle, var(--logo-glow-strong) 0%, transparent 60%);
  animation: wv-logo-ring 0.7s ease-out 1; pointer-events: none;
}
.wv-spark--burst .wv-sat { top: 50%; left: 50%; margin: -4.5px 0 0 -4.5px; animation: wv-burst-sat 0.75s ease-out 1; }

/* ── Loader — the mark TWINKLES (pulse) + accent dots spawn around it. No spin. ─ */
.wv-loader { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.wv-loader .wv-core { width: 64%; height: 64%; }
.wv-loader .wv-core img, .wv-loader .wv-core svg { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; animation: wv-logo-pulse 1.4s ease-in-out infinite; }
/* Three accent dots twinkling on a stagger around the mark */
.wv-loader .wv-sat { animation: wv-twinkle-pop 1.4s ease-in-out infinite; }
.wv-loader .wv-sat:nth-child(2) { top: 4%;  left: 50%; margin-left: -4.5px; animation-delay: 0s; }
.wv-loader .wv-sat:nth-child(3) { bottom: 8%; left: 16%; animation-delay: 0.47s; }
.wv-loader .wv-sat:nth-child(4) { top: 38%; right: 4%; animation-delay: 0.93s; }
.wv-loader--sm { width: 26px; height: 26px; }
.wv-loader--lg { width: 68px; height: 68px; }
.wv-loader-block { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; }
.wv-loader-block .lbl { font-family: "Figtree", system-ui, sans-serif; font-size: 14px; color: #5A6675; }

/* ── Accessibility floor — kill perpetual motion, keep a static glow ─────── */
@media (prefers-reduced-motion: reduce) {
  .wv-spark--wink .wv-spk, .wv-spark--wink img,
  .wv-spark--glow .wv-spk, .wv-spark--glow img,
  .wv-spark--enter .wv-spk, .wv-spark--enter img,
  .wv-spark--interactive:hover .wv-spk, .wv-spark--interactive:hover img {
    animation: none !important; filter: drop-shadow(0 0 5px var(--logo-glow-soft)) !important; transform: none !important;
  }
  .wv-loader .wv-core img, .wv-loader .wv-core svg { animation: wv-logo-fade 1.4s ease-in-out infinite; }
  .wv-loader .wv-sat, .wv-spark--burst .wv-sat, .wv-spark--burst::after { animation: none !important; opacity: 0 !important; }
  /* gradient flow stops too; the mark holds its locked orange->coral */
  .wv-spark--wink .wv-gs1, .wv-spark--wink .wv-gs2,
  .wv-spark--interactive:hover .wv-gs1, .wv-spark--interactive:hover .wv-gs2 { animation: none !important; }
}
@keyframes wv-logo-fade { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }