/*
 * Astro-Tanks — Reference-Faithful CSS
 * Reverse-engineered from Concept 16 Next.js reference.
 * Colors: deep-black #050507, space-black #13192a, thruster-gold #f1c98b, steel-gray #9CA3AF
 */

/* Fonts loaded via <link> in HTML — duplicate @import removed for faster first paint */

/* ══════════════════════════════════════════════
   TOKENS
   ══════════════════════════════════════════════ */
:root {
    /* -- Color Tokens -------------------------- */
    --space-black: #13192a;
    --deep-black: #050507;
    --card-black: #0C101C;
    --border-white: rgba(241, 201, 139, 0.10);
    --steel-gray: #9CA3AF;
    --steel-light: #E5E7EB;
    --thruster: #f1c98b;
    --cyan: #8CA5D3;
    --white: #ffffff;

    /* -- Font Stacks --------------------------- */
    --font-raj: 'Rajdhani', sans-serif;
    --font-inter: 'Inter', sans-serif;
    --font-mono: 'Space Mono', monospace;

    /* -- Fibonacci Spacing Scale --------------
       Base 8px ? ratio � 1.618 (golden)
       5 � 8 � 13 � 21 � 34 � 55 � 89 � 144  */
    --s-5:   0.3125rem;
    --s-8:   0.5rem;
    --s-13:  0.8125rem;
    --s-21:  1.3125rem;
    --s-34:  2.125rem;
    --s-55:  3.4375rem;
    --s-89:  5.5625rem;
    --s-144: 9rem;

    /* -- Typography Scale (golden ratio 1.618) -
       Fluid: scales between mobile min → desktop max via vw
       xs → sm → base → md → lg → xl → 2xl → 3xl */
    --fs-xs:  clamp(0.5625rem, 0.45rem + 0.25vw, 0.8rem);
    --fs-sm:  clamp(0.6875rem, 0.55rem + 0.3vw, 1rem);
    --fs-base: clamp(0.875rem, 0.75rem + 0.35vw, 1.3rem);
    --fs-md:  clamp(1rem, 0.85rem + 0.45vw, 1.6rem);
    --fs-lg:  clamp(1.25rem, 1rem + 0.8vw, 2.6rem);
    --fs-xl:  clamp(1.6rem, 1.2rem + 1.2vw, 3.5rem);
    --fs-2xl: clamp(2rem, 1.4rem + 1.8vw, 5rem);
    --fs-3xl: clamp(2.8rem, 1.8rem + 3vw, 8rem);

    /* -- Layout — fluid container & spacing ---- */
    --max-w: clamp(320px, 90vw, 2800px);
    --max-w-narrow: clamp(280px, 70vw, 1400px);
    --nav-h: clamp(60px, 4vw + 24px, 110px);
    --grid-cols: 12;
    --grid-gap: clamp(1rem, 1.5vw + 0.25rem, 3rem);
    --section-px: clamp(1rem, 5vw, 6rem);
    --section-py: clamp(3rem, 8vh + 2rem, 20rem);

    /* -- Golden Ratio -------------------------- */
    --phi: 1.618;
    --phi-major: 61.8%;
    --phi-minor: 38.2%;

    /* -- Fluid border radius ------------------- */
    --radius-sm: clamp(6px, 0.5vw, 14px);
    --radius-md: clamp(10px, 0.8vw, 20px);
    --radius-lg: clamp(14px, 1vw, 26px);
}

/* ══════════════════════════════════════════════
   RESET
   ══════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ����������������������������������������������
   GLOBAL LOADING SCREEN
   ���������������������������������������������� */
.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--deep-black);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loading-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Prevent liquid-glass flash: hide until JS reveals */
/* .site-hidden is a no-op: loading screen covers content, glass composites from frame 1 */
.site-hidden {
    pointer-events: none;
}

.loading-screen-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-13);
}

.loading-screen-logo {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    background: linear-gradient(90deg, var(--white) 20%, var(--thruster) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.loading-screen-bar-track {
    width: clamp(200px, 40vw, 320px);
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.loading-screen-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, rgba(241, 201, 139, 0.6), rgba(241, 201, 139, 1));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.loading-screen-status {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--steel-gray);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


.global-tint {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(19, 25, 42, 0.35);
    z-index: -1;
    pointer-events: none;
}

body {
    background: var(--space-black);
    color: var(--steel-light);
    font-family: var(--font-inter);
    overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--space-black);
}

::-webkit-scrollbar-thumb {
    background: rgba(241, 201, 139, 0.08);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--thruster);
}

/* Headings - Heavy Industrial Scale */
h1,
h2,
h3,
h4 {
    font-family: var(--font-raj);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.05;
    color: var(--white);
}

h1 {
    font-size: clamp(3rem, 5.5vw, var(--fs-3xl));
    letter-spacing: -0.02em;
    line-height: 0.95;
    margin-bottom: var(--s-21);
}

h2 {
    font-size: clamp(1.8rem, 3.5vw, var(--fs-2xl));
    letter-spacing: 0.02em;
    margin-bottom: var(--s-13);
}

h3 {
    font-size: var(--fs-lg);
    letter-spacing: 0.06em;
    margin-bottom: var(--s-8);
}

h4 {
    font-size: var(--fs-md);
    letter-spacing: 0.05em;
}

:focus-visible {
    outline: 2px solid var(--thruster);
    outline-offset: 3px;
}

/* ══════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════ */
.max-w {
    max-width: var(--max-w);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: var(--section-px);
    padding-right: var(--section-px);
}

/* 12-Column Layout System */
.grid-12 {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gap);
}

.section-padded {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
}

/* Soft section divider � replaces hard border-top */
.border-top {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: 0.25em;
    color: var(--thruster);
    text-transform: uppercase;
    margin-bottom: var(--s-8);
    transition: letter-spacing 0.4s ease;
}

.muted {
    color: var(--steel-gray);
}

.text-center {
    text-align: center;
}

/* ══════════════════════════════════════════════
   STARFIELD CANVAS
   ══════════════════════════════════════════════ */

#starfield {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

/* ══════════════════════════════════════════════
   WEBGL FALLBACK
   ══════════════════════════════════════════════ */
#webgl-fallback {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--deep-black);
    color: var(--thruster);
    place-items: center;
    z-index: 9999;
}

.fallback-content {
    border: 1px solid var(--thruster);
    padding: 3rem;
    text-align: center;
    font-family: var(--font-raj);
}

.fallback-content h1 {
    color: var(--thruster);
    margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════
   NAVIGATION — footer-inspired liquid glass bar
   ══════════════════════════════════════════════ */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(5, 5, 7, 0.60);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35),
                inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

/* Gold accent line — mirrors footer-accent */
.nav-accent {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(241, 201, 139, 0.04) 10%,
        rgba(241, 201, 139, 0.2) 50%,
        rgba(241, 201, 139, 0.04) 90%,
        transparent 100%);
}

/* Inner layout — 3-column: brand | links | actions */
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
}

/* ── Brand — logo + status ── */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-logo {
    font-family: var(--font-raj);
    font-size: clamp(1.1rem, 0.85rem + 0.6vw, 1.8rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--white) 0%, var(--thruster) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.15em;
    line-height: 1;
    transition: filter 0.3s ease;
}

.nav-brand:hover .nav-logo {
    filter: brightness(1.2);
}

/* Status chip — like footer status-row */
.nav-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 4px 12px 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
    animation: statusPulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
}

.nav-status-text {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

/* ── Nav Links — mimics footer-nav a ── */
.nav-links {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-link {
    font-family: var(--font-inter);
    font-size: clamp(0.72rem, 0.58rem + 0.25vw, 0.95rem);
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 10px 20px;
    position: relative;
    transition: color 0.25s ease, transform 0.2s ease;
}

.nav-link:hover {
    color: var(--white);
    transform: translateY(-1px);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--thruster), transparent);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link:hover::after {
    width: 60%;
}

/* ── Actions — CTA + icon buttons ── */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

/* Icon button — matches footer-social style exactly */
.nav-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(241, 201, 139, 0.5);
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    transition: background 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.nav-icon-btn:hover {
    background: rgba(241, 201, 139, 0.08);
    border-color: rgba(241, 201, 139, 0.2);
    color: var(--thruster);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(241, 201, 139, 0.08);
}

.nav-rule {
    display: none;
}

/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */
.btn {
    font-family: var(--font-raj);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: var(--s-13) var(--s-34);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.btn-solid {
    background: var(--white);
    color: #000;
}

.btn-solid:hover {
    background: var(--thruster);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    clip-path: none;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ══════════════════════════════════════════════
   1. HERO
   ══════════════════════════════════════════════ */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: transparent;
}

/* Hero 3D canvas fills the full hero section */
#hero-canvas-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: transparent;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--max-w);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--section-px);
    /* Golden ratio: content at ~38.2% from top */
    padding-top: calc(100vh * 0.382 - 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-headline {
    color: var(--white);
    margin-bottom: var(--s-21);
    line-height: 0.92;
    letter-spacing: -0.025em;
}

.hero-sub {
    background: linear-gradient(90deg, var(--white) 0%, rgba(241, 201, 139, 0.65) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-top: var(--s-5);
}

.hero-body {
    font-size: clamp(0.9rem, 0.75rem + 0.5vw, 1.75rem);
    color: var(--steel-gray);
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: var(--s-55);
    max-width: clamp(30ch, 50vw, 68ch);
    margin-left: auto;
    margin-right: auto;
}

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

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: var(--s-55);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-8);
    color: var(--steel-gray);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.3em;
    z-index: 4;
}

.mouse {
    width: 22px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 11px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.wheel {
    width: 2px;
    height: 6px;
    background: rgba(241, 201, 139, 0.6);
    border-radius: 2px;
    animation: scroll-wheel 2.4s ease-in-out infinite;
}

@keyframes scroll-wheel {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    70% {
        transform: translateY(8px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ══════════════════════════════════════════════
   2. PHILOSOPHY
   ══════════════════════════════════════════════ */
.philosophy {
    background: transparent;
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

.section-label {
    margin-bottom: var(--s-55);
}

.section-label h2 {
    font-size: clamp(2rem, 4.5vw, var(--fs-2xl));
    margin-top: var(--s-5);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.phil-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--s-55);
    align-items: start;
}

.phil-col {
    grid-column: span 6;
}

.phil-col--offset {
    margin-top: var(--s-55);
}

.phil-diagram {
    height: clamp(160px, 15vw + 60px, 500px);
    width: 100%;
    background: rgba(8, 10, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--s-21);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
}

.phil-diagram:hover {
    transform: translateY(-3px);
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Drift animation */
.drift-demo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drift-tank {
    width: 3rem;
    height: 2rem;
    border: 2px solid var(--white);
    background: rgba(255, 255, 255, 0.08);
    position: relative;
    animation: drift-anim 4s cubic-bezier(0.1, 0.6, 0.3, 1) infinite;
}

.thruster-trail {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 5rem;
    height: 1.5rem;
    background: linear-gradient(to left, var(--thruster), transparent);
    animation: trail-fade 4s ease-in-out infinite;
}

.drift-label {
    position: absolute;
    bottom: -1.8rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--steel-gray);
    white-space: nowrap;
}

@keyframes drift-anim {
    0% {
        transform: translateX(-80px);
    }

    70% {
        transform: translateX(80px);
    }

    100% {
        transform: translateX(80px);
    }
}

@keyframes trail-fade {
    0% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* Recoil animation */
.recoil-demo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recoil-tank {
    width: 4rem;
    height: 2.5rem;
    border: 2px solid var(--steel-gray);
    background: rgba(156, 163, 175, 0.12);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: recoil-anim 2.5s ease-in-out infinite;
}

.cannon-flash {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 5rem;
    height: 3px;
    background: var(--white);
    animation: flash-anim 2.5s ease-in-out infinite;
    transform-origin: left center;
}

.recoil-label {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--cyan);
}

@keyframes recoil-anim {
    0% {
        transform: translateX(30px);
    }

    15% {
        transform: translateX(-30px);
    }

    60% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(30px);
    }
}

@keyframes flash-anim {
    0% {
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
    }

    5% {
        opacity: 1;
        transform: translateY(-50%) scaleX(1.5);
    }

    15% {
        opacity: 0;
        transform: translateY(-50%) scaleX(2);
    }

    100% {
        opacity: 0;
    }
}

.phil-text h3 {
    font-size: var(--fs-lg);
    color: var(--white);
    margin-bottom: var(--s-8);
}

.phil-text p {
    color: var(--steel-gray);
    font-weight: 300;
    line-height: 1.75;
    max-width: clamp(28ch, 40vw, 62ch);
    font-size: clamp(0.85rem, 0.7rem + 0.35vw, 1.5rem);
}

/* ═══════════════════════════════════════════════
   3. SHOWCASE — Immersive HUD Layout
   ═══════════════════════════════════════════════ */
.showcase {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: transparent;
    touch-action: pan-y;  /* allow vertical scroll; JS handles horizontal orbit */
}

/* 3D canvas — fills entire section */
.showcase-canvas {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 0;
    touch-action: pan-y; /* allow vertical scroll, but capture horizontal for 3D orbit */
}

.showcase-canvas:active {
    cursor: grabbing;
}

/* Loading overlay */
.loading-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-13);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 10;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    color: var(--cyan);
}

.spinner {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(140, 165, 211, 0.12);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Bottom gradient fade for HUD readability */
.showcase-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(5, 5, 7, 0.85) 0%, rgba(5, 5, 7, 0.4) 40%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Overlay — all UI sits on top of 3D */
.showcase-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    /* Padding clears HUD corners + bracket size */
    padding: clamp(40px, 3vw + 16px, 90px) clamp(40px, 3vw + 16px, 90px) var(--s-21);
}

.showcase-overlay > * {
    pointer-events: auto;
}

/* Top header — centered */
.showcase-top {
    text-align: center;
    pointer-events: none;
}

.showcase-top h2 {
    font-size: clamp(1.1rem, 0.8rem + 1.2vw, 2.8rem);
    color: var(--white);
    margin-top: var(--s-5);
}

/* Stats panel — floating left side */
.showcase-stats {
    position: absolute;
    left: var(--s-34);
    bottom: calc(80px + var(--s-34));
    width: clamp(220px, 18vw + 40px, 600px);
    padding: var(--s-21);
    background: rgba(5, 5, 7, 0.70);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    z-index: 3;
    transition: opacity 0.3s ease;
}

/* Class detail */
.class-detail {
    transition: opacity 0.3s ease;
}

.detail-role {
    font-family: var(--font-raj);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--thruster);
    margin-bottom: var(--s-5);
    text-transform: uppercase;
}

.detail-desc {
    color: var(--steel-gray);
    font-size: var(--fs-base);
    font-weight: 300;
    line-height: 1.65;
    margin-bottom: var(--s-21);
}

.stat-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-13);
}

.stat-row {
    display: flex;
    align-items: center;
    gap: var(--s-13);
}

.stat-label-text {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--steel-gray);
    width: 5rem;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.stat-track {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    border-radius: 1px;
}

.stat-bar {
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 1px;
    transition: width 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.stat-val {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--cyan);
    width: 2rem;
    text-align: right;
    flex-shrink: 0;
}

/* Bottom bar — centered class selector strip */
.showcase-bottom {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.class-selector {
    display: inline-flex;
    gap: 2px;
    background: rgba(5, 5, 7, 0.50);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 4px;
}

.class-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: var(--s-13) var(--s-34);
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    transition: background 0.25s, color 0.25s;
    color: var(--steel-gray);
    text-align: center;
    min-width: 120px;
}

.class-card:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
}

.class-card.active {
    background: rgba(241, 201, 139, 0.10);
    color: var(--white);
}

.card-type {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.4;
}

.class-card.active .card-type {
    color: var(--thruster);
    opacity: 0.9;
}

.card-name {
    font-family: var(--font-raj);
    font-size: clamp(0.9rem, 1.2vw, var(--fs-md));
    font-weight: 700;
    letter-spacing: 0.08em;
    color: inherit;
}

.class-card.active .card-name {
    color: var(--white);
}

/* Active indicator bar at bottom of card */
.card-indicator {
    position: absolute;
    bottom: 2px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--thruster);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.class-card.active .card-indicator {
    transform: scaleX(1);
}

/* ══════════════════════════════════════════════
   4. AMMO
   ══════════════════════════════════════════════ */
.ammo {
    background: transparent;
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

.ammo-layout {
    display: flex;
    gap: var(--s-55);
    align-items: flex-start;
}

.ammo-left {
    width: var(--phi-minor);
    flex-shrink: 0;
}

.ammo-right {
    width: var(--phi-major);
    transition: opacity 0.3s ease;
}

.ammo-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    margin-top: var(--s-34);
}

.ammo-tab {
    background: transparent;
    border: none;
    border-left: 2px solid rgba(255, 255, 255, 0.06);
    padding: var(--s-13) var(--s-21);
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease, border-left-color 0.3s ease, color 0.3s ease;
}
    border-left-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
}

.ammo-tab.active {
    border-left-color: var(--thruster);
    background: rgba(255, 255, 255, 0.03);
}

.ammo-id {
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    color: var(--steel-gray);
    font-weight: 700;
    transition: color 0.3s;
}

.ammo-tab.active .ammo-id {
    color: var(--white);
}

.ammo-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--thruster);
    opacity: 0;
    transition: opacity 0.3s;
}

.ammo-tab.active .ammo-dot {
    opacity: 1;
}

/* Right detail panel */
.ammo-right {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-sm);
    padding: clamp(1.5rem, 3vw, 5.5rem) clamp(1rem, 2vw, 3.5rem);
    position: relative;
    overflow: hidden;
    min-height: clamp(240px, 20vw + 60px, 540px);
}

.ammo-bg-label {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--s-13);
    font-family: var(--font-raj);
    font-size: clamp(3rem, 4vw + 1rem, 10rem);
    font-weight: 900;
    color: var(--white);
    opacity: 0.03;
    line-height: 1;
    pointer-events: none;
    transition: opacity 0.3s;
}

.ammo-detail {
    position: relative;
    z-index: 1;
}

.ammo-detail h3 {
    font-size: var(--fs-xl);
    color: var(--white);
    margin-bottom: var(--s-8);
    transition: color 0.3s ease;
}

.ammo-velocity {
    display: flex;
    align-items: center;
    gap: var(--s-13);
    margin-bottom: var(--s-21);
}

.vel-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--thruster);
    letter-spacing: 0.12em;
}

#ammo-speed {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--cyan);
}

.ammo-desc-text {
    color: var(--steel-gray);
    font-size: var(--fs-base);
    font-weight: 300;
    line-height: 1.75;
    max-width: clamp(30ch, 45vw, 60ch);
}

.ammo-vis {
    margin-top: var(--s-21);
    height: clamp(5rem, 8vw + 2rem, 20rem);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    background: rgba(8, 10, 20, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03),
                0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------------
   AMMO VISUALIZERS — Premium Combat Demonstrations
   Matching the quality of combat scenario card animations.
   ------------------------------------------------------------------ */
.ammo-anim {
    position: absolute;
    inset: 0;
    overflow: hidden;
    contain: layout style paint;
}

/* Shared technical grid overlay */
.av-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.6;
}

/* Shared label base */
.ap-label, .hsat-label, .he-label, .hesw-label {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
}

/* ═══════════════════════════════════════════
   AP — KINETIC PENETRATOR
   ═══════════════════════════════════════════ */

/* Trajectory guide line */
.ap-anim .ap-trajectory {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 15%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 85%,
        transparent 100%);
}

/* Sabot dart — long thin penetrator */
.ap-anim .ap-sabot {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 3px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent 0%, rgba(241, 201, 139, 0.5) 20%, var(--thruster) 60%, #fff 100%);
    border-radius: 0 2px 2px 0;
    animation: ap-sabot-fly 3.2s cubic-bezier(0.25, 0, 0.15, 1) infinite;
    z-index: 3;
}

.ap-anim .ap-sabot-glow {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 8px;
    transform: translateY(-50%);
    background: radial-gradient(ellipse at 80% 50%, rgba(241, 201, 139, 0.4) 0%, transparent 70%);
    filter: blur(3px);
    animation: ap-sabot-fly 3.2s cubic-bezier(0.25, 0, 0.15, 1) infinite;
    z-index: 2;
}

/* Target brackets — corner marks around impact zone */
.ap-target-bracket {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: rgba(241, 201, 139, 0.35);
    border-style: solid;
    border-width: 0;
    opacity: 0;
    animation: ap-bracket-show 3.2s ease-out infinite;
    z-index: 1;
}
.ap-tb-tl { top: 32%; right: 18%; border-top-width: 1.5px; border-left-width: 1.5px; }
.ap-tb-tr { top: 32%; right: 8%; border-top-width: 1.5px; border-right-width: 1.5px; }
.ap-tb-bl { bottom: 32%; right: 18%; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.ap-tb-br { bottom: 32%; right: 8%; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* Armor plate — vertical bar that gets pierced */
.ap-anim .ap-plate {
    position: absolute;
    right: 13%;
    top: 30%;
    bottom: 30%;
    width: 4px;
    background: linear-gradient(180deg, rgba(156, 163, 175, 0.15), rgba(156, 163, 175, 0.35), rgba(156, 163, 175, 0.15));
    border-radius: 2px;
    z-index: 1;
}

/* Penetration flash */
.ap-anim .ap-penetrate {
    position: absolute;
    right: 12%;
    top: 50%;
    transform: translate(50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    z-index: 4;
    animation: ap-penetrate-flash 3.2s ease-out infinite;
}

/* Sparks — flung out after penetration */
.ap-spark {
    position: absolute;
    right: 10%;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--thruster);
    z-index: 5;
    opacity: 0;
}
.ap-spark.s1 { animation: ap-spark-burst 3.2s ease-out infinite; --sx: 30px; --sy: -25px; }
.ap-spark.s2 { animation: ap-spark-burst 3.2s ease-out 0.03s infinite; --sx: 45px; --sy: -10px; }
.ap-spark.s3 { animation: ap-spark-burst 3.2s ease-out 0.05s infinite; --sx: 50px; --sy: 8px; }
.ap-spark.s4 { animation: ap-spark-burst 3.2s ease-out 0.02s infinite; --sx: 35px; --sy: 22px; }
.ap-spark.s5 { animation: ap-spark-burst 3.2s ease-out 0.07s infinite; --sx: 20px; --sy: 30px; }

.ap-label { color: var(--thruster); animation: ap-label-show 3.2s ease-out infinite; }

@keyframes ap-sabot-fly {
    0%      { left: -6%; opacity: 0; }
    4%      { left: 2%; opacity: 1; }
    72%     { left: 78%; opacity: 1; }
    75%     { left: 82%; opacity: 0; }
    76%,100%{ left: -6%; opacity: 0; }
}

@keyframes ap-bracket-show {
    0%,40%   { opacity: 0; transform: scale(1.5); }
    50%      { opacity: 0.8; transform: scale(1); }
    72%,100% { opacity: 0; }
}

@keyframes ap-penetrate-flash {
    0%,73%  { transform: translate(50%,-50%) scale(0); opacity: 0; }
    75%     { transform: translate(50%,-50%) scale(2.5); opacity: 1;
              box-shadow: 0 0 20px var(--thruster), 0 0 40px rgba(241,201,139,0.4); }
    82%     { transform: translate(50%,-50%) scale(1); opacity: 0.4; }
    90%,100%{ opacity: 0; }
}

@keyframes ap-spark-burst {
    0%,73%  { transform: translate(0,0) scale(1); opacity: 0; }
    76%     { transform: translate(0,0) scale(1.5); opacity: 1; }
    92%     { transform: translate(var(--sx), var(--sy)) scale(0.3); opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes ap-label-show {
    0%,73%  { opacity: 0; transform: translateX(-50%) translateY(4px); }
    78%     { opacity: 0.7; transform: translateX(-50%) translateY(0); }
    90%     { opacity: 0; }
    100%    { opacity: 0; }
}


/* ═══════════════════════════════════════════
   HSAT — INSTANT LASER LOCK
   ═══════════════════════════════════════════ */

/* Scanning sweep — converging reticle */
.hsat-anim .hsat-scan {
    position: absolute;
    right: 15%;
    top: 50%;
    width: 80px;
    height: 80px;
    transform: translate(50%, -50%);
    border: 1px solid rgba(140, 165, 211, 0.15);
    border-radius: 50%;
    animation: hsat-scan-converge 3.6s ease-in-out infinite;
}

/* Crosshairs */
.hsat-crosshair {
    position: absolute;
    background: rgba(140, 165, 211, 0.25);
}
.hsat-ch-h {
    right: 5%;
    width: 25%;
    top: 50%;
    height: 1px;
    transform-origin: right center;
    animation: hsat-ch-h-anim 3.6s ease-in-out infinite;
}
.hsat-ch-v {
    right: 15%;
    top: 25%;
    height: 50%;
    width: 1px;
    transform: translateX(50%);
    animation: hsat-ch-v-anim 3.6s ease-in-out infinite;
}

/* Lock diamond */
.hsat-anim .hsat-diamond {
    position: absolute;
    right: 13%;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--cyan);
    transform: translate(50%, -50%) rotate(45deg);
    opacity: 0;
    animation: hsat-diamond-lock 3.6s ease-out infinite;
    z-index: 2;
}

/* Origin emitter dot */
.hsat-anim .hsat-origin {
    position: absolute;
    left: 8%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    transform: translateY(-50%);
    box-shadow: 0 0 10px var(--cyan), 0 0 20px rgba(140, 165, 211, 0.3);
    animation: hsat-origin-pulse 3.6s ease-in-out infinite;
    z-index: 2;
}

/* Beam — instant snap */
.hsat-anim .hsat-beam {
    position: absolute;
    left: 8%;
    right: 15%;
    top: 50%;
    height: 2px;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--cyan), rgba(140, 165, 211, 0.8));
    z-index: 3;
    animation: hsat-beam-snap 3.6s ease-out infinite;
}

.hsat-anim .hsat-beam-glow {
    position: absolute;
    left: 8%;
    right: 15%;
    top: 50%;
    height: 8px;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(140, 165, 211, 0.3), rgba(140, 165, 211, 0.15));
    filter: blur(4px);
    z-index: 2;
    animation: hsat-beam-snap 3.6s ease-out infinite;
}

/* Impact core */
.hsat-anim .hsat-hit-core {
    position: absolute;
    right: 13%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    transform: translate(50%, -50%) scale(0);
    z-index: 4;
    animation: hsat-hit-flash 3.6s ease-out infinite;
}

/* Hit rings */
.hsat-hit-ring {
    position: absolute;
    right: 13%;
    top: 50%;
    transform: translate(50%, -50%) scale(0);
    border-radius: 50%;
    border: 1px solid var(--cyan);
    z-index: 1;
    opacity: 0;
}
.hsat-hit-ring.r1 { width: 40px; height: 40px; animation: hsat-ring-expand 3.6s ease-out infinite; }
.hsat-hit-ring.r2 { width: 60px; height: 60px; animation: hsat-ring-expand 3.6s ease-out 0.1s infinite; border-color: rgba(140,165,211,0.4); }

/* Scan lines — horizontal sweeps */
.hsat-scanline {
    position: absolute;
    right: 5%;
    width: 24%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(140, 165, 211, 0.2), transparent);
    opacity: 0;
}
.hsat-scanline.sl1 { top: 35%; animation: hsat-sl-sweep 3.6s ease-in-out 0.0s infinite; }
.hsat-scanline.sl2 { top: 50%; animation: hsat-sl-sweep 3.6s ease-in-out 0.15s infinite; }
.hsat-scanline.sl3 { top: 65%; animation: hsat-sl-sweep 3.6s ease-in-out 0.3s infinite; }

.hsat-label { color: var(--cyan); animation: hsat-label-show 3.6s ease-out infinite; }

@keyframes hsat-scan-converge {
    0%      { width: 100px; height: 100px; opacity: 0; border-color: rgba(140,165,211,0.08); }
    30%     { width: 60px; height: 60px; opacity: 0.6; border-color: rgba(140,165,211,0.25); }
    50%     { width: 30px; height: 30px; opacity: 0.9; border-color: rgba(140,165,211,0.5); }
    55%     { opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hsat-ch-h-anim {
    0%,20%  { opacity: 0.15; }
    45%     { opacity: 0.6; }
    55%     { opacity: 0.8; }
    60%,100%{ opacity: 0.15; }
}

@keyframes hsat-ch-v-anim {
    0%,20%  { opacity: 0.15; }
    45%     { opacity: 0.6; }
    55%     { opacity: 0.8; }
    60%,100%{ opacity: 0.15; }
}

@keyframes hsat-diamond-lock {
    0%,40%  { opacity: 0; transform: translate(50%,-50%) rotate(45deg) scale(2); }
    50%     { opacity: 1; transform: translate(50%,-50%) rotate(45deg) scale(1); }
    54%     { opacity: 0.5; }
    55%,100%{ opacity: 0; }
}

@keyframes hsat-origin-pulse {
    0%,48%  { transform: translateY(-50%) scale(1); filter: brightness(1); }
    52%     { transform: translateY(-50%) scale(2); filter: brightness(2); }
    56%     { transform: translateY(-50%) scale(0.6); filter: brightness(1.5); }
    65%,100%{ transform: translateY(-50%) scale(1); filter: brightness(1); }
}

@keyframes hsat-beam-snap {
    0%,51%  { transform: translateY(-50%) scaleX(0); opacity: 0; }
    52%     { transform: translateY(-50%) scaleX(1); opacity: 1;
              box-shadow: 0 0 8px var(--cyan), 0 0 24px rgba(140,165,211,0.3); }
    62%     { transform: translateY(-50%) scaleX(1); opacity: 0.5; }
    72%,100%{ transform: translateY(-50%) scaleX(1); opacity: 0; }
}

@keyframes hsat-hit-flash {
    0%,51%  { transform: translate(50%,-50%) scale(0); opacity: 0; }
    53%     { transform: translate(50%,-50%) scale(3); opacity: 1;
              box-shadow: 0 0 30px #fff, 0 0 60px var(--cyan); }
    60%     { transform: translate(50%,-50%) scale(1); opacity: 0.3; }
    70%,100%{ opacity: 0; }
}

@keyframes hsat-ring-expand {
    0%,51%  { transform: translate(50%,-50%) scale(0); opacity: 0; }
    54%     { transform: translate(50%,-50%) scale(0.5); opacity: 0.7; }
    70%     { transform: translate(50%,-50%) scale(2); opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hsat-sl-sweep {
    0%,20%  { opacity: 0; transform: translateY(0); }
    30%     { opacity: 0.5; transform: translateY(-2px); }
    50%     { opacity: 0.8; transform: translateY(0); }
    55%     { opacity: 0.2; }
    65%,100%{ opacity: 0; }
}

@keyframes hsat-label-show {
    0%,51%  { opacity: 0; transform: translateX(-50%) translateY(4px); }
    56%     { opacity: 0.8; transform: translateX(-50%) translateY(0); }
    72%     { opacity: 0; }
    100%    { opacity: 0; }
}


/* ═══════════════════════════════════════════
   HE — HIGH EXPLOSIVE DETONATION
   ═══════════════════════════════════════════ */

/* Arc trail — parabolic dotted path */
.he-anim .he-arc-trail {
    position: absolute;
    left: 10%;
    right: 15%;
    top: 30%;
    height: 50%;
    border: none;
    border-bottom: 1px dashed rgba(241, 201, 139, 0.08);
    border-radius: 0 0 60% 30%;
    pointer-events: none;
}

/* Round — chunky glowing orb */
.he-anim .he-round {
    position: absolute;
    top: 50%;
    left: 5%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--thruster), #c07030);
    box-shadow: 0 0 10px rgba(241, 201, 139, 0.6);
    transform: translateY(-50%);
    z-index: 3;
    animation: he-arc-travel 3.8s cubic-bezier(0.35, 0, 0.6, 1) infinite;
}

.he-anim .he-round-glow {
    position: absolute;
    top: 50%;
    left: 5%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241, 201, 139, 0.35) 0%, transparent 70%);
    filter: blur(3px);
    transform: translateY(-50%);
    z-index: 2;
    animation: he-arc-travel 3.8s cubic-bezier(0.35, 0, 0.6, 1) infinite;
}

/* Screen flash */
.he-anim .he-flash {
    position: absolute;
    inset: 0;
    background: rgba(241, 201, 139, 0.15);
    opacity: 0;
    z-index: 5;
    animation: he-screen-flash 3.8s ease-out infinite;
}

/* Fireball — expanding from impact point */
.he-anim .he-fireball {
    position: absolute;
    right: 18%;
    top: 50%;
    transform: translate(50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--thruster) 30%, rgba(192, 112, 48, 0.6) 60%, transparent 80%);
    z-index: 4;
    animation: he-fireball-expand 3.8s ease-out infinite;
}

/* Shockwave rings */
.he-ring {
    position: absolute;
    right: 18%;
    top: 50%;
    transform: translate(50%, -50%) scale(0);
    border-radius: 50%;
    width: 0;
    height: 0;
    z-index: 3;
}
.he-ring.r1 { border: 2px solid rgba(241, 201, 139, 0.6); animation: he-ring-out 3.8s ease-out 0.0s infinite; }
.he-ring.r2 { border: 1.5px solid rgba(241, 201, 139, 0.35); animation: he-ring-out 3.8s ease-out 0.12s infinite; }
.he-ring.r3 { border: 1px solid rgba(241, 201, 139, 0.15); animation: he-ring-out 3.8s ease-out 0.24s infinite; }

/* Debris particles */
.he-debris {
    position: absolute;
    right: 18%;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--thruster);
    z-index: 6;
    opacity: 0;
}
.he-debris.d1 { animation: he-debris-fly 3.8s ease-out infinite; --dx: -50px; --dy: -40px; --dr: 220deg; }
.he-debris.d2 { animation: he-debris-fly 3.8s ease-out 0.04s infinite; --dx: -30px; --dy: -55px; --dr: 180deg; }
.he-debris.d3 { animation: he-debris-fly 3.8s ease-out 0.02s infinite; --dx: 45px; --dy: -35px; --dr: -150deg; }
.he-debris.d4 { animation: he-debris-fly 3.8s ease-out 0.06s infinite; --dx: 55px; --dy: 15px; --dr: -200deg; }
.he-debris.d5 { animation: he-debris-fly 3.8s ease-out 0.03s infinite; --dx: -40px; --dy: 40px; --dr: 160deg; }
.he-debris.d6 { animation: he-debris-fly 3.8s ease-out 0.05s infinite; --dx: 30px; --dy: 50px; --dr: -180deg; }

/* Ground scar — horizontal crack at impact */
.he-anim .he-ground-scar {
    position: absolute;
    right: 10%;
    top: 50%;
    width: 60px;
    height: 2px;
    transform: translate(50%, -50%);
    background: linear-gradient(90deg, transparent, rgba(241, 201, 139, 0.3), transparent);
    border-radius: 1px;
    opacity: 0;
    z-index: 2;
    animation: he-scar-show 3.8s ease-out infinite;
}

.he-label { color: var(--thruster); animation: he-label-show 3.8s ease-out infinite; }

@keyframes he-arc-travel {
    0%      { left: 5%; top: 55%; opacity: 0; }
    5%      { left: 10%; top: 48%; opacity: 1; }
    35%     { left: 45%; top: 32%; }
    62%     { left: 72%; top: 48%; opacity: 1; }
    65%     { left: 76%; top: 50%; opacity: 0; }
    66%,100%{ left: 5%; top: 55%; opacity: 0; }
}

@keyframes he-screen-flash {
    0%,63%  { opacity: 0; }
    65%     { opacity: 0.3; }
    72%     { opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes he-fireball-expand {
    0%,63%  { width: 0; height: 0; opacity: 0; transform: translate(50%,-50%); }
    66%     { width: 30px; height: 30px; opacity: 1; transform: translate(50%,-50%); }
    75%     { width: 70px; height: 70px; opacity: 0.8; transform: translate(50%,-50%); }
    88%     { width: 90px; height: 90px; opacity: 0; transform: translate(50%,-50%); }
    100%    { opacity: 0; }
}

@keyframes he-ring-out {
    0%,63%  { width: 0; height: 0; opacity: 0; transform: translate(50%,-50%); }
    66%     { width: 14px; height: 14px; opacity: 1; transform: translate(50%,-50%); }
    88%     { width: 140px; height: 140px; opacity: 0; transform: translate(50%,-50%); }
    100%    { opacity: 0; }
}

@keyframes he-debris-fly {
    0%,63%  { transform: translate(0,0) rotate(0deg) scale(1); opacity: 0; }
    66%     { transform: translate(0,0) rotate(0deg) scale(1.5); opacity: 1; }
    90%     { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(0.2); opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes he-scar-show {
    0%,65%  { opacity: 0; width: 0; }
    70%     { opacity: 0.6; width: 60px; }
    90%     { opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes he-label-show {
    0%,65%  { opacity: 0; transform: translateX(-50%) translateY(4px); }
    70%     { opacity: 0.7; transform: translateX(-50%) translateY(0); }
    88%     { opacity: 0; }
    100%    { opacity: 0; }
}


/* ═══════════════════════════════════════════
   HESW — SHOCKWAVE FORCE PUSH (Enhanced)
   Timeline: 3.4s loop
   0-20%  Charge-up  |  20-28%  Peak compression
   28-33% BLAST      |  33-70%  Wave expansion
   70-90% Aftermath  |  90-100% Reset
   ═══════════════════════════════════════════ */

/* ── Emitter device ── */
.hesw-anim .hesw-emitter {
    position: absolute;
    left: 12%;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 28px;
    border: 1.5px solid rgba(241, 201, 139, 0.3);
    border-radius: 3px;
    background: rgba(241, 201, 139, 0.04);
    z-index: 2;
    animation: hesw-emitter-recoil 3.4s ease-out infinite;
}

.hesw-anim .hesw-emitter-core {
    position: absolute;
    left: calc(12% + 8px);
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--thruster);
    transform: translateY(-50%);
    box-shadow: 0 0 12px var(--thruster), 0 0 24px rgba(241, 201, 139, 0.3);
    z-index: 3;
    animation: hesw-core-pulse 3.4s ease-in-out infinite;
}

/* ── Charge-up ring (collapses inward) ── */
.hesw-anim .hesw-charge-ring {
    position: absolute;
    left: 16%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 1px solid rgba(241, 201, 139, 0.12);
    border-radius: 50%;
    z-index: 1;
    animation: hesw-charge-ring-collapse 3.4s ease-in-out infinite;
}

/* ── Charge particles spiral inward ── */
.hesw-charge-pt {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--thruster);
    z-index: 3;
    opacity: 0;
    box-shadow: 0 0 6px var(--thruster);
}
.hesw-charge-pt.cp1 { animation: hesw-cp-spiral 3.4s ease-in infinite; --sx: -40px; --sy: -30px; --r: 0deg; }
.hesw-charge-pt.cp2 { animation: hesw-cp-spiral 3.4s ease-in 0.08s infinite; --sx: 35px; --sy: -40px; --r: 45deg; }
.hesw-charge-pt.cp3 { animation: hesw-cp-spiral 3.4s ease-in 0.04s infinite; --sx: 50px; --sy: 10px; --r: 90deg; }
.hesw-charge-pt.cp4 { animation: hesw-cp-spiral 3.4s ease-in 0.12s infinite; --sx: -30px; --sy: 45px; --r: 135deg; }
.hesw-charge-pt.cp5 { animation: hesw-cp-spiral 3.4s ease-in 0.06s infinite; --sx: 20px; --sy: 50px; --r: 180deg; }
.hesw-charge-pt.cp6 { animation: hesw-cp-spiral 3.4s ease-in 0.10s infinite; --sx: -50px; --sy: 5px; --r: 225deg; }
.hesw-charge-pt.cp7 { animation: hesw-cp-spiral 3.4s ease-in 0.03s infinite; --sx: 45px; --sy: -20px; --r: 270deg; }
.hesw-charge-pt.cp8 { animation: hesw-cp-spiral 3.4s ease-in 0.14s infinite; --sx: -20px; --sy: -50px; --r: 315deg; }

/* ── Pre-blast electric arcs ── */
.hesw-pre-arc {
    position: absolute;
    left: calc(12% + 10px);
    top: 50%;
    height: 2px;
    width: 0;
    transform-origin: left center;
    z-index: 4;
    opacity: 0;
    filter: blur(0.5px);
}
.hesw-pre-arc.pa1 {
    background: linear-gradient(90deg, var(--thruster), #fff, var(--thruster), transparent);
    transform: translateY(-50%) rotate(-30deg);
    animation: hesw-pre-arc-crackle 3.4s ease-in-out infinite;
}
.hesw-pre-arc.pa2 {
    background: linear-gradient(90deg, var(--thruster), #fff, transparent);
    transform: translateY(-50%) rotate(5deg);
    animation: hesw-pre-arc-crackle 3.4s ease-in-out 0.1s infinite;
}
.hesw-pre-arc.pa3 {
    background: linear-gradient(90deg, var(--thruster), #fff, var(--thruster), transparent);
    transform: translateY(-50%) rotate(25deg);
    animation: hesw-pre-arc-crackle 3.4s ease-in-out 0.05s infinite;
}

/* ── Screen flash ── */
.hesw-anim .hesw-screen-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 16% 50%, rgba(255,255,255,0.4) 0%, rgba(241,201,139,0.15) 40%, transparent 70%);
    opacity: 0;
    z-index: 10;
    animation: hesw-screen-flash 3.4s ease-out infinite;
}

/* ── Blast flash (white-hot core) ── */
.hesw-anim .hesw-blast-flash {
    position: absolute;
    left: 16%;
    top: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--thruster) 40%, rgba(241,201,139,0.4) 70%, transparent 100%);
    z-index: 8;
    animation: hesw-blast-flash 3.4s ease-out infinite;
}

/* ── Blast cone (directional force shape) ── */
.hesw-anim .hesw-blast-cone {
    position: absolute;
    left: 16%;
    top: 50%;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(241,201,139,0.25) 30%, rgba(241,201,139,0.05) 60%, transparent 100%);
    z-index: 7;
    clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 70%);
    animation: hesw-blast-cone 3.4s ease-out infinite;
}

/* ── Primary compression wave fronts ── */
.hesw-wave {
    position: absolute;
    left: 16%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    z-index: 5;
}
.hesw-wave.wv1 {
    border: 2.5px solid rgba(241, 201, 139, 0.7);
    box-shadow: 0 0 8px rgba(241, 201, 139, 0.3), inset 0 0 8px rgba(241, 201, 139, 0.1);
    animation: hesw-wave-expand 3.4s ease-out 0.0s infinite;
}
.hesw-wave.wv2 {
    border: 2px solid rgba(241, 201, 139, 0.5);
    box-shadow: 0 0 6px rgba(241, 201, 139, 0.2);
    animation: hesw-wave-expand 3.4s ease-out 0.08s infinite;
}
.hesw-wave.wv3 {
    border: 1.5px solid rgba(241, 201, 139, 0.3);
    box-shadow: 0 0 4px rgba(241, 201, 139, 0.15);
    animation: hesw-wave-expand 3.4s ease-out 0.16s infinite;
}
.hesw-wave.wv4 {
    border: 1px solid rgba(241, 201, 139, 0.2);
    animation: hesw-wave-expand 3.4s ease-out 0.24s infinite;
}
.hesw-wave.wv5 {
    border: 0.5px solid rgba(241, 201, 139, 0.1);
    animation: hesw-wave-expand 3.4s ease-out 0.32s infinite;
}

/* ── Chromatic distortion rings (red / blue fringe) ── */
.hesw-distort {
    position: absolute;
    left: 16%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    z-index: 4;
    mix-blend-mode: screen;
}
.hesw-distort.dr1 {
    border: 2px solid rgba(255, 100, 80, 0.35);
    box-shadow: 0 0 12px rgba(255, 100, 80, 0.2), inset 0 0 12px rgba(255, 100, 80, 0.05);
    animation: hesw-distort-expand 3.4s ease-out 0.02s infinite;
}
.hesw-distort.dr2 {
    border: 2px solid rgba(80, 140, 255, 0.3);
    box-shadow: 0 0 12px rgba(80, 140, 255, 0.15), inset 0 0 12px rgba(80, 140, 255, 0.05);
    animation: hesw-distort-expand 3.4s ease-out 0.06s infinite;
}

/* ── Speed streaks (radial motion lines) ── */
.hesw-streak {
    position: absolute;
    left: 18%;
    top: 50%;
    height: 1.5px;
    width: 0;
    transform-origin: left center;
    z-index: 3;
    opacity: 0;
}
.hesw-streak.sk1 { background: linear-gradient(90deg, rgba(241,201,139,0.7), rgba(241,201,139,0.1), transparent); transform: translateY(-50%) rotate(-28deg); animation: hesw-streak-fly 3.4s ease-out 0.00s infinite; }
.hesw-streak.sk2 { background: linear-gradient(90deg, rgba(241,201,139,0.6), transparent); transform: translateY(-50%) rotate(-18deg); animation: hesw-streak-fly 3.4s ease-out 0.03s infinite; }
.hesw-streak.sk3 { background: linear-gradient(90deg, rgba(241,201,139,0.8), rgba(255,255,255,0.3), transparent); transform: translateY(-50%) rotate(-8deg); animation: hesw-streak-fly 3.4s ease-out 0.01s infinite; height: 2px; }
.hesw-streak.sk4 { background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(241,201,139,0.4), transparent); transform: translateY(-50%) rotate(-2deg); animation: hesw-streak-fly 3.4s ease-out 0.05s infinite; height: 2.5px; }
.hesw-streak.sk5 { background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(241,201,139,0.5), transparent); transform: translateY(-50%) rotate(0deg); animation: hesw-streak-fly 3.4s ease-out 0.00s infinite; height: 3px; }
.hesw-streak.sk6 { background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(241,201,139,0.4), transparent); transform: translateY(-50%) rotate(3deg); animation: hesw-streak-fly 3.4s ease-out 0.04s infinite; height: 2.5px; }
.hesw-streak.sk7 { background: linear-gradient(90deg, rgba(241,201,139,0.8), rgba(255,255,255,0.3), transparent); transform: translateY(-50%) rotate(9deg); animation: hesw-streak-fly 3.4s ease-out 0.02s infinite; height: 2px; }
.hesw-streak.sk8 { background: linear-gradient(90deg, rgba(241,201,139,0.6), transparent); transform: translateY(-50%) rotate(19deg); animation: hesw-streak-fly 3.4s ease-out 0.06s infinite; }
.hesw-streak.sk9 { background: linear-gradient(90deg, rgba(241,201,139,0.5), transparent); transform: translateY(-50%) rotate(30deg); animation: hesw-streak-fly 3.4s ease-out 0.03s infinite; }

/* ── Electric arcs (jagged tendrils) ── */
.hesw-arc {
    position: absolute;
    left: 18%;
    top: 50%;
    width: 0;
    height: 2px;
    transform-origin: left center;
    z-index: 6;
    opacity: 0;
    filter: blur(0.3px);
}
.hesw-arc.ac1 {
    background: linear-gradient(90deg, #fff, var(--thruster) 30%, #fff 50%, rgba(241,201,139,0.5) 70%, transparent);
    transform: translateY(-50%) rotate(-22deg);
    animation: hesw-arc-fire 3.4s ease-out 0.00s infinite;
    --arc-w: 90px;
}
.hesw-arc.ac2 {
    background: linear-gradient(90deg, #fff, var(--thruster) 40%, transparent);
    transform: translateY(-50%) rotate(-6deg);
    animation: hesw-arc-fire 3.4s ease-out 0.04s infinite;
    --arc-w: 110px;
    height: 1.5px;
}
.hesw-arc.ac3 {
    background: linear-gradient(90deg, #fff, var(--thruster) 25%, #fff 60%, transparent);
    transform: translateY(-50%) rotate(8deg);
    animation: hesw-arc-fire 3.4s ease-out 0.02s infinite;
    --arc-w: 100px;
    height: 2.5px;
}
.hesw-arc.ac4 {
    background: linear-gradient(90deg, #fff, var(--thruster) 35%, transparent);
    transform: translateY(-50%) rotate(24deg);
    animation: hesw-arc-fire 3.4s ease-out 0.06s infinite;
    --arc-w: 80px;
    height: 1px;
}

/* ── Plasma fragments (bright spraying dots) ── */
.hesw-plasma {
    position: absolute;
    left: 16%;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px var(--thruster), 0 0 12px rgba(241, 201, 139, 0.4);
    z-index: 6;
    opacity: 0;
}
.hesw-plasma.pf1  { animation: hesw-plasma-fly 3.4s ease-out 0.00s infinite; --px: 120px; --py: -35px; width: 3px; height: 3px; }
.hesw-plasma.pf2  { animation: hesw-plasma-fly 3.4s ease-out 0.02s infinite; --px: 100px; --py: -55px; }
.hesw-plasma.pf3  { animation: hesw-plasma-fly 3.4s ease-out 0.04s infinite; --px: 140px; --py: -15px; width: 2px; height: 2px; }
.hesw-plasma.pf4  { animation: hesw-plasma-fly 3.4s ease-out 0.01s infinite; --px: 80px;  --py: -65px; width: 3px; height: 3px; }
.hesw-plasma.pf5  { animation: hesw-plasma-fly 3.4s ease-out 0.05s infinite; --px: 150px; --py: 5px; }
.hesw-plasma.pf6  { animation: hesw-plasma-fly 3.4s ease-out 0.03s infinite; --px: 130px; --py: 30px; width: 2px; height: 2px; }
.hesw-plasma.pf7  { animation: hesw-plasma-fly 3.4s ease-out 0.06s infinite; --px: 110px; --py: 50px; width: 3px; height: 3px; }
.hesw-plasma.pf8  { animation: hesw-plasma-fly 3.4s ease-out 0.02s infinite; --px: 90px;  --py: 60px; }
.hesw-plasma.pf9  { animation: hesw-plasma-fly 3.4s ease-out 0.04s infinite; --px: 70px;  --py: -45px; width: 2px; height: 2px; }
.hesw-plasma.pf10 { animation: hesw-plasma-fly 3.4s ease-out 0.07s infinite; --px: 160px; --py: -8px; width: 3px; height: 3px; }

/* ── Targets pushed ── */
.hesw-target {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 10px;
    border: 1.5px solid rgba(140, 165, 211, 0.4);
    background: rgba(140, 165, 211, 0.06);
    border-radius: 2px;
    z-index: 2;
    opacity: 0;
}
.hesw-target.ht1 { transform: translateY(-22px); animation: hesw-target-push 3.4s ease-out 0.0s infinite; --push-rot: 35deg; --ty: -22px; }
.hesw-target.ht2 { transform: translateY(-50%); animation: hesw-target-push 3.4s ease-out 0.05s infinite; --push-rot: -10deg; --ty: -50%; }
.hesw-target.ht3 { transform: translateY(12px); animation: hesw-target-push 3.4s ease-out 0.10s infinite; --push-rot: -30deg; --ty: 12px; }

/* ── Debris chunks (tumbling geometry) ── */
.hesw-debris {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    opacity: 0;
    background: rgba(241, 201, 139, 0.5);
}
.hesw-debris.db1 { width: 5px; height: 3px; border-radius: 1px; animation: hesw-debris-tumble 3.4s ease-out 0.00s infinite; --dx: 80px;  --dy: -40px; --dr: 420deg; }
.hesw-debris.db2 { width: 3px; height: 5px; border-radius: 1px; animation: hesw-debris-tumble 3.4s ease-out 0.03s infinite; --dx: 60px;  --dy: -60px; --dr: -380deg; }
.hesw-debris.db3 { width: 4px; height: 4px; border-radius: 0; animation: hesw-debris-tumble 3.4s ease-out 0.06s infinite; --dx: 100px; --dy: -20px; --dr: 500deg; }
.hesw-debris.db4 { width: 6px; height: 2px; border-radius: 1px; animation: hesw-debris-tumble 3.4s ease-out 0.02s infinite; --dx: 90px;  --dy: 35px; --dr: -460deg; }
.hesw-debris.db5 { width: 3px; height: 3px; border-radius: 50%; animation: hesw-debris-tumble 3.4s ease-out 0.05s infinite; --dx: 70px;  --dy: 55px; --dr: 320deg; }
.hesw-debris.db6 { width: 4px; height: 2px; border-radius: 1px; animation: hesw-debris-tumble 3.4s ease-out 0.04s infinite; --dx: 110px; --dy: 10px; --dr: -540deg; }

/* ── Atmospheric dust ── */
.hesw-dust {
    position: absolute;
    left: 30%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(241, 201, 139, 0.15);
    filter: blur(2px);
    z-index: 1;
    opacity: 0;
}
.hesw-dust.du1 { animation: hesw-dust-drift 3.4s ease-out 0.10s infinite; --ddx: 40px;  --ddy: -30px; }
.hesw-dust.du2 { animation: hesw-dust-drift 3.4s ease-out 0.15s infinite; --ddx: 60px;  --ddy: -10px; width: 8px; height: 8px; }
.hesw-dust.du3 { animation: hesw-dust-drift 3.4s ease-out 0.20s infinite; --ddx: 35px;  --ddy: 25px; }
.hesw-dust.du4 { animation: hesw-dust-drift 3.4s ease-out 0.12s infinite; --ddx: 55px;  --ddy: 15px; width: 10px; height: 10px; }
.hesw-dust.du5 { animation: hesw-dust-drift 3.4s ease-out 0.18s infinite; --ddx: 70px;  --ddy: -5px; width: 7px; height: 7px; }

/* ── Ground cracks from epicenter ── */
.hesw-crack {
    position: absolute;
    left: 16%;
    top: 50%;
    height: 1px;
    width: 0;
    transform-origin: left center;
    z-index: 1;
    opacity: 0;
}
.hesw-crack.ck1 {
    background: linear-gradient(90deg, rgba(241,201,139,0.5), rgba(241,201,139,0.2), transparent);
    transform: translateY(-50%) rotate(-5deg);
    animation: hesw-crack-spread 3.4s ease-out 0.0s infinite;
    --cw: 120px;
}
.hesw-crack.ck2 {
    background: linear-gradient(90deg, rgba(241,201,139,0.3), rgba(241,201,139,0.1), transparent);
    transform: translateY(-50%) rotate(3deg);
    animation: hesw-crack-spread 3.4s ease-out 0.04s infinite;
    --cw: 100px;
}
.hesw-crack.ck3 {
    background: linear-gradient(90deg, rgba(241,201,139,0.4), transparent);
    transform: translateY(-50%) rotate(-12deg);
    animation: hesw-crack-spread 3.4s ease-out 0.08s infinite;
    --cw: 80px;
}

/* ── Ground ripple (horizontal disturbance line) ── */
.hesw-anim .hesw-ground-ripple {
    position: absolute;
    left: 10%;
    right: 5%;
    top: calc(50% + 30px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(241, 201, 139, 0.2) 20%, rgba(241, 201, 139, 0.05) 80%, transparent);
    z-index: 1;
    opacity: 0;
    animation: hesw-ground-ripple 3.4s ease-out infinite;
}

/* ── Heat shimmer (distortion zone) ── */
.hesw-anim .hesw-shimmer {
    position: absolute;
    left: 14%;
    top: 30%;
    width: 50%;
    height: 40%;
    background: linear-gradient(90deg, transparent, rgba(241,201,139,0.02) 30%, rgba(241,201,139,0.04) 50%, rgba(241,201,139,0.02) 70%, transparent);
    z-index: 0;
    opacity: 0;
    filter: blur(3px);
    animation: hesw-shimmer-show 3.4s ease-out infinite;
}

/* ── Floating embers (post-blast rising particles) ── */
.hesw-ember {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--thruster);
    box-shadow: 0 0 4px rgba(241, 201, 139, 0.6);
    z-index: 3;
    opacity: 0;
}
.hesw-ember.em1 { left: 25%; top: 55%; animation: hesw-ember-rise 3.4s ease-out 0.2s infinite; }
.hesw-ember.em2 { left: 35%; top: 50%; animation: hesw-ember-rise 3.4s ease-out 0.3s infinite; width: 1.5px; height: 1.5px; }
.hesw-ember.em3 { left: 45%; top: 58%; animation: hesw-ember-rise 3.4s ease-out 0.4s infinite; }
.hesw-ember.em4 { left: 55%; top: 52%; animation: hesw-ember-rise 3.4s ease-out 0.35s infinite; width: 2.5px; height: 2.5px; }
.hesw-ember.em5 { left: 30%; top: 48%; animation: hesw-ember-rise 3.4s ease-out 0.25s infinite; width: 1.5px; height: 1.5px; }
.hesw-ember.em6 { left: 50%; top: 56%; animation: hesw-ember-rise 3.4s ease-out 0.45s infinite; }

.hesw-label { color: var(--thruster); animation: hesw-label-show 3.4s ease-out infinite; }


/* ════════════════════════════════════
   HESW KEYFRAMES
   ════════════════════════════════════ */

@keyframes hesw-emitter-recoil {
    0%,25%  { transform: translateY(-50%) translateX(0); }
    28%     { transform: translateY(-50%) translateX(2px); }
    30%     { transform: translateY(-50%) translateX(-8px); }
    40%     { transform: translateY(-50%) translateX(0); }
    100%    { transform: translateY(-50%) translateX(0); }
}

@keyframes hesw-core-pulse {
    0%,10%  { transform: translateY(-50%) scale(1); filter: brightness(1);
              box-shadow: 0 0 12px var(--thruster), 0 0 24px rgba(241,201,139,0.3); }
    20%     { transform: translateY(-50%) scale(1.6); filter: brightness(1.5);
              box-shadow: 0 0 18px var(--thruster), 0 0 36px rgba(241,201,139,0.5); }
    25%     { transform: translateY(-50%) scale(2.2); filter: brightness(2);
              box-shadow: 0 0 24px var(--thruster), 0 0 48px rgba(241,201,139,0.7); }
    28%     { transform: translateY(-50%) scale(3); filter: brightness(3);
              box-shadow: 0 0 40px #fff, 0 0 80px var(--thruster), 0 0 120px rgba(241,201,139,0.4); }
    32%     { transform: translateY(-50%) scale(0.5); filter: brightness(1.5);
              box-shadow: 0 0 8px var(--thruster); }
    45%,100%{ transform: translateY(-50%) scale(1); filter: brightness(1);
              box-shadow: 0 0 12px var(--thruster), 0 0 24px rgba(241,201,139,0.3); }
}

@keyframes hesw-charge-ring-collapse {
    0%      { width: 80px; height: 80px; opacity: 0; border-color: rgba(241,201,139,0.05); }
    10%     { width: 70px; height: 70px; opacity: 0.3; border-color: rgba(241,201,139,0.15); }
    22%     { width: 20px; height: 20px; opacity: 0.8; border-color: rgba(241,201,139,0.45); }
    28%     { width: 0; height: 0; opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hesw-cp-spiral {
    0%      { left: calc(16% + var(--sx)); top: calc(50% + var(--sy)); opacity: 0; transform: scale(0.5); }
    5%      { opacity: 0.8; transform: scale(1); }
    22%     { left: calc(16% + 3px); top: 50%; opacity: 1; transform: scale(1.5);
              box-shadow: 0 0 10px var(--thruster), 0 0 20px rgba(241,201,139,0.4); }
    28%     { opacity: 0; transform: scale(0); }
    100%    { opacity: 0; }
}

@keyframes hesw-pre-arc-crackle {
    0%,15%  { width: 0; opacity: 0; }
    18%     { width: 25px; opacity: 0.8; }
    20%     { width: 10px; opacity: 0.3; }
    22%     { width: 35px; opacity: 1; }
    24%     { width: 5px; opacity: 0.2; }
    26%     { width: 40px; opacity: 0.9; }
    28%     { width: 0; opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hesw-screen-flash {
    0%,27%  { opacity: 0; }
    28%     { opacity: 0; }
    29%     { opacity: 1; }
    33%     { opacity: 0.3; }
    40%     { opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hesw-blast-flash {
    0%,27%  { width: 0; height: 0; opacity: 0; }
    28%     { width: 10px; height: 10px; opacity: 1;
              box-shadow: 0 0 30px #fff, 0 0 60px var(--thruster), 0 0 100px rgba(241,201,139,0.5); }
    32%     { width: 50px; height: 50px; opacity: 0.9;
              box-shadow: 0 0 40px #fff, 0 0 80px var(--thruster); }
    40%     { width: 80px; height: 80px; opacity: 0.3;
              box-shadow: 0 0 20px var(--thruster); }
    50%     { width: 100px; height: 100px; opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hesw-blast-cone {
    0%,27%  { width: 0; height: 0; opacity: 0; }
    29%     { width: 60px; height: 80px; opacity: 1; }
    38%     { width: 180px; height: 120px; opacity: 0.6; }
    55%     { width: 300px; height: 160px; opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hesw-wave-expand {
    0%,27%  { width: 0; height: 0; opacity: 0; transform: translate(-50%,-50%) scale(0); }
    29%     { width: 20px; height: 20px; opacity: 1; transform: translate(-50%,-50%) scale(1); }
    50%     { width: 160px; height: 160px; opacity: 0.4; transform: translate(-50%,-50%) scale(1); }
    70%     { width: 260px; height: 260px; opacity: 0; transform: translate(-50%,-50%) scale(1); }
    100%    { opacity: 0; }
}

@keyframes hesw-distort-expand {
    0%,27%  { width: 0; height: 0; opacity: 0; transform: translate(-50%,-50%) scale(0); }
    30%     { width: 30px; height: 30px; opacity: 0.8; transform: translate(-50%,-50%) scale(1); }
    55%     { width: 200px; height: 200px; opacity: 0.3; transform: translate(-50%,-50%) scale(1); }
    75%     { width: 300px; height: 300px; opacity: 0; transform: translate(-50%,-50%) scale(1); }
    100%    { opacity: 0; }
}

@keyframes hesw-streak-fly {
    0%,27%  { width: 0; opacity: 0; }
    29%     { width: 30px; opacity: 0.9; }
    40%     { width: 100px; opacity: 0.6; }
    55%     { width: 160px; opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hesw-arc-fire {
    0%,27%  { width: 0; opacity: 0; }
    28%     { width: calc(var(--arc-w) * 0.3); opacity: 1; filter: brightness(2); }
    30%     { width: var(--arc-w); opacity: 0.9; filter: brightness(1.5); }
    32%     { width: calc(var(--arc-w) * 0.5); opacity: 0.4; filter: brightness(1); }
    34%     { width: var(--arc-w); opacity: 0.7; filter: brightness(1.3); }
    38%     { width: calc(var(--arc-w) * 0.2); opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hesw-plasma-fly {
    0%,27%  { transform: translate(0, 0) scale(1); opacity: 0; }
    29%     { transform: translate(10px, 0) scale(1.5); opacity: 1;
              box-shadow: 0 0 8px #fff, 0 0 16px var(--thruster); }
    50%     { transform: translate(var(--px), var(--py)) scale(0.8); opacity: 0.6;
              box-shadow: 0 0 4px var(--thruster); }
    70%     { transform: translate(calc(var(--px) * 1.3), calc(var(--py) * 1.2)) scale(0.2); opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hesw-target-push {
    0%,25%  { left: 55%; opacity: 0; transform: translateY(var(--ty, -50%)) rotate(0deg) scale(1); }
    28%     { left: 55%; opacity: 0.9; transform: translateY(var(--ty, -50%)) rotate(0deg) scale(1); }
    30%     { left: 58%; opacity: 0.9; transform: translateY(var(--ty, -50%)) rotate(2deg) scale(1.1);
              border-color: rgba(255,255,255,0.6); }
    50%     { left: 80%; opacity: 0.5; transform: translateY(var(--ty, -50%)) rotate(calc(var(--push-rot) * 0.7)) scale(0.9); }
    70%     { left: 98%; opacity: 0.1; transform: translateY(var(--ty, -50%)) rotate(var(--push-rot)) scale(0.7); }
    80%,100%{ left: 98%; opacity: 0; }
}

@keyframes hesw-debris-tumble {
    0%,27%  { transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }
    29%     { transform: translate(5px, 0) rotate(0deg) scale(1.5); opacity: 1; }
    50%     { transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) rotate(calc(var(--dr) * 0.5)) scale(1); opacity: 0.7; }
    75%     { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(0.3); opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hesw-dust-drift {
    0%,30%  { transform: translate(0, 0); opacity: 0; }
    35%     { opacity: 0.4; }
    60%     { transform: translate(var(--ddx), var(--ddy)); opacity: 0.2; }
    85%     { transform: translate(calc(var(--ddx) * 1.3), calc(var(--ddy) - 10px)); opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hesw-crack-spread {
    0%,28%  { width: 0; opacity: 0; }
    32%     { width: calc(var(--cw) * 0.5); opacity: 0.8; }
    45%     { width: var(--cw); opacity: 0.5; }
    70%     { width: var(--cw); opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hesw-ground-ripple {
    0%,28%  { opacity: 0; transform: scaleX(0); }
    32%     { opacity: 0.5; transform: scaleX(0.3); }
    50%     { opacity: 0.3; transform: scaleX(1); }
    70%     { opacity: 0; transform: scaleX(1); }
    100%    { opacity: 0; }
}

@keyframes hesw-shimmer-show {
    0%,30%  { opacity: 0; }
    40%     { opacity: 0.6; }
    60%     { opacity: 0.3; }
    85%     { opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes hesw-ember-rise {
    0%,35%  { opacity: 0; transform: translateY(0) scale(1); }
    40%     { opacity: 0.8; transform: translateY(0) scale(1); }
    70%     { opacity: 0.5; transform: translateY(-20px) scale(0.7); }
    90%     { opacity: 0; transform: translateY(-35px) scale(0.3); }
    100%    { opacity: 0; }
}

@keyframes hesw-label-show {
    0%,30%  { opacity: 0; transform: translateX(-50%) translateY(4px); }
    38%     { opacity: 0.7; transform: translateX(-50%) translateY(0); }
    60%     { opacity: 0; }
    100%    { opacity: 0; }
}


/* ══════════════════════════════════════════════
   FOOTER — Redesigned premium layout
   ══════════════════════════════════════════════ */
.footer {
    position: relative;
    background: var(--deep-black);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--steel-gray);
    padding: 0 var(--section-px);
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Gold accent line at top */
.footer-accent {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(241, 201, 139, 0.04) 10%,
        rgba(241, 201, 139, 0.2) 50%,
        rgba(241, 201, 139, 0.04) 90%,
        transparent 100%);
    margin-bottom: 0;
}

/* ── 4-column grid ── */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--s-34);
    padding: var(--s-55) 0 var(--s-34);
}

.footer-col {
    display: flex;
    flex-direction: column;
}

/* ── Column titles ── */
.footer-col-title {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 1rem;
}

.footer-col-title--mt {
    margin-top: 1.5rem;
}

/* ── Brand column ── */
.footer-brand {
    padding-right: var(--s-21);
}

.footer-logo {
    font-family: var(--font-raj);
    font-size: clamp(1.4rem, 1rem + 1vw, 2.2rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--white) 0%, var(--thruster) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.15em;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.footer-tagline {
    font-family: var(--font-inter);
    font-size: clamp(0.7rem, 0.55rem + 0.25vw, 0.9rem);
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.6;
    margin: 0 0 1.4rem;
}

/* ── Social icons ── */
.footer-socials {
    display: flex;
    gap: 0.6rem;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.footer-social:hover {
    background: rgba(241, 201, 139, 0.08);
    border-color: rgba(241, 201, 139, 0.2);
    color: var(--thruster);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(241, 201, 139, 0.08);
}

/* ── Nav links ── */
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-family: var(--font-inter);
    font-size: clamp(0.65rem, 0.5rem + 0.2vw, 0.82rem);
    transition: color 0.25s ease, transform 0.2s ease;
    display: inline-block;
}

.footer-nav a:hover {
    color: var(--white);
    transform: translateX(3px);
}

/* ── Status indicator ── */
.footer-status {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.footer-status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-inter);
    font-size: clamp(0.62rem, 0.5rem + 0.18vw, 0.78rem);
    color: rgba(255, 255, 255, 0.45);
}

.footer-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
    animation: statusPulse 2.5s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(52, 211, 153, 0.4); }
    50%      { opacity: 0.6; box-shadow: 0 0 4px rgba(52, 211, 153, 0.2); }
}

.footer-version {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.18);
    margin: 0;
    letter-spacing: 0.08em;
}

.footer-tech {
    font-family: var(--font-inter);
    font-size: clamp(0.6rem, 0.48rem + 0.18vw, 0.75rem);
    color: rgba(255, 255, 255, 0.25);
    margin: 0;
    line-height: 1.5;
}

/* ── Bottom bar ── */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-21) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-copy {
    font-size: clamp(0.5rem, 0.4rem + 0.15vw, 0.68rem);
    color: rgba(255, 255, 255, 0.18);
    margin: 0;
}

.footer-copy p {
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    gap: var(--s-21);
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
    font-size: clamp(0.5rem, 0.4rem + 0.15vw, 0.68rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.footer-bottom-links a:hover {
    color: rgba(255, 255, 255, 0.5);
}

/* ══════════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════════ */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(var(--s-21));
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: none;
}

/* Staggered children — each child delays 80ms more */
.reveal-on-scroll.revealed > *:nth-child(1) { transition-delay: 0ms; }
.reveal-on-scroll.revealed > *:nth-child(2) { transition-delay: 80ms; }
.reveal-on-scroll.revealed > *:nth-child(3) { transition-delay: 160ms; }
.reveal-on-scroll.revealed > *:nth-child(4) { transition-delay: 240ms; }

/* ══════════════════════════════════════════════
   FADE IN ANIMATIONS
   ══════════════════════════════════════════════ */
.fade-in-up {
    animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.fade-in-delayed {
    animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(var(--s-21));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Structural layout shifts — sizing handled by fluid clamp() tokens */
    .showcase-stats {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
    }

    .class-card {
        min-width: auto;
    }

    .phil-grid {
        grid-template-columns: 1fr;
    }

    .phil-col--offset {
        margin-top: 0;
    }
}