/* ============================================================
   HOME HERO — CINEMATIC POLISH (2026-05-30)
   Loads LAST on index.html. Purely additive: it layers atmosphere
   and micro-interactions onto the existing hero markup to match the
   new in-game 2.0 look. No structural/layout changes, no markup
   changes. Remove this one <link> to fully revert.
   ============================================================ */

:root {
    --hh-gold: 240, 210, 100;     /* warm gold */
    --hh-ember: 226, 122, 58;
    --hh-mist: 196, 214, 206;
}

/* Make sure copy sits above the atmosphere layers we add below. */
.hero { position: relative; isolation: isolate; }
.hero-content { position: relative; z-index: 3; }
.hero-bg { z-index: 0; }

/* Cinematic warm light + vignette over the background art. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(90% 60% at 50% -10%, rgba(var(--hh-gold), 0.16), transparent 60%),
        radial-gradient(120% 90% at 50% 115%, rgba(0,0,0,0.72), transparent 62%),
        linear-gradient(180deg, rgba(8,7,5,0.20) 0%, transparent 30%, rgba(8,7,5,0.55) 100%);
}

/* Slow-drifting god-rays + low fog — the frontier feels alive. */
.hero::after {
    content: '';
    position: absolute;
    top: -25%; left: 50%;
    width: 160%; height: 150%;
    transform: translateX(-50%) rotate(8deg);
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(100deg,
        transparent 0 9px, rgba(var(--hh-gold), 0.045) 9px 11px, transparent 11px 34px);
    -webkit-mask-image: radial-gradient(60% 60% at 50% 0%, #000, transparent 78%);
            mask-image: radial-gradient(60% 60% at 50% 0%, #000, transparent 78%);
    mix-blend-mode: screen;
    animation: hhRays 20s ease-in-out infinite alternate;
}
@keyframes hhRays {
    from { transform: translateX(-50%) rotate(5deg); opacity: 0.5; }
    to   { transform: translateX(-50%) rotate(11deg); opacity: 0.85; }
}

/* Gentle "breathing" on the art (filter only — leaves the JS parallax
   transform untouched). */
.hero-bg-img {
    animation: hhBreathe 26s ease-in-out infinite alternate;
}
@keyframes hhBreathe {
    from { filter: saturate(1) brightness(0.96); }
    to   { filter: saturate(1.1) brightness(1.05); }
}

/* ---- Kicker → live announcement pill with a pulsing dot ---- */
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.34rem 0.85rem 0.34rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--hh-gold), 0.4);
    background: rgba(20,16,10,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.hero-kicker::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe6a6, rgb(var(--hh-ember)));
    box-shadow: 0 0 10px rgba(var(--hh-ember), 0.9);
    animation: hhPulse 1.8s ease-in-out infinite;
}
@keyframes hhPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.65; }
}

/* ---- Title → warm gradient with depth ---- */
.hero-title {
    background: linear-gradient(180deg, #fff8e8 0%, #f3d488 55%, #cf9a3e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 30px rgba(var(--hh-gold), 0.18);
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
}
.hero-title-sub {
    -webkit-text-fill-color: #efe6d2;
    color: #efe6d2;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.hero-tagline { text-shadow: 0 1px 10px rgba(0,0,0,0.55); }

/* ---- CTAs ---- */
.hero-actions .btn-primary {
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(var(--hh-ember), 0.28), 0 0 0 1px rgba(var(--hh-gold), 0.35) inset;
    transition: transform 0.18s ease, box-shadow 0.22s ease, filter 0.2s ease;
}
.hero-actions .btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 18px 40px rgba(var(--hh-ember), 0.42), 0 0 0 1px rgba(var(--hh-gold), 0.5) inset;
}
.hero-actions .btn-primary::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.4) 50%, transparent 68%);
    transform: translateX(-130%);
    transition: transform 0.7s ease;
}
.hero-actions .btn-primary:hover::after { transform: translateX(130%); }

.hero-actions .btn-secondary {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(var(--hh-gold), 0.45);
    transition: transform 0.18s ease, background 0.22s ease, border-color 0.22s ease;
}
.hero-actions .btn-secondary:hover {
    transform: translateY(-2px);
    background: rgba(var(--hh-gold), 0.14);
    border-color: rgba(var(--hh-gold), 0.8);
}

/* ---- Ledger highlights → chip row ---- */
.hero-ledger { gap: 0.55rem !important; flex-wrap: wrap; }
.hero-ledger span {
    position: relative;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(18,14,10,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.hero-ledger span:hover {
    border-color: rgba(var(--hh-gold), 0.5);
    transform: translateY(-1px);
}

/* ---- Frontier briefing panel → glassier, with gold edge ---- */
.hero-frontier-panel {
    border: 1px solid rgba(var(--hh-gold), 0.22) !important;
    background:
        linear-gradient(180deg, rgba(28,22,15,0.62), rgba(15,12,9,0.72)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 30px 70px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.hero-frontier-kicker { color: rgb(var(--hh-gold)); letter-spacing: 0.2em; }

.hero-route-card {
    transition: transform 0.18s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.hero-route-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--hh-gold), 0.5);
    box-shadow: 0 14px 30px rgba(0,0,0,0.4);
}
.hero-route-card .hero-route-tag {
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}
.hero-route-card:hover .hero-route-tag {
    background: rgba(var(--hh-gold), 0.9);
    color: #1a130a;
}

/* ---- Signal stats → gradient numbers ---- */
.hero-signal-value {
    background: linear-gradient(180deg, #fff3d6, #cf9a3e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

/* ---- Scroll hint ---- */
.hero-scroll-hint { opacity: 0.7; }
.hero-scroll-hint .scroll-arrow { box-shadow: 0 0 12px rgba(var(--hh-gold), 0.4); }

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .hero::after,
    .hero-bg-img,
    .hero-kicker::before { animation: none !important; }
    .hero-actions .btn-primary::after { transition: none; }
}