/* ═══ THE OPENING ════════════════════════════════════════════════ Black → a counted load → light lines converging on where the handset will stand → the horizon lifts and the frame settles in from below. One timeline, driven by classes on . ═════════════════════════════════════════════════════════════ */ .intro{ position:fixed; inset:0; z-index:120; background:var(--ground-deep); display:grid; place-items:center; overflow:hidden; cursor:pointer; } .intro[hidden]{ display:none; } /* the quick opening has no overlay at all, and neither has the finished state */ html.intro-done .intro, html.intro-quick .intro{ display:none; } /* ── the horizon: a faint ground plane that lifts at the end ──── */ .intro__horizon{ position:absolute; left:50%; bottom:-4%; width:190%; aspect-ratio:3/1; translate:-50% 0; background: radial-gradient(60% 100% at 50% 100%, rgba(143,216,240,.16), transparent 70%), linear-gradient(180deg, transparent, rgba(220,244,254,.05)); filter:blur(24px); opacity:0; transition:opacity 1s var(--ease), transform 1.5s var(--ease-out); } /* ── light lines that converge on the handset's mark ──────────── */ .intro__rays{ position:absolute; inset:0; pointer-events:none; } .intro__rays i{ position:absolute; top:-10%; left:50%; width:1px; height:74%; background:linear-gradient(180deg, transparent, rgba(220,244,254,.85) 55%, transparent); transform-origin:50% 100%; opacity:0; translate:-50% 0; } .intro__rays i:nth-child(1){ --x:-30vw; --r:-13deg; } .intro__rays i:nth-child(2){ --x:-15vw; --r: -6deg; } .intro__rays i:nth-child(3){ --x: 0vw; --r: 0deg; } .intro__rays i:nth-child(4){ --x: 15vw; --r: 6deg; } .intro__rays i:nth-child(5){ --x: 30vw; --r: 13deg; } /* ── the core: mark, wordmark, meter, count ───────────────────── */ .intro__core{ position:relative; display:grid; justify-items:center; gap:clamp(18px,2.2vw,30px); transition:opacity .7s var(--ease), transform 1.1s var(--ease-out), filter .7s var(--ease); } .intro__mark{ width:clamp(30px,3.4vw,46px); color:var(--signal); opacity:0; transform:translateY(16px) scale(.9); animation:coreIn 1.1s var(--ease-out) .1s forwards; } .intro__word{ font-family:var(--f-display); font-weight:200; font-size:clamp(1rem,1.5vw,1.35rem); letter-spacing:.5em; text-transform:uppercase; text-indent:.5em; color:var(--ice); opacity:0; transform:translateY(14px); animation:coreIn 1.1s var(--ease-out) .24s forwards; } @keyframes coreIn{ to{ opacity:1; transform:none; } } .intro__meter{ width:min(320px, 54vw); height:1px; background:var(--rule); position:relative; overflow:hidden; opacity:0; animation:coreIn .8s var(--ease-out) .4s forwards; } .intro__meter i{ position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--p, 0)); background:linear-gradient(90deg, var(--signal-deep), var(--signal)); box-shadow:0 0 12px rgba(143,216,240,.8); } .intro__read{ display:flex; align-items:baseline; gap:14px; font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300; letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--ice-ghost); opacity:0; animation:coreIn .8s var(--ease-out) .48s forwards; } .intro__pct{ color:var(--signal); font-variant-numeric:tabular-nums; min-width:4.4em; } .intro__state{ transition:opacity .35s var(--ease); } /* ── the cut, orchestrated ─────────────────────────────────────── No curtain and no snap. The loading line stretches into a horizon and sinks to the waterline, the black dissolves slowly behind it, and the frame is then assembled one element at a time. Every beat overlaps the one before it, so nothing arrives on a hard edge. ═════════════════════════════════════════════════════════════ */ /* 1 · the readout steps back, the line survives it */ html.intro-lit .intro__mark, html.intro-lit .intro__word, html.intro-lit .intro__read{ opacity:0; transform:translateY(-12px); transition:opacity .5s var(--ease), transform .8s var(--ease-out); } html.intro-lit .intro__word{ transition-delay:.05s; } html.intro-lit .intro__read{ transition-delay:.02s; } /* 2 · the meter becomes the horizon and settles on the water */ .intro__meter{ transition:width 1.15s cubic-bezier(.72,0,.24,1), transform 1.35s cubic-bezier(.72,0,.24,1), opacity .55s var(--ease) .78s, background .6s var(--ease); } html.intro-lit .intro__meter{ width:104vw; transform:translateY(26vh); background:transparent; opacity:0; } html.intro-lit .intro__meter i{ --p:1; background:linear-gradient(90deg, transparent, var(--signal) 22%, var(--signal-hot) 50%, var(--signal) 78%, transparent); transition:background .7s var(--ease); } /* 3 · light finds the object before we can see it */ html.intro-lit .intro__horizon{ opacity:1; } html.intro-lit .intro__rays i{ animation:ray 1.3s var(--ease-out) forwards; } .intro__rays i:nth-child(1){ animation-delay:.04s; } .intro__rays i:nth-child(2){ animation-delay:.12s; } .intro__rays i:nth-child(3){ animation-delay:.20s; } .intro__rays i:nth-child(4){ animation-delay:.12s; } .intro__rays i:nth-child(5){ animation-delay:.04s; } @keyframes ray{ 0% { opacity:0; transform:translate(calc(var(--x) * 1.6), -30%) rotate(var(--r)) scaleY(.4); } 30% { opacity:.85; } 100% { opacity:0; transform:translate(0, 8%) rotate(0deg) scaleY(1.3); } } /* 4 · the black dissolves slowly, on its own curve */ html.intro-out .intro{ opacity:0; transition:opacity 1.25s cubic-bezier(.4,0,.2,1); } html.intro-out .intro__horizon{ transform:translate(-50%, -34vh); opacity:0; } /* ── the frame assembles ───────────────────────────────────────── The backdrop arrives first, the handset rises out of the water, then the type, then the furniture. Slow in, nothing linear. */ html.intro-armed .hero__scene{ opacity:0; transform:translateY(38px) scale(1.05); } html.intro-armed .hero__phone{ opacity:0; transform:translateY(86px) scale(1.03); filter:blur(9px); } html.intro-armed.intro-out .hero__scene{ opacity:1; transform:none; transition:opacity 1.4s var(--ease-out) .12s, transform 1.6s var(--ease-out) .12s; } html.intro-armed.intro-out .hero__phone{ opacity:1; transform:none; filter:none; transition:opacity 1.35s var(--ease-out) .38s, transform 1.55s cubic-bezier(.18,.9,.28,1) .38s, filter 1.1s var(--ease-out) .38s; } html.intro-armed .rise{ opacity:0; transform:translateY(var(--rise, 30px)); filter:blur(5px); } html.intro-armed.intro-out .rise{ opacity:1; transform:none; filter:none; transition:opacity .8s var(--ease-out), transform 1s var(--ease-out), filter .7s var(--ease-out); } /* the beats — each one overlaps its neighbour by design */ /* Beats. The last one must finish inside the BUILD window in intro.js (1.42 + 1.0 = 2.42s against 2.55s), or the overlay is taken away mid-transition and the tail of the frame snaps in. */ html.intro-armed.intro-out .rise-1{ transition-delay:.55s; } /* ALWAYS */ html.intro-armed.intro-out .rise-2{ transition-delay:.67s; } /* ANSWERED */ html.intro-armed.intro-out .rise-3{ transition-delay:.79s; } /* top bar */ html.intro-armed.intro-out .rise-4{ transition-delay:.90s; } /* kicker */ html.intro-armed.intro-out .rise-5{ transition-delay:1.01s; } /* sub */ html.intro-armed.intro-out .rise-6{ transition-delay:1.12s; } /* ledger */ html.intro-armed.intro-out .rise-7{ transition-delay:1.26s; } /* cta */ html.intro-armed.intro-out .rise-8{ transition-delay:1.42s; } /* callouts */ /* the ledger fills in row by row rather than as a block */ html.intro-armed .hero__meta li{ opacity:0; transform:translateY(14px); } html.intro-armed.intro-out .hero__meta li{ opacity:1; transform:none; transition:opacity .68s var(--ease-out), transform .85s var(--ease-out); } html.intro-armed.intro-out .hero__meta li:nth-child(1){ transition-delay:1.14s; } html.intro-armed.intro-out .hero__meta li:nth-child(2){ transition-delay:1.21s; } html.intro-armed.intro-out .hero__meta li:nth-child(3){ transition-delay:1.28s; } @media (prefers-reduced-motion: reduce){ .intro__mark,.intro__word,.intro__meter,.intro__read{ animation:none; opacity:1; transform:none; } html.intro-out .intro{ transition:opacity .3s linear; opacity:0; } html.intro-armed .rise, html.intro-armed .hero__meta li, html.intro-armed .hero__scene, html.intro-armed .hero__phone{ opacity:1; transform:none; filter:none; } } /* ═══ THE QUICK OPENING ══════════════════════════════════════════ Returning from a document page inside the site. No count, no black, no rays — just the closing move of the full sequence, at roughly half its length, so coming back feels like the frame settling rather than like the site starting over. ═════════════════════════════════════════════════════════════ */ html.intro-quick .hero__scene{ opacity:0; transform:translateY(20px) scale(1.025); } html.intro-quick .hero__phone{ opacity:0; transform:translateY(44px) scale(1.015); filter:blur(5px); } html.intro-quick .rise{ opacity:0; transform:translateY(var(--rise, 20px)); filter:blur(3px); } html.intro-quick .hero__meta li{ opacity:0; transform:translateY(10px); } html.intro-quick.intro-go .hero__scene{ opacity:1; transform:none; transition:opacity .72s var(--ease-out), transform .85s var(--ease-out); } html.intro-quick.intro-go .hero__phone{ opacity:1; transform:none; filter:none; transition:opacity .7s var(--ease-out) .08s, transform .82s cubic-bezier(.18,.9,.28,1) .08s, filter .58s var(--ease-out) .08s; } html.intro-quick.intro-go .rise{ opacity:1; transform:none; filter:none; transition:opacity .5s var(--ease-out), transform .62s var(--ease-out), filter .42s var(--ease-out); } html.intro-quick.intro-go .hero__meta li{ opacity:1; transform:none; transition:opacity .42s var(--ease-out), transform .5s var(--ease-out); } /* the same order as the full opening, roughly half the spacing. The last beat ends at .70 + .62 = 1.32s — that is the whole thing. */ html.intro-quick.intro-go .rise-1{ transition-delay:.18s; } html.intro-quick.intro-go .rise-2{ transition-delay:.26s; } html.intro-quick.intro-go .rise-3{ transition-delay:.34s; } html.intro-quick.intro-go .rise-4{ transition-delay:.40s; } html.intro-quick.intro-go .rise-5{ transition-delay:.46s; } html.intro-quick.intro-go .rise-6{ transition-delay:.52s; } html.intro-quick.intro-go .rise-7{ transition-delay:.60s; } html.intro-quick.intro-go .rise-8{ transition-delay:.70s; } html.intro-quick.intro-go .hero__meta li:nth-child(1){ transition-delay:.54s; } html.intro-quick.intro-go .hero__meta li:nth-child(2){ transition-delay:.60s; } html.intro-quick.intro-go .hero__meta li:nth-child(3){ transition-delay:.66s; } @media (prefers-reduced-motion: reduce){ html.intro-quick .rise, html.intro-quick .hero__meta li, html.intro-quick .hero__scene, html.intro-quick .hero__phone{ opacity:1; transform:none; filter:none; } }