@font-face { font-family: Fredoka; src: url(fonts/fredoka.woff2) format('woff2'); font-weight: 400 700; }
:root { --ink: #1F1F1E; --sky: #ABD1DD; --snow: #FDFCFE; }
* { box-sizing: border-box; }
.defs { position: absolute; } /* the shared face drawing; takes no space */
body { margin: 0; background: var(--snow); color: var(--ink); font: 17px/1.5 system-ui, sans-serif; }

/* ---------- Glass look on the cards (no backdrop-filter: see the design doc) ---------- */
.glass { background: rgb(255 255 255 / .28); border: 1px solid rgb(255 255 255 / .6);
         box-shadow: inset 0 1px 1px rgb(255 255 255 / .9), inset 0 -1px 1px rgb(255 255 255 / .3), 0 10px 30px rgb(31 31 30 / .1); }
h1, h2, h3, .cta, button { font-family: Fredoka, system-ui, sans-serif; }

.cta { position: fixed; top: 16px; right: 16px; z-index: 10; padding: 10px 18px; border-radius: 999px;
       background: var(--ink); color: #fff; text-decoration: none; font-weight: 500; }

/* ---------- Hero: one sticky screen, scroll drives --p from 0 to 1 ---------- */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes progress { to { --p: 1; } }
html { overflow-anchor: none; } /* we fix the scroll ourselves when the hero collapses */
.hero { height: 400vh; view-timeline: --ice block; }
/* Once broken, the ice stays broken: the hero collapses to the Meet Whiz screen. */
.broken .hero { height: 100vh; }
.broken .stage { animation: none; --p: 1; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden;
         background: linear-gradient(var(--sky), var(--snow));
         animation: progress linear both; animation-timeline: --ice; animation-range: contain 0% contain 100%;
         --crack: clamp(0, var(--p) / 0.4, 1);
         --reveal: clamp(0, (var(--p) - 0.6) / 0.25, 1); }
@supports not (animation-timeline: view()) { .hero { height: 100vh; } .stage { --p: 1; } }
@media (prefers-reduced-motion: reduce) { .hero { height: 100vh; } .stage { animation: none; --p: 1; } }

.stage .face { position: absolute; left: 50%; top: 50%; width: min(280px, 55vw, 34vh); translate: -50% -55%; z-index: 1; }

.shard { position: absolute; inset: 0; z-index: 2;
         background: repeating-linear-gradient(115deg, transparent 0 60px, rgb(255 255 255 / .35) 60px 68px, transparent 68px 150px),
                     linear-gradient(160deg, rgb(236 248 252 / .8), rgb(186 222 235 / .75));
         backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
         --f: clamp(0, (var(--p) - 0.42 - var(--d)) / 0.33, 1);
         transform: translate(calc(var(--dx) * var(--f)), calc(var(--f) * var(--f) * 160vh)) rotate(calc(var(--r) * var(--f))); }
.a { clip-path: polygon(0% 0%, 42% 0%, 48% 22%, 46% 34%, 50% 46%, 36% 44%, 22% 36%, 0% 34%); transform-origin: 20% 20%; --dx: -20vw; --r: -25deg; --d: .04; }
.b { clip-path: polygon(42% 0%, 100% 0%, 100% 28%, 76% 38%, 63% 40%, 50% 46%, 46% 34%, 48% 22%); transform-origin: 72% 18%; --dx: 20vw; --r: 30deg; --d: 0; }
.c { clip-path: polygon(100% 28%, 100% 82%, 80% 64%, 64% 57%, 50% 46%, 63% 40%, 76% 38%); transform-origin: 82% 50%; --dx: 25vw; --r: 20deg; --d: .06; }
.d { clip-path: polygon(100% 82%, 100% 100%, 58% 100%, 52% 80%, 55% 62%, 50% 46%, 64% 57%, 80% 64%); transform-origin: 75% 85%; --dx: 15vw; --r: 35deg; --d: .02; }
.e { clip-path: polygon(58% 100%, 14% 100%, 30% 74%, 40% 60%, 50% 46%, 55% 62%, 52% 80%); transform-origin: 38% 82%; --dx: -10vw; --r: -30deg; --d: .08; }
.f { clip-path: polygon(14% 100%, 0% 100%, 0% 34%, 22% 36%, 36% 44%, 50% 46%, 40% 60%, 30% 74%); transform-origin: 14% 70%; --dx: -25vw; --r: -20deg; --d: .05; }

.cracks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3;
          opacity: clamp(0, 1 - (var(--p) - 0.42) * 8, 1); clip-path: circle(calc(var(--crack) * 80%) at 50% 46%); }
.cracks path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
               vector-effect: non-scaling-stroke; }

.on-ice { position: absolute; left: 16px; right: 16px; text-align: center; z-index: 4; opacity: clamp(0, 1 - var(--p) / 0.3, 1); }
.on-ice.tag { top: 11vh; margin: 0; font-size: clamp(36px, 7vw, 72px); font-weight: 600; }
.on-ice.hint { bottom: 4vh; font-family: Fredoka; font-weight: 500; letter-spacing: .1em; text-transform: lowercase; }
.hint span { display: block; font-size: 24px; animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 6px; } }

.title { position: absolute; top: 7vh; left: 0; right: 0; margin: 0; text-align: center; z-index: 4;
         font-size: clamp(48px, 9vw, 96px); font-weight: 600; opacity: var(--reveal);
         transform: translateY(calc((1 - var(--reveal)) * 14vh)) scale(calc(1.3 - .3 * var(--reveal))); }
.sub { position: absolute; bottom: 7vh; left: 16px; right: 16px; text-align: center; z-index: 4;
       opacity: clamp(0, (var(--p) - 0.8) / 0.2, 1); }
.sub h2 { margin: 0; font-size: clamp(26px, 4.5vw, 40px); font-weight: 600; }
.sub p { margin: 6px auto 0; max-width: 34em; opacity: .7; }

/* ---------- Faces ---------- */
.face { overflow: visible; } /* the head may lean past its box */
.lid { transform-box: fill-box; transform-origin: center; transition: transform 150ms; }
.blink .lid { transform: scaleY(.1); }
.squint .lid { transform: scaleY(.35); }

/* ---------- Below the fold ---------- */
section.body { max-width: 1040px; margin: 0 auto; padding: 96px 16px 48px; }
section.body > h2 { text-align: center; font-size: clamp(30px, 5vw, 44px); font-weight: 600; margin: 0 0 40px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.card { border-radius: 28px; padding: 24px;
        background: linear-gradient(160deg, rgb(206 240 252 / .6), rgb(214 238 247 / .35)); } /* icy tint gives the glass look without a backdrop blur */
.card svg { width: 40px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin: 12px 0 4px; font-size: 24px; font-weight: 600; }
.card p { margin: 0; opacity: .75; }
.card .k { font-family: Fredoka; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; opacity: .55; }
.card.ask { grid-column: 1 / -1; display: flex; gap: 20px; align-items: center; }

#join { text-align: center; margin-top: 96px; padding: 48px 16px; border-radius: 36px; background: linear-gradient(var(--sky), var(--snow)); }
#join .face { width: 110px; }
#join h2 { margin: 8px 0 20px; font-size: clamp(28px, 5vw, 40px); font-weight: 600; }
form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
input, button { font: inherit; padding: 12px 20px; border-radius: 999px; border: 3px solid var(--ink); }
input { min-width: min(280px, 100%); }
.hp { position: absolute; left: -9999px; } /* off-screen, not display:none, which some bots skip */
button { background: var(--ink); color: #fff; cursor: pointer; font-weight: 500; }
.fine { font-size: 14px; opacity: .65; margin: 16px auto 0; max-width: 32em; }
footer { text-align: center; font-size: 14px; opacity: .55; padding: 32px 16px 48px; }

/* ---------- Thanks page (thanks.html) ---------- */
.thanks { min-height: 100vh; display: grid; place-items: center; padding: 16px; text-align: center;
          background: linear-gradient(var(--sky), var(--snow)); }
.thanks .face { width: min(180px, 45vw); }
.thanks h1 { margin: 16px 0 4px; font-size: clamp(36px, 7vw, 56px); font-weight: 600; }
.thanks p { margin: 0 0 24px; opacity: .7; }
.thanks a { font-family: Fredoka, system-ui, sans-serif; font-weight: 500; color: var(--ink); }