/* ============================================================
   HERO — MINIMALIST PARALLAX DEPTH REDESIGN
   Designed by: Antigravity (CGI Director × Professional UI/UX)
   Optimization: Drop dynamic SVG grain; hardware-accelerated marquee
   ============================================================ */

:root {
  --hud-ink:       #080809;
  --hud-cream:     #ebdcb9;      /* warm premium paper cream */
  --hud-cream-mute:rgba(235, 220, 185, 0.42);
  --hud-accent:    #eb5939;      /* cinematic vermilion/orange-red */
  --hud-border:    rgba(255, 255, 255, 0.08);
  --hud-mono:      'Courier New', Courier, monospace;
}

/* ─────────────────────────────────────────────
   1. VIDEO & CANVAS LAYERING (MULTILAYER PARALLAX)
   ───────────────────────────────────────────── */
.hero_bg {
  background: var(--hud-ink) !important;
}
.hero_bg video {
  filter: brightness(0.48) saturate(0.90) contrast(1.10) !important;
  opacity: 0.50 !important;
  z-index: 1 !important;
  position: relative !important;
}
#hero-webgl-canvas {
  filter: drop-shadow(0 0 80px rgba(0, 0, 0, 0.98)) !important;
  opacity: 0.95 !important;
  z-index: 5 !important; /* Floats on top of marquee & video */
}

/* Ambient bottom red glow & cinematic vignette overlays */
.hero_bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4; /* Floats between marquee & WebGL canvas */
  pointer-events: none;
  background: 
    /* Ambient warm base glow */
    radial-gradient(ellipse 60% 30% at 50% 105%, rgba(235, 89, 57, 0.08) 0%, transparent 80%),
    /* Screen vignette */
    radial-gradient(circle 80% at 50% 50%, rgba(8, 8, 9, 0.00) 40%, rgba(8, 8, 9, 0.90) 100%),
    /* Top & bottom letterbox fades */
    linear-gradient(to bottom, rgba(8, 8, 9, 0.70) 0%, transparent 18%, transparent 82%, rgba(8, 8, 9, 0.95) 100%);
}

/* ─────────────────────────────────────────────
   2. GIANT BACKGROUND MARQUEE (SCROLLING BEHIND BLOB)
   ───────────────────────────────────────────── */
.hero-marquee {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2 !important; /* Floats behind video and WebGL canvas */
  white-space: nowrap;
  backface-visibility: hidden;
}

.hero-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  animation: marquee-scroll 45s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.hero-marquee__track span {
  font-family: 'Avant Garde', sans-serif;
  font-size: clamp(80px, 12vw, 175px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.028); /* Solid low-opacity for fast GPU rasterization */
  letter-spacing: -0.01em;
  text-transform: uppercase;
  display: inline-block;
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ─────────────────────────────────────────────
   3. HEADLINE & TYPOGRAPHY
   ───────────────────────────────────────────── */
.hero h1 {
  font-family: 'Avant Garde', sans-serif !important;
  font-size: clamp(38px, 6.2vw, 86px) !important;
  font-weight: 700 !important;
  color: var(--hud-cream) !important;
  letter-spacing: -0.025em !important;
  line-height: 0.94 !important;
  text-transform: uppercase;
  text-shadow: 
    0 15px 70px rgba(0, 0, 0, 0.95),
    0 2px 4px rgba(0, 0, 0, 0.70) !important;
  margin-bottom: 0 !important;
}

.hero h1 strong {
  color: var(--hud-accent) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-shadow: 
    0 15px 70px rgba(0, 0, 0, 0.95),
    0 0 30px rgba(235, 89, 57, 0.12) !important;
}

.hero-eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  font-family: var(--hud-mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--hud-accent) !important;
  margin: 0 auto 20px !important;
  opacity: 0.85;
}
.hero-eyebrow__line {
  display: none !important;
}

.hero-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(12px, 1.2vw, 14px) !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: var(--hud-cream-mute) !important;
  max-width: 480px !important;
  margin: 18px auto 0 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8) !important;
}

/* ─────────────────────────────────────────────
   4. CTA BUTTON (LUXURY MINIMAL PILL)
   ───────────────────────────────────────────── */
.hero-cta-wrap {
  margin-top: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  z-index: 50 !important;
}

.btn-aesthetic {
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 40px !important; /* Pill style */
  font-family: var(--hud-mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--hud-cream) !important;
  text-decoration: none !important;
  transition: 
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.btn-aesthetic span {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 30px;
}

.btn-aesthetic span::after {
  content: '↗';
  font-family: sans-serif;
  font-size: 11px;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-aesthetic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(235, 89, 57, 0.08);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.btn-aesthetic:hover {
  border-color: var(--hud-accent) !important;
  box-shadow: 0 0 35px rgba(235, 89, 57, 0.25) !important;
  transform: translateY(-1px) !important;
}

.btn-aesthetic:hover::before {
  opacity: 1;
}

.btn-aesthetic:hover span::after {
  transform: translate(2px, -2px);
  color: var(--hud-accent);
}

.hero-cta-note {
  font-family: var(--hud-mono) !important;
  font-size: 7.5px !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 255, 255, 0.22) !important;
  text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────
   5. FLOATING MINIMAL STATS ROW (NO BOXES)
   ───────────────────────────────────────────── */
.hero-bottom {
  position: absolute !important;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
}

.hero-stats {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-top: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 auto clamp(40px, 5vh, 64px) !important;
  width: 90% !important;
  max-width: 820px !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding-bottom: 20px !important;
}

.hero-stat {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 10px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.hero-stat:last-child { border-right: none !important; }

.hero-stat__num {
  font-family: 'Avant Garde', sans-serif !important;
  font-size: clamp(16px, 1.8vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--hud-cream) !important;
  letter-spacing: -0.02em !important;
}
.hero-stat__num em {
  font-style: normal !important;
  color: var(--hud-accent) !important;
  font-size: 0.85em !important;
  margin-left: 2px;
}
.hero-stat__lbl {
  font-family: var(--hud-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--hud-accent) !important;
}

/* Scrolling Ticker Strip */
.hero-ticker {
  overflow: hidden !important;
  border-top: 1px solid var(--hud-border) !important;
  padding: 8px 0 !important;
  background: rgba(8, 8, 9, 0.90) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
}

.hero-ticker__track {
  display: inline-flex !important;
  align-items: center !important;
  gap: 32px !important;
  white-space: nowrap !important;
  font-family: var(--hud-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
  animation: ticker-slide 50s linear infinite !important;
  will-change: transform !important;
}

.hero-ticker__track span { flex-shrink: 0; }
.hero-ticker__track b {
  color: var(--hud-accent) !important;
  font-size: 6px !important;
  opacity: 0.6 !important;
  flex-shrink: 0 !important;
}

@keyframes ticker-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────
   6. AVAILABLE INDICATOR BADGE
   ───────────────────────────────────────────── */
.hero-avail {
  position: absolute !important;
  right: clamp(24px, 3.5vw, 52px) !important;
  top: clamp(20px, 3vh, 32px) !important;
  z-index: 25 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--hud-mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--hud-cream-mute) !important;
  border: 1px solid rgba(74, 222, 128, 0.12);
  background: rgba(74, 222, 128, 0.04);
  padding: 5px 12px;
  border-radius: 20px;
}
.hero-avail__dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 8px #4ade80 !important;
  animation: pulse-dot 2.5s ease-in-out infinite !important;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* ─────────────────────────────────────────────
   7. MOBILE RESPONSIVENESS
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero h1 {
    font-size: 34px !important;
    line-height: 1.0 !important;
  }
  .hero-stats {
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
    padding-bottom: 12px !important;
  }
  .hero-stat {
    flex: 0 0 50% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 8px 0 !important;
  }
  .hero-stat:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  .hero-stat:nth-child(even) {
    border-right: none !important;
  }
  .hero-stat:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
  .hero-sub {
    font-size: 11px !important;
    padding: 0 16px;
  }
  .hero-avail {
    display: none !important;
  }
}