@font-face {
    font-family: "DM Sans Variable";
    src: url("fonts/dm-sans-latin-variable.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
}

:root {
    color-scheme: dark;
    font-family: "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #07100b; }

.alder-wake {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #07100b;
    color: #f8f7ef;
}

.wake-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.wake-copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 6%;
    width: min(68%, 34rem);
    color: #f8f7ef;
    transform: translateY(-52%);
}

.wake-copy::before {
    position: absolute;
    inset: -3.6rem -4.5rem;
    z-index: -1;
    background: radial-gradient(68% 70% at 48% 50%, rgba(7, 16, 11, .98) 0%, rgba(7, 16, 11, .9) 48%, rgba(7, 16, 11, 0) 82%);
    filter: blur(4px);
    content: "";
}

.wake-kicker {
    margin: 0 0 clamp(.55rem, 2.2vmin, 1.1rem);
    color: #cbd5b2;
    font-size: clamp(.47rem, 1.35vmin, .68rem);
    font-weight: 650;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.wake-copy h1 {
    margin: 0;
    color: #f8f7ef;
    font-size: clamp(1.9rem, 6vmin, 3rem);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.06;
}

.wake-body {
    margin: clamp(.55rem, 2vmin, 1rem) 0 0;
    color: rgba(248, 247, 239, .8);
    font-size: clamp(.58rem, 1.7vmin, 1rem);
    line-height: 1.75;
}

.wake-stats { margin: clamp(.75rem, 2.8vmin, 1.8rem) 0 0; }
.wake-stats div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    border-top: 1px solid rgba(248, 247, 239, .14);
    padding: clamp(.3rem, 1.15vmin, .6rem) .1rem;
    font-size: clamp(.45rem, 1.25vmin, .72rem);
}
.wake-stats dt { color: rgba(248, 247, 239, .58); letter-spacing: .04em; }
.wake-stats dd { margin: 0; color: #f8f7ef; font-weight: 650; text-align: right; }

.wake-chrome {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(.65rem, 2.2vmin, 1.4rem) clamp(.75rem, 3vmin, 2rem);
    pointer-events: none;
}

.wake-chrome ol {
    display: flex;
    gap: clamp(.6rem, 2.2vmin, 1.3rem);
    margin: 0;
    padding: 0;
    color: rgba(248, 247, 239, .55);
    font-size: clamp(.38rem, 1.05vmin, .62rem);
    font-weight: 650;
    letter-spacing: .18em;
    list-style: none;
    text-transform: uppercase;
}

.wake-chrome li {
    display: flex;
    align-items: center;
    gap: .45rem;
    opacity: .38;
}

.wake-chrome li::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.wake-chrome li.is-active { color: #f8f7ef; opacity: 1; }

.wake-scroll {
    position: absolute;
    left: 50%;
    margin: 0;
    color: rgba(248, 247, 239, .5);
    font-size: clamp(.38rem, 1vmin, .6rem);
    letter-spacing: .3em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.wake-progress {
    width: clamp(3rem, 12vmin, 7.5rem);
    height: 1px;
    background: rgba(248, 247, 239, .18);
}
.wake-progress i {
    display: block;
    width: 33.333%;
    height: 100%;
    background: #cbd5b2;
}

.is-static .wake-canvas { display: none; }
.is-static {
    background:
        radial-gradient(circle at 18% 22%, rgba(168, 201, 126, .25) 0 1px, transparent 1.6px) 0 0 / 17px 17px,
        radial-gradient(circle at 82% 74%, rgba(168, 201, 126, .18) 0 1px, transparent 1.6px) 0 0 / 23px 23px,
        #07100b;
}

@media (max-width: 430px) {
    .wake-copy { right: 7%; width: 78%; }
    .wake-copy::before { inset: -2rem -1.4rem; }
    .wake-chrome ol { gap: .5rem; }
    .wake-chrome li { gap: .25rem; }
    .wake-scroll { display: none; }
}