/* ==========================================================================
EXHIBIT PREVIEWS — gallery cards. Loaded on exhibitions.html only.
Contract (see render/exhibits/previews.ts):
- every element's RESTING style is the designed static fallback, so
`prefers-reduced-motion: reduce` and no-JS both show a composed still;
- animations are additive on top of that resting state;
- `.pv[data-paused]` (set by pv.js offscreen / hidden-tab) freezes work;
- the COMPOSITION CYCLE — the loop that carries the room's one diagnostic
behaviour — runs 5–10s. Nested COMPONENT RATES are exempt and are marked
`component-rate:` with the reason: a bulb chase, a cursor blink or a
spinner runs at the rate that behaviour has in the world it comes from,
and slowing one to satisfy the number breaks the rule the number serves.
An unmarked loop outside 5–10s is a defect; see docs/PREVIEW-MOTION.md.
- no text beyond what the behaviour itself needs.
========================================================================== */
@font-face { font-family: "PvSpaceMono"; src: url("fonts/space-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "PvBungeeShade"; src: url("fonts/bungee-shade.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PvPlayfairI"; src: url("fonts/playfair-italic.woff2") format("woff2-variations"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "PvAnton"; src: url("fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PvMarcellus"; src: url("fonts/marcellus.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PvUnbounded"; src: url("fonts/pv/unbounded.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
/* Previews v2 faces (2026-09-26): the faces the sheet names, bundled from Google
Fonts (all OFL/Apache), latin subset only, in fonts/pv/. Declared under their
real family names so a preview can name the face the row asks for. */
@font-face { font-family: "Archivo Black"; src: url("fonts/pv/archivo-black.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/pv/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/pv/cormorant-garamond.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("fonts/pv/press-start-2p.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/pv/courier-prime-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/pv/courier-prime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/pv/courier-prime-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poiret One"; src: url("fonts/pv/poiret-one.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Limelight"; src: url("fonts/pv/limelight.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Federo"; src: url("fonts/pv/federo.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "UnifrakturMaguntia"; src: url("fonts/pv/unifrakturmaguntia.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("fonts/pv/libre-caslon-text-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("fonts/pv/libre-caslon-text-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("fonts/pv/libre-caslon-text-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "VT323"; src: url("fonts/pv/vt323.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url("fonts/pv/share-tech-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Abril Fatface"; src: url("fonts/pv/abril-fatface.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("fonts/pv/pinyon-script.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/pv/fraunces-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/pv/fraunces.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/pv/caveat.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/pv/eb-garamond-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/pv/eb-garamond.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Monoton"; src: url("fonts/pv/monoton.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("fonts/pv/oswald.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/pv/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/pv/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/pv/lato-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/pv/lato-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/pv/lato-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/pv/lato-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/pv/lato-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("fonts/pv/cinzel.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Pacifico"; src: url("fonts/pv/pacifico.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Righteous"; src: url("fonts/pv/righteous.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders Stencil Display"; src: url("fonts/pv/big-shoulders-stencil-display.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Shippori Mincho"; src: url("fonts/pv/shippori-mincho-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Shippori Mincho"; src: url("fonts/pv/shippori-mincho-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Shippori Mincho"; src: url("fonts/pv/shippori-mincho-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Shippori Mincho"; src: url("fonts/pv/shippori-mincho-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Shippori Mincho"; src: url("fonts/pv/shippori-mincho-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/pv/fredoka.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bangers"; src: url("fonts/pv/bangers.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("fonts/pv/dm-serif-display-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("fonts/pv/dm-serif-display.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/pv/playfair-display-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/pv/playfair-display.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/pv/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/pv/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/pv/poppins-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/pv/jost-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/pv/jost.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/pv/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/pv/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Alfa Slab One"; src: url("fonts/pv/alfa-slab-one.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Amatic SC"; src: url("fonts/pv/amatic-sc.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Amatic SC"; src: url("fonts/pv/amatic-sc.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Arvo"; src: url("fonts/pv/arvo-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Arvo"; src: url("fonts/pv/arvo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Arvo"; src: url("fonts/pv/arvo-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/pv/dm-sans.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("fonts/pv/crimson-pro-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("fonts/pv/crimson-pro.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/pv/ibm-plex-mono-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/pv/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/pv/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/pv/ibm-plex-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("fonts/pv/special-elite.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chango"; src: url("fonts/pv/chango.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/pv/nunito.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("fonts/pv/josefin-sans.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/pv/inter-tight.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url("fonts/pv/bebas-neue.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("fonts/pv/michroma.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/pv/space-mono-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/pv/space-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/pv/space-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Rye"; src: url("fonts/pv/rye.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Anton"; src: url("fonts/pv/anton.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("fonts/pv/unbounded.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Marcellus"; src: url("fonts/pv/marcellus.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bungee Shade"; src: url("fonts/pv/bungee-shade.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rock Salt"; src: url("fonts/pv/rock-salt.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("fonts/pv/permanent-marker.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.pv {
width: 100%;
max-width: 13rem;
aspect-ratio: 16 / 10.5;
border: 1px solid var(--rule-firm, #ccc);
overflow: hidden;
position: relative;
contain: content;
}
.pv[data-paused] *, .pv[data-paused]::before, .pv[data-paused]::after {
animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
.pv *, .pv::before, .pv::after { animation: none !important; }
}
/* ---- BLUEPRINT: inspect element, drafted; hovering the CTA measures it, then the layout re-measures itself ---- */
/* Previews v2 (2026-09-26), row 8. Resting frame IS the poster: a fully drafted
web page in white line on cyanotype blue, faint grid, the W dimension across
the top, the hero's height called out on the left, title block at REV A.
The hero moment: a cursor lands on the CTA; a dev-tools style cyan highlight
snaps on and dimension lines snap to its edges (240 x 56). Then the hero
section grows, the button stretches, every callout re-measures live (110 ->
150, 240 -> 320) and the title block ticks to REV B. 7.5s cycle; the resize
returns, callouts retract, REV A comes back, cursor leaves. */
.pv-blue { background: #0F3D6E; container-type: inline-size; }
/* the drafting grid lives on a child: cqi on the root would resolve against the viewport */
.pv-blue__grid {
position: absolute; inset: 0; pointer-events: none;
background: url("data:image/svg+xml;utf8,") 0 0 / 8cqi 8cqi;
}
.pv-blue__sheet { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.pv-blue__ink { fill: none; stroke: #EAF2FB; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.pv-blue__cy { stroke: #9CC7F0; stroke-width: 1.2; }
.pv-blue__cy--thick { stroke-width: 3; }
.pv-blue__t {
fill: #EAF2FB; stroke: #0F3D6E; stroke-width: 7; paint-order: stroke; stroke-linejoin: round;
font: 20px "Space Mono", "Courier New", monospace; text-anchor: middle; dominant-baseline: central;
}
.pv-blue__st {
fill: #EAF2FB; stroke: none; font: 700 21px "Big Shoulders Stencil Display", Impact, "Arial Black", sans-serif;
letter-spacing: 1px; text-anchor: middle; dominant-baseline: central;
}
/* resizable geometry: fill-box so scale origins sit on the drawn shapes */
.pv-blue__frame, .pv-blue__hero, .pv-blue__ydim { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(1); }
.pv-blue__btn, .pv-blue__hl, .pv-blue__xdim { transform-box: fill-box; transform-origin: 0 50%; }
.pv-blue__btn { transform: scaleX(1); }
.pv-blue__shift { transform: translate(0, 0); }
/* the inspect highlight: a translucent cyan box-model tint, off at rest */
.pv-blue__hl { fill: #9CC7F0; stroke: none; opacity: 0; transform: scaleX(1); }
/* callouts on the button: collapsed to nothing at rest, labels hidden */
.pv-blue__xdim { transform: scaleX(0); }
.pv-blue__vdim { transform-box: fill-box; transform-origin: 50% 0; transform: translate(0, 0) scaleY(0); }
.pv-blue__l240, .pv-blue__l320, .pv-blue__l150, .pv-blue__revB { opacity: 0; }
.pv-blue__l56 { opacity: 0; transform: translate(0, 0); }
.pv-blue__l110, .pv-blue__revA { opacity: 1; }
/* rotated labels sit on their own dimension line: a wider knockout so the line cannot show between digits */
.pv-blue__l110, .pv-blue__l150 { stroke-width: 12; }
/* the cursor rests off-canvas: the poster has no cursor in it */
.pv-blue__cur { fill: #EAF2FB; stroke: #0F3D6E; stroke-width: 1.5; stroke-linejoin: round; transform: translate(-60px, 200px); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.pv-blue__cur { animation: pv-blue-cur 7.5s infinite; }
.pv-blue__hl { animation: pv-blue-hl 7.5s infinite; }
.pv-blue__btn { animation: pv-blue-btn 7.5s infinite; }
.pv-blue__xdim { animation: pv-blue-xdim 7.5s infinite; }
.pv-blue__vdim { animation: pv-blue-vdim 7.5s infinite; }
.pv-blue__hero, .pv-blue__ydim { animation: pv-blue-hero 7.5s infinite; }
.pv-blue__frame { animation: pv-blue-frame 7.5s infinite; }
.pv-blue__shift { animation: pv-blue-shift 7.5s infinite; }
.pv-blue__l240 { animation: pv-blue-l240 7.5s infinite; }
.pv-blue__l320 { animation: pv-blue-l320 7.5s infinite; }
.pv-blue__l56 { animation: pv-blue-l56 7.5s infinite; }
.pv-blue__l110 { animation: pv-blue-l110 7.5s infinite; }
.pv-blue__l150 { animation: pv-blue-l150 7.5s infinite; }
.pv-blue__revA { animation: pv-blue-revA 7.5s infinite; }
.pv-blue__revB { animation: pv-blue-revB 7.5s infinite; }
/* 1.5s in, the cursor glides to the CTA, holds through the measure, leaves at 6s */
@keyframes pv-blue-cur {
0%, 20% { transform: translate(-60px, 200px); opacity: 0; }
20.1% { transform: translate(-60px, 200px); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
28%, 78% { transform: translate(140px, 190px); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.8, 1); }
86% { transform: translate(-60px, 200px); opacity: 1; }
86.1%, 100% { transform: translate(-60px, 200px); opacity: 0; }
}
/* the dev-tools tint snaps on the instant the cursor lands, stretches with the button */
@keyframes pv-blue-hl {
0%, 30.6% { opacity: 0; transform: scaleX(1); }
30.7%, 48% { opacity: 0.42; transform: scaleX(1); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
58.7%, 74.7% { opacity: 0.42; transform: scaleX(1.333); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
80% { opacity: 0.42; transform: scaleX(1); }
80.1%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes pv-blue-btn {
0%, 48% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
58.7%, 74.7% { transform: scaleX(1.333); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
80%, 100% { transform: scaleX(1); }
}
/* horizontal callout: snaps out from the button's left edge, re-measures, retracts */
@keyframes pv-blue-xdim {
0%, 30.7% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1); }
36%, 48% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
58.7%, 74.7% { transform: scaleX(1.333); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
80% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 1); }
84%, 100% { transform: scaleX(0); }
}
/* vertical callout: snaps down the button's right edge, rides right with the stretch */
@keyframes pv-blue-vdim {
0%, 34.7% { transform: translate(0, 0) scaleY(0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1); }
40%, 48% { transform: translate(0, 0) scaleY(1); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
58.7%, 74.7% { transform: translate(40px, 0) scaleY(1); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
80% { transform: translate(0, 0) scaleY(1); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 1); }
84%, 100% { transform: translate(0, 0) scaleY(0); }
}
/* the section resize: hero grows 110 -> 150, its left callout grows with it */
@keyframes pv-blue-hero {
0%, 48% { transform: scaleY(1); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
58.7%, 74.7% { transform: scaleY(1.364); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
80%, 100% { transform: scaleY(1); }
}
@keyframes pv-blue-frame {
0%, 48% { transform: scaleY(1); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
58.7%, 74.7% { transform: scaleY(1.169); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
80%, 100% { transform: scaleY(1); }
}
/* everything below the hero floor reflows down 40 and back */
@keyframes pv-blue-shift {
0%, 48% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
58.7%, 74.7% { transform: translate(0, 40px); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
80%, 100% { transform: translate(0, 0); }
}
/* labels: hard swaps, drafting has no fades */
@keyframes pv-blue-l240 {
0%, 35.9% { opacity: 0; }
36%, 52.9% { opacity: 1; }
53%, 79.9% { opacity: 0; }
80%, 83.9% { opacity: 1; }
84%, 100% { opacity: 0; }
}
@keyframes pv-blue-l320 {
0%, 52.9% { opacity: 0; }
53%, 79.9% { opacity: 1; }
80%, 100% { opacity: 0; }
}
@keyframes pv-blue-l56 {
0%, 39.9% { opacity: 0; transform: translate(0, 0); }
40%, 48% { opacity: 1; transform: translate(0, 0); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
58.7%, 74.7% { opacity: 1; transform: translate(40px, 0); animation-timing-function: cubic-bezier(0.25, 0, 0.05, 1); }
80%, 83.9% { opacity: 1; transform: translate(0, 0); }
84%, 100% { opacity: 0; transform: translate(0, 0); }
}
/* shared by "110" and "REV A": present at rest, gone while the page is REV B */
@keyframes pv-blue-l110 {
0%, 52.9% { opacity: 1; }
53%, 79.9% { opacity: 0; }
80%, 100% { opacity: 1; }
}
@keyframes pv-blue-l150 {
0%, 52.9% { opacity: 0; }
53%, 79.9% { opacity: 1; }
80%, 100% { opacity: 0; }
}
/* REV A / REV B: a hard tick a beat after the re-measure settles, back with the return */
@keyframes pv-blue-revA {
0%, 61.2% { opacity: 1; }
61.3%, 79.9% { opacity: 0; }
80%, 100% { opacity: 1; }
}
@keyframes pv-blue-revB {
0%, 61.2% { opacity: 0; }
61.3%, 79.9% { opacity: 1; }
80%, 100% { opacity: 0; }
}
}
/* ---- TELETEXT: key in 101 and the page repaints one fixed row at a time ---- */
/* Previews v2 (2026-09-26), row 58. Resting frame IS the poster: a full P100
page on black in the seven broadcast colours: header row with the page
counter, service name and clock; a masthead with a coarse red/yellow mosaic
block and TV GUIDE in bold yellow; six listings rows, cyan times and white
titles; a fastext row of four coloured labels. The hero moment: the counter
blanks and the digits 1, 0, 1 key in green, then the page repaints from the
masthead down, one row every 0.3s with no easing, into P101 FILMS in
yellow and green. 8s cycle; keying 100 repaints the rows back top to bottom
the same way. Every transition is a steps(1) cut. */
.pv-tele { background: #000000; container-type: inline-size; color: #FFFFFF; text-transform: uppercase; font-family: "VT323", "Courier New", monospace; }
/* all cqi sizing lives on this child: the root is the container */
.pv-tele__page { position: absolute; inset: 0; display: flex; flex-direction: column; box-sizing: border-box; padding: 1.2cqi 3cqi; font: 400 7.2cqi/1 "VT323", "Courier New", monospace; }
.pv-tele__hdr { height: 6.5cqi; display: flex; align-items: center; gap: 2cqi; white-space: nowrap; }
.pv-tele__pg { font-weight: 400; display: inline-flex; }
.pv-tele__pg span { display: inline-block; width: 1ch; color: #FFFFFF; opacity: 1; }
.pv-tele__d3 { position: relative; }
.pv-tele__d3 i { position: absolute; left: 0; top: 0; font-style: normal; color: #FFFFFF; }
.pv-tele__d3b { opacity: 0; }
.pv-tele__svc { flex: 1; text-align: center; color: #FFFF00; }
.pv-tele__clk { color: #FFFFFF; }
/* each row carries its P100 face (a) and its P101 face (b) stacked; b is an
opaque black-backed layer that simply switches on */
.pv-tele__row { position: relative; height: 7cqi; }
.pv-tele__row > span { position: absolute; inset: 0; display: flex; align-items: center; gap: 2cqi; white-space: nowrap; overflow: hidden; }
.pv-tele__a i { color: #00FFFF; font-style: normal; }
.pv-tele__b { background: #000000; opacity: 0; color: #00FF00; }
.pv-tele__b i { color: #FFFF00; font-style: normal; }
.pv-tele__mast { height: 14cqi; }
.pv-tele__mast b { font-size: 13cqi; font-weight: 400; color: #FFFF00; }
.pv-tele__mast .pv-tele__b b { color: #00FFFF; }
.pv-tele__mos { display: block; width: 14cqi; height: 100%; background: repeating-linear-gradient(180deg, transparent 0 2.4cqi, #000000 2.4cqi 3cqi), repeating-linear-gradient(90deg, #FF0000 0 3cqi, #FFFF00 3cqi 6cqi, #FF0000 6cqi 9cqi, #FFFFFF 9cqi 12cqi, #FFFF00 12cqi 14cqi); }
.pv-tele__mos--b { background: repeating-linear-gradient(180deg, transparent 0 2.4cqi, #000000 2.4cqi 3cqi), repeating-linear-gradient(90deg, #00FFFF 0 3cqi, #FF00FF 3cqi 6cqi, #0000FF 6cqi 9cqi, #FFFFFF 9cqi 12cqi, #00FFFF 12cqi 14cqi); }
.pv-tele__fast { height: 8cqi; margin-top: 0.6cqi; }
.pv-tele__fast > span { gap: 0.8cqi; }
.pv-tele__fast i { flex: 1; height: 6cqi; display: grid; place-items: center; font-size: 6.6cqi; font-weight: 400; color: #000000; font-style: normal; }
.pv-tele__fast i:nth-child(1) { background: #FF0000; }
.pv-tele__fast i:nth-child(2) { background: #00FF00; }
.pv-tele__fast i:nth-child(3) { background: #FFFF00; }
.pv-tele__fast i:nth-child(4) { background: #00FFFF; }
@media (prefers-reduced-motion: no-preference) {
.pv-tele__b { animation: pv-tele-paint 8s steps(1, end) infinite; animation-delay: calc(var(--r) * 0.3s); }
.pv-tele__d1 { animation: pv-tele-d1 8s steps(1, end) infinite; }
.pv-tele__d2 { animation: pv-tele-d2 8s steps(1, end) infinite; }
.pv-tele__d3a { animation: pv-tele-d3a 8s steps(1, end) infinite; }
.pv-tele__d3b { animation: pv-tele-d3b 8s steps(1, end) infinite; }
/* one row: P101 face on at 2.0s (+0.3s per row), off again at 5.2s (+0.3s) */
@keyframes pv-tele-paint {
0%, 24.9% { opacity: 0; }
25%, 64.9% { opacity: 1; }
65%, 100% { opacity: 0; }
}
/* the counter: blank, then each digit keys in green; white once the page lands */
@keyframes pv-tele-d1 {
0%, 12% { opacity: 1; color: #FFFFFF; }
12.5%, 14% { opacity: 0; color: #FFFFFF; }
14.5%, 24.9% { opacity: 1; color: #00FF00; }
25%, 56% { opacity: 1; color: #FFFFFF; }
56.5%, 58% { opacity: 0; color: #FFFFFF; }
58.5%, 64.9% { opacity: 1; color: #00FF00; }
65%, 100% { opacity: 1; color: #FFFFFF; }
}
@keyframes pv-tele-d2 {
0%, 12% { opacity: 1; color: #FFFFFF; }
12.5%, 17% { opacity: 0; color: #FFFFFF; }
17.5%, 24.9% { opacity: 1; color: #00FF00; }
25%, 56% { opacity: 1; color: #FFFFFF; }
56.5%, 61% { opacity: 0; color: #FFFFFF; }
61.5%, 64.9% { opacity: 1; color: #00FF00; }
65%, 100% { opacity: 1; color: #FFFFFF; }
}
@keyframes pv-tele-d3a {
0%, 12% { opacity: 1; color: #FFFFFF; }
12.5%, 64% { opacity: 0; color: #FFFFFF; }
64.5%, 64.9% { opacity: 1; color: #00FF00; }
65%, 100% { opacity: 1; color: #FFFFFF; }
}
@keyframes pv-tele-d3b {
0%, 20% { opacity: 0; color: #FFFFFF; }
20.5%, 24.9% { opacity: 1; color: #00FF00; }
25%, 56% { opacity: 1; color: #FFFFFF; }
56.5%, 100% { opacity: 0; color: #FFFFFF; }
}
}
/* ---- VICTORIAN: line by line the playbill swaps its faces like a font picker, each swap with a letterpress bite, then settles ---- */
/* Previews v2 (2026-09-26), row 63. Resting frame IS the poster: a laid
off-white playbill — GRAND in shaded wood type, Exhibition in heavy italic,
OF THE in tracked Cinzel caps, PRINTER'S ART in Rye wood type — gold double
rules between, two fleurons, and an engraved platen press below. Hero:
starting at the top, each line swaps through two other faces (three
stacked spans, opacity stepped, staggered 1.2s per line by --n) and lands
back on its richest face; every swap dips the line 4% like the bite of
a press, and a gold bracket in the margin marks the line being set (the
switcher). Loop: the bracket leaves, the last line settles, hold. 7s. */
.pv-bill { background: #F2E8D5; container-type: inline-size; color: #1A1A1A; }
.pv-bill p { margin: 0; }
.pv-bill__stock { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(26, 26, 26, 0.045) 0 1px, transparent 1px 4px); }
/* each line is a stack of three faces; only the first shows at rest.
The swaps run through the bundled ornamental set: Alfa Slab One, Cinzel,
Pinyon Script, UnifrakturMaguntia, Libre Caslon Text, Abril Fatface, Rye */
.pv-bill__line { position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; transform: scale(1); }
.pv-bill__line span { position: absolute; left: 0; right: 0; top: 0; line-height: 1; }
.pv-bill__a { opacity: 1; } .pv-bill__b { opacity: 0; } .pv-bill__c { opacity: 0; }
.pv-bill__l1 { top: 5%; height: 13cqi; }
.pv-bill__l1 .pv-bill__a { font: 400 13cqi/1 "PvBungeeShade", Impact, "Arial Black", sans-serif; }
.pv-bill__l1 .pv-bill__b { font: 400 11.5cqi/1 "Alfa Slab One", Impact, sans-serif; letter-spacing: 0.06em; color: #5C1A1B; }
.pv-bill__l1 .pv-bill__c { font: 900 11.5cqi/1.1 "Cinzel", "Times New Roman", serif; letter-spacing: 0.06em; color: #5C1A1B; }
.pv-bill__l2 { top: 25%; height: 10cqi; }
.pv-bill__l2 .pv-bill__a { font: italic 700 9.5cqi/1 "PvPlayfairI", Georgia, serif; }
.pv-bill__l2 .pv-bill__b { font: 400 11.5cqi/1.1 "Pinyon Script", "Brush Script MT", cursive; color: #5C1A1B; }
.pv-bill__l2 .pv-bill__c { font: 400 10cqi/1 "UnifrakturMaguntia", "Times New Roman", serif; letter-spacing: 0.02em; }
.pv-bill__l3 { top: 40.5%; height: 6cqi; }
.pv-bill__l3 .pv-bill__a { font: 400 5.4cqi/1 "Cinzel", "Times New Roman", serif; letter-spacing: 0.38em; color: #5C1A1B; }
.pv-bill__l3 .pv-bill__b { font: italic 400 6cqi/1 "Libre Caslon Text", Georgia, serif; letter-spacing: 0.12em; }
.pv-bill__l3 .pv-bill__c { font: 400 5.8cqi/1 "Abril Fatface", Georgia, serif; letter-spacing: 0.3em; color: #5C1A1B; }
.pv-bill__l4 { top: 49.5%; height: 9cqi; }
.pv-bill__l4 .pv-bill__a { font: 400 7.6cqi/1 "Rye", Impact, sans-serif; letter-spacing: 0.02em; }
.pv-bill__l4 .pv-bill__b { font: 400 8cqi/1.05 "Abril Fatface", Georgia, serif; letter-spacing: 0.02em; color: #5C1A1B; }
.pv-bill__l4 .pv-bill__c { font: 700 7.6cqi/1.05 "Libre Caslon Text", "Times New Roman", serif; letter-spacing: 0.02em; }
/* gold double rules and fleurons */
.pv-bill__rule { position: absolute; left: 10%; right: 10%; height: 1cqi; background: linear-gradient(to bottom, #B89B5E 0 28%, transparent 28% 72%, #B89B5E 72%); }
.pv-bill__r1 { top: 22.5%; } .pv-bill__r2 { top: 62%; }
.pv-bill__fl { position: absolute; top: 76%; width: 3.4cqi; height: 3.4cqi; background: #B89B5E; transform: rotate(45deg); box-shadow: inset 0 0 0 0.7cqi #F2E8D5, inset 0 0 0 1.6cqi #5C1A1B; }
.pv-bill__fl1 { left: 13%; } .pv-bill__fl2 { right: 13%; }
/* the engraved press */
.pv-bill__press { position: absolute; left: 29%; width: 42%; top: 65%; height: 31%; display: block; }
/* the setting bracket: absent at rest, marks the line whose face is being chosen */
.pv-bill__sel { position: absolute; left: 4%; top: 5%; width: 2.4cqi; height: 12cqi; border: 0.6cqi solid #B89B5E; border-right: 0; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.pv-bill__a { animation: pv-bill-face-a 7s steps(1) infinite; animation-delay: calc(var(--n) * 1.2s); }
.pv-bill__b { animation: pv-bill-face-b 7s steps(1) infinite; animation-delay: calc(var(--n) * 1.2s); }
.pv-bill__c { animation: pv-bill-face-c 7s steps(1) infinite; animation-delay: calc(var(--n) * 1.2s); }
.pv-bill__line { animation: pv-bill-bite 7s infinite; animation-delay: calc(var(--n) * 1.2s); }
.pv-bill__sel { animation: pv-bill-mark 7s steps(1) infinite; }
/* per line, before its delay: A for 1s, B for 0.5s, C for 0.5s, back to A.
The last line is delayed 3.6s (51.4%), so everything after 28.6% is rest */
@keyframes pv-bill-face-a { 0%, 14.2% { opacity: 1; } 14.3%, 28.5% { opacity: 0; } 28.6%, 100% { opacity: 1; } }
@keyframes pv-bill-face-b { 0%, 14.2% { opacity: 0; } 14.3%, 21.3% { opacity: 1; } 21.4%, 100% { opacity: 0; } }
@keyframes pv-bill-face-c { 0%, 21.3% { opacity: 0; } 21.4%, 28.5% { opacity: 1; } 28.6%, 100% { opacity: 0; } }
/* the bite: a hard dip on each impression, a quick recovery */
@keyframes pv-bill-bite {
0%, 14.2% { transform: scale(1); }
14.3% { transform: scale(0.96); animation-timing-function: ease-out; }
15.6%, 21.3% { transform: scale(1); }
21.4% { transform: scale(0.96); animation-timing-function: ease-out; }
22.7%, 28.5% { transform: scale(1); }
28.6% { transform: scale(0.96); animation-timing-function: ease-out; }
29.9%, 100% { transform: scale(1); }
}
/* the bracket steps down the bill with the line being set */
@keyframes pv-bill-mark {
0%, 14.2% { opacity: 0; top: 5%; height: 12cqi; }
14.3%, 31.3% { opacity: 1; top: 5%; height: 12cqi; }
31.4%, 48.5% { opacity: 1; top: 25%; height: 9cqi; }
48.6%, 65.6% { opacity: 1; top: 40.5%; height: 5.5cqi; }
65.7%, 82.8% { opacity: 1; top: 49.5%; height: 8cqi; }
82.9%, 100% { opacity: 0; top: 5%; height: 12cqi; }
}
}
/* ---- PSYCHEDELIC: colour bands cycle outward through liquid lettering that breathes; hover the pill and it inverts ---- */
/* Previews v2 (2026-09-26), row 44. Resting frame IS the poster: seven
concentric rings in violet / lime / magenta / orange at full vibration, a
hand-wobbled double border in lime and misregistered magenta, MELT FEST in
turbulence-warped lettering (lime with a violet stroke) filling the centre
circle, and a violet Tickets pill. Hero: every ring takes the colour of the
ring inside it, so bands roll outward for the whole loop while the lettering
swells and pinches, peaking around 4s; the cursor lands on Tickets and the
pill flips to its complementary pair. 8s; the colour period equals the loop. */
.pv-acidfield { background: #5A189A; container-type: inline-size; }
.pv-acidfield__ring { position: absolute; left: 50%; top: 50%; translate: -50% -50%; aspect-ratio: 1; border-radius: 50%; }
.pv-acidfield__ring--0 { width: 160cqi; background: #5A189A; }
.pv-acidfield__ring--1 { width: 136cqi; background: #9EF01A; }
.pv-acidfield__ring--2 { width: 112cqi; background: #D100D1; }
.pv-acidfield__ring--3 { width: 88cqi; background: #FF8C00; }
.pv-acidfield__ring--4 { width: 64cqi; background: #5A189A; }
.pv-acidfield__ring--5 { width: 40cqi; background: #9EF01A; }
.pv-acidfield__ring--6 { width: 18cqi; background: #D100D1; }
/* the lettering: heavy sans pushed through a turbulence displacement, so no letter keeps a straight edge */
.pv-acidfield__word { position: absolute; left: 50%; top: 50%; width: 78cqi; height: 52cqi; translate: -50% -54%; overflow: visible; }
.pv-acidfield__lett { transform-box: fill-box; transform-origin: 50% 50%; scale: 1 1; }
.pv-acidfield__lett text { font: 900 74px/1 "Arial Black", Impact, sans-serif; letter-spacing: -3px; fill: #9EF01A; stroke: #5A189A; stroke-width: 6; stroke-linejoin: round; paint-order: stroke; }
.pv-acidfield__border { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-acidfield__ink { fill: none; stroke-linejoin: round; }
.pv-acidfield__ink--l { stroke: #9EF01A; stroke-width: 4; }
.pv-acidfield__ink--m { stroke: #D100D1; stroke-width: 2.5; translate: 4px 3px; }
.pv-acidfield__pill { position: absolute; left: 50%; top: 88%; margin: 0; translate: -50% -50%; padding: 1.8cqi 5.5cqi; border-radius: 99cqi; box-sizing: border-box; border: 0.7cqi solid #9EF01A; background: #5A189A; color: #9EF01A; font: 700 6cqi/1 "Trebuchet MS", Verdana, sans-serif; letter-spacing: 0.06em; scale: 1; }
.pv-acidfield__cur { position: absolute; left: 108%; top: 96%; width: 7%; aspect-ratio: 14 / 19; background: #FF8C00; clip-path: polygon(0 0, 0 86%, 32% 68%, 50% 100%, 66% 92%, 48% 60%, 84% 58%); filter: drop-shadow(0.5cqi 0.5cqi 0 #5A189A); }
@media (prefers-reduced-motion: no-preference) {
.pv-acidfield__ring--0, .pv-acidfield__ring--4 { animation: pv-acidfield-c0 8s infinite; }
.pv-acidfield__ring--1, .pv-acidfield__ring--5 { animation: pv-acidfield-c1 8s infinite; }
.pv-acidfield__ring--2, .pv-acidfield__ring--6 { animation: pv-acidfield-c2 8s infinite; }
.pv-acidfield__ring--3 { animation: pv-acidfield-c3 8s infinite; }
.pv-acidfield__lett { animation: pv-acidfield-breathe 8s ease-in-out infinite; }
.pv-acidfield__pill { animation: pv-acidfield-flip 8s infinite; }
.pv-acidfield__cur { animation: pv-acidfield-reach 8s infinite; }
/* each ring walks the palette one step every 2s, dwelling on the pure colour
and crossing fast; ring k at 25% wears what ring k+1 (inside it) wore at 0% */
@keyframes pv-acidfield-c0 {
0% { background: #5A189A; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
25% { background: #9EF01A; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
50% { background: #D100D1; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
75% { background: #FF8C00; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
100% { background: #5A189A; }
}
@keyframes pv-acidfield-c1 {
0% { background: #9EF01A; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
25% { background: #D100D1; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
50% { background: #FF8C00; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
75% { background: #5A189A; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
100% { background: #9EF01A; }
}
@keyframes pv-acidfield-c2 {
0% { background: #D100D1; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
25% { background: #FF8C00; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
50% { background: #5A189A; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
75% { background: #9EF01A; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
100% { background: #D100D1; }
}
@keyframes pv-acidfield-c3 {
0% { background: #FF8C00; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
25% { background: #5A189A; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
50% { background: #9EF01A; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
75% { background: #D100D1; animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
100% { background: #FF8C00; }
}
/* the headline swells wide, pinches tall at the 4s peak, and comes home */
@keyframes pv-acidfield-breathe {
0% { scale: 1 1; }
25% { scale: 1.07 0.94; }
50% { scale: 0.92 1.1; }
75% { scale: 1.05 0.96; }
100% { scale: 1 1; }
}
/* hover state: the pill trades places with its complement and grows a little */
@keyframes pv-acidfield-flip {
0%, 46% { background: #5A189A; color: #9EF01A; border-color: #9EF01A; scale: 1; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.2); }
50%, 70% { background: #9EF01A; color: #5A189A; border-color: #D100D1; scale: 1.1; animation-timing-function: ease-in-out; }
76%, 100% { background: #5A189A; color: #9EF01A; border-color: #9EF01A; scale: 1; }
}
@keyframes pv-acidfield-reach {
0%, 34% { left: 108%; top: 96%; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
47%, 72% { left: 57%; top: 88%; animation-timing-function: ease-in-out; }
86%, 100% { left: 108%; top: 96%; }
}
}
/* ---- Y2K: skin swap; a click on the middle bubble morphs the player into its lilac skin and back ---- */
/* Previews v2 (2026-09-26), row 67. Resting frame IS the poster: a translucent
aqua player panel on brushed silver, PLAY in Michroma, a lime progress
pill, three metallic bubble buttons, three star sparkles standing still.
The hero moment: a cursor clicks the middle bubble; the panel springs into
a blobby lilac skin, tilting a few degrees, the bubbles go lime, the bar
goes aqua, a lens flare rings out from the click point with a horizontal
streak, and a burst of sparkles pops around the panel. 7s cycle; the skin
springs back to aqua and the sparkles are gone before frame 0. */
.pv-gloss { background: radial-gradient(ellipse at 28% 18%, #ffffff 0%, #dde1e7 22%, #C0C0C0 48%, #838a97 100%); container-type: inline-size; }
/* four-point sparkles, the resting ones */
.pv-gloss__star, .pv-gloss__pop {
position: absolute; aspect-ratio: 1; background: #ffffff;
clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
filter: drop-shadow(0 0 0.8cqi rgba(200, 255, 0, 0.8));
}
.pv-gloss__star1 { right: 5%; top: 7%; width: 9cqi; }
.pv-gloss__star2 { left: 3%; bottom: 9%; width: 7cqi; }
.pv-gloss__star3 { left: 60%; top: 5%; width: 5cqi; }
/* the player: aqua glass with a white rim and a wet inner highlight */
.pv-gloss__panel {
position: absolute; left: 11%; top: 16%; width: 78%; height: 64%; box-sizing: border-box;
border-radius: 9cqi 9cqi 9cqi 9cqi / 9cqi 9cqi 9cqi 9cqi; background: rgba(127, 227, 240, 0.62);
border: 0.7cqi solid rgba(255, 255, 255, 0.88); transform: rotate(0deg);
box-shadow: inset 0 1.8cqi 2.4cqi rgba(255, 255, 255, 0.7), inset 0 -1.2cqi 2cqi rgba(70, 130, 150, 0.35), 0 1.6cqi 2.6cqi rgba(40, 60, 90, 0.35);
}
.pv-gloss__title {
position: absolute; left: 7%; top: 11%; margin: 0; font: 400 13cqi/1 "Michroma", Verdana, "Trebuchet MS", sans-serif;
letter-spacing: 0.12em; color: #ffffff; text-shadow: 0 0.35cqi 0 rgba(80, 140, 160, 0.9), 0 0 1.4cqi rgba(255, 255, 255, 0.85);
}
.pv-gloss__track { position: absolute; left: 7%; right: 7%; top: 50%; height: 5cqi; border-radius: 99cqi; overflow: hidden; background: rgba(255, 255, 255, 0.55); border: 0.3cqi solid rgba(255, 255, 255, 0.9); box-sizing: border-box; }
.pv-gloss__prog { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; border-radius: 99cqi; background-color: #C8FF00; }
/* metallic bubbles: a fixed specular overlay on an animatable base colour */
.pv-gloss__btn {
position: absolute; bottom: 8%; width: 12cqi; aspect-ratio: 1; border-radius: 50%; transform: scale(1);
background-color: #C0C0C0;
background-image: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 22%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, 0.42) 100%);
box-shadow: 0 0.6cqi 1cqi rgba(30, 40, 60, 0.4), inset 0 -0.6cqi 1cqi rgba(255, 255, 255, 0.5);
}
.pv-gloss__b1 { left: 8%; }
.pv-gloss__b2 { left: calc(50% - 6cqi); }
.pv-gloss__b3 { right: 8%; }
/* the flare sits on the middle bubble; nothing of it shows at rest */
.pv-gloss__flare { position: absolute; left: 50%; top: 67%; width: 0; height: 0; pointer-events: none; }
.pv-gloss__ring { position: absolute; left: 0; top: 0; width: 40cqi; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 0.8cqi solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 2cqi #C8FF00, inset 0 0 2cqi rgba(160, 210, 255, 0.8); transform: scale(0); opacity: 0; }
.pv-gloss__streak { position: absolute; left: 0; top: 0; width: 130cqi; height: 1.4cqi; translate: -50% -50%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 50%, rgba(255, 255, 255, 0)); transform: scaleX(0); opacity: 0; }
/* burst sparkles: sized and placed inline, collapsed at rest */
.pv-gloss__pop { transform: scale(0) rotate(0deg); opacity: 0; }
.pv-gloss__cur {
position: absolute; left: -12%; top: 40%; width: 5cqi; aspect-ratio: 13 / 20; opacity: 0;
background: #ffffff; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%);
filter: drop-shadow(0 0 0.35cqi #000000) drop-shadow(0 0.3cqi 0.4cqi rgba(0, 0, 0, 0.5));
}
@media (prefers-reduced-motion: no-preference) {
.pv-gloss__cur { animation: pv-gloss-cur 7s infinite; }
.pv-gloss__panel { animation: pv-gloss-skin 7s infinite; }
.pv-gloss__title { animation: pv-gloss-title 7s infinite; }
.pv-gloss__prog { animation: pv-gloss-prog 7s infinite; }
.pv-gloss__b1, .pv-gloss__b3 { animation: pv-gloss-btn 7s infinite; }
.pv-gloss__b2 { animation: pv-gloss-click 7s infinite; }
.pv-gloss__ring { animation: pv-gloss-ring 7s infinite; }
.pv-gloss__streak { animation: pv-gloss-streak 7s infinite; }
.pv-gloss__pop { animation: pv-gloss-pop 7s infinite; animation-delay: calc(var(--d) * 0.16s); }
/* cursor: in from the left to the middle bubble, a click dip, holds, leaves right */
@keyframes pv-gloss-cur {
0%, 14.3% { left: -12%; top: 40%; opacity: 0; }
14.4% { left: -12%; top: 40%; opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
21.4% { left: 48%; top: 62%; opacity: 1; }
22.9% { left: 49%; top: 64%; opacity: 1; }
24.3%, 71% { left: 48%; top: 62%; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.8, 1); }
80% { left: 112%; top: 30%; opacity: 1; }
80.1%, 100% { left: -12%; top: 40%; opacity: 0; }
}
/* the skin: springy morph to blobby lilac, tilted; springs back */
@keyframes pv-gloss-skin {
0%, 24.3% { border-radius: 9cqi 9cqi 9cqi 9cqi / 9cqi 9cqi 9cqi 9cqi; background: rgba(127, 227, 240, 0.62); transform: rotate(0deg); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
45%, 78.6% { border-radius: 50% 50% 46% 46% / 62% 62% 40% 40%; background: rgba(214, 200, 255, 0.68); transform: rotate(-2.5deg); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
92.9%, 100% { border-radius: 9cqi 9cqi 9cqi 9cqi / 9cqi 9cqi 9cqi 9cqi; background: rgba(127, 227, 240, 0.62); transform: rotate(0deg); }
}
@keyframes pv-gloss-title {
0%, 24.3% { color: #ffffff; text-shadow: 0 0.35cqi 0 rgba(80, 140, 160, 0.9), 0 0 1.4cqi rgba(255, 255, 255, 0.85); }
45%, 78.6% { color: #C8FF00; text-shadow: 0 0.35cqi 0 rgba(110, 80, 170, 0.9), 0 0 1.4cqi rgba(255, 255, 255, 0.85); }
92.9%, 100% { color: #ffffff; text-shadow: 0 0.35cqi 0 rgba(80, 140, 160, 0.9), 0 0 1.4cqi rgba(255, 255, 255, 0.85); }
}
@keyframes pv-gloss-prog {
0%, 24.3% { background-color: #C8FF00; width: 42%; }
45%, 78.6% { background-color: #7FE3F0; width: 58%; }
92.9%, 100% { background-color: #C8FF00; width: 42%; }
}
@keyframes pv-gloss-btn {
0%, 24.3% { background-color: #C0C0C0; transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
45%, 78.6% { background-color: #C8FF00; transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
92.9%, 100% { background-color: #C0C0C0; transform: scale(1); }
}
/* the clicked bubble: press, spring, then take the new skin like the others */
@keyframes pv-gloss-click {
0%, 21.4% { background-color: #C0C0C0; transform: scale(1); }
22.9% { background-color: #A0D2FF; transform: scale(0.82); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
27% { background-color: #C8FF00; transform: scale(1.14); }
31%, 78.6% { background-color: #C8FF00; transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
92.9%, 100% { background-color: #C0C0C0; transform: scale(1); }
}
/* lens flare from the click point: a ring that grows and fades, a streak that widens and fades */
@keyframes pv-gloss-ring {
0%, 22.9% { transform: scale(0); opacity: 0; }
23% { transform: scale(0); opacity: 1; animation-timing-function: cubic-bezier(0.1, 0.7, 0.3, 1); }
40% { transform: scale(1.7); opacity: 0; }
40.1%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes pv-gloss-streak {
0%, 22.9% { transform: scaleX(0); opacity: 0; }
23% { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(0.1, 0.7, 0.3, 1); }
31% { transform: scaleX(1); opacity: 0.95; }
44% { transform: scaleX(1); opacity: 0; }
44.1%, 100% { transform: scaleX(0); opacity: 0; }
}
/* the sparkle burst, staggered by --d; each one is collapsed at both ends */
@keyframes pv-gloss-pop {
0%, 50% { transform: scale(0) rotate(0deg); opacity: 0; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
55% { transform: scale(1.15) rotate(20deg); opacity: 1; }
64% { transform: scale(0.9) rotate(60deg); opacity: 1; animation-timing-function: ease-in; }
70%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
}
}
/* ---- DYSTOPIAN BUREAUCRATIC: select-to-redact; every line you highlight is censored, then WITHHELD stamps down ---- */
/* Previews v2 (2026-09-26), row 19. Poster: a Ministry of Records case form
on institutional grey, CASE № AE/39-C in condensed caps under a drab-green
band, SUBJECT and FINDING fields of typewritten lines, one redaction bar
already in place, two form boxes at the foot. Hero: an I-beam cursor drags
across a finding line, the selection highlight follows it and the instant
the drag ends the line is a black bar; three lines go, then WITHHELD slams
down in stamp red and the sheet thuds. 7s cycle: the stamp lifts at 6.2s
and the three bars are struck off in reverse with clipped, mechanical stops. */
.pv-bureau { background: #8E959B; container-type: inline-size; font-family: "Courier Prime", "Courier New", monospace; }
.pv-bureau__sheet { position: absolute; inset: 3cqi 4cqi; background: #BFC3C7; box-shadow: 0 0.6cqi 0 rgba(0, 0, 0, 0.25); }
.pv-bureau__band { position: absolute; left: 0; right: 0; top: 0; height: 2.2cqi; background: #6B705C; }
.pv-bureau__case { position: absolute; left: 5cqi; top: 4.5cqi; font: 700 8.5cqi/1 "Oswald", Impact, "Arial Narrow", sans-serif; color: #111111; letter-spacing: 0.02em; white-space: nowrap; }
.pv-bureau__hr { position: absolute; left: 5cqi; right: 5cqi; top: 15cqi; height: 0.7cqi; background: #111111; }
.pv-bureau__lbl { position: absolute; left: 5cqi; font: 400 5.6cqi/1 "Courier Prime", "Courier New", monospace; color: #6B705C; letter-spacing: 0.08em; }
.pv-bureau__lblS { top: 18cqi; }
.pv-bureau__lblF { top: 36cqi; }
/* typewritten lines: ink word-blocks with monospaced gaps */
.pv-bureau__ln { position: absolute; left: 5cqi; height: 2.6cqi; opacity: 0.72; background: repeating-linear-gradient(90deg, #111111 0 2.2cqi, transparent 2.2cqi 2.8cqi, #111111 2.8cqi 6.2cqi, transparent 6.2cqi 6.9cqi, #111111 6.9cqi 8.4cqi, transparent 8.4cqi 9.1cqi); }
.pv-bureau__s1 { top: 24cqi; width: 58cqi; }
.pv-bureau__s2 { top: 29cqi; width: 42cqi; background-position: 3cqi 0; }
.pv-bureau__f1 { top: 42cqi; width: 70cqi; background-position: 5cqi 0; }
.pv-bureau__f2 { top: 47cqi; width: 62cqi; background-position: 1.4cqi 0; }
.pv-bureau__f3 { top: 52cqi; width: 48cqi; background-position: 6.5cqi 0; }
/* selection highlights: rest collapsed at the line's left edge */
.pv-bureau__sel { position: absolute; left: 4.5cqi; height: 4.2cqi; background: #6B705C; opacity: 0.55; transform-origin: 0 50%; scale: 0 1; }
.pv-bureau__sel1 { top: 41.3cqi; width: 71cqi; }
.pv-bureau__sel2 { top: 46.3cqi; width: 63cqi; }
.pv-bureau__sel3 { top: 51.3cqi; width: 49cqi; }
/* redaction bars: bar0 is the poster's standing redaction; 1-3 rest hidden */
.pv-bureau__bar { position: absolute; left: 4.5cqi; height: 4.2cqi; background: #111111; opacity: 0; }
.pv-bureau__bar0 { top: 28.3cqi; width: 43cqi; opacity: 1; }
.pv-bureau__bar1 { top: 41.3cqi; width: 71cqi; }
.pv-bureau__bar2 { top: 46.3cqi; width: 63cqi; }
.pv-bureau__bar3 { top: 51.3cqi; width: 49cqi; }
.pv-bureau__foot { position: absolute; left: 5cqi; right: 5cqi; top: 61cqi; height: 0.7cqi; background: #6B705C; }
.pv-bureau__box { position: absolute; top: 63.5cqi; width: 3.8cqi; height: 3.8cqi; box-shadow: inset 0 0 0 0.45cqi #111111; }
.pv-bureau__box1 { left: 76cqi; background: #6B705C; }
.pv-bureau__box2 { left: 83cqi; }
/* the stamp: rests invisible and oversized, mid-air above the findings */
.pv-bureau__stamp { position: absolute; left: 22cqi; top: 33.5cqi; padding: 0.4cqi 2.2cqi; font: 700 12cqi/1.1 "Oswald", Impact, "Arial Narrow", sans-serif; letter-spacing: 0.08em; color: #A4161A; border: 1.1cqi solid #A4161A; mix-blend-mode: multiply; white-space: nowrap; rotate: -9deg; scale: 1.7; opacity: 0; }
/* the I-beam: off-canvas at rest; the poster has no cursor */
.pv-bureau__cur { position: absolute; left: -10cqi; top: 44cqi; width: 0.9cqi; height: 5.5cqi; background: #111111; opacity: 0; }
.pv-bureau__cur::before, .pv-bureau__cur::after { content: ""; position: absolute; left: -1.1cqi; width: 3.1cqi; height: 0.9cqi; background: #111111; }
.pv-bureau__cur::before { top: 0; }
.pv-bureau__cur::after { bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
.pv-bureau__cur { animation: pv-bureau-cur 7s linear infinite; }
.pv-bureau__sel1 { animation: pv-bureau-sel1 7s linear infinite; }
.pv-bureau__sel2 { animation: pv-bureau-sel2 7s linear infinite; }
.pv-bureau__sel3 { animation: pv-bureau-sel3 7s linear infinite; }
.pv-bureau__bar1 { animation: pv-bureau-bar1 7s steps(1) infinite; }
.pv-bureau__bar2 { animation: pv-bureau-bar2 7s steps(1) infinite; }
.pv-bureau__bar3 { animation: pv-bureau-bar3 7s steps(1) infinite; }
.pv-bureau__stamp { animation: pv-bureau-stamp 7s infinite; }
.pv-bureau__sheet { animation: pv-bureau-thud 7s infinite; }
/* three drags, left to right, with a dead stop at the end of each line */
@keyframes pv-bureau-cur {
0%, 21.3% { left: -10cqi; top: 44cqi; opacity: 0; }
21.4% { left: 8.5cqi; top: 44cqi; opacity: 1; }
32.9% { left: 79.5cqi; top: 44cqi; }
33%, 37.1% { left: 8.5cqi; top: 49cqi; }
48.6% { left: 71.5cqi; top: 49cqi; }
48.7%, 52.9% { left: 8.5cqi; top: 54cqi; }
64.3%, 67% { left: 57.5cqi; top: 54cqi; opacity: 1; }
67.1%, 100% { left: -10cqi; top: 44cqi; opacity: 0; }
}
/* highlight grows under the cursor, holds a beat, is replaced by the bar */
@keyframes pv-bureau-sel1 { 0%, 21.4% { scale: 0 1; } 32.9%, 34.3% { scale: 1 1; } 34.4%, 100% { scale: 0 1; } }
@keyframes pv-bureau-sel2 { 0%, 37.1% { scale: 0 1; } 48.6%, 50% { scale: 1 1; } 50.1%, 100% { scale: 0 1; } }
@keyframes pv-bureau-sel3 { 0%, 52.9% { scale: 0 1; } 64.3%, 65.7% { scale: 1 1; } 65.8%, 100% { scale: 0 1; } }
@keyframes pv-bureau-bar1 { 0% { opacity: 0; } 34.3% { opacity: 1; } 97.1%, 100% { opacity: 0; } }
@keyframes pv-bureau-bar2 { 0% { opacity: 0; } 50% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes pv-bureau-bar3 { 0% { opacity: 0; } 65.7% { opacity: 1; } 92.9%, 100% { opacity: 0; } }
/* the stamp drops from 1.7x to 1x in 0.15s, sits, then lifts */
@keyframes pv-bureau-stamp {
0%, 71.3% { opacity: 0; scale: 1.7; }
71.4% { opacity: 1; scale: 1.7; animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6); }
73.5% { scale: 0.96; }
74.5%, 88.6% { scale: 1; opacity: 1; animation-timing-function: ease-in; }
90.6% { scale: 1.3; opacity: 0; }
100% { opacity: 0; scale: 1.7; }
}
@keyframes pv-bureau-thud {
0%, 73.4% { translate: 0 0; }
73.6% { translate: 0 0.7cqi; }
74.6%, 100% { translate: 0 0; }
}
}
/* ---- WEB 1.0: dial-up load — the photo sharpens in interlaced passes, the counter ticks, the link goes visited ---- */
/* Previews v2 (2026-09-26), row 64. Resting frame IS the poster: a silver
bevelled table centred on a tiled starfield, a Times heading, a photo of
a sun over hills still in its first blurry interlaced pass with scanlines,
a yellow NEW! starburst wobbling like a two-frame GIF, a blue underlined
guestbook link, a black hit counter, and an under-construction stripe.
Hero: the progressive load. The photo jumps sharper in four stepped passes
and the scanlines clear; the counter's last digit rolls 7 to 8; the link
turns visited purple. Then the page reloads: a hard cut to frame 0. 7s.
The NEW! wobble is the one component-rate loop; a GIF flips faster. */
.pv-web1 { container-type: inline-size; font-family: "Times New Roman", Times, Georgia, serif; background: #000000; }
/* the tiled starfield lives on a child: cqi on the root would resolve against the viewport */
.pv-web1__stars { position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,") 0 0 / 12cqi 12cqi; }
.pv-web1__table {
position: absolute; left: 8cqi; top: 5cqi; width: 84cqi; height: 65cqi; box-sizing: border-box; overflow: hidden;
background: #C0C0C0; border: 1cqi solid; border-color: #FFFFFF #6A6A6A #6A6A6A #FFFFFF;
}
.pv-web1__h { position: absolute; left: 0; right: 0; top: 1.6cqi; margin: 0; text-align: center; font: 700 6cqi/1.1 "Times New Roman", Times, serif; color: #000000; }
/* the photo: a sun over two hills, drawn flat, held in its first blurry pass */
.pv-web1__pic { position: absolute; left: 3cqi; top: 11cqi; width: 36cqi; height: 27cqi; box-sizing: border-box; overflow: hidden; border: 0.7cqi solid; border-color: #6A6A6A #FFFFFF #FFFFFF #6A6A6A; background: #000000; }
.pv-web1__scene {
position: absolute; inset: -6%;
background:
radial-gradient(circle at 68% 34%, #FFFF00 0 16%, transparent 17%),
radial-gradient(ellipse at 20% 100%, #551A8B 0 46%, transparent 47%),
radial-gradient(ellipse at 78% 104%, #551A8B 0 40%, transparent 41%),
linear-gradient(#0000EE 0 64%, #C0C0C0 64% 100%);
filter: blur(2.2cqi);
}
.pv-web1__lines { position: absolute; inset: 0; opacity: 0.6; background: repeating-linear-gradient(to bottom, #000000 0 0.5cqi, transparent 0.5cqi 1.3cqi); }
/* the NEW! starburst */
.pv-web1__new {
position: absolute; left: 62cqi; top: 10cqi; width: 17cqi; height: 17cqi; display: grid; place-items: center;
background: #FFFF00; color: #000000; font: 700 4.4cqi/1 "Comic Sans MS", "Comic Sans", Verdana, "Trebuchet MS", sans-serif; letter-spacing: -0.04em;
clip-path: polygon(50% 0, 61% 14%, 77% 7%, 79% 24%, 96% 27%, 86% 41%, 100% 50%, 86% 59%, 96% 73%, 79% 76%, 77% 93%, 61% 86%, 50% 100%, 39% 86%, 23% 93%, 21% 76%, 4% 73%, 14% 59%, 0 50%, 14% 41%, 4% 27%, 21% 24%, 23% 7%, 39% 14%);
transform: rotate(-10deg);
}
.pv-web1__link { position: absolute; left: 47cqi; top: 32cqi; font: 5.4cqi/1 "Times New Roman", Times, serif; color: #0000EE; text-decoration: underline; white-space: nowrap; }
/* hit counter: black box, yellow mono digits, the last one an odometer window */
.pv-web1__count {
position: absolute; left: 3cqi; top: 42cqi; height: 8cqi; padding: 0 1.4cqi; display: flex; align-items: center;
background: #000000; color: #FFFF00; font: 700 6cqi/1 "PvSpaceMono", "Courier New", monospace; letter-spacing: 0.08em; border: 0.5cqi solid #6A6A6A;
}
.pv-web1__odo { display: inline-block; height: 6cqi; overflow: hidden; font-style: normal; vertical-align: top; }
.pv-web1__col { display: block; line-height: 6cqi; transform: translate(0, 0); }
.pv-web1__uc { position: absolute; left: 0; right: 0; bottom: 0; height: 4.5cqi; background: repeating-linear-gradient(45deg, #FFFF00 0 3cqi, #000000 3cqi 6cqi); }
@media (prefers-reduced-motion: no-preference) {
.pv-web1__scene { animation: pv-web1-pass 7s steps(1) infinite; }
.pv-web1__lines { animation: pv-web1-lines 7s steps(1) infinite; }
.pv-web1__col { animation: pv-web1-tick 7s steps(1) infinite; }
.pv-web1__link { animation: pv-web1-visited 7s steps(1) infinite; }
.pv-web1__new { animation: pv-web1-gif 0.8s steps(1) infinite; } /* component-rate: a two-frame animated GIF badge; a NEW! that flips slower than 1Hz reads as a broken image */
/* four interlaced passes, each a hard jump sharper; reload at the end */
@keyframes pv-web1-pass {
0% { filter: blur(2.2cqi); }
14% { filter: blur(1.5cqi); }
28% { filter: blur(0.9cqi); }
43% { filter: blur(0.4cqi); }
58% { filter: blur(0cqi); }
100% { filter: blur(2.2cqi); }
}
@keyframes pv-web1-lines {
0% { opacity: 0.6; }
28% { opacity: 0.35; }
58% { opacity: 0; }
100% { opacity: 0.6; }
}
/* the last digit rolls up one place */
@keyframes pv-web1-tick {
0% { transform: translate(0, 0); }
74% { transform: translate(0, -6cqi); }
100% { transform: translate(0, 0); }
}
@keyframes pv-web1-visited {
0% { color: #0000EE; }
84% { color: #551A8B; }
100% { color: #0000EE; }
}
@keyframes pv-web1-gif {
0% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
100% { transform: rotate(-10deg); }
}
}
/* ---- ARCHIVAL: pick a letter on the A–Z rail and the drawer re-files itself ---- */
/* Previews v2 (2026-09-26), row 5. Resting frame IS the poster: six index
cards in two rows on archival board, each with its catalogue-red head
rule, a big file letter and a call number; an A–F rail down the left edge
is the site's alphabetical filter. Hero: the rail's C goes red, the three
non-C cards slide out of the drawer and the three C cards re-file into the
top row with a papery over-rotate tick as they land; the filtered set
holds and one card lifts off the board (the hover state). The selection
clears and every card slides back into its frame-0 slot. 7s cycle. */
.pv-file { background: #D9D4C7; container-type: inline-size; font-family: "Courier Prime", "Courier New", monospace; }
.pv-file__rail {
position: absolute; left: 0; top: 0; bottom: 0; width: 14cqi; margin: 0; padding: 0; list-style: none;
display: flex; flex-direction: column; justify-content: center; gap: 1.6cqi;
background: #CFC9BA; border-right: 0.3cqi solid rgba(26, 26, 26, 0.18);
}
.pv-file__key { font-size: 6cqi; line-height: 1; color: #1A1A1A; text-align: center; opacity: 0.6; }
.pv-file__pick { opacity: 1; color: #1A1A1A; }
/* the red selection bar beside C: not in the poster */
.pv-file__mark { position: absolute; left: 0; top: 30.2cqi; width: 1.4cqi; height: 7.4cqi; background: #A3302B; opacity: 0; }
/* index cards: --rx/--ry are the frame-0 slot, --fx/--fy the filtered slot (keep cards only) */
.pv-file__card {
position: absolute; left: calc(var(--rx) * 1cqi); top: calc(var(--ry) * 1cqi); width: 24cqi; height: 30cqi;
box-sizing: border-box; padding: 6cqi 2cqi 0;
background: #EFE6D2; border-radius: 0.5cqi; box-shadow: 0 0.5cqi 0 rgba(26, 26, 26, 0.16);
--dx: calc((var(--fx, var(--rx)) - var(--rx)) * 1cqi);
--dy: calc((var(--fy, var(--ry)) - var(--ry)) * 1cqi);
}
.pv-file__card::before { content: ""; position: absolute; left: 0; right: 0; top: 4.2cqi; height: 0.7cqi; background: #A3302B; }
.pv-file__card::after {
content: ""; position: absolute; left: 0; right: 0; top: 20cqi; bottom: 0; pointer-events: none;
background: repeating-linear-gradient(to bottom, transparent 0 4.4cqi, rgba(26, 26, 26, 0.16) 4.4cqi 4.9cqi);
}
.pv-file__card b { display: block; font: 700 12cqi/1 "Courier Prime", "Courier New", monospace; color: #1A1A1A; }
.pv-file__card span { display: block; margin-top: 1.6cqi; font: 5.2cqi/1 Georgia, "Times New Roman", serif; color: #1A1A1A; letter-spacing: 0.02em; }
.pv-file__keep { z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
.pv-file__pick { animation: pv-file-pick 7s steps(1) infinite; }
.pv-file__mark { animation: pv-file-mark 7s steps(1) infinite; }
.pv-file__keep { animation: pv-file-keep 7s infinite; }
.pv-file__lift { animation: pv-file-keep 7s infinite, pv-file-lift 7s infinite; }
.pv-file__drop { animation: pv-file-drop 7s infinite; animation-delay: var(--d); }
/* the rail letter goes catalogue red while the filter is on */
@keyframes pv-file-pick {
0%, 20% { color: #1A1A1A; }
21%, 84% { color: #A3302B; }
85%, 100% { color: #1A1A1A; }
}
@keyframes pv-file-mark {
0%, 20% { opacity: 0; }
21%, 84% { opacity: 1; }
85%, 100% { opacity: 0; }
}
/* matching cards re-file: slide to the filtered slot, over-rotate a hair
as they land (the papery tick), settle, hold, then slide home */
@keyframes pv-file-keep {
0%, 24% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(0.25, 0.7, 0.2, 1); }
46% { transform: translate(var(--dx), var(--dy)) rotate(1.6deg); animation-timing-function: ease-out; }
50%, 84% { transform: translate(var(--dx), var(--dy)) rotate(0deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
96%, 100% { transform: translate(0, 0) rotate(0deg); }
}
/* one filtered card lifts off the board: the hover state on a result */
@keyframes pv-file-lift {
0%, 60% { translate: 0 0; box-shadow: 0 0.5cqi 0 rgba(26, 26, 26, 0.16); animation-timing-function: ease-out; }
64%, 76% { translate: 0 -1.6cqi; box-shadow: 0 2.4cqi 1.4cqi rgba(26, 26, 26, 0.22); animation-timing-function: ease-in-out; }
80%, 100% { translate: 0 0; box-shadow: 0 0.5cqi 0 rgba(26, 26, 26, 0.16); }
}
/* non-matching cards slide out of the bottom of the drawer and come back
at the end; staggered 0.12s so the drawer empties in order */
@keyframes pv-file-drop {
0%, 26% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.6); }
48%, 84% { transform: translate(3cqi, 82cqi) rotate(-5deg); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
96%, 100% { transform: translate(0, 0) rotate(0deg); }
}
}
/* ---- CARTOGRAPHIC: toggling the legend draws the route and the map travels along it ---- */
/* Previews v2 (2026-09-26), row 10. Resting frame IS the poster: a parchment
contour map, river in water blue, grid coordinates on the edges, a legend
panel (depth / route) and a coordinate readout. Hero: the legend's "route"
swatch toggles on, a red route draws itself across the contours while the
whole map pans along it and the readout's last digit ticks; the route ends
on a marker that opens a small place card. Measured, steady travel. 7s;
the card closes, the route fades and the view eases back to frame 0. */
.pv-terrain { background: #EFE6D2; container-type: inline-size; font-kerning: normal; }
/* the map is oversized so the pan never shows an edge; it is the thing that travels */
.pv-terrain__map { position: absolute; left: -15%; top: -15%; width: 130%; height: 130%; translate: 0 0; }
.pv-terrain__map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pv-terrain__water { fill: #6FA3B8; opacity: 0.45; }
.pv-terrain__shore { fill: none; stroke: #6FA3B8; stroke-width: 1.6; }
.pv-terrain__contours path { fill: none; stroke: #8B6B4A; stroke-width: 1.3; }
.pv-terrain__contours path:nth-child(odd) { stroke-width: 0.8; opacity: 0.8; }
/* the route: full length hidden behind its own dash offset at rest */
.pv-terrain__route { fill: none; stroke: #C0392B; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 1; }
.pv-terrain__mark { fill: #C0392B; stroke: #EFE6D2; stroke-width: 2; transform-box: fill-box; transform-origin: 50% 50%; scale: 0; }
/* the place card grows out of the marker; no drop shadow, a ruled map label */
.pv-terrain__card { position: absolute; left: 64.5%; top: 47.3%; translate: calc(-100% - 1.5cqi) -108%; padding: 1.4cqi 2.4cqi; background: #EFE6D2; border: 0.4cqi solid #C0392B; white-space: nowrap; transform-origin: 100% 100%; scale: 0; }
.pv-terrain__card em { display: block; font: italic 500 7cqi/1.1 "Cormorant Garamond", "Times New Roman", serif; color: #5A7D5A; }
.pv-terrain__card b { display: block; font: 500 5.8cqi/1.2 "Oswald", "Arial Narrow", Impact, sans-serif; letter-spacing: 0.06em; color: #8B6B4A; }
/* grid coordinates ride the frame, not the map */
.pv-terrain__gx { position: absolute; top: 1.5%; left: 9%; right: 52%; display: flex; justify-content: space-between; font: 500 5.8cqi/1 "Oswald", "Arial Narrow", Impact, sans-serif; letter-spacing: 0.05em; color: #8B6B4A; }
.pv-terrain__gy { position: absolute; left: 2%; top: 14%; bottom: 28%; display: flex; flex-direction: column; justify-content: space-between; font: 500 5.8cqi/1 "Oswald", "Arial Narrow", Impact, sans-serif; letter-spacing: 0.05em; color: #8B6B4A; }
.pv-terrain__brand { position: absolute; top: 1.5%; right: 4%; margin: 0; font: 400 5.5cqi/1 "PvMarcellus", Palatino, serif; letter-spacing: 0.22em; color: #5A7D5A; }
.pv-terrain__legend { position: absolute; right: 4%; bottom: 6%; display: grid; gap: 0.8cqi; padding: 1.8cqi 2.6cqi; background: rgba(239, 230, 210, 0.94); border: 0.5cqi solid #8B6B4A; font: italic 500 7cqi/1.1 "Cormorant Garamond", "Times New Roman", serif; color: #8B6B4A; }
.pv-terrain__legend span { display: flex; align-items: center; gap: 1.6cqi; }
.pv-terrain__sw { width: 3.6cqi; height: 3.6cqi; box-sizing: border-box; }
.pv-terrain__sw--depth { background: #6FA3B8; }
.pv-terrain__sw--route { border: 0.5cqi solid #C0392B; background: rgba(192, 57, 43, 0); }
/* the readout: a clipped odometer column for the last digit */
.pv-terrain__read { position: absolute; left: 4%; bottom: 6%; padding: 1.4cqi 2.4cqi; background: rgba(239, 230, 210, 0.94); border: 0.5cqi solid #8B6B4A; font: 500 6cqi/1 "Oswald", "Arial Narrow", Impact, sans-serif; letter-spacing: 0.08em; color: #8B6B4A; white-space: nowrap; }
.pv-terrain__odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.pv-terrain__odo i { display: block; font-style: normal; line-height: 1; translate: 0 0; }
@media (prefers-reduced-motion: no-preference) {
.pv-terrain__sw--route { animation: pv-terrain-toggle 7s steps(1, end) infinite; }
.pv-terrain__route { animation: pv-terrain-draw 7s infinite; }
.pv-terrain__map { animation: pv-terrain-pan 7s infinite; }
.pv-terrain__odo i { animation: pv-terrain-tick 7s infinite; }
.pv-terrain__mark { animation: pv-terrain-mark 7s infinite; }
.pv-terrain__card { animation: pv-terrain-card 7s infinite; }
/* the legend swatch fills the instant the filter is switched on */
@keyframes pv-terrain-toggle {
0% { background: rgba(192, 57, 43, 0); }
14% { background: rgba(192, 57, 43, 1); }
100% { background: rgba(192, 57, 43, 0); }
}
/* draw 1s to 5s, hold under the card, fade, then jump back to hidden while invisible */
@keyframes pv-terrain-draw {
0%, 14% { stroke-dashoffset: 100; opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
71%, 86% { stroke-dashoffset: 0; opacity: 1; }
98% { stroke-dashoffset: 0; opacity: 0; animation-timing-function: steps(1, end); }
100% { stroke-dashoffset: 100; opacity: 1; }
}
/* the view travels with the route and eases home */
@keyframes pv-terrain-pan {
0%, 14% { translate: 0 0; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
71%, 86% { translate: -8cqi -6cqi; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { translate: 0 0; }
}
/* nine ticks up while travelling, a smooth run back down with the view */
@keyframes pv-terrain-tick {
0%, 14% { translate: 0 0; animation-timing-function: steps(9, end); }
71%, 86% { translate: 0 -9em; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { translate: 0 0; }
}
@keyframes pv-terrain-mark {
0%, 68% { scale: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.3); }
72% { scale: 1.25; }
75%, 86% { scale: 1; }
90%, 100% { scale: 0; }
}
@keyframes pv-terrain-card {
0%, 72% { scale: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.15); }
78%, 86% { scale: 1; animation-timing-function: ease-in; }
91%, 100% { scale: 0; }
}
}
/* ---- GOOGIE: boomerangs swoop in on arcs and dock as the nav; the neon stutters on ---- */
/* Previews v2 (2026-09-26), row 25. Resting frame IS the poster: Orbit Diner's
roadside sign at turquoise dusk — a cream panel on an angled baseline with
ORBIT in shaded marquee caps, a pink kite roof on a tilted pole, three
atomic starbursts, "Googie" in glowing neon script, an unlit OPEN tube and
an empty cream canopy rail along the bottom. The hero moment: three fat
boomerangs swoop in from the left on arcs (x eases out, y eases in, so the
path curves), bounce onto the rail and hold as nav tabs with their labels
on angled baselines; the big starburst flares and the OPEN tube stutters
on. 6s cycle; the tabs lift off to the right and the neon dims to frame 0.
Type: Pacifico for the neon script, Righteous for the ORBIT sign, the OPEN
tube and the nav tabs. */
.pv-roadside { background: #3FC1C9; container-type: inline-size; }
.pv-roadside__rail { position: absolute; left: 0; bottom: 0; width: 100%; height: 12cqi; background: #FFF4E0; }
.pv-roadside__rail::before { content: ""; position: absolute; left: 0; right: 0; top: -1.4cqi; height: 1.4cqi; background: #F26B38; }
.pv-roadside__pole { position: absolute; left: 30cqi; top: 24cqi; width: 2cqi; height: 42cqi; background: #1A1A1A; transform-origin: 50% 0; transform: rotate(-7deg); }
/* the sign: one tilted container so the roof and panel share a baseline */
.pv-roadside__signage { position: absolute; left: 6cqi; top: 4cqi; width: 52cqi; height: 30cqi; transform: rotate(-7deg); }
.pv-roadside__roof { position: absolute; left: 2cqi; top: 0; width: 40cqi; height: 10cqi; background: #F7A8B8; clip-path: polygon(0 100%, 100% 100%, 72% 0); }
.pv-roadside__sign { position: absolute; left: 0; top: 9.4cqi; width: 52cqi; margin: 0; padding: 3.2cqi 0 3.6cqi; background: #FFF4E0; text-align: center; font: 400 13cqi/1 "Righteous", Impact, "Arial Black", sans-serif; color: #F26B38; letter-spacing: 0.06em; clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); }
.pv-roadside__script { position: absolute; left: 53cqi; top: 26cqi; margin: 0; font: 400 11.5cqi/1 "Pacifico", Georgia, serif; color: #FFF4E0; text-shadow: 0 0 0.8cqi #F7A8B8, 0 0 2.5cqi #F7A8B8, 0 0 5cqi rgba(247, 168, 184, 0.7); transform: rotate(-8deg); white-space: nowrap; }
/* the OPEN tube: outlined glass at rest, lit only in the hero */
.pv-roadside__open { position: absolute; left: 63cqi; top: 44cqi; margin: 0; padding: 1.2cqi 2cqi; border: 0.6cqi solid #FFF4E0; border-radius: 1.5cqi; font: 400 5.6cqi/1 "Righteous", "Trebuchet MS", sans-serif; letter-spacing: 0.2em; color: transparent; -webkit-text-stroke: 0.22cqi rgba(255, 244, 224, 0.6); text-shadow: none; }
/* starbursts: two crossed bars, a rotated copy on ::before, a centre dot on ::after */
.pv-roadside__star { position: absolute; background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 9% no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 9% 100% no-repeat; transform: scale(1) rotate(0deg); }
.pv-roadside__star::before { content: ""; position: absolute; inset: 0; background: inherit; transform: rotate(45deg) scale(0.72); }
.pv-roadside__star::after { content: ""; position: absolute; left: 38%; top: 38%; width: 24%; height: 24%; border-radius: 50%; background: currentColor; }
.pv-roadside__star--a { right: 6cqi; top: 4cqi; width: 16cqi; height: 16cqi; color: #FFF4E0; }
.pv-roadside__star--b { left: 60cqi; top: 12cqi; width: 8cqi; height: 8cqi; color: #F26B38; }
.pv-roadside__star--c { left: 2cqi; top: 44cqi; width: 7cqi; height: 7cqi; color: #F7A8B8; }
/* the tabs: an x-track wrapper and a y-track boomerang, both off-canvas at rest */
.pv-roadside__fly { position: absolute; bottom: 3cqi; width: 20cqi; height: 12cqi; transform: translateX(-100cqi); }
.pv-roadside__fly--1 { left: 9cqi; }
.pv-roadside__fly--2 { left: 40cqi; }
.pv-roadside__fly--3 { left: 71cqi; }
.pv-roadside__boom { position: absolute; left: 0; bottom: 0; width: 20cqi; height: 20cqi; box-sizing: border-box; border: 3.6cqi solid transparent; border-top-color: #F26B38; border-radius: 50%; transform: translateY(-40cqi) rotate(-220deg); }
.pv-roadside__fly--2 .pv-roadside__boom { border-top-color: #F7A8B8; }
.pv-roadside__fly--3 .pv-roadside__boom { border-top-color: #1A1A1A; }
.pv-roadside__tab { position: absolute; left: 0; right: 0; top: 4.2cqi; text-align: center; text-decoration: none; font: 400 5.2cqi/1 "Righteous", "Trebuchet MS", Verdana, sans-serif; letter-spacing: 0.04em; color: #FFF4E0; }
.pv-roadside__fly--1 .pv-roadside__tab { text-decoration: underline; text-decoration-thickness: 0.7cqi; text-underline-offset: 0.9cqi; text-decoration-color: #F26B38; }
@media (prefers-reduced-motion: no-preference) {
.pv-roadside__fly { animation: pv-roadside-x 6s infinite; }
.pv-roadside__boom { animation: pv-roadside-y 6s infinite; }
.pv-roadside__fly--2, .pv-roadside__fly--2 .pv-roadside__boom { animation-delay: 0.3s; }
.pv-roadside__fly--3, .pv-roadside__fly--3 .pv-roadside__boom { animation-delay: 0.6s; }
.pv-roadside__star--a { animation: pv-roadside-flare 6s infinite; }
.pv-roadside__open { animation: pv-roadside-neon 6s infinite; }
/* x: fast in, slow to dock (ease-out); leaves with an ease-in; the reset jump is off-canvas both sides */
@keyframes pv-roadside-x {
0%, 17% { transform: translateX(-100cqi); animation-timing-function: cubic-bezier(0.1, 0.6, 0.3, 1); }
38%, 78% { transform: translateX(0); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
88% { transform: translateX(110cqi); }
88.1%, 100% { transform: translateX(-100cqi); }
}
/* y: hangs high then drops (ease-in), so with x the path arcs; two-bounce landing, spin as it goes */
@keyframes pv-roadside-y {
0%, 17% { transform: translateY(-40cqi) rotate(-220deg); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.6); }
34% { transform: translateY(0) rotate(-12deg); animation-timing-function: ease-out; }
37% { transform: translateY(-3cqi) rotate(-6deg); animation-timing-function: ease-in; }
40%, 78% { transform: translateY(0) rotate(-12deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
88% { transform: translateY(-36cqi) rotate(120deg); }
88.1%, 100% { transform: translateY(-40cqi) rotate(-220deg); }
}
@keyframes pv-roadside-flare {
0%, 52% { transform: scale(1) rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1.4); }
58% { transform: scale(1.5) rotate(30deg); animation-timing-function: ease-in-out; }
66%, 100% { transform: scale(1) rotate(0deg); }
}
/* the tube: three stutters, then on; a slow dim at the end */
@keyframes pv-roadside-neon {
0%, 57% { color: transparent; text-shadow: none; border-color: #FFF4E0; }
58%, 59% { color: #FFF4E0; text-shadow: 0 0 0.8cqi #F26B38, 0 0 2.4cqi #F26B38; border-color: #F26B38; }
60%, 61.5% { color: transparent; text-shadow: none; border-color: #FFF4E0; }
62%, 63% { color: #FFF4E0; text-shadow: 0 0 0.8cqi #F26B38, 0 0 2.4cqi #F26B38; border-color: #F26B38; }
64%, 65% { color: transparent; text-shadow: none; border-color: #FFF4E0; }
66%, 88% { color: #FFF4E0; text-shadow: 0 0 0.8cqi #F26B38, 0 0 2.4cqi #F26B38; border-color: #F26B38; }
94%, 100% { color: transparent; text-shadow: none; border-color: #FFF4E0; }
}
}
/* ---- POP ART: hovering the can sends a shockwave through the Ben-Day dots and pops a WHAM! bubble ---- */
/* Previews v2 (2026-09-26), row 43. Resting frame IS the poster: a comic-panel
soda can — blue body, thick black outline, white label band with POP in
Anton — on a field of red Ben-Day dots over yellow, with a white speech
bubble reading FIZZ? The hero moment: a cursor lands on the can and
clicks; the dot field is four concentric masked rings scaling from the can's
centre with a staggered delay, so the dots swell and shrink outward as a
ripple; the FIZZ? bubble collapses and a red spiked WHAM! tooltip bursts
out of the can and holds. 6s cycle; the dots settle, WHAM! shrinks away,
FIZZ? pops back, the cursor leaves — frame 0. Type: Bangers for the SFX
(FIZZ?, WHAM!), Anton for the POP wordmark. */
.pv-benday { background: #FFED00; container-type: inline-size; }
/* the dot field: one tile, four rings, each masked to an annulus around the can */
.pv-benday__ring { position: absolute; inset: 0; pointer-events: none; }
.pv-benday__ring b { position: absolute; inset: -30cqi; display: block; background: radial-gradient(circle, #FF0000 0 1.5cqi, transparent 1.7cqi) 0 0 / 5cqi 5cqi; transform-origin: 60cqi 70cqi; transform: scale(1); }
.pv-benday__ring--1 { -webkit-mask-image: radial-gradient(circle at 30cqi 40cqi, #000 0 17cqi, transparent 17.2cqi); mask-image: radial-gradient(circle at 30cqi 40cqi, #000 0 17cqi, transparent 17.2cqi); }
.pv-benday__ring--2 { -webkit-mask-image: radial-gradient(circle at 30cqi 40cqi, transparent 0 17cqi, #000 17.2cqi 34cqi, transparent 34.2cqi); mask-image: radial-gradient(circle at 30cqi 40cqi, transparent 0 17cqi, #000 17.2cqi 34cqi, transparent 34.2cqi); }
.pv-benday__ring--3 { -webkit-mask-image: radial-gradient(circle at 30cqi 40cqi, transparent 0 34cqi, #000 34.2cqi 51cqi, transparent 51.2cqi); mask-image: radial-gradient(circle at 30cqi 40cqi, transparent 0 34cqi, #000 34.2cqi 51cqi, transparent 51.2cqi); }
.pv-benday__ring--4 { -webkit-mask-image: radial-gradient(circle at 30cqi 40cqi, transparent 0 51cqi, #000 51.2cqi); mask-image: radial-gradient(circle at 30cqi 40cqi, transparent 0 51cqi, #000 51.2cqi); }
/* the can */
.pv-benday__can { position: absolute; left: 18cqi; top: 13cqi; width: 24cqi; height: 54cqi; box-sizing: border-box; border: 1.5cqi solid #000000; border-radius: 4cqi / 3cqi; background: #0066FF; transform: scale(1); }
.pv-benday__can::before { content: ""; position: absolute; left: 2.2cqi; top: 4cqi; width: 2.6cqi; height: 42cqi; border-radius: 1.3cqi; background: #FFFFFF; }
.pv-benday__lid { position: absolute; left: -1.5cqi; right: -1.5cqi; top: -1.5cqi; height: 5cqi; box-sizing: border-box; border: 1.5cqi solid #000000; border-radius: 4cqi / 3cqi 3cqi 0 0; background: #FFFFFF; }
.pv-benday__label { position: absolute; left: -1.5cqi; right: -1.5cqi; top: 30%; height: 38%; box-sizing: border-box; border-top: 1.5cqi solid #000000; border-bottom: 1.5cqi solid #000000; background: #FFFFFF; display: grid; place-items: center; font: 400 11cqi/1 "PvAnton", Impact, sans-serif; color: #FF0000; letter-spacing: 0.02em; }
/* the resting bubble: an oval with a two-layer tail (black rim, white fill) */
.pv-benday__bubble { position: absolute; left: 50cqi; top: 8cqi; width: 40cqi; height: 24cqi; margin: 0; box-sizing: border-box; border: 1.5cqi solid #000000; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; font: 400 11.5cqi/1 "Bangers", Impact, "Arial Black", sans-serif; letter-spacing: 0.04em; color: #000000; transform-origin: 12% 92%; transform: scale(1); }
.pv-benday__bubble::before { content: ""; position: absolute; left: 4cqi; bottom: -7.2cqi; width: 8cqi; height: 8cqi; background: #000000; clip-path: polygon(0 0, 100% 0, 15% 100%); }
.pv-benday__bubble::after { content: ""; position: absolute; left: 5.4cqi; bottom: -4.6cqi; width: 5.4cqi; height: 5.6cqi; background: #FFFFFF; clip-path: polygon(0 0, 100% 0, 15% 100%); }
/* the tooltip: a 22-point burst, black rim, red fill on ::before, folded to nothing at rest */
.pv-benday__wham { position: absolute; left: 34cqi; top: 10cqi; width: 58cqi; height: 46cqi; margin: 0; background: #000000; clip-path: polygon(50% 0%, 60% 18%, 78% 6%, 76% 26%, 100% 24%, 84% 42%, 100% 58%, 80% 62%, 90% 86%, 68% 76%, 62% 100%, 50% 82%, 36% 98%, 32% 78%, 10% 90%, 20% 66%, 0% 62%, 16% 46%, 2% 30%, 24% 28%, 18% 6%, 38% 18%); display: grid; place-items: center; font: 400 17cqi/1 "Bangers", Impact, "Arial Black", sans-serif; color: #FFED00; letter-spacing: 0.06em; -webkit-text-stroke: 0.3cqi #000000; text-shadow: 0.6cqi 0.6cqi 0 #000000; transform-origin: 8% 64%; transform: scale(0) rotate(-6deg); opacity: 0; }
.pv-benday__wham::before { content: ""; position: absolute; inset: 2.2cqi; z-index: -1; background: #FF0000; clip-path: polygon(50% 0%, 60% 18%, 78% 6%, 76% 26%, 100% 24%, 84% 42%, 100% 58%, 80% 62%, 90% 86%, 68% 76%, 62% 100%, 50% 82%, 36% 98%, 32% 78%, 10% 90%, 20% 66%, 0% 62%, 16% 46%, 2% 30%, 24% 28%, 18% 6%, 38% 18%); }
/* the cursor: tip at the can's centre when landed; off-canvas at rest */
.pv-benday__cur { position: absolute; left: 30cqi; top: 40cqi; width: 9cqi; height: 11.25cqi; transform-origin: 12% 6%; transform: translate(60cqi, 40cqi) scale(1); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.pv-benday__ring b { animation: pv-benday-swell 6s infinite; }
.pv-benday__ring--2 b { animation-delay: 0.3s; }
.pv-benday__ring--3 b { animation-delay: 0.6s; }
.pv-benday__ring--4 b { animation-delay: 0.9s; }
.pv-benday__can { animation: pv-benday-jolt 6s infinite; }
.pv-benday__bubble { animation: pv-benday-fizz 6s infinite; }
.pv-benday__wham { animation: pv-benday-wham 6s infinite; }
.pv-benday__cur { animation: pv-benday-cur 6s infinite; }
/* one ring's swell; the delays turn four of them into an outward wave */
@keyframes pv-benday-swell {
0%, 26% { transform: scale(1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
32% { transform: scale(1.5); animation-timing-function: ease-in-out; }
39% { transform: scale(0.8); animation-timing-function: ease-out; }
45%, 100% { transform: scale(1); }
}
@keyframes pv-benday-cur {
0%, 15% { transform: translate(60cqi, 40cqi) scale(1); opacity: 0; }
16% { transform: translate(60cqi, 40cqi) scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
24% { transform: translate(0, 0) scale(1); opacity: 1; animation-timing-function: ease-in; }
26% { transform: translate(0, 0) scale(0.8); opacity: 1; animation-timing-function: ease-out; }
28%, 86% { transform: translate(0, 0) scale(1); opacity: 1; animation-timing-function: ease-in; }
94%, 100% { transform: translate(60cqi, 40cqi) scale(1); opacity: 0; }
}
@keyframes pv-benday-jolt {
0%, 25% { transform: scale(1); animation-timing-function: ease-out; }
27% { transform: scale(0.94); animation-timing-function: ease-out; }
31% { transform: scale(1.04); animation-timing-function: ease-in-out; }
35%, 100% { transform: scale(1); }
}
/* FIZZ? collapses to the tail point as WHAM! takes over, and pops back at the end */
@keyframes pv-benday-fizz {
0%, 48% { transform: scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
53%, 88% { transform: scale(0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.3); }
95%, 100% { transform: scale(1); }
}
@keyframes pv-benday-wham {
0%, 50% { transform: scale(0) rotate(-6deg); opacity: 0; }
50.5% { transform: scale(0) rotate(-6deg); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.4); }
56% { transform: scale(1.12) rotate(-6deg); opacity: 1; animation-timing-function: ease-out; }
60%, 87% { transform: scale(1) rotate(-6deg); opacity: 1; animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
92%, 100% { transform: scale(0) rotate(-6deg); opacity: 0; }
}
}
/* ---- MOD: infinite zoom through the roundel; every ring becomes the next page's colour field ---- */
/* Previews v2 (2026-09-26), row 37. Poster: a concentric red-white-navy
target filling the card behind a black site header (logo dot, three nav
strokes) and a white band with navy stripes carrying NEW IN in wide bubble
caps. Hero: the camera dives into the bullseye; each ring swells out past
the edges to become the flat field of the next page while the band pulses
and the word lands: NEW IN, VINYL, LIVE. The rings are geometric (ratio
1.6, colours cycling every three) so a zoom of exactly 1.6^3 = 4.096x
lands on the identical target, three times per 6s cycle: frame 0 again. */
.pv-rings { background: #1D3557; container-type: inline-size; font-family: "Chango", "Arial Black", sans-serif; }
/* the target: a 140cqi square centred on the card; rings as hard-stop radial gradient, radii r = 0.61 * 1.6^n */
.pv-rings__target { position: absolute; left: 50%; top: 50%; width: 140cqi; height: 140cqi; margin: -70cqi 0 0 -70cqi; scale: 1; background: radial-gradient(circle, #E63946 0 0.61cqi, #FFFFFF 0.61cqi 0.98cqi, #1D3557 0.98cqi 1.56cqi, #E63946 1.56cqi 2.5cqi, #FFFFFF 2.5cqi 4cqi, #1D3557 4cqi 6.4cqi, #E63946 6.4cqi 10.24cqi, #FFFFFF 10.24cqi 16.38cqi, #1D3557 16.38cqi 26.2cqi, #E63946 26.2cqi 41.9cqi, #FFFFFF 41.9cqi 67.1cqi, #1D3557 67.1cqi 107.4cqi, #E63946 107.4cqi); }
/* the site header stays put through every page change */
.pv-rings__bar { position: absolute; left: 0; right: 0; top: 0; height: 8cqi; background: #111111; }
.pv-rings__bar i { position: absolute; left: 4cqi; top: 2cqi; width: 4cqi; height: 4cqi; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1.1cqi #E63946; }
.pv-rings__bar b { position: absolute; top: 3.2cqi; height: 1.6cqi; width: 8cqi; background: #FFFFFF; }
.pv-rings__bar b:nth-of-type(1) { right: 26cqi; }
.pv-rings__bar b:nth-of-type(2) { right: 15cqi; }
.pv-rings__bar b:nth-of-type(3) { right: 4cqi; background: #E63946; }
/* the striped band and its three words */
.pv-rings__band { position: absolute; left: 0; right: 0; top: 50%; height: 21cqi; margin-top: -8.5cqi; background: #FFFFFF; border-top: 3cqi solid #1D3557; border-bottom: 3cqi solid #1D3557; box-shadow: inset 0 0.9cqi 0 #E63946, inset 0 -0.9cqi 0 #E63946; scale: 1; }
.pv-rings__w { position: absolute; inset: 0; display: grid; place-items: center; font: 400 11cqi/1 "Chango", "Arial Black", sans-serif; color: #E63946; letter-spacing: 0.01em; white-space: nowrap; }
.pv-rings__w2, .pv-rings__w3 { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.pv-rings__target { animation: pv-rings-dive 6s infinite; }
.pv-rings__band { animation: pv-rings-pulse 6s infinite; }
.pv-rings__w1 { animation: pv-rings-w1 6s steps(1) infinite; }
.pv-rings__w2 { animation: pv-rings-w2 6s steps(1) infinite; }
.pv-rings__w3 { animation: pv-rings-w3 6s steps(1) infinite; }
/* three dives of 4.096x; each cut is 0.6ms wide and lands on an identical image */
@keyframes pv-rings-dive {
0% { scale: 1; animation-timing-function: cubic-bezier(0.6, 0, 0.35, 1); }
33.29% { scale: 4.096; }
33.3% { scale: 1; animation-timing-function: cubic-bezier(0.6, 0, 0.35, 1); }
66.62% { scale: 4.096; }
66.63% { scale: 1; animation-timing-function: cubic-bezier(0.6, 0, 0.35, 1); }
99.99% { scale: 4.096; }
100% { scale: 1; }
}
/* the band ducks and springs back as each word lands */
@keyframes pv-rings-pulse {
0% { scale: 1; animation-timing-function: ease-out; }
0.8% { scale: 1 0.9; animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1); }
3.5%, 33.3% { scale: 1; animation-timing-function: ease-out; }
34.1% { scale: 1 0.9; animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1); }
36.8%, 66.6% { scale: 1; animation-timing-function: ease-out; }
67.4% { scale: 1 0.9; animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1); }
70.1%, 100% { scale: 1; }
}
@keyframes pv-rings-w1 { 0% { opacity: 1; } 33.3% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pv-rings-w2 { 0% { opacity: 0; } 33.3% { opacity: 1; } 66.6%, 100% { opacity: 0; } }
@keyframes pv-rings-w3 { 0% { opacity: 0; } 66.6% { opacity: 1; } 100% { opacity: 0; } }
}
/* ---- FLAT DESIGN: tap a tile and its icon morphs, shape to shape, into the next screen ---- */
/* Previews v2 (2026-09-26), row 22, productivity app. Resting frame IS the
poster: six solid icon tiles (red, green, yellow / green, blue, red) on a
cloud ground, each with one white glyph, zero depth anywhere. Hero: a flat
ring taps the blue check tile; the other five slide off in their own
direction while the blue tile grows to fill the card (clip-path inset) and
the white check tweens vertex-for-vertex into a green mountain range, a
yellow sun pops in and the screen reads "Done". Loop: the screen shrinks
back into the tile, the mountains fold back into a check, the tiles slide
home. 6s, slightly bouncy easing, not one shadow or gradient. */
.pv-zero { background: #ECF0F1; container-type: inline-size; font-family: "Lato", "Helvetica", "Arial", sans-serif; }
.pv-zero__tile { position: absolute; width: 24cqi; height: 24cqi; display: grid; place-items: center; translate: 0 0; }
.pv-zero__tile--1 { left: 10cqi; top: 11.5cqi; background: #E74C3C; }
.pv-zero__tile--2 { left: 38cqi; top: 11.5cqi; background: #2ECC71; }
.pv-zero__tile--3 { left: 66cqi; top: 11.5cqi; background: #F1C40F; }
.pv-zero__tile--4 { left: 10cqi; top: 39.5cqi; background: #2ECC71; }
.pv-zero__tile--6 { left: 66cqi; top: 39.5cqi; background: #E74C3C; }
.pv-zero__ic { display: block; width: 11cqi; height: 11cqi; background: #fff; }
.pv-zero__ic--dot { border-radius: 50%; }
.pv-zero__ic--plus { background: linear-gradient(#fff, #fff) center / 100% 26% no-repeat, linear-gradient(#fff, #fff) center / 26% 100% no-repeat; }
.pv-zero__ic--bars { background: linear-gradient(#fff, #fff) 0 100% / 26% 55% no-repeat, linear-gradient(#fff, #fff) 50% 100% / 26% 100% no-repeat, linear-gradient(#fff, #fff) 100% 100% / 26% 75% no-repeat; }
.pv-zero__ic--square { width: 10cqi; height: 10cqi; }
.pv-zero__ic--tri { clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
/* the tap: a flat white ring at the blue tile's centre, invisible at rest */
.pv-zero__tap { position: absolute; left: 50cqi; top: 51.5cqi; width: 22cqi; height: 22cqi; translate: -50% -50%; box-sizing: border-box; border: 1.2cqi solid #fff; border-radius: 50%; opacity: 0; scale: 0.4; }
/* the screen IS the blue tile: full-bleed blue, clipped down to the tile rect at rest */
.pv-zero__screen { position: absolute; inset: 0; background: #3498DB; clip-path: inset(39.5cqi 38cqi calc(100% - 63.5cqi) 38cqi); }
.pv-zero__sun { position: absolute; left: 66cqi; top: 10cqi; width: 16cqi; height: 16cqi; border-radius: 50%; background: #F1C40F; scale: 0; }
/* the glyph: a six-point check at rest; the same six points become the mountains */
.pv-zero__morph {
position: absolute; left: 44cqi; top: 45.5cqi; width: 12cqi; height: 12cqi; background: #fff;
clip-path: polygon(12% 52%, 38% 78%, 90% 26%, 78% 14%, 38% 54%, 24% 40%);
}
.pv-zero__word { position: absolute; left: 8cqi; top: 9cqi; margin: 0; font-weight: 700; font-size: 13cqi; line-height: 1; color: #fff; opacity: 0; translate: 0 2cqi; }
@media (prefers-reduced-motion: no-preference) {
.pv-zero__tile { animation: pv-zero-away 6s infinite; }
.pv-zero__tap { animation: pv-zero-tap 6s infinite; }
.pv-zero__screen { animation: pv-zero-grow 6s infinite; }
.pv-zero__morph { animation: pv-zero-morph 6s infinite; }
.pv-zero__sun { animation: pv-zero-sun 6s infinite; }
.pv-zero__word { animation: pv-zero-word 6s infinite; }
/* 0-1s poster · 1-2.7s tap, slide, grow, morph · 2.7-4.5s screen holds · 4.5-5.5s back · hold */
@keyframes pv-zero-tap {
0%, 15% { opacity: 0; scale: 0.4; }
16% { opacity: 1; scale: 0.4; animation-timing-function: ease-out; }
24% { opacity: 0; scale: 1.3; }
100% { opacity: 0; scale: 0.4; }
}
@keyframes pv-zero-away {
0%, 18% { translate: 0 0; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.6); }
38%, 75% { translate: var(--out); animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
92%, 100% { translate: 0 0; }
}
@keyframes pv-zero-grow {
0%, 18% { clip-path: inset(39.5cqi 38cqi calc(100% - 63.5cqi) 38cqi); animation-timing-function: cubic-bezier(0.34, 1.25, 0.64, 1); }
42%, 75% { clip-path: inset(0cqi 0cqi calc(100% - 100%) 0cqi); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
92%, 100% { clip-path: inset(39.5cqi 38cqi calc(100% - 63.5cqi) 38cqi); }
}
@keyframes pv-zero-morph {
0%, 20% { left: 44cqi; top: 45.5cqi; width: 12cqi; height: 12cqi; background: #fff;
clip-path: polygon(12% 52%, 38% 78%, 90% 26%, 78% 14%, 38% 54%, 24% 40%);
animation-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1); }
45%, 75% { left: 0cqi; top: 38cqi; width: 100cqi; height: 40cqi; background: #2ECC71;
clip-path: polygon(0% 100%, 26% 30%, 50% 72%, 74% 18%, 100% 100%, 50% 100%);
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
92%, 100% { left: 44cqi; top: 45.5cqi; width: 12cqi; height: 12cqi; background: #fff;
clip-path: polygon(12% 52%, 38% 78%, 90% 26%, 78% 14%, 38% 54%, 24% 40%); }
}
@keyframes pv-zero-sun {
0%, 34% { scale: 0; animation-timing-function: cubic-bezier(0.34, 1.6, 0.64, 1); }
48%, 75% { scale: 1; animation-timing-function: ease-in; }
86%, 100% { scale: 0; }
}
@keyframes pv-zero-word {
0%, 40% { opacity: 0; translate: 0 2cqi; animation-timing-function: ease-out; }
50%, 75% { opacity: 1; translate: 0 0; animation-timing-function: ease-in; }
84%, 100% { opacity: 0; translate: 0 2cqi; }
}
}
/* ---- NEO-BRUTALISM: press the button and every card drops into its hard shadow, domino by domino ---- */
/* Previews v2 (2026-09-26), row 40, creator tool. Resting frame IS the poster:
yellow ground, a chunky aqua PRESS button dead centre with a 1.2cqi black
outline and a 2cqi hard black shadow, five outlined candy cards around it
(red, white with three bars, aqua OK, white, a red NEW disc), all sitting up
on their own shadows. Hero: a cursor lands and presses — the button drops
into its shadow, a square outline kicks out from it, and the cards slam down
one after another by distance, each in two frames, no easing, no blur.
Loop: at 5.6s everything pops back up together with a one-frame overshoot
and holds frame 0. 6s, linear. */
.pv-hardshadow { background: #FFDE59; container-type: inline-size; font-family: "Space Grotesk", "Arial Black", "Arial", sans-serif; }
.pv-hardshadow__card { position: absolute; box-sizing: border-box; border: 1.2cqi solid #000; box-shadow: 1.6cqi 1.6cqi 0 #000; translate: 0 0; display: grid; place-items: center; font-weight: 700; font-style: normal; color: #000; }
.pv-hardshadow__card--1 { left: 4cqi; top: 5cqi; width: 22cqi; height: 16cqi; background: #FF5757; }
.pv-hardshadow__card--2 { right: 5cqi; top: 4cqi; width: 24cqi; height: 18cqi; background: #fff; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqi; padding: 0 3cqi; }
.pv-hardshadow__card--2 b { display: block; height: 1.6cqi; background: #000; }
.pv-hardshadow__card--3 { left: 5cqi; bottom: 6cqi; width: 20cqi; height: 16cqi; background: #5CE1E6; font-size: 7cqi; }
.pv-hardshadow__card--4 { right: 6cqi; bottom: 5cqi; width: 18cqi; height: 14cqi; background: #fff; }
.pv-hardshadow__card--5 { left: 74cqi; top: 29cqi; width: 17cqi; height: 17cqi; border-radius: 50%; background: #FF5757; font-size: 5.2cqi; color: #fff; }
/* the press echo: a square black outline around the button, invisible at rest */
.pv-hardshadow__ring { position: absolute; left: 50%; top: 40cqi; width: 44cqi; height: 20cqi; translate: -50% -50%; box-sizing: border-box; border: 0.8cqi solid #000; opacity: 0; scale: 1; }
.pv-hardshadow__btn {
position: absolute; left: 28cqi; top: 30cqi; width: 44cqi; height: 20cqi; box-sizing: border-box;
display: grid; place-items: center; background: #5CE1E6; border: 1.2cqi solid #000; box-shadow: 2cqi 2cqi 0 #000; translate: 0 0;
font-weight: 700; font-size: 8.5cqi; line-height: 1; letter-spacing: 0.02em; color: #000;
}
/* the cursor: black arrow with a white keyline, off-canvas at rest */
.pv-hardshadow__cur { position: absolute; left: 110%; top: 110%; width: 9cqi; aspect-ratio: 14 / 19; background: #000; scale: 1; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%); filter: drop-shadow(0.5cqi 0 0 #fff) drop-shadow(-0.5cqi 0 0 #fff) drop-shadow(0 0.5cqi 0 #fff) drop-shadow(0 -0.5cqi 0 #fff); }
@media (prefers-reduced-motion: no-preference) {
.pv-hardshadow__cur { animation: pv-hardshadow-cur 6s linear infinite; }
.pv-hardshadow__btn { animation: pv-hardshadow-btn 6s linear infinite; }
.pv-hardshadow__ring { animation: pv-hardshadow-ring 6s linear infinite; }
.pv-hardshadow__card--5 { animation: pv-hardshadow-c5 6s linear infinite; }
.pv-hardshadow__card--2 { animation: pv-hardshadow-c2 6s linear infinite; }
.pv-hardshadow__card--1 { animation: pv-hardshadow-c1 6s linear infinite; }
.pv-hardshadow__card--4 { animation: pv-hardshadow-c4 6s linear infinite; }
.pv-hardshadow__card--3 { animation: pv-hardshadow-c3 6s linear infinite; }
/* 0-1s poster, cursor arrives · 1.05s press · 1.4-3.3s dominoes · hold · 5.6s pop, hold */
@keyframes pv-hardshadow-cur {
0%, 4% { left: 110%; top: 110%; scale: 1; }
14% { left: 56cqi; top: 46cqi; scale: 1; }
17% { left: 54cqi; top: 44cqi; scale: 1; }
17.5% { left: 55.6cqi; top: 45.6cqi; scale: 0.9; }
19% { left: 55.6cqi; top: 45.6cqi; scale: 0.9; }
60% { left: 55.6cqi; top: 45.6cqi; scale: 1; }
72%, 100% { left: 110%; top: 110%; scale: 1; }
}
@keyframes pv-hardshadow-btn {
0%, 17.5% { translate: 0 0; box-shadow: 2cqi 2cqi 0 #000; }
19%, 93% { translate: 2cqi 2cqi; box-shadow: 0 0 0 #000; }
94.5% { translate: -0.5cqi -0.5cqi; box-shadow: 2.5cqi 2.5cqi 0 #000; }
96%, 100% { translate: 0 0; box-shadow: 2cqi 2cqi 0 #000; }
}
@keyframes pv-hardshadow-ring {
0%, 18% { opacity: 0; scale: 1; }
19% { opacity: 1; scale: 1; }
42% { opacity: 0; scale: 2.3; }
100% { opacity: 0; scale: 1; }
}
@keyframes pv-hardshadow-c5 {
0%, 24% { translate: 0 0; box-shadow: 1.6cqi 1.6cqi 0 #000; }
26%, 93% { translate: 1.6cqi 1.6cqi; box-shadow: 0 0 0 #000; }
94.5% { translate: -0.5cqi -0.5cqi; box-shadow: 2.1cqi 2.1cqi 0 #000; }
96%, 100% { translate: 0 0; box-shadow: 1.6cqi 1.6cqi 0 #000; }
}
@keyframes pv-hardshadow-c2 {
0%, 31% { translate: 0 0; box-shadow: 1.6cqi 1.6cqi 0 #000; }
33%, 93% { translate: 1.6cqi 1.6cqi; box-shadow: 0 0 0 #000; }
94.5% { translate: -0.5cqi -0.5cqi; box-shadow: 2.1cqi 2.1cqi 0 #000; }
96%, 100% { translate: 0 0; box-shadow: 1.6cqi 1.6cqi 0 #000; }
}
@keyframes pv-hardshadow-c1 {
0%, 38% { translate: 0 0; box-shadow: 1.6cqi 1.6cqi 0 #000; }
40%, 93% { translate: 1.6cqi 1.6cqi; box-shadow: 0 0 0 #000; }
94.5% { translate: -0.5cqi -0.5cqi; box-shadow: 2.1cqi 2.1cqi 0 #000; }
96%, 100% { translate: 0 0; box-shadow: 1.6cqi 1.6cqi 0 #000; }
}
@keyframes pv-hardshadow-c4 {
0%, 45% { translate: 0 0; box-shadow: 1.6cqi 1.6cqi 0 #000; }
47%, 93% { translate: 1.6cqi 1.6cqi; box-shadow: 0 0 0 #000; }
94.5% { translate: -0.5cqi -0.5cqi; box-shadow: 2.1cqi 2.1cqi 0 #000; }
96%, 100% { translate: 0 0; box-shadow: 1.6cqi 1.6cqi 0 #000; }
}
@keyframes pv-hardshadow-c3 {
0%, 52% { translate: 0 0; box-shadow: 1.6cqi 1.6cqi 0 #000; }
54%, 93% { translate: 1.6cqi 1.6cqi; box-shadow: 0 0 0 #000; }
94.5% { translate: -0.5cqi -0.5cqi; box-shadow: 2.1cqi 2.1cqi 0 #000; }
96%, 100% { translate: 0 0; box-shadow: 1.6cqi 1.6cqi 0 #000; }
}
}
/* ---- SCIENTIFIC: drag the n slider and the figure re-plots itself, eight points become sixty-four ---- */
/* Previews v2 (2026-09-26), row 48, research lab. Resting frame IS the poster:
a finished Fig. 1 on white — L axes, three dashed gridlines, eight lab-blue
points with error bars, an orange fit line — a serif caption "Fig. 1 — n = 8"
beneath it, an n slider at 8, and a text column to the right with a mono
citation marker [3] sitting in the second paragraph. Hero: a cursor drags the
knob to 64; fifty-six more points stream up from the axis in eight columns,
the old fit fades as a steeper fit draws itself along the new cloud, the
caption rewrites to n = 64 and [3] highlights blue. Loop: the points sink
back, the fit un-draws, the knob returns to 8. 7s, linear throughout. */
.pv-figure { background: #FFFFFF; container-type: inline-size; color: #222222; font-family: "Crimson Pro", "Georgia", "Times New Roman", serif; }
.pv-figure__plot { position: absolute; left: 3cqi; top: 3cqi; width: 58cqi; height: 46cqi; overflow: visible; }
.pv-figure__fit1 { opacity: 1; }
.pv-figure__fit2 { stroke-dasharray: 290; stroke-dashoffset: 290; }
.pv-figure__pt { opacity: 0; transform: translateY(40px); }
.pv-figure__cap { position: absolute; left: 4cqi; top: 50.5cqi; margin: 0; height: 7cqi; font-size: 6.2cqi; line-height: 1; white-space: nowrap; display: flex; align-items: baseline; gap: 0.35em; }
.pv-figure__cap b { font-weight: 700; }
.pv-figure__nwrap { display: inline-grid; font-style: normal; }
.pv-figure__n { grid-area: 1 / 1; font: 5.6cqi/1 "IBM Plex Mono", "Courier New", monospace; white-space: nowrap; }
.pv-figure__n8 { opacity: 1; }
.pv-figure__n64 { opacity: 0; }
/* the slider: mono end labels, ink track, square ink knob at 8 */
.pv-figure__lo, .pv-figure__hi { position: absolute; top: 60cqi; font: 5.2cqi/1 "IBM Plex Mono", "Courier New", monospace; font-weight: 400; }
.pv-figure__lo { left: 4cqi; }
.pv-figure__hi { left: 56cqi; }
.pv-figure__track { position: absolute; left: 9cqi; top: 62.2cqi; width: 46cqi; height: 0.6cqi; background: #222222; }
.pv-figure__knob { position: absolute; left: 0; top: -1.7cqi; width: 4cqi; height: 4cqi; background: #222222; translate: 0 0; }
/* the paper: a heading, two paragraphs of grey line-text, one real citation marker */
.pv-figure__h { position: absolute; left: 66cqi; top: 3.5cqi; margin: 0; font-size: 6cqi; line-height: 1; font-weight: 700; }
.pv-figure__text { position: absolute; left: 66cqi; width: 30cqi; background: repeating-linear-gradient(#D0D0D0 0 1.3cqi, transparent 1.3cqi 3.4cqi); }
.pv-figure__text--1 { top: 12cqi; height: 4.7cqi; }
.pv-figure__text--2 { top: 24.5cqi; height: 45cqi; }
.pv-figure__cite { position: absolute; left: 66cqi; top: 18.2cqi; padding: 0.2cqi 0.4cqi; font: 5.2cqi/1 "IBM Plex Mono", "Courier New", monospace; color: #222222; background: rgba(31, 119, 180, 0); }
.pv-figure__cur { position: absolute; left: 110%; top: 110%; width: 6cqi; aspect-ratio: 14 / 19; background: #222222; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%); filter: drop-shadow(0.3cqi 0 0 #fff) drop-shadow(-0.3cqi 0 0 #fff) drop-shadow(0 0.3cqi 0 #fff) drop-shadow(0 -0.3cqi 0 #fff); }
@media (prefers-reduced-motion: no-preference) {
.pv-figure__cur { animation: pv-figure-cur 7s linear infinite; }
.pv-figure__knob { animation: pv-figure-knob 7s linear infinite; }
.pv-figure__pt { animation: pv-figure-stream 7s linear infinite; animation-delay: calc(var(--i) * 0.06s); }
.pv-figure__fit1 { animation: pv-figure-fit1 7s linear infinite; }
.pv-figure__fit2 { animation: pv-figure-fit2 7s linear infinite; }
.pv-figure__n8 { animation: pv-figure-n8 7s steps(1, end) infinite; }
.pv-figure__n64 { animation: pv-figure-n64 7s steps(1, end) infinite; }
.pv-figure__cite { animation: pv-figure-cite 7s linear infinite; }
/* 0-0.7s poster · 0.7-1s cursor to knob · 1-2s drag · 1.4-2.8s points stream · 3-5s fit re-draws · 5-6s caption, citation · 6-7s collapse */
@keyframes pv-figure-cur {
0%, 4% { left: 110%; top: 110%; }
10%, 14% { left: 11cqi; top: 61.5cqi; }
28%, 58% { left: 53cqi; top: 61.5cqi; }
66%, 100% { left: 110%; top: 110%; }
}
@keyframes pv-figure-knob {
0%, 14% { translate: 0 0; }
28%, 90% { translate: 42cqi 0; }
100% { translate: 0 0; }
}
@keyframes pv-figure-stream {
0%, 20% { opacity: 0; transform: translateY(40px); }
34%, 86% { opacity: 0.85; transform: translateY(0px); }
92%, 100% { opacity: 0; transform: translateY(40px); }
}
@keyframes pv-figure-fit1 {
0%, 43% { opacity: 1; }
52%, 90% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes pv-figure-fit2 {
0%, 43% { stroke-dashoffset: 290; }
71%, 90% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 290; }
}
@keyframes pv-figure-n8 { 0% { opacity: 1; } 71% { opacity: 0; } 93% { opacity: 1; } 100% { opacity: 1; } }
@keyframes pv-figure-n64 { 0% { opacity: 0; } 71% { opacity: 1; } 93% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pv-figure-cite {
0%, 73% { background: rgba(31, 119, 180, 0); color: #222222; }
76%, 88% { background: rgba(31, 119, 180, 0.18); color: #1F77B4; }
91%, 100% { background: rgba(31, 119, 180, 0); color: #222222; }
}
}
/* ---- COQUETTE: add to bag and the draped ribbon cinches itself into a bow ---- */
/* Previews v2 (2026-09-26), row 13. Resting frame IS the poster: a pearl
product card on blush with a lace-scalloped hem, an italic serif name, a
blush compact, an "Add to bag" pill, and two satin ribbons draped loosely
across the card at odd angles under a soft grain. Hero: the add-to-bag
confirmation. Both ribbons pull tight and straight, shrinking into a knot;
two loops bloom out of the knot with a satin overshoot, the tails drop, the
pill fills soft red, and a small heart floats off the bag icon. The bow
drifts a degree or two, then slips loose and the ribbons drape back. 7s. */
.pv-bow { background: #F7D6E0; container-type: inline-size; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; }
.pv-bow__card {
position: absolute; left: 19cqi; top: 8cqi; width: 62cqi; height: 58cqi;
background: #FDFBF7; border-radius: 2.4cqi; box-shadow: 0 1.6cqi 4cqi rgba(201, 76, 106, 0.16);
}
/* lace hem: a row of pearl scallops hanging below the card, with a dotted lace line above */
.pv-bow__lace {
position: absolute; left: 1cqi; right: 1cqi; bottom: -2.6cqi; height: 4.4cqi;
background:
radial-gradient(circle at 50% 100%, #FDFBF7 56%, transparent 60%) 0 100% / 5cqi 2.8cqi repeat-x,
radial-gradient(circle at 50% 50%, #F7D6E0 0 26%, transparent 32%) 0.5cqi 0 / 2.2cqi 1.6cqi repeat-x;
}
.pv-bow__name { position: absolute; left: 0; right: 0; top: 5cqi; text-align: center; font: 400 11cqi/1 "Pinyon Script", "PvPlayfairI", Georgia, serif; color: #C94C6A; letter-spacing: 0; }
.pv-bow__compact {
position: absolute; left: 22cqi; top: 17cqi; width: 18cqi; height: 18cqi; border-radius: 50%;
background: radial-gradient(circle at 42% 38%, #FFF8F0 0 30%, #F7D6E0 34% 100%);
box-shadow: inset 0 0 0 0.6cqi #FDFBF7, inset 0 0 0 1cqi #E8A0B4, 0 1cqi 1.6cqi rgba(201, 76, 106, 0.18);
}
.pv-bow__btn {
position: absolute; left: 12cqi; top: 44cqi; width: 38cqi; height: 8.4cqi; box-sizing: border-box;
display: flex; align-items: center; justify-content: center; gap: 1.6cqi;
background: #F7D6E0; color: #C94C6A; border-radius: 4.2cqi;
font: 500 6cqi/1 "Cormorant Garamond", Georgia, "Times New Roman", serif; letter-spacing: 0.04em; white-space: nowrap;
}
.pv-bow__bag { position: relative; width: 4cqi; height: 3.4cqi; margin-top: 1.2cqi; background: currentColor; border-radius: 0.4cqi 0.4cqi 0.8cqi 0.8cqi; }
.pv-bow__bag::before { content: ""; position: absolute; left: 0.8cqi; right: 0.8cqi; top: -1.6cqi; height: 2cqi; border: 0.5cqi solid currentColor; border-bottom: 0; border-radius: 1.2cqi 1.2cqi 0 0; }
/* the heart lives on the bag icon, invisible at rest */
.pv-bow__heart { position: absolute; left: 17.6cqi; top: 43.6cqi; font: 6cqi/1 Georgia, serif; color: #C94C6A; opacity: 0; transform: translate(0, 0) scale(0); }
/* two satin ribbons draped loosely across the card; --rot is the resting angle */
.pv-bow__band {
position: absolute; left: -10cqi; top: var(--bt); width: 120cqi; height: var(--bh);
background: linear-gradient(180deg, #F2BCCB, #E8A0B4 46%, #D98CA3);
box-shadow: 0 0.6cqi 1.2cqi rgba(201, 76, 106, 0.18);
transform: translate(0, 0) rotate(var(--rot)) scaleX(1);
}
/* the bow pieces: all collapsed into the knot point (50cqi, 36cqi) at rest */
.pv-bow__knot { position: absolute; left: 46cqi; top: 32.8cqi; width: 8cqi; height: 6.4cqi; border-radius: 1.8cqi; background: linear-gradient(180deg, #E8A0B4, #D98CA3); transform: scale(0); z-index: 3; }
.pv-bow__loop {
position: absolute; left: var(--lx); top: 28.5cqi; width: 24cqi; height: 15cqi; border-radius: 50%;
background: radial-gradient(ellipse at 50% 50%, #F7D6E0 0 24%, #E8A0B4 32%, #D98CA3 100%);
box-shadow: 0 0.8cqi 1.4cqi rgba(201, 76, 106, 0.2);
transform-origin: var(--lo) 50%; transform: rotate(var(--lr)) scale(0); z-index: 2;
}
.pv-bow__tail {
position: absolute; left: 47.2cqi; top: 37cqi; width: 5.6cqi; height: 12cqi; border-radius: 0 0 50% 50% / 0 0 34% 34%;
background: linear-gradient(90deg, #D98CA3, #E8A0B4 50%, #F2BCCB);
transform-origin: 50% 0; transform: rotate(var(--tr)) scaleY(0); z-index: 1;
}
/* soft film grain over everything: static, so it costs nothing */
.pv-bow__grain {
position: absolute; inset: 0; pointer-events: none; opacity: 0.14; mix-blend-mode: multiply;
background: url("data:image/svg+xml;utf8,") 0 0 / 140px 140px;
}
@media (prefers-reduced-motion: no-preference) {
.pv-bow__band { animation: pv-bow-cinch 7s infinite; }
.pv-bow__knot { animation: pv-bow-knot 7s infinite; }
.pv-bow__loop { animation: pv-bow-bloom 7s infinite; }
.pv-bow__tail { animation: pv-bow-tail 7s infinite; }
.pv-bow__btn { animation: pv-bow-added 7s infinite; }
.pv-bow__heart { animation: pv-bow-heart 7s infinite; }
/* both ribbons pull straight and shrink to knot width, rising to the knot point */
@keyframes pv-bow-cinch {
0%, 21% { transform: translate(0, 0) rotate(var(--rot)) scaleX(1); animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1); }
40%, 86% { transform: translate(0, var(--ty)) rotate(0deg) scaleX(0.07); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
100% { transform: translate(0, 0) rotate(var(--rot)) scaleX(1); }
}
@keyframes pv-bow-knot {
0%, 34% { transform: scale(0); animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1); }
44%, 86% { transform: scale(1); animation-timing-function: ease-in; }
94%, 100% { transform: scale(0); }
}
/* loops bloom from the knot with a satin overshoot, drift, then slip loose */
@keyframes pv-bow-bloom {
0%, 33% { transform: rotate(var(--lr)) scale(0); animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
47% { transform: rotate(var(--lr)) scale(1); animation-timing-function: ease-in-out; }
56% { transform: rotate(calc(var(--lr) + 3deg)) scale(1); animation-timing-function: ease-in-out; }
68% { transform: rotate(calc(var(--lr) - 3deg)) scale(1); animation-timing-function: ease-in-out; }
78%, 86% { transform: rotate(var(--lr)) scale(1); animation-timing-function: ease-in; }
95%, 100% { transform: rotate(var(--lr)) scale(0); }
}
@keyframes pv-bow-tail {
0%, 36% { transform: rotate(var(--tr)) scaleY(0); animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1); }
52%, 86% { transform: rotate(var(--tr)) scaleY(1); animation-timing-function: ease-in; }
94%, 100% { transform: rotate(var(--tr)) scaleY(0); }
}
/* the pill fills soft red while the item is in the bag */
@keyframes pv-bow-added {
0%, 40% { background: #F7D6E0; color: #C94C6A; }
46%, 86% { background: #C94C6A; color: #FDFBF7; }
96%, 100% { background: #F7D6E0; color: #C94C6A; }
}
/* a heart pops off the bag icon and floats away */
@keyframes pv-bow-heart {
0%, 46% { opacity: 0; transform: translate(0, 0) scale(0); animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1); }
52% { opacity: 1; transform: translate(0, -3cqi) scale(1.2); animation-timing-function: ease-out; }
60% { opacity: 1; transform: translate(0.6cqi, -6cqi) scale(1); animation-timing-function: ease-in; }
74% { opacity: 0; transform: translate(1.2cqi, -11cqi) scale(0.9); }
75%, 100% { opacity: 0; transform: translate(0, 0) scale(0); }
}
}
/* ---- DESERT: the sun crossing the canyon is the theme switch ---- */
/* Previews v2 (2026-09-26), row 17. Resting frame IS the poster: Mesa House at
noon — pale warm sky, a flat mesa on the horizon, five canyon stripes, an
arch-shaped window framing a terracotta butte, a saguaro over a puddle of
shadow, the wordmark, a nav line and the light-mode toggle. The hero
moment: a time-lapse — the sun arcs to the right and drops behind the
mesa, the saguaro and arch shadows stretch away from it, the stripes pass
through amber into rose and violet (two multiply layers, so every band
shifts together), and at dusk the UI snaps to its dark theme: the toggle
slides, the type goes sand, stars come out. 8s cycle; stars fade, the sun
rises on the left with dawn shadows, and noon returns to frame 0. Type:
Fraunces 600 for the warm wide wordmark, Jost 500 for the geometric nav. */
.pv-strata { background: #F6E9D2; container-type: inline-size; }
.pv-strata__band { position: absolute; left: 0; width: 100%; height: 7.2cqi; }
.pv-strata__band--1 { top: 40cqi; background: #EBD3B0; }
.pv-strata__band--2 { top: 47cqi; background: #C98B2F; }
.pv-strata__band--3 { top: 54cqi; background: #D9A5A0; }
.pv-strata__band--4 { top: 61cqi; background: #B5563A; }
.pv-strata__band--5 { top: 68cqi; background: #7A3A2A; }
.pv-strata__mesa { position: absolute; left: 46cqi; top: 33cqi; width: 54cqi; height: 7.5cqi; background: #C98B2F; clip-path: polygon(0 100%, 10% 12%, 16% 0, 62% 0, 70% 20%, 100% 100%); }
/* the arch window: sand frame, rose sky, ochre ground, a terracotta butte */
.pv-strata__arch { position: absolute; left: 13cqi; top: 15cqi; width: 27cqi; height: 43cqi; box-sizing: border-box; border: 1.1cqi solid #F6E9D2; border-radius: 13.5cqi 13.5cqi 0 0; background: #D9A5A0; overflow: hidden; }
.pv-strata__arch::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: #C98B2F; }
.pv-strata__arch::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 30%; height: 32%; background: #B5563A; clip-path: polygon(0 100%, 16% 0, 84% 0, 100% 100%); }
.pv-strata__archshade { position: absolute; left: 13cqi; top: 15cqi; width: 27cqi; height: 43cqi; border-radius: 13.5cqi 13.5cqi 0 0; background: rgba(60, 25, 20, 0.4); transform-origin: 50% 100%; transform: skewX(0deg) translateX(0); opacity: 0.4; }
/* the saguaro and its shadow share one construction: trunk, left L-arm, right L-arm */
.pv-strata__cactus, .pv-strata__cshade { position: absolute; left: 66cqi; top: 22cqi; width: 5.2cqi; height: 27cqi; }
.pv-strata__cactus b, .pv-strata__cshade b { position: absolute; display: block; box-sizing: border-box; }
.pv-strata__cactus b:nth-child(1), .pv-strata__cshade b:nth-child(1) { left: 0; top: 0; width: 100%; height: 100%; border-radius: 2.6cqi 2.6cqi 0 0; background: #8C9A6E; }
.pv-strata__cactus b:nth-child(2), .pv-strata__cshade b:nth-child(2) { left: -6.6cqi; top: 7cqi; width: 8cqi; height: 12cqi; border-left: 3.4cqi solid #8C9A6E; border-bottom: 3.4cqi solid #8C9A6E; border-radius: 1.7cqi 0 0 0; }
.pv-strata__cactus b:nth-child(3), .pv-strata__cshade b:nth-child(3) { left: 3.8cqi; top: 3cqi; width: 8cqi; height: 14cqi; border-right: 3.4cqi solid #8C9A6E; border-bottom: 3.4cqi solid #8C9A6E; border-radius: 0 1.7cqi 0 0; }
.pv-strata__cshade { transform-origin: 50% 100%; transform: skewX(0deg) scaleY(0.1); opacity: 0.42; }
.pv-strata__cshade b:nth-child(1) { background: #3A1A12; }
.pv-strata__cshade b:nth-child(2), .pv-strata__cshade b:nth-child(3) { border-color: #3A1A12; }
/* the sun rides an invisible arm pivoting on the horizon; bands and mesa sit above it so it sets behind them */
.pv-strata__arm { position: absolute; left: 50cqi; top: 2cqi; width: 0; height: 38cqi; transform-origin: 50% 100%; transform: rotate(0deg); }
.pv-strata__sun { position: absolute; left: -4.5cqi; top: -4.5cqi; width: 9cqi; height: 9cqi; border-radius: 50%; background: #FFF1D0; box-shadow: 0 0 3cqi rgba(255, 220, 160, 0.7); opacity: 1; transform: scale(1); }
/* sundown in two multiply layers: amber first, then violet */
.pv-strata__amber { position: absolute; inset: 0; background: #E8A070; mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
.pv-strata__dusk { position: absolute; inset: 0; background: linear-gradient(#5E3A78, #3A2148 55%, #2A1730); mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
.pv-strata__stars { position: absolute; left: 0; top: 0; width: 100%; height: 36cqi; opacity: 0; background: radial-gradient(circle, #FFF3DC 0 0.45cqi, transparent 0.6cqi) 0 0 / 11cqi 9cqi, radial-gradient(circle, #FFF3DC 0 0.3cqi, transparent 0.45cqi) 5cqi 4cqi / 15cqi 13cqi; }
/* the UI: warm wide serif wordmark, geometric sans nav, a theme toggle in light mode */
.pv-strata__name { position: absolute; left: 5cqi; top: 4cqi; margin: 0; font: 600 7.4cqi/1 "Fraunces", Palatino, Georgia, serif; letter-spacing: 0.01em; color: #3B2A20; white-space: nowrap; }
.pv-strata__nav { position: absolute; left: 5.4cqi; top: 12.6cqi; margin: 0; font: 500 3cqi/1 "Jost", "Trebuchet MS", Verdana, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #3B2A20; white-space: nowrap; }
.pv-strata__toggle { position: absolute; right: 5cqi; top: 4.5cqi; width: 11cqi; height: 5.6cqi; border-radius: 3cqi; background: #3B2A20; }
.pv-strata__toggle b { position: absolute; left: 0.7cqi; top: 0.7cqi; width: 4.2cqi; height: 4.2cqi; border-radius: 50%; background: #F6E9D2; transform: translateX(0); }
@media (prefers-reduced-motion: no-preference) {
.pv-strata__arm { animation: pv-strata-arc 8s infinite; }
.pv-strata__sun { animation: pv-strata-sun 8s infinite; }
.pv-strata__cshade { animation: pv-strata-cshade 8s infinite; }
.pv-strata__archshade { animation: pv-strata-ashade 8s infinite; }
.pv-strata__amber { animation: pv-strata-amber 8s infinite; }
.pv-strata__dusk { animation: pv-strata-dusk 8s infinite; }
.pv-strata__stars { animation: pv-strata-stars 8s infinite; }
.pv-strata__name, .pv-strata__nav { animation: pv-strata-ink 8s infinite; }
.pv-strata__toggle { animation: pv-strata-pill 8s infinite; }
.pv-strata__toggle b { animation: pv-strata-knob 8s infinite; }
/* noon to the right horizon; the swap to the left horizon happens while the sun is hidden */
@keyframes pv-strata-arc {
0%, 12.5% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1); }
75%, 86% { transform: rotate(84deg); }
86.1% { transform: rotate(-84deg); animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1); }
100% { transform: rotate(0deg); }
}
@keyframes pv-strata-sun {
0%, 12.5% { background: #FFF1D0; opacity: 1; transform: scale(1); }
55% { background: #F6D08A; opacity: 1; transform: scale(1.08); }
75% { background: #E07A4A; opacity: 1; transform: scale(1.3); }
80%, 90% { background: #C9573A; opacity: 0; transform: scale(1.3); }
94% { background: #F6D08A; opacity: 1; transform: scale(1.12); }
100% { background: #FFF1D0; opacity: 1; transform: scale(1); }
}
/* shadows lean away from the sun: puddle at noon, long to the left by dusk, long to the right at dawn */
@keyframes pv-strata-cshade {
0%, 12.5% { transform: skewX(0deg) scaleY(0.1); opacity: 0.42; animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1); }
75%, 85% { transform: skewX(56deg) scaleY(0.62); opacity: 0.42; }
86% { transform: skewX(56deg) scaleY(0.62); opacity: 0; }
90% { transform: skewX(-56deg) scaleY(0.62); opacity: 0; }
92% { transform: skewX(-56deg) scaleY(0.62); opacity: 0.42; animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1); }
100% { transform: skewX(0deg) scaleY(0.1); opacity: 0.42; }
}
@keyframes pv-strata-ashade {
0%, 12.5% { transform: skewX(0deg) translateX(0); opacity: 0.4; animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1); }
75%, 85% { transform: skewX(34deg) translateX(-3cqi); opacity: 0.4; }
86% { transform: skewX(34deg) translateX(-3cqi); opacity: 0; }
90% { transform: skewX(-34deg) translateX(3cqi); opacity: 0; }
92% { transform: skewX(-34deg) translateX(3cqi); opacity: 0.4; animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1); }
100% { transform: skewX(0deg) translateX(0); opacity: 0.4; }
}
@keyframes pv-strata-amber {
0%, 20% { opacity: 0; }
55% { opacity: 0.55; }
75%, 90% { opacity: 0.25; }
100% { opacity: 0; }
}
@keyframes pv-strata-dusk {
0%, 40% { opacity: 0; }
75%, 90% { opacity: 0.8; }
100% { opacity: 0; }
}
@keyframes pv-strata-stars {
0%, 64% { opacity: 0; }
76%, 89% { opacity: 1; }
95%, 100% { opacity: 0; }
}
/* the theme switch itself: a snap at dusk, a snap back at dawn */
@keyframes pv-strata-ink {
0%, 71% { color: #3B2A20; }
73.5%, 92% { color: #EBD3B0; }
94.5%, 100% { color: #3B2A20; }
}
@keyframes pv-strata-pill {
0%, 71% { background: #3B2A20; }
73.5%, 92% { background: #EBD3B0; }
94.5%, 100% { background: #3B2A20; }
}
@keyframes pv-strata-knob {
0%, 71% { transform: translateX(0); background: #F6E9D2; animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1); }
73.5%, 92% { transform: translateX(5.4cqi); background: #3B2A20; animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1); }
94.5%, 100% { transform: translateX(0); background: #F6E9D2; }
}
}
/* ---- OCCULT: the astrolabe is the pager; one click of the dial waxes the moon and links the stars into a sigil ---- */
/* Previews v2 (2026-09-26), row 42. Resting frame IS the poster: deep purple
night, a gold astrolabe wheel with tick ring, five notches and an eccentric
rete, six bone stars scattered inside it, ASCENDANT above, and a row of
pagination dots below where the active dot is a waxing crescent. The hero
moment: the wheel turns one notch with a slow ritual click; as it turns the
crescent waxes to a full moon; then the stars link one line at a time into
an irregular gold sigil (no hexagram, no pentagram) with a ringed centre, which brightens. 8s cycle;
the sigil unlinks back to its stars, the wheel clicks back and the moon wanes. */
.pv-lunar { background: radial-gradient(ellipse at 50% 45%, #2D1B3D 0%, #1a1026 62%, #0A0A14 100%); container-type: inline-size; }
.pv-lunar__sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Cinzel's lowercase glyphs are small capitals, so "Ascendant" sets as cap + small caps */
.pv-lunar__title { font: 500 28px "Cinzel", "Times New Roman", Georgia, serif; fill: #E8E0CF; letter-spacing: 4px; text-anchor: middle; dominant-baseline: central; }
.pv-lunar__wheel { fill: none; stroke: #B8963E; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(0deg); }
.pv-lunar__stars { fill: #E8E0CF; filter: drop-shadow(0 0 2px rgba(232, 224, 207, 0.9)); }
/* the sigil: drawn with a unit pathLength, fully hidden at rest */
.pv-lunar__sigil, .pv-lunar__core {
fill: none; stroke: #B8963E; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.85; filter: drop-shadow(0 0 3px rgba(184, 150, 62, 0.9));
}
.pv-lunar__pager { fill: #E8E0CF; opacity: 0.55; }
.pv-lunar__moon { fill: #B8963E; }
/* the shadow disc sits over the moon offset left, leaving a waxing crescent */
.pv-lunar__shadow { fill: #1a1026; transform: translate(0, 0); }
@media (prefers-reduced-motion: no-preference) {
.pv-lunar__wheel { animation: pv-lunar-turn 8s infinite; }
.pv-lunar__shadow { animation: pv-lunar-wax 8s infinite; }
.pv-lunar__sigil { animation: pv-lunar-link 8s infinite; }
.pv-lunar__core { animation: pv-lunar-core 8s infinite; }
/* one notch (72deg) with a heavy ease and a hard settle; one notch back at the end */
@keyframes pv-lunar-turn {
0%, 18.75% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
37.5%, 87.5% { transform: rotate(72deg); animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
100% { transform: rotate(0deg); }
}
/* the shadow slides off the moon as the dial turns, back on as it returns */
@keyframes pv-lunar-wax {
0%, 18.75% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
37.5%, 87.5% { transform: translate(-18px, 0); animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
100% { transform: translate(0, 0); }
}
/* the stars link, the line brightens and thickens, then unlinks from its last star back to its first */
@keyframes pv-lunar-link {
0%, 37.5% { stroke-dashoffset: 1; stroke-width: 2.4; opacity: 0.85; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
62.5% { stroke-dashoffset: 0; stroke-width: 2.4; opacity: 0.85; animation-timing-function: ease-in-out; }
68% { stroke-dashoffset: 0; stroke-width: 3.6; opacity: 1; animation-timing-function: ease-in-out; }
75% { stroke-dashoffset: 0; stroke-width: 2.4; opacity: 0.85; animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1); }
87.5%, 100% { stroke-dashoffset: 1; stroke-width: 2.4; opacity: 0.85; }
}
@keyframes pv-lunar-core {
0%, 55% { stroke-dashoffset: 1; animation-timing-function: ease-out; }
62.5%, 75% { stroke-dashoffset: 0; animation-timing-function: ease-in; }
82%, 100% { stroke-dashoffset: 1; }
}
}
/* ---- MEXICAN GRAPHIC VERNACULAR: the menu is a Lotería deck and today's card gets called ---- */
/* Previews v2 (2026-09-26), row 35. Resting frame IS the poster: six original
Lotería-style menu cards on turquoise — cream faces, heavy black outlines,
numbered black discs, flat hand-painted icons (taco, prickly pear, nopal,
an engraved calavera with a marigold crown, a green chile, a slice of
sandía), rotulo titles in black bands. The hero moment: card 1 jiggles as
it is called, then flips (rotateY) and grows to feature size — rosa back,
EL TACO in shaded sign lettering, a marigold "Pide ahora" button — while a
bean marker drops with a bounce onto the slot it left. 7s cycle; the card
flips back down into the grid and the bean lifts away — frame 0.
Type: Permanent Marker (hand-lettered rotulo stand-in) for the feature
title, PvAnton for the card bands and Arial Black for the bold-sans UI. */
.pv-comp { background: #00A6A6; container-type: inline-size; }
/* the stage: a full-bleed child that carries the perspective (cqi on the root would resolve against the viewport) */
.pv-comp__stage { position: absolute; inset: 0; perspective: 160cqi; }
.pv-comp__card, .pv-comp__hero { position: absolute; width: 26cqi; height: 30cqi; }
.pv-comp__card, .pv-comp__face { box-sizing: border-box; border: 0.8cqi solid #111111; background: #FBF1DC; overflow: hidden; }
.pv-comp__c2 { left: 37cqi; top: 6cqi; }
.pv-comp__c3 { left: 67cqi; top: 6cqi; }
.pv-comp__c4 { left: 7cqi; top: 40cqi; }
.pv-comp__c5 { left: 37cqi; top: 40cqi; }
.pv-comp__c6 { left: 67cqi; top: 40cqi; }
.pv-comp__num { position: absolute; left: 1.2cqi; top: 1.2cqi; width: 4.6cqi; height: 4.6cqi; border-radius: 50%; background: #111111; color: #FF9F1C; font: 700 3cqi/4.6cqi "Arial Black", Arial, sans-serif; text-align: center; }
.pv-comp__title { position: absolute; left: 0; right: 0; bottom: 0; height: 6.2cqi; background: #111111; color: #FF9F1C; font: 400 4.2cqi/6.2cqi "PvAnton", Impact, sans-serif; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; white-space: nowrap; }
/* the icons: flat shapes, drawn not borrowed */
.pv-comp__pic { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); box-sizing: border-box; }
.pv-comp__pic--taco { width: 14cqi; height: 7.2cqi; background: #FF9F1C; border: 0.7cqi solid #111111; border-top: 0; border-radius: 0 0 7cqi 7cqi / 0 0 7.2cqi 7.2cqi; }
.pv-comp__pic--taco::before { content: ""; position: absolute; left: -0.7cqi; right: -0.7cqi; top: -1.6cqi; height: 2.2cqi; background: #2B9348; border: 0.7cqi solid #111111; border-radius: 1.1cqi; }
.pv-comp__pic--taco::after { content: ""; position: absolute; left: 1.6cqi; right: 1.6cqi; top: -1cqi; height: 1cqi; background: radial-gradient(circle, #E4007C 0 0.45cqi, transparent 0.55cqi) 0 0 / 2.2cqi 1cqi; }
.pv-comp__pic--tuna { width: 8cqi; height: 11cqi; border-radius: 50%; border: 0.7cqi solid #111111; background: radial-gradient(circle, #111111 0 0.35cqi, transparent 0.5cqi) 0 0 / 2.4cqi 2.4cqi #E4007C; transform: translate(-50%, -50%) rotate(15deg); }
.pv-comp__pic--nopal { width: 10cqi; height: 13cqi; border-radius: 50% / 45% 45% 55% 55%; border: 0.7cqi solid #111111; background: radial-gradient(circle, #111111 0 0.3cqi, transparent 0.45cqi) 0.6cqi 0.6cqi / 3cqi 3cqi #2B9348; }
.pv-comp__pic--nopal::before { content: ""; position: absolute; left: 1.4cqi; top: -3.2cqi; width: 3.2cqi; height: 3.6cqi; border-radius: 50%; background: #E4007C; border: 0.6cqi solid #111111; }
.pv-comp__pic--skull { width: 11cqi; height: 12.2cqi; }
.pv-comp__pic--chile { width: 6cqi; height: 14cqi; border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%; border: 0.7cqi solid #111111; background: #2B9348; transform: translate(-50%, -50%) rotate(20deg); }
.pv-comp__pic--chile::before { content: ""; position: absolute; left: 1.5cqi; top: -2.6cqi; width: 1.6cqi; height: 3cqi; background: #2B9348; border: 0.6cqi solid #111111; border-radius: 0.8cqi 0.8cqi 0 0; }
.pv-comp__pic--sandia { width: 14cqi; height: 7.6cqi; border: 0.7cqi solid #111111; border-bottom: 2.4cqi solid #2B9348; border-radius: 0 0 7cqi 7cqi / 0 0 7.6cqi 7.6cqi; background: radial-gradient(circle, #111111 0 0.35cqi, transparent 0.5cqi) 0.8cqi 0.6cqi / 2.6cqi 2cqi #E4007C; }
/* the hero card: two faces on one 3D-flipping element, sitting in slot 1 */
.pv-comp__hero { left: 7cqi; top: 6cqi; z-index: 5; transform-style: preserve-3d; transform: translate(0, 0) scale(1) rotateY(0deg) rotateZ(0deg); }
.pv-comp__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pv-comp__back { transform: rotateY(180deg); background: #E4007C; }
.pv-comp__back .pv-comp__num { background: #FBF1DC; color: #111111; }
.pv-comp__big { position: absolute; left: 0.8cqi; right: 0.8cqi; top: 5.8cqi; text-align: center; font: 400 4.4cqi/1 "Permanent Marker", Impact, sans-serif; color: #FF9F1C; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
.pv-comp__pic--big { top: 50%; width: 15cqi; height: 7.6cqi; }
.pv-comp__btn { position: absolute; left: 3cqi; right: 3cqi; bottom: 2cqi; padding: 1cqi 0 1.1cqi; background: #FF9F1C; border: 0.5cqi solid #111111; color: #111111; text-align: center; font: 700 2.6cqi/1 "Arial Black", Arial, sans-serif; letter-spacing: 0.04em; }
/* the marker: a black bean, parked off the top edge at rest */
.pv-comp__bean { position: absolute; left: 16.5cqi; top: -10cqi; width: 7cqi; height: 5cqi; z-index: 6; border-radius: 50%; background: #111111; opacity: 0; transform: translateY(0); }
.pv-comp__bean::before { content: ""; position: absolute; left: 1.6cqi; top: 1cqi; width: 2.4cqi; height: 1.2cqi; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
@media (prefers-reduced-motion: no-preference) {
.pv-comp__hero { animation: pv-comp-call 7s infinite; }
.pv-comp__bean { animation: pv-comp-bean 7s infinite; }
/* the call: a jiggle in the slot, then flip-and-grow to centre stage, hold, snap back */
@keyframes pv-comp-call {
0%, 14% { transform: translate(0, 0) scale(1) rotateY(0deg) rotateZ(0deg); animation-timing-function: ease-in-out; }
17% { transform: translate(0, -1.5cqi) scale(1.04) rotateY(0deg) rotateZ(-5deg); animation-timing-function: ease-in-out; }
20% { transform: translate(0, -1.5cqi) scale(1.04) rotateY(0deg) rotateZ(5deg); animation-timing-function: ease-in-out; }
23% { transform: translate(0, 0) scale(1) rotateY(0deg) rotateZ(0deg); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
45%, 90% { transform: translate(30cqi, 16.5cqi) scale(2.07) rotateY(180deg) rotateZ(0deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translate(0, 0) scale(1) rotateY(0deg) rotateZ(0deg); }
}
/* the bean: drop onto the empty slot with one bounce, sit, lift and vanish */
@keyframes pv-comp-bean {
0%, 44% { transform: translateY(0); opacity: 0; }
45% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
52% { transform: translateY(28.5cqi); opacity: 1; animation-timing-function: ease-out; }
55% { transform: translateY(24cqi); opacity: 1; animation-timing-function: ease-in; }
58%, 88% { transform: translateY(28.5cqi); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.6); }
94%, 100% { transform: translateY(0); opacity: 0; }
}
}
/* ---- GOLDEN ERA HIP-HOP: the carousel is a crate; riffle the sleeves, stop on one, pull the vinyl ---- */
/* Previews v2 (2026-09-26), row 24. Resting frame IS the poster: four square
sleeves leaning back in a black crate, gold indicator dots above, CRATE 12
tagged in marker on the right wall; the front sleeve is a grainy grey street
skyline with RAW in shaded gold. The hero moment: sleeves 1 and 2 tip back
on the beat with a hard stop, the indicator advances with each, BOOM is
pulled up straight and its record slides out of the side showing the gold
label. 7s cycle; the vinyl slides home, BOOM drops back, the two front
sleeves snap upright and the indicator returns to the first dot. */
.pv-chrome { background: #111111; container-type: inline-size; }
/* carousel indicator: four hollow gold dots, one filled marker that advances */
.pv-chrome__dots { position: absolute; left: 12cqi; top: 3cqi; margin: 0; display: flex; gap: 2.4cqi; }
.pv-chrome__dots i { width: 2.6cqi; height: 2.6cqi; border-radius: 50%; border: 0.35cqi solid #F2C230; box-sizing: border-box; }
.pv-chrome__ind { position: absolute; left: 0; top: 0; width: 2.6cqi; height: 2.6cqi; border-radius: 50%; background: #F2C230; translate: 0 0; }
/* crate wall tag in marker, cream on black: the graffiti accent. cqw, not cqi: this child is
vertical-rl, so its inline axis is the container's block axis and cqi would fall back to the viewport */
.pv-chrome__stencil {
position: absolute; right: 5cqi; top: 4cqi; margin: 0; writing-mode: vertical-rl;
font: 400 7cqw/1 "Permanent Marker", "Trebuchet MS", Verdana, sans-serif; letter-spacing: 0.04em; color: #F4EBD9; opacity: 0.85;
}
.pv-chrome__crate { position: absolute; inset: 0; perspective: 90cqi; perspective-origin: 50% 30%; }
.pv-chrome__sl {
position: absolute; width: 50cqi; aspect-ratio: 1; box-sizing: border-box; overflow: hidden;
border: 0.45cqi solid #C9CED6; transform-origin: 50% 100%; transform: rotateX(8deg);
box-shadow: 0 -0.6cqi 1.2cqi rgba(0, 0, 0, 0.7);
}
.pv-chrome__sl b {
position: absolute; left: 5%; bottom: 4%; margin: 0; white-space: nowrap;
font: 400 11cqi/1 "Bungee Shade", Impact, "Arial Black", sans-serif; letter-spacing: 0.01em; color: #F2C230;
}
/* grain on every sleeve: a static feTurbulence tile, the street-photo texture */
.pv-chrome__sl::after {
content: ""; position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: overlay; pointer-events: none;
background: url("data:image/svg+xml;utf8,") 0 0 / 120px 120px;
}
/* sleeve 1, front: grey skyline blocks under a flat sky, RAW in gold */
.pv-chrome__sl1 {
left: 10cqi; bottom: 4cqi; z-index: 5;
background:
linear-gradient(#1a1a1a, #1a1a1a) 4% 100% / 14% 52% no-repeat,
linear-gradient(#242424, #242424) 22% 100% / 12% 70% no-repeat,
linear-gradient(#1c1c1c, #1c1c1c) 40% 100% / 18% 46% no-repeat,
linear-gradient(#282828, #282828) 66% 100% / 10% 62% no-repeat,
linear-gradient(#191919, #191919) 84% 100% / 16% 40% no-repeat,
linear-gradient(#5e5e5e, #2e2e2e);
}
.pv-chrome__sl2 { left: 12cqi; bottom: 8cqi; z-index: 4; background: linear-gradient(#F4EBD9, #F4EBD9) 0 0 / 100% 58% no-repeat, #111111; }
.pv-chrome__sl2 b { color: #C9CED6; }
/* sleeve 3, the pick: black with a grey photo band, BOOM in gold */
.pv-chrome__sl3 { left: 14cqi; bottom: 12cqi; z-index: 3; transform: rotateX(8deg) translateY(0); background: linear-gradient(#3a3a3a, #262626) 0 0 / 100% 56% no-repeat, #0d0d0d; }
.pv-chrome__sl3 b { font-size: 12.5cqi; }
.pv-chrome__sl4 { left: 16cqi; bottom: 16cqi; z-index: 2; background: #F2C230; }
.pv-chrome__sl4 b { color: #111111; }
/* the record: fully covered by BOOM at rest, gold label, grooves */
.pv-chrome__vinyl {
position: absolute; left: 16cqi; bottom: 14cqi; width: 46cqi; aspect-ratio: 1; border-radius: 50%; z-index: 1;
transform: translateX(0) rotate(0deg);
background:
radial-gradient(circle, #111111 0 2.6%, #F2C230 2.6% 30%, #0a0a0a 30% 32%, transparent 32%),
repeating-radial-gradient(circle, #141414 0 0.5cqi, #202020 0.5cqi 1.1cqi);
box-shadow: 0 0 0 0.3cqi #050505;
}
/* crate front lip with a gold edge; hides the sleeves' feet */
.pv-chrome__front { position: absolute; left: 4cqi; right: 4cqi; bottom: 0; height: 12cqi; background: #0a0a0a; border-top: 0.9cqi solid #F2C230; z-index: 6; }
@media (prefers-reduced-motion: no-preference) {
.pv-chrome__sl1 { animation: pv-chrome-flip1 7s infinite; }
.pv-chrome__sl2 { animation: pv-chrome-flip2 7s infinite; }
.pv-chrome__sl3 { animation: pv-chrome-pick 7s infinite; }
.pv-chrome__vinyl { animation: pv-chrome-vinyl 7s infinite; }
.pv-chrome__ind { animation: pv-chrome-ind 7s infinite; }
/* front sleeve tips back on beat one, hard stop; snaps upright at the end */
@keyframes pv-chrome-flip1 {
0%, 14.3% { transform: rotateX(8deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
21.4%, 81.4% { transform: rotateX(82deg); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
88.6%, 100% { transform: rotateX(8deg); }
}
@keyframes pv-chrome-flip2 {
0%, 24.3% { transform: rotateX(8deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
31.4%, 74.3% { transform: rotateX(82deg); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
80%, 100% { transform: rotateX(8deg); }
}
/* the pick: pulled up straight, held, dropped back */
@keyframes pv-chrome-pick {
0%, 37.1% { transform: rotateX(8deg) translateY(0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
42.9%, 74.3% { transform: rotateX(0deg) translateY(-6cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 1); }
80%, 100% { transform: rotateX(8deg) translateY(0); }
}
/* vinyl out of the sleeve's open side, a lazy quarter turn, then back in */
@keyframes pv-chrome-vinyl {
0%, 45.7% { transform: translateX(0) rotate(0deg); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
55.7%, 67% { transform: translateX(34cqi) rotate(40deg); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 1); }
74.3%, 100% { transform: translateX(0) rotate(0deg); }
}
/* indicator advances one dot per flipped sleeve, walks back as they return */
@keyframes pv-chrome-ind {
0%, 21.3% { translate: 0 0; }
21.4%, 31.3% { translate: 5cqi 0; }
31.4%, 79.9% { translate: 10cqi 0; }
80%, 88.5% { translate: 5cqi 0; }
88.6%, 100% { translate: 0 0; }
}
}
/* ---- STREETWEAR: the drop — the box logo stutters, the deck cuts through three colourways, SOLD OUT strikes ---- */
/* Previews v2 (2026-09-26), row 55. Resting frame IS the poster: a red box
logo "PAVE" (a fictional label, upright heavy grotesk) over a high-contrast
grainy street photo with a blurred passer-by, a skate-deck-proportion
product panel in white on the right with three colourway dots under it,
"DROP 04" bottom left. Hero: the colourway switch on a drop page. The box
logo jitters and stacks two echoes below itself; the deck hard-cuts white
to red to black as the selector dot jumps with it and the photo re-frames
on each cut; a red SOLD OUT bar strikes across. Everything is steps(1):
no easing anywhere. A hard cut back to the frame-0 lockup. 6s. */
.pv-thedrop { background: #000000; container-type: inline-size; font-family: "Archivo Black", "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif; }
/* the street: sky, three building blocks, asphalt. Greyscale, contrasty. */
.pv-thedrop__photo {
position: absolute; inset: -4%;
background:
linear-gradient(to top, #050505 0 18%, transparent 18%),
linear-gradient(#1C1C1C, #1C1C1C) 6% 100% / 18% 62% no-repeat,
linear-gradient(#2A2A2A, #2A2A2A) 36% 100% / 24% 78% no-repeat,
linear-gradient(#141414, #141414) 72% 100% / 28% 56% no-repeat,
linear-gradient(#5A5A5A, #333333 70%);
}
.pv-thedrop__fig { position: absolute; left: 44cqi; top: 34cqi; width: 12cqi; height: 30cqi; background: #0A0A0A; border-radius: 4cqi 4cqi 1cqi 1cqi; filter: blur(0.25cqi); transform: translate(0, 0); }
.pv-thedrop__fig::before { content: ""; position: absolute; left: 2.5cqi; top: -7.5cqi; width: 7cqi; height: 7cqi; border-radius: 50%; background: #0A0A0A; }
.pv-thedrop__grain {
position: absolute; inset: 0; pointer-events: none; opacity: 0.42; mix-blend-mode: overlay;
background: url("data:image/svg+xml;utf8,") 0 0 / 120px 120px;
}
/* the deck: skate proportion, rounded ends, a red band across the middle */
.pv-thedrop__deck { position: absolute; left: 66cqi; top: 5cqi; width: 23cqi; height: 60cqi; border-radius: 11.5cqi; background: #FFFFFF; box-shadow: 0 0 0 0.8cqi #000000; }
.pv-thedrop__deck::before { content: ""; position: absolute; left: 0; right: 0; top: 26cqi; height: 8cqi; background: #E4002B; }
.pv-thedrop__dot { position: absolute; left: var(--dl); top: 68.5cqi; width: 4cqi; height: 4cqi; border-radius: 50%; background: var(--dc); box-shadow: 0 0 0 0.5cqi #FFFFFF; }
.pv-thedrop__sel { position: absolute; left: 68.6cqi; top: 67.1cqi; width: 6.8cqi; height: 6.8cqi; box-sizing: border-box; border-radius: 50%; border: 0.7cqi solid #E4002B; transform: translate(0, 0); }
/* the box logo and its two echoes (echoes hidden at rest) */
.pv-thedrop__box {
position: absolute; left: 6cqi; top: 14cqi; width: 44cqi; height: 12.5cqi; background: #E4002B; color: #FFFFFF;
font: 400 8.8cqi/12.5cqi "Archivo Black", "Arial Black", Impact, sans-serif; text-align: center; letter-spacing: 0.02em; transform: translate(0, 0);
}
.pv-thedrop__echo1 { top: 28.5cqi; opacity: 0; }
.pv-thedrop__echo2 { top: 43cqi; opacity: 0; }
.pv-thedrop__drop { position: absolute; left: 6cqi; bottom: 6cqi; color: #FFFFFF; font: 400 7cqi/1 "Archivo Black", "Arial Black", Impact, sans-serif; letter-spacing: 0.04em; }
.pv-thedrop__strike {
position: absolute; left: -12cqi; top: 30cqi; width: 124cqi; height: 15cqi; background: #E4002B; color: #FFFFFF;
font: 400 9.5cqi/15cqi "Archivo Black", "Arial Black", Impact, sans-serif; text-align: center; letter-spacing: 0.06em;
transform: rotate(-14deg); opacity: 0; z-index: 3;
}
@media (prefers-reduced-motion: no-preference) {
.pv-thedrop__main { animation: pv-thedrop-stutter 6s steps(1) infinite; }
.pv-thedrop__echo1 { animation: pv-thedrop-echo1 6s steps(1) infinite; }
.pv-thedrop__echo2 { animation: pv-thedrop-echo2 6s steps(1) infinite; }
.pv-thedrop__deck { animation: pv-thedrop-way 6s steps(1) infinite; }
.pv-thedrop__sel { animation: pv-thedrop-sel 6s steps(1) infinite; }
.pv-thedrop__fig { animation: pv-thedrop-reframe 6s steps(1) infinite; }
.pv-thedrop__strike { animation: pv-thedrop-strike 6s steps(1) infinite; }
/* the box jitters on the beat, then locks */
@keyframes pv-thedrop-stutter {
0%, 17% { transform: translate(0, 0); }
19% { transform: translate(1.4cqi, -0.6cqi); }
21% { transform: translate(-1cqi, 0.5cqi); }
23% { transform: translate(0.8cqi, 0.9cqi); }
25% { transform: translate(0, 0); }
27% { transform: translate(-1.4cqi, -0.4cqi); }
29% { transform: translate(0, 0); }
100% { transform: translate(0, 0); }
}
/* echoes flick on, drop out, come back, and stack until the cut at 48% */
@keyframes pv-thedrop-echo1 {
0% { opacity: 0; }
19% { opacity: 1; }
22% { opacity: 0; }
24% { opacity: 1; }
48% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes pv-thedrop-echo2 {
0% { opacity: 0; }
21% { opacity: 1; }
23% { opacity: 0; }
27% { opacity: 1; }
48% { opacity: 0; }
100% { opacity: 0; }
}
/* three colourways, hard cuts; the black one gets a white outline */
@keyframes pv-thedrop-way {
0% { background: #FFFFFF; box-shadow: 0 0 0 0.8cqi #000000; }
33% { background: #E4002B; box-shadow: 0 0 0 0.8cqi #000000; }
46% { background: #000000; box-shadow: 0 0 0 0.8cqi #FFFFFF; }
59% { background: #FFFFFF; box-shadow: 0 0 0 0.8cqi #000000; }
100% { background: #FFFFFF; box-shadow: 0 0 0 0.8cqi #000000; }
}
@keyframes pv-thedrop-sel {
0% { transform: translate(0, 0); }
33% { transform: translate(6cqi, 0); }
46% { transform: translate(12cqi, 0); }
59% { transform: translate(0, 0); }
100% { transform: translate(0, 0); }
}
/* the candid re-frames on each cut, like a different photo from the roll */
@keyframes pv-thedrop-reframe {
0% { transform: translate(0, 0); }
33% { transform: translate(7cqi, 1cqi); }
46% { transform: translate(-9cqi, -1cqi); }
59% { transform: translate(0, 0); }
100% { transform: translate(0, 0); }
}
@keyframes pv-thedrop-strike {
0% { opacity: 0; }
67% { opacity: 1; }
100% { opacity: 0; }
}
}
/* ---- WESTERN: the order button is a branding iron; the maker's mark burns into the leather ---- */
/* Previews v2 (2026-09-26), row 66. Resting frame IS the poster: a tooled
saddle-leather panel with a tan border and stitched inner line, SADDLERY in
shaded woodtype, a rust ribbon banner reading ORDER, the maker's H in a ring
pressed faintly tone-on-tone into the hide, and a strip of denim with two
rows of contrast stitching along the foot. The hero moment: a branding iron
drops in from above, presses (the ring occludes the mark, the leather
scorches), lifts, and the mark is left glowing ember-orange while two wisps
of smoke rise; the banner changes to MADE TO ORDER as the confirmation.
7s cycle; the ember cools through char back to the faint tooled mark. */
.pv-press { background: radial-gradient(ellipse at 30% 20%, rgba(255, 220, 170, 0.12), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(0, 0, 0, 0.25), transparent 50%), #7A4A2A; container-type: inline-size; }
.pv-press__tool { position: absolute; inset: 3cqi 3cqi 15cqi 3cqi; border: 0.6cqi solid #D2B48C; border-radius: 0.8cqi; outline: 0.35cqi dashed rgba(210, 180, 140, 0.75); outline-offset: -2cqi; }
.pv-press__head { position: absolute; left: 0; right: 0; top: 6cqi; text-align: center; font: 400 11cqi/1 "Rye", "PvBungeeShade", Impact, "Arial Black", serif; letter-spacing: 0.02em; color: #EFE3CC; white-space: nowrap; }
.pv-press__banner { position: absolute; left: 50%; top: 21cqi; width: 58cqi; height: 7.5cqi; margin-left: -29cqi; background: #9B2226; }
.pv-press__end { position: absolute; top: 1.2cqi; width: 6cqi; height: 100%; background: #6E1418; }
.pv-press__end--l { left: -4.6cqi; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.pv-press__end--r { right: -4.6cqi; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.pv-press__lbl { position: absolute; inset: 0; display: grid; place-items: center; font: 700 5.4cqi/1 "Arvo", Georgia, "Times New Roman", serif; letter-spacing: 0.18em; text-transform: uppercase; color: #EFE3CC; white-space: nowrap; }
.pv-press__lbl--done { opacity: 0; font-size: 5.1cqi; letter-spacing: 0.08em; }
.pv-press__scorch { position: absolute; left: 50%; top: 30cqi; width: 26cqi; height: 26cqi; margin-left: -13cqi; border-radius: 50%; background: radial-gradient(circle, rgba(20, 8, 2, 0.75), transparent 68%); opacity: 0; }
/* the mark: faint tooled impression at rest; currentColor drives the ring */
.pv-press__mark { position: absolute; left: 50%; top: 33cqi; width: 20cqi; height: 20cqi; margin-left: -10cqi; box-sizing: border-box; border: 1cqi solid currentColor; border-radius: 50%; display: grid; place-items: center; color: rgba(72, 38, 18, 0.8); text-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent, inset 0 0 0 transparent; }
.pv-press__mark span { font: 400 11cqi/1 "PvMarcellus", "Times New Roman", serif; }
.pv-press__smoke { position: absolute; left: 50%; top: 39cqi; width: 8cqi; height: 8cqi; margin-left: -4cqi; border-radius: 50%; background: rgba(239, 227, 204, 0.55); filter: blur(1.5cqi); opacity: 0; transform: translate(0, 0) scale(0.6); }
/* the iron: a dark rod off the top of the panel at rest, its ring head hanging
10cqi below the rod's foot so the head lands dead on the mark */
.pv-press__iron { position: absolute; left: 50%; top: -90cqi; width: 2.4cqi; height: 70cqi; margin-left: -1.2cqi; background: linear-gradient(90deg, #1F1815, #5B4B44 45%, #1F1815); }
.pv-press__iron i { position: absolute; left: 50%; bottom: -10cqi; width: 20cqi; height: 20cqi; margin-left: -10cqi; box-sizing: border-box; border: 1.2cqi solid #2A211D; border-radius: 50%; background: rgba(31, 24, 21, 0.35); display: grid; place-items: center; font: 400 11cqi/1 "PvMarcellus", "Times New Roman", serif; font-style: normal; color: #2A211D; }
.pv-press__denim { position: absolute; left: 0; right: 0; bottom: 0; height: 12cqi; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px), #3E5A7A; border-top: 0.5cqi dashed #D2B48C; }
.pv-press__denim::after { content: ""; position: absolute; left: 0; right: 0; top: 1.6cqi; border-top: 0.5cqi dashed #D2B48C; }
@media (prefers-reduced-motion: no-preference) {
.pv-press__iron { animation: pv-press-iron 7s infinite; }
.pv-press__mark { animation: pv-press-ember 7s infinite; }
.pv-press__scorch { animation: pv-press-scorch 7s infinite; }
.pv-press__smoke--a { animation: pv-press-smokea 7s infinite; }
.pv-press__smoke--b { animation: pv-press-smokeb 7s infinite; }
.pv-press__lbl--rest { animation: pv-press-lblrest 7s infinite; }
.pv-press__lbl--done { animation: pv-press-lbldone 7s infinite; }
/* heavy drop, a lean into the press, a slower lift */
@keyframes pv-press-iron {
0%, 14% { top: -90cqi; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.5); }
30% { top: -27cqi; animation-timing-function: ease-in-out; }
34% { top: -26.3cqi; animation-timing-function: ease-in-out; }
43% { top: -27cqi; animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1); }
56%, 100% { top: -90cqi; }
}
/* faint tooled, ignite under the iron, peak ember once it lifts, cool
through char, back to faint */
@keyframes pv-press-ember {
0%, 29% { color: rgba(72, 38, 18, 0.8); text-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent, inset 0 0 0 transparent; animation-timing-function: ease-in; }
43% { color: #FF7A1A; text-shadow: 0 0 0.5cqi #FFC07A, 0 0 2cqi #FF5A00; box-shadow: 0 0 2.5cqi rgba(255, 90, 0, 0.6), inset 0 0 1.5cqi rgba(255, 120, 30, 0.6); animation-timing-function: ease-out; }
58% { color: #FFA040; text-shadow: 0 0 0.6cqi #FFE0B0, 0 0 2.6cqi #FF6A00; box-shadow: 0 0 3.2cqi rgba(255, 110, 0, 0.7), inset 0 0 2cqi rgba(255, 150, 60, 0.7); animation-timing-function: ease-in-out; }
78% { color: #2A1206; text-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent, inset 0 0 0 transparent; animation-timing-function: ease-out; }
100% { color: rgba(72, 38, 18, 0.8); text-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent, inset 0 0 0 transparent; }
}
@keyframes pv-press-scorch {
0%, 30% { opacity: 0; }
45%, 62% { opacity: 0.7; }
100% { opacity: 0; }
}
/* smoke: born at the mark once the iron lifts, rises, thins; the reset to
the start position happens while invisible */
@keyframes pv-press-smokea {
0%, 42% { opacity: 0; transform: translate(0, 0) scale(0.6); animation-timing-function: ease-out; }
48% { opacity: 0.5; transform: translate(0.6cqi, -5cqi) scale(0.9); animation-timing-function: ease-out; }
70% { opacity: 0; transform: translate(3cqi, -24cqi) scale(1.8); }
70.1%, 100% { opacity: 0; transform: translate(0, 0) scale(0.6); }
}
@keyframes pv-press-smokeb {
0%, 50% { opacity: 0; transform: translate(0, 0) scale(0.6); animation-timing-function: ease-out; }
56% { opacity: 0.4; transform: translate(-0.6cqi, -5cqi) scale(0.9); animation-timing-function: ease-out; }
80% { opacity: 0; transform: translate(-4cqi, -26cqi) scale(2); }
80.1%, 100% { opacity: 0; transform: translate(0, 0) scale(0.6); }
}
@keyframes pv-press-lblrest {
0%, 44% { opacity: 1; }
52%, 84% { opacity: 0; }
92%, 100% { opacity: 1; }
}
@keyframes pv-press-lbldone {
0%, 50% { opacity: 0; }
58%, 82% { opacity: 1; }
90%, 100% { opacity: 0; }
}
}
/* ---- DARK ACADEMIA: the cursor carries the candle; the page is only legible where the light is ---- */
/* Previews v2 (2026-09-26), row 16. Resting frame IS the poster: a near-dark
library shelf behind an engraved brass frame, SAPERE AUDE half-lit by a warm
pool of light sitting left of centre; the masthead and the menu are there
but lost in the dark. The hero moment: the light pool follows the cursor up
to MARGINALIA, across the shelf and down to the menu, revealing brass items
as it passes; it rests on Read, whose underline grows in. 9s cycle; the
light drifts back to its frame-0 position and the underline withdraws.
The flame flickers at component rate on its own child. */
.pv-lamp { background: #0B0705; container-type: inline-size; font-family: "EB Garamond", Georgia, "Times New Roman", serif; }
/* the shelf: spines in oxblood, forest and leather with brass bands, a plank, then floor */
.pv-lamp__shelf {
position: absolute; inset: 0;
background: #0d0806 url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat;
}
/* engraved ornament: brass double rule with corner curls and a centre cartouche */
.pv-lamp__frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; fill: none; stroke: #A67C3D; stroke-width: 1.3; stroke-linecap: round; }
.pv-lamp__masthead, .pv-lamp__latin, .pv-lamp__menu { position: absolute; left: 0; right: 0; margin: 0; text-align: center; white-space: nowrap; }
.pv-lamp__masthead { top: 9.5%; font-size: 7.5cqi; font-weight: 500; letter-spacing: 0.26em; color: #A67C3D; }
.pv-lamp__latin { top: 34%; font-size: 12cqi; font-weight: 500; line-height: 1; letter-spacing: 0.05em; color: #E8DCC4; }
.pv-lamp__menu { bottom: 13%; display: flex; justify-content: center; gap: 7cqi; font: italic 500 7cqi/1 "EB Garamond", Georgia, "Times New Roman", serif; color: #A67C3D; }
.pv-lamp__menu span { position: relative; }
.pv-lamp__read::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em; height: 0.07em; background: #A67C3D; transform: scaleX(0); transform-origin: 0 50%; }
/* the light: a 3x oversized carrier so the hole never shows an edge; its centre
rests at (28cqi, 37.5cqi), left of the phrase, which is the poster's half-light */
.pv-lamp__light { position: absolute; left: 0; top: 0; width: 300cqi; height: 300cqi; translate: -122cqi -112.5cqi; pointer-events: none; }
.pv-lamp__dark {
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(8, 5, 3, 0) 9cqi, rgba(8, 5, 3, 0.5) 20cqi, rgba(8, 5, 3, 0.9) 34cqi, rgba(8, 5, 3, 0.965) 52cqi);
}
.pv-lamp__glow {
position: absolute; inset: 0; transform: scale(1); opacity: 1; mix-blend-mode: screen;
background: radial-gradient(circle at 50% 50%, rgba(214, 160, 84, 0.34) 0, rgba(166, 124, 61, 0.14) 10cqi, rgba(166, 124, 61, 0) 22cqi);
}
/* the cursor rides the light's centre; invisible in the poster */
.pv-lamp__cur {
position: absolute; left: 50%; top: 50%; width: 3.6cqi; aspect-ratio: 13 / 20; opacity: 0;
background: #E8DCC4; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%);
filter: drop-shadow(0 0 0.4cqi rgba(0, 0, 0, 0.8));
}
@media (prefers-reduced-motion: no-preference) {
.pv-lamp__light { animation: pv-lamp-carry 9s infinite; }
.pv-lamp__cur { animation: pv-lamp-cur 9s infinite; }
.pv-lamp__read::after { animation: pv-lamp-rule 9s infinite; }
.pv-lamp__glow { animation: pv-lamp-flicker 0.7s infinite; } /* component-rate: a candle flame wavers several times a second; a 5s flicker reads as a dimmer switch */
/* the pool: hold, rise to the masthead, drift right along the shelf, settle on Read, hold, ease home */
@keyframes pv-lamp-carry {
0%, 16.7% { translate: -122cqi -112.5cqi; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
33% { translate: -100cqi -141cqi; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
49% { translate: -74cqi -112cqi; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
61%, 83% { translate: -73cqi -88cqi; animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
100% { translate: -122cqi -112.5cqi; }
}
@keyframes pv-lamp-cur {
0%, 16.7% { opacity: 0; }
21%, 88% { opacity: 1; }
95%, 100% { opacity: 0; }
}
/* the Read link takes its underline while the light rests on it */
@keyframes pv-lamp-rule {
0%, 62% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
69%, 83% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.6, 0, 0.7, 1); }
90%, 100% { transform: scaleX(0); }
}
@keyframes pv-lamp-flicker {
0%, 100% { transform: scale(1); opacity: 1; }
28% { transform: scale(1.035); opacity: 0.88; }
52% { transform: scale(0.98); opacity: 1; }
76% { transform: scale(1.02); opacity: 0.93; }
}
}
/* ---- ARCADE: the sprite plays the nav like a level and beats the high score; GAME OVER wipes back to attract ---- */
/* Previews v2 (2026-09-26), row 4. Resting frame IS the poster: the attract
screen of an indie studio's homepage — 1UP 03 / HI 08 / CREDIT 0 in
the HUD, three magenta nav blocks WORK ABOUT PLAY floating over a cyan
floor, the pixel sprite idling at the left, INSERT COIN blinking, scanlines.
Hero: CREDIT ticks to 1, the sprite runs the floor in stepped frames and
head-bumps each nav block; each bump pops a coin and the 1UP counter
steps 3-5-7-9, passing HI 08, and NEW HIGH SCORE flashes. Loop: a black
GAME OVER panel wipes in from the right and hard-cuts to the attract screen
with the counters reset. 7s cycle, every move on steps(). */
/* no cqi on the root: it is the container, so cqi there would resolve against the viewport */
/* Press Start 2P is 400 only and every glyph is a full em wide: the HUD carries two-digit counters and sits at 4.8cqi with the tracking pulled in */
.pv-cabinet { background: #000; container-type: inline-size; font-family: "Press Start 2P", "Courier New", monospace; font-weight: 400; color: #00E5FF; text-transform: uppercase; }
.pv-cabinet p { margin: 0; font-size: 4.8cqi; line-height: 1; letter-spacing: -0.06em; }
.pv-cabinet b { font-weight: 400; }
.pv-cabinet__hud { position: absolute; left: 4%; right: 4%; top: 7%; display: flex; justify-content: space-between; white-space: nowrap; }
.pv-cabinet__hi { color: #FFE600; }
.pv-cabinet__cr { color: #F2F2F2; }
.pv-cabinet__strip { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.pv-cabinet__strip b { display: block; line-height: 1; transform: translateY(0); }
/* attract: INSERT COIN blinks at component rate; the wrapper hides it during play */
.pv-cabinet__attract { position: absolute; left: 0; right: 0; top: 24%; text-align: center; opacity: 1; }
.pv-cabinet__insert { color: #FFE600; font-size: 6cqi; letter-spacing: 0; opacity: 1; }
/* the nav is the level: three pixel blocks the sprite has to hit */
.pv-cabinet__blk {
position: absolute; left: calc(6% + var(--k) * 31%); top: 46%; width: 26%; height: 13%;
display: grid; place-items: center; background: #FF2E88; color: #000; font-size: 4.8cqi; letter-spacing: -0.04em;
box-shadow: 0 0 0 0.9cqi #000, 0 0 0 1.5cqi #FF2E88;
}
/* coins live above each block, hidden until the bump */
.pv-cabinet__gold { position: absolute; top: 46%; width: 4cqi; height: 4cqi; background: #FFE600; opacity: 0; transform: translateY(0); box-shadow: inset -1.1cqi -1.1cqi 0 #000; }
.pv-cabinet__gold0 { left: calc(19% - 2cqi); }
.pv-cabinet__gold1 { left: calc(50% - 2cqi); }
.pv-cabinet__gold2 { left: calc(81% - 2cqi); }
.pv-cabinet__floor { position: absolute; left: 0; right: 0; top: 78%; height: 1.1cqi; background: #00E5FF; }
/* sprite: 8x8 box-shadow pixels, two run frames swapped at component rate */
.pv-cabinet__run { position: absolute; left: 3%; bottom: 22%; width: 9cqi; height: 9cqi; }
.pv-cabinet__jump { position: absolute; inset: 0; transform: translateY(0); }
.pv-cabinet__pxa, .pv-cabinet__pxb { position: absolute; left: 0; top: 0; width: 1.125cqi; height: 1.125cqi; background: transparent; }
.pv-cabinet__pxa { opacity: 1; box-shadow: calc(2 * 1.125cqi) calc(0 * 1.125cqi) 0 #00E5FF, calc(3 * 1.125cqi) calc(0 * 1.125cqi) 0 #00E5FF, calc(4 * 1.125cqi) calc(0 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(0 * 1.125cqi) 0 #00E5FF, calc(1 * 1.125cqi) calc(1 * 1.125cqi) 0 #00E5FF, calc(2 * 1.125cqi) calc(1 * 1.125cqi) 0 #00E5FF, calc(3 * 1.125cqi) calc(1 * 1.125cqi) 0 #00E5FF, calc(4 * 1.125cqi) calc(1 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(1 * 1.125cqi) 0 #00E5FF, calc(6 * 1.125cqi) calc(1 * 1.125cqi) 0 #00E5FF, calc(0 * 1.125cqi) calc(2 * 1.125cqi) 0 #00E5FF, calc(1 * 1.125cqi) calc(2 * 1.125cqi) 0 #00E5FF, calc(3 * 1.125cqi) calc(2 * 1.125cqi) 0 #00E5FF, calc(4 * 1.125cqi) calc(2 * 1.125cqi) 0 #00E5FF, calc(6 * 1.125cqi) calc(2 * 1.125cqi) 0 #00E5FF, calc(7 * 1.125cqi) calc(2 * 1.125cqi) 0 #00E5FF, calc(0 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(1 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(2 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(3 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(4 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(6 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(7 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(1 * 1.125cqi) calc(4 * 1.125cqi) 0 #00E5FF, calc(2 * 1.125cqi) calc(4 * 1.125cqi) 0 #00E5FF, calc(3 * 1.125cqi) calc(4 * 1.125cqi) 0 #00E5FF, calc(4 * 1.125cqi) calc(4 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(4 * 1.125cqi) 0 #00E5FF, calc(6 * 1.125cqi) calc(4 * 1.125cqi) 0 #00E5FF, calc(2 * 1.125cqi) calc(5 * 1.125cqi) 0 #00E5FF, calc(3 * 1.125cqi) calc(5 * 1.125cqi) 0 #00E5FF, calc(4 * 1.125cqi) calc(5 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(5 * 1.125cqi) 0 #00E5FF, calc(1 * 1.125cqi) calc(6 * 1.125cqi) 0 #00E5FF, calc(2 * 1.125cqi) calc(6 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(6 * 1.125cqi) 0 #00E5FF, calc(6 * 1.125cqi) calc(6 * 1.125cqi) 0 #00E5FF, calc(0 * 1.125cqi) calc(7 * 1.125cqi) 0 #00E5FF, calc(1 * 1.125cqi) calc(7 * 1.125cqi) 0 #00E5FF, calc(6 * 1.125cqi) calc(7 * 1.125cqi) 0 #00E5FF, calc(7 * 1.125cqi) calc(7 * 1.125cqi) 0 #00E5FF; }
.pv-cabinet__pxb { opacity: 0; box-shadow: calc(2 * 1.125cqi) calc(0 * 1.125cqi) 0 #00E5FF, calc(3 * 1.125cqi) calc(0 * 1.125cqi) 0 #00E5FF, calc(4 * 1.125cqi) calc(0 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(0 * 1.125cqi) 0 #00E5FF, calc(1 * 1.125cqi) calc(1 * 1.125cqi) 0 #00E5FF, calc(2 * 1.125cqi) calc(1 * 1.125cqi) 0 #00E5FF, calc(3 * 1.125cqi) calc(1 * 1.125cqi) 0 #00E5FF, calc(4 * 1.125cqi) calc(1 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(1 * 1.125cqi) 0 #00E5FF, calc(6 * 1.125cqi) calc(1 * 1.125cqi) 0 #00E5FF, calc(0 * 1.125cqi) calc(2 * 1.125cqi) 0 #00E5FF, calc(1 * 1.125cqi) calc(2 * 1.125cqi) 0 #00E5FF, calc(3 * 1.125cqi) calc(2 * 1.125cqi) 0 #00E5FF, calc(4 * 1.125cqi) calc(2 * 1.125cqi) 0 #00E5FF, calc(6 * 1.125cqi) calc(2 * 1.125cqi) 0 #00E5FF, calc(7 * 1.125cqi) calc(2 * 1.125cqi) 0 #00E5FF, calc(0 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(1 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(2 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(3 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(4 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(6 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(7 * 1.125cqi) calc(3 * 1.125cqi) 0 #00E5FF, calc(1 * 1.125cqi) calc(4 * 1.125cqi) 0 #00E5FF, calc(2 * 1.125cqi) calc(4 * 1.125cqi) 0 #00E5FF, calc(3 * 1.125cqi) calc(4 * 1.125cqi) 0 #00E5FF, calc(4 * 1.125cqi) calc(4 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(4 * 1.125cqi) 0 #00E5FF, calc(6 * 1.125cqi) calc(4 * 1.125cqi) 0 #00E5FF, calc(2 * 1.125cqi) calc(5 * 1.125cqi) 0 #00E5FF, calc(3 * 1.125cqi) calc(5 * 1.125cqi) 0 #00E5FF, calc(4 * 1.125cqi) calc(5 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(5 * 1.125cqi) 0 #00E5FF, calc(2 * 1.125cqi) calc(6 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(6 * 1.125cqi) 0 #00E5FF, calc(1 * 1.125cqi) calc(7 * 1.125cqi) 0 #00E5FF, calc(2 * 1.125cqi) calc(7 * 1.125cqi) 0 #00E5FF, calc(5 * 1.125cqi) calc(7 * 1.125cqi) 0 #00E5FF, calc(6 * 1.125cqi) calc(7 * 1.125cqi) 0 #00E5FF; }
/* the payoff line, hidden until 1UP passes HI */
.pv-cabinet__new { position: absolute; left: 0; right: 0; top: 24%; text-align: center; color: #FFE600; font-size: 6cqi; letter-spacing: 0; opacity: 0; }
/* CRT scanlines: hard stops, no gradient */
.pv-cabinet__scan { position: absolute; inset: 0; pointer-events: none; opacity: 0.45; background: repeating-linear-gradient(to bottom, transparent 0 0.9cqi, #000 0.9cqi 1.35cqi); }
/* GAME OVER panel: rests fully off the right edge */
.pv-cabinet__over { position: absolute; inset: 0; display: grid; place-items: center; background: #000; color: #FF2E88; font-size: 9cqi; letter-spacing: 0; transform: translateX(102%); }
@media (prefers-reduced-motion: no-preference) {
.pv-cabinet__insert { animation: pv-cab-blink 0.9s steps(1) infinite; } /* component-rate: INSERT COIN blinks at attract-screen cadence; a 5s blink is not a blink */
.pv-cabinet__pxb { animation: pv-cab-legb 0.3s steps(1) infinite; } /* component-rate: 8-bit run cycle, two frames swapped at ~7fps */
.pv-cabinet__pxa { animation: pv-cab-lega 0.3s steps(1) infinite; } /* component-rate: 8-bit run cycle, two frames swapped at ~7fps */
.pv-cabinet__attract { animation: pv-cab-attract 7s steps(1) infinite; }
.pv-cabinet__credit b { animation: pv-cab-credit 7s steps(1) infinite; }
.pv-cabinet__score b { animation: pv-cab-score 7s steps(1) infinite; }
.pv-cabinet__run { animation: pv-cab-run 7s infinite; }
.pv-cabinet__jump { animation: pv-cab-jump 7s infinite; }
.pv-cabinet__gold0 { animation: pv-cab-coin0 7s infinite; }
.pv-cabinet__gold1 { animation: pv-cab-coin1 7s infinite; }
.pv-cabinet__gold2 { animation: pv-cab-coin2 7s infinite; }
.pv-cabinet__new { animation: pv-cab-new 7s steps(1) infinite; }
.pv-cabinet__over { animation: pv-cab-over 7s infinite; }
@keyframes pv-cab-blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pv-cab-lega { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pv-cab-legb { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
/* the attract line leaves when the credit drops, returns under the wipe */
@keyframes pv-cab-attract { 0%, 20.9% { opacity: 1; } 21%, 94.9% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes pv-cab-credit { 0%, 20.9% { transform: translateY(0); } 21%, 94.9% { transform: translateY(-1em); } 95%, 100% { transform: translateY(0); } }
/* 1UP: 3 -> 5 -> 7 -> 9, one step per coin; the 9 passes HI 08 */
@keyframes pv-cab-score {
0%, 31.9% { transform: translateY(0); }
32%, 43.9% { transform: translateY(-1em); }
44%, 55.9% { transform: translateY(-2em); }
56%, 94.9% { transform: translateY(-3em); }
95%, 100% { transform: translateY(0); }
}
/* run: three stepped dashes, stop under each block, exit right, reset under the wipe */
@keyframes pv-cab-run {
0%, 22% { left: 3%; animation-timing-function: steps(6, end); }
30%, 34% { left: 14.5%; animation-timing-function: steps(6, end); }
42%, 46% { left: 45.5%; animation-timing-function: steps(6, end); }
54%, 58% { left: 76.5%; animation-timing-function: steps(6, end); }
66%, 94.9% { left: 92%; }
95%, 100% { left: 3%; }
}
/* jump: two frames up, hang, two frames down; head meets the block underside */
@keyframes pv-cab-jump {
0%, 30% { transform: translateY(0); animation-timing-function: steps(2, end); }
32% { transform: translateY(-6.5cqi); animation-timing-function: steps(2, end); }
34%, 42% { transform: translateY(0); animation-timing-function: steps(2, end); }
44% { transform: translateY(-6.5cqi); animation-timing-function: steps(2, end); }
46%, 54% { transform: translateY(0); animation-timing-function: steps(2, end); }
56% { transform: translateY(-6.5cqi); animation-timing-function: steps(2, end); }
58%, 100% { transform: translateY(0); }
}
/* coins: pop up in four steps and vanish */
@keyframes pv-cab-coin0 {
0%, 31.9% { opacity: 0; transform: translateY(0); }
32% { opacity: 1; transform: translateY(0); animation-timing-function: steps(4, end); }
37% { opacity: 1; transform: translateY(-9cqi); }
37.1%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes pv-cab-coin1 {
0%, 43.9% { opacity: 0; transform: translateY(0); }
44% { opacity: 1; transform: translateY(0); animation-timing-function: steps(4, end); }
49% { opacity: 1; transform: translateY(-9cqi); }
49.1%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes pv-cab-coin2 {
0%, 55.9% { opacity: 0; transform: translateY(0); }
56% { opacity: 1; transform: translateY(0); animation-timing-function: steps(4, end); }
61% { opacity: 1; transform: translateY(-9cqi); }
61.1%, 100% { opacity: 0; transform: translateY(0); }
}
/* NEW HIGH SCORE: on/off at 0.35s */
@keyframes pv-cab-new {
0%, 59.9% { opacity: 0; }
60%, 64.9% { opacity: 1; } 65%, 69.9% { opacity: 0; }
70%, 74.9% { opacity: 1; } 75%, 79.9% { opacity: 0; }
80%, 84.9% { opacity: 1; } 85%, 89.9% { opacity: 0; }
90%, 94.9% { opacity: 1; }
95%, 100% { opacity: 0; }
}
/* wipe: the panel steps in from the right, covers the reset, hard-cuts away at 100% */
@keyframes pv-cab-over {
0%, 91% { transform: translateX(102%); animation-timing-function: steps(6, end); }
94%, 99.9% { transform: translateX(0); }
100% { transform: translateX(102%); }
}
}
/* ---- WEB BRUTALISM: the cursor walks the page and every box it touches shows its outline, then rows invert ---- */
/* Previews v2 (2026-09-26), row 65, artist collective. Resting frame IS the
poster: white page, a huge Times NOTICE with a hard rule under it, a Courier
nav line, a three-row table with hairline rules, one blue underlined link,
not a radius anywhere. Hero: a black cursor jumps down the page in steps;
each box it lands on gets a 1.2cqi black outline, then the table rows invert
to black one after another and the link inverts blue. Loop: a hard cut back
to frame 0. 6s, steps(1) everywhere, no easing at all. */
.pv-stripped { background: #fff; container-type: inline-size; color: #000; font-family: "Times New Roman", "Times", serif; }
.pv-stripped__head { position: absolute; left: 4cqi; right: 4cqi; top: 2cqi; margin: 0; display: block; font-weight: 700; font-size: 21cqi; line-height: 1; letter-spacing: -0.02em; padding-bottom: 1cqi; border-bottom: 0.9cqi solid #000; outline: 0 solid #000; outline-offset: -0.6cqi; }
.pv-stripped__nav { position: absolute; left: 4cqi; right: 4cqi; top: 27cqi; height: 7cqi; margin: 0; display: flex; align-items: center; gap: 4cqi; font: 5.5cqi/1 "Courier New", "Courier", monospace; border-bottom: 0.4cqi solid #000; outline: 0 solid #000; outline-offset: -0.6cqi; }
.pv-stripped__nav span:first-child { text-decoration: underline; }
.pv-stripped__table { position: absolute; left: 4cqi; right: 4cqi; top: 36cqi; }
.pv-stripped__row { display: flex; align-items: center; gap: 3cqi; height: 8cqi; padding: 0 1cqi; box-sizing: border-box; border-bottom: 0.4cqi solid #000; font: 5.5cqi/1 "Courier New", "Courier", monospace; font-style: normal; background: #fff; color: #000; outline: 0 solid #000; outline-offset: -0.6cqi; }
.pv-stripped__row b { font-weight: 700; }
.pv-stripped__link { position: absolute; left: 4cqi; top: 63cqi; padding: 0.6cqi 1cqi; font: 5.5cqi/1 "Courier New", "Courier", monospace; color: #0000FF; background: #fff; text-decoration: underline; outline: 0 solid #000; outline-offset: -0.6cqi; }
.pv-stripped__cur { position: absolute; left: 110%; top: 110%; width: 7cqi; aspect-ratio: 14 / 19; background: #000; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%); filter: drop-shadow(0.4cqi 0 0 #fff) drop-shadow(-0.4cqi 0 0 #fff) drop-shadow(0 0.4cqi 0 #fff) drop-shadow(0 -0.4cqi 0 #fff); }
@media (prefers-reduced-motion: no-preference) {
.pv-stripped__cur { animation: pv-stripped-cur 6s steps(1, end) infinite; }
.pv-stripped__head { animation: pv-stripped-head 6s steps(1, end) infinite; }
.pv-stripped__nav { animation: pv-stripped-nav 6s steps(1, end) infinite; }
.pv-stripped__row--1 { animation: pv-stripped-r1 6s steps(1, end) infinite; }
.pv-stripped__row--2 { animation: pv-stripped-r2 6s steps(1, end) infinite; }
.pv-stripped__row--3 { animation: pv-stripped-r3 6s steps(1, end) infinite; }
.pv-stripped__link { animation: pv-stripped-link 6s steps(1, end) infinite; }
/* 0-1s poster · 1-3.6s cursor steps down, outlines · 4-5.4s inverts · 6s hard cut */
@keyframes pv-stripped-cur {
0% { left: 110%; top: 110%; }
17% { left: 78cqi; top: 12cqi; }
33% { left: 40cqi; top: 29cqi; }
45% { left: 62cqi; top: 38cqi; }
52% { left: 64cqi; top: 46cqi; }
60% { left: 60cqi; top: 54cqi; }
67% { left: 62cqi; top: 46cqi; }
75% { left: 64cqi; top: 54cqi; }
83% { left: 60cqi; top: 46cqi; }
90% { left: 30cqi; top: 65cqi; }
100% { left: 110%; top: 110%; }
}
@keyframes pv-stripped-head { 0% { outline-width: 0; } 17% { outline-width: 1.2cqi; } 100% { outline-width: 0; } }
@keyframes pv-stripped-nav { 0% { outline-width: 0; } 33% { outline-width: 1.2cqi; } 100% { outline-width: 0; } }
@keyframes pv-stripped-r1 {
0% { outline-width: 0; background: #fff; color: #000; }
45% { outline-width: 1.2cqi; background: #fff; color: #000; }
67% { outline-width: 1.2cqi; background: #000; color: #fff; }
100% { outline-width: 0; background: #fff; color: #000; }
}
@keyframes pv-stripped-r2 {
0% { outline-width: 0; background: #fff; color: #000; }
52% { outline-width: 1.2cqi; background: #fff; color: #000; }
75% { outline-width: 1.2cqi; background: #000; color: #fff; }
100% { outline-width: 0; background: #fff; color: #000; }
}
@keyframes pv-stripped-r3 {
0% { outline-width: 0; background: #fff; color: #000; }
60% { outline-width: 1.2cqi; background: #fff; color: #000; }
83% { outline-width: 1.2cqi; background: #000; color: #fff; }
100% { outline-width: 0; background: #fff; color: #000; }
}
@keyframes pv-stripped-link {
0% { outline-width: 0; background: #fff; color: #0000FF; }
90% { outline-width: 1.2cqi; background: #0000FF; color: #fff; }
100% { outline-width: 0; background: #fff; color: #0000FF; }
}
}
/* ---- UTILITARIAN: four links, four instant page swaps, no transition anywhere ---- */
/* Previews v2 (2026-09-26), row 61. Resting frame IS the poster: a white page,
a plain nav of default-blue links (Hours already visited purple), a bold
"Opening hours" heading and a three-line list in the system sans, a black
cursor. Hero: the cursor clicks Stock, Returns, Directions, Hours in quick
succession; each page replaces the last on a single frame, each clicked link
turns visited purple, and a plain "loaded in 0.04s" line appears at the
foot after every swap. Every keyframe is steps(1): there is no easing in
this aesthetic. 6s; the last click is back on Hours, so frame 0 returns. */
.pv-instant { background: #FFFFFF; container-type: inline-size; color: #111111; font-family: Helvetica, Arial, sans-serif; }
.pv-instant__nav { position: absolute; left: 5cqi; top: 4.5cqi; margin: 0; font: 400 5.5cqi/1.2 Helvetica, Arial, sans-serif; white-space: nowrap; }
.pv-instant__l { color: #0000EE; text-decoration: underline; margin-right: 4cqi; }
.pv-instant__l--0 { color: #551A8B; }
/* the pages are stacked; only Hours is showing at rest */
.pv-instant__pg { position: absolute; left: 5cqi; top: 15cqi; right: 5cqi; margin: 0; font: 400 6.5cqi/1.45 Helvetica, Arial, sans-serif; visibility: hidden; }
.pv-instant__pg b { display: block; font-size: 9cqi; line-height: 1.1; margin-bottom: 2cqi; }
.pv-instant__pg--0 { visibility: visible; }
.pv-instant__ms { position: absolute; left: 5cqi; bottom: 4cqi; margin: 0; font: 400 5.5cqi/1 Helvetica, Arial, sans-serif; visibility: hidden; }
.pv-instant__cur { position: absolute; left: 60%; top: 66%; width: 6.5%; aspect-ratio: 14 / 19; background: #111111; clip-path: polygon(0 0, 0 86%, 32% 68%, 50% 100%, 66% 92%, 48% 60%, 84% 58%); scale: 1; filter: drop-shadow(0 0 0.4cqi #FFFFFF); }
@media (prefers-reduced-motion: no-preference) {
.pv-instant__cur { animation: pv-instant-hop 6s steps(1, end) infinite; }
.pv-instant__pg--0 { animation: pv-instant-p0 6s steps(1, end) infinite; }
.pv-instant__pg--1 { animation: pv-instant-p1 6s steps(1, end) infinite; }
.pv-instant__pg--2 { animation: pv-instant-p2 6s steps(1, end) infinite; }
.pv-instant__pg--3 { animation: pv-instant-p3 6s steps(1, end) infinite; }
.pv-instant__l--1 { animation: pv-instant-v1 6s steps(1, end) infinite; }
.pv-instant__l--2 { animation: pv-instant-v2 6s steps(1, end) infinite; }
.pv-instant__l--3 { animation: pv-instant-v3 6s steps(1, end) infinite; }
.pv-instant__ms { animation: pv-instant-ms 6s steps(1, end) infinite; }
/* the cursor jumps link to link; a press is one frame smaller */
@keyframes pv-instant-hop {
0% { left: 60%; top: 66%; scale: 1; }
17% { left: 29%; top: 8.5%; scale: 1; }
20% { left: 29%; top: 8.5%; scale: 0.8; }
22% { left: 29%; top: 8.5%; scale: 1; }
29% { left: 50%; top: 8.5%; scale: 1; }
32% { left: 50%; top: 8.5%; scale: 0.8; }
34% { left: 50%; top: 8.5%; scale: 1; }
41% { left: 75%; top: 8.5%; scale: 1; }
44% { left: 75%; top: 8.5%; scale: 0.8; }
46% { left: 75%; top: 8.5%; scale: 1; }
53% { left: 10%; top: 8.5%; scale: 1; }
56% { left: 10%; top: 8.5%; scale: 0.8; }
58% { left: 10%; top: 8.5%; scale: 1; }
66% { left: 60%; top: 66%; scale: 1; }
100% { left: 60%; top: 66%; scale: 1; }
}
@keyframes pv-instant-p0 { 0% { visibility: visible; } 20% { visibility: hidden; } 56% { visibility: visible; } 100% { visibility: visible; } }
@keyframes pv-instant-p1 { 0% { visibility: hidden; } 20% { visibility: visible; } 32% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes pv-instant-p2 { 0% { visibility: hidden; } 32% { visibility: visible; } 44% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes pv-instant-p3 { 0% { visibility: hidden; } 44% { visibility: visible; } 56% { visibility: hidden; } 100% { visibility: hidden; } }
/* visited: the browser default, and the only colour change on the page */
@keyframes pv-instant-v1 { 0% { color: #0000EE; } 20% { color: #551A8B; } 100% { color: #0000EE; } }
@keyframes pv-instant-v2 { 0% { color: #0000EE; } 32% { color: #551A8B; } 100% { color: #0000EE; } }
@keyframes pv-instant-v3 { 0% { color: #0000EE; } 44% { color: #551A8B; } 100% { color: #0000EE; } }
/* the timing line blinks off for a frame on every swap, so it reads as re-measured */
@keyframes pv-instant-ms {
0% { visibility: hidden; }
20% { visibility: visible; }
32% { visibility: hidden; }
33% { visibility: visible; }
44% { visibility: hidden; }
45% { visibility: visible; }
56% { visibility: hidden; }
57% { visibility: visible; }
100% { visibility: hidden; }
}
}
/* ---- APOTHECARY: the size selector fills the cobalt bottle to its ruled mark ---- */
/* Previews v2 (2026-09-26), row 3. Poster: amber field, a cobalt bottle and a
smaller amber bottle with cream engraved labels, ruled graduations etched on
the glass, the brass rule of a product-option selector sitting on '15 ml',
the figure 15 set large in roman caps, a cream botanical sprig. Hero: the
brass rule steps to 30, then 60; the tincture rises, overshoots by a hair
and settles its meniscus exactly on the etched line while the big figure
flips 15 -> 30 -> 60 and SPECIFIED appears beneath it. 7s cycle; at 6.2s
the rule returns to 15 and the liquid drains back to the first mark. */
.pv-dose { background: #8A5A2B; container-type: inline-size; font-family: "Cormorant Garamond", Georgia, serif; color: #F2EBDD; }
/* the smaller amber bottle, static, behind the cobalt one */
.pv-dose__amber { position: absolute; left: 33cqi; top: 33cqi; width: 15cqi; height: 34cqi; background: #5E3A18; border-radius: 3cqi 3cqi 1cqi 1cqi; box-shadow: inset -1.6cqi 0 0 rgba(0, 0, 0, 0.28), inset 1cqi 0 0 rgba(255, 255, 255, 0.07); }
.pv-dose__amberlbl { position: absolute; left: 2cqi; right: 2cqi; top: 9cqi; height: 13cqi; background: #F2EBDD; box-shadow: inset 0 0 0 0.4cqi #1C1C1C, inset 0 0 0 1cqi #F2EBDD, inset 0 0 0 1.3cqi #1C1C1C; }
.pv-dose__amberneck { position: absolute; left: 38.5cqi; top: 25cqi; width: 4cqi; height: 9cqi; background: #5E3A18; }
.pv-dose__ambercap { position: absolute; left: 37.5cqi; top: 22.5cqi; width: 6cqi; height: 3.2cqi; background: #B08D57; border-radius: 0.4cqi; }
/* the cobalt bottle: brass cap, neck, body with etched rules */
.pv-dose__cap { position: absolute; left: 15.5cqi; top: 9cqi; width: 9cqi; height: 4.6cqi; background: #B08D57; border-radius: 0.5cqi; box-shadow: inset 0 -0.8cqi 0 rgba(0, 0, 0, 0.25); }
.pv-dose__neck { position: absolute; left: 16.5cqi; top: 13.5cqi; width: 7cqi; height: 9cqi; background: #4A6CDB; }
.pv-dose__bottle { position: absolute; left: 8cqi; top: 21cqi; width: 24cqi; height: 46cqi; background: #4A6CDB; border-radius: 5cqi 5cqi 1.2cqi 1.2cqi; overflow: hidden; box-shadow: inset -2cqi 0 0 rgba(0, 0, 0, 0.3), inset 1.2cqi 0 0 rgba(255, 255, 255, 0.12); }
/* the tincture: rests at the 15 ml line; meniscus is the lighter top edge */
.pv-dose__liq { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #1F3A93; box-shadow: inset 0 0.8cqi 0 #7D9BEC, inset 0 -3cqi 0 #142A72; }
/* graduation: minor ticks every ~5% on the right, three etched majors at 15/30/60 */
.pv-dose__rules { position: absolute; right: 1.5cqi; top: 4cqi; bottom: 2cqi; width: 3.5cqi; background: repeating-linear-gradient(to top, #F2EBDD 0 0.35cqi, transparent 0.35cqi 2.3cqi); opacity: 0.55; }
.pv-dose__mark { position: absolute; right: 1.5cqi; width: 8cqi; height: 0.45cqi; background: #F2EBDD; opacity: 0.9; }
.pv-dose__mark15 { bottom: calc(22% - 0.2cqi); }
.pv-dose__mark30 { bottom: calc(44% - 0.2cqi); }
.pv-dose__mark60 { bottom: calc(86% - 0.2cqi); }
/* engraved label: cream, ink double rule, a brass seal */
.pv-dose__label { position: absolute; left: 2.2cqi; top: 21cqi; width: 9.5cqi; height: 12cqi; background: #F2EBDD; box-shadow: inset 0 0 0 0.4cqi #1C1C1C, inset 0 0 0 0.9cqi #F2EBDD, inset 0 0 0 1.2cqi #1C1C1C; }
.pv-dose__label i { position: absolute; left: 2.4cqi; right: 2.4cqi; top: 2.6cqi; bottom: 2.6cqi; background: repeating-linear-gradient(to bottom, #1C1C1C 0 0.35cqi, transparent 0.35cqi 1.6cqi); opacity: 0.55; }
.pv-dose__sprig { position: absolute; left: 49cqi; top: 46cqi; width: 8cqi; height: 24cqi; }
/* the figure: three numerals stacked, only the current one visible */
.pv-dose__ml { position: absolute; left: 56cqi; top: 3cqi; width: 30cqi; height: 26cqi; margin: 0; }
.pv-dose__n { position: absolute; left: 0; top: 0; font: 600 26cqi/1 "Cormorant Garamond", Georgia, serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.pv-dose__n30, .pv-dose__n60 { opacity: 0; }
.pv-dose__unit { position: absolute; left: 86cqi; top: 19cqi; margin: 0; font: 600 8cqi/1 "Cormorant Garamond", Georgia, serif; font-variant-caps: small-caps; }
.pv-dose__spec { position: absolute; left: 56cqi; top: 30cqi; margin: 0; font: 600 7cqi/1 "Cormorant Garamond", Georgia, serif; font-variant-caps: small-caps; letter-spacing: 0.14em; color: #B08D57; opacity: 0; }
/* the product-option selector: ruled tabular rows, a brass rule marks the choice */
.pv-dose__sel { position: absolute; left: 58cqi; top: 40cqi; width: 36cqi; margin: 0; padding: 0; list-style: none; }
.pv-dose__sel li { height: 8cqi; padding-left: 7cqi; font: 600 6.8cqi/8cqi "Cormorant Garamond", Georgia, serif; font-variant-caps: small-caps; font-variant-numeric: tabular-nums lining-nums; border-top: 0.3cqi solid rgba(242, 235, 221, 0.5); }
.pv-dose__sel li:last-child { border-bottom: 0.3cqi solid rgba(242, 235, 221, 0.5); }
.pv-dose__ptr { position: absolute; left: 0.5cqi; top: 3.5cqi; width: 4cqi; height: 1.2cqi; background: #B08D57; box-shadow: 4.6cqi 0 0 -0.35cqi #B08D57; }
@media (prefers-reduced-motion: no-preference) {
.pv-dose__liq { animation: pv-dose-fill 7s infinite; }
.pv-dose__ptr { animation: pv-dose-ptr 7s steps(1) infinite; }
.pv-dose__n15 { animation: pv-dose-n15 7s steps(1) infinite; }
.pv-dose__n30 { animation: pv-dose-n30 7s steps(1) infinite; }
.pv-dose__n60 { animation: pv-dose-n60 7s steps(1) infinite; }
.pv-dose__spec { animation: pv-dose-spec 7s steps(1) infinite; }
/* two measured pours: rise, a hair over the line, settle; then drain */
@keyframes pv-dose-fill {
0%, 14.3% { height: 22%; animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); }
31% { height: 46.5%; animation-timing-function: ease-in-out; }
37%, 48.6% { height: 44%; animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); }
65% { height: 88.5%; animation-timing-function: ease-in-out; }
71%, 88.6% { height: 86%; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 1); }
100% { height: 22%; }
}
/* the brass rule steps down the ruled rows and returns */
@keyframes pv-dose-ptr {
0% { translate: 0 0; }
14.3% { translate: 0 8cqi; }
48.6% { translate: 0 16cqi; }
88.6%, 100% { translate: 0 0; }
}
@keyframes pv-dose-n15 { 0% { opacity: 1; } 14.3% { opacity: 0; } 88.6%, 100% { opacity: 1; } }
@keyframes pv-dose-n30 { 0% { opacity: 0; } 14.3% { opacity: 1; } 48.6%, 100% { opacity: 0; } }
@keyframes pv-dose-n60 { 0% { opacity: 0; } 48.6% { opacity: 1; } 88.6%, 100% { opacity: 0; } }
/* SPECIFIED appears the moment the 60 ml meniscus settles */
@keyframes pv-dose-spec { 0% { opacity: 0; } 71% { opacity: 1; } 88.6%, 100% { opacity: 0; } }
}
/* ---- HERITAGE: the founding date is a timeline scrubber; drag it and 1874 rolls to 2026 while the workshop grows an era at a time ---- */
/* Previews v2 (2026-09-26), row 27. Resting frame IS the poster: navy ground,
a small gold-ringed burgundy crest with the S&S monogram, SPECIMEN & SONS
in tracked roman caps, the original single-storey workshop engraved in
gold hairline with a hatched roof, EST. 1874 in a heavy high-contrast
serif, and a gold hairline timeline with its knob parked at the left.
Hero: the knob draws the hairline to the right on one long steady ease
and the four digit drums roll in step, 1874 to 2026, while the engraving
gains its east wing in one era and its west wing and pennant in the next
(the same workshop, larger). Hold on today; then the scrubber rolls back
to 1874, the wings fade and the drums return. 8s. Nothing else moves.
Slab for dates is not bundled; Playfair Display 700 carries the drums. */
.pv-estdate { background: #1F2A44; container-type: inline-size; color: #EFE7D8; }
.pv-estdate p { margin: 0; }
.pv-estdate__crest { position: absolute; left: 50%; top: 5%; width: 13cqi; height: 13cqi; margin-left: -6.5cqi; display: block; }
.pv-estdate__firm { position: absolute; left: 0; right: 0; top: 25%; text-align: center; font: 400 5.2cqi/1 Cinzel, "PvMarcellus", "Times New Roman", serif; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; }
/* the engraving: hairline strokes that stay one pixel however the card scales */
.pv-estdate__shop { position: absolute; left: 22cqi; width: 56cqi; top: 34%; height: 28%; display: block; }
.pv-estdate__ink, .pv-estdate__ink rect, .pv-estdate__ink line, .pv-estdate__ink polygon { fill: none; stroke: #B08D57; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pv-estdate__ink polygon[fill] { fill: url(#pv-estdate-hatch); }
.pv-estdate__era3 polygon:last-child { fill: #B08D57; }
.pv-estdate__era2, .pv-estdate__era3 { opacity: 0; }
/* EST. and the four digit drums */
.pv-estdate__year { position: absolute; left: 0; right: 0; top: 63%; display: flex; justify-content: center; align-items: baseline; font: 700 14cqi/1 "Arvo", "Playfair Display", Georgia, serif; letter-spacing: 0.01em; font-variant-numeric: lining-nums tabular-nums; }
.pv-estdate__est { font: 400 4.2cqi/1 Cinzel, "PvMarcellus", "Times New Roman", serif; letter-spacing: 0.18em; text-transform: uppercase; color: #B08D57; margin-right: 2.4cqi; align-self: center; }
.pv-estdate__col { display: block; height: 1em; overflow: hidden; }
.pv-estdate__col i { display: block; font-style: normal; transform: translateY(0); }
.pv-estdate__col b { display: block; height: 1em; font-weight: 700; }
/* the timeline: hairline, the travelled part in cream, the knob */
.pv-estdate__line { position: absolute; left: 15cqi; width: 70cqi; top: 88%; height: 1px; background: #B08D57; opacity: 0.55; }
.pv-estdate__fill { position: absolute; left: 15cqi; width: 70cqi; top: 88%; height: 1px; background: #EFE7D8; transform: scaleX(0); transform-origin: 0 50%; }
.pv-estdate__knob { position: absolute; left: 15cqi; top: 88%; width: 3.6cqi; height: 3.6cqi; margin: -1.8cqi 0 0 -1.8cqi; border-radius: 50%; background: #EFE7D8; box-shadow: 0 0 0 0.6cqi #1F2A44, 0 0 0 0.9cqi #B08D57; transform: translateX(0); }
@media (prefers-reduced-motion: no-preference) {
.pv-estdate__knob { animation: pv-estdate-knob 8s infinite; }
.pv-estdate__fill { animation: pv-estdate-fill 8s infinite; }
.pv-estdate__k1 { animation: pv-estdate-k1 8s infinite; }
.pv-estdate__k2 { animation: pv-estdate-k2 8s infinite; }
.pv-estdate__k3 { animation: pv-estdate-k3 8s infinite; }
.pv-estdate__k4 { animation: pv-estdate-k4 8s infinite; }
.pv-estdate__era2 { animation: pv-estdate-era2 8s infinite; }
.pv-estdate__era3 { animation: pv-estdate-era3 8s infinite; }
/* one drag: 1.45s still, 4s steady travel, 1.5s hold on today, 1s roll back */
@keyframes pv-estdate-knob {
0%, 18% { transform: translateX(0); animation-timing-function: cubic-bezier(0.45, 0.05, 0.3, 1); }
68%, 87% { transform: translateX(70cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translateX(0); }
}
@keyframes pv-estdate-fill {
0%, 18% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.45, 0.05, 0.3, 1); }
68%, 87% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: scaleX(0); }
}
/* the drums share the knob's easing so the date and the scrubber agree */
@keyframes pv-estdate-k1 {
0%, 18% { transform: translateY(0); animation-timing-function: cubic-bezier(0.45, 0.05, 0.3, 1); }
68%, 87% { transform: translateY(-1em); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translateY(0); }
}
@keyframes pv-estdate-k2 {
0%, 18% { transform: translateY(0); animation-timing-function: cubic-bezier(0.45, 0.05, 0.3, 1); }
68%, 87% { transform: translateY(-2em); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translateY(0); }
}
@keyframes pv-estdate-k3 {
0%, 18% { transform: translateY(0); animation-timing-function: cubic-bezier(0.45, 0.05, 0.3, 1); }
68%, 87% { transform: translateY(-5em); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translateY(0); }
}
@keyframes pv-estdate-k4 {
0%, 18% { transform: translateY(0); animation-timing-function: cubic-bezier(0.45, 0.05, 0.3, 1); }
68%, 87% { transform: translateY(-2em); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translateY(0); }
}
/* the workshop grows: east wing mid-drag, west wing and pennant near today; both fade on the roll back */
@keyframes pv-estdate-era2 {
0%, 36% { opacity: 0; animation-timing-function: ease-in-out; }
46%, 87% { opacity: 1; animation-timing-function: ease-in-out; }
96%, 100% { opacity: 0; }
}
@keyframes pv-estdate-era3 {
0%, 54% { opacity: 0; animation-timing-function: ease-in-out; }
64%, 87% { opacity: 1; animation-timing-function: ease-in-out; }
93%, 100% { opacity: 0; }
}
}
/* ---- ENGINEERING DRAWING: hover explodes the speaker along its axis; part 04 lights orange with its spec row ---- */
/* Previews v2 (2026-09-26), row 21. Resting frame IS the poster: an assembled
isometric speaker (cap, body, grille, base) in hairline black on paper
white over a light grid, a dashed assembly axis through it, four leader
lines to a numbered spec column 01–04, "FIG.04" top left. Hero: the
hover-to-explode. Cap rises, base drops, grille slides out along its own
dashed construction line, all at a constant mechanical rate; then the base
(part 04) fills orange and spec row 04 highlights orange with it, the two
linked as one hover. Parts reassemble at the same rate to frame 0. 7s. */
.pv-exploded { container-type: inline-size; background: #FAFAF7; }
/* the grid lives on a child: cqi on the root would resolve against the viewport */
.pv-exploded__paper {
position: absolute; inset: 0;
background:
repeating-linear-gradient(90deg, #D9D9D9 0 1px, transparent 1px 8.3333cqi),
repeating-linear-gradient(0deg, #D9D9D9 0 1px, transparent 1px 8.3333cqi);
}
.pv-exploded__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-exploded__svg polygon, .pv-exploded__svg circle, .pv-exploded__svg line, .pv-exploded__svg rect {
stroke: #1A1A1A; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.pv-exploded__face { fill: #FAFAF7; }
.pv-exploded__shade { fill: #1A1A1A; fill-opacity: 0.12; stroke: none; }
.pv-exploded__dot { fill: #1A1A1A; }
/* part 04 has no per-face fill so the group colour reaches every face */
.pv-exploded__p4 { fill: #FAFAF7; }
.pv-exploded__p1, .pv-exploded__p3, .pv-exploded__p4 { transform: translate(0, 0); }
.pv-exploded__axis { stroke-width: 0.9; stroke-dasharray: 4 4; }
.pv-exploded__leaders line { stroke-width: 0.8; }
.pv-exploded__leaders circle { fill: #1A1A1A; stroke: none; }
.pv-exploded__row { fill: transparent; stroke: #D9D9D9; stroke-width: 1; }
.pv-exploded__num { font: 22px "Space Mono", "Courier New", monospace; fill: #1A1A1A; }
.pv-exploded__fig { font: 600 28px "Oswald", Impact, "Arial Narrow", sans-serif; fill: #1A1A1A; letter-spacing: 0.04em; }
@media (prefers-reduced-motion: no-preference) {
.pv-exploded__p1 { animation: pv-exploded-up 7s linear infinite; }
.pv-exploded__p3 { animation: pv-exploded-out 7s linear infinite; }
.pv-exploded__p4 { animation: pv-exploded-down 7s linear infinite, pv-exploded-hot 7s steps(1) infinite; }
.pv-exploded__row4 { animation: pv-exploded-row 7s steps(1) infinite; }
.pv-exploded__n4 { animation: pv-exploded-n4 7s steps(1) infinite; }
/* parts travel along the isometric axes at a constant rate, hold, return */
@keyframes pv-exploded-up {
0%, 14% { transform: translate(0, 0); }
50%, 80% { transform: translate(0, -42px); }
100% { transform: translate(0, 0); }
}
@keyframes pv-exploded-down {
0%, 14% { transform: translate(0, 0); }
50%, 80% { transform: translate(0, 42px); }
100% { transform: translate(0, 0); }
}
@keyframes pv-exploded-out {
0%, 14% { transform: translate(0, 0); }
50%, 80% { transform: translate(-38px, 22px); }
100% { transform: translate(0, 0); }
}
/* part 04 and spec row 04 light together: one hover, two places */
@keyframes pv-exploded-hot {
0% { fill: #FAFAF7; }
52% { fill: #FF6B1A; }
80% { fill: #FAFAF7; }
100% { fill: #FAFAF7; }
}
@keyframes pv-exploded-row {
0% { fill: transparent; stroke: #D9D9D9; }
52% { fill: #FF6B1A; stroke: #FF6B1A; }
80% { fill: transparent; stroke: #D9D9D9; }
100% { fill: transparent; stroke: #D9D9D9; }
}
@keyframes pv-exploded-n4 {
0% { fill: #1A1A1A; }
52% { fill: #FAFAF7; }
80% { fill: #1A1A1A; }
100% { fill: #1A1A1A; }
}
}
/* ---- TRAVEL POSTER: scrolling slides the poster's flat layers apart and the boat crosses the bay ---- */
/* Previews v2 (2026-09-26), row 60. Resting frame IS the poster: Isla Mera
in five flat inks inside a sand mat — sand sky, an orange sun disc, red
far mountains, navy headlands, a sea-green bay with sand wave dashes, a
small sailboat, navy foreground rocks, and the ISLA MERA wordmark on a
navy band at the base; a slim scroll thumb sits at the top of its track.
The hero moment: the page scrolls and every layer glides at its own
speed — sun barely, mountains a little, headlands more, rocks most — the
boat sails the other way across the bay and a new headland enters from
the right while the wordmark holds still. 7s cycle; the thumb runs back up
and the layers slide home to frame 0. No soft gradients anywhere: the
waves are hard-stop dashes. Type: Bebas Neue for the ISLA MERA wordmark. */
.pv-litho { background: #F4E285; container-type: inline-size; }
.pv-litho__sun { position: absolute; left: 64cqi; top: 8cqi; width: 15cqi; height: 15cqi; border-radius: 50%; background: #F4A259; transform: translate(0, 0); }
.pv-litho__far { position: absolute; left: -10cqi; top: 20cqi; width: 150cqi; height: 22cqi; background: #BC4B51; clip-path: polygon(0 100%, 0 78%, 6% 55%, 13% 22%, 20% 48%, 27% 30%, 33% 62%, 41% 40%, 49% 12%, 56% 44%, 63% 26%, 70% 58%, 78% 34%, 86% 60%, 92% 40%, 100% 70%, 100% 100%); transform: translateX(0); }
.pv-litho__mid { position: absolute; left: 0; top: 30cqi; width: 170cqi; height: 16cqi; background: #1D3557; clip-path: polygon(0 100%, 0 30%, 6% 4%, 12% 14%, 19% 44%, 25% 62%, 31% 100%, 61% 100%, 66% 40%, 71% 8%, 76% 26%, 81% 100%, 100% 100%); transform: translateX(0); }
.pv-litho__sea { position: absolute; left: -5cqi; top: 42cqi; width: 130cqi; height: 22cqi; background: #5B8E7D; transform: translateX(0); }
.pv-litho__waves { position: absolute; left: -10cqi; top: 47cqi; width: 140cqi; height: 12cqi; background: repeating-linear-gradient(to bottom, transparent 0 3.2cqi, #F4E285 3.2cqi 3.9cqi); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 8cqi, transparent 8cqi 14cqi); mask-image: repeating-linear-gradient(90deg, #000 0 8cqi, transparent 8cqi 14cqi); transform: translateX(0); }
.pv-litho__fore { position: absolute; left: -5cqi; top: 50cqi; width: 130cqi; height: 14cqi; background: #1D3557; clip-path: polygon(0 100%, 0 42%, 5% 18%, 11% 34%, 16% 8%, 22% 40%, 27% 100%, 100% 100%); transform: translateX(0); }
/* the boat: hull, mast, main and jib, all flat */
.pv-litho__boat { position: absolute; left: 24cqi; top: 40cqi; width: 12cqi; height: 12cqi; transform: translate(0, 0); }
.pv-litho__boat b { position: absolute; display: block; }
.pv-litho__hull { left: 0; bottom: 0; width: 100%; height: 3cqi; background: #1D3557; clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); }
.pv-litho__mast { left: 46%; bottom: 3cqi; width: 0.7cqi; height: 9.5cqi; background: #1D3557; }
.pv-litho__sail { left: 50%; bottom: 3.4cqi; width: 50%; height: 9cqi; background: #F4E285; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.pv-litho__jib { left: 12%; bottom: 3.4cqi; width: 34%; height: 6.5cqi; background: #BC4B51; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
/* the fixed elements: wordmark band, mat, scroll track */
.pv-litho__word { position: absolute; left: 3cqi; right: 3cqi; bottom: 3cqi; height: 13cqi; margin: 0; background: #1D3557; color: #F4E285; font: 400 10.5cqi/13cqi "Bebas Neue", Impact, "Arial Black", sans-serif; letter-spacing: 0.24em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.pv-litho__frame { position: absolute; inset: 0; box-sizing: border-box; border: 3cqi solid #F4E285; box-shadow: inset 0 0 0 0.6cqi #1D3557; pointer-events: none; }
.pv-litho__scroll { position: absolute; right: 4.8cqi; top: 4.8cqi; width: 1.3cqi; height: 52cqi; border-radius: 1cqi; background: rgba(29, 53, 87, 0.28); }
.pv-litho__scroll b { position: absolute; left: 0; top: 0; width: 100%; height: 14cqi; border-radius: 1cqi; background: #1D3557; transform: translateY(0); }
@media (prefers-reduced-motion: no-preference) {
.pv-litho__sun { animation: pv-litho-sun 7s infinite; }
.pv-litho__far { animation: pv-litho-far 7s infinite; }
.pv-litho__mid { animation: pv-litho-mid 7s infinite; }
.pv-litho__sea { animation: pv-litho-sea 7s infinite; }
.pv-litho__waves { animation: pv-litho-waves 7s infinite; }
.pv-litho__fore { animation: pv-litho-fore 7s infinite; }
.pv-litho__boat { animation: pv-litho-boat 7s infinite; }
.pv-litho__scroll b { animation: pv-litho-thumb 7s infinite; }
/* every layer shares the same glide (out at 14–71%, hold, home at 86–100%) at its own distance */
@keyframes pv-litho-sun {
0%, 14% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
71%, 86% { transform: translate(-3cqi, 1.5cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translate(0, 0); }
}
@keyframes pv-litho-far {
0%, 14% { transform: translateX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
71%, 86% { transform: translateX(-10cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translateX(0); }
}
@keyframes pv-litho-mid {
0%, 14% { transform: translateX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
71%, 86% { transform: translateX(-26cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translateX(0); }
}
@keyframes pv-litho-sea {
0%, 14% { transform: translateX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
71%, 86% { transform: translateX(-12cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translateX(0); }
}
@keyframes pv-litho-waves {
0%, 14% { transform: translateX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
71%, 86% { transform: translateX(-18cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translateX(0); }
}
@keyframes pv-litho-fore {
0%, 14% { transform: translateX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
71%, 86% { transform: translateX(-34cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translateX(0); }
}
/* the boat runs against the scroll, with a gentle bob on the way */
@keyframes pv-litho-boat {
0%, 14% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
33% { transform: translate(14cqi, -0.7cqi); animation-timing-function: ease-in-out; }
52% { transform: translate(28cqi, 0.6cqi); animation-timing-function: ease-in-out; }
71%, 86% { transform: translate(40cqi, 0); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translate(0, 0); }
}
@keyframes pv-litho-thumb {
0%, 14% { transform: translateY(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
71%, 86% { transform: translateY(38cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: translateY(0); }
}
}
/* ---- PULP: announcement banners slam across the cover on opposite diagonals; each hit knocks the halftone out of register ---- */
/* Previews v2 (2026-09-26), row 45. Poster: aged cream paper with a mustard
wedge, a two-plate halftone portrait (a hatted figure, red plate under ink
dots, already a hair out of register the way cheap printing is), one red
banner TRUE CRIME with a close cross angled across the top, the issue box
with its price in the corner. Hero: a mustard NEW EPISODE! bar snaps in
from the right on one diagonal, then THE LAST WITNESS! from the left on the
opposite one; each hit jolts the cover and shoves the ink plate off the red.
6s cycle: at 5.2s both bars whip off and the plates re-register. */
.pv-plates { background: #F0E2C3; container-type: inline-size; font-family: "Alfa Slab One", Impact, "Arial Narrow", sans-serif; }
/* paper: a warm speckle, multiplied */
.pv-plates__paper { position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: multiply; background: url("data:image/svg+xml;utf8,") 0 0 / 120px 120px; }
.pv-plates__art { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the red plate rests a hair off; the ink plate rests true */
.pv-plates__red { transform: translate(3px, 2px); }
.pv-plates__ink { transform: translate(0, 0); }
.pv-plates__issue { position: absolute; left: 3cqi; top: 63.5cqi; width: 15cqi; height: 9cqi; background: #F0E2C3; box-shadow: inset 0 0 0 0.7cqi #111111; display: grid; place-items: center; }
.pv-plates__issue b { font: 700 6cqi/1 "Oswald", Impact, "Arial Narrow", sans-serif; color: #111111; }
/* banners: full-bleed bars, angled, with a close cross at the end */
.pv-plates__b { position: absolute; left: -8cqi; width: 116cqi; height: 11cqi; font: 400 7.5cqi/11cqi "Alfa Slab One", Impact, "Arial Narrow", sans-serif; letter-spacing: 0.03em; text-align: center; white-space: nowrap; color: #F0E2C3; background: #B8292F; box-shadow: 0 0.8cqi 0 #111111; }
.pv-plates__b i { position: absolute; right: 11cqi; top: 0; font: 400 7cqi/11cqi Georgia, serif; opacity: 0.85; }
.pv-plates__b1 { top: 5cqi; rotate: -7deg; }
.pv-plates__b2 { top: 46cqi; rotate: -8deg; background: #E0A526; color: #111111; translate: 120cqi 0; }
.pv-plates__b3 { top: 60cqi; rotate: 12deg; translate: -120cqi 0; font-size: 6.2cqi; }
@media (prefers-reduced-motion: no-preference) {
.pv-plates__b2 { animation: pv-plates-b2 6s infinite; }
.pv-plates__b3 { animation: pv-plates-b3 6s infinite; }
.pv-plates__ink { animation: pv-plates-ink 6s infinite; }
.pv-plates__red { animation: pv-plates-redplate 6s infinite; }
.pv-plates__art { animation: pv-plates-jolt 6s infinite; }
/* in from the right at 1.1s, overshoot, stick; whip back out at 5.2s */
@keyframes pv-plates-b2 {
0%, 18% { translate: 120cqi 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
20% { translate: -3cqi 0; animation-timing-function: ease-out; }
21.5%, 86.7% { translate: 0 0; animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6); }
90%, 100% { translate: 120cqi 0; }
}
/* in from the left at 2.7s on the opposite diagonal */
@keyframes pv-plates-b3 {
0%, 45% { translate: -120cqi 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
46.7% { translate: 3cqi 0; animation-timing-function: ease-out; }
48.2%, 86.7% { translate: 0 0; animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6); }
90%, 100% { translate: -120cqi 0; }
}
/* the ink plate is knocked one way, then the other, then re-registers */
@keyframes pv-plates-ink {
0%, 19.9% { transform: translate(0, 0); }
20%, 46.6% { transform: translate(-7px, 5px); }
46.7%, 90% { transform: translate(8px, -6px); animation-timing-function: ease-out; }
93%, 100% { transform: translate(0, 0); }
}
@keyframes pv-plates-redplate {
0%, 19.9% { transform: translate(3px, 2px); }
20%, 46.6% { transform: translate(9px, -2px); }
46.7%, 90% { transform: translate(-4px, 7px); animation-timing-function: ease-out; }
93%, 100% { transform: translate(3px, 2px); }
}
/* two frames of cover shake on each hit */
@keyframes pv-plates-jolt {
0%, 19.9% { translate: 0 0; }
20% { translate: -1.2cqi 0.8cqi; }
21%, 46.6% { translate: 0 0; }
46.7% { translate: 1.2cqi -0.8cqi; }
47.7%, 100% { translate: 0 0; }
}
}
/* ---- ACID GRAPHICS: the cursor is a warp brush; the flyer won't hold still ---- */
/* Previews v2 (2026-09-26), row 1. Resting frame IS the poster: extruded,
warped chrome ACID on black, tight tracking, grain already crawling. The
hero moment: a cursor swipes across and each letter liquifies behind it —
stretched, extrusion deepened and flipped so magenta and green swap sides —
then the word whips back hard, letter by letter, with a one-frame invert
as the last one lands. 6s composition cycle; the letters stagger 0.25s by
index so the smear follows the cursor instead of firing at once. */
.pv-toxic { background: #050505; display: grid; place-items: center; container-type: inline-size; }
.pv-toxic__word { margin: 0; display: flex; white-space: nowrap; letter-spacing: -0.07em; }
.pv-toxic__word b {
--sk: calc((var(--pvt) - 1.5) * 4deg);
display: inline-block; font: 400 33cqi/1 "Archivo Black", "Arial Black", sans-serif; color: #C8D2DC;
transform-origin: 0% 100%;
transform: skewY(var(--sk));
text-shadow: 0.03em 0.03em 0 #6B7680, 0.06em 0.06em 0 #3A4147, 0.09em 0.09em 0 #39FF14, 0.12em 0.12em 0 #39FF14, 0.14em 0.14em 0.2em rgba(255, 26, 198, 0.6);
}
/* grain: an inline feTurbulence tile, oversized so the crawl never shows an
edge. A child, not ::after — the card's rest rule (.vit:not(.is-live) .pv *)
reaches children only, and grain must sleep with the rest of the flyer. */
.pv-toxic__grain {
position: absolute; inset: -6%; pointer-events: none; opacity: 0.55;
background: url("data:image/svg+xml;utf8,") 0 0 / 160px 160px;
}
/* the brush: resting off-canvas — the poster has no cursor in it */
.pv-toxic__cur {
position: absolute; left: -30%; top: 44%; width: 10%; aspect-ratio: 14 / 19; opacity: 0;
background: #E6ECF2;
clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%);
filter: drop-shadow(0.08em 0.08em 0 #FF1AC6);
}
/* the one-frame invert: white in difference mode inverts everything beneath it */
.pv-toxic__flash { position: absolute; inset: 0; background: #fff; mix-blend-mode: difference; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.pv-toxic__word b { animation: pv-ac-smear 6s infinite; animation-delay: calc(var(--pvt) * 0.25s); }
.pv-toxic__cur { animation: pv-ac-brush 6s infinite; }
.pv-toxic__flash { animation: pv-ac-invert 6s steps(1) infinite; }
.pv-toxic__grain { animation: pv-ac-grain 0.5s steps(1) infinite; } /* component-rate: film grain re-seeds every frame; grain that changes once a second reads as a slideshow */
/* each letter: hold, get pulled as the brush reaches it (elastic overshoot),
stick warped and recoloured, then snap past rest and settle */
@keyframes pv-ac-smear {
0%, 31% { transform: skewY(var(--sk)); color: #C8D2DC;
text-shadow: 0.03em 0.03em 0 #6B7680, 0.06em 0.06em 0 #3A4147, 0.09em 0.09em 0 #39FF14, 0.12em 0.12em 0 #39FF14, 0.14em 0.14em 0.2em rgba(255, 26, 198, 0.6);
animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
35% { transform: skewY(var(--sk)) skewX(-28deg) scaleX(1.26) translateX(0.03em); color: #F2F6FA;
text-shadow: -0.05em 0.02em 0 #6B7680, -0.1em 0.05em 0 #3A4147, -0.15em 0.07em 0 #FF1AC6, -0.2em 0.1em 0 #FF1AC6, 0.12em -0.08em 0.22em rgba(57, 255, 20, 0.85);
animation-timing-function: ease-in-out; }
38%, 70% { transform: skewY(var(--sk)) skewX(-20deg) scaleX(1.15) translateX(0.02em); color: #E6ECF2;
text-shadow: -0.04em 0.02em 0 #6B7680, -0.08em 0.04em 0 #3A4147, -0.12em 0.06em 0 #FF1AC6, -0.16em 0.08em 0 #FF1AC6, 0.1em -0.06em 0.2em rgba(57, 255, 20, 0.75);
animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
72.5% { transform: skewY(var(--sk)) skewX(8deg) scaleX(0.93); color: #C8D2DC;
text-shadow: 0.03em 0.03em 0 #6B7680, 0.06em 0.06em 0 #3A4147, 0.09em 0.09em 0 #39FF14, 0.12em 0.12em 0 #39FF14, 0.14em 0.14em 0.2em rgba(255, 26, 198, 0.6);
animation-timing-function: ease-out; }
74%, 100% { transform: skewY(var(--sk)); color: #C8D2DC;
text-shadow: 0.03em 0.03em 0 #6B7680, 0.06em 0.06em 0 #3A4147, 0.09em 0.09em 0 #39FF14, 0.12em 0.12em 0 #39FF14, 0.14em 0.14em 0.2em rgba(255, 26, 198, 0.6); }
}
/* the brush: enter from the left, one fast swipe across the word, hang at
the right edge while the type stays stuck, gone before the snap */
@keyframes pv-ac-brush {
0%, 20% { left: -30%; top: 44%; opacity: 0; }
22% { left: -30%; top: 44%; opacity: 1; animation-timing-function: ease-in; }
28% { left: -8%; top: 46%; animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1); }
47% { left: 104%; top: 50%; animation-timing-function: ease-out; }
62% { left: 112%; top: 52%; opacity: 1; }
66%, 100% { left: 112%; top: 52%; opacity: 0; }
}
/* the last letter lands at 86.5%: two frames of inverted flyer */
@keyframes pv-ac-invert {
0%, 85.9% { opacity: 0; }
86%, 86.6% { opacity: 1; }
86.7%, 100% { opacity: 0; }
}
@keyframes pv-ac-grain {
0% { translate: 0 0; }
20% { translate: -3% 2%; }
40% { translate: 2% -3%; }
60% { translate: -2% -2%; }
80% { translate: 3% 1%; }
100% { translate: 0 0; }
}
}
/* ---- ART NOUVEAU: the wordmark sprouts tendrils along the nav and the hovered link blooms ---- */
/* Previews v2 (2026-09-26), row 7. Resting frame IS the poster: a whiplash-curve
frame already drawn on cream around a stylised iris and the italic wordmark
"Iris & Vine", three nav items below in teal caps, a gold bud where the
middle one sits. The hero moment: a cursor drifts onto "Maison"; the terminals
of the I and the e extend into sage tendrils that run down and along the nav
and meet under the hovered item, which opens into a six-petal iris. 8s cycle;
the tendrils retract into the letters and the bloom closes back to a bud. */
.pv-whiplash { background: #F4EDE0; container-type: inline-size; }
.pv-whiplash__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv-whiplash__frame { fill: none; stroke: #5E3A57; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pv-whiplash__echo { fill: none; stroke: #B89B5E; stroke-width: 1.4; stroke-linecap: round; }
.pv-whiplash__stem { fill: none; stroke: #9CAF88; stroke-width: 3; stroke-linecap: round; }
.pv-whiplash__fall { fill: #3F6F6A; }
.pv-whiplash__std { fill: #5E3A57; }
.pv-whiplash__std--mid { fill: #6E4868; }
.pv-whiplash__beard { fill: #B89B5E; }
/* tendrils: drawn with a unit pathLength so dashoffset 1 = fully hidden */
.pv-whiplash__tendril { fill: none; stroke: #9CAF88; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* the bloom sits as a bud at rest; it scales from its own centre in viewBox space */
.pv-whiplash__bloom { transform-box: view-box; transform-origin: 200px 236px; transform: scale(0.14); }
.pv-whiplash__petal { fill: #5E3A57; }
.pv-whiplash__petal--alt { fill: #3F6F6A; }
.pv-whiplash__eye { fill: #B89B5E; }
.pv-whiplash__mark { position: absolute; left: 0; right: 0; top: 43.5%; margin: 0; text-align: center; white-space: nowrap; font: 400 12.5cqi/1 "Federo", "Palatino", Georgia, serif; color: #5E3A57; letter-spacing: 0.01em; }
.pv-whiplash__nav { position: absolute; left: 0; right: 0; top: 76.5%; margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; gap: 6cqi; font: 600 5.6cqi/1 "Cormorant Garamond", Georgia, "Times New Roman", serif; letter-spacing: 0.08em; text-transform: uppercase; color: #3F6F6A; }
.pv-whiplash__hot { color: #3F6F6A; }
/* the pointer: off-canvas at rest, the poster has no cursor in it */
.pv-whiplash__cur { position: absolute; left: 112%; top: 96%; width: 6.5%; aspect-ratio: 14 / 19; opacity: 0; background: #5E3A57; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%); }
@media (prefers-reduced-motion: no-preference) {
.pv-whiplash__tendril { animation: pv-whiplash-run 8s infinite; }
.pv-whiplash__bloom { animation: pv-whiplash-bloom 8s infinite; }
.pv-whiplash__hot { animation: pv-whiplash-hot 8s infinite; }
.pv-whiplash__cur { animation: pv-whiplash-cur 8s infinite; }
/* tendrils grow out of the letter terminals, hold under the nav, then retract */
@keyframes pv-whiplash-run {
0%, 18% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1); }
50%, 80% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
100% { stroke-dashoffset: 1; }
}
/* bud to flower with a soft overshoot, hold, close */
@keyframes pv-whiplash-bloom {
0%, 46% { transform: scale(0.14); animation-timing-function: cubic-bezier(0.3, 0.9, 0.35, 1.15); }
60% { transform: scale(1.06); animation-timing-function: ease-in-out; }
64%, 78% { transform: scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.5, 1); }
90%, 100% { transform: scale(0.14); }
}
/* the hovered label warms to gold and recedes under the flower */
@keyframes pv-whiplash-hot {
0%, 44% { color: #3F6F6A; opacity: 1; }
56%, 80% { color: #B89B5E; opacity: 0.35; }
92%, 100% { color: #3F6F6A; opacity: 1; }
}
/* pointer drifts in from bottom-right, settles on Maison, leaves before the close */
@keyframes pv-whiplash-cur {
0%, 6% { left: 112%; top: 96%; opacity: 0; }
8% { left: 104%; top: 92%; opacity: 1; animation-timing-function: cubic-bezier(0.3, 0.6, 0.2, 1); }
24%, 82% { left: 52%; top: 81%; opacity: 1; animation-timing-function: ease-in; }
92% { left: 112%; top: 96%; opacity: 1; }
92.5%, 100% { left: 112%; top: 96%; opacity: 0; }
}
}
/* ---- CASSETTE FUTURISM: tabs are toggle switches; each throw rolls the CRT to the next page ---- */
/* Previews v2 (2026-09-26), row 11. Poster: beige ruled fascia, an amber CRT
in a brown bezel already showing page 0 (a giant low-res numeral and ruled
amber lines under scanlines), a bank of four chunky orange levers labelled
0 1 2 3 under REG with lever 0 thrown up, three amber bar meters lit. Hero:
a lever is thrown, the whole fascia jolts, the CRT vertical-rolls with an
overshoot and repaints the next page while the meters jump. Four throws at
1s, 3s, 5s and 6.5s; the last throws lever 0 again and rolls onto a copy of
page 0, so the 7s cycle lands on the poster with an on-brand hard cut. */
.pv-fascia { background: #D8CFBC; container-type: inline-size; font-family: "Share Tech Mono", "Courier New", monospace; }
.pv-fascia__panel { position: absolute; inset: 0; }
/* the CRT: brown bezel, near-black tube, amber phosphor */
.pv-fascia__crt { position: absolute; left: 5cqi; top: 5cqi; width: 54cqi; height: 65cqi; background: #5B4636; border-radius: 2.2cqi; box-shadow: inset 0 -1cqi 0 rgba(0, 0, 0, 0.25), inset 0 0.8cqi 0 rgba(255, 255, 255, 0.12); }
.pv-fascia__screen { position: absolute; inset: 2.5cqi; background: #111111; border-radius: 1.6cqi; overflow: hidden; }
.pv-fascia__roll { position: absolute; left: 0; top: 0; width: 100%; height: 500%; }
.pv-fascia__pg { position: relative; display: block; height: 20%; }
.pv-fascia__pg b { position: absolute; left: 3cqi; top: 1cqi; font: 400 46cqi/1 "VT323", "Courier New", monospace; color: #FFB000; }
.pv-fascia__pg i { position: absolute; right: 3cqi; bottom: 4cqi; width: 20cqi; height: 22cqi; }
.pv-fascia__p0 i { background: repeating-linear-gradient(to bottom, #FFB000 0 2.4cqi, transparent 2.4cqi 5cqi); }
.pv-fascia__p1 i { background: repeating-linear-gradient(90deg, #FFB000 0 2.6cqi, transparent 2.6cqi 4.6cqi); clip-path: polygon(0 60%, 23% 60%, 23% 10%, 46% 10%, 46% 45%, 69% 45%, 69% 0, 92% 0, 92% 70%, 100% 70%, 100% 100%, 0 100%); }
.pv-fascia__p2 i { background: conic-gradient(#FFB000 25%, transparent 0 50%, #FFB000 0 75%, transparent 0) 0 0 / 7cqi 7cqi; }
.pv-fascia__p3 i { height: 8cqi; bottom: 11cqi; background: linear-gradient(90deg, #E86A1C 0 40%, #FFB000 40%); }
.pv-fascia__scan { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 0.7cqi, rgba(0, 0, 0, 0.38) 0.7cqi 1.1cqi); }
/* repaint flash: the phosphor blooms for a frame at each throw */
.pv-fascia__flash { position: absolute; inset: 0; background: #FFB000; opacity: 0; }
/* the switch bank, ruled off from the tube by a heavy brown rule */
.pv-fascia__bank { position: absolute; left: 62cqi; top: 5cqi; width: 34cqi; height: 65cqi; border-left: 0.7cqi solid #5B4636; }
.pv-fascia__reg { position: absolute; left: 3cqi; top: 0; font: 400 5.8cqi/1 "Share Tech Mono", "Courier New", monospace; color: #5B4636; letter-spacing: 0.1em; }
.pv-fascia__sw { position: absolute; top: 7.5cqi; width: 5.6cqi; height: 13cqi; background: #5B4636; border-radius: 0.9cqi; box-shadow: inset 0 0.6cqi 0 rgba(0, 0, 0, 0.35); }
.pv-fascia__sw0 { left: 3cqi; } .pv-fascia__sw1 { left: 10.8cqi; } .pv-fascia__sw2 { left: 18.6cqi; } .pv-fascia__sw3 { left: 26.4cqi; }
.pv-fascia__lv { position: absolute; left: 0.8cqi; top: 7.2cqi; width: 4cqi; height: 5cqi; background: #E86A1C; border-radius: 0.6cqi; box-shadow: inset 0 -1cqi 0 rgba(0, 0, 0, 0.3), 0 0.3cqi 0 rgba(0, 0, 0, 0.35); }
.pv-fascia__lv0 { top: 0.8cqi; }
.pv-fascia__num { position: absolute; top: 22cqi; width: 5.6cqi; text-align: center; font: 400 5.8cqi/1 "Share Tech Mono", "Courier New", monospace; color: #5B4636; }
.pv-fascia__num0 { left: 3cqi; } .pv-fascia__num1 { left: 10.8cqi; } .pv-fascia__num2 { left: 18.6cqi; } .pv-fascia__num3 { left: 26.4cqi; }
/* readouts: three low-res bar meters */
.pv-fascia__meter { position: absolute; top: 33cqi; width: 7cqi; height: 24cqi; background: #111111; border-radius: 0.5cqi; overflow: hidden; }
.pv-fascia__m1 { left: 3cqi; } .pv-fascia__m2 { left: 13cqi; } .pv-fascia__m3 { left: 23cqi; }
.pv-fascia__meter i { position: absolute; left: 1cqi; right: 1cqi; bottom: 1cqi; height: 40%; background: repeating-linear-gradient(to top, #FFB000 0 1.6cqi, transparent 1.6cqi 2.4cqi); }
.pv-fascia__m2 i { height: 65%; } .pv-fascia__m3 i { height: 25%; }
.pv-fascia__led { position: absolute; left: 27cqi; top: 60cqi; width: 3cqi; height: 3cqi; border-radius: 50%; background: #E86A1C; box-shadow: 0 0 1.5cqi #E86A1C; }
@media (prefers-reduced-motion: no-preference) {
.pv-fascia__panel { animation: pv-fascia-jolt 7s infinite; }
.pv-fascia__roll { animation: pv-fascia-roll 7s infinite; }
.pv-fascia__flash { animation: pv-fascia-flash 7s steps(1) infinite; }
.pv-fascia__lv0 { animation: pv-fascia-lv0 7s steps(1) infinite; }
.pv-fascia__lv1 { animation: pv-fascia-lv1 7s steps(1) infinite; }
.pv-fascia__lv2 { animation: pv-fascia-lv2 7s steps(1) infinite; }
.pv-fascia__lv3 { animation: pv-fascia-lv3 7s steps(1) infinite; }
.pv-fascia__m1 i { animation: pv-fascia-m1 7s steps(1) infinite; }
.pv-fascia__m2 i { animation: pv-fascia-m2 7s steps(1) infinite; }
.pv-fascia__m3 i { animation: pv-fascia-m3 7s steps(1) infinite; }
/* the fascia shudders on every throw: down, up past rest, settle */
@keyframes pv-fascia-jolt {
0%, 14.3% { translate: 0 0; }
14.9% { translate: 0.3cqi 0.9cqi; }
15.6% { translate: -0.2cqi -0.5cqi; }
16.4%, 42.9% { translate: 0 0; }
43.5% { translate: 0.3cqi 0.9cqi; }
44.2% { translate: -0.2cqi -0.5cqi; }
45%, 71.4% { translate: 0 0; }
72% { translate: 0.3cqi 0.9cqi; }
72.7% { translate: -0.2cqi -0.5cqi; }
73.5%, 92.9% { translate: 0 0; }
93.5% { translate: 0.3cqi 0.9cqi; }
94.2% { translate: -0.2cqi -0.5cqi; }
95%, 100% { translate: 0 0; }
}
/* vertical roll: fast linear scroll, overshoot, settle; five pages, the
fifth a copy of page 0, so the cut at 100% is invisible */
@keyframes pv-fascia-roll {
0%, 14.3% { translate: 0 0; animation-timing-function: linear; }
15.6% { translate: 0 -22%; animation-timing-function: ease-out; }
16.9%, 42.9% { translate: 0 -20%; animation-timing-function: linear; }
44.2% { translate: 0 -42%; animation-timing-function: ease-out; }
45.5%, 71.4% { translate: 0 -40%; animation-timing-function: linear; }
72.7% { translate: 0 -62%; animation-timing-function: ease-out; }
74%, 92.9% { translate: 0 -60%; animation-timing-function: linear; }
94.2% { translate: 0 -82%; animation-timing-function: ease-out; }
95.5%, 99.99% { translate: 0 -80%; }
100% { translate: 0 0; }
}
@keyframes pv-fascia-flash {
0% { opacity: 0; }
14.3% { opacity: 0.3; } 15.2% { opacity: 0; }
42.9% { opacity: 0.3; } 43.8% { opacity: 0; }
71.4% { opacity: 0.3; } 72.3% { opacity: 0; }
92.9% { opacity: 0.3; } 93.8%, 100% { opacity: 0; }
}
/* levers: 6.4cqi of throw; only one is up at a time */
@keyframes pv-fascia-lv0 { 0% { translate: 0 0; } 14.3% { translate: 0 6.4cqi; } 92.9%, 100% { translate: 0 0; } }
@keyframes pv-fascia-lv1 { 0% { translate: 0 0; } 14.3% { translate: 0 -6.4cqi; } 42.9%, 100% { translate: 0 0; } }
@keyframes pv-fascia-lv2 { 0% { translate: 0 0; } 42.9% { translate: 0 -6.4cqi; } 71.4%, 100% { translate: 0 0; } }
@keyframes pv-fascia-lv3 { 0% { translate: 0 0; } 71.4% { translate: 0 -6.4cqi; } 92.9%, 100% { translate: 0 0; } }
/* meters jump to each page's readings */
@keyframes pv-fascia-m1 { 0% { height: 40%; } 14.3% { height: 70%; } 42.9% { height: 25%; } 71.4% { height: 90%; } 92.9%, 100% { height: 40%; } }
@keyframes pv-fascia-m2 { 0% { height: 65%; } 14.3% { height: 30%; } 42.9% { height: 80%; } 71.4% { height: 45%; } 92.9%, 100% { height: 65%; } }
@keyframes pv-fascia-m3 { 0% { height: 25%; } 14.3% { height: 55%; } 42.9% { height: 95%; } 71.4% { height: 60%; } 92.9%, 100% { height: 25%; } }
}
/* ---- CIRCUS: the marquee bulbs chase the border, light the headline, and the ribbon becomes a strobing ticket button ---- */
/* Previews v2 (2026-09-26), row 12. Resting frame IS the poster: a navy
frame ringed with 28 unlit bulbs, big-top red-and-cream stripes inside a
gold double rule, a navy panel with THE GRAND in Rye wood type and a
red ribbon banner reading TWICE DAILY. Hero: the bulbs ignite one after
another clockwise (animation-delay by --i), the headline catches gold as
the chase passes, the ribbon flips on its axis and comes back as BUY
TICKETS; a cursor lands on it and the button strobes red/gold like a
marquee (the CTA hover). Loop: cursor leaves, ribbon flips back, bulbs
chase out in the same order and the poster is dark again. 8s cycle. */
.pv-bulbs { background: #1B2A49; container-type: inline-size; }
.pv-bulbs p { margin: 0; }
/* big-top stripes inside the frame, gold double rule on the edge */
.pv-bulbs__tent { position: absolute; inset: 11% 8%; background: repeating-linear-gradient(90deg, #D7263D 0 8.5%, #F7E7C6 8.5% 17%); box-shadow: 0 0 0 0.6cqi #E7B10A, 0 0 0 1.1cqi #1B2A49, 0 0 0 1.5cqi #E7B10A; }
.pv-bulbs__fl { position: absolute; width: 3cqi; height: 3cqi; background: #E7B10A; transform: rotate(45deg); box-shadow: inset 0 0 0 0.6cqi #1B2A49; }
.pv-bulbs__fl1 { left: 11%; top: 15%; } .pv-bulbs__fl2 { right: 11%; top: 15%; }
.pv-bulbs__fl3 { left: 11%; bottom: 15%; } .pv-bulbs__fl4 { right: 11%; bottom: 15%; }
/* the headline panel */
.pv-bulbs__panel { position: absolute; left: 12%; right: 12%; top: 21%; height: 36%; background: #1B2A49; display: grid; place-items: center; box-shadow: inset 0 0 0 0.6cqi #E7B10A, inset 0 0 0 1.2cqi #1B2A49, inset 0 0 0 1.6cqi #E7B10A; }
.pv-bulbs__head { font: 400 10cqi/1 "Rye", Impact, "Arial Black", sans-serif; color: #F7E7C6; white-space: nowrap; text-shadow: 0 0 0 rgba(231, 177, 10, 0); }
/* the ribbon banner: notched ends, flips on its horizontal axis to become the button */
.pv-bulbs__ribbon { position: absolute; left: 20%; right: 20%; top: 63%; height: 16%; background: #D7263D; clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); transform: rotateX(0deg); }
.pv-bulbs__ribbon span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 7cqi/1 "Abril Fatface", Georgia, "Times New Roman", serif; letter-spacing: 0.02em; color: #F7E7C6; white-space: nowrap; }
.pv-bulbs__t1 { opacity: 1; }
.pv-bulbs__t2 { opacity: 0; background: #D7263D; color: #F7E7C6; }
/* the cursor rests off-canvas: the poster has no hand in it */
.pv-bulbs__cur { position: absolute; left: 110%; top: 110%; width: 8%; aspect-ratio: 14 / 19; background: #F7E7C6; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%); filter: drop-shadow(0.5cqi 0.5cqi 0 #1B2A49); }
/* bulbs: unlit glass at rest, warm gold with a halo when lit */
.pv-bulbs__b { position: absolute; width: 3.4cqi; height: 3.4cqi; border-radius: 50%; transform: translate(-50%, -50%); background: #6B6350; box-shadow: 0 0 0 0.5cqi #0F1A33, 0 0 0 0 rgba(255, 224, 140, 0); }
@media (prefers-reduced-motion: no-preference) {
.pv-bulbs__b { animation: pv-bulbs-chase 8s infinite; animation-delay: calc(var(--i) * 0.07s); }
.pv-bulbs__head { animation: pv-bulbs-ignite 8s infinite; }
.pv-bulbs__ribbon { animation: pv-bulbs-flip 8s infinite; }
.pv-bulbs__t1 { animation: pv-bulbs-t1 8s steps(1) infinite; }
.pv-bulbs__t2 { animation: pv-bulbs-t2 8s steps(1) infinite; }
.pv-bulbs__cur { animation: pv-bulbs-cursor 8s infinite; }
/* one bulb: dark, a hot pop as the chase reaches it, lit, then out in the same order.
The last bulb is delayed 1.89s (23.6%), so rest must hold from 76% to 100% */
@keyframes pv-bulbs-chase {
0%, 12% { background: #6B6350; box-shadow: 0 0 0 0.5cqi #0F1A33, 0 0 0 0 rgba(255, 224, 140, 0); }
13% { background: #FFFFFF; box-shadow: 0 0 0 0.5cqi #0F1A33, 0 0 0 1.6cqi rgba(255, 224, 140, 0.9); }
15%, 74% { background: #FFE08C; box-shadow: 0 0 0 0.5cqi #0F1A33, 0 0 0 0.9cqi rgba(255, 224, 140, 0.55); }
76%, 100% { background: #6B6350; box-shadow: 0 0 0 0.5cqi #0F1A33, 0 0 0 0 rgba(255, 224, 140, 0); }
}
/* headline catches as the chase comes round the top */
@keyframes pv-bulbs-ignite {
0%, 34% { color: #F7E7C6; text-shadow: 0 0 0 rgba(231, 177, 10, 0); }
36% { color: #FFFFFF; text-shadow: 0 0 2.4cqi rgba(255, 224, 140, 1); }
38%, 76% { color: #E7B10A; text-shadow: 0 0 1.4cqi rgba(231, 177, 10, 0.8); }
80%, 100% { color: #F7E7C6; text-shadow: 0 0 0 rgba(231, 177, 10, 0); }
}
/* the ribbon turns over to show the button, and turns back */
@keyframes pv-bulbs-flip {
0%, 40% { transform: rotateX(0deg); animation-timing-function: ease-in; }
43% { transform: rotateX(90deg); animation-timing-function: ease-out; }
46%, 78% { transform: rotateX(0deg); animation-timing-function: ease-in; }
81% { transform: rotateX(90deg); animation-timing-function: ease-out; }
84%, 100% { transform: rotateX(0deg); }
}
@keyframes pv-bulbs-t1 { 0%, 42.9% { opacity: 1; } 43%, 80.9% { opacity: 0; } 81%, 100% { opacity: 1; } }
/* BUY TICKETS: on from the flip, strobing red/gold while the cursor sits on it */
@keyframes pv-bulbs-t2 {
0%, 42.9% { opacity: 0; background: #D7263D; color: #F7E7C6; }
43%, 52.9% { opacity: 1; background: #D7263D; color: #F7E7C6; }
53%, 55.9% { opacity: 1; background: #E7B10A; color: #1B2A49; }
56%, 58.9% { opacity: 1; background: #D7263D; color: #F7E7C6; }
59%, 61.9% { opacity: 1; background: #E7B10A; color: #1B2A49; }
62%, 64.9% { opacity: 1; background: #D7263D; color: #F7E7C6; }
65%, 67.9% { opacity: 1; background: #E7B10A; color: #1B2A49; }
68%, 70.9% { opacity: 1; background: #D7263D; color: #F7E7C6; }
71%, 72.9% { opacity: 1; background: #E7B10A; color: #1B2A49; }
73%, 80.9% { opacity: 1; background: #D7263D; color: #F7E7C6; }
81%, 100% { opacity: 0; background: #D7263D; color: #F7E7C6; }
}
/* cursor: in from the bottom-right corner, lands on the button, leaves the way it came */
@keyframes pv-bulbs-cursor {
0%, 46% { left: 110%; top: 110%; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
53%, 72% { left: 57%; top: 69%; animation-timing-function: ease-in; }
78%, 100% { left: 110%; top: 110%; }
}
}
/* ---- HEAVY METAL: click TOUR and the logo grows thorns that crack the page open onto the dates ---- */
/* Previews v2 (2026-09-26), row 26. Resting frame IS the poster: near-black,
a steel sigil (circle, inverted triangle, axis), four etched serpents in
mirror symmetry, a spiky bone logo nobody can read, a blood-red drop and a
lone TOUR link. Hero: the cursor clicks TOUR; the logo's thorns grow outward
in perfect symmetry, the page jolts, a hairline fissure splits it and bursts
open onto a bone-white tour list. Heavy, sudden. 6s; the fissure seals and
the thorns draw back in. */
.pv-thicket { background: #0A0A0A; container-type: inline-size; }
.pv-thicket__art { position: absolute; inset: 0; width: 100%; height: 100%; translate: 0 0; }
.pv-thicket__sigil circle, .pv-thicket__sigil polygon, .pv-thicket__sigil line { fill: none; stroke: #6E6E6E; stroke-width: 1; }
.pv-thicket__sigil polygon { stroke: #8B0000; stroke-width: 1.2; }
.pv-thicket__sigil line { opacity: 0.5; }
/* engraving: a wide stroke chopped into cross-hatch by its dash pattern, a thin steel spine on top */
.pv-thicket__snake path, .pv-thicket__snake use { fill: none; stroke: #E6E1D3; stroke-width: 11; stroke-dasharray: 1.4 2.6; stroke-linecap: butt; opacity: 0.75; }
.pv-thicket__snakeline use { fill: none; stroke: #6E6E6E; stroke-width: 1.4; }
/* thorns: bone spikes rooted on the logo's outer points, short at rest */
.pv-thicket__thorn { fill: #E6E1D3; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.28); }
.pv-thicket__logo path, .pv-thicket__logo use { fill: #E6E1D3; stroke: #0A0A0A; stroke-width: 1.5; paint-order: stroke; }
.pv-thicket__vein { fill: none; stroke: #8B0000; stroke-width: 2; }
.pv-thicket__drop { fill: #8B0000; }
.pv-thicket__nav { position: absolute; left: 50%; bottom: 4%; margin: 0; translate: -50% 0; font: 400 6.5cqi/1 "PvAnton", Impact, sans-serif; letter-spacing: 0.3em; color: #E6E1D3; border-bottom: 0.5cqi solid rgba(139, 0, 0, 0); padding-bottom: 0.6cqi; }
/* the tour page waits behind a zero-width fissure down the centre */
.pv-thicket__tour { position: absolute; inset: 0; display: grid; place-content: center; gap: 1cqi; background: #E6E1D3; color: #0A0A0A; text-align: center;
clip-path: polygon(50% 0, 50% 12%, 50% 25%, 50% 40%, 50% 55%, 50% 70%, 50% 85%, 50% 100%, 50% 100%, 50% 85%, 50% 70%, 50% 55%, 50% 40%, 50% 25%, 50% 12%, 50% 0); }
.pv-thicket__tour p { margin: 0; font: 400 7.5cqi/1.1 "PvAnton", Impact, sans-serif; letter-spacing: 0.08em; white-space: nowrap; }
.pv-thicket__tour b { font-weight: 400; color: #8B0000; margin-right: 1.5cqi; }
.pv-thicket__cur { position: absolute; left: 88%; top: 84%; width: 7%; aspect-ratio: 14 / 19; background: #E6E1D3; clip-path: polygon(0 0, 0 86%, 32% 68%, 50% 100%, 66% 92%, 48% 60%, 84% 58%); scale: 1; filter: drop-shadow(0.4cqi 0.4cqi 0 #8B0000); z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
.pv-thicket__cur { animation: pv-thicket-click 6s infinite; }
.pv-thicket__nav { animation: pv-thicket-under 6s steps(1, end) infinite; }
.pv-thicket__thorn { animation: pv-thicket-grow 6s infinite; animation-delay: calc(var(--k) * 0.12s); }
.pv-thicket__art { animation: pv-thicket-jolt 6s steps(1, end) infinite; }
.pv-thicket__tour { animation: pv-thicket-split 6s infinite; }
/* the cursor comes in, presses TOUR once, then gets out of the way */
@keyframes pv-thicket-click {
0%, 10% { left: 88%; top: 84%; scale: 1; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
19% { left: 52%; top: 89%; scale: 1; }
20%, 23% { left: 52%; top: 89%; scale: 0.8; }
24%, 32% { left: 52%; top: 89%; scale: 1; animation-timing-function: ease-in-out; }
46%, 100% { left: 88%; top: 84%; scale: 1; }
}
@keyframes pv-thicket-under {
0% { border-bottom-color: rgba(139, 0, 0, 0); }
20% { border-bottom-color: rgba(139, 0, 0, 1); }
88% { border-bottom-color: rgba(139, 0, 0, 0); }
100% { border-bottom-color: rgba(139, 0, 0, 0); }
}
/* thorns: hold, grow with a heavy overshoot, hold, retract; at rest by 95% so the
0.12s stagger never lands mid-move */
@keyframes pv-thicket-grow {
0%, 25% { transform: scaleY(0.28); animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1.4); }
58% { transform: scaleY(1.12); animation-timing-function: ease-out; }
66%, 88% { transform: scaleY(1); animation-timing-function: cubic-bezier(0.7, 0, 0.6, 1); }
95%, 100% { transform: scaleY(0.28); }
}
/* the page jolts as the fissure opens */
@keyframes pv-thicket-jolt {
0% { translate: 0 0; }
67% { translate: -1.2cqi 0.6cqi; }
68% { translate: 1cqi -0.8cqi; }
69% { translate: -0.6cqi 0.3cqi; }
70% { translate: 0 0; }
100% { translate: 0 0; }
}
/* the fissure: nothing, a hairline, then it bursts; it seals from 88% */
@keyframes pv-thicket-split {
0%, 66% { clip-path: polygon(50% 0, 50% 12%, 50% 25%, 50% 40%, 50% 55%, 50% 70%, 50% 85%, 50% 100%, 50% 100%, 50% 85%, 50% 70%, 50% 55%, 50% 40%, 50% 25%, 50% 12%, 50% 0); animation-timing-function: linear; }
70% { clip-path: polygon(49.6% 0, 48.9% 12%, 49.4% 25%, 48.6% 40%, 49.2% 55%, 48.4% 70%, 49.3% 85%, 49.7% 100%, 50.3% 100%, 50.8% 85%, 51.5% 70%, 50.9% 55%, 51.4% 40%, 50.6% 25%, 51.1% 12%, 50.4% 0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1); }
75%, 88% { clip-path: polygon(44% 0, 38% 12%, 34% 25%, 27% 40%, 30% 55%, 23% 70%, 33% 85%, 41% 100%, 59% 100%, 67% 85%, 76% 70%, 70% 55%, 73% 40%, 66% 25%, 62% 12%, 56% 0); animation-timing-function: cubic-bezier(0.7, 0, 0.8, 0.4); }
96%, 100% { clip-path: polygon(50% 0, 50% 12%, 50% 25%, 50% 40%, 50% 55%, 50% 70%, 50% 85%, 50% 100%, 50% 100%, 50% 85%, 50% 70%, 50% 55%, 50% 40%, 50% 25%, 50% 12%, 50% 0); }
}
}
/* ---- INDUSTRIAL: a steel roller shutter slams up on the product grid; a hazard-stripe loader crawls under the heading ---- */
/* Previews v2 (2026-09-26), row 28. Poster: the shutter is down; slatted steel
with a grain, two heavy yellow rules, ZONE 04 in stencil caps (the face
carries its own bridges), a black pull handle and a yellow-black hazard bar along
the bottom. Hero: at 1s the shutter climbs, rattling side to side, and stops
dead just past its travel with a clank; behind it the page: ZONE 04 again,
the TAPROOM nav, six concrete product cells and a hazard-stripe loader
crawling under the heading. 6s cycle: at 5.2s the shutter drops under its
own weight, bounces once and is down. */
.pv-hazard { background: #3A3D40; container-type: inline-size; font-family: "Big Shoulders Stencil Display", Impact, "Arial Narrow", sans-serif; }
/* the page behind the door */
.pv-hazard__page { position: absolute; inset: 0; }
.pv-hazard__h { position: absolute; left: 6cqi; top: 4cqi; font: 800 13cqi/1 "Big Shoulders Stencil Display", Impact, "Arial Narrow", sans-serif; color: #FFC400; letter-spacing: 0.04em; white-space: nowrap; }
.pv-hazard__vrule { position: absolute; left: 58.5cqi; top: 4cqi; width: 1.2cqi; height: 24cqi; background: #FFC400; }
.pv-hazard__sub { position: absolute; left: 63cqi; top: 4.5cqi; font: 600 7cqi/1 "Oswald", Impact, "Arial Narrow", sans-serif; color: #FFC400; letter-spacing: 0.06em; }
.pv-hazard__nav { position: absolute; left: 63cqi; top: 14cqi; width: 31cqi; height: 12cqi; background: repeating-linear-gradient(to bottom, #8C8C8C 0 2cqi, transparent 2cqi 5cqi); }
/* the loader: a black slot with a hazard tape crawling through it */
.pv-hazard__loader { position: absolute; left: 6cqi; top: 22cqi; width: 50cqi; height: 4.5cqi; background: #111111; box-shadow: inset 0 0 0 0.5cqi #111111; overflow: hidden; }
.pv-hazard__load { position: absolute; left: 0; top: 0.5cqi; bottom: 0.5cqi; width: 200%; background: repeating-linear-gradient(-45deg, #FFC400 0 3cqi, #111111 3cqi 6cqi); }
.pv-hazard__cell { position: absolute; top: 31cqi; width: 28cqi; height: 17cqi; background: #8C8C8C; box-shadow: inset 0 0 0 0.5cqi #111111; }
.pv-hazard__c1, .pv-hazard__c4 { left: 6cqi; } .pv-hazard__c2, .pv-hazard__c5 { left: 36cqi; } .pv-hazard__c3, .pv-hazard__c6 { left: 66cqi; }
.pv-hazard__c4, .pv-hazard__c5, .pv-hazard__c6 { top: 50cqi; }
.pv-hazard__cell i { position: absolute; left: 0; right: 0; bottom: 0; height: 3.6cqi; background: #111111; }
.pv-hazard__c2 i { background: #FF6B00; }
.pv-hazard__c6 i { background: #FFC400; }
/* the shutter: slatted steel, grain, stencil, rules, handle, hazard bar */
.pv-hazard__door { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, #4A4E52 0 0.7cqi, #3A3D40 0.7cqi 5cqi, #26282B 5cqi 6cqi); box-shadow: 0 1.5cqi 0 rgba(0, 0, 0, 0.5); }
.pv-hazard__grain { position: absolute; inset: 0; opacity: 0.22; background: url("data:image/svg+xml;utf8,") 0 0 / 140px 140px; }
.pv-hazard__rule { position: absolute; left: 6cqi; right: 6cqi; height: 1.6cqi; background: #FFC400; }
.pv-hazard__ruleA { top: 12cqi; }
.pv-hazard__ruleB { top: 44cqi; }
.pv-hazard__stencil { position: absolute; left: 6cqi; top: 19cqi; font: 800 22cqi/1 "Big Shoulders Stencil Display", Impact, "Arial Narrow", sans-serif; color: #FFC400; letter-spacing: 0.04em; white-space: nowrap; }
.pv-hazard__handle { position: absolute; left: 40cqi; bottom: 10.5cqi; width: 20cqi; height: 3cqi; background: #111111; border-radius: 0.5cqi; }
.pv-hazard__stripes { position: absolute; left: 0; right: 0; bottom: 0; height: 8cqi; background: repeating-linear-gradient(45deg, #FFC400 0 4cqi, #111111 4cqi 8cqi); box-shadow: 0 -0.7cqi 0 #111111; }
@media (prefers-reduced-motion: no-preference) {
.pv-hazard__door { animation: pv-hazard-door 6s infinite; }
.pv-hazard__load { animation: pv-hazard-crawl 0.7s linear infinite; } /* component-rate: loader tape advances one stripe period per cycle; a 5s crawl reads as a stopped bar */
/* up: heavy start, rattle left-right on the way, dead stop, clank; then a
long hold; down: gravity ease-in, one bounce, rest */
@keyframes pv-hazard-door {
0%, 16.7% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.55); }
19% { translate: 0.7cqi -18%; animation-timing-function: linear; }
21% { translate: -0.7cqi -46%; animation-timing-function: linear; }
23% { translate: 0.6cqi -76%; animation-timing-function: linear; }
24.5% { translate: 0 -101.5%; animation-timing-function: ease-out; }
25.5% { translate: 0 -98.5%; animation-timing-function: ease-in-out; }
26.5%, 86.7% { translate: 0 -100%; animation-timing-function: cubic-bezier(0.6, 0, 1, 1); }
94% { translate: 0 0; animation-timing-function: ease-out; }
95.5% { translate: 0 -2.5%; animation-timing-function: ease-in; }
97%, 100% { translate: 0 0; }
}
/* one stripe period of a -45deg 6cqi tape is 6 * sqrt(2) cqi across */
@keyframes pv-hazard-crawl {
0% { translate: 0 0; }
99.9% { translate: -8.485cqi 0; }
100% { translate: 0 0; }
}
}
/* ---- MID-CENTURY MODERN: the catalogue hangs from a mobile; click the chair and its arm dips it into focus ---- */
/* Previews v2 (2026-09-26), row 36. Resting frame IS the poster: cream ground,
a walnut mobile hung off-centre with a chair on the short arm and a lamp
and pebble on a sub-bar, generous empty space on the left with the
catalogue name, a paper grain over everything. Hero: the mobile is already
swaying; the cursor clicks the chair, the arm dips it down into focus and a
product label appears while the counterweights swing and rebalance. Gentle,
weighted, every pivot on its own string. 8s; the chair rises and the whole
rig settles back to level, sway period matched to the loop. */
.pv-voids { background: #F2E8D5; container-type: inline-size; }
.pv-voids__brand { position: absolute; left: 6cqi; top: 6cqi; margin: 0; font: 400 6.5cqi/1.25 "Jost", "Trebuchet MS", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #6B4226; }
.pv-voids__hook { position: absolute; left: 58cqi; top: 0; width: 0.6cqi; height: 8cqi; background: #6B4226; }
/* the main bar hangs at 28cqi along its 54cqi length; short arm carries the chair */
.pv-voids__bar { position: absolute; left: 30cqi; top: 8cqi; width: 54cqi; height: 0.8cqi; background: #6B4226; border-radius: 0.4cqi; transform-origin: 28cqi 0; rotate: 0deg; }
.pv-voids__drop { position: absolute; top: 0.8cqi; width: 0; height: 0; }
.pv-voids__drop--chair { left: 0; transform-origin: 0 0; rotate: 0deg; }
.pv-voids__drop--sub { left: 53.6cqi; }
.pv-voids__string { position: absolute; left: -0.3cqi; top: 0; width: 0.6cqi; background: #6B4226; }
.pv-voids__string--chair { height: 9cqi; }
.pv-voids__string--sub { height: 6cqi; }
.pv-voids__string--lamp { height: 5cqi; }
.pv-voids__string--pebble { height: 12cqi; }
.pv-voids__chair { position: absolute; left: -10cqi; top: 9cqi; width: 20cqi; height: 18cqi; }
/* the sub-bar hangs from its middle */
.pv-voids__subbar { position: absolute; left: -13cqi; top: 6cqi; width: 26cqi; height: 0.7cqi; background: #6B4226; border-radius: 0.35cqi; transform-origin: 13cqi 0; rotate: 0deg; }
.pv-voids__drop--lamp { left: 0; top: 0.7cqi; }
.pv-voids__drop--pebble { left: 23cqi; top: 0.7cqi; }
.pv-voids__lamp { position: absolute; left: -6cqi; top: 5cqi; width: 12cqi; height: 12cqi; }
.pv-voids__pebble { position: absolute; left: -4.5cqi; top: 12cqi; width: 9cqi; height: 6.3cqi; }
.pv-voids__label { position: absolute; left: 12cqi; top: 50cqi; margin: 0; font: 400 6.5cqi/1.3 "Jost", "Trebuchet MS", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #2A7F84; opacity: 0; translate: 0 2cqi; }
.pv-voids__label b { display: block; font-weight: 600; color: #D9622B; }
.pv-voids__cur { position: absolute; left: 110%; top: 60%; width: 6.5%; aspect-ratio: 14 / 19; background: #6B4226; clip-path: polygon(0 0, 0 86%, 32% 68%, 50% 100%, 66% 92%, 48% 60%, 84% 58%); scale: 1; filter: drop-shadow(0.4cqi 0.4cqi 0 #F2E8D5); }
/* paper grain, static: textured illustration, not a flat vector */
.pv-voids__tex { position: absolute; inset: 0; pointer-events: none; opacity: 0.22; mix-blend-mode: multiply;
background: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px; }
@media (prefers-reduced-motion: no-preference) {
.pv-voids__bar { animation: pv-voids-arm 8s infinite; }
.pv-voids__subbar { animation: pv-voids-counter 8s infinite; }
.pv-voids__drop--chair { animation: pv-voids-pendant 8s infinite; }
.pv-voids__label { animation: pv-voids-label 8s infinite; }
.pv-voids__cur { animation: pv-voids-click 8s infinite; }
/* the main bar: a small sway, then the chair arm dips under the click with a
weighted overshoot, holds, and settles back through two diminishing swings */
@keyframes pv-voids-arm {
0% { rotate: 0deg; animation-timing-function: ease-in-out; }
10% { rotate: 1.4deg; animation-timing-function: ease-in-out; }
19% { rotate: 0deg; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
28% { rotate: -13.5deg; animation-timing-function: ease-in-out; }
36% { rotate: -11deg; animation-timing-function: ease-in-out; }
44% { rotate: -12.2deg; animation-timing-function: ease-in-out; }
56% { rotate: -11.8deg; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
72% { rotate: 2.4deg; animation-timing-function: ease-in-out; }
85% { rotate: -0.8deg; animation-timing-function: ease-in-out; }
94% { rotate: 0.25deg; animation-timing-function: ease-in-out; }
100% { rotate: 0deg; }
}
/* the sub-bar counterweights swing the other way and take longer to calm down */
@keyframes pv-voids-counter {
0% { rotate: 0deg; animation-timing-function: ease-in-out; }
10% { rotate: -1.6deg; animation-timing-function: ease-in-out; }
19% { rotate: 0deg; animation-timing-function: ease-in-out; }
29% { rotate: 9deg; animation-timing-function: ease-in-out; }
37% { rotate: -5deg; animation-timing-function: ease-in-out; }
45% { rotate: 3deg; animation-timing-function: ease-in-out; }
53% { rotate: -1.5deg; animation-timing-function: ease-in-out; }
62% { rotate: 4.5deg; animation-timing-function: ease-in-out; }
73% { rotate: -2.4deg; animation-timing-function: ease-in-out; }
84% { rotate: 1.2deg; animation-timing-function: ease-in-out; }
93% { rotate: -0.4deg; animation-timing-function: ease-in-out; }
100% { rotate: 0deg; }
}
/* the chair on its own string lags the arm a little */
@keyframes pv-voids-pendant {
0% { rotate: 0deg; animation-timing-function: ease-in-out; }
12% { rotate: 0.8deg; animation-timing-function: ease-in-out; }
21% { rotate: 0deg; animation-timing-function: ease-in-out; }
30% { rotate: 5deg; animation-timing-function: ease-in-out; }
38% { rotate: -3.5deg; animation-timing-function: ease-in-out; }
46% { rotate: 2deg; animation-timing-function: ease-in-out; }
56% { rotate: -0.6deg; animation-timing-function: ease-in-out; }
64% { rotate: -3deg; animation-timing-function: ease-in-out; }
76% { rotate: 1.8deg; animation-timing-function: ease-in-out; }
88% { rotate: -0.6deg; animation-timing-function: ease-in-out; }
100% { rotate: 0deg; }
}
@keyframes pv-voids-label {
0%, 24% { opacity: 0; translate: 0 2cqi; animation-timing-function: ease-out; }
32%, 56% { opacity: 1; translate: 0 0; animation-timing-function: ease-in; }
66%, 100% { opacity: 0; translate: 0 2cqi; }
}
/* the cursor: in from the right, one press on the chair, gone */
@keyframes pv-voids-click {
0%, 6% { left: 110%; top: 60%; scale: 1; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
16% { left: 31%; top: 36%; scale: 1; }
18%, 20% { left: 31%; top: 36%; scale: 0.82; }
21%, 26% { left: 31%; top: 36%; scale: 1; animation-timing-function: ease-in; }
36%, 100% { left: 110%; top: 60%; scale: 1; }
}
}
/* ---- NEW WAVE TYPOGRAPHY: scrolling shears the type layers apart on their own axes ---- */
/* Previews v2 (2026-09-26), row 41. Resting frame IS the poster: a faint
twelve-column Swiss grid on white, an airbrush violet-to-magenta cloud
bleeding behind, a stair of stepped black rules bottom-left, and a layered
lockup: NEUE at black weight, WELLE at hairline weight in magenta multiplied
over it, FEST run vertically in cyan, a 26 sitting on the magenta rule. The
hero moment: the scrollbar thumb runs down and every layer moves at its own
speed and axis, the baselines tilt, the stairs cascade, and the layers stop
in a second lockup that is just as deliberate. 7s cycle; scrolling back
reverses the shear into frame 0. */
.pv-offgrid { background: #FFFFFF; container-type: inline-size; font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111111; }
.pv-offgrid__grid { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(17, 17, 17, 0.11) 0 1px, transparent 1px 8.333cqi), repeating-linear-gradient(180deg, rgba(17, 17, 17, 0.11) 0 1px, transparent 1px 8.333cqi); }
.pv-offgrid__air { position: absolute; left: 50%; top: 8cqi; width: 50cqi; height: 50cqi; border-radius: 50%; background: radial-gradient(circle, #8A6BFF 0%, rgba(228, 0, 124, 0.55) 42%, transparent 70%); filter: blur(5cqi); opacity: 0.9; transform: translate(0, 0); }
.pv-offgrid__steps { position: absolute; left: 8.333%; top: 46cqi; }
.pv-offgrid__steps i { display: block; height: 1.5cqi; margin-bottom: 1.2cqi; width: calc(12cqi + var(--i) * 5cqi); background: #111111; transform: translateX(0); }
.pv-offgrid__rule { position: absolute; left: 0; right: 0; top: 42cqi; height: 1.3cqi; background: #E4007C; transform: translateY(0); }
.pv-offgrid__l1 { position: absolute; left: 8.333%; top: 5cqi; font-weight: 900; font-size: 24cqi; line-height: 1; letter-spacing: -0.05em; transform: translate(0, 0); }
.pv-offgrid__l2 { position: absolute; left: 22%; top: 21cqi; font-weight: 200; font-size: 24cqi; line-height: 1; letter-spacing: 0.02em; color: #E4007C; mix-blend-mode: multiply; transform: translate(0, 0) rotate(0deg); }
.pv-offgrid__l3 { position: absolute; left: 78%; top: 8cqi; writing-mode: vertical-rl; font-weight: 500; font-size: 10cqi; line-height: 1; letter-spacing: 0.22em; color: #00AEEF; mix-blend-mode: multiply; transform: translate(0, 0) rotate(180deg); }
.pv-offgrid__l4 { position: absolute; left: 62%; top: 48cqi; font-weight: 900; font-size: 19cqi; line-height: 1; letter-spacing: -0.04em; transform: translate(0, 0); }
/* the scrollbar is the story: this is a page, and it is being scrolled */
.pv-offgrid__track { position: absolute; right: 1.6cqi; top: 2cqi; bottom: 2cqi; width: 1.3cqi; background: rgba(17, 17, 17, 0.12); }
.pv-offgrid__thumb { position: absolute; left: 0; top: 0; width: 100%; height: 30%; background: #111111; transform: translateY(0); }
@media (prefers-reduced-motion: no-preference) {
.pv-offgrid__thumb { animation: pv-offgrid-thumb 7s infinite; }
.pv-offgrid__l1 { animation: pv-offgrid-l1 7s infinite; }
.pv-offgrid__l2 { animation: pv-offgrid-l2 7s infinite; }
.pv-offgrid__l3 { animation: pv-offgrid-l3 7s infinite; }
.pv-offgrid__l4 { animation: pv-offgrid-l4 7s infinite; }
.pv-offgrid__rule { animation: pv-offgrid-rule 7s infinite; }
.pv-offgrid__air { animation: pv-offgrid-air 7s infinite; }
.pv-offgrid__steps i { animation: pv-offgrid-stair 7s infinite; animation-delay: calc(var(--i) * 0.12s); }
@keyframes pv-offgrid-thumb {
0%, 14% { transform: translateY(0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
46%, 66% { transform: translateY(233%); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
92%, 100% { transform: translateY(0); }
}
/* the heavy headline leaves first and fastest */
@keyframes pv-offgrid-l1 {
0%, 14% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
40%, 68% { transform: translate(-3cqi, -9cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
90%, 100% { transform: translate(0, 0); }
}
/* the hairline layer drifts late and tilts its baseline */
@keyframes pv-offgrid-l2 {
0%, 18% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1); }
46%, 64% { transform: translate(16cqi, 10cqi) rotate(-8deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
92%, 100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes pv-offgrid-l3 {
0%, 16% { transform: translate(0, 0) rotate(180deg); animation-timing-function: cubic-bezier(0.4, 0, 0.1, 1); }
44%, 66% { transform: translate(-6cqi, 24cqi) rotate(170deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
92%, 100% { transform: translate(0, 0) rotate(180deg); }
}
/* the year crosses the page under everything else */
@keyframes pv-offgrid-l4 {
0%, 20% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.6, 0, 0.1, 1); }
48%, 66% { transform: translate(-32cqi, -16cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
94%, 100% { transform: translate(0, 0); }
}
@keyframes pv-offgrid-rule {
0%, 14% { transform: translateY(0); animation-timing-function: cubic-bezier(0.4, 0, 0.1, 1); }
44%, 66% { transform: translateY(-17cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
90%, 100% { transform: translateY(0); }
}
@keyframes pv-offgrid-air {
0%, 14% { transform: translate(0, 0); animation-timing-function: ease-in-out; }
46%, 66% { transform: translate(-8cqi, 12cqi); animation-timing-function: ease-in-out; }
92%, 100% { transform: translate(0, 0); }
}
/* each stair follows the one above it by 0.12s: rest at both ends so the
stagger never leaves anything displaced at frame 0 */
@keyframes pv-offgrid-stair {
0%, 14% { transform: translateX(0); animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
38%, 70% { transform: translateX(calc(var(--i) * 4.5cqi + 6cqi)); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
88%, 100% { transform: translateX(0); }
}
}
/* ---- NEO-BAROQUE: pull back from one gilt frame and the product grid is a salon wall ---- */
/* Previews v2 (2026-09-26), row 39. Resting frame IS the poster: one ornate
gilt frame fills the card, a cartouche on its crown, holding a sneaker in
marble white lit from the upper left against umber-to-black, "No IV" on a
gold plaque. Hero: the product grid as salon wall. The whole wall scales
down (fast, then slowing right to the stop) until nine gilt frames sit in
three rows on crimson damask, each with its own chiaroscuro object; then
one frame lifts and brightens, the card-hover of this grid. The view pushes
back in to the first frame. 8s cycle. */
.pv-stagelit { background: #0A0A0A; container-type: inline-size; font-family: "Playfair Display", Georgia, "Times New Roman", serif; }
/* the wall: at rest scaled 3.3333 about the card centre, so the central 30x22.5 frame fills 100x75 exactly */
.pv-stagelit__wall {
position: absolute; inset: 0; transform-origin: 50% 50%; transform: scale(3.3333);
background:
radial-gradient(circle at 50% 50%, #7B0D1E 0 0.9cqi, transparent 1.1cqi) 0 0 / 6cqi 6cqi,
radial-gradient(circle at 50% 50%, #5A0A16 0 0.5cqi, transparent 0.7cqi) 3cqi 3cqi / 6cqi 6cqi,
#3B0812;
}
.pv-stagelit__frame {
position: absolute; left: calc(var(--x) * 1cqi); top: calc(var(--y) * 1cqi); width: calc(var(--w) * 1cqi); height: calc(var(--h) * 1cqi);
margin: 0; box-sizing: border-box; border: 1.3cqi solid #C9A227;
box-shadow: inset 0 0 0 0.3cqi #6B4F0F, 0 0 0 0.3cqi #6B4F0F, 0 0 0 0.55cqi #E0BE55, 0 1cqi 2.4cqi rgba(0, 0, 0, 0.75);
background: radial-gradient(ellipse at 32% 26%, #6A5238 0%, #2C2016 42%, #0A0A0A 78%);
transform: scale(1);
}
/* the cartouche: a gold lozenge on every frame's crown */
.pv-stagelit__frame::before {
content: ""; position: absolute; left: 50%; top: -2.4cqi; width: 3cqi; height: 3cqi;
translate: -50% 0; rotate: 45deg; background: #C9A227; box-shadow: inset 0 0 0 0.35cqi #6B4F0F, 0 0 0 0.3cqi #6B4F0F;
}
.pv-stagelit__frame svg { position: absolute; inset: 6%; width: 88%; height: 88%; fill: #F2EFEA; }
.pv-stagelit__dark { fill: #0A0A0A; fill-opacity: 0.55; }
.pv-stagelit__line { fill: none; stroke: #0A0A0A; stroke-width: 2.4; stroke-linecap: round; }
.pv-stagelit__cap {
position: absolute; left: 50%; bottom: 0.6cqi; translate: -50% 0; padding: 0.2cqi 1cqi;
background: #C9A227; color: #0A0A0A; font: italic 400 2.6cqi/1.2 "Playfair Display", Georgia, serif; white-space: nowrap;
}
.pv-stagelit__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(0, 0, 0, 0.7) 100%); }
@media (prefers-reduced-motion: no-preference) {
.pv-stagelit__wall { animation: pv-stagelit-pull 8s infinite; }
.pv-stagelit__hover { animation: pv-stagelit-hover 8s infinite; }
/* pull back: quick to leave the frame, slow into the wall; hold; push in */
@keyframes pv-stagelit-pull {
0%, 19% { transform: scale(3.3333); animation-timing-function: cubic-bezier(0.55, 0, 0.1, 1); }
60%, 87% { transform: scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
100% { transform: scale(3.3333); }
}
/* once the grid is up, one frame takes the hover: lifts, border warms */
@keyframes pv-stagelit-hover {
0%, 64% { transform: scale(1); border-color: #C9A227; animation-timing-function: ease-out; }
68%, 80% { transform: scale(1.08); border-color: #E0BE55; animation-timing-function: ease-in-out; }
85%, 100% { transform: scale(1); border-color: #C9A227; }
}
}
/* ---- SEVENTIES REVIVAL: the sun arch is the loader; when the last band fills, the type swells and the CTA arms ---- */
/* Previews v2 (2026-09-26), row 50. Resting frame IS the poster: four stacked
sun-arch bands (burnt orange, mustard, avocado, brown) on cream, each part
filled from the left in a staircase, SKATE NITE in bulbous outlined caps
across the bottom, a greyed-out LACE UP pill top-left, film grain over all.
The hero moment: the bands fill in one after another like a progress bar;
as the brown band completes the letters swell and bounce like a waterbed,
and the LACE UP pill goes solid mustard, ready to press. 7s cycle; the pill
greys out again and the bands drain in reverse order back to frame 0. */
.pv-sunarch { background: #F3E9D2; container-type: inline-size; }
.pv-sunarch__arcs { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv-sunarch__band { fill: none; stroke-width: 38; stroke-dasharray: 1; }
.pv-sunarch__b1 { stroke: #E86A33; stroke-dashoffset: 0.5; }
.pv-sunarch__b2 { stroke: #E3B04B; stroke-dashoffset: 0.62; }
.pv-sunarch__b3 { stroke: #8A9A5B; stroke-dashoffset: 0.74; }
.pv-sunarch__b4 { stroke: #6B4226; stroke-dashoffset: 0.86; }
/* the CTA waits disabled until the loader completes */
.pv-sunarch__cta {
position: absolute; left: 5cqi; top: 6cqi; margin: 0; padding: 1.6cqi 3.2cqi; white-space: nowrap;
font: 400 5.2cqi/1 "Chango", "Arial Black", Impact, sans-serif; letter-spacing: 0.04em; color: #6B4226;
border: 0.6cqi solid #6B4226; border-radius: 99cqi; background: rgba(227, 176, 75, 0); opacity: 0.45; transform: scale(1);
}
/* bulbous caps: cream fill, thick brown outline, hard brown drop; reads over any band */
.pv-sunarch__head {
position: absolute; left: 0; right: 0; bottom: 5%; margin: 0; text-align: center;
font: 400 16cqi/0.92 "Chango", "Arial Black", Impact, sans-serif; letter-spacing: 0; color: #F3E9D2;
-webkit-text-stroke: 0.55cqi #6B4226; paint-order: stroke fill; text-shadow: 0.9cqi 0.9cqi 0 #6B4226;
transform-origin: 50% 100%; transform: scale(1, 1);
}
.pv-sunarch__grain {
position: absolute; inset: 0; pointer-events: none; opacity: 0.22; mix-blend-mode: multiply;
background: url("data:image/svg+xml;utf8,") 0 0 / 140px 140px;
}
@media (prefers-reduced-motion: no-preference) {
.pv-sunarch__b1 { animation: pv-sunarch-b1 7s infinite; }
.pv-sunarch__b2 { animation: pv-sunarch-b2 7s infinite; }
.pv-sunarch__b3 { animation: pv-sunarch-b3 7s infinite; }
.pv-sunarch__b4 { animation: pv-sunarch-b4 7s infinite; }
.pv-sunarch__head { animation: pv-sunarch-swell 7s infinite; }
.pv-sunarch__cta { animation: pv-sunarch-arm 7s infinite; }
/* outer to inner, each band fills over 0.8s, overlapping the next; they drain innermost first */
@keyframes pv-sunarch-b1 {
0%, 14.3% { stroke-dashoffset: 0.5; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
25.7%, 87.1% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1); }
95.7%, 100% { stroke-dashoffset: 0.5; }
}
@keyframes pv-sunarch-b2 {
0%, 22.9% { stroke-dashoffset: 0.62; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
34.3%, 82.9% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1); }
90%, 100% { stroke-dashoffset: 0.62; }
}
@keyframes pv-sunarch-b3 {
0%, 31.4% { stroke-dashoffset: 0.74; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
42.9%, 78.6% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1); }
85.7%, 100% { stroke-dashoffset: 0.74; }
}
@keyframes pv-sunarch-b4 {
0%, 40% { stroke-dashoffset: 0.86; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
51.4%, 74.3% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1); }
81.4%, 100% { stroke-dashoffset: 0.86; }
}
/* the waterbed: tall swell, squash, smaller swell, settle */
@keyframes pv-sunarch-swell {
0%, 51.4% { transform: scale(1, 1); animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
57% { transform: scale(1.08, 1.3); animation-timing-function: ease-in-out; }
62% { transform: scale(0.96, 0.88); animation-timing-function: ease-in-out; }
66.5% { transform: scale(1.03, 1.07); animation-timing-function: ease-in-out; }
70% { transform: scale(0.99, 0.98); animation-timing-function: ease-out; }
73%, 100% { transform: scale(1, 1); }
}
/* the pill arms when the loader completes: solid mustard with a small pop */
@keyframes pv-sunarch-arm {
0%, 51.4% { background: rgba(227, 176, 75, 0); opacity: 0.45; transform: scale(1); }
54% { background: rgba(227, 176, 75, 1); opacity: 1; transform: scale(1.12); }
57%, 74.3% { background: rgba(227, 176, 75, 1); opacity: 1; transform: scale(1); }
78%, 100% { background: rgba(227, 176, 75, 0); opacity: 0.45; transform: scale(1); }
}
}
/* ---- MANGA: a tap on the first panel pushes it to full screen; speed lines, a shocked face, a bubble and a BAM ---- */
/* Previews v2 (2026-09-26), row 31. Resting frame IS the poster: a four-panel
page read right to left, panels of unequal size, the wide top-right panel
holding an original spiky-haired character mid-reaction (raised brows,
open mouth) over screentone; a dense-tone panel with rain lines, an ink
panel with white focus lines, a tone panel with an empty bubble. Hero: a
reader's tap ring lands on the first panel and the page pushes in until
that panel fills the card (guided view); the pupils snap small, a sweat
drop and shock lines appear, a burst of black speed lines fires behind
the head, the speech bubble pops NEW CHAPTER! and a red BAM!! slams in.
Loop: everything cuts, the page pulls back to the four-panel spread. 6.5s.
Bangers is not bundled; PvAnton carries the lettering. Red is the SFX
only; no colour washes. */
.pv-koma { background: #FFFFFF; container-type: inline-size; color: #000000; }
.pv-koma p { margin: 0; }
/* the page: transform-origin at the centre of panel one so the push-in is a pure zoom onto it */
.pv-koma__page { position: absolute; inset: 0; transform-origin: 65.5% 29%; transform: translate(0, 0) scale(1); }
.pv-koma__p { position: absolute; box-sizing: border-box; border: 1cqi solid #000000; background: #FFFFFF; overflow: hidden; }
.pv-koma__p1 { left: 37%; top: 6%; width: 57%; height: 46%; }
.pv-koma__p2 { left: 6%; top: 6%; width: 28%; height: 46%; }
.pv-koma__p3 { left: 66%; top: 57%; width: 28%; height: 37%; }
.pv-koma__p4 { left: 6%; top: 57%; width: 57%; height: 37%; }
.pv-koma__p--ink { background: #000000; }
/* screentone: a dot field, graded where the panel wants shadow */
.pv-koma__tone { position: absolute; inset: 0; background: radial-gradient(circle, #000000 0 0.5cqi, transparent 0.6cqi) 0 0 / 1.5cqi 1.5cqi; opacity: 0.32; }
.pv-koma__tone--top { mask: linear-gradient(to bottom, #000 0 45%, transparent 90%); -webkit-mask: linear-gradient(to bottom, #000 0 45%, transparent 90%); }
.pv-koma__tone--bottom { mask: linear-gradient(to top, #000 0 30%, transparent 85%); -webkit-mask: linear-gradient(to top, #000 0 30%, transparent 85%); }
.pv-koma__tone--dense { background-size: 1.1cqi 1.1cqi; opacity: 0.55; }
.pv-koma__rain { position: absolute; inset: -10%; background: repeating-linear-gradient(112deg, #000000 0 0.45cqi, transparent 0.45cqi 3.2cqi); opacity: 0.55; }
.pv-koma__focus { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 50%, #FFFFFF 0 1.6deg, transparent 1.6deg 8deg); mask: radial-gradient(circle at 50% 50%, transparent 0 18%, #000 42%); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 18%, #000 42%); }
.pv-koma__mini { position: absolute; left: 12%; top: 20%; width: 40%; height: 48%; border: 0.9cqi solid #000000; border-radius: 50%; background: #FFFFFF; }
/* the character */
.pv-koma__face { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv-koma__pupil { transform-box: fill-box; transform-origin: center; transform: scale(1); }
.pv-koma__sweat, .pv-koma__shock { opacity: 0; }
/* reader chrome: the tap ring, absent at rest */
.pv-koma__tap { position: absolute; left: 65.5%; top: 29%; width: 14cqi; height: 14cqi; margin: -7cqi 0 0 -7cqi; border-radius: 50%; border: 0.9cqi solid #000000; opacity: 0; transform: scale(0.3); }
/* the speed-line burst: whole-card conic stripes with the centre masked clear for the face */
.pv-koma__burst { position: absolute; inset: -25%; background: repeating-conic-gradient(from 3deg at 50% 50%, #000000 0 1.3deg, transparent 1.3deg 6.5deg); mask: radial-gradient(circle at 50% 50%, transparent 0 21%, #000 30%); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 21%, #000 30%); opacity: 0; transform: scale(1.25); }
/* the speech bubble and the SFX: parked at scale zero-ish and invisible at rest */
.pv-koma__bubble { position: absolute; left: 3%; top: 4%; padding: 3cqi 4.5cqi; background: #FFFFFF; border: 1.1cqi solid #000000; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; font: 400 8.5cqi/0.95 "Bangers", "PvAnton", Impact, sans-serif; letter-spacing: 0.02em; text-align: center; opacity: 0; transform: scale(0.6); transform-origin: 70% 100%; }
.pv-koma__bubble::after { content: ""; position: absolute; right: 18%; bottom: -3.2cqi; width: 4cqi; height: 4cqi; background: #FFFFFF; border-right: 1.1cqi solid #000000; border-bottom: 1.1cqi solid #000000; transform: skewX(28deg) rotate(45deg); }
.pv-koma__sfx { position: absolute; right: 4%; bottom: 6%; font: 400 22cqi/1 "Bangers", "PvAnton", Impact, sans-serif; color: #E63946; -webkit-text-stroke: 1cqi #000000; paint-order: stroke fill; letter-spacing: -0.02em; opacity: 0; transform: rotate(-9deg) scale(0.5); transform-origin: 50% 60%; }
@media (prefers-reduced-motion: no-preference) {
.pv-koma__tap { animation: pv-koma-tap 6.5s infinite; }
.pv-koma__page { animation: pv-koma-push 6.5s infinite; }
.pv-koma__pupil { animation: pv-koma-pupil 6.5s steps(1, end) infinite; }
.pv-koma__sweat, .pv-koma__shock { animation: pv-koma-mark 6.5s steps(1, end) infinite; }
.pv-koma__burst { animation: pv-koma-burst 6.5s infinite; }
.pv-koma__bubble { animation: pv-koma-bubble 6.5s infinite; }
.pv-koma__sfx { animation: pv-koma-sfx 6.5s infinite; }
/* the tap: a ring blooms on panel one and fades as the push begins */
@keyframes pv-koma-tap {
0%, 16% { opacity: 0; transform: scale(0.3); }
17% { opacity: 0.9; transform: scale(0.3); animation-timing-function: ease-out; }
22% { opacity: 0; transform: scale(1); }
22.1%, 100% { opacity: 0; transform: scale(0.3); }
}
/* the push: hard in, hold, hard out */
@keyframes pv-koma-push {
0%, 21% { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
27%, 77% { transform: translate(-15.5%, 21%) scale(2.05); animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
83%, 100% { transform: translate(0, 0) scale(1); }
}
/* the face reacts the instant the panel lands: pupils snap small, sweat and shock lines appear */
@keyframes pv-koma-pupil {
0%, 27.4% { transform: scale(1); }
27.5%, 76.9% { transform: scale(0.42); }
77%, 100% { transform: scale(1); }
}
@keyframes pv-koma-mark {
0%, 28.9% { opacity: 0; }
29%, 76.9% { opacity: 1; }
77%, 100% { opacity: 0; }
}
/* speed lines fire in a sixth of a second and cut out with the pull-back */
@keyframes pv-koma-burst {
0%, 27.5% { opacity: 0; transform: scale(1.25); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
30%, 76.5% { opacity: 1; transform: scale(1); }
77%, 100% { opacity: 0; transform: scale(1.25); }
}
/* the bubble pops with overshoot; the SFX slams in a beat later */
@keyframes pv-koma-bubble {
0%, 31% { opacity: 0; transform: scale(0.6); animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1); }
31.1% { opacity: 1; transform: scale(0.6); animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1); }
35%, 76.5% { opacity: 1; transform: scale(1); }
77%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes pv-koma-sfx {
0%, 36% { opacity: 0; transform: rotate(-9deg) scale(0.5); animation-timing-function: cubic-bezier(0.2, 1.6, 0.4, 1); }
36.1% { opacity: 1; transform: rotate(-9deg) scale(0.5); animation-timing-function: cubic-bezier(0.2, 1.6, 0.4, 1); }
40%, 76.5% { opacity: 1; transform: rotate(-9deg) scale(1); }
77%, 100% { opacity: 0; transform: rotate(-9deg) scale(0.5); }
}
}
/* ---- MODERN SAAS: the charts spring up, a +32% card pops in, the cursor clicks the one accent button and a toast confirms ---- */
/* Previews v2 (2026-09-26), row 38. Resting frame IS the poster: a complete
analytics-startup hero on white — slate headline top-left, the single
indigo CTA under it, a rounded product screenshot on soft elevation with a
five-bar chart, a bar of made-up grey customer marks along the bottom.
Hero: the bars spring taller on an overshoot, a floating +32% card springs
in over the screenshot, the cursor comes in and clicks the CTA (it dips
and rebounds) and a white success toast slides up from the bottom. Loop:
toast slides away, the card and cursor leave, bars ease back. Indigo is
used on the button and nowhere else. 7s cycle. */
.pv-accentrole { background: #FFFFFF; container-type: inline-size; color: #0F172A; font-family: "Inter", Helvetica, Arial, sans-serif; }
.pv-accentrole p { margin: 0; }
.pv-accentrole__h { position: absolute; left: 6%; top: 9%; font-size: 8cqi; line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
/* the one accent: the primary action */
.pv-accentrole__cta { position: absolute; left: 6%; top: 40%; padding: 1.4cqi 3cqi; background: #635BFF; color: #FFFFFF; font-size: 5.5cqi; line-height: 1; font-weight: 600; border-radius: 1.6cqi; white-space: nowrap; transform: scale(1); }
/* product screenshot on soft elevation */
.pv-accentrole__shot { position: absolute; left: 47%; right: 6%; top: 8%; height: 60%; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 2.4cqi; box-shadow: 0 2.5cqi 5cqi rgba(15, 23, 42, 0.10); overflow: hidden; }
.pv-accentrole__topbar { position: absolute; left: 0; right: 0; top: 0; height: 5cqi; background: #F3F4F6; border-bottom: 1px solid #E5E7EB; }
.pv-accentrole__bars { position: absolute; left: 8%; right: 8%; bottom: 0; top: 5cqi; display: flex; align-items: flex-end; gap: 6%; padding-bottom: 8%; }
.pv-accentrole__bars i { flex: 1; height: var(--h); background: #0F172A; border-radius: 0.8cqi 0.8cqi 0 0; transform: scaleY(1); transform-origin: 50% 100%; }
/* the floating stat card: absent at rest */
.pv-accentrole__float { position: absolute; left: 40%; top: 3%; padding: 1.4cqi 2.4cqi; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 1.6cqi; box-shadow: 0 2cqi 4cqi rgba(15, 23, 42, 0.12); font-size: 7cqi; line-height: 1; font-weight: 700; opacity: 0; transform: scale(0.6); }
/* the logo bar: four abstract grey marks, no real brands */
.pv-accentrole__logos { position: absolute; left: 6%; right: 6%; bottom: 7%; display: flex; justify-content: space-between; }
.pv-accentrole__logos i { height: 3cqi; background: radial-gradient(circle, #9CA3AF 0 1.3cqi, transparent 1.4cqi) 0 50% / 3cqi 3cqi no-repeat, linear-gradient(#9CA3AF, #9CA3AF) 4cqi 50% / calc(100% - 4cqi) 1.3cqi no-repeat; }
/* cursor: off-canvas at rest */
.pv-accentrole__cur { position: absolute; left: 106%; top: 106%; width: 7%; aspect-ratio: 14 / 19; background: #0F172A; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%); filter: drop-shadow(0 0 0.4cqi rgba(255, 255, 255, 0.9)); }
/* success toast: parked below the card at rest */
.pv-accentrole__toast { position: absolute; left: 6%; top: 62%; display: flex; align-items: center; gap: 1.8cqi; padding: 1.6cqi 2.6cqi; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 1.6cqi; box-shadow: 0 2cqi 4cqi rgba(15, 23, 42, 0.12); font-size: 5.5cqi; line-height: 1; font-weight: 600; transform: translateY(50cqi); }
.pv-accentrole__toast i { width: 3.4cqi; height: 3.4cqi; border-radius: 50%; background: #0F172A; box-shadow: inset 0 0 0 0.9cqi #0F172A, inset 0 0 0 1.4cqi #FFFFFF; }
@media (prefers-reduced-motion: no-preference) {
.pv-accentrole__bars i { animation: pv-accentrole-bars 7s infinite; }
.pv-accentrole__float { animation: pv-accentrole-float 7s infinite; }
.pv-accentrole__cur { animation: pv-accentrole-cursor 7s infinite; }
.pv-accentrole__cta { animation: pv-accentrole-click 7s infinite; }
.pv-accentrole__toast { animation: pv-accentrole-toast 7s infinite; }
/* bars: spring up to their new value with an overshoot, hold, ease back */
@keyframes pv-accentrole-bars {
0%, 15% { transform: scaleY(1); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.3); }
30%, 78% { transform: scaleY(var(--g)); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
94%, 100% { transform: scaleY(1); }
}
/* the stat card springs in past size, settles, leaves the same way */
@keyframes pv-accentrole-float {
0%, 30% { opacity: 0; transform: scale(0.6); animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1); }
33% { opacity: 1; transform: scale(0.6); animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1); }
40%, 84% { opacity: 1; transform: scale(1); animation-timing-function: ease-in; }
88%, 100% { opacity: 0; transform: scale(0.6); }
}
/* cursor: in from the bottom-right, onto the button, out */
@keyframes pv-accentrole-cursor {
0%, 48% { left: 106%; top: 106%; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
58%, 72% { left: 15%; top: 45%; animation-timing-function: ease-in; }
80%, 100% { left: 106%; top: 106%; }
}
/* the click: a dip and a springy rebound */
@keyframes pv-accentrole-click {
0%, 59% { transform: scale(1); animation-timing-function: ease-in; }
60.5% { transform: scale(0.92); animation-timing-function: cubic-bezier(0.2, 1.6, 0.4, 1); }
64%, 100% { transform: scale(1); }
}
/* toast: up from below on a spring, hold, back down */
@keyframes pv-accentrole-toast {
0%, 62% { transform: translateY(50cqi); animation-timing-function: cubic-bezier(0.2, 1.2, 0.3, 1); }
68%, 84% { transform: translateY(0); animation-timing-function: ease-in; }
90%, 100% { transform: translateY(50cqi); }
}
}
/* ---- JAPANESE MINIMALISM: one bowl, moved once, while the nav underline moves with it; then moved back ---- */
/* Previews v2 (2026-09-26), row 29. Resting frame IS the poster: a vast
warm washi field, one stoneware bowl placed low-right, three very small
nav words top-left with a hairline under the first, a single vermilion
seal in the bottom corner, paper grain barely there. Hero: after two
seconds of stillness the bowl slides left to a new asymmetric position on
a long slow ease while the hairline underline travels to the second nav
word (the selection indicator); then stillness again. Loop: the move
reverses inside the same cycle and the page settles back. 10s cycle. */
.pv-interval { background: #F4F1EA; container-type: inline-size; color: #1A1A1A; }
.pv-interval p { margin: 0; }
/* paper: fine turbulence at low opacity, breathing over the whole cycle */
.pv-interval__paper { position: absolute; inset: -4%; pointer-events: none; opacity: 0.07; background: url("data:image/svg+xml;utf8,") 0 0 / 200px 200px; }
/* the nav: three small words in Shippori Mincho, wide tracking; 5.2cqi is 12px at card size, the floor */
.pv-interval__nav { position: absolute; left: 7%; top: 9%; display: flex; font: 400 5.2cqi/1 "Shippori Mincho", Palatino, Georgia, serif; letter-spacing: 0.06em; color: #1A1A1A; }
.pv-interval__nav span { display: block; width: 26cqi; }
.pv-interval__line { position: absolute; left: 7%; top: calc(9% + 6.4cqi); width: 12cqi; height: 1px; background: #1A1A1A; transform: translateX(0); }
/* the bowl: a half-ellipse body, a shadow, a foot */
.pv-interval__bowl { position: absolute; left: 58%; top: 50%; width: 30cqi; height: 21cqi; }
.pv-interval__body { position: absolute; left: 0; right: 0; top: 0; height: 15cqi; border-radius: 1cqi 1cqi 50% 50% / 1cqi 1cqi 100% 100%; background: radial-gradient(ellipse at 40% 10%, #C4BFB5 0 30%, #A8A39A 55%, #75706A 100%); box-shadow: inset 0 0.5cqi 0 #DAD6CE, inset 0 -0.8cqi 1.2cqi rgba(26, 26, 26, 0.25); }
.pv-interval__foot { position: absolute; left: 36%; right: 36%; top: 14.5cqi; height: 2.2cqi; background: #7A756D; border-radius: 0 0 0.6cqi 0.6cqi; }
.pv-interval__shade { position: absolute; left: -6%; right: -6%; top: 14cqi; height: 5cqi; border-radius: 50%; background: rgba(26, 26, 26, 0.16); filter: blur(1.4cqi); }
/* the one vermilion mark, small */
.pv-interval__seal { position: absolute; left: 7%; bottom: 9%; width: 2.6cqi; height: 2.6cqi; background: #C73E1D; }
@media (prefers-reduced-motion: no-preference) {
.pv-interval__paper { animation: pv-interval-breathe 10s ease-in-out infinite; }
.pv-interval__bowl { animation: pv-interval-move 10s infinite; }
.pv-interval__line { animation: pv-interval-select 10s infinite; }
@keyframes pv-interval-breathe { 0% { opacity: 0.07; } 50% { opacity: 0.11; } 100% { opacity: 0.07; } }
/* the bowl: still, one slow slide left, still, the same slide back, still */
@keyframes pv-interval-move {
0%, 20% { left: 58%; animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
45%, 65% { left: 24%; animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
88%, 100% { left: 58%; }
}
/* the underline travels to the second word with the bowl, and back */
@keyframes pv-interval-select {
0%, 20% { transform: translateX(0); animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
45%, 65% { transform: translateX(26cqi); animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
88%, 100% { transform: translateX(0); }
}
}
/* ---- EDITORIAL MODERNISM: the art director re-crops the photo inside the columns while the baseline grid flashes on ---- */
/* Previews v2 (2026-09-26), row 20. Resting frame IS the poster: an
off-white feature spread with visible column guides, a three-line-deep
italic drop cap T, grey text measure in column one, a duotone photo across
columns two and three with a short orange caption rule, and an italic pull
quote beneath. Hero: after a beat the photo zooms and shifts inside its
frame to a tighter, more dramatic crop on one long ease-out; the baseline
grid flashes on in orange hairlines and settles faint; the pull quote nudges
up onto the nearest baseline, gains weight, and an orange rule draws under
it. Loop: the grid fades, the rule retracts, the crop eases back. 8s. */
/* Bodoni Moda for the display italics; Inter is the body grotesk (the text measure is drawn as bars, so it carries no visible glyphs) */
.pv-pullq { background: #F4F1EA; container-type: inline-size; color: #111; font-family: "Inter", Helvetica, Arial, sans-serif; }
.pv-pullq p { margin: 0; }
/* column guides: three columns, hairlines */
.pv-pullq__cols { position: absolute; inset: 0 6%; background: repeating-linear-gradient(90deg, #C9C3B5 0 1px, transparent 1px 29.4%); }
/* drop cap, italic display serif, three lines deep */
.pv-pullq__cap { position: absolute; left: 6.5%; top: 9%; font: italic 400 34cqi/1 "Bodoni Moda", Georgia, "Times New Roman", serif; }
/* text measure as grey bars: the eye reads it as set type at card size */
.pv-pullq__txt { position: absolute; background: repeating-linear-gradient(to bottom, #6E6A62 0 1.1cqi, transparent 1.1cqi 2.6cqi); opacity: 0.75; }
.pv-pullq__txt1 { left: 25%; width: 8%; top: 9%; height: 24%; }
.pv-pullq__txt2 { left: 6.5%; width: 26.5%; top: 40%; height: 52%; }
/* the photo: duotone sun over an ink horizon, halftoned, clipped to its frame */
.pv-pullq__img { position: absolute; left: 36.2%; right: 6%; top: 6%; height: 50%; overflow: hidden; background: #D9D3C6; }
.pv-pullq__pic {
position: absolute; inset: 0; transform-origin: 62% 42%; transform: scale(1) translate(0, 0);
background:
radial-gradient(circle, #111 0 0.45cqi, transparent 0.5cqi) 0 0 / 1.7cqi 1.7cqi,
linear-gradient(to bottom, transparent 0 66%, #111 66% 100%),
radial-gradient(circle at 62% 42%, #E4572E 0 21%, transparent 21.5%),
linear-gradient(to bottom, #E9E3D6, #C9C2B2);
}
/* caption: a short orange rule then two grey lines */
.pv-pullq__caption { position: absolute; left: 36.2%; width: 34%; top: 59%; height: 6.5cqi; background: linear-gradient(90deg, #E4572E 0 22%, transparent 22%) 0 0 / 100% 1.1cqi no-repeat, repeating-linear-gradient(to bottom, transparent 0 2.4cqi, #6E6A62 2.4cqi 3.4cqi); }
/* pull quote across columns two and three */
.pv-pullq__quote { position: absolute; left: 36.2%; right: 6%; top: 70%; font: italic 400 8cqi/1.05 "Bodoni Moda", Georgia, "Times New Roman", serif; letter-spacing: -0.01em; white-space: nowrap; transform: translateY(0); }
.pv-pullq__rule { position: absolute; left: 36.2%; right: 6%; top: 94.5%; height: 0.5cqi; background: #E4572E; transform: scaleX(0); transform-origin: 0 50%; }
/* baseline grid overlay: orange hairlines every 4cqi, off at rest */
.pv-pullq__grid { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: repeating-linear-gradient(to bottom, rgba(228, 87, 46, 0.7) 0 1px, transparent 1px 4cqi); }
@media (prefers-reduced-motion: no-preference) {
.pv-pullq__pic { animation: pv-pullq-crop 8s infinite; }
.pv-pullq__grid { animation: pv-pullq-grid 8s infinite; }
.pv-pullq__quote { animation: pv-pullq-lock 8s infinite; }
.pv-pullq__rule { animation: pv-pullq-rule 8s infinite; }
/* the crop: one long confident ease-out into the sun, hold, ease back */
@keyframes pv-pullq-crop {
0%, 19% { transform: scale(1) translate(0, 0); animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
56%, 74% { transform: scale(1.6) translate(-6%, 7%); animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1); }
100% { transform: scale(1) translate(0, 0); }
}
/* grid: two quick flashes, settles faint, fades out under the hold */
@keyframes pv-pullq-grid {
0%, 18% { opacity: 0; }
20% { opacity: 0.95; }
23% { opacity: 0.1; }
26%, 68% { opacity: 0.6; }
84%, 100% { opacity: 0; }
}
/* the quote snaps up onto its baseline and gains weight */
@keyframes pv-pullq-lock {
0%, 42% { transform: translateY(0); font-weight: 400; animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1); }
46%, 74% { transform: translateY(-1.2cqi); font-weight: 700; animation-timing-function: ease-in-out; }
88%, 100% { transform: translateY(0); font-weight: 400; }
}
@keyframes pv-pullq-rule {
0%, 46% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
58%, 74% { transform: scaleX(1); animation-timing-function: ease-in-out; }
88%, 100% { transform: scaleX(0); }
}
}
/* ---- ART DECO: the page is an elevator; scrolling rises through the tiers to the sunburst ---- */
/* Previews v2 (2026-09-26), row 6, The Meridian. Resting frame IS the poster:
emerald ground, gold pinstriped ziggurat across the base, an ivory half-sun
behind its top tier with faint gold rays fanning up, an arc floor-indicator
at top centre reading LOBBY, mirrored scroll rails on both edges with their
thumbs at the bottom. Hero: the page scrolls — the tower drops out of frame
like floors passing an elevator window, both rail thumbs climb, the needle
arcs LOBBY -> BALLROOM -> ROOF and the rays blaze full. Loop: gold doors close
from top and bottom on the sunburst, the lobby resets behind them, and they
open on frame 0. 7s; everything mirrored about the centre line. */
.pv-setback { background: #0F4D3A; container-type: inline-size; font-family: "Poiret One", "Palatino", "Georgia", serif; }
.pv-setback__rays {
position: absolute; left: 50%; top: 46cqi; width: 96cqi; height: 96cqi; border-radius: 50%;
translate: -50% -50%; scale: 1; opacity: 0.32;
background: repeating-conic-gradient(from -90deg at 50% 50%, #C9A227 0 2.6deg, transparent 2.6deg 9deg);
clip-path: inset(0 0 50% 0);
}
.pv-setback__sun { position: absolute; left: 50%; top: 37cqi; width: 18cqi; height: 9cqi; translate: -50% 0; background: #F3EBD3; border-radius: 9cqi 9cqi 0 0; }
/* the building: five stepped tiers, gold pinstripes with ivory top edges; it is the page content */
.pv-setback__tower { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; translate: 0 0; }
.pv-setback__tier { display: block; width: var(--w); height: 6cqi; background: repeating-linear-gradient(90deg, #C9A227 0 1.5cqi, #0B0B0B 1.5cqi 2.1cqi); border-top: 0.7cqi solid #F3EBD3; }
/* scroll rails on both edges (mirrored): thin gold track, ivory thumb at the bottom = top of page */
.pv-setback__rail { position: absolute; top: 4cqi; bottom: 4cqi; width: 1.4cqi; background: #0B0B0B; border: 0.3cqi solid #C9A227; box-sizing: border-box; }
.pv-setback__rail--l { left: 2.4cqi; }
.pv-setback__rail--r { right: 2.4cqi; }
.pv-setback__thumb { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #F3EBD3; translate: 0 0; }
/* the floor indicator: emerald half-disc with a gold rim, ivory needle from the hub */
.pv-setback__dial { position: absolute; left: 50%; top: 5cqi; width: 28cqi; height: 14cqi; translate: -50% 0; overflow: hidden; }
.pv-setback__arc { position: absolute; left: 0; top: 0; width: 100%; height: 200%; border-radius: 50%; border: 1cqi solid #C9A227; background: #0F4D3A; box-sizing: border-box; }
.pv-setback__needle { position: absolute; left: 50%; bottom: 0; width: 1cqi; height: 11cqi; margin-left: -0.5cqi; background: #F3EBD3; transform-origin: 50% 100%; transform: rotate(-58deg); }
.pv-setback__floor {
position: absolute; left: 50%; top: 20cqi; width: 56cqi; height: 7.4cqi; margin: 0; translate: -50% 0;
display: grid; place-items: center; background: #0F4D3A; border-top: 0.4cqi solid #C9A227; border-bottom: 0.4cqi solid #C9A227;
font-size: 6cqi; line-height: 1; letter-spacing: 0.22em; text-indent: 0.22em; color: #F3EBD3; text-transform: uppercase;
}
.pv-setback__floor span { grid-area: 1 / 1; }
.pv-setback__f1 { opacity: 1; }
.pv-setback__f2 { opacity: 0; }
.pv-setback__f3 { opacity: 0; }
/* elevator doors: gold pinstripe panels parked off-canvas above and below at rest */
.pv-setback__door { position: absolute; left: 0; right: 0; height: 50%; box-sizing: border-box; background: repeating-linear-gradient(90deg, #C9A227 0 3.4cqi, #0B0B0B 3.4cqi 4cqi); }
.pv-setback__door--top { top: 0; translate: 0 -100%; border-bottom: 0.8cqi solid #F3EBD3; }
.pv-setback__door--bottom { bottom: 0; translate: 0 100%; border-top: 0.8cqi solid #F3EBD3; }
@media (prefers-reduced-motion: no-preference) {
.pv-setback__tower { animation: pv-setback-rise 7s infinite; }
.pv-setback__thumb { animation: pv-setback-thumb 7s infinite; }
.pv-setback__needle { animation: pv-setback-needle 7s infinite; }
.pv-setback__rays { animation: pv-setback-blaze 7s infinite; }
.pv-setback__f1 { animation: pv-setback-f1 7s infinite; }
.pv-setback__f2 { animation: pv-setback-f2 7s infinite; }
.pv-setback__f3 { animation: pv-setback-f3 7s infinite; }
.pv-setback__door--top { animation: pv-setback-door-top 7s infinite; }
.pv-setback__door--bottom { animation: pv-setback-door-bottom 7s infinite; }
/* 0-1s hold · 1-5s ascent · 5-6s blaze · 6-6.5s doors close · 6.5s reset · 6.5-7s doors open */
@keyframes pv-setback-rise {
0%, 14% { translate: 0 0; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
71%, 92.7% { translate: 0 34cqi; }
93.3%, 100% { translate: 0 0; }
}
@keyframes pv-setback-thumb {
0%, 14% { translate: 0 0; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
71%, 92.7% { translate: 0 -355%; }
93.3%, 100% { translate: 0 0; }
}
@keyframes pv-setback-needle {
0%, 14% { transform: rotate(-58deg); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
71%, 92.7% { transform: rotate(58deg); }
93.3%, 100% { transform: rotate(-58deg); }
}
@keyframes pv-setback-blaze {
0%, 71% { opacity: 0.32; scale: 1; animation-timing-function: ease-in-out; }
86%, 92.7% { opacity: 1; scale: 1.08; }
93.3%, 100% { opacity: 0.32; scale: 1; }
}
@keyframes pv-setback-f1 { 0%, 35% { opacity: 1; } 35.5%, 92.7% { opacity: 0; } 93.3%, 100% { opacity: 1; } }
@keyframes pv-setback-f2 { 0%, 35% { opacity: 0; } 35.5%, 58% { opacity: 1; } 58.5%, 100% { opacity: 0; } }
@keyframes pv-setback-f3 { 0%, 58% { opacity: 0; } 58.5%, 92.7% { opacity: 1; } 93.3%, 100% { opacity: 0; } }
@keyframes pv-setback-door-top {
0%, 86% { translate: 0 -100%; animation-timing-function: ease-in-out; }
92.5%, 93.5% { translate: 0 0; animation-timing-function: ease-in-out; }
100% { translate: 0 -100%; }
}
@keyframes pv-setback-door-bottom {
0%, 86% { translate: 0 100%; animation-timing-function: ease-in-out; }
92.5%, 93.5% { translate: 0 0; animation-timing-function: ease-in-out; }
100% { translate: 0 100%; }
}
}
/* ---- VAPORWAVE: a dragged window leaves a trail of itself, dialogs cascade, the tape wobbles and rewinds ---- */
/* Previews v2 (2026-09-26), row 62. Poster: a pink-to-blue pastel desktop
with soft mint and yellow blooms, a marble bust on a plinth at the left, one
retro-OS window at the right with a pink-blue title bar, three coloured
buttons and ＷＥＬＣＯＭＥ in full-width caps under faint scanlines. Hero: a
cursor grabs the title bar and drags the window down-left; the old OS can't
repaint fast enough and five copies of the frame stay behind as a trail.
Then three yellow dialogs cascade over it and VHS tracking wobbles the
whole scene, a tracking band dropping through. 7s cycle: at 6.2s the
dialogs and trail close in reverse and the window rewinds home. */
.pv-bust { background: linear-gradient(160deg, #FF71CE 0%, #B967FF 48%, #01CDFE 100%); container-type: inline-size; font-family: "PvUnbounded", Verdana, sans-serif; }
.pv-bust__scene { position: absolute; inset: 0; }
.pv-bust__blob { position: absolute; border-radius: 50%; filter: blur(3cqi); }
.pv-bust__blobA { left: 50cqi; top: -10cqi; width: 50cqi; height: 34cqi; background: #FFFB96; opacity: 0.7; }
.pv-bust__blobB { left: -10cqi; top: 50cqi; width: 60cqi; height: 34cqi; background: #05FFA1; opacity: 0.55; }
.pv-bust__statue { position: absolute; left: 4cqi; top: 9cqi; width: 40cqi; height: 60cqi; filter: drop-shadow(0 1.5cqi 0 rgba(185, 103, 255, 0.45)); }
/* the window: light body, hard black edge, bevel, gradient title bar */
.pv-bust__win, .pv-bust__g { position: absolute; left: 46cqi; top: 12cqi; width: 48cqi; height: 30cqi; background: #ECEAF7; box-shadow: inset 0 0 0 0.5cqi #111111, inset 1cqi 1cqi 0 #FFFFFF, inset -1cqi -1cqi 0 #9A96B8; }
.pv-bust__tb, .pv-bust__g i { position: absolute; left: 0.5cqi; right: 0.5cqi; top: 0.5cqi; height: 5cqi; background: linear-gradient(90deg, #FF71CE 0%, #01CDFE 100%); box-shadow: inset 0 -0.5cqi 0 #111111; }
.pv-bust__tb b { position: absolute; top: 1cqi; width: 3cqi; height: 3cqi; background: #FFFB96; box-shadow: inset 0 0 0 0.4cqi #111111; }
.pv-bust__tb b:nth-of-type(1) { right: 9.5cqi; }
.pv-bust__tb b:nth-of-type(2) { right: 5.5cqi; background: #05FFA1; }
.pv-bust__tb b:nth-of-type(3) { right: 1.5cqi; background: #FF71CE; }
.pv-bust__txt { position: absolute; left: 0; right: 0; top: 11.5cqi; text-align: center; font: 700 5.8cqi/1 "PvUnbounded", Verdana, sans-serif; color: #B967FF; white-space: nowrap; }
/* the trail: five frames along the drag path, resting invisible */
.pv-bust__g { opacity: 0; }
.pv-bust__g1 { left: 42.8cqi; top: 15.5cqi; }
.pv-bust__g2 { left: 39.6cqi; top: 19cqi; }
.pv-bust__g3 { left: 36.4cqi; top: 22.6cqi; }
.pv-bust__g4 { left: 33.2cqi; top: 26.1cqi; }
.pv-bust__g5 { left: 30cqi; top: 29.6cqi; }
/* dialogs: yellow, cascading down-right, resting invisible */
.pv-bust__d { position: absolute; width: 28cqi; height: 15cqi; background: #FFFB96; box-shadow: inset 0 0 0 0.5cqi #111111, inset 1cqi 1cqi 0 #FFFFFF, 0.8cqi 0.8cqi 0 #111111; opacity: 0; }
.pv-bust__d1 { left: 50cqi; top: 40cqi; }
.pv-bust__d2 { left: 57cqi; top: 46cqi; }
.pv-bust__d3 { left: 64cqi; top: 52cqi; }
.pv-bust__dtb { position: absolute; left: 0.5cqi; right: 0.5cqi; top: 0.5cqi; height: 3.6cqi; background: linear-gradient(90deg, #05FFA1 0%, #01CDFE 100%); box-shadow: inset 0 -0.5cqi 0 #111111; }
.pv-bust__d b { position: absolute; left: 3cqi; top: 5cqi; font: 700 8cqi/1 "PvUnbounded", Verdana, sans-serif; color: #B967FF; }
.pv-bust__ok { position: absolute; right: 2.5cqi; bottom: 2cqi; width: 9cqi; height: 4cqi; background: #ECEAF7; box-shadow: inset 0 0 0 0.45cqi #111111, inset 0.8cqi 0.8cqi 0 #FFFFFF; }
/* the cursor: white arrow with a black edge, off-canvas at rest */
.pv-bust__cur { position: absolute; left: -20cqi; top: -20cqi; width: 6cqi; aspect-ratio: 14 / 19; opacity: 0; background: #FFFFFF; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%); filter: drop-shadow(0.4cqi 0.4cqi 0 #111111); }
.pv-bust__lines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 1.4cqi, rgba(17, 17, 17, 0.12) 1.4cqi 2cqi); }
/* the tracking band: a torn stripe that drops through the picture, off-canvas at rest */
.pv-bust__track { position: absolute; left: -4cqi; right: -4cqi; top: -12cqi; height: 7cqi; opacity: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.75) 0 3cqi, rgba(1, 205, 254, 0.5) 3cqi 4cqi, rgba(255, 255, 255, 0.2) 4cqi 9cqi); transform: skewX(-12deg); }
@media (prefers-reduced-motion: no-preference) {
.pv-bust__win { animation: pv-bust-drag 7s linear infinite; }
.pv-bust__cur { animation: pv-bust-hand 7s linear infinite; }
.pv-bust__g1 { animation: pv-bust-g1 7s steps(1) infinite; }
.pv-bust__g2 { animation: pv-bust-g2 7s steps(1) infinite; }
.pv-bust__g3 { animation: pv-bust-g3 7s steps(1) infinite; }
.pv-bust__g4 { animation: pv-bust-g4 7s steps(1) infinite; }
.pv-bust__g5 { animation: pv-bust-g5 7s steps(1) infinite; }
.pv-bust__d1 { animation: pv-bust-d1 7s steps(1) infinite; }
.pv-bust__d2 { animation: pv-bust-d2 7s steps(1) infinite; }
.pv-bust__d3 { animation: pv-bust-d3 7s steps(1) infinite; }
.pv-bust__scene { animation: pv-bust-tracking 7s steps(1) infinite; }
.pv-bust__track { animation: pv-bust-band 7s linear infinite; }
/* the drag: 1s to 3.5s down-left, hold, rewind home fast at 6.2s */
@keyframes pv-bust-drag {
0%, 14.3% { left: 46cqi; top: 12cqi; }
50%, 88% { left: 26cqi; top: 34cqi; }
95%, 100% { left: 46cqi; top: 12cqi; }
}
@keyframes pv-bust-hand {
0%, 12.9% { left: -20cqi; top: -20cqi; opacity: 0; }
13%, 14.3% { left: 70cqi; top: 14.5cqi; opacity: 1; }
50%, 57% { left: 50cqi; top: 36.5cqi; opacity: 1; }
57.1%, 100% { left: -20cqi; top: -20cqi; opacity: 0; }
}
/* each trail frame appears as the window passes it and closes in reverse on the rewind */
@keyframes pv-bust-g1 { 0% { opacity: 0; } 20% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes pv-bust-g2 { 0% { opacity: 0; } 25.7% { opacity: 1; } 92.5%, 100% { opacity: 0; } }
@keyframes pv-bust-g3 { 0% { opacity: 0; } 31.4% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes pv-bust-g4 { 0% { opacity: 0; } 37.1% { opacity: 1; } 89.5%, 100% { opacity: 0; } }
@keyframes pv-bust-g5 { 0% { opacity: 0; } 42.9% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes pv-bust-d1 { 0% { opacity: 0; } 57.1% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes pv-bust-d2 { 0% { opacity: 0; } 62.9% { opacity: 1; } 87%, 100% { opacity: 0; } }
@keyframes pv-bust-d3 { 0% { opacity: 0; } 68.6% { opacity: 1; } 86%, 100% { opacity: 0; } }
/* tracking: the scene tears sideways in steps while the band drops, and again on the rewind */
@keyframes pv-bust-tracking {
0%, 71.3% { transform: translateX(0) skewX(0deg); }
71.4% { transform: translateX(1.6cqi) skewX(-2deg); }
72.6% { transform: translateX(-1.2cqi) skewX(1.2deg); }
73.8% { transform: translateX(0.8cqi) skewX(-0.8deg); }
75% { transform: translateX(-1.8cqi) skewX(1.6deg); }
76.2% { transform: translateX(0.6cqi) skewX(0deg); }
77.4% { transform: translateX(-0.4cqi) skewX(-1deg); }
78.6% { transform: translateX(0) skewX(0deg); }
88% { transform: translateX(-1.4cqi) skewX(1.4deg); }
89.5% { transform: translateX(1.4cqi) skewX(-1.4deg); }
91% { transform: translateX(-0.8cqi) skewX(0.8deg); }
92.5% { transform: translateX(0.8cqi) skewX(-0.8deg); }
94%, 100% { transform: translateX(0) skewX(0deg); }
}
@keyframes pv-bust-band {
0%, 71.3% { top: -12cqi; opacity: 0; }
71.4% { top: -12cqi; opacity: 1; }
78.6% { top: 85cqi; opacity: 1; }
78.7%, 87.9% { top: -12cqi; opacity: 0; }
88% { top: -12cqi; opacity: 1; }
94% { top: 85cqi; opacity: 1; }
94.1%, 100% { top: -12cqi; opacity: 0; }
}
}
/* ---- TERMINAL: the site is a command; tab completes the word and the output streams a project card ---- */
/* Previews v2 (2026-09-26), row 59. Resting frame IS the poster: black screen,
phosphor green monospace, "$ read gestalt" with one dim line of output, and
a fresh prompt with the block cursor blinking. The hero moment: "open wo" is
typed one character at a time, a dim ghost "rk" appears, a tab turns it
solid, and the output streams an ASCII project card line by line with a
single amber figure. Then "$ clear" is typed. 7s cycle; clear is an
on-brand hard cut back to frame 0. Cursor blink is a component rate. */
.pv-prompt { background: #000000; container-type: inline-size; }
.pv-prompt__screen {
position: absolute; inset: 0; padding: 4cqi 5cqi; box-sizing: border-box; white-space: normal;
font: 400 5.8cqi/1.3 "IBM Plex Mono", "Courier New", monospace; color: #33FF33; text-shadow: 0 0 0.6cqi rgba(51, 255, 51, 0.45);
}
.pv-prompt__ln { display: block; white-space: pre; }
.pv-prompt__dim { color: #1c8a1c; text-shadow: none; }
.pv-prompt__screen b { font-weight: 400; color: #FFB000; text-shadow: 0 0 0.6cqi rgba(255, 176, 0, 0.45); }
/* the typed text is a fixed-width window that widens one character per step */
.pv-prompt__typed, .pv-prompt__typed2 { display: inline-block; width: 0ch; overflow: hidden; vertical-align: bottom; white-space: pre; }
.pv-prompt__ghost { opacity: 0; color: #1c8a1c; text-shadow: none; }
.pv-prompt__c1w { opacity: 1; }
.pv-prompt__cur { display: inline-block; width: 0.6em; height: 1.05em; margin-left: 0.05em; vertical-align: text-bottom; background: #33FF33; opacity: 1; }
/* output lines exist but are clipped to nothing until they stream */
.pv-prompt__out { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: no-preference) {
.pv-prompt__typed { animation: pv-prompt-type 7s infinite; }
.pv-prompt__ghost { animation: pv-prompt-ghost 7s infinite; }
.pv-prompt__c1w { animation: pv-prompt-c1w 7s infinite; }
.pv-prompt__o1 { animation: pv-prompt-o1 7s infinite; }
.pv-prompt__o2 { animation: pv-prompt-o2 7s infinite; }
.pv-prompt__o3 { animation: pv-prompt-o3 7s infinite; }
.pv-prompt__o4 { animation: pv-prompt-o4 7s infinite; }
.pv-prompt__o5 { animation: pv-prompt-o5 7s infinite; }
.pv-prompt__typed2 { animation: pv-prompt-type2 7s infinite; }
.pv-prompt__cur { animation: pv-prompt-blink 1s infinite; } /* component-rate: a terminal cursor blinks about once a second; a 5s blink is not a cursor */
/* "open wo": seven characters, 1.2s to 2.6s, gone on clear */
@keyframes pv-prompt-type {
0%, 17.1% { width: 0ch; animation-timing-function: steps(7, end); }
37.1%, 89.9% { width: 7ch; }
90%, 100% { width: 0ch; }
}
/* the ghost completion appears dim, then tab makes it real */
@keyframes pv-prompt-ghost {
0%, 38.4% { opacity: 0; color: #1c8a1c; }
38.5%, 46.9% { opacity: 1; color: #1c8a1c; }
47%, 89.9% { opacity: 1; color: #33FF33; }
90%, 100% { opacity: 0; color: #1c8a1c; }
}
/* the prompt's cursor hides while output streams; the clear line has its own */
@keyframes pv-prompt-c1w {
0%, 51.2% { opacity: 1; }
51.3%, 89.9% { opacity: 0; }
90%, 100% { opacity: 1; }
}
@keyframes pv-prompt-o1 {
0%, 51.3% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(12, end); }
56%, 89.9% { clip-path: inset(0 0 0 0); }
90%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes pv-prompt-o2 {
0%, 57% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(12, end); }
61.7%, 89.9% { clip-path: inset(0 0 0 0); }
90%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes pv-prompt-o3 {
0%, 62.7% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(12, end); }
67.4%, 89.9% { clip-path: inset(0 0 0 0); }
90%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes pv-prompt-o4 {
0%, 68.4% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(12, end); }
73.1%, 89.9% { clip-path: inset(0 0 0 0); }
90%, 100% { clip-path: inset(0 100% 0 0); }
}
/* the new prompt appears whole; then "clear" is typed into it */
@keyframes pv-prompt-o5 {
0%, 76.9% { clip-path: inset(0 100% 0 0); }
77%, 89.9% { clip-path: inset(0 0 0 0); }
90%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes pv-prompt-type2 {
0%, 78.5% { width: 0ch; animation-timing-function: steps(5, end); }
85.7%, 89.9% { width: 5ch; }
90%, 100% { width: 0ch; }
}
@keyframes pv-prompt-blink {
0%, 49.9% { opacity: 1; }
50%, 99.9% { opacity: 0; }
100% { opacity: 1; }
}
}
/* ---- MEMPHIS: throw a shape; the layout plays pinball and the CTA takes the last hit ---- */
/* Previews v2 (2026-09-26), row 34. Resting frame IS the poster: terrazzo
speckle on cream, OFFBEAT in heavy black caps, a coral triangle up top-left,
a mint circle, a black squiggle, a lilac half-disc and a lemon HIRE US pill
sitting on a zigzag rule. The hero moment: a cursor grabs the triangle and
flings it; it caroms off the circle (squash), off the squiggle (shudder),
and lands on the CTA, which wiggles like it has been poked. 6.5s cycle;
the triangle spins back home and everything settles on its frame-0 spot. */
.pv-offbeat { background: #F4EFE4; container-type: inline-size; }
/* terrazzo speckle on a child: cqi on the root would resolve against the viewport */
.pv-offbeat__terrazzo { position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml;utf8,") 0 0 / 24cqi 24cqi; }
.pv-offbeat__stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv-offbeat__head { font: 900 66px "Poppins", "Arial Black", Impact, sans-serif; fill: #111111; letter-spacing: -1px; }
.pv-offbeat__tri { fill: #FF6F61; stroke: #111111; stroke-width: 4; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 50%; transform: translate(0, 0) rotate(0deg) scale(1); }
.pv-offbeat__circ { fill: #98E2C6; stroke: #111111; stroke-width: 5; transform-box: fill-box; transform-origin: 50% 50%; transform: translate(0, 0) scale(1, 1); }
.pv-offbeat__squig { fill: none; stroke: #111111; stroke-width: 10; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(0deg) translate(0, 0); }
.pv-offbeat__half { fill: #C3B1E1; stroke: #111111; stroke-width: 4; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(1, 1); }
.pv-offbeat__cta { transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(0deg); }
.pv-offbeat__cta rect { fill: #FFE45C; stroke: #111111; stroke-width: 4; }
.pv-offbeat__cta text { font: 900 24px "Poppins", "Arial Black", Impact, sans-serif; fill: #111111; text-anchor: middle; dominant-baseline: central; letter-spacing: 1px; }
.pv-offbeat__zig { fill: none; stroke: #111111; stroke-width: 4; stroke-linejoin: round; }
/* the hand: off-canvas at rest, the poster has no cursor in it */
.pv-offbeat__cur { fill: #111111; stroke: #F4EFE4; stroke-width: 1.5; stroke-linejoin: round; transform: translate(-40px, 60px); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.pv-offbeat__cur { animation: pv-offbeat-cur 6.5s infinite; }
.pv-offbeat__tri { animation: pv-offbeat-tri 6.5s infinite; }
.pv-offbeat__circ { animation: pv-offbeat-circ 6.5s infinite; }
.pv-offbeat__squig { animation: pv-offbeat-squig 6.5s infinite; }
.pv-offbeat__cta { animation: pv-offbeat-cta 6.5s infinite; }
.pv-offbeat__half { animation: pv-offbeat-half 6.5s infinite; }
/* cursor: in from the left, onto the triangle, a short drag back, release, gone */
@keyframes pv-offbeat-cur {
0%, 15.4% { transform: translate(-40px, 60px); opacity: 0; }
15.5% { transform: translate(-40px, 60px); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
22% { transform: translate(88px, 58px); opacity: 1; animation-timing-function: ease-in-out; }
27% { transform: translate(104px, 70px); opacity: 1; animation-timing-function: ease-out; }
31% { transform: translate(74px, 44px); opacity: 1; }
42% { transform: translate(74px, 44px); opacity: 0; }
100% { transform: translate(-40px, 60px); opacity: 0; }
}
/* the projectile: grabbed, pulled back, flung at the circle, caroms to the squiggle,
drops onto the CTA, then spins back to its corner */
@keyframes pv-offbeat-tri {
0%, 22% { transform: translate(0, 0) rotate(0deg) scale(1); animation-timing-function: ease-out; }
27% { transform: translate(14px, 12px) rotate(-8deg) scale(1.08); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
38% { transform: translate(212px, -24px) rotate(150deg) scale(1); animation-timing-function: ease-out; }
39.5% { transform: translate(196px, -10px) rotate(160deg) scale(1); animation-timing-function: cubic-bezier(0.3, 0, 0.9, 0.6); }
50% { transform: translate(226px, 104px) rotate(260deg) scale(1); animation-timing-function: ease-out; }
51.5% { transform: translate(214px, 92px) rotate(268deg) scale(1); animation-timing-function: cubic-bezier(0.3, 0, 0.9, 0.7); }
63% { transform: translate(70px, 160px) rotate(330deg) scale(1); animation-timing-function: ease-out; }
66% { transform: translate(78px, 138px) rotate(316deg) scale(1); animation-timing-function: ease-in; }
70% { transform: translate(74px, 148px) rotate(306deg) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
92%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
/* the circle takes the first hit: squash, rebound, settle */
@keyframes pv-offbeat-circ {
0%, 37% { transform: translate(0, 0) scale(1, 1); }
40% { transform: translate(8px, -4px) scale(1.22, 0.82); }
44% { transform: translate(4px, 0) scale(0.9, 1.14); }
48% { transform: translate(2px, 0) scale(1.05, 0.97); }
53%, 100% { transform: translate(0, 0) scale(1, 1); }
}
@keyframes pv-offbeat-squig {
0%, 49.5% { transform: rotate(0deg) translate(0, 0); }
52% { transform: rotate(7deg) translate(0, 8px); }
55% { transform: rotate(-6deg) translate(0, -4px); }
58% { transform: rotate(3deg) translate(0, 2px); }
62%, 100% { transform: rotate(0deg) translate(0, 0); }
}
/* the CTA wiggle: elastic decay after the landing */
@keyframes pv-offbeat-cta {
0%, 63% { transform: rotate(0deg); }
65.5% { transform: rotate(-7deg); }
68% { transform: rotate(6deg); }
71% { transform: rotate(-4deg); }
74% { transform: rotate(2.5deg); }
77% { transform: rotate(-1deg); }
80%, 100% { transform: rotate(0deg); }
}
@keyframes pv-offbeat-half {
0%, 63% { transform: scale(1, 1); }
66% { transform: scale(1.06, 0.9); }
70% { transform: scale(0.97, 1.04); }
74%, 100% { transform: scale(1, 1); }
}
}
/* ---- MAXIMALISM: the menu drawer shoves the page aside and every gap it opens fills with more print ---- */
/* Previews v2 (2026-09-26), row 32, interiors boutique. Resting frame IS the
poster: fuchsia-and-marigold diagonal stripes bleed under a cobalt polka-dot
wall and an emerald zigzag wall, two patterned frames hang over them, a fat
blush MORE with an italic "& more" tucked under it, a blush NEW product card,
an emerald hamburger top-left. Not a millimetre empty. Hero: a cursor clicks
the hamburger; an emerald drawer slides in and shoves every layer right by
its own distance (front layers travel further), and the moment the stripes
show through, five new prints bloom in over the seams — a dotted disc, a
striped diamond, a zigzag slab — until the open drawer itself grows a print.
Loop: the blooms shrink away, the drawer slides shut, the page settles back
to frame 0. 7s, overshooting easing on the way in. */
.pv-accrete { background: #D1007D; container-type: inline-size; font-family: "DM Serif Display", "Georgia", "Times New Roman", serif; }
.pv-accrete__base { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #D1007D 0 4cqi, #F5A300 4cqi 8cqi); }
.pv-accrete__wall { position: absolute; translate: 0 0; }
.pv-accrete__wall--dots { left: 38cqi; top: 0; width: 62cqi; height: 58%; background: radial-gradient(circle, #F9C6C9 0 1.9cqi, transparent 2cqi) 0 0 / 7cqi 7cqi, #0047AB; }
.pv-accrete__wall--chev {
left: 0; bottom: 0; width: 72cqi; height: 46%;
background: linear-gradient(135deg, #046307 25%, transparent 25%) -5cqi 0 / 10cqi 10cqi,
linear-gradient(225deg, #046307 25%, transparent 25%) -5cqi 0 / 10cqi 10cqi,
linear-gradient(315deg, #046307 25%, transparent 25%) 0 0 / 10cqi 10cqi,
linear-gradient(45deg, #046307 25%, transparent 25%) 0 0 / 10cqi 10cqi, #F9C6C9;
}
.pv-accrete__frame { position: absolute; box-sizing: border-box; translate: 0 0; }
.pv-accrete__frame--a { left: 8cqi; top: 9cqi; width: 26cqi; height: 20cqi; border: 1.8cqi solid #F5A300; background: repeating-linear-gradient(90deg, #0047AB 0 2cqi, #F9C6C9 2cqi 4cqi); }
.pv-accrete__frame--b { left: 64cqi; top: 30cqi; width: 30cqi; height: 24cqi; border: 1.8cqi solid #046307; background: radial-gradient(circle, #D1007D 0 1.6cqi, transparent 1.7cqi) 0 0 / 5cqi 5cqi, #F5A300; }
.pv-accrete__head { position: absolute; left: 8cqi; top: 24cqi; margin: 0; font-weight: 400; font-size: 24cqi; line-height: 0.9; color: #F9C6C9; -webkit-text-stroke: 0.5cqi #046307; translate: 0 0; }
.pv-accrete__head em { position: absolute; left: 62%; top: 82%; font: 400 8.5cqi/1 "Pacifico", "Georgia", serif; color: #D1007D; -webkit-text-stroke: 0; white-space: nowrap; }
.pv-accrete__card { position: absolute; right: 4cqi; bottom: 4cqi; width: 28cqi; height: 18cqi; box-sizing: border-box; background: #F9C6C9; border: 1.2cqi solid #0047AB; display: grid; place-items: center; translate: 0 0; }
.pv-accrete__card b { font: 400 10cqi/1 "PvAnton", "Impact", "Arial Black", sans-serif; color: #D1007D; letter-spacing: 0.04em; }
.pv-accrete__card i { position: absolute; right: -1.2cqi; top: -1.2cqi; width: 7cqi; height: 7cqi; background: #F5A300; border: 1.2cqi solid #0047AB; rotate: 45deg; }
/* the hamburger: the UI that gets clicked */
.pv-accrete__burger { position: absolute; left: 3cqi; top: 3cqi; width: 10cqi; height: 9cqi; box-sizing: border-box; padding: 1.6cqi 1.8cqi; display: flex; flex-direction: column; justify-content: space-between; background: #046307; border: 0.8cqi solid #F5A300; translate: 0 0; }
.pv-accrete__burger b { display: block; height: 1.2cqi; background: #F5A300; }
/* blooms: the prints that fill the gaps; at rest they have not happened */
.pv-accrete__bloom { position: absolute; scale: 0; }
.pv-accrete__bloom--1 { left: 44cqi; top: 2cqi; width: 22cqi; height: 22cqi; border-radius: 50%; background: radial-gradient(circle, #F5A300 0 1.6cqi, transparent 1.7cqi) 0 0 / 5cqi 5cqi, #D1007D; }
.pv-accrete__bloom--2 { left: 40cqi; top: 40cqi; width: 26cqi; height: 26cqi; rotate: 45deg; background: repeating-linear-gradient(0deg, #0047AB 0 2.4cqi, #F9C6C9 2.4cqi 4.4cqi); }
.pv-accrete__bloom--3 {
left: 70cqi; top: 0; width: 26cqi; height: 20cqi;
background: linear-gradient(135deg, #046307 25%, transparent 25%) -4cqi 0 / 8cqi 8cqi,
linear-gradient(225deg, #046307 25%, transparent 25%) -4cqi 0 / 8cqi 8cqi,
linear-gradient(315deg, #046307 25%, transparent 25%) 0 0 / 8cqi 8cqi,
linear-gradient(45deg, #046307 25%, transparent 25%) 0 0 / 8cqi 8cqi, #F9C6C9;
}
.pv-accrete__bloom--4 { left: 56cqi; top: 58cqi; width: 24cqi; height: 17cqi; background: radial-gradient(circle, #D1007D 0 1.5cqi, transparent 1.6cqi) 0 0 / 4.6cqi 4.6cqi, #F5A300; }
.pv-accrete__bloom--5 { left: 86cqi; top: 22cqi; width: 14cqi; height: 14cqi; border-radius: 50%; background: repeating-linear-gradient(90deg, #046307 0 1.6cqi, #F9C6C9 1.6cqi 3.2cqi); }
/* the drawer: parked off-canvas left at rest */
.pv-accrete__drawer { position: absolute; left: 0; top: 0; height: 100%; width: 40cqi; box-sizing: border-box; background: #046307; border-right: 1.6cqi solid #F5A300; translate: -100% 0; overflow: hidden; }
.pv-accrete__drawerpat { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle, #F5A300 0 1.5cqi, transparent 1.6cqi) 0 0 / 5cqi 5cqi, radial-gradient(circle, #D1007D 0 1.5cqi, transparent 1.6cqi) 2.5cqi 2.5cqi / 5cqi 5cqi, #F9C6C9; }
.pv-accrete__menu { position: absolute; left: 4cqi; top: 5cqi; font: 400 12cqi/1 "PvAnton", "Impact", "Arial Black", sans-serif; color: #F5A300; letter-spacing: 0.04em; -webkit-text-stroke: 0.4cqi #046307; }
.pv-accrete__item { position: absolute; left: 4cqi; right: 6cqi; height: 6cqi; box-sizing: border-box; border: 0.8cqi solid #046307; }
.pv-accrete__item--1 { top: 24cqi; background: repeating-linear-gradient(90deg, #D1007D 0 1.8cqi, #F9C6C9 1.8cqi 3.6cqi); }
.pv-accrete__item--2 { top: 34cqi; background: radial-gradient(circle, #F9C6C9 0 1.2cqi, transparent 1.3cqi) 0 0 / 3.6cqi 3.6cqi, #0047AB; }
.pv-accrete__item--3 { top: 44cqi; background: repeating-linear-gradient(135deg, #F5A300 0 2cqi, #D1007D 2cqi 4cqi); }
/* the cursor: blush arrow, off-canvas at rest */
.pv-accrete__cur { position: absolute; left: 110%; top: 110%; width: 8cqi; aspect-ratio: 14 / 19; background: #F9C6C9; scale: 1; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%); filter: drop-shadow(0.4cqi 0.4cqi 0 #046307); }
@media (prefers-reduced-motion: no-preference) {
.pv-accrete__cur { animation: pv-accrete-click 7s infinite; }
.pv-accrete__drawer { animation: pv-accrete-drawer 7s infinite; }
.pv-accrete__drawerpat { animation: pv-accrete-drawerpat 7s infinite; }
.pv-accrete__wall, .pv-accrete__frame, .pv-accrete__head, .pv-accrete__card, .pv-accrete__burger { animation: pv-accrete-shove 7s infinite; }
.pv-accrete__bloom { animation: pv-accrete-bloom 7s infinite; animation-delay: calc(var(--i) * 0.14s); }
/* 0-0.7s poster · 0.7-1s cursor in, click · 1-2.8s drawer opens and shoves · 3-5.9s blooms · hold · 5.9-7s recede and close */
@keyframes pv-accrete-click {
0%, 3% { left: 110%; top: 110%; scale: 1; animation-timing-function: ease-out; }
10% { left: 7cqi; top: 6cqi; scale: 1; }
12% { left: 7cqi; top: 6cqi; scale: 0.82; }
14% { left: 7cqi; top: 6cqi; scale: 1; }
20% { left: 7cqi; top: 6cqi; scale: 1; animation-timing-function: ease-in; }
30%, 100% { left: 110%; top: 110%; scale: 1; }
}
@keyframes pv-accrete-drawer {
0%, 14% { translate: -100% 0; animation-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1); }
40%, 88% { translate: 0 0; animation-timing-function: ease-in-out; }
100% { translate: -100% 0; }
}
@keyframes pv-accrete-shove {
0%, 14% { translate: 0 0; animation-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1); }
40%, 88% { translate: var(--sh) 0; animation-timing-function: ease-in-out; }
100% { translate: 0 0; }
}
@keyframes pv-accrete-bloom {
0%, 43% { scale: 0; animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1); }
50% { scale: 1.12; animation-timing-function: ease-out; }
55%, 84% { scale: 1; animation-timing-function: ease-in; }
90%, 100% { scale: 0; }
}
@keyframes pv-accrete-drawerpat {
0%, 43% { opacity: 0; animation-timing-function: ease-in-out; }
58%, 84% { opacity: 1; animation-timing-function: ease-in-out; }
90%, 100% { opacity: 0; }
}
}
/* ---- SWISS STYLE: the view toggle flips and every module snaps to its new place on the grid, one step at a time ---- */
/* Previews v2 (2026-09-26), row 56. Resting frame IS the poster: a design
museum's collection page on a visible six-by-four modular grid, white
ground, hairline guides, PLAKATE flush left in bold, one signal-red module
top right, a black image module and a grey text measure below, the sixth
column left empty. Hero: the grid/list toggle in the header flips and the
page relays out: red shrinks to a single module and jumps to column one,
the headline drops to regular weight and moves beside it, the image module
moves up then widens to a full band, the text measure widens. Nothing
tweens: every frame is a grid-locked composition (steps(1)), staggered
0.15s so the eye reads the order. Hold; the toggle flips back and the
modules return in reverse. 7s. One face: Helvetica (Inter Tight is not
bundled; Helvetica is the honest substitute for this language). */
.pv-modules { background: #FFFFFF; container-type: inline-size; color: #111111; font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.pv-modules p { margin: 0; }
/* the grid: six columns of 13cqi with 2cqi gutters inside 6cqi margins; four rows of 17.25% with 3% gutters from 14% to 92% */
.pv-modules__grid {
position: absolute; left: 6cqi; width: 88cqi; top: 14%; height: 78%; pointer-events: none;
background:
repeating-linear-gradient(90deg, #D4D4CF 0 1px, transparent 1px 13cqi, #D4D4CF 13cqi calc(13cqi + 1px), transparent calc(13cqi + 1px) 15cqi),
repeating-linear-gradient(to bottom, #D4D4CF 0 1px, transparent 1px 22.115%, #D4D4CF 22.115% calc(22.115% + 1px), transparent calc(22.115% + 1px) 25.96%);
}
/* header strip: section label left, view toggle right */
.pv-modules__hd { position: absolute; left: 6cqi; top: 3.5%; font-size: 4.2cqi; line-height: 1; font-weight: 400; letter-spacing: 0.01em; }
.pv-modules__tog { position: absolute; left: 80cqi; top: 2.5%; display: flex; gap: 2cqi; }
.pv-modules__ico { display: block; width: 6cqi; height: 6cqi; opacity: 1; }
.pv-modules__ico--grid { background: linear-gradient(#111111, #111111) 0 0 / 42% 42% no-repeat, linear-gradient(#111111, #111111) 100% 0 / 42% 42% no-repeat, linear-gradient(#111111, #111111) 0 100% / 42% 42% no-repeat, linear-gradient(#111111, #111111) 100% 100% / 42% 42% no-repeat; }
.pv-modules__ico--list { opacity: 0.28; background: linear-gradient(#111111, #111111) 0 0 / 100% 18% no-repeat, linear-gradient(#111111, #111111) 0 50% / 100% 18% no-repeat, linear-gradient(#111111, #111111) 0 100% / 100% 18% no-repeat; }
/* the selection indicator under the active icon */
.pv-modules__ind { position: absolute; left: 80cqi; top: 11%; width: 6cqi; height: 0.7cqi; background: #111111; transform: translateX(0); }
/* the modules: A positions (poster) */
.pv-modules__hl { position: absolute; left: 6cqi; width: 58cqi; top: 13.2%; font-size: 12cqi; line-height: 1; font-weight: 700; letter-spacing: -0.035em; white-space: nowrap; }
.pv-modules__red { position: absolute; left: 66cqi; width: 28cqi; top: 14%; height: 37.5%; background: #E30613; }
.pv-modules__blk { position: absolute; left: 6cqi; width: 43cqi; top: 54.5%; height: 37.5%; background: #111111; }
.pv-modules__txt { position: absolute; left: 51cqi; width: 28cqi; top: 54.5%; height: 37.5%; background: repeating-linear-gradient(to bottom, #6A6A66 0 1.1cqi, transparent 1.1cqi 2.7cqi); }
@media (prefers-reduced-motion: no-preference) {
.pv-modules__ind { animation: pv-modules-ind 7s steps(1, end) infinite; }
.pv-modules__ico--grid { animation: pv-modules-icoa 7s steps(1, end) infinite; }
.pv-modules__ico--list { animation: pv-modules-icob 7s steps(1, end) infinite; }
.pv-modules__red { animation: pv-modules-red 7s steps(1, end) infinite; }
.pv-modules__hl { animation: pv-modules-hl 7s steps(1, end) infinite; }
.pv-modules__blk { animation: pv-modules-blk 7s steps(1, end) infinite; }
.pv-modules__txt { animation: pv-modules-txt 7s steps(1, end) infinite; }
/* the toggle: flips at 1.5s, flips back at 4.5s */
@keyframes pv-modules-ind {
0%, 21.3% { transform: translateX(0); }
21.4%, 64.2% { transform: translateX(8cqi); }
64.3%, 100% { transform: translateX(0); }
}
@keyframes pv-modules-icoa {
0%, 21.3% { opacity: 1; }
21.4%, 64.2% { opacity: 0.28; }
64.3%, 100% { opacity: 1; }
}
@keyframes pv-modules-icob {
0%, 21.3% { opacity: 0.28; }
21.4%, 64.2% { opacity: 1; }
64.3%, 100% { opacity: 0.28; }
}
/* red: two modules tall becomes one, then jumps to column one; reverse on the way back */
@keyframes pv-modules-red {
0%, 23.5% { left: 66cqi; width: 28cqi; height: 37.5%; }
23.6%, 25.6% { left: 66cqi; width: 28cqi; height: 17.25%; }
25.7%, 72.8% { left: 6cqi; width: 13cqi; height: 17.25%; }
72.9%, 74.9% { left: 66cqi; width: 28cqi; height: 17.25%; }
75%, 100% { left: 66cqi; width: 28cqi; height: 37.5%; }
}
/* headline: same size, new column, regular weight */
@keyframes pv-modules-hl {
0%, 25.6% { left: 6cqi; width: 58cqi; font-weight: 700; }
25.7%, 72.8% { left: 21cqi; width: 73cqi; font-weight: 400; }
72.9%, 100% { left: 6cqi; width: 58cqi; font-weight: 700; }
}
/* image module: up one row, then full width; back: narrow, then down */
@keyframes pv-modules-blk {
0%, 27.8% { top: 54.5%; height: 37.5%; width: 43cqi; }
27.9%, 29.9% { top: 34.25%; height: 17.25%; width: 43cqi; }
30%, 68.5% { top: 34.25%; height: 17.25%; width: 88cqi; }
68.6%, 70.6% { top: 34.25%; height: 17.25%; width: 43cqi; }
70.7%, 100% { top: 54.5%; height: 37.5%; width: 43cqi; }
}
/* text measure: from two columns to five */
@keyframes pv-modules-txt {
0%, 32% { left: 51cqi; width: 28cqi; }
32.1%, 66.3% { left: 21cqi; width: 73cqi; }
66.4%, 100% { left: 51cqi; width: 28cqi; }
}
}
/* ---- BROADSHEET: scrolling folds the front page into a slim red-ruled sticky header ---- */
/* Previews v2 (2026-09-26), row 9. Resting frame IS the poster: The Daily
Ledger's full front page on newsprint — a deep serif nameplate between
hairline ears over one spot-red rule, a two-line headline and deck, four
dense justified columns, one halftone picture. The hero moment: the page
scrolls up under the nameplate, which snaps down to a slim sticky header
(name + red rule, ears gone) while the columns stream beneath it and a
pull quote parks mid-screen. 7s cycle: the page scrolls back to the top
and the masthead re-expands, so 100% equals frame 0. The nameplate is
UnifrakturMaguntia blackletter; headlines, deck, ears and quote are Libre
Caslon Text (700 heds, italic 400 deck and quote). */
.pv-bs { background: #F5F1E8; color: #111111; container-type: inline-size; }
.pv-bs__page { position: absolute; left: 0; top: 0; width: 100%; box-sizing: border-box; padding: 27cqi 5cqi 0; transform: translateY(0); }
.pv-bs__hed { margin: 0 0 2cqi; font: 700 6cqi/1.08 "Libre Caslon Text", Georgia, "Times New Roman", serif; letter-spacing: -0.01em; text-wrap: balance; }
.pv-bs__hed--2 { margin: 4cqi 0 2.2cqi; padding-top: 2.4cqi; border-top: 1px solid #111111; font-size: 5.1cqi; }
.pv-bs__dek { margin: 0 0 2.6cqi; padding-bottom: 1.6cqi; border-bottom: 1px solid #9A958C; font: italic 400 3.1cqi/1.2 "Libre Caslon Text", Georgia, "Times New Roman", serif; }
.pv-bs__cols { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 2.6cqi; }
.pv-bs__cols--pic { grid-template-columns: 2fr 1fr 1fr; margin-top: 3cqi; }
.pv-bs__cols i { position: relative; display: block; height: 28cqi; background: repeating-linear-gradient(to bottom, rgba(17, 17, 17, 0.55) 0 0.85cqi, transparent 0.85cqi 1.9cqi); }
.pv-bs__cols--tall i { height: 42cqi; }
.pv-bs__cols i + i::before, .pv-bs__cols b + i::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.35cqi; border-left: 1px solid #9A958C; }
.pv-bs__pic { display: block; height: 24cqi; box-sizing: border-box; border: 1px solid #111111; background: radial-gradient(circle, #111111 0 0.42cqi, transparent 0.5cqi) 0 0 / 1.5cqi 1.5cqi #D9D3C6; }
/* the sticky masthead: a separate child so it stays put while the page scrolls under it */
.pv-bs__mast { position: absolute; left: 0; top: 0; width: 100%; height: 25cqi; box-sizing: border-box; background: #F5F1E8; border-bottom: 1cqi solid #B22222; }
.pv-bs__name { position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-54%); text-align: center; font: 400 12.5cqi/1 "UnifrakturMaguntia", "Times New Roman", Georgia, serif; letter-spacing: 0; white-space: nowrap; }
.pv-bs__ears, .pv-bs__date { position: absolute; left: 5cqi; right: 5cqi; margin: 0; padding: 0.7cqi 0; text-align: center; font: 400 2.5cqi/1 "Libre Caslon Text", Georgia, "Times New Roman", serif; letter-spacing: 0.12em; text-transform: uppercase; border-top: 1px solid #111111; border-bottom: 1px solid #111111; opacity: 1; }
.pv-bs__ears { top: 1.6cqi; }
.pv-bs__date { bottom: 1.6cqi; }
/* the pull quote: newsprint-backed so the columns stream visibly under it; hidden at rest */
.pv-bs__quote { position: absolute; left: 13cqi; right: 13cqi; top: 33cqi; margin: 0; padding: 2.6cqi 1cqi 2.2cqi; background: #F5F1E8; border-top: 0.5cqi solid #B22222; border-bottom: 1px solid #111111; text-align: center; font: italic 400 7cqi/1.1 "Libre Caslon Text", Georgia, "Times New Roman", serif; opacity: 0; transform: translateY(6cqi); }
@media (prefers-reduced-motion: no-preference) {
.pv-bs__page { animation: pv-bs-scroll 7s infinite; }
.pv-bs__mast { animation: pv-bs-condense 7s infinite; }
.pv-bs__name { animation: pv-bs-name 7s infinite; }
.pv-bs__ears, .pv-bs__date { animation: pv-bs-ears 7s infinite; }
.pv-bs__quote { animation: pv-bs-quote 7s infinite; }
/* weighty scroll down, hold, then a steady scroll-to-top */
@keyframes pv-bs-scroll {
0%, 21% { transform: translateY(0); animation-timing-function: cubic-bezier(0.4, 0, 0.15, 1); }
71%, 90% { transform: translateY(-64cqi); animation-timing-function: cubic-bezier(0.55, 0, 0.2, 1); }
100% { transform: translateY(0); }
}
/* the crisp header snap: 25cqi masthead to a 9cqi bar in a third of a second */
@keyframes pv-bs-condense {
0%, 23% { height: 25cqi; animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
28%, 92% { height: 9cqi; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
97%, 100% { height: 25cqi; }
}
@keyframes pv-bs-name {
0%, 23% { font-size: 12.5cqi; animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
28%, 92% { font-size: 5.6cqi; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
97%, 100% { font-size: 12.5cqi; }
}
@keyframes pv-bs-ears {
0%, 22% { opacity: 1; }
25.5%, 93% { opacity: 0; }
96%, 100% { opacity: 1; }
}
/* the quote rises into place once the scroll settles, and leaves as the page returns */
@keyframes pv-bs-quote {
0%, 63% { opacity: 0; transform: translateY(6cqi); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
70%, 87% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
92%, 100% { opacity: 0; transform: translateY(6cqi); }
}
}
/* ---- DISCO: the mirror ball turns, its light crosses the page and the hovered RSVP button flares ---- */
/* Previews v2 (2026-09-26), row 18. Resting frame IS the poster: chocolate
satin ground, gold inline display ROLL with three star flares, a mirror ball
half-visible at the top edge, a gold RSVP pill and a cursor waiting at the
corner. Hero: the ball's facet strip turns for the whole loop; a field of
refracted light squares travels across the type, and as the cursor lands on
RSVP the button lights and bursts into an eight-point starburst (the hover
state). 6s; the facet strip is periodic, so the ball is exactly where it
began when the loop restarts. */
.pv-ball { background: #3B2418; container-type: inline-size; }
/* satin: diagonal folds, static */
.pv-ball__satin { position: absolute; inset: 0; background: linear-gradient(115deg, #4B2E1D 0%, #3B2418 28%, #2C1A10 46%, #46291A 62%, #3B2418 80%, #2A180E 100%); }
/* the ball: a clipped circle; the facet strip inside is what turns */
.pv-ball__orb { position: absolute; left: 50%; top: -38%; width: 58cqi; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; overflow: hidden; background: #8A8A8A; }
.pv-ball__orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0) 45%, rgba(20, 10, 5, 0.75) 100%); }
.pv-ball__facets { position: absolute; left: 0; top: 0; width: 210%; height: 100%; translate: 0 0;
background:
repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0 0.6cqi, rgba(0, 0, 0, 0) 0.6cqi 6cqi),
repeating-linear-gradient(90deg, #CFCFCF 0 2.4cqi, #E9E9E9 2.4cqi 3.6cqi, #B9B9B9 3.6cqi 5.4cqi, #5E5E5E 5.4cqi 6cqi); }
/* four-point star flares sit on the type at rest */
.pv-ball__star { position: absolute; width: 9cqi; aspect-ratio: 1; background: #F2E3C6; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); scale: 1; }
.pv-ball__star--a { left: 20%; top: 26%; }
.pv-ball__star--b { left: 78%; top: 52%; width: 6cqi; }
.pv-ball__star--c { left: 60%; top: 22%; width: 5cqi; }
.pv-ball__word { position: absolute; left: 50%; top: 27%; margin: 0; translate: -50% 0; font: 400 28cqi/1 "Monoton", "PvBungeeShade", Impact, sans-serif; color: #D4A437; letter-spacing: 0.02em; white-space: nowrap; }
.pv-ball__sub { position: absolute; left: 50%; top: 66%; margin: 0; translate: -50% 0; font: 800 5.5cqi/1 "Nunito", "Trebuchet MS", Verdana, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #F2E3C6; white-space: nowrap; }
/* the refracted squares: a tiled SVG rect, skewed, screen-blended, off-canvas at rest */
.pv-ball__light { position: absolute; left: -30%; top: -40%; width: 160%; height: 180%; translate: -130cqi 0; transform: skewX(-18deg) rotate(6deg); mix-blend-mode: screen; opacity: 0.9;
background: url("data:image/svg+xml;utf8,") 0 0 / 12cqi 12cqi; }
/* the starburst behind the button: eight points, gold to cream, scale 0 at rest */
.pv-ball__flare { position: absolute; left: 50%; top: 86%; width: 60cqi; aspect-ratio: 1; translate: -50% -50%; scale: 0; opacity: 0; rotate: 0deg; background: radial-gradient(circle, #F2E3C6 0 14%, #E8A33D 15% 40%, rgba(232, 163, 61, 0) 70%); clip-path: polygon(50% 0, 56% 40%, 85% 15%, 60% 44%, 100% 50%, 60% 56%, 85% 85%, 56% 60%, 50% 100%, 44% 60%, 15% 85%, 40% 56%, 0 50%, 40% 44%, 15% 15%, 44% 40%); }
.pv-ball__btn { position: absolute; left: 50%; top: 86%; margin: 0; translate: -50% -50%; padding: 2.2cqi 7cqi; border-radius: 99cqi; background: #D4A437; color: #3B2418; font: 900 7cqi/1 "Nunito", "Trebuchet MS", Verdana, sans-serif; letter-spacing: 0.14em; }
.pv-ball__cur { position: absolute; left: 86%; top: 92%; width: 7%; aspect-ratio: 14 / 19; background: #F2E3C6; clip-path: polygon(0 0, 0 86%, 32% 68%, 50% 100%, 66% 92%, 48% 60%, 84% 58%); filter: drop-shadow(0 0.5cqi 0 #2C1A10); }
@media (prefers-reduced-motion: no-preference) {
.pv-ball__facets { animation: pv-ball-turn 6s linear infinite; }
.pv-ball__light { animation: pv-ball-scatter 6s infinite; }
.pv-ball__star { animation: pv-ball-twinkle 6s ease-in-out infinite; }
.pv-ball__cur { animation: pv-ball-hover 6s infinite; }
.pv-ball__btn { animation: pv-ball-lit 6s infinite; }
.pv-ball__flare { animation: pv-ball-burst 6s infinite; }
/* one full horizontal period of the facet pattern is 6cqi; ten of them in 6s,
then a jump to the identical frame at rest */
@keyframes pv-ball-turn {
0% { translate: 0 0; }
99.9% { translate: -60cqi 0; animation-timing-function: steps(1, end); }
100% { translate: 0 0; }
}
/* the squares cross the page from the left, on the beat of the ball */
@keyframes pv-ball-scatter {
0%, 16% { translate: -130cqi 0; animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1); }
66% { translate: 130cqi 0; animation-timing-function: steps(1, end); }
100% { translate: -130cqi 0; }
}
@keyframes pv-ball-twinkle {
0%, 100% { scale: 1; }
30% { scale: 1.35; }
55% { scale: 0.9; }
80% { scale: 1.25; }
}
/* the cursor slides up onto RSVP as the light arrives, sits through the flare, drifts back */
@keyframes pv-ball-hover {
0%, 40% { left: 86%; top: 92%; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
60%, 86% { left: 55%; top: 87%; animation-timing-function: ease-in-out; }
100% { left: 86%; top: 92%; }
}
@keyframes pv-ball-lit {
0%, 60% { background: #D4A437; color: #3B2418; }
64%, 84% { background: #F2E3C6; color: #3B2418; }
92%, 100% { background: #D4A437; color: #3B2418; }
}
@keyframes pv-ball-burst {
0%, 61% { scale: 0; opacity: 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.2); }
68% { scale: 1; opacity: 1; rotate: 22deg; animation-timing-function: linear; }
76% { scale: 1.15; opacity: 1; rotate: 40deg; animation-timing-function: ease-in; }
88% { scale: 1.6; opacity: 0; rotate: 60deg; animation-timing-function: steps(1, end); }
100% { scale: 0; opacity: 0; rotate: 0deg; }
}
}
/* ---- GILDED: the interlocked monogram unlocks and slides apart to reveal the ring ---- */
/* Previews v2 (2026-09-26), row 23. Resting frame IS the poster: black ground,
a double gold frame with diamond corner devices, an A and a V woven through
each other in engraved roman caps at dead centre, HAUTE JOAILLERIE in small
letterspaced caps below. The hero moment: the gold warms to champagne from
within (no travelling highlight), then the letters unlock and slide heavily
to either side while a single gold ring with one champagne stone grows in the
gap and the caption changes to THE SOLITAIRE. 8s cycle; the ring closes, the
letters slide back and re-interlock, the caption returns. */
.pv-gild { background: #0A0A0A; container-type: inline-size; }
.pv-gild__frame { position: absolute; inset: 7%; border: 1px solid #D4AF37; }
.pv-gild__frame--in { inset: 9.4%; border-color: rgba(212, 175, 55, 0.5); }
.pv-gild__corner { position: absolute; width: 3.2cqi; height: 3.2cqi; background: #D4AF37; transform: rotate(45deg); }
.pv-gild__corner--tl { left: calc(7% - 1.6cqi); top: calc(7% - 1.6cqi); }
.pv-gild__corner--tr { right: calc(7% - 1.6cqi); top: calc(7% - 1.6cqi); }
.pv-gild__corner--bl { left: calc(7% - 1.6cqi); bottom: calc(7% - 1.6cqi); }
.pv-gild__corner--br { right: calc(7% - 1.6cqi); bottom: calc(7% - 1.6cqi); }
/* the piece: hidden inside the monogram at rest */
.pv-gild__ring { position: absolute; left: 50%; top: 50%; width: 24cqi; height: 24cqi; margin: -12cqi 0 0 -12cqi; transform: scale(0); opacity: 0; }
.pv-gild__ring i { position: absolute; inset: 0; border-radius: 50%; border: 2.4cqi solid #D4AF37; box-shadow: inset 0 0 0 1px #F1E5C9, 0 0 0 1px #8A6F1E; box-sizing: border-box; }
.pv-gild__ring b { position: absolute; left: 50%; top: -1.2cqi; width: 5cqi; height: 5cqi; margin-left: -2.5cqi; background: #F1E5C9; transform: rotate(45deg); box-shadow: inset 0.6cqi 0.6cqi 0 rgba(255, 255, 255, 0.8), inset -0.6cqi -0.6cqi 0 rgba(160, 130, 70, 0.5); }
/* the monogram: A in front, V behind, and a lower-half copy of V in front so
the two letters read as woven through each other */
.pv-gild__mono { position: absolute; inset: 0; display: grid; place-items: center; }
.pv-gild__mono span { grid-area: 1 / 1; font: 500 40cqi/1 "Cinzel", "PvMarcellus", "Times New Roman", serif; color: #D4AF37; text-shadow: 0 0 0 transparent; }
.pv-gild__a { transform: translateX(-0.17em); }
.pv-gild__v { transform: translateX(0.17em); }
.pv-gild__v--over { clip-path: inset(52% 0 0 0); }
.pv-gild__cap { position: absolute; left: 0; right: 0; bottom: 12.5%; margin: 0; text-align: center; font: 600 5.8cqi/1 "Cormorant Garamond", "Times New Roman", serif; letter-spacing: 0.3em; text-transform: uppercase; color: #F1E5C9; }
.pv-gild__cap--open { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.pv-gild__a { animation: pv-gild-a 8s infinite; }
.pv-gild__v { animation: pv-gild-v 8s infinite; }
.pv-gild__ring { animation: pv-gild-ring 8s infinite; }
.pv-gild__cap--rest { animation: pv-gild-caprest 8s infinite; }
.pv-gild__cap--open { animation: pv-gild-capopen 8s infinite; }
/* A: warm from inside, slide left, hold, slide back */
@keyframes pv-gild-a {
0%, 19% { transform: translateX(-0.17em); color: #D4AF37; text-shadow: 0 0 0 transparent; animation-timing-function: ease-in-out; }
28% { transform: translateX(-0.17em); color: #F1E5C9; text-shadow: 0 0 0.06em rgba(241, 229, 201, 0.55); animation-timing-function: ease-in-out; }
37% { transform: translateX(-0.17em); color: #D4AF37; text-shadow: 0 0 0 transparent; animation-timing-function: cubic-bezier(0.65, 0, 0.2, 1); }
62%, 78% { transform: translateX(-0.62em); color: #D4AF37; text-shadow: 0 0 0 transparent; animation-timing-function: cubic-bezier(0.65, 0, 0.25, 1); }
96%, 100% { transform: translateX(-0.17em); color: #D4AF37; text-shadow: 0 0 0 transparent; }
}
@keyframes pv-gild-v {
0%, 19% { transform: translateX(0.17em); color: #D4AF37; text-shadow: 0 0 0 transparent; animation-timing-function: ease-in-out; }
28% { transform: translateX(0.17em); color: #F1E5C9; text-shadow: 0 0 0.06em rgba(241, 229, 201, 0.55); animation-timing-function: ease-in-out; }
37% { transform: translateX(0.17em); color: #D4AF37; text-shadow: 0 0 0 transparent; animation-timing-function: cubic-bezier(0.65, 0, 0.2, 1); }
62%, 78% { transform: translateX(0.62em); color: #D4AF37; text-shadow: 0 0 0 transparent; animation-timing-function: cubic-bezier(0.65, 0, 0.25, 1); }
96%, 100% { transform: translateX(0.17em); color: #D4AF37; text-shadow: 0 0 0 transparent; }
}
/* the ring grows in the gap once the letters have cleared it */
@keyframes pv-gild-ring {
0%, 44% { transform: scale(0); opacity: 0; animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1); }
50% { opacity: 1; }
66%, 76% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.6, 0, 0.6, 1); }
88% { opacity: 1; }
91%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes pv-gild-caprest {
0%, 46% { opacity: 1; }
54%, 84% { opacity: 0; }
94%, 100% { opacity: 1; }
}
@keyframes pv-gild-capopen {
0%, 54% { opacity: 0; }
62%, 80% { opacity: 1; }
90%, 100% { opacity: 0; }
}
}
/* ---- ANTI-DESIGN: the button runs from the cursor and the marquee grabs the headline instead ---- */
/* Previews v2 (2026-09-26), row 2. Resting frame IS the poster: an off-grid
collision of stretched Arial Black OPEN, a Times italic "call", a default-blue
link, a dashed marquee, a cursor and a lime button with a magenta border.
Hero: the cursor lunges twice and the button jumps away both times; the
marquee then snaps onto the headline and drags it down across the button
until nothing is legible. Every move is steps(1): no easing, stutter holds,
deliberate jank. 6s, hard cut back to frame 0 (the cut is on-brand). */
.pv-dodge { background: #1A171C; container-type: inline-size; }
.pv-dodge__call { position: absolute; left: 34%; top: 30%; margin: 0; font: italic 400 36cqi/1 "Times New Roman", Georgia, serif; color: #FF2E97; transform: rotate(-8deg); z-index: 1; }
.pv-dodge__btn { position: absolute; left: 60%; top: 64%; margin: 0; padding: 2cqi 4cqi; background: #E0FF4F; border: 1.2cqi solid #FF2E97; font: 700 8cqi/1 Arial, Helvetica, sans-serif; color: #1A171C; white-space: nowrap; z-index: 2; }
.pv-dodge__head { position: absolute; left: -3%; top: 2%; margin: 0; font: 900 26cqi/0.9 "Arial Black", Impact, sans-serif; color: #fff; letter-spacing: -0.05em; transform-origin: 0 0; transform: scaleX(1.3); translate: 0 0; z-index: 3; }
.pv-dodge__link { position: absolute; left: 5%; bottom: 7%; margin: 0; font: 400 7cqi/1 "Times New Roman", Georgia, serif; color: #0000EE; text-decoration: underline; z-index: 2; }
/* the marquee: a real dashed selection box, already on screen, selecting nothing useful */
.pv-dodge__sel { position: absolute; left: 6%; top: 58%; width: 30%; height: 22%; box-sizing: border-box; border: 0.7cqi dashed #fff; translate: 0 0; z-index: 4; }
/* the cursor is part of the poster: white arrow with a default-blue hard shadow */
.pv-dodge__cur { position: absolute; left: 42%; top: 78%; width: 7%; aspect-ratio: 14 / 19; background: #fff; clip-path: polygon(0 0, 0 86%, 32% 68%, 50% 100%, 66% 92%, 48% 60%, 84% 58%); filter: drop-shadow(0.6cqi 0.6cqi 0 #0000EE); z-index: 6; }
@media (prefers-reduced-motion: no-preference) {
.pv-dodge__cur { animation: pv-dodge-lunge 6s steps(1, end) infinite; }
.pv-dodge__btn { animation: pv-dodge-flee 6s steps(1, end) infinite; }
.pv-dodge__sel { animation: pv-dodge-grab 6s steps(1, end) infinite; }
.pv-dodge__head { animation: pv-dodge-drag 6s steps(1, end) infinite; }
/* steps(1, end): each keyframe's value holds until the next keyframe, so
every position below is "where it sits from this moment on" */
@keyframes pv-dodge-lunge {
0% { left: 42%; top: 78%; }
20% { left: 52%; top: 72%; }
23% { left: 57%; top: 67%; }
26% { left: 61%; top: 65%; }
31% { left: 62%; top: 44%; }
35% { left: 73%; top: 30%; }
38% { left: 75%; top: 26%; }
43% { left: 40%; top: 50%; }
47% { left: 11%; top: 43%; }
50% { left: 92%; top: 4%; }
56% { left: 94%; top: 12%; }
62% { left: 96%; top: 24%; }
68% { left: 97%; top: 36%; }
74% { left: 98%; top: 44%; }
100% { left: 42%; top: 78%; }
}
/* the button dodges the instant the cursor arrives, twice */
@keyframes pv-dodge-flee {
0% { left: 60%; top: 64%; }
26% { left: 70%; top: 28%; }
38% { left: 4%; top: 40%; }
100% { left: 60%; top: 64%; }
}
/* the marquee gives up on the button, snaps around OPEN and drags it down */
@keyframes pv-dodge-grab {
0% { left: 6%; top: 58%; width: 30%; height: 22%; translate: 0 0; }
50% { left: -2%; top: 0; width: 102%; height: 34%; translate: 0 0; }
56% { left: -2%; top: 0; width: 102%; height: 34%; translate: 0 6cqi; }
62% { left: -2%; top: 0; width: 102%; height: 34%; translate: 1cqi 15cqi; }
68% { left: -2%; top: 0; width: 102%; height: 34%; translate: 2cqi 24cqi; }
74% { left: -2%; top: 0; width: 102%; height: 34%; translate: 2cqi 30cqi; }
100% { left: 6%; top: 58%; width: 30%; height: 22%; translate: 0 0; }
}
@keyframes pv-dodge-drag {
0% { translate: 0 0; }
56% { translate: 0 6cqi; }
62% { translate: 1cqi 15cqi; }
68% { translate: 2cqi 24cqi; }
74% { translate: 2cqi 30cqi; }
100% { translate: 0 0; }
}
}
/* ---- SCANDINAVIAN MINIMALISM: pick a swatch and the chair changes colour in daylight ---- */
/* Previews v2 (2026-09-26), row 47. Resting frame IS the poster: a white
page, one rounded product card with a daylit room (oat wall, pale-wood
floor, a simple armchair in grey wool, a soft slanted window-light on the
wall), three colour chips below with a ring on the grey one, and the
product name in a spaced sans. Hero: the swatch selector. The ring slides
to the blue chip and the upholstery fades to muted blue while the window
light dims and drifts as if a cloud passed; a long calm hold; the ring
slides back to grey and the chair returns to its frame-0 colour. 7s. */
.pv-mid { background: #FAFAF8; container-type: inline-size; font-family: "DM Sans", Helvetica, Arial, sans-serif; }
.pv-mid__card {
position: absolute; left: 8cqi; top: 6cqi; width: 84cqi; height: 63cqi; border-radius: 3cqi; overflow: hidden;
background: #FAFAF8; box-shadow: 0 1.6cqi 5cqi rgba(154, 154, 154, 0.28), 0 0 0 0.2cqi rgba(154, 154, 154, 0.18);
}
.pv-mid__room { position: absolute; left: 0; top: 0; width: 100%; height: 40cqi; background: #E8E1D5; overflow: hidden; }
.pv-mid__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 11cqi; background: #D9C3A5; }
.pv-mid__chair { position: absolute; left: 30cqi; top: 4cqi; width: 36cqi; height: 34cqi; }
.pv-mid__wood { fill: #D9C3A5; }
.pv-mid__uph { fill: #9A9A9A; }
/* window light: a soft slanted panel of white over wall and chair */
.pv-mid__light {
position: absolute; left: 50cqi; top: -6cqi; width: 22cqi; height: 46cqi; background: #FFFFFF; opacity: 0.55;
transform: skewX(-16deg) translate(0, 0); filter: blur(1.1cqi); pointer-events: none;
}
.pv-mid__chip { position: absolute; left: var(--cl); top: 48.5cqi; width: 6cqi; height: 6cqi; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 0.15cqi rgba(154, 154, 154, 0.35); }
.pv-mid__ring { position: absolute; left: 15cqi; top: 47.5cqi; width: 8cqi; height: 8cqi; box-sizing: border-box; border-radius: 50%; border: 0.45cqi solid #6B6B6B; transform: translate(0, 0); }
.pv-mid__name { position: absolute; left: 40cqi; top: 49.6cqi; margin: 0; font: 400 5.2cqi/1 "DM Sans", Helvetica, Arial, sans-serif; letter-spacing: 0.14em; color: #6B6B6B; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
.pv-mid__ring { animation: pv-mid-ring 7s infinite; }
.pv-mid__uph { animation: pv-mid-wool 7s infinite; }
.pv-mid__light { animation: pv-mid-cloud 7s infinite; }
/* the ring slides one chip to the right, holds, slides back */
@keyframes pv-mid-ring {
0%, 21% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
30%, 84% { transform: translate(10cqi, 0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
93%, 100% { transform: translate(0, 0); }
}
/* upholstery: grey to muted blue and back, no bounce anywhere */
@keyframes pv-mid-wool {
0%, 26% { fill: #9A9A9A; animation-timing-function: ease-in-out; }
46%, 86% { fill: #7A8FA6; animation-timing-function: ease-in-out; }
98%, 100% { fill: #9A9A9A; }
}
/* a cloud passes: the light dims, drifts a little, and comes back */
@keyframes pv-mid-cloud {
0%, 22% { transform: skewX(-16deg) translate(0, 0); opacity: 0.55; animation-timing-function: ease-in-out; }
50% { transform: skewX(-16deg) translate(2.4cqi, 0); opacity: 0.28; animation-timing-function: ease-in-out; }
82%, 100% { transform: skewX(-16deg) translate(0, 0); opacity: 0.55; }
}
}
/* ---- SYNTHWAVE: hover PLAY and the grid floors it; two neon pulses run the floor faster, then ease back to cruise ---- */
/* Previews v2 (2026-09-26), row 57, retro racing game. Resting frame IS the
poster: purple-to-orange sky, a banded sunset sun sitting on the horizon,
a magenta perspective grid receding to the vanishing point with one cyan
pulse line already mid-floor (cruising speed), a chrome TURBO logo above,
an outlined cyan PLAY button over the road. Hero: a cursor slides onto PLAY;
the button fills cyan, the two pulse lines lap the floor at more than twice
the speed, cyan streaks stretch up both edges, and the chrome logo runs hot.
Loop: the cursor leaves, the pulses decelerate lap by lap back to cruise and
land exactly where frame 0 has them. 6s; every pulse lap is linear in floor
space so perspective does the accelerating for us. */
.pv-vanish { background: #2B0F54; container-type: inline-size; font-family: "Monoton", "Impact", "Arial Black", sans-serif; }
.pv-vanish__sky { position: absolute; inset: 0; background: linear-gradient(#2B0F54 0%, #5A1B78 40%, #FF2A6D 58%, #FF6C11 70%); }
.pv-vanish__sun { position: absolute; left: 50%; top: 12cqi; width: 34cqi; height: 34cqi; translate: -50% 0; border-radius: 50%; overflow: hidden; background: linear-gradient(#FF6C11 0%, #FF2A6D 60%, #FF2A6D 100%); }
.pv-vanish__bands { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; background: repeating-linear-gradient(to bottom, transparent 0 2.4cqi, #2B0F54 2.4cqi 3.5cqi); }
/* the floor: a plane hinged at the horizon, tilted toward the viewer; the grid is drawn flat and the perspective does the rest */
.pv-vanish__floor {
position: absolute; top: 58%; left: -50%; width: 200%; height: 40cqi; transform-origin: 50% 0;
transform: perspective(60cqi) rotateX(62deg);
background: linear-gradient(90deg, rgba(255, 42, 109, 0.9) 0 0.5cqi, transparent 0.5cqi) 0 0 / 8cqi 100%,
linear-gradient(rgba(255, 42, 109, 0.9) 0 0.5cqi, transparent 0.5cqi) 0 0 / 100% 5cqi, #150A2E;
}
.pv-vanish__pulse { position: absolute; left: 0; right: 0; height: 1cqi; background: #00F0FF; box-shadow: 0 0 1.4cqi #00F0FF, 0 0 3cqi #00F0FF; }
.pv-vanish__pulse--a { top: 0; opacity: 0; }
.pv-vanish__pulse--b { top: 50%; opacity: 1; }
.pv-vanish__haze { position: absolute; left: 0; right: 0; top: 50%; height: 16%; background: linear-gradient(transparent, rgba(255, 42, 109, 0.6) 50%, transparent); pointer-events: none; }
/* speed streaks up both edges: nothing at cruise */
.pv-vanish__streak { position: absolute; top: 46%; bottom: 0; width: 0.8cqi; background: #00F0FF; box-shadow: 0 0 1.6cqi #00F0FF; opacity: 0; transform-origin: 50% 100%; scale: 1 0.2; }
.pv-vanish__streak--l { left: 7cqi; }
.pv-vanish__streak--r { right: 7cqi; }
/* the chrome logo: sky-to-steel gradient clipped to the letters, a hot pink underline shadow */
.pv-vanish__logo {
position: absolute; left: 50%; top: 4cqi; translate: -50% 0; margin: 0; white-space: nowrap;
font-weight: 400; font-size: 18cqi; line-height: 1; letter-spacing: 0.04em;
background: linear-gradient(#FFFFFF 0%, #BFE9FF 42%, #2B0F54 50%, #FF2A6D 56%, #FFD6E8 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 0.7cqi 0 #FF2A6D) drop-shadow(0 0 0 rgba(255, 255, 255, 0)) brightness(1);
}
/* the CTA: outlined at rest, filled on hover */
.pv-vanish__play {
position: absolute; left: 50%; top: 58cqi; translate: -50% 0; padding: 0.35em 1.3em; box-sizing: border-box;
border: 0.7cqi solid #00F0FF; color: #00F0FF; background: rgba(0, 240, 255, 0);
font: 700 6cqi/1 "PvUnbounded", "Trebuchet MS", "Arial", sans-serif; letter-spacing: 0.22em; text-indent: 0.22em;
box-shadow: 0 0 1cqi rgba(0, 240, 255, 0.5);
}
.pv-vanish__cur { position: absolute; left: 110%; top: 110%; width: 8cqi; aspect-ratio: 14 / 19; background: #FFFFFF; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%); filter: drop-shadow(0.4cqi 0.4cqi 0 #2B0F54); }
@media (prefers-reduced-motion: no-preference) {
.pv-vanish__pulse--a { animation: pv-vanish-lap-a 6s linear infinite; }
.pv-vanish__pulse--b { animation: pv-vanish-lap-b 6s linear infinite; }
.pv-vanish__streak { animation: pv-vanish-streak 6s infinite; }
.pv-vanish__logo { animation: pv-vanish-hot 6s infinite; }
.pv-vanish__play { animation: pv-vanish-hover 6s infinite; }
.pv-vanish__cur { animation: pv-vanish-cur 6s infinite; }
/* pulse A laps the floor in 1.5s, 0.9s, 0.6s, 0.6s, 0.9s, 1.5s (= 6s); it wraps at the far
edge (off-canvas, faded) back to the horizon (faded) so the jump is never seen */
@keyframes pv-vanish-lap-a {
0% { top: 0; opacity: 0; }
0.8% { opacity: 1; }
24.2% { opacity: 1; }
24.9% { top: 100%; opacity: 0; }
25% { top: 0; opacity: 0; }
25.6% { opacity: 1; }
39.3% { opacity: 1; }
39.9% { top: 100%; opacity: 0; }
40% { top: 0; opacity: 0; }
40.5% { opacity: 1; }
49.4% { opacity: 1; }
49.9% { top: 100%; opacity: 0; }
50% { top: 0; opacity: 0; }
50.5% { opacity: 1; }
59.4% { opacity: 1; }
59.9% { top: 100%; opacity: 0; }
60% { top: 0; opacity: 0; }
60.6% { opacity: 1; }
74.3% { opacity: 1; }
74.9% { top: 100%; opacity: 0; }
75% { top: 0; opacity: 0; }
75.8% { opacity: 1; }
99.2% { opacity: 1; }
99.9% { top: 100%; opacity: 0; }
100% { top: 0; opacity: 0; }
}
/* pulse B runs half a lap behind A at exactly A's speed; it is mid-floor at frame 0 */
@keyframes pv-vanish-lap-b {
0% { top: 50%; opacity: 1; }
11.8% { opacity: 1; }
12.4% { top: 100%; opacity: 0; }
12.5% { top: 0; opacity: 0; }
13.2% { opacity: 1; }
25% { top: 50%; }
31.8% { opacity: 1; }
32.4% { top: 100%; opacity: 0; }
32.5% { top: 0; opacity: 0; }
33.1% { opacity: 1; }
40% { top: 50%; }
44.4% { opacity: 1; }
44.9% { top: 100%; opacity: 0; }
45% { top: 0; opacity: 0; }
45.5% { opacity: 1; }
50% { top: 50%; }
54.4% { opacity: 1; }
54.9% { top: 100%; opacity: 0; }
55% { top: 0; opacity: 0; }
55.6% { opacity: 1; }
60% { top: 50%; }
66.8% { opacity: 1; }
67.4% { top: 100%; opacity: 0; }
67.5% { top: 0; opacity: 0; }
68.2% { opacity: 1; }
75% { top: 50%; }
86.8% { opacity: 1; }
87.4% { top: 100%; opacity: 0; }
87.5% { top: 0; opacity: 0; }
88.3% { opacity: 1; }
100% { top: 50%; opacity: 1; }
}
@keyframes pv-vanish-streak {
0%, 24% { opacity: 0; scale: 1 0.2; animation-timing-function: ease-out; }
40%, 60% { opacity: 0.9; scale: 1 1; animation-timing-function: ease-in; }
76%, 100% { opacity: 0; scale: 1 0.2; }
}
@keyframes pv-vanish-hot {
0%, 30% { filter: drop-shadow(0 0.7cqi 0 #FF2A6D) drop-shadow(0 0 0 rgba(255, 255, 255, 0)) brightness(1); animation-timing-function: ease-in-out; }
45%, 55% { filter: drop-shadow(0 0.7cqi 0 #FF2A6D) drop-shadow(0 0 2.2cqi rgba(255, 255, 255, 0.9)) brightness(1.5); animation-timing-function: ease-in-out; }
72%, 100% { filter: drop-shadow(0 0.7cqi 0 #FF2A6D) drop-shadow(0 0 0 rgba(255, 255, 255, 0)) brightness(1); }
}
@keyframes pv-vanish-hover {
0%, 23% { background: rgba(0, 240, 255, 0); color: #00F0FF; box-shadow: 0 0 1cqi rgba(0, 240, 255, 0.5); }
25%, 72% { background: rgba(0, 240, 255, 1); color: #2B0F54; box-shadow: 0 0 3cqi rgba(0, 240, 255, 1); }
75%, 100% { background: rgba(0, 240, 255, 0); color: #00F0FF; box-shadow: 0 0 1cqi rgba(0, 240, 255, 0.5); }
}
@keyframes pv-vanish-cur {
0%, 8% { left: 110%; top: 110%; animation-timing-function: ease-out; }
23%, 70% { left: 55cqi; top: 63cqi; animation-timing-function: ease-in; }
82%, 100% { left: 110%; top: 110%; }
}
}
/* ---- STORYBOOK: scrolling turns the page; the right leaf curls over to the next spread ---- */
/* Previews v2 (2026-09-26), row 53. Poster: an open picture book. Left page a
painted scene (sky fading to peach, a rose sun, mint hills, a blossom tree);
right page a decorative italic O on a rose disc beginning 'Once…' over soft
lines of text; a rose scrollbar thumb at the top of its track. Hero: the
thumb slides down and the right page lifts at the gutter, turns through the
air (its shadow crossing the page beneath) and lays down on the left,
revealing a sunset scene with a little house and, on the right, a big S:
'Story Time'. 7s cycle: at 5.8s the page turns back and the thumb returns. */
.pv-turn { background: #3B3B3B; container-type: inline-size; font-family: "Fraunces", Georgia, serif; }
.pv-turn__book { position: absolute; inset: 0; perspective: 170cqi; perspective-origin: 50% 50%; }
/* left page: spread one's painted scene */
.pv-turn__left { position: absolute; left: 0; top: 0; width: 50%; height: 100%; background: #F6D6AD; overflow: hidden; }
.pv-turn__sky { position: absolute; inset: 0; background: linear-gradient(to bottom, #A7C7E7 0%, #F6D6AD 68%); }
.pv-turn__sun { position: absolute; left: 30cqi; top: 10cqi; width: 13cqi; height: 13cqi; border-radius: 50%; background: #F5B7B1; }
.pv-turn__hillA { position: absolute; left: -12cqi; top: 46cqi; width: 62cqi; height: 44cqi; border-radius: 50%; background: #C3E6CB; }
.pv-turn__hillB { position: absolute; left: 22cqi; top: 54cqi; width: 50cqi; height: 40cqi; border-radius: 50%; background: #A9D6B6; }
.pv-turn__trunk { position: absolute; left: 13cqi; top: 40cqi; width: 2.4cqi; height: 16cqi; background: #3B3B3B; border-radius: 1cqi; }
.pv-turn__crown { position: absolute; left: 6cqi; top: 28cqi; width: 16cqi; height: 15cqi; border-radius: 50%; background: #F5B7B1; box-shadow: inset -2cqi -2cqi 0 rgba(59, 59, 59, 0.12); }
/* right page underneath: spread two's text page */
.pv-turn__under { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; background: #FBEBD3; overflow: hidden; }
.pv-turn__cap { position: absolute; left: 5.5cqi; top: 4cqi; z-index: 0; font: italic 600 32cqi/1 "Fraunces", Georgia, serif; color: #3B3B3B; }
.pv-turn__cap::before { content: ""; position: absolute; left: -3cqi; top: 5cqi; width: 26cqi; height: 26cqi; border-radius: 50%; background: #F5B7B1; z-index: -1; }
.pv-turn__capS::before { background: #A7C7E7; }
.pv-turn__word { position: absolute; font: 500 10cqi/1 "Fraunces", Georgia, serif; color: #3B3B3B; white-space: nowrap; }
.pv-turn__wordO { left: 28.5cqi; top: 23.5cqi; font-size: 7.2cqi; }
.pv-turn__wordS { left: 26.5cqi; top: 23.5cqi; font-size: 7.2cqi; }
.pv-turn__wordT { left: 5.5cqi; top: 40cqi; font-size: 13cqi; font-weight: 700; }
.pv-turn__lines { position: absolute; left: 7cqi; right: 7cqi; height: 18cqi; opacity: 0.32; background: repeating-linear-gradient(to bottom, #3B3B3B 0 1.3cqi, transparent 1.3cqi 4.2cqi); }
.pv-turn__linesO { top: 42cqi; }
.pv-turn__linesS { top: 56cqi; height: 12cqi; }
.pv-turn__shade { position: absolute; inset: 0; background: #3B3B3B; opacity: 0; }
/* the leaf: hinged at the gutter, two faces */
.pv-turn__leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; transform: rotateY(0deg); }
.pv-turn__front, .pv-turn__back { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; }
.pv-turn__front { background: #FBEBD3; box-shadow: inset 1.5cqi 0 2cqi rgba(59, 59, 59, 0.12); }
.pv-turn__back { background: #F6D6AD; transform: rotateY(180deg); box-shadow: inset -1.5cqi 0 2cqi rgba(59, 59, 59, 0.12); }
.pv-turn__sky2 { position: absolute; inset: 0; background: linear-gradient(to bottom, #F5B7B1 0%, #F6D6AD 60%); }
.pv-turn__moon { position: absolute; left: 8cqi; top: 8cqi; width: 10cqi; height: 10cqi; border-radius: 50%; background: #FBEBD3; box-shadow: inset -2.2cqi 1cqi 0 #F5B7B1; }
.pv-turn__hillC { position: absolute; left: -8cqi; top: 50cqi; width: 66cqi; height: 44cqi; border-radius: 50%; background: #C3E6CB; }
.pv-turn__house { position: absolute; left: 26cqi; top: 40cqi; width: 15cqi; height: 14cqi; background: #FBEBD3; box-shadow: inset 0 0 0 0.6cqi #3B3B3B; }
.pv-turn__roof { position: absolute; left: 24cqi; top: 31cqi; width: 19cqi; height: 10cqi; background: #A7C7E7; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pv-turn__door { position: absolute; left: 31.5cqi; top: 46cqi; width: 4cqi; height: 8cqi; background: #F5B7B1; border-radius: 2cqi 2cqi 0 0; }
.pv-turn__gutter { position: absolute; left: 50%; top: 0; width: 4cqi; height: 100%; margin-left: -2cqi; background: linear-gradient(90deg, rgba(59, 59, 59, 0) 0%, rgba(59, 59, 59, 0.3) 50%, rgba(59, 59, 59, 0) 100%); }
/* the scroll cue: a track at the right edge, thumb resting at the top */
.pv-turn__track { position: absolute; right: 0.9cqi; top: 2cqi; bottom: 2cqi; width: 1.5cqi; border-radius: 1cqi; background: rgba(59, 59, 59, 0.16); }
.pv-turn__thumb { position: absolute; left: 0; top: 0; width: 100%; height: 22cqi; border-radius: 1cqi; background: #F5B7B1; box-shadow: 0 0 0 0.3cqi rgba(59, 59, 59, 0.25); }
@media (prefers-reduced-motion: no-preference) {
.pv-turn__leaf { animation: pv-turn-leaf 7s infinite; }
.pv-turn__thumb { animation: pv-turn-thumb 7s infinite; }
.pv-turn__shade { animation: pv-turn-shade 7s infinite; }
/* over in 3s with a papery ease, hold the new spread, back in 1.2s */
@keyframes pv-turn-leaf {
0%, 14.3% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
57.1%, 82.9% { transform: rotateY(-180deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: rotateY(0deg); }
}
/* the thumb drives it: same easing, 49cqi of travel */
@keyframes pv-turn-thumb {
0%, 14.3% { translate: 0 0; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
57.1%, 82.9% { translate: 0 49cqi; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { translate: 0 0; }
}
/* the leaf's shadow crosses the page beneath at mid-turn */
@keyframes pv-turn-shade {
0%, 14.3% { opacity: 0; }
35.7% { opacity: 0.32; }
57.1%, 82.9% { opacity: 0; }
91.4% { opacity: 0.32; }
100% { opacity: 0; }
}
}
/* ---- CYBERPUNK: targeting brackets hunt the UI in the rain and lock onto ENTER ---- */
/* Previews v2 (2026-09-26), row 15. Resting frame IS the poster: void black, a
wet street band at the foot reflecting the neon as blurred vertical streaks,
a vertical hot-pink 雨 / cyan 夜市 sign on the left, HUD hairlines and
readouts, a NEON DISTRICT panel, a MAP chip, a cyan ENTER button, and four
cyan corner brackets framing the whole card. Rain already falling. The hero
moment: the brackets snap panel, chip, button in fast cuts, go signal-yellow
on ENTER with a LOCK readout and a two-frame pink/cyan tear glitch. 6s cycle;
the sign stutters off-on and the brackets release to the card corners. */
.pv-wet { background: #05050A; container-type: inline-size; font-family: "Space Mono", "PvSpaceMono", "Courier New", monospace; }
.pv-wet__street { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, #0B0B14, #05050A 60%, #0A0A12); }
.pv-wet__refl {
position: absolute; left: 0; right: 0; bottom: 0; height: 26%; opacity: 0.85; filter: blur(1.5px);
background: linear-gradient(90deg, transparent 5%, rgba(255, 42, 109, 0.55) 7%, rgba(255, 42, 109, 0.12) 10%, transparent 13%, transparent 28%, rgba(5, 217, 232, 0.28) 30%, transparent 33%, transparent 57%, rgba(5, 217, 232, 0.5) 59%, rgba(5, 217, 232, 0.14) 62%, transparent 65%, transparent 72%, rgba(255, 42, 109, 0.32) 74%, transparent 77%, transparent 86%, rgba(249, 240, 2, 0.3) 88%, transparent 91%);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
}
.pv-wet__sign { position: absolute; left: 6%; top: 7%; display: flex; flex-direction: column; align-items: center; gap: 2cqi; }
.pv-wet__sign b { font: 700 24cqi/1 "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #FFD2E1; text-shadow: 0 0 0.08em #FF2A6D, 0 0 0.3em #FF2A6D, 0 0 0.9em rgba(255, 42, 109, 0.7); }
.pv-wet__sign span { writing-mode: vertical-rl; font: 700 7cqi/1 "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #C9FDFF; letter-spacing: 0.15em; text-shadow: 0 0 0.15em #05D9E8, 0 0 0.6em rgba(5, 217, 232, 0.8); }
.pv-wet__line { position: absolute; background: rgba(5, 217, 232, 0.45); }
.pv-wet__line--h { left: 32%; top: 9%; width: 24%; height: 1px; }
.pv-wet__line--v { left: 96%; top: 12%; width: 1px; height: 56%; }
.pv-wet__read { position: absolute; font-size: 4cqi; line-height: 1; letter-spacing: 0.02em; color: rgba(5, 217, 232, 0.75); white-space: nowrap; }
.pv-wet__read--a { left: 30%; top: 12%; }
.pv-wet__read--b { left: 30%; top: 36%; }
.pv-wet__panel { position: absolute; left: 60%; top: 9%; width: 32%; height: 17%; box-sizing: border-box; border: 1px solid rgba(5, 217, 232, 0.55); padding: 0 0 0 2cqi; display: grid; align-content: center; font: 600 6.4cqi/1 "Oswald", "PvAnton", Impact, "Arial Narrow", sans-serif; letter-spacing: 0.06em; color: #F2F2F5; background: linear-gradient(90deg, rgba(5, 217, 232, 0.12), transparent 70%); }
.pv-wet__chip { position: absolute; left: 77%; top: 33%; width: 15%; height: 9%; box-sizing: border-box; border: 1px solid rgba(5, 217, 232, 0.55); display: grid; place-items: center; font-size: 4.6cqi; line-height: 1; color: #05D9E8; }
.pv-wet__btn { position: absolute; left: 56%; top: 54%; width: 36%; height: 15%; box-sizing: border-box; border: 2px solid #05D9E8; display: grid; place-items: center; background: rgba(5, 217, 232, 0.08); }
.pv-wet__btn span, .pv-wet__btn em { grid-area: 1 / 1; font: 600 8.6cqi/1 "Oswald", "PvAnton", Impact, "Arial Narrow", sans-serif; letter-spacing: 0.14em; font-style: normal; }
.pv-wet__btn span { color: #05D9E8; }
/* the glitch copy: pink twin of the label, invisible until the lock */
.pv-wet__gl { color: #FF2A6D; opacity: 0; transform: translateX(0); clip-path: inset(0 0 0 0); }
.pv-wet__tear { position: absolute; left: 0; right: 0; top: 60%; height: 2.4%; background: linear-gradient(90deg, #05D9E8, #FF2A6D); opacity: 0; transform: translateX(0); }
/* the target: four L-corners on a box that frames the whole card at rest */
.pv-wet__tgt { position: absolute; left: 3%; top: 4%; width: 94%; height: 92%; color: #05D9E8; }
.pv-wet__tgt i { position: absolute; width: 6cqi; height: 6cqi; border: 2px solid currentColor; }
.pv-wet__tgt i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.pv-wet__tgt i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.pv-wet__tgt i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.pv-wet__tgt i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.pv-wet__lock { position: absolute; left: 0; top: -6.5cqi; font-size: 4.8cqi; line-height: 1; font-weight: 700; letter-spacing: 0.1em; color: #F9F002; white-space: nowrap; opacity: 0; }
/* rain: a slanted-line tile scrolling on a child of a child so the thickening
and the component-rate fall are separate declarations */
.pv-wet__rain { position: absolute; inset: -10%; opacity: 0.35; pointer-events: none; }
.pv-wet__rain i { position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,") 0 0 / 60px 140px; }
@media (prefers-reduced-motion: no-preference) {
.pv-wet__tgt { animation: pv-wet-hunt 6s infinite; }
.pv-wet__lock { animation: pv-wet-lock 6s steps(1, end) infinite; }
.pv-wet__gl { animation: pv-wet-glitch 6s steps(1, end) infinite; }
.pv-wet__tear { animation: pv-wet-tear 6s steps(1, end) infinite; }
.pv-wet__sign { animation: pv-wet-stutter 6s steps(1, end) infinite; }
.pv-wet__rain { animation: pv-wet-thicken 6s infinite; }
.pv-wet__rain i { animation: pv-wet-fall 0.7s linear infinite; } /* component-rate: rain has to fall at rain speed; one tile-height per 0.7s keeps the loop seamless */
/* hunt: frame the card, snap to the panel, the chip, then ENTER; go yellow;
release in a hard cut back to the corners */
@keyframes pv-wet-hunt {
0%, 16% { left: 3%; top: 4%; width: 94%; height: 92%; color: #05D9E8; animation-timing-function: cubic-bezier(0.1, 0.9, 0.1, 1); }
18.5%, 36% { left: 60%; top: 9%; width: 32%; height: 17%; color: #05D9E8; animation-timing-function: cubic-bezier(0.1, 0.9, 0.1, 1); }
38.5%, 56% { left: 77%; top: 33%; width: 15%; height: 9%; color: #05D9E8; animation-timing-function: cubic-bezier(0.1, 0.9, 0.1, 1); }
58.5%, 61% { left: 56%; top: 54%; width: 36%; height: 15%; color: #05D9E8; }
61.5%, 93% { left: 56%; top: 54%; width: 36%; height: 15%; color: #F9F002; }
93.5%, 100% { left: 3%; top: 4%; width: 94%; height: 92%; color: #05D9E8; }
}
@keyframes pv-wet-lock {
0%, 61% { opacity: 0; }
61.5% { opacity: 1; }
64% { opacity: 0; }
65%, 93% { opacity: 1; }
93.5%, 100% { opacity: 0; }
}
/* two-frame tear: the pink twin slices left and right, then it is gone */
@keyframes pv-wet-glitch {
0%, 61% { opacity: 0; transform: translateX(0); clip-path: inset(0 0 0 0); }
61.5% { opacity: 1; transform: translateX(-4%); clip-path: inset(0 0 55% 0); }
62.5% { opacity: 1; transform: translateX(5%); clip-path: inset(45% 0 0 0); }
63.5% { opacity: 1; transform: translateX(-2%); clip-path: inset(30% 0 30% 0); }
64.5%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0 0 0 0); }
}
@keyframes pv-wet-tear {
0%, 61% { opacity: 0; transform: translateX(0); }
61.5% { opacity: 0.8; transform: translateX(-6%); }
62.5% { opacity: 0.8; transform: translateX(7%); }
63.5%, 100% { opacity: 0; transform: translateX(0); }
}
/* the sign drops out twice at the loop seam, then holds */
@keyframes pv-wet-stutter {
0%, 88% { opacity: 1; }
88.5% { opacity: 0.15; }
89.5% { opacity: 1; }
91% { opacity: 0.1; }
92% { opacity: 1; }
93.5% { opacity: 0.35; }
94.5%, 100% { opacity: 1; }
}
@keyframes pv-wet-thicken {
0% { opacity: 0.35; }
60%, 80% { opacity: 0.8; }
100% { opacity: 0.35; }
}
/* 140px is exactly one tile, so the final frame's return to 0 is invisible */
@keyframes pv-wet-fall {
0% { background-position: 0 0; }
99.9% { background-position: 0 140px; }
100% { background-position: 0 0; }
}
}
/* ---- RUSTIC: an unseen brush letters today's special on the plank, a tap sets the enamel-plate button swinging, the plank flips to its blank side and back ---- */
/* Previews v2 (2026-09-26), row 46. Resting frame IS the poster: a linen
ground, a reclaimed-wood plank hung on two ropes with TODAY hand-lettered
in chalk white, and a blue-rimmed enamel plate hanging from a nail on the
right as the menu button. Hero: the brush paints Sourdough & Stew letter
by letter (clip-path stepped per word), then a cursor arrives and taps the
plate, which swings on its hook and settles. Loop: the plank turns over
on its hanger to show the bare back, and turns back to frame 0 with the
special unpainted again. 9s cycle. */
.pv-grain { background: #E6DFD3; container-type: inline-size; }
.pv-grain p { margin: 0; }
/* linen: a fine cross-weave over oat */
.pv-grain__linen { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(58, 58, 56, 0.07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(58, 58, 56, 0.07) 0 1px, transparent 1px 3px); }
.pv-grain__rope { position: absolute; top: 0; width: 0.9cqi; height: 15%; background: #5E4A33; }
.pv-grain__rope1 { left: 17%; } .pv-grain__rope2 { left: 60%; }
/* the plank hangs in a perspective box and turns on its top edge */
.pv-grain__hang { position: absolute; left: 7%; top: 14%; width: 64%; height: 58%; perspective: 130cqi; }
.pv-grain__plank { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 0; transform: rotateY(0deg); }
.pv-grain__face { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; box-shadow: 0 1.2cqi 2cqi rgba(58, 58, 56, 0.28); }
.pv-grain__back { transform: rotateY(180deg); }
/* wood: weathered brown, horizontal turbulence grain, three board seams */
.pv-grain__wood { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 32%, rgba(58, 58, 56, 0.45) 32% 33.5%, transparent 33.5% 66%, rgba(58, 58, 56, 0.45) 66% 67.5%, transparent 67.5% 100%), url("data:image/svg+xml;utf8,") 0 0 / 240px 120px, #8B6F4E; }
/* Amatic SC is the painted sign hand: tall and narrow, so it runs larger than the italic it replaces; Arvo is the plate's stamped word */
.pv-grain__today { position: absolute; left: 7%; top: 5%; font: 700 15cqi/1 "Amatic SC", Impact, "Arial Narrow", sans-serif; color: #F4F1EA; letter-spacing: 0.06em; }
.pv-grain__special { position: absolute; left: 5%; top: 57%; font: 700 9cqi/1 "Amatic SC", Impact, "Arial Narrow", sans-serif; color: #F4F1EA; letter-spacing: 0.04em; white-space: nowrap; }
.pv-grain__special span { display: inline-block; clip-path: inset(0 100% 0 0); }
/* the enamel plate: hangs from a nail, swings from the hook */
.pv-grain__nail { position: absolute; left: calc(84% - 1cqi); top: 9%; width: 2cqi; height: 2cqi; border-radius: 50%; background: #3A3A38; }
.pv-grain__plate { position: absolute; left: calc(84% - 12cqi); top: 10%; width: 24cqi; height: 31cqi; transform-origin: 50% 0; transform: rotate(0deg); }
.pv-grain__hook { position: absolute; left: calc(50% - 0.4cqi); top: 0; width: 0.8cqi; height: 7cqi; background: #3A3A38; }
.pv-grain__dish { position: absolute; left: 0; top: 7cqi; width: 24cqi; height: 24cqi; border-radius: 50%; display: grid; place-items: center; background: #F4F1EA; box-shadow: inset 0 0 0 1.7cqi #2F5D8A, inset 0 0 0 2.6cqi #F4F1EA, inset 0 0 0 3.1cqi rgba(58, 58, 56, 0.12), 0 1cqi 1.6cqi rgba(58, 58, 56, 0.3); font: 700 5.2cqi/1 "Arvo", Georgia, "Times New Roman", serif; color: #2F5D8A; letter-spacing: 0.04em; }
/* cursor rests off-canvas */
.pv-grain__cur { position: absolute; left: 110%; top: 110%; width: 7%; aspect-ratio: 14 / 19; background: #3A3A38; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%); filter: drop-shadow(0 0 0.4cqi rgba(244, 241, 234, 0.9)); }
@media (prefers-reduced-motion: no-preference) {
.pv-grain__w1 { animation: pv-grain-w1 9s infinite; }
.pv-grain__w2 { animation: pv-grain-w2 9s infinite; }
.pv-grain__w3 { animation: pv-grain-w3 9s infinite; }
.pv-grain__cur { animation: pv-grain-cursor 9s infinite; }
.pv-grain__plate { animation: pv-grain-swing 9s infinite; }
.pv-grain__plank { animation: pv-grain-turn 9s infinite; }
/* the lettering: each word is revealed in as many steps as it has letters */
@keyframes pv-grain-w1 {
0%, 11% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(9, end); }
30%, 84% { clip-path: inset(0 0 0 0); }
85%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes pv-grain-w2 {
0%, 31% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(1, end); }
35%, 84% { clip-path: inset(0 0 0 0); }
85%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes pv-grain-w3 {
0%, 36% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(4, end); }
50%, 84% { clip-path: inset(0 0 0 0); }
85%, 100% { clip-path: inset(0 100% 0 0); }
}
/* cursor: in from the bottom-right, a tap on the plate, out */
@keyframes pv-grain-cursor {
0%, 49% { left: 110%; top: 110%; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
55%, 58% { left: 80%; top: 34%; animation-timing-function: ease-in; }
64%, 100% { left: 110%; top: 110%; }
}
/* the plate swings on its hook and settles like a pendulum */
@keyframes pv-grain-swing {
0%, 56% { transform: rotate(0deg); animation-timing-function: ease-out; }
60% { transform: rotate(8deg); animation-timing-function: ease-in-out; }
66% { transform: rotate(-6deg); animation-timing-function: ease-in-out; }
72% { transform: rotate(3.5deg); animation-timing-function: ease-in-out; }
77% { transform: rotate(-1.5deg); animation-timing-function: ease-in-out; }
81%, 100% { transform: rotate(0deg); }
}
/* the plank turns to its bare side while the special is wiped, and turns back */
@keyframes pv-grain-turn {
0%, 79% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
88% { transform: rotateY(180deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
97%, 100% { transform: rotateY(0deg); }
}
}
/* ---- KAWAII: the mascot is the cart button; tap it and it squishes, springs back and bumps +1 ---- */
/* Previews v2 (2026-09-26), row 30. Resting frame IS the poster: lavender
page, a big rounded pink product card with a butter snack and a mint price
pill, and bottom right a mint blob mascot sitting as the cart button, eyes
out, small mouth, pink cheeks, a bright pink count bubble on its shoulder.
Hero: tap feedback. A pastel finger drops in and squashes the blob flat;
it springs back tall, over-corrects, settles beaming; hearts and four-point
sparkles pop out; the bubble bumps and a "+1" floats off it. Then a happy
wiggle, a blink, and it settles. The blob blinks once at rest too. 6s. */
.pv-cute { background: #CDB4DB; container-type: inline-size; font-family: "Fredoka", Verdana, "Trebuchet MS", sans-serif; }
.pv-cute__card { position: absolute; left: 5cqi; top: 6cqi; width: 54cqi; height: 46cqi; border-radius: 7cqi; background: #FFC8DD; box-shadow: 0 1.4cqi 0 rgba(0, 0, 0, 0.06); }
.pv-cute__snack {
position: absolute; left: 15cqi; top: 6cqi; width: 24cqi; height: 24cqi; border-radius: 50%;
background: radial-gradient(circle at 50% 50%, #FFC8DD 0 22%, #FFF1A8 25% 100%);
box-shadow: inset 0 -1.6cqi 0 rgba(0, 0, 0, 0.06);
}
.pv-cute__pill { position: absolute; left: 14cqi; top: 34cqi; width: 26cqi; height: 7cqi; border-radius: 3.5cqi; background: #C1F0D8; }
/* the mascot: squashes from its feet */
.pv-cute__blob {
position: absolute; left: 63cqi; top: 32cqi; width: 30cqi; height: 31cqi;
background: #C1F0D8; border-radius: 48% 52% 46% 54% / 56% 52% 48% 44%;
box-shadow: 0 1.6cqi 0 #9DD9BE; transform-origin: 50% 100%; transform: scale(1, 1) rotate(0deg);
}
.pv-cute__eye { position: absolute; left: var(--ex); top: 10cqi; width: 4.2cqi; height: 5.6cqi; border-radius: 50%; background: #3A2E39; transform: scaleY(1); }
.pv-cute__eye::after { content: ""; position: absolute; left: 0.9cqi; top: 0.9cqi; width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: #fff; }
.pv-cute__cheek { position: absolute; left: var(--cx); top: 15cqi; width: 4.6cqi; height: 2.6cqi; border-radius: 50%; background: #FFC8DD; }
.pv-cute__mouth { position: absolute; left: 13cqi; top: 18.6cqi; width: 4.2cqi; height: 2cqi; border-radius: 0 0 2.2cqi 2.2cqi; background: #3A2E39; transform-origin: 50% 0; transform: scale(1, 1); }
/* the one bright colour: the cart count */
.pv-cute__bubble {
position: absolute; left: 84cqi; top: 26cqi; width: 11cqi; height: 11cqi; border-radius: 50%;
background: #FF3D8B; color: #fff; display: grid; place-items: center;
font: 700 6.4cqi/1 "Fredoka", Verdana, sans-serif; transform: scale(1);
}
.pv-cute__plus { position: absolute; left: 82cqi; top: 22cqi; width: 15cqi; text-align: center; font: 700 8cqi/1 "Fredoka", Verdana, sans-serif; color: #FF3D8B; opacity: 0; transform: translate(0, 0) scale(0.5); }
/* hearts and sparkles wait inside the blob at rest */
.pv-cute__heart { position: absolute; left: 75cqi; top: 42cqi; font: 7cqi/1 Georgia, serif; color: #FF3D8B; opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); }
.pv-cute__spark {
position: absolute; left: 75cqi; top: 42cqi; width: 7cqi; height: 7cqi; background: #FFF1A8; opacity: 0;
clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
transform: translate(0, 0) rotate(0deg) scale(0);
}
/* the finger: parked above the card at rest */
.pv-cute__finger { position: absolute; left: 72cqi; top: -26cqi; width: 12cqi; height: 22cqi; border-radius: 6cqi 6cqi 3cqi 3cqi; background: #FFF1A8; box-shadow: inset 0 0 0 1cqi #FFC8DD; opacity: 0; transform: translate(0, 0); }
@media (prefers-reduced-motion: no-preference) {
.pv-cute__blob { animation: pv-cute-squish 6s infinite; }
.pv-cute__eye { animation: pv-cute-blink 6s infinite; }
.pv-cute__mouth { animation: pv-cute-beam 6s infinite; }
.pv-cute__bubble { animation: pv-cute-bump 6s infinite; }
.pv-cute__plus { animation: pv-cute-plus 6s infinite; }
.pv-cute__heart { animation: pv-cute-pop 6s infinite; }
.pv-cute__spark { animation: pv-cute-pop 6s infinite; }
.pv-cute__spark { animation-delay: 0.1s; }
.pv-cute__finger { animation: pv-cute-tap 6s infinite; }
/* squash flat on the tap, spring tall, over-correct, settle; then wiggle */
@keyframes pv-cute-squish {
0%, 30% { transform: scale(1, 1) rotate(0deg); animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
33% { transform: scale(1.32, 0.6) rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
38% { transform: scale(0.86, 1.22) rotate(0deg); animation-timing-function: ease-in-out; }
43% { transform: scale(1.08, 0.94) rotate(0deg); animation-timing-function: ease-in-out; }
48%, 58% { transform: scale(1, 1) rotate(0deg); animation-timing-function: ease-in-out; }
64% { transform: scale(1, 1) rotate(-7deg); animation-timing-function: ease-in-out; }
72% { transform: scale(1, 1) rotate(7deg); animation-timing-function: ease-in-out; }
80% { transform: scale(1, 1) rotate(-4deg); animation-timing-function: ease-in-out; }
86%, 100% { transform: scale(1, 1) rotate(0deg); }
}
/* one blink in the poster hold, one as it settles */
@keyframes pv-cute-blink {
0%, 8% { transform: scaleY(1); }
9.5% { transform: scaleY(0.08); }
11%, 89% { transform: scaleY(1); }
90.5% { transform: scaleY(0.08); }
92%, 100% { transform: scaleY(1); }
}
@keyframes pv-cute-beam {
0%, 33% { transform: scale(1, 1); animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1); }
40%, 84% { transform: scale(2.2, 2.4); animation-timing-function: ease-in-out; }
90%, 100% { transform: scale(1, 1); }
}
@keyframes pv-cute-bump {
0%, 34% { transform: scale(1); animation-timing-function: ease-out; }
38% { transform: scale(1.4); animation-timing-function: ease-in-out; }
43% { transform: scale(0.94); animation-timing-function: ease-out; }
47%, 100% { transform: scale(1); }
}
@keyframes pv-cute-plus {
0%, 35% { opacity: 0; transform: translate(0, 0) scale(0.5); animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1); }
41% { opacity: 1; transform: translate(0, -6cqi) scale(1.1); animation-timing-function: ease-out; }
62% { opacity: 1; transform: translate(0, -9cqi) scale(1); animation-timing-function: ease-in; }
72% { opacity: 0; transform: translate(0, -13cqi) scale(1); }
73%, 100% { opacity: 0; transform: translate(0, 0) scale(0.5); }
}
/* hearts and sparkles burst from the blob, each along its own --hx/--hy */
@keyframes pv-cute-pop {
0%, 35% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
42% { opacity: 1; transform: translate(calc(var(--hx) * 0.6), calc(var(--hy) * 0.6)) rotate(var(--hr)) scale(1.2); animation-timing-function: ease-out; }
58% { opacity: 1; transform: translate(var(--hx), var(--hy)) rotate(var(--hr)) scale(1); animation-timing-function: ease-in; }
66% { opacity: 0; transform: translate(calc(var(--hx) * 1.15), calc(var(--hy) * 1.15)) rotate(var(--hr)) scale(0.8); }
67%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); }
}
/* the finger drops onto the blob, presses, lifts away */
@keyframes pv-cute-tap {
0%, 22% { opacity: 0; transform: translate(0, 0); }
24% { opacity: 1; transform: translate(0, 4cqi); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
31% { opacity: 1; transform: translate(0, 40cqi); animation-timing-function: ease-out; }
35% { opacity: 1; transform: translate(0, 36cqi); animation-timing-function: ease-in; }
44% { opacity: 1; transform: translate(0, 4cqi); }
46%, 100% { opacity: 0; transform: translate(0, 0); }
}
}
/* ---- MEDITERRANEAN: cobalt shutters swing open onto the sea and hard slat shadows rake the whitewash ---- */
/* Previews v2 (2026-09-26), row 33. Resting frame IS the poster: whitewashed
wall, a painted tile border top and bottom, "Villa Limone" in cobalt italic,
a window with both cobalt louvred shutters closed and a hard offset shadow,
a terracotta sill, a lemon branch hanging in from the top right with its own
crisp shadow on the wall. The hero moment: the shutters swing outward in 3D
and, as each one turns through the sun, a striped shadow rakes long across
the wall beside it and then collapses under the open panel; the window shows
flat sky, cobalt sea and a sail, and "Book your stay" appears under the sill.
7s cycle; the shutters swing shut. Nothing here is blurred. */
.pv-noon { background: #FAF7F2; container-type: inline-size; }
.pv-noon__tiles { position: absolute; left: 0; right: 0; height: 5cqi; background: repeating-linear-gradient(90deg, #1E4FA8 0 4cqi, #FAF7F2 4cqi 4.6cqi, #C8643B 4.6cqi 6.6cqi, #FAF7F2 6.6cqi 7.2cqi, #1E4FA8 7.2cqi 9.2cqi, #FAF7F2 9.2cqi 9.8cqi, #F4D35E 9.8cqi 11.8cqi, #FAF7F2 11.8cqi 12.4cqi); }
.pv-noon__tiles--top { top: 0; border-bottom: 0.6cqi solid #1E4FA8; }
.pv-noon__tiles--bot { bottom: 0; border-top: 0.6cqi solid #1E4FA8; }
.pv-noon__mark { position: absolute; left: 7%; top: 8.5cqi; margin: 0; font: italic 500 8cqi/1 "Playfair Display", "PvPlayfairI", "Palatino", Georgia, serif; color: #1E4FA8; white-space: nowrap; }
/* the raking shadows: striped panels on the wall, hinged at the window edge,
scaled from zero. They live under the window in paint order. */
.pv-noon__rake { position: absolute; top: 18cqi; width: 16%; height: 40cqi; background: repeating-linear-gradient(180deg, rgba(40, 36, 48, 0.34) 0 2.2cqi, rgba(40, 36, 48, 0.1) 2.2cqi, rgba(40, 36, 48, 0.1) 2.8cqi); }
.pv-noon__rake--l { left: 18%; transform-origin: 100% 0; transform: scaleX(0) skewY(8deg); }
.pv-noon__rake--r { left: 66%; transform-origin: 0 0; transform: scaleX(0) skewY(-8deg); }
.pv-noon__win { position: absolute; left: 34%; top: 15cqi; width: 32%; height: 40cqi; perspective: 90cqi; box-shadow: -2.4cqi 3cqi 0 rgba(40, 36, 48, 0.3); }
.pv-noon__sea { position: absolute; inset: 0; background: linear-gradient(180deg, #CFE3F2 0 46%, #3E6FC0 46%, #3E6FC0 49%, #1E4FA8 49%); }
.pv-noon__sail { position: absolute; left: 58%; top: 34%; width: 14%; height: 16%; background: #FAF7F2; clip-path: polygon(15% 100%, 100% 100%, 40% 0); }
.pv-noon__mullion { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.6cqi; margin-left: -0.8cqi; background: #FAF7F2; }
.pv-noon__transom { position: absolute; left: 0; right: 0; top: 50%; height: 1.4cqi; margin-top: -0.7cqi; background: #FAF7F2; }
/* the shutters: louvred cobalt panels, hinged on their outer edges */
.pv-noon__sh { position: absolute; top: 0; bottom: 0; width: 50%; box-sizing: border-box; border: 0.7cqi solid #163C82; background: repeating-linear-gradient(180deg, #1E4FA8 0 2.2cqi, #163C82 2.2cqi 2.8cqi); backface-visibility: visible; }
.pv-noon__sh--l { left: 0; transform-origin: 0 50%; transform: rotateY(0deg); }
.pv-noon__sh--r { right: 0; transform-origin: 100% 50%; transform: rotateY(0deg); }
.pv-noon__sill { position: absolute; left: 32%; top: 55cqi; width: 36%; height: 3cqi; background: #C8643B; box-shadow: -1.6cqi 2cqi 0 rgba(40, 36, 48, 0.3); }
.pv-noon__book { position: absolute; left: 0; right: 0; top: 60.5cqi; margin: 0; text-align: center; font: 500 5.8cqi/1 "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.04em; color: #1E4FA8; text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 0.06em; opacity: 0; }
.pv-noon__branch { position: absolute; right: -3%; top: -1.5cqi; width: 36%; aspect-ratio: 120 / 90; transform-origin: 100% 0; transform: rotate(0deg); }
.pv-noon__leaf { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pv-noon__leaf--shadow { transform: translate(-4cqi, 5cqi); filter: brightness(0) opacity(0.3); }
.pv-noon__twig { fill: none; stroke: #7A8450; stroke-width: 3; stroke-linecap: round; }
.pv-noon__lf { fill: #7A8450; }
.pv-noon__lf--dk { fill: #5E6A3A; }
.pv-noon__lemon { fill: #F4D35E; }
@media (prefers-reduced-motion: no-preference) {
.pv-noon__sh--l { animation: pv-noon-openl 7s infinite; }
.pv-noon__sh--r { animation: pv-noon-openr 7s infinite; }
.pv-noon__rake--l { animation: pv-noon-rakel 7s infinite; }
.pv-noon__rake--r { animation: pv-noon-raker 7s infinite; }
.pv-noon__book { animation: pv-noon-book 7s infinite; }
.pv-noon__branch { animation: pv-noon-sway 7s ease-in-out infinite; }
/* unhurried swing: closed, out past flat against the wall, hold, back */
@keyframes pv-noon-openl {
0%, 21% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(0.5, 0, 0.25, 1); }
50%, 80% { transform: rotateY(-168deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: rotateY(0deg); }
}
@keyframes pv-noon-openr {
0%, 21% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(0.5, 0, 0.25, 1); }
50%, 80% { transform: rotateY(168deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: rotateY(0deg); }
}
/* the shadow throws long while the panel is angled to the sun, then settles
tight under the open shutter */
@keyframes pv-noon-rakel {
0%, 21% { transform: scaleX(0) skewY(8deg); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
36% { transform: scaleX(1.9) skewY(8deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
50%, 80% { transform: scaleX(1) skewY(8deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: scaleX(0) skewY(8deg); }
}
@keyframes pv-noon-raker {
0%, 21% { transform: scaleX(0) skewY(-8deg); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
36% { transform: scaleX(1.9) skewY(-8deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
50%, 80% { transform: scaleX(1) skewY(-8deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
100% { transform: scaleX(0) skewY(-8deg); }
}
@keyframes pv-noon-book {
0%, 44% { opacity: 0; }
54%, 78% { opacity: 1; }
88%, 100% { opacity: 0; }
}
@keyframes pv-noon-sway {
0% { transform: rotate(0deg); }
30% { transform: rotate(1.6deg); }
65% { transform: rotate(-1.2deg); }
100% { transform: rotate(0deg); }
}
}
/* ---- SCRAPBOOK: the cursor peels a star sticker onto the photo, tears washi and tapes down a card ---- */
/* Previews v2 (2026-09-26), row 49. Resting frame IS the poster: a kraft page,
a tilted polaroid of a blue azulejo wall with a terracotta roofline, pink
washi across its corner, "Lisbon, day 3!" written large and crooked on the
right, a strip of blue washi at the top edge, and a white sticker sheet
bottom-left with one pink star still on it. The hero moment: the pointer
peels the star (it curls and throws a shadow), carries it onto the photo
and squishes it flat; then a strip of blue washi tears out in jerks and
tapes down a READ MORE card that drops in crooked. 8s cycle; the card and
sticker lift off and float back to where they started. */
.pv-pile { background: #C8A97E; container-type: inline-size; }
.pv-pile__pola { position: absolute; left: 7%; top: 5cqi; width: 36cqi; height: 42cqi; box-sizing: border-box; padding: 2.5cqi 2.5cqi 7cqi; background: #F7F1E3; transform: rotate(-5deg); box-shadow: 0.6cqi 0.9cqi 0 rgba(43, 43, 43, 0.18); }
.pv-pile__photo { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, transparent 0 76%, #C8643B 76%, #C8643B 82%, #A64F2E 82%), repeating-linear-gradient(90deg, transparent 0 5cqi, #F7F1E3 5cqi 5.6cqi), repeating-linear-gradient(180deg, #2B5FA8 0 5cqi, #F7F1E3 5cqi 5.6cqi); }
.pv-pile__washi { position: absolute; height: 5cqi; opacity: 0.9; }
.pv-pile__washi--a { left: 2%; top: 3cqi; width: 20cqi; background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0.7cqi, transparent 0.8cqi) 0 0 / 2.5cqi 2.5cqi, #F4B6C2; transform: rotate(-38deg); }
.pv-pile__washi--b { left: 77%; top: 1.5cqi; width: 21cqi; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0 1.2cqi, transparent 1.2cqi 2.4cqi), #A9D6E5; transform: rotate(31deg); }
.pv-pile__hand { position: absolute; left: 50%; top: 6cqi; width: 40%; margin: 0; font: 600 11.5cqi/0.95 "Caveat", "Bradley Hand", "Comic Sans MS", cursive; color: #2B2B2B; transform: rotate(-5deg); }
.pv-pile__sheet { position: absolute; left: 6%; top: 55cqi; width: 24cqi; height: 16cqi; background: #FFFFFF; border-radius: 1cqi; transform: rotate(3deg); box-shadow: 0.4cqi 0.6cqi 0 rgba(43, 43, 43, 0.15); }
/* the ghost of the star stays on the sheet once it has been peeled */
.pv-pile__sheet i { position: absolute; left: 3cqi; top: 3cqi; width: 10cqi; height: 10cqi; background: rgba(43, 43, 43, 0.1); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
/* the card: off the bottom of the page at rest */
.pv-pile__card { position: absolute; left: 52%; top: 30cqi; width: 40%; height: 22cqi; box-sizing: border-box; background: #F7F1E3; border: 0.4cqi solid rgba(43, 43, 43, 0.08); box-shadow: 0.5cqi 0.7cqi 0 rgba(43, 43, 43, 0.18); display: grid; place-items: center; font: 400 6.2cqi/1 "Special Elite", "Courier New", monospace; letter-spacing: 0.1em; color: #2B2B2B; transform: translateY(60cqi) rotate(14deg); }
/* the tape: torn end, grows from its left edge */
.pv-pile__tape { position: absolute; left: 58%; top: 28cqi; width: 26cqi; height: 5cqi; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0 1.2cqi, transparent 1.2cqi 2.4cqi), rgba(169, 214, 229, 0.92); clip-path: polygon(0 0, 96% 0, 100% 20%, 95% 45%, 100% 70%, 96% 100%, 0 100%); transform-origin: 0 50%; transform: rotate(-5deg) scaleX(0); }
/* the star: white outline star with a pink star inside */
.pv-pile__star { position: absolute; left: 9.5%; top: 58cqi; width: 10cqi; height: 10cqi; background: #FFFFFF; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: translate(0, 0) rotate(0deg) skewX(0deg) scale(1, 1); filter: drop-shadow(0 0 0 rgba(43, 43, 43, 0)); }
.pv-pile__star::before { content: ""; position: absolute; inset: 0; background: #F4B6C2; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: scale(0.76); }
/* the pointer: off-canvas at rest */
.pv-pile__cur { position: absolute; left: -15%; top: 95%; width: 6.5%; aspect-ratio: 14 / 19; opacity: 0; background: #2B2B2B; clip-path: polygon(0 0, 0 84%, 34% 66%, 52% 100%, 68% 92%, 50% 58%, 82% 56%); filter: drop-shadow(0.4cqi 0.4cqi 0 #FFFFFF); }
@media (prefers-reduced-motion: no-preference) {
.pv-pile__star { animation: pv-pile-star 8s infinite; }
.pv-pile__card { animation: pv-pile-card 8s infinite; }
.pv-pile__tape { animation: pv-pile-tape 8s infinite; }
.pv-pile__cur { animation: pv-pile-cur 8s infinite; }
/* peel (curl + shadow), carry, squish flat, hold, float back */
@keyframes pv-pile-star {
0%, 20% { transform: translate(0, 0) rotate(0deg) skewX(0deg) scale(1, 1); filter: drop-shadow(0 0 0 rgba(43, 43, 43, 0)); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
27% { transform: translate(0.6cqi, -1.2cqi) rotate(-16deg) skewX(-9deg) scale(1.08, 1.08); filter: drop-shadow(1cqi 1.6cqi 0 rgba(43, 43, 43, 0.3)); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
42% { transform: translate(15cqi, -38cqi) rotate(12deg) skewX(0deg) scale(1.1, 1.1); filter: drop-shadow(1cqi 1.6cqi 0 rgba(43, 43, 43, 0.3)); animation-timing-function: ease-in; }
46% { transform: translate(15cqi, -38cqi) rotate(12deg) skewX(0deg) scale(1.28, 0.78); filter: drop-shadow(0 0 0 rgba(43, 43, 43, 0)); animation-timing-function: ease-out; }
49% { transform: translate(15cqi, -38cqi) rotate(12deg) skewX(0deg) scale(0.94, 1.06); filter: drop-shadow(0 0 0 rgba(43, 43, 43, 0)); }
51%, 78% { transform: translate(15cqi, -38cqi) rotate(12deg) skewX(0deg) scale(1, 1); filter: drop-shadow(0 0 0 rgba(43, 43, 43, 0)); animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
90% { transform: translate(6cqi, -14cqi) rotate(-20deg) skewX(0deg) scale(1.05, 1.05); filter: drop-shadow(1cqi 1.6cqi 0 rgba(43, 43, 43, 0.25)); animation-timing-function: ease-in-out; }
100% { transform: translate(0, 0) rotate(0deg) skewX(0deg) scale(1, 1); filter: drop-shadow(0 0 0 rgba(43, 43, 43, 0)); }
}
/* drop in with a bounce, sit crooked, lift away */
@keyframes pv-pile-card {
0%, 54% { transform: translateY(60cqi) rotate(14deg); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1.2); }
60% { transform: translateY(-1.5cqi) rotate(1.5deg); animation-timing-function: ease-out; }
63%, 82% { transform: translateY(0) rotate(3deg); animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1); }
92%, 100% { transform: translateY(60cqi) rotate(14deg); }
}
/* tears out in five jerks, holds, pulls back */
@keyframes pv-pile-tape {
0%, 62% { transform: rotate(-5deg) scaleX(0); animation-timing-function: steps(5, end); }
68%, 82% { transform: rotate(-5deg) scaleX(1); animation-timing-function: ease-in; }
88%, 100% { transform: rotate(-5deg) scaleX(0); }
}
/* pointer: in from the left, onto the star, up to the photo, across to
drag the tape, off to the right; a hidden jump back to the left */
@keyframes pv-pile-cur {
0%, 10% { left: -15%; top: 95%; opacity: 0; }
12% { left: -10%; top: 92%; opacity: 1; animation-timing-function: cubic-bezier(0.3, 0.6, 0.3, 1); }
20% { left: 14%; top: 80%; opacity: 1; }
27% { left: 15%; top: 77%; opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
42%, 51% { left: 30%; top: 31%; opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
56%, 62% { left: 60%; top: 40%; opacity: 1; animation-timing-function: steps(5, end); }
68% { left: 84%; top: 36%; opacity: 1; animation-timing-function: ease-in; }
76% { left: 112%; top: 30%; opacity: 1; }
77% { left: 112%; top: 30%; opacity: 0; }
78%, 100% { left: -15%; top: 95%; opacity: 0; }
}
}
/* ---- SOUTHERN GOTHIC: heat haze ripples, the inn's paint flakes off an older sign, kudzu takes a nav link ---- */
/* Previews v2 (2026-09-26), row 52. Resting frame IS the poster: sun-bleached
clapboard, a faded river photo in a weathered frame, "Bell River Inn" in a
Caslon-ish serif over ghost letters, three quiet nav links, kudzu already
in the bottom-left corner, everything humid and low contrast. Hero: a
shimmer drifts up the page for the whole loop; the newer teal paint peels
from the left in a ragged edge to expose FEED & SEED underneath, then the
kudzu on the right creeps up and over the Supper link. Slow, lingering.
8s; the page over-exposes to cream and dissolves back to frame 0. */
.pv-haze { container-type: inline-size; background: #EDE6D6; }
/* clapboard lives on a child: cqi on the root would resolve against the viewport */
.pv-haze__wall { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, #EDE6D6 0 9cqi, #E4DCCB 9cqi 9.6cqi, #CFC7B7 9.6cqi 10cqi); }
/* the photo: sky, river band, a dark tree mass, all pulled toward grey */
.pv-haze__photo { position: absolute; left: 7%; top: 12%; width: 32%; aspect-ratio: 4 / 5; box-sizing: border-box; border: 1.8cqi solid #A8A195; box-shadow: inset 0 0 0 1.2cqi #EDE6D6; rotate: -1.5deg;
background: radial-gradient(ellipse 34% 30% at 72% 30%, #6B7360 0 60%, rgba(107, 115, 96, 0) 62%), linear-gradient(180deg, #C4CFC9 0 44%, #7E9C97 44% 62%, #A59F8B 62% 100%); filter: saturate(0.7) contrast(0.85); }
.pv-haze__sign { position: absolute; left: 44%; top: 12%; width: 54%; height: 30%; }
.pv-haze__old { position: absolute; left: 0; top: 24%; margin: 0; font: 700 6.2cqi/1 "Libre Caslon Text", Georgia, "Times New Roman", serif; letter-spacing: 0.08em; color: #A8A195; rotate: -2deg; white-space: nowrap; }
/* the newer paint, clipped by a ragged edge that sits just off the left at rest */
.pv-haze__new { position: absolute; left: 0; top: 0; margin: 0; font: 400 8cqi/1.05 "Libre Caslon Text", Georgia, "Times New Roman", serif; color: #7E9C97; white-space: nowrap;
clip-path: polygon(-3% 0, 100% 0, 100% 100%, -3% 100%, -3% 85%, -3% 70%, -3% 55%, -3% 40%, -3% 25%, -3% 10%); }
.pv-haze__nav { position: absolute; left: 47%; top: 50%; margin: 0; display: grid; gap: 1.2cqi; font: italic 400 6.5cqi/1.2 "Libre Caslon Text", Georgia, "Times New Roman", serif; color: #4A5240; opacity: 0.85; }
.pv-haze__nav span { border-bottom: 0.3cqi dotted #A8A195; width: max-content; }
.pv-haze__vine { position: absolute; }
.pv-haze__vine--a { left: -3%; bottom: -4%; width: 32cqi; height: 32cqi; }
/* the right vine is rooted in the corner and small; growth is a scale from that corner */
.pv-haze__vine--b { right: -4%; bottom: -6%; width: 46cqi; height: 46cqi; transform-origin: 100% 100%; scale: 0.55; }
/* heat: faint horizontal bands, overlay-blended, tall enough to drift a full period */
.pv-haze__shimmer { position: absolute; left: -10%; top: -20%; width: 120%; height: 140%; pointer-events: none; mix-blend-mode: overlay; translate: 0 0; transform: skewX(0deg);
background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 4cqi, rgba(255, 255, 255, 0.26) 4cqi 7cqi, rgba(74, 82, 64, 0.08) 7cqi 9cqi, rgba(255, 255, 255, 0) 9cqi 12cqi); }
.pv-haze__veil { position: absolute; inset: 0; background: #EDE6D6; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.pv-haze__shimmer { animation: pv-haze-ripple 8s linear infinite; }
.pv-haze__new { animation: pv-haze-peel 8s infinite; }
.pv-haze__vine--b { animation: pv-haze-creep 8s infinite; }
.pv-haze__veil { animation: pv-haze-bleach 8s infinite; }
/* the bands rise one 12cqi period per loop and lean side to side; the pattern
is periodic so the jump back at 100% is invisible */
@keyframes pv-haze-ripple {
0% { translate: 0 0; transform: skewX(0deg); }
25% { translate: 0 -3cqi; transform: skewX(2.5deg); }
50% { translate: 0 -6cqi; transform: skewX(0deg); }
75% { translate: 0 -9cqi; transform: skewX(-2.5deg); }
99.9% { translate: 0 -12cqi; transform: skewX(0deg); animation-timing-function: steps(1, end); }
100% { translate: 0 0; transform: skewX(0deg); }
}
/* paint flakes from the left in a ragged line; comes back under the veil */
@keyframes pv-haze-peel {
0%, 19% { clip-path: polygon(-3% 0, 100% 0, 100% 100%, -3% 100%, -3% 85%, -3% 70%, -3% 55%, -3% 40%, -3% 25%, -3% 10%); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.5); }
40% { clip-path: polygon(22% 0, 100% 0, 100% 100%, 30% 100%, 18% 85%, 34% 70%, 20% 55%, 38% 40%, 26% 25%, 33% 10%); animation-timing-function: cubic-bezier(0.3, 0.4, 0.4, 1); }
62%, 90% { clip-path: polygon(74% 0, 100% 0, 100% 100%, 80% 100%, 62% 85%, 86% 70%, 66% 55%, 90% 40%, 70% 25%, 82% 10%); animation-timing-function: ease-in-out; }
100% { clip-path: polygon(-3% 0, 100% 0, 100% 100%, -3% 100%, -3% 85%, -3% 70%, -3% 55%, -3% 40%, -3% 25%, -3% 10%); }
}
@keyframes pv-haze-creep {
0%, 58% { scale: 0.55; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
82%, 90% { scale: 1.15; animation-timing-function: ease-in-out; }
100% { scale: 0.55; }
}
/* the cross-dissolve: the humid page burns out to cream and comes back as the poster */
@keyframes pv-haze-bleach {
0%, 86% { opacity: 0; animation-timing-function: ease-in; }
94% { opacity: 0.92; animation-timing-function: ease-out; }
100% { opacity: 0; }
}
}
/* ---- COTTAGECORE: a breeze turns the section; gingham ripples, flowers bend, the card flips ---- */
/* Previews v2 (2026-09-26), row 14, farm bakery. Resting frame IS the poster:
sage-on-linen gingham, a poppy, a daisy and a sprig standing along the
bottom, a ruled recipe card pinned mid-frame reading "Fresh today" with two
section dots under it, the first one filled. Hero: a breeze crosses left to
right — the gingham is cut into five strips that lift and settle in turn
like cloth, the flowers bow and spring back, two petals blow through, and
the card lifts and flips over to "Today's loaf" as the second dot fills.
Loop: after a rest in drifting dappled light a second breeze crosses and
flips the first card back. 8s, ease-in-out everywhere. */
.pv-ging { background: #F3EDE2; container-type: inline-size; font-family: "Fraunces", "Georgia", "Palatino", serif; }
/* the cloth: five strips of one continuous gingham (10cqi cells, 20cqi strips, so the tile never breaks) */
.pv-ging__cloth {
position: absolute; top: -5%; height: 110%; width: 20%; left: calc(var(--i) * 20%);
translate: 0 0; scale: 1 1;
background-color: #F3EDE2;
background-image: linear-gradient(90deg, rgba(183, 196, 160, 0.62) 50%, transparent 50%), linear-gradient(rgba(183, 196, 160, 0.62) 50%, transparent 50%);
background-size: 10cqi 10cqi;
}
/* dappled light: soft butter pools, multiplied over the cloth; drifts slowly */
.pv-ging__dapple {
position: absolute; inset: -15%; pointer-events: none; mix-blend-mode: multiply; translate: 0 0;
background: radial-gradient(ellipse at 28% 30%, rgba(242, 212, 146, 0.6) 0 10cqi, transparent 22cqi),
radial-gradient(ellipse at 74% 68%, rgba(242, 212, 146, 0.5) 0 12cqi, transparent 26cqi),
radial-gradient(ellipse at 62% 18%, rgba(163, 177, 138, 0.28) 0 8cqi, transparent 18cqi);
}
/* wildflowers: inline svg, hinged at the soil line */
.pv-ging__flower { position: absolute; bottom: -2cqi; transform-origin: 50% 100%; rotate: 0deg; }
.pv-ging__flower--a { left: 4cqi; width: 18cqi; height: 44cqi; }
.pv-ging__flower--b { left: 17cqi; width: 14cqi; height: 32cqi; }
.pv-ging__flower--c { right: 3cqi; width: 16cqi; height: 40cqi; }
/* the recipe card: pinned at a slight tilt; the flipper inside does the turn */
.pv-ging__card { position: absolute; left: 32cqi; top: 15cqi; width: 44cqi; height: 31cqi; rotate: -3deg; }
.pv-ging__flip { position: absolute; left: 0; right: 0; top: 0; height: 26cqi; transform: perspective(70cqi) translateY(0) rotateY(0deg); transform-style: preserve-3d; }
.pv-ging__face {
position: absolute; inset: 0; box-sizing: border-box; display: grid; place-items: center;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
font-style: italic; font-weight: 500; font-size: 8cqi; line-height: 1; color: #C97B5A;
}
.pv-ging__face--front { background: repeating-linear-gradient(transparent 0 5.2cqi, rgba(163, 177, 138, 0.45) 5.2cqi 5.6cqi) 0 2cqi, #F3EDE2; border-top: 2.4cqi solid #C97B5A; }
.pv-ging__face--back { background: #F2D492; border-top: 2.4cqi solid #A3B18A; color: #5A4632; transform: rotateY(180deg); font: 700 10.5cqi/1 "Caveat", "Georgia", serif; }
/* section indicator: two dots, first filled = first card */
.pv-ging__dots { position: absolute; left: 0; right: 0; bottom: 0; height: 3cqi; display: flex; justify-content: center; gap: 1.6cqi; }
.pv-ging__dot { display: block; width: 2.6cqi; height: 2.6cqi; border-radius: 50%; border: 0.5cqi solid #C97B5A; box-sizing: border-box; }
.pv-ging__dot--1 { background: #C97B5A; }
.pv-ging__dot--2 { background: transparent; }
/* loose petals: off-canvas left at rest */
.pv-ging__petal { position: absolute; width: 2.8cqi; height: 1.7cqi; border-radius: 50%; left: -6%; opacity: 0; rotate: 0deg; }
.pv-ging__petal--1 { top: 30%; background: #C97B5A; }
.pv-ging__petal--2 { top: 56%; background: #F2D492; }
@media (prefers-reduced-motion: no-preference) {
.pv-ging__cloth { animation: pv-ging-ripple 8s infinite; animation-delay: calc(var(--i) * 0.16s); }
.pv-ging__flower { animation: pv-ging-bow 8s infinite; animation-delay: calc(var(--i) * 0.16s); }
.pv-ging__flip { animation: pv-ging-flip 8s infinite; }
.pv-ging__dot--1 { animation: pv-ging-dot1 8s infinite; }
.pv-ging__dot--2 { animation: pv-ging-dot2 8s infinite; }
.pv-ging__dapple { animation: pv-ging-dapple 8s infinite; }
.pv-ging__petal--1 { animation: pv-ging-petal1 8s infinite; }
.pv-ging__petal--2 { animation: pv-ging-petal2 8s infinite; }
/* breeze one 1.5-3.5s (19-44%), breeze two 5.5-7.2s (69-90%); strips and flowers trail by index */
@keyframes pv-ging-ripple {
0%, 19% { translate: 0 0; scale: 1 1; animation-timing-function: ease-in-out; }
24% { translate: 0 -2.4cqi; scale: 1 1.04; animation-timing-function: ease-in-out; }
29% { translate: 0 0.9cqi; scale: 1 0.99; animation-timing-function: ease-in-out; }
34%, 69% { translate: 0 0; scale: 1 1; animation-timing-function: ease-in-out; }
74% { translate: 0 -2.2cqi; scale: 1 1.04; animation-timing-function: ease-in-out; }
79% { translate: 0 0.8cqi; scale: 1 0.99; animation-timing-function: ease-in-out; }
84%, 100% { translate: 0 0; scale: 1 1; }
}
@keyframes pv-ging-bow {
0%, 20% { rotate: 0deg; animation-timing-function: ease-in-out; }
26% { rotate: 15deg; animation-timing-function: ease-in-out; }
32% { rotate: -5deg; animation-timing-function: ease-in-out; }
37%, 70% { rotate: 0deg; animation-timing-function: ease-in-out; }
76% { rotate: 13deg; animation-timing-function: ease-in-out; }
82% { rotate: -4deg; animation-timing-function: ease-in-out; }
87%, 100% { rotate: 0deg; }
}
@keyframes pv-ging-flip {
0%, 23% { transform: perspective(70cqi) translateY(0) rotateY(0deg); animation-timing-function: ease-in-out; }
31% { transform: perspective(70cqi) translateY(-4cqi) rotateY(90deg); animation-timing-function: ease-in-out; }
39%, 73% { transform: perspective(70cqi) translateY(0) rotateY(180deg); animation-timing-function: ease-in-out; }
81% { transform: perspective(70cqi) translateY(-4cqi) rotateY(90deg); animation-timing-function: ease-in-out; }
89%, 100% { transform: perspective(70cqi) translateY(0) rotateY(0deg); }
}
@keyframes pv-ging-dot1 { 0%, 31% { background: #C97B5A; } 31.5%, 81% { background: transparent; } 81.5%, 100% { background: #C97B5A; } }
@keyframes pv-ging-dot2 { 0%, 31% { background: transparent; } 31.5%, 81% { background: #C97B5A; } 81.5%, 100% { background: transparent; } }
@keyframes pv-ging-dapple {
0% { translate: 0 0; animation-timing-function: ease-in-out; }
50% { translate: 3cqi 1.6cqi; animation-timing-function: ease-in-out; }
100% { translate: 0 0; }
}
/* petals cross with the breeze, tumbling; parked off-canvas between crossings */
@keyframes pv-ging-petal1 {
0%, 19% { left: -6%; top: 30%; opacity: 0; rotate: 0deg; animation-timing-function: ease-in-out; }
20% { opacity: 1; }
40% { left: 104%; top: 20%; opacity: 1; rotate: 540deg; }
40.2% { left: 104%; top: 20%; opacity: 0; rotate: 540deg; }
40.5%, 70% { left: -6%; top: 30%; opacity: 0; rotate: 0deg; animation-timing-function: ease-in-out; }
71% { opacity: 1; }
89% { left: 104%; top: 20%; opacity: 1; rotate: 540deg; }
89.2% { left: 104%; top: 20%; opacity: 0; rotate: 540deg; }
89.5%, 100% { left: -6%; top: 30%; opacity: 0; rotate: 0deg; }
}
@keyframes pv-ging-petal2 {
0%, 22% { left: -6%; top: 56%; opacity: 0; rotate: 0deg; animation-timing-function: ease-in-out; }
23% { opacity: 1; }
43% { left: 104%; top: 48%; opacity: 1; rotate: -450deg; }
43.2% { left: 104%; top: 48%; opacity: 0; rotate: -450deg; }
43.5%, 72% { left: -6%; top: 56%; opacity: 0; rotate: 0deg; animation-timing-function: ease-in-out; }
73% { opacity: 1; }
90% { left: 104%; top: 48%; opacity: 1; rotate: -450deg; }
90.2% { left: 104%; top: 48%; opacity: 0; rotate: -450deg; }
90.5%, 100% { left: -6%; top: 56%; opacity: 0; rotate: 0deg; }
}
}
/* ---- STREAMLINE MODERNE: the carousel glides sideways like a streamliner, stretching at the nose, trailing chrome lines, braking smooth ---- */
/* Previews v2 (2026-09-26), row 54. Resting frame IS the poster: a cream
page, three chrome speed lines running in from the left edge, a rounded
seafoam card with a full-radius nose on its leading edge, chrome bands top
and bottom, a red pinstripe and the word AERO in Josefin Sans; three
chrome pagination dots below with the first one pinned black. Hero: the
track launches left, the card stretches at the nose, chrome trail lines
streak out from the right edge behind it, and it brakes on a long ease into
ZENITH, then STREAM. Loop: a third glide brings in a duplicate AERO card,
the pin steps home, and the track hard-cuts to 0 under an identical frame.
10s cycle. */
.pv-aero { background: #F2EAD3; container-type: inline-size; }
.pv-aero p { margin: 0; }
/* the page's speed lines: chrome, rounded, running in from the left */
.pv-aero__speed { position: absolute; left: 0; height: 1.6cqi; border-radius: 0 1cqi 1cqi 0; background: linear-gradient(to bottom, #F0F0F0, #C0C0C0 45%, #7A7A7A 60%, #C0C0C0); }
.pv-aero__s1 { top: 33%; width: 19%; } .pv-aero__s2 { top: 39%; width: 15%; } .pv-aero__s3 { top: 45%; width: 11%; }
/* trail lines behind the moving card: zero length at rest, grow from the right edge */
.pv-aero__trail { position: absolute; right: 0; height: 1.6cqi; border-radius: 1cqi 0 0 1cqi; background: linear-gradient(to bottom, #F0F0F0, #C0C0C0 45%, #7A7A7A 60%, #C0C0C0); transform: scaleX(0); transform-origin: 100% 50%; }
.pv-aero__t1 { top: 33%; width: 19%; } .pv-aero__t2 { top: 39%; width: 15%; } .pv-aero__t3 { top: 45%; width: 11%; }
/* the carousel track: one card wide, four cards long, the last a twin of the first */
.pv-aero__track { position: absolute; left: 18%; width: 64%; top: 20%; height: 52%; display: flex; transform: translateX(0); }
.pv-aero__card {
flex: none; width: 94%; margin: 0 3%; display: grid; place-items: center;
border-radius: 50% 4cqi 4cqi 50% / 50% 4cqi 4cqi 50%;
background: linear-gradient(#C1121F, #C1121F) 0 70% / 100% 0.6cqi no-repeat, #7FB7A4;
box-shadow: inset 0 1.6cqi 0 #C0C0C0, inset 0 2.2cqi 0 #7A7A7A, inset 0 -1.6cqi 0 #C0C0C0, inset 0 -2.2cqi 0 #7A7A7A;
transform: scaleX(1); transform-origin: 100% 50%;
}
/* Josefin Sans is narrower than the wide grotesk it replaces: up a size and tracked wider to hold the same footprint on the card */
.pv-aero__word { font: 600 9.5cqi/1 "Josefin Sans", "Trebuchet MS", Verdana, sans-serif; letter-spacing: 0.16em; color: #111111; padding-left: 4cqi; }
/* pagination: three chrome dots and a black pin on the active one */
.pv-aero__dots { position: absolute; left: calc(50% - 7.5cqi); top: 80%; display: flex; gap: 2cqi; }
.pv-aero__dot { width: 3cqi; height: 3cqi; border-radius: 50%; background: #C0C0C0; box-shadow: inset 0 -0.6cqi 0 #7A7A7A; }
.pv-aero__pin { position: absolute; left: calc(50% - 7.5cqi); top: 80%; width: 3cqi; height: 3cqi; border-radius: 50%; background: #111111; transform: translateX(0); }
@media (prefers-reduced-motion: no-preference) {
.pv-aero__track { animation: pv-aero-glide 10s infinite; }
.pv-aero__card { animation: pv-aero-stretch 10s infinite; }
.pv-aero__trail { animation: pv-aero-trail 10s infinite; }
.pv-aero__pin { animation: pv-aero-pin 10s steps(1) infinite; }
/* three glides, each a fast launch and a long brake; the fourth card is the first, so the cut is invisible */
@keyframes pv-aero-glide {
0%, 10% { transform: translateX(0); animation-timing-function: cubic-bezier(0.55, 0, 0.1, 1); }
28%, 40% { transform: translateX(-100%); animation-timing-function: cubic-bezier(0.55, 0, 0.1, 1); }
58%, 70% { transform: translateX(-200%); animation-timing-function: cubic-bezier(0.55, 0, 0.1, 1); }
88%, 99.9% { transform: translateX(-300%); }
100% { transform: translateX(0); }
}
/* the nose stretches on launch, compresses a touch on the brake */
@keyframes pv-aero-stretch {
0%, 10% { transform: scaleX(1); animation-timing-function: ease-out; }
14%, 22% { transform: scaleX(1.07); animation-timing-function: ease-in-out; }
28% { transform: scaleX(0.98); animation-timing-function: ease-out; }
31%, 40% { transform: scaleX(1); animation-timing-function: ease-out; }
44%, 52% { transform: scaleX(1.07); animation-timing-function: ease-in-out; }
58% { transform: scaleX(0.98); animation-timing-function: ease-out; }
61%, 70% { transform: scaleX(1); animation-timing-function: ease-out; }
74%, 82% { transform: scaleX(1.07); animation-timing-function: ease-in-out; }
88% { transform: scaleX(0.98); animation-timing-function: ease-out; }
91%, 100% { transform: scaleX(1); }
}
/* trails: out from the right edge during each glide, gone by the brake */
@keyframes pv-aero-trail {
0%, 10% { transform: scaleX(0); animation-timing-function: ease-out; }
15%, 22% { transform: scaleX(1); animation-timing-function: ease-in; }
30%, 40% { transform: scaleX(0); animation-timing-function: ease-out; }
45%, 52% { transform: scaleX(1); animation-timing-function: ease-in; }
60%, 70% { transform: scaleX(0); animation-timing-function: ease-out; }
75%, 82% { transform: scaleX(1); animation-timing-function: ease-in; }
90%, 100% { transform: scaleX(0); }
}
/* the pin steps to the next dot mid-glide; the third glide returns it home */
@keyframes pv-aero-pin {
0%, 18.9% { transform: translateX(0); }
19%, 48.9% { transform: translateX(5cqi); }
49%, 78.9% { transform: translateX(10cqi); }
79%, 100% { transform: translateX(0); }
}
}
/* ---- SOLARPUNK: daylight travels across a stained-glass dashboard and the gauge fills gold ---- */
/* Previews v2 (2026-09-26), row 51. Resting frame IS the poster: Sunward
Co-op's energy panel built like leaded glass — a dark lead frame around
fifteen irregular cells in pale green, gold, sky and terracotta tints —
with the co-op name, a big serif 52%, a half-full gauge, a sun disc high
right and a vine of buds climbing the left edge. The hero moment: a band
of coloured light (gold, leaf, sky, terracotta, multiply-blended) slides
across the panel like sun through glass; as it crosses the gauge the fill
runs to 98% and turns gold, the number swaps, and the buds unfurl into
leaves one after another. 8s cycle; the light moves on off the right, the
gauge settles back to half and the leaves fold — frame 0. Type: Nunito
for the UI sans (800 title, 600 caption), Fraunces 500 as the soft serif
for the big number. */
.pv-grow { background: #A8DADC; container-type: inline-size; }
.pv-grow__sun { position: absolute; right: -7cqi; top: -9cqi; width: 30cqi; height: 30cqi; border-radius: 50%; background: #F2C14E; }
/* the panel: lead frame, cell grid with lead gaps */
.pv-grow__panel { position: absolute; left: 12cqi; top: 8cqi; width: 76cqi; height: 60cqi; box-sizing: border-box; border: 1.6cqi solid #3D3A2E; border-radius: 2.4cqi; background: #3D3A2E; overflow: hidden; }
.pv-grow__cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: 0.9cqi; }
.pv-grow__cells i { display: block; background: #FFFFFF; }
.pv-grow__cells i:nth-child(1) { grid-column: span 2; background: #DCE8CF; }
.pv-grow__cells i:nth-child(2) { background: #FBEBC0; }
.pv-grow__cells i:nth-child(3) { grid-column: span 2; }
.pv-grow__cells i:nth-child(4) { background: #DDEFF0; }
.pv-grow__cells i:nth-child(5) { background: #DDEFF0; }
.pv-grow__cells i:nth-child(6) { grid-column: span 3; }
.pv-grow__cells i:nth-child(7) { grid-column: span 2; background: #FBEBC0; }
.pv-grow__cells i:nth-child(8) { grid-column: span 2; }
.pv-grow__cells i:nth-child(9) { grid-column: span 2; background: #F2D6C8; }
.pv-grow__cells i:nth-child(10) { background: #DCE8CF; }
.pv-grow__cells i:nth-child(12) { background: #FBEBC0; }
.pv-grow__cells i:nth-child(13) { grid-column: span 2; }
.pv-grow__cells i:nth-child(14) { grid-column: span 2; background: #DCE8CF; }
.pv-grow__cells i:nth-child(15) { background: #DCE8CF; }
/* the dashboard on the glass */
.pv-grow__title { position: absolute; left: 4cqi; top: 3cqi; margin: 0; font: 800 4.2cqi/1 "Nunito", "Trebuchet MS", Verdana, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #3D3A2E; }
.pv-grow__num { position: absolute; left: 3.6cqi; top: 9cqi; width: 50cqi; height: 20cqi; margin: 0; font: 500 19cqi/1 "Fraunces", Georgia, "Times New Roman", serif; color: #3F5F2C; letter-spacing: -0.03em; }
.pv-grow__num b { position: absolute; left: 0; top: 0; font-weight: 500; }
.pv-grow__num--a { opacity: 1; }
.pv-grow__num--b { opacity: 0; color: #B0861A; }
.pv-grow__cap { position: absolute; left: 4cqi; top: 29.5cqi; font: 600 3.4cqi/1 "Nunito", "Trebuchet MS", Verdana, sans-serif; letter-spacing: 0.08em; color: #3D3A2E; }
.pv-grow__gauge { position: absolute; left: 4cqi; right: 4cqi; bottom: 5cqi; height: 7cqi; box-sizing: border-box; border: 1cqi solid #3D3A2E; border-radius: 3.5cqi; background: #FFFFFF; overflow: hidden; }
.pv-grow__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 0 2.5cqi 2.5cqi 0; background: #6A994E; }
/* the vine: a stem up the left of the frame, seven buds that unfurl from the stem end */
.pv-grow__vine { position: absolute; left: 10.2cqi; top: 14cqi; width: 1cqi; height: 52cqi; border-left: 0.9cqi solid #4E7A3A; border-radius: 0.5cqi; }
.pv-grow__leaf { position: absolute; width: 6.5cqi; height: 6.5cqi; border-radius: 0 100% 0 100%; background: #6A994E; box-shadow: inset 0.6cqi -0.6cqi 0 #4E7A3A; transform-origin: 0% 100%; transform: rotate(var(--r)) scaleX(var(--m)) scale(0.35); }
/* the light: a tall tilted band of glass colours, multiply-blended, parked off the left edge */
.pv-grow__light { position: absolute; left: 26cqi; top: -55cqi; width: 34cqi; height: 190cqi; background: linear-gradient(90deg, rgba(242, 193, 78, 0) 0%, #F2C14E 18%, #6A994E 42%, #A8DADC 62%, #C8643B 82%, rgba(200, 100, 59, 0) 100%); mix-blend-mode: multiply; opacity: 0.6; pointer-events: none; transform: translateX(-95cqi) rotate(18deg); }
@media (prefers-reduced-motion: no-preference) {
.pv-grow__light { animation: pv-grow-light 8s infinite; }
.pv-grow__fill { animation: pv-grow-fill 8s infinite; }
.pv-grow__num--a { animation: pv-grow-numa 8s infinite; }
.pv-grow__num--b { animation: pv-grow-numb 8s infinite; }
.pv-grow__leaf { animation: pv-grow-unfurl 8s infinite; animation-delay: calc(var(--k) * 0.14s); }
/* left to right in five unhurried seconds, hold off-right, step back to the left at the very end (both ends are off-canvas) */
@keyframes pv-grow-light {
0%, 12% { transform: translateX(-95cqi) rotate(18deg); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
64%, 99% { transform: translateX(95cqi) rotate(18deg); animation-timing-function: steps(1, end); }
100% { transform: translateX(-95cqi) rotate(18deg); }
}
@keyframes pv-grow-fill {
0%, 34% { width: 50%; background: #6A994E; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
58%, 82% { width: 100%; background: #F2C14E; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
100% { width: 50%; background: #6A994E; }
}
@keyframes pv-grow-numa {
0%, 48% { opacity: 1; }
54%, 86% { opacity: 0; }
92%, 100% { opacity: 1; }
}
@keyframes pv-grow-numb {
0%, 48% { opacity: 0; }
54%, 86% { opacity: 1; }
92%, 100% { opacity: 0; }
}
/* bud to leaf with a little overshoot, hold, fold back */
@keyframes pv-grow-unfurl {
0%, 38% { transform: rotate(var(--r)) scaleX(var(--m)) scale(0.35); animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1.2); }
50% { transform: rotate(var(--r)) scaleX(var(--m)) scale(1.12); animation-timing-function: ease-out; }
56%, 80% { transform: rotate(var(--r)) scaleX(var(--m)) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1); }
88%, 100% { transform: rotate(var(--r)) scaleX(var(--m)) scale(0.35); }
}
}
/* ---- DEVELOPER DARK: a deploy list on a charcoal workspace; the loop is state changing ---- */
/* Resting frame (the poster): a sidebar, a crumb and a command-palette hint,
underline tabs, three deploy rows whose state reads by glyph and word as
well as colour, and one log line. The record's motion claim is that motion
communicates state, progress and data change, with no universal timing, so
the loop (8s) is the tool doing its job: the Building row's progress fills
in uneven steps and resolves to Ready (glyph, word and colour swap
together, never colour alone), the log appends retry 2/3 and then a 200,
the ⌘K hint pulses once. No glow, scanlines, glitch or typed characters:
the record grades those unreliable. Everything eases back to the poster. */
/* cqi on the root would resolve against the viewport: sizes live on the children */
.pv-devdark { background: #0B0C0E; container-type: inline-size; color: #E6E9ED; font: 400 12px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
.pv-devdark__side { position: absolute; left: 0; top: 0; bottom: 0; width: 16cqi; background: #111316; border-right: 1px solid #252A30; display: flex; flex-direction: column; gap: 2.4cqi; padding: 5cqi 3cqi; box-sizing: border-box; }
.pv-devdark__side b { display: block; height: 1.4cqi; width: 80%; background: #353B43; }
.pv-devdark__side b.pv-devdark__on { background: #B4BBC4; width: 100%; }
.pv-devdark__top { position: absolute; left: 20cqi; right: 4cqi; top: 4cqi; font-size: 3.6cqi; display: flex; justify-content: space-between; align-items: center; }
.pv-devdark__crumb { color: #B4BBC4; }
.pv-devdark__crumb b { color: #E6E9ED; font-weight: 500; }
.pv-devdark__kbd { font: 500 2.8cqi/1 ui-monospace, "SF Mono", Menlo, monospace; color: #B4BBC4; border: 1px solid #353B43; border-bottom-width: 2px; border-radius: 0.8cqi; padding: 0.6cqi 1.2cqi; }
.pv-devdark__tabs { position: absolute; left: 20cqi; right: 4cqi; top: 13cqi; font-size: 3.4cqi; display: flex; gap: 4cqi; border-bottom: 1px solid #252A30; padding-bottom: 1.6cqi; color: #8B939E; }
.pv-devdark__tabs b { color: #E6E9ED; font-weight: 500; box-shadow: 0 1.9cqi 0 -1.5cqi #E6E9ED; }
.pv-devdark__list { position: absolute; left: 20cqi; right: 4cqi; top: 21cqi; display: block; }
.pv-devdark__row { display: grid; grid-template-columns: 24cqi 1fr auto; gap: 2cqi; align-items: center; height: 8.6cqi; border-bottom: 1px solid #252A30; font-size: 3.2cqi; white-space: nowrap; overflow: hidden; }
.pv-devdark__m { font: 400 2.8cqi/1 ui-monospace, "SF Mono", Menlo, monospace; color: #8B939E; }
.pv-devdark__ok { color: #3FB97A; }
.pv-devdark__wa { color: #E0A43A; }
.pv-devdark__er { color: #F07070; }
.pv-devdark__log { position: absolute; left: 20cqi; right: 0; bottom: 0; height: 10cqi; line-height: 10cqi; display: block; padding-left: 2cqi; background: #111316; border-top: 1px solid #252A30; font: 400 2.8cqi/1 ui-monospace, "SF Mono", Menlo, monospace; color: #B4BBC4; white-space: nowrap; overflow: hidden; }
.pv-devdark__log b { color: #F07070; font-weight: 400; }
/* host shelves style bare (the homepage's Just-added row sets a card-title
font and a hover underline on every b); the preview's b are its own */
.pv.pv-devdark.pv-devdark b { font-size: inherit; line-height: inherit; font-family: inherit; text-decoration: none; }
.pv.pv-devdark.pv-devdark .pv-devdark__log b { font-weight: 400; }
.pv-devdark__row--b { position: relative; }
.pv-devdark__st { display: grid; }
.pv-devdark__st > span { grid-area: 1 / 1; }
.pv-devdark__done { opacity: 0; }
.pv-devdark__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #E0A43A; transform: scaleX(0); transform-origin: 0 50%; }
.pv-devdark__feed { display: block; }
.pv-devdark__feed > span { display: block; height: 10cqi; line-height: 10cqi; }
.pv-devdark__log b.pv-devdark__200 { color: #3FB97A; }
@media (prefers-reduced-motion: no-preference) {
.pv-devdark__bar { animation: pv-devdark-bar 8s linear infinite; }
.pv-devdark__wa { animation: pv-devdark-was 8s linear infinite; }
.pv-devdark__done { animation: pv-devdark-now 8s linear infinite; }
.pv-devdark__row--b { animation: pv-devdark-sel 8s ease-out infinite; }
.pv-devdark__feed { animation: pv-devdark-feed 8s cubic-bezier(.2,.7,.2,1) infinite; }
.pv-devdark__kbd { animation: pv-devdark-kbd 8s ease-in-out infinite; }
/* progress arrives in uneven steps, the way a build reports it */
@keyframes pv-devdark-bar {
0%, 10% { transform: scaleX(0); opacity: 1; }
16% { transform: scaleX(.22); } 19% { transform: scaleX(.3); }
26% { transform: scaleX(.55); } 30% { transform: scaleX(.58); }
36% { transform: scaleX(.86); } 40% { transform: scaleX(1); opacity: 1; }
44%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes pv-devdark-was { 0%, 40.9% { opacity: 1; } 41%, 91% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes pv-devdark-now { 0%, 40.9% { opacity: 0; } 41%, 91% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes pv-devdark-sel { 0%, 40.9% { background: transparent; } 41% { background: #1A1E23; } 58%, 100% { background: transparent; } }
/* a new line lands at the foot and the old one scrolls up, twice */
@keyframes pv-devdark-feed {
0%, 47% { transform: translateY(0); opacity: 1; }
50%, 59% { transform: translateY(-10cqi); }
62%, 90% { transform: translateY(-20cqi); opacity: 1; }
93% { transform: translateY(-20cqi); opacity: 0; }
94% { transform: translateY(0); opacity: 0; }
97%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes pv-devdark-kbd {
0%, 68% { border-color: #353B43; color: #B4BBC4; background: transparent; }
72%, 76% { border-color: #8B939E; color: #E6E9ED; background: #1A1E23; }
82%, 100% { border-color: #353B43; color: #B4BBC4; background: transparent; }
}
}
/* ---- FASHION EDITORIAL: the cover — condensed type behind the figure, one coat. The loop is a crop closing on the collar and opening again. */
.pv-fe { background: #0F2B2A; container-type: inline-size; color: #F1E6CF; }
.pv-fe__meta { position: absolute; left: 4cqi; top: 4cqi; font: 400 3.2cqi/1 ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase; letter-spacing: .04em; z-index: 3; }
.pv-fe__type { position: absolute; left: 3cqi; top: 10cqi; z-index: 1; display: block; font: 400 21cqi/0.84 "PvAnton", "Arial Narrow", Impact, sans-serif; text-transform: uppercase; letter-spacing: -0.01em; }
.pv-fe__type b { display: block; font-weight: 400; }
/* the homepage's Just-added row sets a card-title font and hover underline on bare b; keep the cover's */
.pv.pv-fe.pv-fe .pv-fe__type b { font: inherit; text-decoration: none; }
.pv-fe__l2 { padding-left: 12cqi; }
.pv-fe__fig { position: absolute; right: 8cqi; top: -12cqi; width: 46cqi; height: auto; z-index: 2; transform-origin: 50% 22%; }
.pv-fe__dek { position: absolute; left: 4cqi; bottom: 5cqi; z-index: 3; font: italic 300 4.4cqi/1.1 Georgia, "Times New Roman", serif; }
@media (prefers-reduced-motion: no-preference) {
.pv-fe__fig { animation: pv-fe-crop 7s ease-in-out infinite; }
@keyframes pv-fe-crop { 0%, 30% { transform: none; } 45%, 75% { transform: scale(1.9) translateY(9%); } 90%, 100% { transform: none; } }
}
/* ---- INTERNETCORE: one homepage in a system window. The loop steps from 1998 (narrow, centred, tiled) to 2026 (the same grammar at display scale, flat ground). */
.pv-ic { background: #6f7f84; container-type: inline-size; }
.pv-ic__win { position: absolute; left: 8cqi; right: 8cqi; top: 10cqi; bottom: 16cqi; display: block; background: #c0c0c0; padding: .8cqi; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #d4d0c8, inset -2px -2px 0 #808080, inset 2px 2px 0 #fff; }
.pv-ic__t { display: block; background: #000080; color: #fff; font: 700 3cqi/1 Verdana, Tahoma, sans-serif; padding: 1.2cqi 1.6cqi; white-space: nowrap; overflow: hidden; }
.pv-ic__page { position: absolute; left: .8cqi; right: .8cqi; top: 6.2cqi; bottom: .8cqi; display: block; background: repeating-conic-gradient(#dcd7ef 0 25%, #e9e6f5 0 50%) 0 0 / 3cqi 3cqi; text-align: center; padding: 3cqi 18cqi; color: #000; font-family: "Times New Roman", Times, serif; }
.pv-ic__h { display: block; background: #fff; font: 700 5cqi/1.1 "Times New Roman", Times, serif; padding: 2cqi 0 1cqi; }
.pv-ic__nav { display: block; background: #fff; font: 3.2cqi/1.4 "Times New Roman", Times, serif; color: #0000ee; padding-bottom: 1cqi; }
.pv-ic__nav u { margin: 0 .6cqi; }
.pv-ic__v { color: #551a8b; }
.pv-ic__ctr { display: inline-block; margin-top: 2cqi; background: #000; color: #0f0; font: 3cqi/1 "Courier New", monospace; padding: .6cqi 1cqi; letter-spacing: .3cqi; }
.pv-ic__era { position: absolute; left: 8cqi; bottom: 5cqi; font: 3.4cqi/1 Verdana, Tahoma, sans-serif; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
.pv-ic__page { animation: pv-ic-quote 6s steps(1) infinite; }
.pv-ic__h { animation: pv-ic-h 6s steps(1) infinite; }
@keyframes pv-ic-quote { 0%, 45% { background-size: 3cqi 3cqi; padding: 3cqi 18cqi; text-align: center; } 50%, 100% { background: #fff; padding: 3cqi 4cqi; text-align: left; } }
@keyframes pv-ic-h { 0%, 45% { font: 700 5cqi/1.1 "Times New Roman", Times, serif; } 50%, 100% { font: 400 10cqi/.95 "Times New Roman", Times, serif; letter-spacing: -.02em; } }
}
/* ---- RETROFUTURISM: the grey instrument, the two time colours and the time ruler. The loop moves the past viewpoint; the imagined future travels with it. */
.pv-rf { background: #E3E5E1; container-type: inline-size; color: #101214; }
.pv-rf__meta { position: absolute; left: 5cqi; top: 5cqi; font: italic 400 4.2cqi/1 Georgia, "Times New Roman", serif; color: #454A4D; }
.pv-rf__h { position: absolute; left: 5cqi; top: 13cqi; font: 400 17cqi/0.84 "Anton", "Arial Narrow", Impact, sans-serif; text-transform: uppercase; letter-spacing: -0.005em; }
.pv-rf__h b { display: block; font-weight: 400; }
.pv-rf__p { color: #8B3A1C; } .pv-rf__f { color: #2230B0; }
.pv-rf__ruler { position: absolute; left: 5cqi; right: 5cqi; bottom: 4cqi; width: 90cqi; height: auto; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
.pv-rf__era { animation: pv-rf-era 8s steps(1) infinite; }
@keyframes pv-rf-era { 0%, 24% { transform: none; } 25%, 49% { transform: translateX(60px); } 50%, 74% { transform: translateX(120px); } 75%, 100% { transform: translateX(150px); } }
}
/* ---- BAUHAUS: the curriculum rings over a field of discipline cards; the filled ring travels from the outer course to the centre. No primaries. */
.pv-bh { background: #ECE6DA; container-type: inline-size; color: #1A1916; }
.pv-bh__meta { position: absolute; left: 4cqi; top: 4cqi; font: 400 3cqi/1 ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase; letter-spacing: .02em; }
.pv-bh__t { position: absolute; left: 3.4cqi; top: 9cqi; font: 800 17cqi/0.85 "Archivo Black", "Arial Black", system-ui, sans-serif; letter-spacing: -0.04em; }
.pv-bh__ring { position: absolute; right: 4cqi; top: 4cqi; width: 22cqi; height: 22cqi; }
.pv-bh__ring circle { stroke: #1A1916; stroke-width: 2; fill: #ECE6DA; }
.pv-bh__r1 { fill: #1A1916 !important; }
.pv-bh__f { position: absolute; left: 4cqi; right: 4cqi; bottom: 4cqi; height: 28cqi; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: 1fr 1fr; gap: 1.2cqi; }
.pv-bh__f i { display: block; border: 1px dashed #6B665C; }
.pv-bh__slot { grid-row: span 2; border-style: solid !important; border-color: #1A1916 !important; background: repeating-linear-gradient(135deg, rgba(26,25,22,.2) 0 1px, transparent 1px 2cqi), #E2DACB; }
.pv-bh__ref { grid-column: span 2; border-style: solid !important; border-color: #1A1916 !important; background: #F7F4EE; }
.pv-bh__dk { background: #1C1B18; border-color: #1C1B18 !important; }
@media (prefers-reduced-motion: no-preference) {
.pv-bh__r1 { animation: pv-bh-r1 6s steps(1, end) infinite; }
.pv-bh__r2 { animation: pv-bh-r2 6s steps(1, end) infinite; }
.pv-bh__r3 { animation: pv-bh-r3 6s steps(1, end) infinite; }
@keyframes pv-bh-r1 { 0% { fill: #1A1916; } 33.3%, 100% { fill: #ECE6DA; } }
@keyframes pv-bh-r2 { 0% { fill: #ECE6DA; } 33.3% { fill: #1A1916; } 66.6%, 100% { fill: #ECE6DA; } }
@keyframes pv-bh-r3 { 0%, 33.3% { fill: #ECE6DA; } 66.6%, 100% { fill: #1A1916; } }
}
/* ---- QUIET LUXURY: the viewing-distance stepper — the frame closes from the folded throw onto its hand-closed edge and opens again; the relative label changes with it. Resting frame: ×1, the whole throw. */
.pv-ql { background: #F2F1EE; container-type: inline-size; color: #141517; overflow: hidden; }
.pv-ql__fig { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 47.6%; }
.pv-ql__meta { position: absolute; left: 4cqi; top: 4cqi; z-index: 2; font: 400 5.6cqi/1 Georgia, "Times New Roman", serif; }
.pv-ql__x { position: absolute; right: 4cqi; top: 4.6cqi; z-index: 2; font: 500 3cqi/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
.pv-ql__x b { font-weight: 500; }
.pv-ql__x4 { display: none; }
.pv-ql__dek { position: absolute; left: 4cqi; bottom: 4cqi; z-index: 2; font: italic 400 3.6cqi/1.1 Georgia, "Times New Roman", serif; }
@media (prefers-reduced-motion: no-preference) {
.pv-ql__fig { animation: pv-ql-look 8s ease-in-out infinite; }
.pv-ql__x1 { animation: pv-ql-x1 8s steps(1, end) infinite; }
.pv-ql__x4 { display: inline; animation: pv-ql-x4 8s steps(1, end) infinite; }
@keyframes pv-ql-look { 0%, 30% { transform: none; } 42%, 78% { transform: scale(3.2); } 90%, 100% { transform: none; } }
@keyframes pv-ql-x1 { 0% { opacity: 1; } 36% { opacity: 0; } 84% { opacity: 1; } }
@keyframes pv-ql-x4 { 0% { opacity: 0; } 36% { opacity: 1; } 84% { opacity: 0; } }
.pv-ql__x b { position: absolute; right: 0; white-space: nowrap; }
}