:root {
    --bg-base:    #04060d;
    --bg-edge:    #000000;
    --ink:        #ffffff;
}

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

html {
    height: 100%;
    background: var(--bg-base);
}

body {
    height: 100%;
    color: var(--ink);
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Helvetica Neue", Arial, sans-serif;
    position: relative;
}

/* ── Aurora layer — deep navy ambient, subtle drift ── */
.aurora--a {
    position: fixed;
    inset: -20%;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 30% 35%, rgba( 28,  60, 130, 0.65), transparent 65%),
        radial-gradient(ellipse 50% 40% at 75% 65%, rgba( 16,  40,  95, 0.55), transparent 65%);
    filter: blur(60px) saturate(110%);
    animation: drift 70s ease-in-out infinite alternate;
    will-change: transform;
}

/* ── Aurora layer — single warm accent (brand red), small, off-center ── */
.aurora--b {
    position: fixed;
    inset: -20%;
    z-index: 1;
    background:
        radial-gradient(ellipse 28% 22% at 20% 78%, rgba(180,  30,  35, 0.42), transparent 70%);
    filter: blur(70px) saturate(120%);
    animation: drift-slow 90s ease-in-out infinite alternate;
    will-change: transform;
    mix-blend-mode: screen;
}

@keyframes drift {
    0%   { transform: translate3d(  0%,  0%, 0) scale(1.00); }
    100% { transform: translate3d( 1.5%, -1%, 0) scale(1.02); }
}
@keyframes drift-slow {
    0%   { transform: translate3d(  0%,  0%, 0) scale(1.00); }
    100% { transform: translate3d(-1%,  1.5%, 0) scale(1.03); }
}

/* ── Floating particles — calm, drifting upward like dust in light ── */
.particles {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.particles span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: radial-gradient(circle,
        #ffffff 0%,
        rgba(220, 230, 255, 0.85) 40%,
        rgba(180, 200, 255, 0)  100%);
    opacity: 0;
    box-shadow:
        0 0 10px rgba(220, 230, 255, 0.55),
        0 0 22px rgba(160, 190, 255, 0.30);
    animation:
        drift   var(--t) linear      var(--d) infinite,
        twinkle var(--t) ease-in-out var(--d) infinite;
    will-change: transform, opacity;
}

@keyframes drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(var(--tx), var(--ty), 0); }
}
@keyframes twinkle {
    0%, 100% { opacity: 0; }
    15%      { opacity: var(--o); }
    85%      { opacity: var(--o); }
}

/* ── Subtle film grain ── */
.grain {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Vignette: darken edges, focus eyes on center ── */
.vignette {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(ellipse 100% 80% at center,
        transparent 30%,
        rgba(0, 0, 0, 0.60) 78%,
        var(--bg-edge) 100%);
}

/* ── Layout ── */
main {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 2rem;
}

/* ── Wordmark — solid, static, confident ── */
.wordmark {
    font-weight: 600;
    font-size: clamp(3rem, 16vw, 12rem);
    letter-spacing: 0.10em;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
    color: var(--ink);

    /* fixed soft glow for depth — NOT animated */
    text-shadow:
        0 0 30px rgba(255, 255, 255, 0.06),
        0 2px 24px rgba(0, 0, 0, 0.45);

    /* single graceful entrance, then locked */
    opacity: 0;
    transform: translateY(14px);
    animation: enter 1.1s cubic-bezier(.22,.61,.36,1) 0.25s forwards;
    will-change: opacity, transform;
}

@keyframes enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Copyright ── */
.copyright {
    position: fixed;
    bottom: clamp(1rem, 2.5vh, 1.75rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    font-size: clamp(0.7rem, 1vw, 0.8rem);
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    user-select: none;
    white-space: nowrap;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .aurora--a, .aurora--b, .wordmark, .particles span { animation: none; }
    .wordmark { opacity: 1; transform: none; }
    .particles span { opacity: var(--o); }
}

@media (max-width: 600px) {
    .wordmark { font-size: clamp(3rem, 22vw, 6rem); letter-spacing: 0.05em; }
    .aurora--a, .aurora--b { filter: blur(40px) saturate(115%); }
}