:root {
    --ink: #080808;
    --paper: #e9e5dc;
    --ember: #d2690a;
    --ember-light: #f0932b;
    --brass: #c99a52;
    --brass-light: #e8c680;
    --display: "Manrope", sans-serif;
    --sans: "Manrope", sans-serif;
    --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); }

.hero-minimal {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    margin: 0 auto;
    max-width: 900px;
    min-height: 100vh;
    padding: 48px 24px;
    text-align: center;
}

h1 {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.97;
    margin: 0;
    font-size: clamp(3.5rem, 8vw, 6.5rem);
}

h1 em { color: var(--brass-light); font-style: italic; }

.hero-art {
    align-items: center;
    display: flex;
    height: min(62vw, 400px);
    justify-content: center;
    position: relative;
    width: min(92vw, 420px);
}

.art-glow { background: var(--ember); border-radius: 50%; filter: blur(90px); height: 220px; opacity: 0.22; position: absolute; width: 220px; }

.brand-lockup { align-items: center; display: flex; flex-direction: column; gap: 6px; }

/* ——— LOGO MARK ——— */
.logo-mark {
    animation: logo-float 6s ease-in-out infinite;
    color: var(--ember);
    height: 100%;
    overflow: visible;
    width: 100%;
}
.logo-mark .draw { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.logo-mark rect.draw { fill: currentColor; stroke: none; }
.logo-mark .cup { fill: currentColor; }
.logo-mark .eyelet-dot { fill: var(--ink); }
.logo-mark .eyelet .eyelet-dot { fill: currentColor; }
.logo-mark #bolt { fill: currentColor; animation: bolt-charge 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.logo-mark .needle { animation: needle-tick 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 318px 82px; color: var(--ember); }
.logo-mark .pulse { animation: eyelet-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.logo-mark .p2 { animation-delay: 0.4s; } .logo-mark .p3 { animation-delay: 0.8s; }
.logo-mark .draw-stage { stroke-dasharray: 1200; stroke-dashoffset: 0; }

.wordmark { font-family: var(--display); font-size: clamp(2rem, 6.4vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.wordmark span { color: var(--ember-light); font-weight: 600; }
.tagline { color: rgba(233,229,220,0.62); font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.32em; margin: 0; text-transform: uppercase; }

/* ——— SCENE SEQUENCING (Act 1 logo → Act 2 belts) ——— */
.scene { align-items: center; display: flex; flex-direction: column; left: 50%; opacity: 0; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -46%) scale(0.97); transition: opacity 0.7s ease, transform 0.7s ease, visibility 0.7s; visibility: hidden; width: min(94vw, 620px); }
.scene.is-active { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); visibility: visible; }
.scene.is-leaving { opacity: 0; transform: translate(-50%, -54%) scale(1.03); }
.hero-minimal { position: relative; }
.showcase-title { font-family: var(--display); font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 500; letter-spacing: -0.04em; margin: 0; }
.showcase-title em { color: var(--brass-light); font-style: italic; }
.hero-sub { color: rgba(233,229,220,0.72); font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.08em; margin: 6px 0 0; text-transform: uppercase; }
.hero-sub span { color: var(--brass-light); }

/* ——— ACT 2 · BELT SCAFFOLD (per-belt styles live in beld_aminations/) ——— */
.belt-stage { height: 380px; margin-top: 8px; position: relative; width: 340px; }
.belt-illustration { height: 380px; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; transform: scale(0.94) translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s; visibility: hidden; width: 340px; }
.belt-illustration.active { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
/* Shared bits + shared keyframes used across belt files */
.keyhole { background: radial-gradient(circle at 50% 32%, #000 0 3px, #2c2f2c 4px); border: 1px solid rgba(255,240,195,0.6); border-radius: 50%; display: block; height: 10px; position: relative; width: 10px; }
.keyhole::after { background: #0c0e0c; border-radius: 1px; content: ""; height: 12px; left: 2.5px; position: absolute; top: 7px; width: 4px; }

.belt-dots { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.belt-dots button { background: rgba(233,229,220,0.22); border: 1px solid rgba(232,198,128,0.4); border-radius: 50%; cursor: pointer; height: 11px; padding: 0; transition: transform 0.25s, background 0.25s; width: 11px; }
.belt-dots button.active { background: var(--brass-light); transform: scale(1.25); }
.replay-btn { background: transparent; border: 1px solid rgba(232,198,128,0.4); border-radius: 999px; color: rgba(233,229,220,0.7); cursor: pointer; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; margin-top: 14px; padding: 8px 18px; text-transform: uppercase; }
.replay-btn:hover { border-color: var(--brass-light); color: var(--brass-light); }

@keyframes sheen-sweep { 0%, 100% { transform: translateX(0); opacity: 0.55; } 50% { transform: translateX(38%); opacity: 1; } }
@keyframes shield-sheen-move { 0%, 100% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(30%); opacity: 1; } }
@keyframes band-sheen { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }
@keyframes scan-drop { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(180px); opacity: 0; } }
@keyframes gem-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(255,80,130,0.5); transform: scale(1); } 50% { box-shadow: 0 0 20px rgba(255,80,130,1); transform: scale(1.12); } }
@keyframes heart-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.12); } 45% { transform: scale(1.02); } 60% { transform: scale(1.1); } }
@keyframes draw-in { to { stroke-dashoffset: 0; } }
@keyframes bolt-charge {
    0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
    50% { opacity: 0.82; transform: scale(1.07); filter: drop-shadow(0 0 10px rgba(240,147,43,0.9)); }
}
@keyframes needle-tick {
    0%, 100% { transform: rotate(-14deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(-4deg); }
    75% { transform: rotate(16deg); }
}
@keyframes eyelet-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.6); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }

@media (max-width: 760px) {
    .hero-art { height: 440px; }
    .orbit { height: 345px; width: 220px; }
    .orbit-two { height: 400px; width: 265px; }
}

@media (max-width: 430px) {
    .hero-art { height: 375px; transform: scale(0.88); }
}

.version-badge { bottom: 8px; color: rgba(233,229,220,0.45); font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.08em; pointer-events: none; position: fixed; right: 10px; z-index: 10; }

/* ——— LOCKTOBER COUNTDOWN ——— */
.locktober-bar { align-items: center; background: rgba(8,8,8,0.72); backdrop-filter: blur(10px); border: 1px solid rgba(232,198,128,0.35); border-radius: 999px; color: var(--paper); display: flex; font-family: var(--mono); font-size: 0.72rem; gap: 10px; left: 50%; letter-spacing: 0.12em; padding: 8px 16px; position: fixed; top: 16px; transform: translateX(-50%); white-space: nowrap; z-index: 20; }
.locktober-dot { animation: eyelet-pulse 2.4s ease-in-out infinite; background: var(--ember); border-radius: 50%; display: block; height: 8px; width: 8px; }
.locktober-label { color: rgba(233,229,220,0.75); }
.locktober-time { display: flex; gap: 10px; }
.locktober-time > span { align-items: baseline; display: flex; gap: 3px; }
.locktober-time b { color: var(--brass-light); font-size: 0.85rem; font-weight: 500; min-width: 2ch; text-align: right; }
.locktober-time i { color: rgba(233,229,220,0.55); font-size: 0.65rem; font-style: normal; }
.locktober-bar.is-live { border-color: var(--ember); box-shadow: 0 0 24px rgba(210,105,10,0.35); }
.locktober-bar.is-live .locktober-label { color: var(--ember-light); }
@media (max-width: 480px) { .locktober-bar { font-size: 0.65rem; gap: 8px; padding: 7px 12px; } .locktober-time { gap: 7px; } }