/* Tuppenny Tumble: www.tuppenny-tumble.com */ @font-face { font-family: "Cabin"; src: url("../fonts/Cabin.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; } @font-face { font-family: "Shrikhand"; src: url("../fonts/Shrikhand-Regular.subset.woff2") format("woff2"); font-display: swap; } :root { color-scheme: light; --ground: #F6F1E7; /* paper: the whole page (was candy floss #FCE6EC; owner, 8 Nov: "not a fan of the pink") */ --ink: #3A0716; /* maroon-black: headings, body */ --ink-2: #7A3E52; /* secondary text */ --rule: #E2D6C2; /* hairlines (warm sand, on paper) */ --red: #D1142A; /* price, focus ring, link hover */ --maroon: #520A1F; /* App Store button */ --maroon-hi: #6C0F2B; /* button hover */ --pink: #FF5C99; /* rock stripe, selection */ --cream: #FFF8E0; /* text on maroon, rock stripe */ --shade: 58 7 22; /* rgb of shadows, used as rgb(var(--shade) / a) */ --font: "Cabin", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-price: "Shrikhand", "Cabin", serif; --gutter: clamp(20px, 4vw, 48px); --max: 1200px; --section: clamp(96px, 12vw, 176px); --radius-shot: clamp(18px, 2.2vw, 28px); --ease: cubic-bezier(.2, .8, .2, 1); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } /* The Duo's soft floor shadow can reach past the right edge on tall desktop windows: never a sideways scroll. Set on the root only: overflow on any ancestor inside the page flattens the 3D Duo. */ html { -webkit-text-size-adjust: 100%; background: var(--ground); } body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; } .small a:hover, .doc a:hover { color: var(--red); } :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--pink); color: var(--ink); } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: -9999px; top: 8px; z-index: 10; padding: 10px 16px; border-radius: 999px; background: var(--maroon); color: var(--cream); font-weight: 600; text-decoration: none; } .skip:focus { left: 8px; } /* The Duo's soft floor shadow can reach past the right edge on tall desktop windows: clip it at the page column so there is never a sideways scroll (clip, not hidden: no scroll container, and the 3D Duo still renders). */ .wrap { overflow-x: clip; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); } /* Header */ /* The home page has no header (owner, 9 Nov): it opens on the logo and the Duo; Support and Privacy are in the footer. The read pages keep one quiet way back. */ header.site { display: flex; align-items: center; height: 76px; } .home { display: inline-flex; align-items: center; gap: 6px; padding-block: 12px; font-size: 16px; font-weight: 500; text-decoration: none; } .home svg { transition: transform 160ms var(--ease); } .home:hover { text-decoration: underline; } .home:hover svg { transform: translateX(-2px); } /* No mark in the header (owner, 9 Nov): the coin logo in the hero leads; the header is just the way round. */ nav.top { display: flex; gap: 28px; font-size: 16px; font-weight: 500; } nav.top a, footer nav a { text-decoration: none; padding-block: 12px; } footer nav a[aria-current="page"] { text-decoration: underline; } nav.top a:hover, footer nav a:hover { text-decoration: underline; } nav.top a[aria-current="page"] { text-decoration: underline; } /* Type */ h1, h2, p { margin: 0; } h2 { font-weight: 600; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; } .line { font-weight: 600; font-size: clamp(30px, calc(18px + 2.4vw), 54px); line-height: 1; letter-spacing: -0.028em; text-wrap: balance; } .sub, .lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; } .small { font-size: 14px; line-height: 1.6; color: var(--ink-2); } /* Buy: the App Store button and the price */ .buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; } .store { display: inline-grid; align-content: center; min-height: 58px; padding: 9px 26px 10px 24px; border-radius: 999px; background: var(--maroon); color: var(--cream); text-decoration: none; text-align: left; transition: background-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease); } .store small { font-size: 12.5px; line-height: 1; font-weight: 500; letter-spacing: 0.02em; } .store span { font-size: 21px; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; } .store:hover { color: var(--cream); background: var(--maroon-hi); transform: translateY(-1px); box-shadow: 0 12px 22px -12px rgb(var(--shade) / .55); } .store:active { transform: translateY(1px); box-shadow: none; } .store:focus-visible { border-radius: 999px; } /* Before launch (owner, 9 Nov): the same pill as a label, not a link; it neither lifts nor presses. */ .store--soon, .store--soon:hover { cursor: default; color: var(--cream); background: var(--maroon); transform: none; box-shadow: none; } .price { font-family: var(--font-price); font-weight: 400; font-size: clamp(34px, 3vw, 44px); line-height: 1; letter-spacing: 0.01em; color: var(--red); } /* The ticket: the price with a small aside under it, in the plain voice. On phones it is one 14px line, so the ticket is no taller than the button and the hero keeps its height; under 370px it breaks in two to stay beside the button. */ .ticket { display: grid; justify-items: start; gap: 5px; text-align: left; } .treat { font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--ink-2); text-wrap: balance; } @media (max-width: 369px) { .treat { max-width: 6.4em; } } @media (min-width: 640px) { .treat { font-size: 15px; } } /* Hero */ .hero { display: grid; justify-items: center; gap: clamp(28px, 4vw, 40px); padding: clamp(36px, 7vw, 64px) 0 clamp(40px, 6vw, 72px); } .hero__copy { display: grid; justify-items: center; text-align: center; } .logo { width: clamp(220px, 60vw, 400px); } .logo img { width: 100%; height: auto; } .hero .line { margin-top: clamp(14px, 1.6vw, 20px); } .br-wide { display: none; } .hero .sub { margin-top: 12px; max-width: 27ch; } .hero .buy { margin-top: clamp(22px, 2.4vw, 30px); } /* Stacked (phones, tablets): room between the price row and the Duo, whose lid reaches up towards it (owner, 9 Nov). */ @media (max-width: 1099px) { .hero .buy { margin-bottom: clamp(28px, 7vw, 56px); } } @media (min-width: 1100px) { .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 64px); align-items: center; justify-items: stretch; min-height: min(100svh, 960px); padding-block: 24px 40px; } .hero__copy { justify-items: start; text-align: left; } .logo { width: clamp(300px, 26vw, 400px); } .hero .buy { justify-content: flex-start; } .br-wide { display: inline; } } @property --sheen { syntax: ""; inherits: true; initial-value: 0.3; } /* ===== The iPhone Duo, folded like a laptop ===== Proportions from Apple's published specs: open 117.8 x 164.6 mm, 5.2 mm per half, so in this pose each half is 117.8 wide x 82.3 deep (hb = 0.70 W) and 0.044 W thick (drawn at 0.06 W, --t, so it reads as solid). Star White: mirror-polished titanium bands with antenna splits, a micro-blasted hinge cover, two buttons on the outer edge and the camera plateau on the back of the upper half (seen while it is closed). No logos. Add .is-generic to .duo-figure for the plain, unbranded device. */ .duo-figure { position: relative; margin: 0; width: 100%; padding-bottom: 80px; /* phones: the film toggle sits wholly below an 844px fold */ --w: min(80vw, 340px); --yaw0: 14deg; /* opening: the closed device seen three-quarter on */ --yaw: 4deg; /* at rest: just enough turn to show the titanium band and the hinge end */ --nx: -0.038; /* re-centres the silhouette the yaw pushes sideways */ --lean: 12deg; /* lid leans back from vertical: 102 deg between the halves */ --cam: 34deg; /* camera elevation */ --t: calc(var(--w) * 0.032); /* body thickness: slimmer than the 5.2 mm spec reads at this angle (the owner, 8 Nov: still "thicker than an actual phone"); was 0.06, then 0.044 (the owner, 8 Nov: "fatter than an actual device") */ --rim: calc(var(--w) * 0.006); /* polished titanium visible round the glass */ --bez: calc(var(--w) * 0.026); /* black bezel */ --R: calc(var(--w) * 0.085); /* outer corner radius */ --bump: calc(var(--w) * 0.04); /* camera plateau stands proud of the back glass */ --bev: calc(var(--w) * 0.007); /* the plateau's polished, rounded top edge */ --lh: calc(var(--w) * 0.018); /* each lens ring stands this far proud of the plateau */ --split: rgb(163 161 155); /* antenna splits in the titanium band (light, as on Star White); the owner wants them */ --sw: calc(var(--w) - 2 * var(--rim) - 2 * var(--bez)); --sh: calc(var(--sw) * 596 / 838); /* each half-screen: 838 x 596, the recording split at its fold */ --hb: calc(var(--sh) + var(--rim) + var(--bez)); } .stage { position: relative; width: var(--w); height: calc(var(--hb) * 1.72); margin-inline: auto; perspective: calc(var(--w) * 4.2); perspective-origin: 50% 58%; } @media (min-width: 640px) { .duo-figure { --w: min(72vw, 560px); padding-bottom: 56px; } } @media (min-width: 1100px) { .duo-figure { --w: min(43vw, 600px, calc((100svh - 156px) / 1.27)); --yaw0: 16deg; --yaw: 7deg; --nx: -0.053; padding-bottom: 48px; } } @media (max-height: 520px) and (orientation: landscape) { .duo-figure { --w: min(46vw, 420px); } } .duo { position: absolute; left: 0; top: 0; width: var(--w); height: calc(var(--hb) * 2); transform-style: preserve-3d; transform-origin: 50% 50%; transform: translateX(calc(var(--w) * var(--nx))) translateY(0) rotateX(calc(var(--cam) * -1)) rotateY(var(--yaw)) scale(1); } .panel { position: absolute; left: 0; width: var(--w); height: var(--hb); transform-style: preserve-3d; } .lid { top: 0; --rad: var(--R) var(--R) 0 0; transform-origin: 50% 100%; transform: rotateX(var(--lean)); } .base { top: var(--hb); --rad: 0 0 var(--R) var(--R); transform-origin: 50% 0; transform: rotateX(90deg); } /* The titanium band: 32 slices through the body's depth rounding the corners, in the same mirror-polish profile as the solid edge strips (below), so band and corners read as one continuous polished surface. */ /* Polished silver (8 Nov, the owner: "shinier, like the real silver of the Duo"): cooler, with deeper darks and brighter, tighter highlights, the way a mirror-polished band reflects a bright room. Was: #FFFFFF 0%, #E9E9E4 14%, #9E9D98 30%, #656463 44%, #BCBBB6 58%, #FEFEFB 72%, #D5D4D0 86%, #A7A6A1 100%. */ .duo-figure { --polish: #FFFFFF 0%, #F1F2F4 9%, #A9ACB1 24%, #4E5156 40%, #8D9096 50%, #E9EBEE 60%, #FFFFFF 68%, #C9CCD1 82%, #8A8D93 100%; } .layers { position: absolute; inset: 0; transform-style: preserve-3d; } /* --n slices (32 in the markup; js/site.js rebuilds them to suit the screen's pixel density, up to 96, coloured from the same polish ramp as the strips, so the curve has no steps and the band no stripes). */ .layers > i { position: absolute; inset: 0.6px; border-radius: var(--rad); transform: translateZ(calc(var(--t) * var(--i) / (var(--n, 32) * -1))); background: var(--c); background: color-mix(in srgb, #fff calc(clamp(0, 1 - max(var(--i) / var(--n, 32) - var(--sheen), var(--sheen) - var(--i) / var(--n, 32)) / .13, 1) * 82%), var(--c)); } /* Where the light sits at rest: across the upper half's top edge, and low on the base's front edge. */ .lid { --sheen: .34; } .base { --sheen: .24; } .layers > i:nth-child(1) { --c: #FCFCF9; } .layers > i:nth-child(2) { --c: #F8F8F5; } .layers > i:nth-child(3) { --c: #F2F2EE; } .layers > i:nth-child(4) { --c: #EBEBE8; } .layers > i:nth-child(5) { --c: #E0E0DC; } .layers > i:nth-child(6) { --c: #D2D2CE; } .layers > i:nth-child(7) { --c: #C4C4BF; } .layers > i:nth-child(8) { --c: #B5B5B0; } .layers > i:nth-child(9) { --c: #A6A5A1; } .layers > i:nth-child(10) { --c: #989793; } .layers > i:nth-child(11) { --c: #8C8B87; } .layers > i:nth-child(12) { --c: #807E7B; } .layers > i:nth-child(13) { --c: #737170; } .layers > i:nth-child(14) { --c: #6F6E6C; } .layers > i:nth-child(15) { --c: #777673; } .layers > i:nth-child(16) { --c: #8A8987; } .layers > i:nth-child(17) { --c: #9D9C99; } .layers > i:nth-child(18) { --c: #B0AFAB; } .layers > i:nth-child(19) { --c: #C2C1BC; } .layers > i:nth-child(20) { --c: #D1D1CC; } .layers > i:nth-child(21) { --c: #E0E0DC; } .layers > i:nth-child(22) { --c: #EEEEEB; } .layers > i:nth-child(23) { --c: #F7F7F4; } .layers > i:nth-child(24) { --c: #F5F5F1; } .layers > i:nth-child(25) { --c: #ECECE8; } .layers > i:nth-child(26) { --c: #E3E3DE; } .layers > i:nth-child(27) { --c: #DAD9D5; } .layers > i:nth-child(28) { --c: #D1D0CB; } .layers > i:nth-child(29) { --c: #C6C5C1; } .layers > i:nth-child(30) { --c: #BCBBB6; } .layers > i:nth-child(31) { --c: #B1B0AC; } .layers > i:nth-child(32) { --c: #A7A6A1; } .face { position: absolute; inset: 0; border-radius: var(--rad); padding: var(--rim); background: linear-gradient(180deg, #FAFAF8, #CDCDC9); transform: translateZ(0); } .lid .face { padding-bottom: 0; } .base .face { padding-top: 0; } .glass { position: relative; height: 100%; padding: var(--bez); background: #060608; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); } .lid .glass { padding-bottom: 0; border-radius: calc(var(--R) - var(--rim)) calc(var(--R) - var(--rim)) 0 0; } .base .glass { padding-top: 0; border-radius: 0 0 calc(var(--R) - var(--rim)) calc(var(--R) - var(--rim)); } .screen { position: relative; height: 100%; overflow: hidden; background: #000 url("../img/tumble-poster.webp") no-repeat; background-size: 100% 200%; } .lid .screen { border-radius: calc(var(--R) - var(--rim) - var(--bez)) calc(var(--R) - var(--rim) - var(--bez)) 0 0; background-position: 50% 0; } .base .screen { border-radius: 0 0 calc(var(--R) - var(--rim) - var(--bez)) calc(var(--R) - var(--rim) - var(--bez)); background-position: 50% 100%; } .screen video { position: absolute; left: 0; top: 0; width: 100%; height: 200%; object-fit: cover; object-position: 50% 0; } .screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .screen::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .lid .screen::after { background: linear-gradient(to top, rgb(0 0 0 / .45), rgb(0 0 0 / 0) 3.5%); } /* the bend at the fold */ .base .screen::after { background: linear-gradient(to bottom, rgb(0 0 0 / .5), rgb(0 0 0 / 0) 4%); } .glare { position: absolute; z-index: 2; pointer-events: none; } .lid .glare { inset: 0 -60%; background: linear-gradient(110deg, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / .11) 47%, rgb(255 255 255 / .035) 56%, rgb(255 255 255 / 0) 63%); transform: translateX(14%); } .base .glare { inset: 0; background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / 0) 40%); } .lid .glass::after, .base .glass::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: #060608; } .lid .glass::after { bottom: -3px; } .base .glass::after { top: -3px; } .off { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; } /* The back of the upper half: Star White glass, and the camera plateau with two lenses, the flash and a mic. */ .back { position: absolute; inset: 0; border-radius: var(--rad); transform-style: preserve-3d; background: radial-gradient(120% 90% at 30% 12%, rgb(255 255 255 / .75), rgb(255 255 255 / 0) 55%), linear-gradient(180deg, #F3F2EE, #D9D7D1); transform: translateZ(calc(var(--t) * -1 - 0.6px)) rotateY(180deg); backface-visibility: hidden; } /* The plateau: a pill-shaped island built from 12 slices. Seven stack up a straight satin wall; the top five step in along a quarter-round to make the polished, rolled top edge. Each slice carries a diagonal light (from the upper left, as on the back glass), so the wall facing the light is brighter than the wall turned away from it. */ .plateau { position: absolute; top: calc(var(--w) * 0.032); right: calc(var(--w) * 0.04); width: calc(var(--w) * 0.215); height: calc(var(--w) * 0.45); transform-style: preserve-3d; --pr: calc(var(--w) * 0.1075); } .plateau > i { position: absolute; inset: calc(var(--bev) * var(--k, 0)); border-radius: calc(var(--pr) - var(--bev) * var(--k, 0)); backface-visibility: hidden; transform: translateZ(calc(var(--bump) * var(--h))); background: linear-gradient(140deg, rgb(255 255 255 / .6), rgb(255 255 255 / 0) 42%, rgb(48 40 34 / .2)), var(--c); } .plateau > i:nth-child(1) { --h: .025; --c: #A9A7A0; box-shadow: calc(var(--w) * .005) calc(var(--w) * .008) calc(var(--w) * .014) rgb(48 36 34 / .36), 0 0 calc(var(--w) * .005) rgb(48 36 34 / .28); } .plateau > i:nth-child(2) { --h: .12; --c: #BDBBB4; } .plateau > i:nth-child(3) { --h: .22; --c: #CAC8C2; } .plateau > i:nth-child(4) { --h: .33; --c: #D3D1CB; } .plateau > i:nth-child(5) { --h: .44; --c: #DAD8D2; } .plateau > i:nth-child(6) { --h: .55; --c: #DEDCD6; } .plateau > i:nth-child(7) { --h: .65; --c: #D6D4CE; } .plateau > i:nth-child(8) { --h: .74; --c: #BCBAB4; --k: .003; } .plateau > i:nth-child(9) { --h: .82; --c: #DDDCD7; --k: .066; } .plateau > i:nth-child(10) { --h: .89; --c: #F8F8F6; --k: .206; } .plateau > i:nth-child(11) { --h: .945; --c: #FFFFFF; --k: .405; } .plateau > i:nth-child(12) { --h: .98; --c: #F1F0EC; --k: .629; } .plateau__top { position: absolute; inset: var(--bev); border-radius: calc(var(--pr) - var(--bev)); transform: translateZ(var(--bump)); backface-visibility: hidden; background: radial-gradient(90% 38% at 30% 10%, rgb(255 255 255 / .85), rgb(255 255 255 / 0)), linear-gradient(160deg, #F8F7F3, #E9E7E1 55%, #DEDCD5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); } /* Flash (a silver ring round a warm diffuser) and mic, set into the top face. Centres as drawn in Apple's press images: flash at (0.074, 0.41) W and mic at (0.145, 0.41) W from the plateau's top-left corner. */ .flash, .mic { position: absolute; border-radius: 50%; } .flash { left: calc(var(--w) * .056 - var(--bev)); top: calc(var(--w) * .392 - var(--bev)); width: calc(var(--w) * .036); height: calc(var(--w) * .036); background: radial-gradient(closest-side, #FFF8E2, #F2E5BA 45%, #D8C68E 64%, #A9A69C 71%, #F4F3EF 79%, #D2D1CC 90%, #A3A29D 100%); box-shadow: 0 0 0 1px rgb(255 255 255 / .6), inset 0 calc(var(--w) * .002) calc(var(--w) * .003) rgb(0 0 0 / .18); } .mic { left: calc(var(--w) * .1395 - var(--bev)); top: calc(var(--w) * .405 - var(--bev)); width: calc(var(--w) * .011); height: calc(var(--w) * .011); background: radial-gradient(circle at 55% 62%, #151412 35%, #3A3936 75%); box-shadow: 0 1px 0 rgb(255 255 255 / .7); } /* Each lens is its own short cylinder standing on the plateau, nine slices tall: three solid discs at the foot, then six rings up the polished wall, each ring's inner band dark gunmetal so together they make the lens barrel. On top, a polished ring. Inside, from the bottom up: the coated glass with its aperture, an inner element carrying the coating's colour, and the cover glass with its highlight, so the lens shows real depth as the device turns. Heights are fractions of --lh; radii are fractions of the lens radius. */ .lens { position: absolute; left: calc(var(--w) * .0235); width: calc(var(--w) * .168); height: calc(var(--w) * .168); transform: translateZ(calc(var(--bump) + 0.4px)); transform-style: preserve-3d; --ri: 86%; --rb: 76%; } .lens--1 { top: calc(var(--w) * .024); } .lens--2 { top: calc(var(--w) * .2); } .lens > * { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; transform: translateZ(calc(var(--lh) * var(--z))); } .lens > i { background: conic-gradient(from 315deg, rgb(255 255 255 / .5), rgb(255 255 255 / 0) 22%, rgb(30 26 22 / .3) 50%, rgb(255 255 255 / 0) 78%, rgb(255 255 255 / .5)), var(--c); } .lens > i:nth-of-type(n+4) { background: radial-gradient(closest-side, #15161A var(--rb), #23252B 80%, #33363E calc(var(--ri) - 1px), rgb(0 0 0 / 0) var(--ri)), conic-gradient(from 315deg, rgb(255 255 255 / .5), rgb(255 255 255 / 0) 22%, rgb(30 26 22 / .3) 50%, rgb(255 255 255 / 0) 78%, rgb(255 255 255 / .5)), var(--c); -webkit-mask: radial-gradient(closest-side, #0000 calc(var(--rb) - .6px), #000 var(--rb)); mask: radial-gradient(closest-side, #0000 calc(var(--rb) - .6px), #000 var(--rb)); } .lens > i:nth-of-type(1) { --z: .02; --c: #7E7D79; box-shadow: calc(var(--w) * .003) calc(var(--w) * .005) calc(var(--w) * .008) rgb(40 32 28 / .42), 0 0 calc(var(--w) * .004) rgb(40 32 28 / .3); } .lens > i:nth-of-type(2) { --z: .12; --c: #959490; } .lens > i:nth-of-type(3) { --z: .22; --c: #ADACA8; } .lens > i:nth-of-type(4) { --z: .32; --c: #C4C3BF; } .lens > i:nth-of-type(5) { --z: .42; --c: #D8D7D3; } .lens > i:nth-of-type(6) { --z: .53; --c: #E9E8E5; } .lens > i:nth-of-type(7) { --z: .64; --c: #F6F6F4; } .lens > i:nth-of-type(8) { --z: .75; --c: #EAE9E6; } .lens > i:nth-of-type(9) { --z: .86; --c: #C9C8C4; } .lens__floor { --z: .27; inset: 12%; background: radial-gradient(closest-side, #04050A 0 34%, rgb(29 36 54 / .8) 35.5% 37%, rgb(0 0 0 / 0) 38.5%), radial-gradient(closest-side, rgb(0 0 0 / 0) 68%, rgb(46 54 78 / .45) 69.5% 70.5%, rgb(0 0 0 / 0) 72%), radial-gradient(closest-side, #030406, #0B1020 72%, #1A2236 96%, #0E0F12); } .lens__element { --z: .5; inset: 19%; border: calc(var(--w) * .004) solid rgb(0 0 0 / 0); border-top-color: rgb(118 94 255 / .5); border-bottom-color: rgb(64 214 156 / .26); transform: translateZ(calc(var(--lh) * var(--z))) rotate(-48deg); filter: blur(calc(var(--w) * .0016)); } .lens__glass { --z: .92; inset: 12.5%; background: radial-gradient(70% 55% at 30% 24%, rgb(255 255 255 / .2), rgb(255 255 255 / 0) 70%), radial-gradient(closest-side, rgb(0 0 0 / 0) 78%, rgb(0 0 0 / .45)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .6); } .lens__glass::before, .lens__glass::after { content: ""; position: absolute; border-radius: 50%; } .lens__glass::before { left: 14%; top: 22%; width: 26%; height: 11%; background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(255 255 255 / .5) 55%, rgb(255 255 255 / 0)); transform: rotate(-38deg); } .lens__glass::after { right: 22%; bottom: 20%; width: 6%; height: 6%; background: rgb(255 255 255 / .45); } .lens__ring { --z: 1; background: radial-gradient(closest-side, rgb(0 0 0 / 0) calc(var(--ri) + 1px), rgb(255 255 255 / .8) calc(var(--ri) + 1.6px) calc(var(--ri) + 2.4px), rgb(0 0 0 / 0) calc(var(--ri) + 3.4px) calc(100% - 2.4px), rgb(255 255 255 / .95) calc(100% - 1.4px), rgb(0 0 0 / 0) 100%), conic-gradient(from 315deg, #FEFEFC, #CFCECA 10%, #6F6E6A 23%, #ADACA8 35%, #F3F2EE 47%, #BEBDB9 60%, #7D7C78 73%, #D3D2CD 86%, #FEFEFC); -webkit-mask: radial-gradient(closest-side, #0000 calc(var(--ri) - .5px), #000 calc(var(--ri) + .3px)); mask: radial-gradient(closest-side, #0000 calc(var(--ri) - .5px), #000 calc(var(--ri) + .3px)); } /* Solid titanium edges: a plane at right angles to the face along each straight edge, polished across its depth, with the antenna splits where they cross. The depth slices above round the corners. */ .edge { position: absolute; transform-style: flat; backface-visibility: visible; --band: linear-gradient(var(--dir), var(--polish)); --glint: linear-gradient(var(--dir), rgb(255 255 255 / 0) calc((var(--sheen) - .09) * 100%), rgb(255 255 255 / .95) calc(var(--sheen) * 100%), rgb(255 255 255 / 0) calc((var(--sheen) + .09) * 100%)); } .edge--top, .edge--front { left: var(--R); right: var(--R); height: var(--t); transform-origin: 50% 0; --dir: 180deg; background: linear-gradient(90deg, rgb(0 0 0 / 0) 5.4%, var(--split) 5.4% 6.1%, rgb(0 0 0 / 0) 6.1% 93.9%, var(--split) 93.9% 94.6%, rgb(0 0 0 / 0) 94.6%), var(--glint), var(--band); } .edge--top { top: 0; transform: rotateX(-90deg); } .edge--front { top: 100%; transform: rotateX(-90deg); } .edge--l, .edge--r { width: var(--t); --dir: 90deg; --at: 45%; background: linear-gradient(180deg, rgb(0 0 0 / 0) var(--at), var(--split) var(--at) calc(var(--at) + 1.2%), rgb(0 0 0 / 0) calc(var(--at) + 1.2%)), var(--glint), var(--band); } .base .edge--l, .base .edge--r { --at: 54%; } .lid .edge--l, .lid .edge--r { top: var(--R); bottom: 0; } .base .edge--l, .base .edge--r { top: 0; bottom: var(--R); } .edge--l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); } .edge--r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); --dir: 270deg; } .is-generic .edge { --split: rgb(0 0 0 / 0); } /* Buttons on the outer edge (the upper half's top edge in this pose): polished capsules standing proud of the band, each in a darker slot. */ .keys { position: absolute; left: 0; top: 0; width: var(--w); height: 0; transform-style: preserve-3d; } .key { position: absolute; top: 0; height: 0; transform-style: preserve-3d; } .key--a { left: 27%; width: 17%; } .key--b { left: 65%; width: 13%; } .key > i { position: absolute; left: 0; width: 100%; transform-origin: 50% 0; } .key > i:nth-child(1) { top: 0; height: calc(var(--t) * 0.56); border-radius: calc(var(--t) * 0.28); transform: translateY(calc(var(--w) * -0.005)) translateZ(calc(var(--t) * -0.22)) rotateX(-90deg); background: linear-gradient(90deg, rgb(255 255 255 / 0) 8%, rgb(255 255 255 / .45) 30%, rgb(255 255 255 / 0) 52%), linear-gradient(180deg, #FFFFFF, #E2E2DE 26%, #9E9E9A 50%, #D2D2CE 74%, #F7F7F4); } .key > i:nth-child(2), .key > i:nth-child(3) { top: calc(var(--w) * -0.005); height: calc(var(--w) * 0.005); background: #9A9995; border-radius: calc(var(--w) * 0.003); transform-origin: 50% 50%; } .key > i:nth-child(2) { transform: translateZ(calc(var(--t) * -0.22)); } .key > i:nth-child(3) { transform: translateZ(calc(var(--t) * -0.78)); } .key > i:nth-child(4) { left: -3%; width: 106%; top: 0; height: calc(var(--t) * 0.68); border-radius: calc(var(--t) * 0.34); background: #85847F; transform: translateY(-0.7px) translateZ(calc(var(--t) * -0.16)) rotateX(-90deg); } /* The hinge cover: micro-blasted titanium, a half-round in eight facets per half wrapping the fold, satin-lit from above (bright where it meets the back, falling away as it curves under), with quarter-disc end caps. */ .barrel { position: absolute; left: 0; right: 0; height: 0; transform-style: preserve-3d; } .base .barrel { top: 0; } .lid .barrel { top: 100%; } .barrel > b { position: absolute; left: 0; right: 0; top: calc(var(--t) * -0.11); height: calc(var(--t) * 0.22); background: var(--c); transform-origin: 50% 50%; } .base .barrel > b { transform: rotateX(calc(180deg - var(--phi))) translateZ(var(--t)); } .lid .barrel > b { transform: rotateX(calc(180deg + var(--phi))) translateZ(var(--t)); } .lid .barrel > b:nth-child(1) { --phi: 5.625deg; --c: #F4F3EF; } .lid .barrel > b:nth-child(2) { --phi: 16.875deg; --c: #ECEBE7; } .lid .barrel > b:nth-child(3) { --phi: 28.125deg; --c: #DCDBD6; } .lid .barrel > b:nth-child(4) { --phi: 39.375deg; --c: #C9C8C3; } .lid .barrel > b:nth-child(5) { --phi: 50.625deg; --c: #B4B3AE; } .lid .barrel > b:nth-child(6) { --phi: 61.875deg; --c: #A09F9A; } .lid .barrel > b:nth-child(7) { --phi: 73.125deg; --c: #8E8D88; } .lid .barrel > b:nth-child(8) { --phi: 84.375deg; --c: #7F7E79; } .base .barrel > b:nth-child(1) { --phi: 5.625deg; --c: #605F5B; } .base .barrel > b:nth-child(2) { --phi: 16.875deg; --c: #64635F; } .base .barrel > b:nth-child(3) { --phi: 28.125deg; --c: #696864; } .base .barrel > b:nth-child(4) { --phi: 39.375deg; --c: #6E6D69; } .base .barrel > b:nth-child(5) { --phi: 50.625deg; --c: #73726E; } .base .barrel > b:nth-child(6) { --phi: 61.875deg; --c: #787773; } .base .barrel > b:nth-child(7) { --phi: 73.125deg; --c: #7C7B77; } .base .barrel > b:nth-child(8) { --phi: 84.375deg; --c: #7F7E79; } .lid .barrel > b:nth-child(2) { background: linear-gradient(90deg, #E9E8E4, #F7F6F2 35%, #FBFAF7 55%, #E6E5E1); } /* the satin sheen */ .cap { position: absolute; width: var(--t); height: var(--t); } .cap--r { left: 100%; } .lid .cap { top: 0; transform-origin: 0 0; transform: rotateY(90deg); border-radius: 0 0 100% 0; background: radial-gradient(circle at 0 0, #8A8984, #B5B4AF 70%, #CFCEC9); } .base .cap { top: calc(var(--t) * -1); transform-origin: 0 100%; transform: rotateY(90deg); border-radius: 0 100% 0 0; background: radial-gradient(circle at 0 100%, #6B6A66, #8E8D88 70%, #A3A29D); } .cap--l { left: 0; } /* The polished chamfer where the hinge cover meets the back glass. */ .back::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: rgb(255 255 255 / .9); } /* The plain, unbranded device (no plateau, buttons or hinge cover; the earlier slimmer body). */ .is-generic { --t: calc(var(--w) * 0.022); --yaw: 0deg; --yaw0: -9deg; --nx: 0; } .is-generic .plateau, .is-generic .keys, .is-generic .barrel { display: none; } .shadow { position: absolute; pointer-events: none; } .shadow--soft { inset: calc(var(--w) * -0.03); border-radius: calc(var(--R) * 1.4); background: rgb(var(--shade) / .30); filter: blur(calc(var(--w) * 0.035)); transform: translateZ(calc(var(--t) * -1 - 2px)) translateY(calc(var(--w) * -0.025)); } .shadow--contact { inset: calc(var(--w) * -0.004); border-radius: var(--rad); background: rgb(var(--shade) / .45); filter: blur(calc(var(--w) * 0.007)); transform: translateZ(calc(var(--t) * -1 - 1px)); } /* The one orchestrated moment: the closed Duo, camera plateau up, opens like a laptop and the screens wake. */ @media (prefers-reduced-motion: no-preference) { .duo { animation: duo-camera 1900ms cubic-bezier(.3, 0, .15, 1) 350ms both; } .lid { animation: duo-lid 1900ms cubic-bezier(.3, 0, .15, 1) 350ms both, duo-sheen-lid 1900ms cubic-bezier(.3, 0, .15, 1) 350ms both; } .base { animation: duo-sheen-base 1900ms cubic-bezier(.3, 0, .15, 1) 350ms both; } .lid .glare { animation: duo-glare 1900ms cubic-bezier(.3, 0, .15, 1) 350ms both; } .off { animation: duo-wake 800ms cubic-bezier(.2, 0, 0, 1) 1250ms both; } } @keyframes duo-camera { from { transform: translateX(calc(var(--w) * var(--nx))) translateY(calc(var(--hb) * -0.42)) rotateX(-48deg) rotateY(var(--yaw0)) scale(.86); } to { transform: translateX(calc(var(--w) * var(--nx))) translateY(0) rotateX(calc(var(--cam) * -1)) rotateY(var(--yaw)) scale(1); } } @keyframes duo-lid { from { transform: rotateX(-89.4deg); } to { transform: rotateX(var(--lean)); } } @keyframes duo-sheen-lid { from { --sheen: 1.15; } to { --sheen: .34; } } @keyframes duo-sheen-base { from { --sheen: -.2; } to { --sheen: .24; } } @keyframes duo-glare { from { transform: translateX(-34%); } to { transform: translateX(14%); } } @keyframes duo-wake { from { opacity: 1; } to { opacity: 0; } } /* Pause / play the film */ .controls { position: absolute; bottom: 0; right: calc((100% - var(--w)) / 2 - var(--w) * var(--nx)); display: flex; gap: 10px; } .film { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px 10px 14px; border: 1.5px solid var(--ink-2); border-radius: 999px; background: transparent; color: var(--ink); font: 600 15px/1 var(--font); cursor: pointer; transition: background-color 160ms var(--ease), border-color 160ms var(--ease); } .film:hover { background: rgb(var(--shade) / .06); border-color: var(--ink); } .film__icon { width: 14px; height: 14px; fill: currentColor; } .film__icon--play { display: none; } .film[aria-pressed="true"] .film__icon--pause { display: none; } .film[aria-pressed="true"] .film__icon--play { display: block; } /* Supporting beats */ .beat { padding-top: var(--section); } .beat .lede { margin-top: 20px; max-width: 30em; } .shot { width: 100%; height: auto; border-radius: var(--radius-shot); box-shadow: 0 40px 70px -40px rgb(var(--shade) / .5), 0 14px 26px -16px rgb(var(--shade) / .22); } .beat--split { display: grid; gap: clamp(36px, 6vw, 96px); align-items: center; } .shot--tall { width: min(100%, 420px); justify-self: center; } @media (min-width: 900px) { .beat--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .beat--center { text-align: center; } .beat--center .lede { margin-inline: auto; max-width: 31em; text-wrap: balance; } .shot--wide { max-width: 1080px; margin: clamp(32px, 5vw, 64px) auto 0; } /* Close */ .close { text-align: center; padding-block: var(--section) clamp(88px, 11vw, 160px); } .close h2 { font-size: clamp(52px, 8vw, 116px); line-height: .96; letter-spacing: -0.035em; } .close .buy { margin-top: clamp(28px, 3vw, 40px); } .close .price { font-size: clamp(40px, 4vw, 56px); } .facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-2); } .facts li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); } /* Footer */ footer.site { padding-bottom: max(48px, env(safe-area-inset-bottom)); } .rock { height: 10px; border-radius: 5px; background: url("../img/rock-stripe.svg") 0 0 / 14px 10px repeat-x; } .foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 40px; padding-top: 36px; } .foot .small { flex: 1 1 420px; min-width: 0; } .foot nav { display: flex; gap: 24px; font-size: 15px; font-weight: 500; margin-top: -12px; } /* Read pages: privacy, support, 404 */ .doc { max-width: 720px; padding-block: clamp(32px, 6vw, 72px) clamp(72px, 9vw, 128px); } .doc h1 { font-weight: 600; font-size: clamp(44px, 6vw, 72px); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; } .doc .lede { margin-top: 16px; font-size: clamp(19px, 1.6vw, 21px); } .doc .meta { margin-top: 12px; font-size: 15px; color: var(--ink-2); } .doc h2 { margin-top: 56px; font-weight: 600; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.02em; } .doc h3 { margin: 32px 0 0; font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; } .doc p, .doc li { font-size: 18px; line-height: 1.6; } .doc h2 + p, .doc h3 + p, .doc p + p { margin-top: 12px; } .doc ul { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 6px; } .doc li::marker { color: var(--red); } .doc .mail { margin-top: 40px; padding-block: 28px; border-block: 1px solid var(--rule); } .doc .mail a { font-weight: 600; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; text-decoration-thickness: 2px; text-underline-offset: 6px; overflow-wrap: anywhere; } .doc .mail p { margin-top: 12px; font-size: 16px; color: var(--ink-2); } /* Sound toggle beside Pause (8 Nov): the film autoplays muted; a tap turns the game's own sound on. */ .film__icon { flex: none; } .sound .film__icon { width: 16px; height: 16px; } .sound__icon--on { display: none; } .sound[aria-pressed="true"] .sound__icon--off { display: none; } .sound[aria-pressed="true"] .sound__icon--on { display: block; } /* The strips' ends feather (2.5%, clear of the antenna splits at 5.4%) into the slices under them, so the flat band and the rounded corners meet without a seam. */ .edge--top, .edge--front { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); } .edge--l, .edge--r { -webkit-mask-image: linear-gradient(180deg, transparent, #000 2.5%, #000 97.5%, transparent); mask-image: linear-gradient(180deg, transparent, #000 2.5%, #000 97.5%, transparent); } /* ===================================================================================================================== site-v2 (8 Nov 2026). Everything above this line is v1. The page is static once loaded: the Duo's opening and the films are the only motion (the owner, 8 Nov evening: no scroll or pointer tilt, no fade-ins, no added shine on the screens). ===================================================================================================================== */ /* The stage: a pool of daylight on the paper behind the Duo (lighting, not a glow: it is lighter paper, no colour), and a broad, soft floor shadow that lands as the Duo comes down and opens. Both sit behind the device in screen space. */ .duo-figure { isolation: isolate; } .duo-figure::before, .floor { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; } /* Phones and tablets: the figure is centred, so the pool is exactly the viewport's width and can never widen the page. */ .duo-figure::before { top: 0; width: 100vw; height: calc(var(--hb) * 2.3); transform: translate(-50%, -14%); background: radial-gradient(closest-side, #FFFFFD, rgb(255 254 250 / .7) 42%, rgb(255 253 247 / 0)); } /* Two columns: the hero's pool is painted on the page itself, centred on the Duo's column (the 7fr column's centre, worked out from the 1200px column and its gutters), so it can spread past the column without widening the page. */ @media (min-width: 1100px) { .duo-figure::before { display: none; } html { background: radial-gradient(min(680px, 48vw) min(560px, 64svh) at calc(50% + min(100vw - 96px, 1200px) * 0.2083 + 17px) calc(60px + min(100svh - 76px, 920px) / 2), #FFFFFD, rgb(255 254 250 / .7) 42%, rgb(255 253 247 / 0)) no-repeat, var(--ground); } body { background: transparent; } } /* Centred just inside the base's front edge (1.70 hb down the stage at every width), so it spreads past the sides and the front of the device, the way a real object on a table darkens the paper round it. */ .floor { top: calc(var(--hb) * 1.70 - var(--w) * 0.1); width: min(calc(var(--w) * 1.4), 100vw - 24px); height: calc(var(--w) * 0.2); border-radius: 50%; transform: translateX(calc(-50% + var(--w) * 0.02)); background: radial-gradient(closest-side, rgb(var(--shade) / .30), rgb(var(--shade) / .12) 50%, rgb(var(--shade) / 0)); } @media (prefers-reduced-motion: no-preference) { .duo-figure::before { animation: v2-light 2200ms cubic-bezier(.3, 0, .15, 1) 150ms both; } .floor { animation: v2-floor 1900ms cubic-bezier(.3, 0, .15, 1) 350ms both; } } @keyframes v2-light { from { opacity: 0; } to { opacity: 1; } } @keyframes v2-floor { from { opacity: 0; scale: .55 .4; } to { opacity: 1; scale: 1 1; } } /* The screens show the film clean: no glare over them (the owner, 8 Nov: "the top-most screen has pseudo shine, don't do that"). Delete this rule to bring v1's glare back. */ .glare { display: none; } /* ---- The fold: a bend, not a crease (the owner, 8 Nov: "the fold has a bend between the screens") ---- On a real foldable the inner display is one flexible panel that bends round the hinge: the published figures are about 1.5-1.9 mm of radius folded shut (Samsung quotes "1.6R" for Fold5, "1.9R" for the Flip5's waterdrop fold) and about 3 mm for a waterdrop hinge opened. So here the screen, its bezels, the titanium sides and the back run from the base up into the lid through an arc of 3 mm radius (0.025 W) at rest, where the halves are 102deg apart (arc length --L, 0.034 W), tightening to nothing as the halves shut, so the closed Duo is as thin as before. The arc is 16 strips in the base (.bend), each turned its share of --fold (the bend angle: 180 - the angle between the halves; 78 at rest), and the lid hangs off the arc's end. The film runs on across the arc (js/site.js draws each strip's own rows). The hinge cover and the dark seam bars and fold shading that hid the old crease are gone; nothing else about the figure changes. */ @property --fold { syntax: ""; inherits: true; initial-value: 78; } .duo-figure { --N: 16; --L: calc(var(--w) * 0.034); } /* The arc's radius: 3 mm (0.025 W) open at rest, closing to nothing as the halves shut, so the closed Duo is exactly as thin as before. */ .duo { --r: calc(var(--w) * 0.025 * (180 - var(--fold)) / 102); } .lid { transform: translateY(calc(var(--r) * (cos(var(--fold) * 1deg) - 1))) translateZ(calc(var(--r) * sin(var(--fold) * 1deg) * -1)) rotateX(calc((90 - var(--fold)) * 1deg)); } .barrel, .lid .glass::after, .base .glass::after, .screen::after { display: none; } /* The lid shows the film's rows down to where the arc begins: the arc carries the middle 2 x 2.55% of the recording. */ .lid .screen video { height: calc(200% / 0.97446); object-fit: fill; } /* stretch, never crop the sides */ .bend { position: absolute; left: 0; top: 0; width: var(--w); height: 0; transform-style: preserve-3d; } .bend__strip { position: absolute; left: 0; bottom: 0; width: var(--w); transform-style: preserve-3d; transform-origin: 50% 100%; --p0: calc(var(--fold) * (var(--k) - 1) / var(--N) * 1deg); /* where this strip starts round the arc */ --pm: calc(var(--fold) * (var(--k) - .5) / var(--N) * 1deg); /* the direction of its chord */ height: calc(2 * var(--r) * sin(var(--fold) / var(--N) / 2 * 1deg) + .6px); transform: translateY(calc(var(--r) * sin(var(--p0)) * -1)) translateZ(calc(var(--r) * (1 - cos(var(--p0))))) rotateX(calc(var(--pm) * -1)); } .bend__strip > b { position: absolute; display: block; } /* The front: titanium rim, black bezel, the screen's sliver, bezel, rim; exactly the halves' layout across the width. */ .bend__face { inset: -.75px 0; background: linear-gradient(90deg, #E4E4E1 var(--rim), #060608 var(--rim) calc(100% - var(--rim)), #E4E4E1 calc(100% - var(--rim))); } /* The arc wakes with the screens (the same timing as .off). */ .bend__face::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; } @media (prefers-reduced-motion: no-preference) { .bend__face::after { animation: duo-wake 800ms cubic-bezier(.2, 0, 0, 1) 1250ms both; } } .bend__face canvas { position: absolute; top: 0; left: calc(var(--rim) + var(--bez)); width: calc(100% - 2 * (var(--rim) + var(--bez))); height: 100%; background: #000; } /* The back (the outside of the bend, where the hinge cover was) and the two titanium sides, each a little longer than the strip so the outside of the curve, which is longer than the inside, has no gaps. */ .bend__back { left: 0; right: 0; top: calc(var(--t) * -.12); bottom: calc(var(--t) * -.12); transform: translateZ(calc(var(--t) * -1 - .3px)); background: color-mix(in srgb, #EDECE8, #8E8D88 calc((var(--N) - var(--k)) / var(--N) * 100%)); } .bend__side { top: calc(var(--t) * -.12); bottom: calc(var(--t) * -.12); width: var(--t); --dir: 90deg; background: linear-gradient(var(--dir), var(--polish)); } .bend__side--l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); } .bend__side--r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); --dir: 270deg; } .is-generic .bend__back { display: none; } /* The opening: the same 1.9 s and the same curve as before, now turning the bend and the lid together. --fold runs from 179.4 (shut: the lid's old -89.4deg) to 78 (open: its old 12deg lean), so the lid's angle follows exactly the path it did; the strips take their share of it. */ @media (prefers-reduced-motion: no-preference) { .duo { animation: duo-camera 1900ms cubic-bezier(.3, 0, .15, 1) 350ms both, duo-lid 1900ms cubic-bezier(.3, 0, .15, 1) 350ms both; } .lid { animation: duo-sheen-lid 1900ms cubic-bezier(.3, 0, .15, 1) 350ms both; } } @keyframes duo-lid { from { --fold: 179.4; } to { --fold: 78; } } /* The film drawn as one sheet (9 Nov): js/site.js puts a WebGL canvas over the figure, outside the 3D scene, and draws the film on it exactly where the screens are. While it does (.gl), the screens' own content is hidden underneath: the