/* SOOK hero film (film.css, loaded after sook.css; runtime js/film.js, scene art/line/src/film.js).
Film mode (html.sk-film: a hardware GPU, set by the inline check in head.html, and motion allowed): the hero is a
pinned track (400vh wide, 220vh phones); the stage stays on screen while the scroll plays the line-art film on one
full-stage canvas; captions, a progress line and Skip sit in the HUD at the bottom. The resting frame (p = 0) is the
S with one call card fitted into the art box beside (wide) or under (phones) the headline; the poster hero.webp is
that frame, contain-fitted into the same box, so the live canvas replaces it in place.
Static mode (no GPU, reduced motion, no JS): one screen with the poster, then the six stills of the film, stacked. */
/* ---------- shared: the art box (poster), the headline a step smaller so the art can be big ---------- */
.sk-hero__art { position: relative; z-index: 0; pointer-events: none; }
.sk-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
/* first visit (client 29 Sep: "the logo comes from behind, with some depth"): the resting frame swings forward out
of depth on the compositor (transform + opacity only, so building the 3D scene can't stutter it); film.js holds the
live canvas back until it ends. The photo fades up from the pink ground once it has loaded (inline script in
hero.html); the open calls wait for live prices before their rows come in, so sample rows never swap mid-intro. */
@media (prefers-reduced-motion: no-preference) {
.sk-hero__art { perspective: 1400px; }
.sk-hero__poster { transform-origin: 56% 58%; animation: sk-depth-in 1.7s cubic-bezier(0.16, 1, 0.3, 1) 0.16s backwards; }
.sk-hero__photo { transition: opacity 1s var(--sk-ease-out); }
.sk-hero__photo.is-wait { opacity: 0; }
.sk-js .sk-tick__rows li, .sk-js .sk-tick__foot b { transition: opacity 0.5s var(--sk-ease-out), translate 0.6s var(--sk-ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.sk-js .sk-tick.is-wait .sk-tick__rows li { opacity: 0; translate: 0 10px; }
.sk-js .sk-tick.is-wait .sk-tick__foot b { opacity: 0; }
}
@keyframes sk-depth-in {
0% { opacity: 0; transform: translate3d(0, 4%, -420px) rotateX(8deg) rotateY(-14deg); }
45% { opacity: 1; }
100% { opacity: 1; transform: none; }
}
/* wide (client 30 Sep): the copy on the page edge (--sk-he, the film rect's own 3.5vw side margin, never under the
gutter), the art box out to the same margin on the right, so the S and its cards fill the right side, clear of both */
.sk-hero.is-wide { --sk-he: max(var(--sk-gutter), 3.5vw); --sk-h1: clamp(50px, 5.2vw, 104px); --sk-cw: max(min(42%, calc(var(--sk-h1) * 8.6)), calc(var(--sk-hp) / 0.038 * 8.12)); }
.sk-hero.is-wide .sk-hero__copy { width: var(--sk-cw); }
.sk-hero:not(.is-wide) .sk-h1 { font-size: clamp(46px, 12.8vw, 84px); }
/* less copy, bigger: the headline and one line (the app link lives in the header pill) */
.sk-hero .sk-lede { max-width: 24em; font-size: clamp(19px, 0.5vw + 17px, 27px); line-height: 1.4; }
/* "call" and "thesis" in the headline's pixel face, on its 1 px grid (26.3 px), "thesis" in the brand pink */
.sk-hero .sk-px { font: 400 calc(1px / 0.038)/1 "Geist Pixel", "Geist Pixel Fallback", ui-monospace, monospace; font-style: normal; font-synthesis: none; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.sk-hero .sk-px--pink { color: var(--sk-pink-text); }
.sk-hero:not(.is-wide) .sk-px { font: inherit; font-weight: 600; } /* phones: the lede is ~20 px, the 26 px pixel face would shout; the words keep the weight and the pink */
.sk-hero.is-wide .sk-hero__art { position: absolute; top: calc(var(--sk-ht) + var(--sk-hh) + 1.5svh); bottom: 2.5svh; right: var(--sk-he);
left: max(calc(var(--sk-he) + var(--sk-cw) + 2vw), calc(100% - var(--sk-he) - max(44rem, 38vw))); } /* at most max(44rem, 38vw) wide: the S ~1.1x its 29 Sep evening size (client 30 Sep), clear of the copy */
.sk-hero:not(.is-wide) .sk-hero__stage { display: flex; flex-direction: column; }
.sk-hero:not(.is-wide) .sk-hero__copy { order: 1; }
.sk-hero:not(.is-wide) .sk-hero__art { order: 2; align-self: center; width: min(100% - 2 * var(--sk-gutter), 64svh, 640px); aspect-ratio: 1.1; margin: clamp(16px, 3svh, 32px) 0 clamp(32px, 7svh, 72px); }
.sk-film__canvas, .sk-film__hud { display: none; }
/* ---------- static mode: the six stills under the hero ---------- */
.sk-film__stills { list-style: none; margin: 0; padding: clamp(48px, 8vw, 96px) var(--sk-gutter) 0; max-width: var(--sk-max); margin-inline: auto; box-sizing: content-box;
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px); }
.sk-film__stills img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.sk-film__stills p { margin: 12px 0 0; font: 600 clamp(18px, 1.2vw + 12px, 22px)/1.3 var(--sk-display); letter-spacing: -0.02em; color: var(--sk-ink); }
.sk-film__end { display: block; height: 0; }
/* ---------- film mode ---------- */
@media (prefers-reduced-motion: no-preference) {
/* long pins: every beat plays out at a normal scroll speed (~80vh of scroll per beat wide, ~45vh phones) */
.sk-film .sk-hero { height: 280vh; }
.sk-film .sk-hero.is-wide { height: 500vh; }
.sk-film .sk-hero .sk-hero__stage, .sk-film .sk-hero.is-wide .sk-hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 520px; box-sizing: border-box; }
.sk-film .sk-film__stills { display: none; }
.sk-film .sk-film__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.24s var(--sk-ease-out); }
.sk-film .sk-hero.is-live .sk-film__canvas { opacity: 1; }
.sk-film .sk-hero.is-live .sk-hero__poster { visibility: hidden; transition: visibility 0s linear 0.26s; }
.sk-film .sk-hero__copy { will-change: opacity, transform; }
/* phones: header, copy, the art box taking what is left, the HUD at the bottom */
.sk-film .sk-hero:not(.is-wide) .sk-hero__art { flex: 1 1 0; min-height: 0; width: calc(100% - 2 * var(--sk-gutter)); aspect-ratio: auto; margin: clamp(12px, 2svh, 24px) 0 clamp(8px, 1.5svh, 16px); }
.sk-film .sk-film__hud { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 16px; row-gap: 12px;
position: relative; z-index: 1; order: 3; margin: 0 var(--sk-gutter) max(18px, env(safe-area-inset-bottom, 0px) + 12px); }
.sk-film .sk-hero.is-wide .sk-film__hud { position: absolute; left: var(--sk-he); bottom: max(28px, 4.5svh); margin: 0; width: var(--sk-cw); }
}
.sk-film__caps { grid-column: 1 / -1; position: relative; list-style: none; margin: 0; padding: 0; height: 1.3em; font: 600 clamp(20px, 0.9vw + 14px, 28px)/1.3 var(--sk-display); letter-spacing: -0.02em; color: var(--sk-ink); }
.sk-film__caps li { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; will-change: opacity, transform; }
.sk-film__bar { position: relative; height: 2px; border-radius: 1px; background: rgba(11, 11, 12, 0.14); overflow: hidden; }
.sk-film__bar i { position: absolute; inset: 0; background: var(--sk-ink); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
/* ---------- the closing band (footer.html): the thesis builds beside the title (js/film.js, art/line/src/cta.js) ----------
wide: the title and button on the left, the art box on the right; phones: the title on top, the art box under it.
Without the scene (no GPU, reduced motion) the poster cta.webp (its p = 1 frame) sits in the same box. */
.sk-cta { -webkit-mask-image: none; mask-image: none; pointer-events: none; }
.sk-cta__poster, .sk-cta__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sk-cta__poster { object-fit: contain; }
.sk-cta__canvas { opacity: 0; transition: opacity 0.3s var(--sk-ease-out); }
.sk-cta.is-live .sk-cta__canvas { opacity: 1; }
.sk-cta.is-live .sk-cta__poster { visibility: hidden; transition: visibility 0s linear 0.32s; }
.sk-close .sk-ca { margin-top: 20px; }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
.sk-close { --sk-ch: clamp(44px, 3.4vw + 8px, 88px); }
.sk-close__art.sk-cta { inset: 10svh 3.5vw 4svh max(50%, calc(max(var(--sk-gutter), (100% - var(--sk-max)) / 2) + var(--sk-ch) * 8.9 + 2vw)); }
.sk-close__body.sk-wrap { align-items: flex-start; text-align: left; }
.sk-close__body .sk-close__title { max-width: 9.2em; font-size: var(--sk-ch); }
}
@media not ((min-width: 900px) and (min-aspect-ratio: 1/1)) {
.sk-close { justify-content: flex-start; padding-top: clamp(56px, 10svh, 112px); }
.sk-close__art.sk-cta { position: relative; inset: auto; order: 2; flex: 1 0 auto; min-height: 46svh; margin: 24px var(--sk-gutter) 32px; }
.sk-close__body { order: 1; }
}
/* ---------- the pixel headline (Geist Pixel Square, 29 Sep): drawn on its own pixel grid ----------
The font's pixel is 38/1000 em, so the size is a whole number of CSS px per font pixel (--sk-hp): every stroke
lands on whole pixels, no blur. One weight (400), no synthetic bold. It resolves in with the film's 4 px Bayer
dither (steps --sk-dz1..15 below): on load here in CSS, and on the film's return from js/film.js. */
@font-face { font-family: "Geist Pixel"; src: url(/_sook/fonts/geist-pixel-square.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Pixel Fallback"; src: local("Arial"), local("Helvetica Neue"); size-adjust: 115%; ascent-override: 87%; descent-override: 26%; line-gap-override: 0%; }
:root {
--sk-dz1: url("data:image/svg+xml,");
--sk-dz2: url("data:image/svg+xml,");
--sk-dz3: url("data:image/svg+xml,");
--sk-dz4: url("data:image/svg+xml,");
--sk-dz5: url("data:image/svg+xml,");
--sk-dz6: url("data:image/svg+xml,");
--sk-dz7: url("data:image/svg+xml,");
--sk-dz8: url("data:image/svg+xml,");
--sk-dz9: url("data:image/svg+xml,");
--sk-dz10: url("data:image/svg+xml,");
--sk-dz11: url("data:image/svg+xml,");
--sk-dz12: url("data:image/svg+xml,");
--sk-dz13: url("data:image/svg+xml,");
--sk-dz14: url("data:image/svg+xml,");
--sk-dz15: url("data:image/svg+xml,");
}
.sk-hero { --sk-hp: 2px; }
@supports (width: round(nearest, 1.5px, 1px)) {
.sk-hero { --sk-hp: clamp(2px, round(down, 0.486vw, 1px), 3px); }
.sk-hero.is-wide { --sk-hp: clamp(2px, round(nearest, 0.2vw, 1px), 4px); }
}
.sk-hero .sk-h1, .sk-hero:not(.is-wide) .sk-h1, .sk-hero.is-wide .sk-h1 { font-family: "Geist Pixel", "Geist Pixel Fallback", ui-monospace, monospace; font-weight: 400; font-synthesis: none;
font-size: calc(var(--sk-hp) / 0.038); line-height: calc(var(--sk-hp) * 26); letter-spacing: 0; font-kerning: none; -webkit-font-smoothing: antialiased; }
.sk-hero .sk-h1 .sk-line { overflow: visible; padding: 0; margin: 0; }
.sk-hero .sk-h1 .sk-line > span { animation: none; text-wrap: balance; }
.sk-hero .sk-h1 { -webkit-mask-size: 32px 32px; mask-size: 32px 32px; -webkit-mask-repeat: repeat; mask-repeat: repeat; }
@media (prefers-reduced-motion: no-preference) { .sk-hero .sk-h1 { animation: sk-dither-in 0.72s 80ms backwards; } }
@keyframes sk-dither-in {
0% { -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent); }
6.25% { -webkit-mask-image: var(--sk-dz1); mask-image: var(--sk-dz1); }
12.5% { -webkit-mask-image: var(--sk-dz2); mask-image: var(--sk-dz2); }
18.75% { -webkit-mask-image: var(--sk-dz3); mask-image: var(--sk-dz3); }
25.0% { -webkit-mask-image: var(--sk-dz4); mask-image: var(--sk-dz4); }
31.25% { -webkit-mask-image: var(--sk-dz5); mask-image: var(--sk-dz5); }
37.5% { -webkit-mask-image: var(--sk-dz6); mask-image: var(--sk-dz6); }
43.75% { -webkit-mask-image: var(--sk-dz7); mask-image: var(--sk-dz7); }
50.0% { -webkit-mask-image: var(--sk-dz8); mask-image: var(--sk-dz8); }
56.25% { -webkit-mask-image: var(--sk-dz9); mask-image: var(--sk-dz9); }
62.5% { -webkit-mask-image: var(--sk-dz10); mask-image: var(--sk-dz10); }
68.75% { -webkit-mask-image: var(--sk-dz11); mask-image: var(--sk-dz11); }
75.0% { -webkit-mask-image: var(--sk-dz12); mask-image: var(--sk-dz12); }
81.25% { -webkit-mask-image: var(--sk-dz13); mask-image: var(--sk-dz13); }
87.5% { -webkit-mask-image: var(--sk-dz14); mask-image: var(--sk-dz14); }
93.75% { -webkit-mask-image: var(--sk-dz15); mask-image: var(--sk-dz15); }
100% { -webkit-mask-image: none; mask-image: none; }
}
/* ---------- the hero grade (29 Sep): a soft plum vignette and a deeper pink toward the bottom, multiplied over the
photo (about 18-25 % at the right and bottom edges; the copy side stays light, the fog above it keeps the headline at full contrast) */
.sk-hero__grade { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
background: radial-gradient(125% 110% at 30% 38%, rgba(118, 34, 98, 0) 46%, rgba(118, 34, 98, 0.3) 100%),
linear-gradient(90deg, rgba(178, 56, 138, 0) 52%, rgba(178, 56, 138, 0.24) 100%),
linear-gradient(180deg, rgba(170, 52, 132, 0) 40%, rgba(170, 52, 132, 0.24) 100%); }
.sk-hero:not(.is-wide) .sk-hero__grade { background: radial-gradient(140% 90% at 50% 18%, rgba(118, 34, 98, 0) 48%, rgba(118, 34, 98, 0.3) 100%),
linear-gradient(180deg, rgba(170, 52, 132, 0) 42%, rgba(170, 52, 132, 0.24) 100%); }
/* the pink cover (client 30 Sep, the art kit's hero ground: blush at the top to hot pink at the bottom) laid over the
photo, so the blossoms read through it as texture; the fog above keeps the copy side light */
.sk-hero__pink { position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(228, 196, 220, 0.3) 0%, rgba(232, 164, 222, 0.32) 50%, rgba(238, 114, 224, 0.4) 100%); }
/* the blossoms a touch richer (one static filter on the photo: painted once, the pointer shift only moves the layer) */
.sk-hero__photo img { filter: saturate(1.3); }
/* ---------- open calls under the line (wide screens): three live calls from /api/calls and their YES prices ----------
No card: the app's rows (CallRow: a round tinted mark, the question over a muted date, the YES price as the one pink
number) sit straight on the photo between hairlines; a pink live dot; the three as one thesis at the foot (the app's
multiplier, 5 % edge). */
.sk-tick { display: none; }
.sk-hero.is-wide .sk-tick { display: block; width: min(100%, clamp(23rem, 26vw, 31rem)); --tf: clamp(15px, 0.3vw + 11px, 17px); margin: clamp(22px, 3.6svh, 40px) 0 0; padding: 0; }
.sk-tick__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sk-tick__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 0 0 10px; font: 500 14px/18px var(--sk-font); color: var(--sk-ink-3); }
.sk-tick__title { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/18px var(--sk-font); color: var(--sk-ink); }
.sk-tick__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: rgba(11, 11, 12, 0.22); }
.sk-tick.is-live .sk-tick__dot { background: var(--sk-pink); animation: sk-tick-pulse 1.8s var(--sk-ease-in-out) infinite; }
.sk-tick__src { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-tick__rows { list-style: none; margin: 0; padding: 0; }
.sk-tick__rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 12px 0; border-top: 1px solid rgba(11, 11, 12, 0.09); }
.sk-tick__mk { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--t, #d87fd1) 16%, rgba(255, 255, 255, 0.35)); color: color-mix(in srgb, var(--t, #d87fd1) 62%, #0b0b0c); }
.sk-tick__mk { overflow: hidden; }
.sk-tick__mk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-tick__mk img[hidden] { display: none; }
.sk-tick__mk.is-logo { background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.06); }
.sk-tick__mk.is-logo svg { display: none; }
.sk-tick__mk svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sk-tick__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sk-tick__q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--tf)/1.25 var(--sk-font); color: var(--sk-ink); }
.sk-tick__when { font: 400 14px/17px var(--sk-font); color: var(--sk-ink-3); white-space: nowrap; }
.sk-tick__yes { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 11px 7px 10px; border-radius: 999px; background: var(--sk-pink); color: var(--sk-ink); font: 600 14px/1 var(--sk-font); overflow: hidden; }
.sk-tick__yes span { display: inline-block; min-width: 2.2em; text-align: right; font: 600 calc(var(--tf) + 2px)/1 var(--sk-font); letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* a new live price: the number ticks up into the pill, the pill lifts a shade for a moment */
.sk-tick__yes span.is-new { animation: sk-tick-up 0.42s var(--sk-ease-out) both; }
.sk-tick__yes:has(span.is-new) { animation: sk-tick-flash 0.9s var(--sk-ease-out); }
.sk-tick__foot { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(11, 11, 12, 0.09); font: 500 14px/18px var(--sk-font); color: var(--sk-ink-2); text-decoration: none; transition: color 0.2s; }
.sk-tick__foot span { flex: 1 1 auto; }
.sk-tick__foot b { font: 400 calc(1px / 0.038)/1 "Geist Pixel", "Geist Pixel Fallback", ui-monospace, monospace; font-synthesis: none; letter-spacing: 0; color: var(--sk-pink-text); font-variant-numeric: tabular-nums; }
.sk-tick__go { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--sk-ease-out); }
@media (hover: hover) { .sk-tick__foot:hover { color: var(--sk-ink); } .sk-tick__foot:hover .sk-tick__go { transform: translateX(3px); } }
.sk-tick__foot:focus-visible { outline: 2px solid var(--sk-ink); outline-offset: 2px; }
@keyframes sk-tick-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.72); } }
@keyframes sk-tick-up { from { opacity: 0; transform: translateY(0.7em); } }
@keyframes sk-tick-flash { 0% { background: #eaaee4; } }
@media (prefers-reduced-motion: reduce) { .sk-tick.is-live .sk-tick__dot, .sk-tick__yes span.is-new, .sk-tick__yes:has(span.is-new) { animation: none; } }
/* ---------- the closing band's backdrop: the ink photo as a soft pixel mosaic (a 160 px wide copy, drawn with hard
pixels: ~9-12 px blocks), low contrast and dimmed, so the title and the pieces popping up stand out ---------- */
.sk-close__bg img.sk-close__mosaic { image-rendering: pixelated; }