/* ══════════════════════════════════════════════════════════════════════
   helmet-3d.css — the Brawley Gladiators 3D helmet mark
   ──────────────────────────────────────────────────────────────────────
   Seven copies of the square crest are stacked on the Z axis so the logo
   has real thickness when it tilts. Load AFTER theme-gladiators.css.
   Markup is built by helmet-3d.js (Helmet3D.build) or written by hand —
   see index.html's hero for the hand-written form.

   Where it appears:
     .hero-helmet   home hero, tilts toward the pointer anywhere in the hero
     .helmet-brand  header mark on every page (injected into .logo-wrap);
                    on the home page it docks in once the hero helmet
                    scrolls out of view
     .helmet-coin   slow-spinning coin in the desktop footer
     .give-helmet   spinning coin above "Give Now" on the Support page

   Tunables are --helmet-* custom properties on .helmet-scene.
   ══════════════════════════════════════════════════════════════════════ */

.helmet-scene {
  --helmet-size: 320px;
  --helmet-blue: var(--cobalt, #2a5bb8);
  --helmet-gold: var(--accent, #e8ab3b);
  --helmet-depth: 6px;        /* distance between extrusion layers */
  --helmet-layers: 7;         /* number of .helmet-layer imgs */
  --helmet-ring-max: 1.75;    /* how far the pulse rings expand */
  --helmet-tilt-x: 0deg;      /* driven by JS on pointer move */
  --helmet-tilt-y: 0deg;

  position: relative;
  width: var(--helmet-size);
  height: var(--helmet-size);
  perspective: 1100px;
  perspective-origin: 50% 40%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Rotating 3D object */
.helmet-3d {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--helmet-tilt-x)) rotateY(var(--helmet-tilt-y));
  transition: transform 180ms ease-out;
  animation: helmet-float 6s ease-in-out infinite;
  will-change: transform;
}
.helmet-scene.is-tilting .helmet-3d { animation-play-state: paused; }

/* Extrusion stack */
.helmet-stack { position: absolute; inset: 0; transform-style: preserve-3d; }
.helmet-scene .helmet-layer {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; border-radius: 50%;
  /* soften the square photo's edges into the dark page */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 74%);
          mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 74%);
  transform: translateZ(calc(var(--i) * var(--helmet-depth) * -1));
  filter: brightness(calc(1 - var(--i) * 0.11)) saturate(calc(1 - var(--i) * 0.08));
  backface-visibility: hidden;
  pointer-events: none; user-select: none;
}
/* Front face gets the glow pulse */
.helmet-scene .helmet-layer[style*="--i:0"] { filter: none; animation: helmet-glow 2.8s ease-in-out infinite; }

/* Rim light that follows the tilt */
.helmet-rim {
  position: absolute; inset: -3%; border-radius: 50%; transform: translateZ(2px); pointer-events: none;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.10), transparent 32%),
    conic-gradient(from 200deg, transparent 0 55%, rgba(232,171,59,.45) 70%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle, transparent 58%, #000 66%, #000 72%, transparent 76%);
          mask-image: radial-gradient(circle, transparent 58%, #000 66%, #000 72%, transparent 76%);
  mix-blend-mode: screen;
  animation: helmet-rim 5.6s linear infinite;
}

/* Pulse rings behind the helmet */
.helmet-ring {
  position: absolute; inset: 6%; border-radius: 50%;
  border: 3px solid var(--helmet-blue);
  box-shadow: 0 0 18px 4px var(--helmet-blue), inset 0 0 24px var(--helmet-blue);
  opacity: 0;
  transform: translateZ(-60px) scale(.85);
  animation: helmet-ring 2.8s cubic-bezier(.2,.7,.3,1) infinite;
  pointer-events: none;
}
.helmet-ring--2 { animation-delay: .9s; border-color: var(--helmet-gold); box-shadow: 0 0 18px 4px var(--helmet-gold), inset 0 0 24px var(--helmet-gold); }
.helmet-ring--3 { animation-delay: 1.8s; }

/* Floor glow */
.helmet-scene::after {
  content: ""; position: absolute; left: 15%; right: 15%; bottom: -6%; height: 12%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(42,91,184,.55), transparent 70%);
  filter: blur(10px);
  animation: helmet-shadow 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes helmet-float {
  0%, 100% { transform: rotateX(var(--helmet-tilt-x)) rotateY(calc(var(--helmet-tilt-y) - 8deg)) translateY(0); }
  50%      { transform: rotateX(calc(var(--helmet-tilt-x) + 4deg)) rotateY(calc(var(--helmet-tilt-y) + 8deg)) translateY(-10px); }
}
@keyframes helmet-glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(42,91,184,.85)) drop-shadow(0 0 30px rgba(42,91,184,.45)) brightness(1); }
  50%      { filter: drop-shadow(0 0 14px rgba(232,171,59,.9)) drop-shadow(0 0 44px rgba(232,171,59,.5)) brightness(1.12); }
}
@keyframes helmet-ring {
  0%   { opacity: 0; transform: translateZ(-60px) scale(.9); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateZ(-60px) scale(var(--helmet-ring-max, 1.75)); }
}
@keyframes helmet-rim { to { transform: translateZ(2px) rotate(360deg); } }
@keyframes helmet-shadow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.82); opacity: .55; } }

/* ── Variants ──────────────────────────────────────────────────────── */

/* --mini: inline/header size. Three layers, no rings, no floor glow. */
.helmet-scene--mini { --helmet-size: 48px; --helmet-depth: 2px; --helmet-layers: 3; perspective: 400px; }
.helmet-scene--mini .helmet-ring, .helmet-scene--mini .helmet-rim, .helmet-scene--mini::after { display: none; }
.helmet-scene--mini .helmet-3d { animation-duration: 4s; }
.helmet-scene--mini .helmet-layer[style*="--i:0"] { animation: helmet-glow-mini 2.8s ease-in-out infinite; }
@keyframes helmet-glow-mini {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(42,91,184,.8)); }
  50%      { filter: drop-shadow(0 0 6px rgba(232,171,59,.85)) brightness(1.1); }
}

/* --spin: slow full turn on Y so the extruded edge is on show (coin). */
.helmet-scene--spin .helmet-3d { animation: helmet-spin 9s linear infinite; transition: none; }
.helmet-scene--spin .helmet-layer { backface-visibility: visible; }
.helmet-scene--spin .helmet-rim { display: none; }
@keyframes helmet-spin {
  0%   { transform: rotateX(6deg) rotateY(0deg)   translateY(0); }
  50%  { transform: rotateX(6deg) rotateY(180deg) translateY(-4px); }
  100% { transform: rotateX(6deg) rotateY(360deg) translateY(0); }
}

/* --quiet: keep depth and tilt, drop the pulse rings. */
.helmet-scene--quiet .helmet-ring { display: none; }

/* ── Site placements ───────────────────────────────────────────────── */

/* Home hero */
.hero-helmet { --helmet-size: clamp(240px, 36vw, 400px); --helmet-ring-max: 1.4; margin: 0 auto; }

/* Header mark, injected into the kit's .logo-wrap by helmet-3d.js.
   The kit paints .logo-wrap img white (brightness(0) invert(1)) and pins
   its height — these higher-specificity rules restore the 3D layers. */
.logo-wrap .helmet-brand { --helmet-size: 44px; margin-right: 10px; }
.logo-wrap .helmet-brand .helmet-layer {
  height: 100%; width: 100%;
  filter: brightness(calc(1 - var(--i) * 0.11)) saturate(calc(1 - var(--i) * 0.08));
}
/* Docking: hidden until the header carries .is-docked, which helmet-3d.js
   adds on the first frame of every page (a short spin-in entrance). */
.header .helmet-brand { transform: scale(.2) rotate(-120deg); opacity: 0; transition: transform .55s cubic-bezier(.2,.9,.3,1.35), opacity .3s; }
.header.is-docked .helmet-brand { transform: none; opacity: 1; }
@media (min-width: 900px) { .logo-wrap .helmet-brand { --helmet-size: 58px; margin-right: 14px; } }

/* Footer coin (desktop footer only; the kit hides the footer on phones). */
.site-footer-left .helmet-coin { --helmet-size: 30px; --helmet-depth: 2.5px; margin-right: 2px; }
.site-footer-left .helmet-coin .helmet-layer {
  height: 100%; width: 100%;
  filter: brightness(calc(1 - var(--i) * 0.11)) saturate(calc(1 - var(--i) * 0.08));
}
.site-footer-left .helmet-coin::after { display: none; }
.site-footer-left .helmet-coin .helmet-layer[style*="--i:0"] { animation: none; filter: drop-shadow(0 0 4px rgba(232,171,59,.6)); }

/* Support page: coin above "Give Now" */
.give-helmet { --helmet-size: 150px; --helmet-depth: 5px; margin: 0 auto 6px; }

/* ── Reduced motion: a still helmet with a fixed glow ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .helmet-3d, .helmet-layer, .helmet-rim, .helmet-ring, .helmet-scene::after { animation: none !important; }
  .helmet-ring { display: none; }
  .helmet-scene .helmet-layer[style*="--i:0"] { filter: drop-shadow(0 0 16px rgba(42,91,184,.7)); }
  .helmet-scene--spin .helmet-3d { transform: rotateY(-25deg); }
  .header .helmet-brand { transition: none; }
}