/* ═══════════════════════════════════════════════════════════════
   Homepage section components — extracted from index.html inline
   <style> blocks (design-system tech-debt cleanup, redesign v2).
   Covers: hero section, class-showcase cards (.cls-*), boss-of-week
   banner (.botw-*), and the faction war meter (.faction-war-meter /
   .fwm-*). Loaded deferred via the print-media trick, same as the
   other static/css/components/*.css files on this page.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero section ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  background:
    radial-gradient(ellipse 70% 55% at 25% 45%, rgba(180,0,0,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 75% 45%, rgba(30,100,30,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(80,0,120,0.12) 0%, transparent 50%),
    var(--color-bg);
  position: relative;
  overflow: hidden;
}

/* Dot grid texture */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}

/* Bottom fade into the next section */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
  z-index: 1;
}

#hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Ensure hero content sits above particles and ::after overlay */
.hero > *:not(#hero-particles):not(.hero-parallax):not(.hero-split-highlight) { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  #hero-particles { display: none; }
}

/* ── Hero parallax layers (Redesign v2, task: Hero parallax) ──────────
   4 CSS-transform layers (sky / far mountains / castle / foreground fog).
   translateY offsets are written to CSS custom properties by a scroll
   listener in index.html (rAF-batched); pure `transform`, no layout
   thrash. Disabled entirely under prefers-reduced-motion (layers stay
   static, still visually layered — just non-parallax). */
.hero-parallax {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-parallax-layer {
  position: absolute;
  left: -5%;
  right: -5%;
  top: -10%;
  bottom: -10%;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}
.hero-layer-sky {
  background:
    radial-gradient(ellipse 60% 45% at 50% 10%, rgba(140, 60, 190, 0.20) 0%, transparent 65%),
    linear-gradient(180deg, #120c1c 0%, #17111f 45%, transparent 100%);
  --parallax-factor: 0.12;
}
.hero-layer-mountains {
  background: linear-gradient(180deg, transparent 0%, transparent 58%, rgba(18, 14, 26, 0.85) 60%, rgba(10, 8, 14, 0.95) 100%);
  clip-path: polygon(0 100%, 0 68%, 8% 60%, 16% 66%, 24% 54%, 33% 64%, 42% 52%, 52% 63%, 61% 55%, 70% 65%, 80% 57%, 90% 66%, 100% 60%, 100% 100%);
  opacity: 0.9;
  --parallax-factor: 0.24;
}
.hero-layer-castle {
  background: linear-gradient(180deg, transparent 0%, rgba(6, 5, 9, 0.92) 100%);
  clip-path: polygon(
    38% 100%, 38% 62%, 40% 62%, 40% 55%, 42% 55%, 42% 47%, 44% 47%, 44% 40%, 46% 40%, 46% 34%,
    48% 34%, 48% 44%, 50% 44%, 50% 30%, 52% 30%, 52% 44%, 54% 44%, 54% 34%, 56% 34%, 56% 40%,
    58% 40%, 58% 47%, 60% 47%, 60% 55%, 62% 55%, 62% 62%, 64% 62%, 64% 100%
  );
  opacity: 0.85;
  --parallax-factor: 0.38;
}
.hero-layer-fog {
  bottom: -20%;
  top: 55%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(30, 20, 40, 0.35) 45%, rgba(10, 8, 14, 0.6) 100%);
  filter: blur(6px);
  --parallax-factor: 0.55;
}
@media (prefers-reduced-motion: reduce) {
  .hero-parallax-layer { transform: none !important; }
}

/* ── Hero animated SVG scene (task: Hero animated SVG scene) ──────────
   Flickering moon + glow, drifting fog wisps, and three bat silhouettes
   crossing the hero at staggered speeds/altitudes. Pure CSS keyframe
   animation on an inline SVG — no video/asset dependency. Fully disabled
   under prefers-reduced-motion (scene still renders, just static). */
.hero-layer-scene {
  --parallax-factor: 0.3;
  z-index: 1;
}
.hero-scene-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero-scene-moon {
  fill: #f3ecff;
  opacity: 0.9;
  animation: hero-scene-flicker 6s ease-in-out infinite;
}
.hero-scene-moon-glow {
  fill: rgba(170, 140, 230, 0.18);
  animation: hero-scene-flicker 6s ease-in-out infinite reverse;
}
.hero-scene-torch {
  fill: rgba(240, 140, 40, 0.55);
  filter: blur(6px);
  transform-origin: center;
  animation: hero-scene-torch-flicker 2.4s ease-in-out infinite;
}
.hero-scene-torch-2 { animation-delay: -1.1s; }

.hero-scene-bat {
  fill: rgba(10, 6, 14, 0.55);
  transform-origin: 0 0;
  animation: hero-scene-bat-fly 22s linear infinite;
}
.hero-scene-bat-1 { transform: translate(-40px, 160px) scale(1.4); animation-duration: 19s; }
.hero-scene-bat-2 { transform: translate(-40px, 220px) scale(1); animation-duration: 24s; animation-delay: -6s; }
.hero-scene-bat-3 { transform: translate(-40px, 120px) scale(0.75); animation-duration: 28s; animation-delay: -14s; }

.hero-scene-fogwisp {
  fill: rgba(40, 30, 55, 0.28);
  animation: hero-scene-fog-drift 40s ease-in-out infinite;
}
.hero-scene-fogwisp-2 {
  fill: rgba(40, 30, 55, 0.18);
  animation-duration: 55s;
  animation-direction: reverse;
}

@keyframes hero-scene-flicker {
  0%, 100% { opacity: 0.9; }
  45% { opacity: 0.9; }
  47% { opacity: 0.55; }
  49% { opacity: 0.85; }
  72% { opacity: 0.7; }
  74% { opacity: 0.9; }
}
@keyframes hero-scene-torch-flicker {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  25% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 0.9; transform: scale(1.05); }
  75% { opacity: 0.6; transform: scale(0.95); }
}
@keyframes hero-scene-bat-fly {
  0%   { transform: translate(-40px, 160px) scale(1); opacity: 0; }
  8%   { opacity: 0.7; }
  50%  { transform: translate(520px, 60px) scale(1); }
  92%  { opacity: 0.7; }
  100% { transform: translate(1080px, 180px) scale(1); opacity: 0; }
}
@keyframes hero-scene-fog-drift {
  0%   { transform: translateX(-4%); }
  50%  { transform: translateX(4%); }
  100% { transform: translateX(-4%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene-moon,
  .hero-scene-moon-glow,
  .hero-scene-torch,
  .hero-scene-bat,
  .hero-scene-fogwisp {
    animation: none !important;
  }
  .hero-scene-bat { opacity: 0; }
}

/* ── Hero interactive "split" highlight (task: cursor-based race split) ──
   Two edge-lit gradient panes whose opacity follows the pointer's X
   position (set as --split-x 0..1 by index.html's mousemove listener).
   Vampire (red) brightens toward the left, werewolf (green) toward the
   right — pure CSS reacting to a custom property, no per-frame DOM
   writes beyond the one variable. */
.hero-split-highlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-split-vamp,
.hero-split-wolf {
  position: absolute;
  inset: 0;
  transition: opacity 220ms var(--ease-out-soft, ease-out);
}
.hero-split-vamp {
  background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(200, 20, 40, 0.35) 0%, transparent 65%);
  opacity: calc(1 - var(--split-x, 0.5));
}
.hero-split-wolf {
  background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(60, 170, 70, 0.30) 0%, transparent 65%);
  opacity: var(--split-x, 0.5);
}
@media (hover: none), (pointer: coarse) {
  .hero-split-vamp, .hero-split-wolf { opacity: 0.18; }
}

.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: var(--space-lg);
  background: rgba(255,255,255,0.03);
}

.hero-title {
  font-family: var(--font-gothic);
  font-size: clamp(38px, 7.5vw, 88px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin-bottom: var(--space-lg);
  text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}

.hero-title .vamp {
  color: var(--color-vampire-text);
  text-shadow: 0 0 60px rgba(220,30,50,0.4), 0 2px 20px rgba(0,0,0,0.6);
}
.hero-title .wolf {
  color: var(--color-werewolf-text);
  text-shadow: 0 0 60px rgba(60,160,40,0.35), 0 2px 20px rgba(0,0,0,0.6);
}

.hero-sub {
  font-size: var(--fluid-lead);
  color: var(--color-text-muted);
  max-width: 520px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
}

.hero-cta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

/* Secondary hero links (Quiz / Gallery) — underline + glow on hover so they read as clickable */
.hero-secondary-link {
  color: var(--color-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,169,110,0.4);
  transition: border-color 0.2s ease, text-shadow 0.2s ease;
}
.hero-secondary-link:hover,
.hero-secondary-link:focus-visible {
  border-bottom-color: var(--color-gold);
  text-shadow: 0 0 8px rgba(201,169,110,0.5);
}

/* Guest CTA — secondary to the race buttons, but still needs to read as a real action */
.hero-guest-cta {
  background: rgba(201,169,110,0.06);
  border: 1px solid rgba(201,169,110,0.55);
  color: var(--color-text);
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-guest-cta:hover,
.hero-guest-cta:focus-visible {
  background: rgba(201,169,110,0.14);
  border-color: var(--color-gold);
}

/* ── Faction war meter ── */
.faction-war-meter{padding:var(--space-md) var(--space-lg);text-align:center;border-bottom:1px solid var(--color-border);}
.fwm-inner{display:flex;align-items:center;gap:var(--space-sm);max-width:640px;margin:0 auto var(--space-xs);}
.fwm-label{font-size:var(--text-sm);font-weight:600;white-space:nowrap;flex-shrink:0;}
.fwm-label.fwm-vamp{color:var(--color-vampire);}
.fwm-label.fwm-wolf{color:var(--color-werewolf);}
.fwm-bar{flex:1;height:10px;border-radius:var(--radius-pill);display:flex;overflow:hidden;
  background:var(--color-surface);box-shadow:inset 0 1px 3px rgba(0,0,0,.4);}
.fwm-fill-vamp{background:linear-gradient(90deg,#8b0000,#cc2200);transition:width 1.2s var(--ease-out-soft);}
.fwm-fill-wolf{background:linear-gradient(90deg,#2d5a27,#4a9040);transition:width 1.2s var(--ease-out-soft);}
.fwm-caption{font-size:var(--text-xs);color:var(--color-text-faint);margin:0;}
@media(max-width:560px){.fwm-label{font-size:var(--text-xs);}}

/* ── Class showcase cards ── */
.class-showcase{padding:3rem 1.5rem;max-width:var(--max-width);margin:0 auto;}
.cls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
.cls-card{position:relative;display:flex;flex-direction:column;gap:.4rem;padding:1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);transition:transform var(--dur-base) var(--ease-out-soft),box-shadow var(--dur-base),border-color var(--dur-base);}
.cls-link{position:absolute;inset:0;border-radius:inherit;z-index:1;text-decoration:none;}
.cls-link:focus-visible{outline:2px solid var(--color-gold);outline-offset:-2px;}
.cls-card > *:not(.cls-link){position:relative;z-index:2;pointer-events:none;}
.cls-card .cls-play{pointer-events:auto;display:inline-block;margin-top:.5rem;font-size:.72rem;font-family:var(--font-gothic);letter-spacing:.06em;text-decoration:none;padding:.4rem .7rem;border-radius:var(--radius-pill,999px);text-align:center;transition:background var(--dur-fast),color var(--dur-fast);}
.cls-vampire .cls-play{background:rgba(232,112,112,.12);color:#f08888;border:1px solid rgba(232,112,112,.4);}
.cls-vampire .cls-play:hover{background:#8b0000;color:#fff;border-color:#8b0000;}
.cls-werewolf .cls-play{background:rgba(136,200,120,.12);color:#9adc8a;border:1px solid rgba(136,200,120,.4);}
.cls-werewolf .cls-play:hover{background:#2d5a27;color:#fff;border-color:#2d5a27;}
.cls-card:hover{transform:translateY(-3px);}
.cls-vampire:hover{border-color:var(--color-vampire);box-shadow:var(--elev-vampire-2);}
.cls-werewolf:hover{border-color:var(--color-werewolf);box-shadow:var(--elev-werewolf-2);}
.cls-art{aspect-ratio:16/9;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:2.5rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.cls-card h3{font-family:var(--font-gothic);font-size:var(--fluid-h3);margin:.4rem 0 0;letter-spacing:.04em;}
.cls-vampire h3{color:#e87070;}
.cls-werewolf h3{color:#88c878;}
.cls-pitch{font-size:.875rem;color:var(--color-text-muted);margin:0;line-height:1.4;}
.cls-tag{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-gold);margin-top:auto;padding-top:.4rem;border-top:1px dashed var(--color-border);}
@media (prefers-reduced-motion: reduce){.cls-card{transition:none;}.cls-card:hover{transform:none;}}

/* ── Boss of the week banner ── */
.botw-banner{padding:2.5rem 1.5rem;background:linear-gradient(135deg, rgba(139,0,0,.18) 0%, transparent 60%), var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);margin:2rem 0;}
.botw-inner{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;max-width:var(--max-width);margin:0 auto;}
.botw-art{position:relative;width:140px;aspect-ratio:1;border-radius:var(--radius-lg);background:var(--grad-blood-moon);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.botw-glow{position:absolute;inset:-20%;background:radial-gradient(circle, rgba(204,0,0,.45) 0%, transparent 60%);animation:botwPulse 3s ease-in-out infinite;}
/* Generated boss portrait (static/img/raid_bosses/rb08.webp) — falls back
   to the emoji glyph on load failure via onerror in index.html. */
.botw-img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 15%;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));}
.botw-emoji{position:relative;font-size:4rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));}
@media (min-width:769px){.botw-art{width:180px;}}
@keyframes botwPulse{0%,100%{opacity:.6;transform:scale(.95);}50%{opacity:1;transform:scale(1.05);}}
@media (prefers-reduced-motion: reduce){.botw-glow{animation:none;}}
.botw-label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-blood-moon);}
.botw-body h2{font-family:var(--font-gothic);font-size:var(--fluid-h3);margin:.3rem 0;letter-spacing:.04em;color:var(--color-text);}
.botw-desc{color:var(--color-text-muted);margin:.2rem 0 .8rem;}
.botw-desc em{color:var(--color-legendary);font-style:normal;font-weight:600;}
.botw-meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:var(--color-text-muted);margin-bottom:1rem;}
.botw-meta strong{color:var(--color-text);font-variant-numeric:tabular-nums;}
.botw-cta{display:flex;gap:.75rem;flex-wrap:wrap;}
@media (max-width:768px){.botw-inner{grid-template-columns:1fr;text-align:center;justify-items:center;}.botw-meta{justify-content:center;}.botw-cta{justify-content:center;}}