:root {
    --ink:        #f4f0ff;
    --ink-dim:    #a99fd0;
    --accent:     #ffc98a;
    --accent-2:   #8fb8ff;
    --void:       #03020a;
    --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--void);
    color: var(--ink);
    overflow: hidden;
    font-family: ui-sans-serif, system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

canvas { display: block; cursor: grab; }
canvas:active { cursor: grabbing; }

/* --- Layer 1: the WebGL scene --------------------------------- */
#canvas-container { position: fixed; inset: 0; }

/* --- Layer 2: vignette, adds depth the renderer can't cheaply --- */
#vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 70% at 50% 48%,
            rgba(0,0,0,0) 35%,
            rgba(3,2,10,0.35) 72%,
            rgba(2,1,7,0.8) 100%);
}

/* --- Layer 3: type ------------------------------------------- */
#overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    pointer-events: none;
    padding: 2rem;
}

.title {
    margin: 0;
    font-size: clamp(2.4rem, 9vw, 6rem);
    font-weight: 200;
    letter-spacing: 0.18em;
    text-indent: 0.18em; /* balances the trailing letter-space */
    line-height: 1;
    background: linear-gradient(180deg, #ffffff 0%, var(--accent) 55%, #ff9d6e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 28px rgba(255, 170, 110, 0.35))
            drop-shadow(0 2px 12px rgba(0, 0, 0, 0.8));
}

.subtitle {
    margin: 1.1rem 0 0;
    font-size: clamp(0.72rem, 1.6vw, 0.95rem);
    font-weight: 400;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    text-transform: uppercase;
    color: var(--ink-dim);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

.hint {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.26em;
    text-indent: 0.26em;
    text-transform: uppercase;
    color: var(--ink-dim);
    opacity: 0.55;
    pointer-events: none;
    white-space: nowrap;
}

/* Fade the UI in behind the camera's arrival, staggered. */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: reveal 1.6s var(--ease) forwards;
}
.hint.reveal { transform: translate(-50%, 14px); }

@keyframes reveal {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-hint {
    to { opacity: 0.55; transform: translate(-50%, 0); }
}
.hint.reveal { animation-name: reveal-hint; }

#fallback {
    position: fixed;
    inset: 0;
    display: none;
    place-content: center;
    text-align: center;
    padding: 2rem;
    color: var(--ink-dim);
    line-height: 1.7;
}
body.no-webgl #fallback { display: grid; }
body.no-webgl #overlay,
body.no-webgl .hint { display: none; }

/* Honour the OS "reduce motion" setting: no fly-in, no drifting. */
@media (prefers-reduced-motion: reduce) {
    .reveal { animation-duration: 0.01ms; animation-delay: 0ms !important; }
}