/* Strive Haus — "101" poster landing: a gradient orb drops, bounces, rolls, reveals the name */
:root {
    --ink: #0a0a0a;
    --muted: #5d5d66;
    --sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --edge: clamp(16px, 2.2vw, 32px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: var(--ink); }
body { font: 500 16px/1.4 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.poster { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: #fff; isolation: isolate; }

/* ---------- The number: huge, upright along the bottom, cropped by the page ---------- */
.num {
    position: absolute; left: 50%; bottom: 0;
    transform: translate(-50%, 0.12em);
    font: 500 34vw/0.8 var(--sans);
    text-transform: uppercase;
    letter-spacing: -0.07em;
    padding-right: 0.07em;
    white-space: nowrap;
    color: var(--ink);
    /* dark gray at the foot, rising to blue; the glow is a filter so it can't paint over the clipped fill */
    background: linear-gradient(0deg, #2b2d33 18%, #23314f 42%, #1d4fc4 68%, #2f6dff 88%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 -0.012em 0.02em rgba(0, 120, 255, 0.6)) drop-shadow(0 0.005em 0.005em rgba(255, 86, 0, 0.5));
    user-select: none;
}

/* ---------- The light: a spectral wash pouring down from the top ---------- */
/* 1. as the number rises into the light it melts out of focus */
.melt {
    position: absolute; inset: 0; pointer-events: none;
    -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
    -webkit-mask-image: linear-gradient(180deg, #000 42%, rgba(0,0,0,.55) 58%, transparent 74%);
    mask-image: linear-gradient(180deg, #000 42%, rgba(0,0,0,.55) 58%, transparent 74%);
}
/* 2. ...and what's left of the ink burns blue (screen leaves white alone) */
.burn {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
    background: linear-gradient(0deg, transparent 22%, #0a2cff 34%, #1e6dff 46%, #3f88ff 58%, rgba(110,175,255,.75) 68%, transparent 82%);
}
/* 3. the light itself: a slow WebGL shader; this gradient is only the no-WebGL fallback */
.light {
    position: absolute; inset: 0; pointer-events: none; display: block; width: 100%; height: 100%;
}
.light-still {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, #fff3a0 0%, #ffd23a 3%, #ff7a12 6%, #d0142a 9%, #2a0640 12%, #3412d8 15%, #1ec8ff 19%, rgba(200,251,255,.6) 24%, rgba(255,255,255,0) 32%);
}
.light-live .light-still { display: none; }
/* 4. poster grain */
.grain {
    position: absolute; inset: -50%; pointer-events: none; opacity: .06; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- The name, wiped in behind the orb ---------- */
.name {
    position: absolute; left: 50%; top: 44%;
    transform: translateX(-50%);
    text-align: center; white-space: nowrap; z-index: 2;
    -webkit-mask-image: linear-gradient(90deg, transparent var(--reveal, 10000px), #000 calc(var(--reveal, 10000px) + 36px));
    mask-image: linear-gradient(90deg, transparent var(--reveal, 10000px), #000 calc(var(--reveal, 10000px) + 36px));
}
.name h1 { display: inline-block; margin: 0; font: 700 clamp(28px, 3.3vw, 56px)/1 var(--sans); letter-spacing: -0.005em; text-transform: uppercase; }
.name p { margin: 14px auto 0; font: 500 clamp(13px, 1vw, 15px)/1.4 var(--sans); color: var(--muted); opacity: 0; transform: translateY(4px); transition: opacity 1.2s ease, transform 1.2s ease; }
.done .name p { opacity: 1; transform: none; }

/* where the big orb passes, the page under it softens */
.lens {
    position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; z-index: 3;
    pointer-events: none;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
    opacity: 0;
}
.orb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 4; }
.no-gl .orb { display: none; }
.fallback-orb { position: absolute; z-index: 4; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #ffd21a 0, #ff6a00 18%, #8a0020 30%, #0b0026 42%, #3a00c8 60%, #1f5cff 76%, #00e1ff 92%, rgba(255,255,255,0) 100%); filter: blur(2px); }

/* ---------- Hero copy, in the white between the light and the word ---------- */
.hero-copy {
    position: absolute; z-index: 4; left: 50%; top: 45%;
    transform: translate(-50%, -50%);
    width: min(940px, calc(100% - 2 * var(--edge) - 64px));
    text-align: center;
}
.hero-copy h1 { margin: 0 auto; max-width: 15em; font: 500 clamp(30px, 3.1vw, 46px)/1.1 var(--sans); letter-spacing: -0.035em; text-wrap: balance; }
.actions { display: flex; justify-content: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }

/* buttons: one solid ink pill with an arrow chip, one frosted pill the light shows through */
.btn {
    display: inline-flex; align-items: center; gap: 14px;
    height: 48px; padding: 0 24px; border-radius: 100px; white-space: nowrap;
    font: 500 15px/1 var(--sans); letter-spacing: -0.01em;
    transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.btn:hover { text-decoration: none; }
.btn-solid { padding: 0 6px 0 22px; color: #fff; background: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(10, 10, 10, .2); }
.btn-solid:hover { background: #222; }
.chip {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    background: #fff; color: var(--ink);
}
.chip svg { width: 14px; height: 14px; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.btn-solid:hover .chip svg { transform: translateX(3px); }
.btn-glass {
    color: var(--ink);
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.btn-glass:hover { background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .18), inset 0 1px 0 #fff; }
@media (prefers-reduced-motion: reduce) { .chip svg { transition: none; } }

/* ---------- Poster labels around the edge ---------- */
.lab { position: absolute; z-index: 5; font: 500 12px/1.2 var(--sans); letter-spacing: 0.01em; white-space: nowrap; }
.tl { top: var(--edge); left: var(--edge); display: flex; align-items: center; gap: 10px; }
.rule { display: inline-block; width: 48px; height: 1px; background: currentColor; }
.tc { top: var(--edge); left: 50%; transform: translateX(-50%); text-transform: uppercase; letter-spacing: 0.04em; }
.tr { top: var(--edge); right: var(--edge); font-variant-numeric: tabular-nums; }
/* the day's quote (quotes.js): centred in the space between the top labels and the cap line
   of STRIVE (22.2vw above the foot), wrapping into more columns when long. Every glyph is
   turned sideways, or vertical text stands punctuation like ’ upright. */
.vl { left: var(--edge); top: 96px; bottom: calc(22.2vw + 32px); width: auto; writing-mode: vertical-rl; text-orientation: sideways; text-align: center; white-space: normal; }
.bl { bottom: var(--edge); left: var(--edge); }
.bc { bottom: var(--edge); left: 50%; transform: translateX(-50%); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.br { bottom: var(--edge); right: var(--edge); display: flex; align-items: center; gap: 12px; }
.bl, .bc, .br { color: #fff; mix-blend-mode: difference; }   /* white over the type, black over the page */
.mark { display: inline-block; font-weight: 700; font-size: 15px; letter-spacing: 0.06em; transform: rotate(90deg); }

@media (max-width: 768px) {
    .num { font-size: 31vh; left: 27%; top: 54%; bottom: auto; transform: translate(-50%, -50%) rotate(-90deg); }
    /* the word stands on its end here, so its gradient runs along it: gray at the S, blue up top */
    .num { background-image: linear-gradient(90deg, #2b2d33 12%, #23314f 34%, #1d4fc4 62%, #2f6dff 86%); }
    /* the word stands upright here, so its melted top reaches nearly to the light: burn it blue all the way up */
    .burn { background: linear-gradient(0deg, transparent 24%, #0a2cff 36%, #1e6dff 50%, #3f88ff 64%, rgba(110,175,255,.9) 78%, rgba(160,205,255,.8) 90%, transparent 100%); }
    .tc, .bl { display: none; }
    /* the quote moves to the right edge, between the buttons and "See our work" */
    .vl { left: auto; right: var(--edge); top: calc(47% + 125px); bottom: 64px; }
    .lab { font-size: 11px; }
    .bc { left: var(--edge); transform: none; }
    .hero-copy { left: auto; right: var(--edge); transform: translateY(-50%); top: 47%; width: 62%; text-align: right; }
    .hero-copy h1 { font-size: clamp(24px, 6.6vw, 30px); }
    .actions { justify-content: flex-end; }
    .btn { height: 44px; font-size: 14px; }
    .btn-glass { padding: 0 20px; }
    .chip { width: 32px; height: 32px; }
    .name { top: 46%; }
}

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the light's dark core runs under the top labels */
.tl, .tc, .tr { color: #fff; mix-blend-mode: difference; }