/* ============================================================
   CaesariumX — Core Design System
   Shared across the homepage, the arsenal index, and app shells.
   ============================================================ */

:root {
    color-scheme: dark;

    /* Ground */
    --bg: #020203;
    --bg-soft: #07080b;
    --bg-elevated: rgba(14, 15, 20, 0.76);
    --bg-elevated-strong: rgba(19, 21, 29, 0.9);

    /* Ink */
    --text: #f7f8fb;
    --text-soft: #c8ccd7;
    --text-muted: #8d93a4;
    --text-faint: #626879;

    /* Lines */
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.18);
    --white-glow: rgba(255, 255, 255, 0.12);

    /* Imperial palette */
    --red: #ff315f;
    --red-deep: #dc143c;
    --red-dark: #8b0020;
    --blue: #5d7cff;
    --cyan: #6de8ff;
    --gold: #ffd166;
    --gold-deep: #d4af6a;
    --green: #48f7a7;
    --purple: #a98cff;

    /* Depth */
    --shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.26);
    --shadow-md: 0 22px 56px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 34px 90px rgba(0, 0, 0, 0.55);

    /* Metrics */
    --container: min(1180px, calc(100% - 40px));
    --container-wide: min(1320px, calc(100% - 40px));
    --header-h: 76px;

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --fast: 180ms var(--ease);
    --smooth: 360ms var(--ease);
    --slow: 700ms var(--ease);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    background: var(--bg);
    scroll-padding-top: calc(var(--header-h) + 24px);
    width: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    background:
        radial-gradient(circle at 18% 4%, rgba(255, 49, 95, 0.16), transparent 30rem),
        radial-gradient(circle at 82% 12%, rgba(93, 124, 255, 0.13), transparent 32rem),
        radial-gradient(circle at 50% 96%, rgba(255, 209, 102, 0.07), transparent 28rem),
        var(--bg);
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    transition: filter 0.6s ease, opacity 0.6s ease;
}

/* Easter egg: page collapse state (Caesarion) */
body.caesarion-collapse {
    filter: blur(8px) brightness(0.3);
    opacity: 0.5;
    pointer-events: none;
    overflow: hidden;
}

body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before {
    z-index: -4;
    background:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.22));
}
body::after {
    z-index: -3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
    opacity: 0.028;
    mix-blend-mode: overlay;
}

::selection { background: rgba(255, 49, 95, 0.3); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050507; }
::-webkit-scrollbar-thumb { background: rgba(220, 20, 60, 0.35); border-radius: 10px; border: 2px solid #050507; }
::-webkit-scrollbar-thumb:hover { background: rgba(220, 20, 60, 0.6); }

/* ===== Scroll progress rail ===== */
.scroll-rail {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%;
    z-index: 120; pointer-events: none; background: transparent;
}
.scroll-rail-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--red-deep), var(--red), var(--gold));
    box-shadow: 0 0 14px rgba(255, 49, 95, 0.6);
    transition: width 90ms linear;
}

/* ===== Layout ===== */
.page-shell { position: relative; width: 100%; overflow-x: hidden; }
.container { width: var(--container); margin-inline: auto; }
.container-wide { width: var(--container-wide); margin-inline: auto; }
.section { padding: clamp(4.5rem, 8vw, 8rem) 0; position: relative; }

.ambient-field { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0.5; }

/* ===== Typography ===== */
.display-title, .section-title, .product-title, .history-title, .token-title, .community-title {
    color: var(--text);
    font-family: "Orbitron", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.02;
}
.display-title { font-size: clamp(2.6rem, 8vw, 5.6rem); }
.section-title, .history-title, .token-title, .community-title { font-size: clamp(2rem, 5vw, 3.25rem); text-wrap: balance; }
.product-title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }

.gradient-title {
    background: linear-gradient(120deg, #ffffff 0%, #ffd8e0 32%, var(--red) 60%, #ffffff 100%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titleShine 9s linear infinite;
}
@keyframes titleShine { to { background-position: 220% center; } }

.lead, .section-copy, .product-copy, .history-copy, .token-copy, .community-copy {
    color: var(--text-soft);
    font-size: clamp(1rem, 2vw, 1.16rem);
    line-height: 1.82;
}
.lead { max-width: 60ch; }

.eyebrow, .product-topline, .history-topline, .token-eyebrow {
    font-family: "Orbitron", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--red);
}
.accent { color: var(--red); }

.section-header { max-width: 760px; margin: 0 auto var(--space-12); text-align: center; }
.section-header .eyebrow { margin-bottom: var(--space-3); }
.section-header .section-copy { margin-top: var(--space-4); }

/* ===== Reveal system =====
   Scoped to .js (set by an inline script in <head>) so that if
   JavaScript never runs, nothing is left stuck at opacity 0. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s var(--ease-out-expo), transform 0.85s var(--ease-out-expo);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal][data-delay="1"] { transition-delay: 90ms; }
.js [data-reveal][data-delay="2"] { transition-delay: 180ms; }
.js [data-reveal][data-delay="3"] { transition-delay: 270ms; }
.js [data-reveal][data-delay="4"] { transition-delay: 360ms; }

/* ===== Surfaces ===== */
.glass-card, .identity-card, .product-panel, .history-art, .history-facts,
.token-card, .community-card, .modal-panel, .app-card, .tier-card, .step-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.022) 46%, rgba(255, 49, 95, 0.03)),
        rgba(7, 8, 12, 0.78);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

/* Cursor-tracking sheen */
.interactive-card { --mx: 50%; --my: 50%; transition: transform var(--smooth), border-color var(--smooth), box-shadow var(--smooth); }
.interactive-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(340px circle at var(--mx) var(--my), rgba(255, 49, 95, 0.13), transparent 62%);
    opacity: 0; transition: opacity var(--smooth); pointer-events: none; z-index: 1;
}
.interactive-card:hover::before { opacity: 1; }
.interactive-card:hover { border-color: rgba(255, 49, 95, 0.3); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* ===== Buttons ===== */
.btn {
    position: relative; display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1.6rem; border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text); font-size: 0.92rem; font-weight: 600;
    text-decoration: none; cursor: pointer; overflow: hidden;
    transition: transform var(--fast), border-color var(--fast), background var(--fast), box-shadow var(--fast);
    font-family: "Inter", sans-serif;
}
.btn svg { width: 17px; height: 17px; transition: transform var(--fast); }
.btn:hover { transform: translateY(-2px); border-color: rgba(255, 49, 95, 0.5); background: rgba(255, 49, 95, 0.08); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: linear-gradient(135deg, var(--red-deep), #ff4a72);
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(220, 20, 60, 0.28);
    color: #fff;
}
.btn-primary:hover { background: linear-gradient(135deg, #ff2f5c, #ff6285); box-shadow: 0 18px 44px rgba(220, 20, 60, 0.4); }

.btn-ghost { background: transparent; border-color: var(--line); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* ===== Header ===== */
.site-header {
    position: sticky; top: 0; z-index: 100;
    height: var(--header-h);
    display: flex; align-items: center;
    border-bottom: 1px solid transparent;
    transition: background var(--smooth), border-color var(--smooth), backdrop-filter var(--smooth);
}
.site-header.is-stuck {
    background: rgba(4, 4, 7, 0.82);
    border-bottom-color: rgba(255, 49, 95, 0.16);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.header-inner { width: var(--container-wide); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }

.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
.brand-word { font-family: "Orbitron", sans-serif; font-weight: 900; font-size: 1.06rem; letter-spacing: 0.13em; text-transform: uppercase; transition: letter-spacing var(--smooth); }
.brand-word span { color: var(--red); }
.brand:hover .brand-word { letter-spacing: 0.16em; }

.nav-wrap { display: flex; align-items: center; gap: var(--space-4); }
.nav-links { display: flex; align-items: center; gap: 0.3rem; }
.nav-link {
    position: relative; padding: 0.5rem 0.8rem; border-radius: var(--radius-xs);
    color: var(--text-muted); font-size: 0.83rem; font-weight: 500; text-decoration: none;
    transition: color var(--fast), background var(--fast);
    white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-link.is-primary { color: var(--red); border: 1px solid rgba(255, 49, 95, 0.35); }
.nav-link.is-primary:hover { background: rgba(255, 49, 95, 0.1); }
.nav-link.is-earn, .nav-link.is-support { color: var(--red); }
.nav-link.is-earn:hover, .nav-link.is-support:hover { color: #ff6285; background: rgba(255, 49, 95, 0.08); }

/* Presale pill in nav */
.nav-presale {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.95rem; border-radius: 999px;
    border: 1px solid rgba(255, 49, 95, 0.4);
    background: rgba(255, 49, 95, 0.09);
    color: #ffd7e0; font-family: "Orbitron", sans-serif;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
    transition: background var(--fast), transform var(--fast), box-shadow var(--fast);
}
.nav-presale:hover { background: rgba(255, 49, 95, 0.18); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(220, 20, 60, 0.25); }
.nav-presale .soon-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulseDot 1.6s ease-in-out infinite; }

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 49, 95, 0.5); }
    50% { opacity: 0.65; transform: scale(0.85); box-shadow: 0 0 0 6px rgba(255, 49, 95, 0); }
}

.menu-btn { display: none; width: 42px; height: 42px; border-radius: var(--radius-xs); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); cursor: pointer; align-items: center; justify-content: center; }
.menu-lines, .menu-lines::before, .menu-lines::after { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--fast), opacity var(--fast); }
.menu-lines { position: relative; }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; }
.menu-lines::before { top: -6px; }
.menu-lines::after { top: 6px; }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--line); padding: var(--space-12) 0 var(--space-10); background: rgba(3, 3, 5, 0.6); }
.footer-inner { width: var(--container); margin-inline: auto; text-align: center; display: grid; gap: var(--space-6); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); justify-content: center; }
.footer-link { color: var(--text-muted); font-size: 0.86rem; text-decoration: none; transition: color var(--fast); }
.footer-link:hover { color: var(--red); }
.footer-link.is-accent { color: var(--red); }
.site-footer p { color: var(--text-faint); font-size: 0.82rem; }

/* ===== Modals ===== */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(2, 2, 4, 0.86);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease;
    padding: var(--space-5);
}
.modal-overlay.active { opacity: 1; visibility: visible; }

/* ============================================================
   EASTER EGG STYLES — preserved verbatim from the original build.
   Do not rename these classes or IDs; the puzzle logic depends
   on them. See assets/js/eggs.js
   ============================================================ */

.art-particle { position: absolute; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); transition: opacity var(--smooth), transform var(--slow); z-index: 4; filter: blur(0.2px); }
.history-art:hover .art-particle { opacity: 0.75; transform: translate3d(0, -18px, 0) scale(1); }

.elegant-reveal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(1.5px); transition: opacity 0.7s ease; pointer-events: none; z-index: 5; opacity: 0; }

.fragment-clue { position: absolute; font-family: 'Cormorant Garamond', 'Georgia', serif; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.12em; color: #e8d5b5; text-shadow: 0 0 20px rgba(220, 160, 80, 0.4); background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(3px); padding: 0.1rem 1rem; border-left: 2px solid #d4af6a; white-space: nowrap; transform: translateY(12px); opacity: 0; transition: opacity 0.6s ease, transform 0.5s ease; pointer-events: none; z-index: 20; }

.poem-fragment { position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); border: 1px solid rgba(212, 175, 106, 0.4); padding: 1rem 1.5rem; font-family: 'Cormorant Garamond', serif; font-size: 0.9rem; line-height: 1.5; color: #ebddb0; text-align: center; letter-spacing: 0.03em; font-style: italic; border-radius: 4px; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; z-index: 21; }

.caesarion-easter-egg-overlay {
    position: fixed; inset: 0; z-index: 300;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #000000;
    opacity: 0; visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    cursor: pointer; overflow: hidden;
}
.caesarion-easter-egg-overlay.active { opacity: 1; visibility: visible; }
.caesarion-easter-egg-overlay .easter-egg-scanlines {
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 100, 0.025) 2px, rgba(0, 255, 100, 0.025) 3px);
}
.caesarion-easter-egg-overlay .easter-egg-content {
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0 var(--space-5); max-width: 100%; flex-wrap: wrap; justify-content: center;
}
.caesarion-easter-egg-overlay .easter-egg-passphrase {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: clamp(0.85rem, 3vw, 1.6rem);
    color: #00ff66; letter-spacing: 0.08em;
    text-shadow: 0 0 18px rgba(0, 255, 102, 0.55);
    word-break: break-all;
}
.caesarion-easter-egg-overlay .easter-egg-cursor {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.85rem, 3vw, 1.6rem);
    color: #00ff66; animation: eggBlink 1s step-end infinite;
}
@keyframes eggBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.caesarion-easter-egg-overlay .easter-egg-dismiss {
    position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
    color: rgba(0, 255, 102, 0.35); letter-spacing: 0.14em; text-transform: uppercase;
    opacity: 0; transition: opacity 1s ease 1.2s; text-align: center; width: 100%;
}
.caesarion-easter-egg-overlay.active .easter-egg-dismiss { opacity: 1; }

.caesar-secret-modal { background: #0a0a0c; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0px; max-width: 520px; width: 90%; position: relative; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8); padding: 3rem 2rem 2.5rem; text-align: center; transition: all 0.35s var(--ease); font-family: 'Inter', 'Georgia', serif; }
.caesar-secret-modal h2 { font-family: 'Inter', 'Orbitron', sans-serif; font-size: 1.9rem; font-weight: 600; letter-spacing: 0.1em; color: #ebebf0; margin-bottom: 2rem; text-transform: uppercase; background: none; -webkit-text-fill-color: #ebebf0; border: none; padding: 0; }
.caesar-secret-modal p { font-family: 'Inter', monospace; font-size: 1.1rem; line-height: 2.1; margin: 1rem 0; font-weight: 450; letter-spacing: 0.02em; color: #cdcddf; }
.caesar-secret-modal .secret-line { display: block; }
.secret-close { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: #cdcddf; font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; padding: 0.6rem 1.5rem; margin-top: 2rem; border-radius: 0px; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; }
.secret-close:hover { border-color: rgba(255, 255, 255, 0.45); color: #fff; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ===== Responsive ===== */
@media (max-width: 1080px) {
    .nav-links {
        position: fixed; inset: var(--header-h) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: var(--space-4);
        background: rgba(4, 4, 7, 0.97);
        backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
        border-bottom: 1px solid rgba(255, 49, 95, 0.2);
        transform: translateY(-14px); opacity: 0; visibility: hidden;
        transition: opacity var(--smooth), transform var(--smooth), visibility var(--smooth);
        max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    }
    .nav-links.active { transform: none; opacity: 1; visibility: visible; }
    .nav-link { padding: 0.85rem 1rem; font-size: 0.95rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
    .menu-btn { display: inline-flex; }
    .nav-presale { display: none; }
}

@media (max-width: 640px) {
    :root { --header-h: 66px; }
    .container, .container-wide { width: calc(100% - 24px); }
    .cta-row { gap: var(--space-3); }
    .btn { width: 100%; justify-content: center; }
}