/**
 * Canonical bull-charge logo animation — single source of truth.
 *
 * Used by:
 *  - brand/logo-intro.html (dev lab, via @import in brand/logo-intro.css)
 *  - brand/logo-splash.html (public shareable page)
 *  - views/partials/logo_intro_splash.php (production loading overlay)
 *
 * No bare `*`/`body` resets here on purpose — this file is safe to load
 * site-wide without clobbering global page styles. Callers provide their
 * own outer layout (.stage sizing context) and the markup below.
 *
 * Required markup:
 *   <div class="stage">
 *     <div class="streaks" aria-hidden="true"><span></span>x5</div>
 *     <div class="logo-wrap screen-shake-on">
 *       <div class="impact" aria-hidden="true"></div>
 *       <div class="snort" aria-hidden="true"><i></i>x5</div>
 *       <div class="bull-layer">
 *         <div class="bull-inner"><img class="logo-bull" src="..." /></div>
 *       </div>
 *       <img class="logo-full" src="..." />
 *     </div>
 *     <div class="scanlines" aria-hidden="true"></div>
 *     <div class="vignette" aria-hidden="true"></div>
 *   </div>
 *
 * `.bull-layer` clip-path must be set via JS (no default — see
 * brand/logo-splash.js / js/logo-intro-splash.js for the hand-tuned hex).
 */
:root {
  --green: #419f2a;
  --red: #b3192f;
  --stage-bg: #050508;
  --glow-g: rgba(65, 159, 42, 0.45);
  --glow-r: rgba(179, 25, 47, 0.35);
  --charge-dur: 0.85s;
  --charge-dist: -120%;
  --shake-start: 0.88s;
  --shake-dur: 0.42s;
  --shake-count: 3;
  --shake-deg: 7deg;
  --reveal-at: 1.35s;
  --impact-at: 0.82s;
  --screen-shake-at: 1.05s;
  --preview-max-w: 960px;
}

.stage {
  position: relative;
  width: 100%;
  min-height: min(72vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stage-bg);
  perspective: 1200px;
}

.stage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(65,159,42,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(179,25,47,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}

.scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.12) 2px,
    rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
  z-index: 20;
  opacity: 0.35;
}

.scanlines.is-off { display: none; }

.vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 120px rgba(0,0,0,0.9);
  pointer-events: none;
  z-index: 19;
}

.vignette.is-off { display: none; }

.streaks {
  position: absolute;
  left: 0; top: 50%;
  width: 55%; height: 40%;
  transform: translateY(-50%);
  overflow: hidden;
  z-index: 2;
  opacity: 0;
  animation: streaks-in 0.6s ease-out 0.1s forwards;
}

.streaks.is-off { display: none; }

.streaks span {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0;
  animation: streak-fly 0.45s ease-out forwards;
}

.streaks span:nth-child(1) { top: 35%; width: 40%; left: -40%; animation-delay: 0.15s; }
.streaks span:nth-child(2) { top: 48%; width: 55%; left: -55%; animation-delay: 0.22s; height: 3px; }
.streaks span:nth-child(3) { top: 58%; width: 35%; left: -35%; animation-delay: 0.28s; }
.streaks span:nth-child(4) { top: 42%; width: 48%; left: -48%; animation-delay: 0.18s; opacity: 0.6; background: linear-gradient(90deg, transparent, var(--red), transparent); }
.streaks span:nth-child(5) { top: 52%; width: 60%; left: -60%; animation-delay: 0.32s; height: 1px; }

@keyframes streak-fly {
  0%   { transform: translateX(0); opacity: 0; }
  20%  { opacity: 0.9; }
  100% { transform: translateX(180%); opacity: 0; }
}

@keyframes streaks-in { to { opacity: 1; } }

.logo-wrap {
  position: relative;
  width: min(92%, var(--preview-max-w));
  aspect-ratio: 1770 / 999;
  z-index: 5;
}

.logo-wrap.screen-shake-on {
  animation: screen-shake 0.55s ease-out var(--screen-shake-at);
}

.logo-wrap img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.logo-full {
  opacity: 0;
  animation: logo-reveal 0.5s ease-out var(--reveal-at) forwards;
  filter: drop-shadow(0 0 24px var(--glow-g)) drop-shadow(0 0 40px var(--glow-r));
}

@keyframes logo-reveal {
  0%   { opacity: 0; filter: brightness(2) drop-shadow(0 0 60px var(--glow-g)); }
  40%  { opacity: 1; filter: brightness(1.4) drop-shadow(0 0 40px var(--glow-g)); }
  100% { opacity: 1; filter: drop-shadow(0 0 24px var(--glow-g)) drop-shadow(0 0 40px var(--glow-r)); }
}

/* Bull = same PNG as full logo, clip-path set by JS (hand-tuned hex) */
.bull-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 8;
  animation: bull-charge var(--charge-dur) cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

.logo-wrap.is-frozen .bull-layer,
.logo-wrap.is-frozen .bull-inner,
.logo-wrap.is-frozen .logo-full,
.logo-wrap.is-frozen .impact,
.logo-wrap.is-frozen .streaks {
  animation: none !important;
}

.logo-wrap.is-frozen .logo-full {
  opacity: 0;
}

.logo-wrap.is-frozen .bull-layer,
.logo-wrap.is-frozen .bull-inner {
  transform: none !important;
  filter: none !important;
}

.bull-inner {
  width: 100%;
  height: 100%;
  transform-origin: 52% 46%;
  animation:
    bull-shake var(--shake-dur) ease-in-out var(--shake-start) var(--shake-count),
    bull-settle 0.3s ease-out calc(var(--shake-start) + var(--shake-dur) * var(--shake-count)) forwards;
}

@keyframes bull-charge {
  0% {
    transform: translateX(var(--charge-dist)) scale(1.08);
    filter: blur(3px) brightness(1.6);
  }
  55% {
    transform: translateX(4%) scale(1.02);
    filter: blur(0) brightness(1.3);
  }
  75% { transform: translateX(-2%) scale(1); }
  100% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes bull-shake {
  0%   { transform: rotate(0deg) translateY(0); }
  15%  { transform: rotate(calc(var(--shake-deg) * -1)) translateY(-4px) scale(1.03); }
  30%  { transform: rotate(var(--shake-deg)) translateY(3px); }
  45%  { transform: rotate(calc(var(--shake-deg) * -0.72)) translateY(-2px) scale(1.02); }
  60%  { transform: rotate(calc(var(--shake-deg) * 0.55)) translateY(2px); }
  75%  { transform: rotate(calc(var(--shake-deg) * -0.28)) translateY(-1px); }
  100% { transform: rotate(0deg) translateY(0); }
}

@keyframes bull-settle {
  to { transform: rotate(0) translateY(0) scale(1); }
}

.impact {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(65,159,42,0.35) 0%, rgba(179,25,47,0.15) 35%, transparent 65%);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
  animation: impact-flash 0.35s ease-out var(--impact-at) forwards;
}

@keyframes impact-flash {
  0%   { opacity: 0; transform: scale(0.6); }
  30%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  12%  { transform: translate(-6px, 3px); }
  24%  { transform: translate(5px, -4px); }
  36%  { transform: translate(-4px, 2px); }
  48%  { transform: translate(3px, -2px); }
  60%  { transform: translate(-2px, 1px); }
}

.snort {
  position: absolute;
  top: 44%; left: 58%;
  width: 0; height: 0;
  z-index: 9;
  pointer-events: none;
}

.snort.is-off { display: none; }

.snort i {
  position: absolute;
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(179, 25, 47, 0.7);
  opacity: 0;
  animation: snort-burst 0.35s ease-out forwards;
}

.snort i:nth-child(1) { animation-delay: calc(var(--shake-start) + 0.04s); --dx: 28px; --dy: -8px; }
.snort i:nth-child(2) { animation-delay: calc(var(--shake-start) + 0.07s); --dx: 34px; --dy: 4px; width: 4px; height: 4px; }
.snort i:nth-child(3) { animation-delay: calc(var(--shake-start) + 0.1s); --dx: 22px; --dy: 10px; width: 5px; height: 5px; }
.snort i:nth-child(4) { animation-delay: calc(var(--shake-start) + 0.14s); --dx: 40px; --dy: -2px; background: rgba(65,159,42,0.5); }
.snort i:nth-child(5) { animation-delay: calc(var(--shake-start) + 0.17s); --dx: 30px; --dy: 14px; width: 3px; height: 3px; }

@keyframes snort-burst {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.3); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.6); }
}