/* ========================================================================== Multi-page landing page preview — 17.7s, five clicks, two typing beats -------------------------------------------------------------------------- Rename the first page, add a Gallery page and watch it fill with photos, then switch back to Home from the phone's own nav bar. Changes from the first cut -------------------------------------------------------------------------- * The page-icon step is gone. Its result never showed in the phone preview. One side effect: the Pages list carries a house icon beside 'Home' from the Gallery page onward regardless, so it now appears without the user having picked it. ~4px at tile size. * Adding a third page (Tickets) is gone. It repeated the Gallery add almost exactly, for 4.3s. * The opening plays ZOOMED into the bottom-left corner, and slower, so the rename and the '+ Add' click are legible rather than a 7px pencil. * A closing beat zooms the phone's lower half and switches to the Home tab — the only moment that shows what having two pages actually buys a visitor. Two zooms, two anchors, two scales -------------------------------------------------------------------------- Opening: 1.9x at (5%, 88%). The anchor is almost on the corner because the working area sits hard against the frame's left edge — the page row starts at 0.68%, so bringing x=3% inside a 1.9x window forces the origin to 6.3% or below. Closing: 2.4x at (46%, 97%), deeper because the nav pills are only 85px tall in a 1670px frame, and anchored low because the window has to reach the phone's bottom edge. build.py proves each window contains its own subject and refuses to build otherwise. `transform-origin` is animated between the two anchors, but ONLY across stretches where the scale is 1 — moving the origin under a scaled element slides the whole frame. The move happens in the 0.3s hold at 71-73% and again after the closing zoom-out, where it is invisible. Why the closing crossfade is safe -------------------------------------------------------------------------- Zoomed on the nav, the switch reads as the pink pill sliding Gallery -> Home over still surroundings. build.py asserts the pill lands within 6px of the click target (it lands within 1) and that both frames put the bar on exactly the same rows, so nothing jumps. The rest of the editor DOES change between the two captures — left panel, right panel, Pages selection — but all of that is off-screen while the crossfade runs, and it is the correct end state for having selected the Home page. Two typing beats, no font matched -------------------------------------------------------------------------- Each value is revealed from its own captured pixels in discrete `steps()` behind a caret, over a frame whose field has been repainted in the field's flat interior colour. The rename cuts to that emptied field rather than wiping `Home` over the selected `Page 1` — Home is shorter and would leave "e 1". The page-name row is white, so its caret is dark; the panel's is light. Beats -------------------------------------------------------------------------- 0.00 - 2.83% hold the editor, one page called 'Page 1' 2.83 - 7.35% zoom in 1.9x to the bottom-left corner 7.35 - 11.30% cursor to the rename pencil 11.30 - 12.43% press + click ring 11.86 - 14.69% the name goes editable, 'Page 1' selected 14.69 - 17.23% hold — you can see the selection 17.23% selection clears (a true one-frame cut) 17.23 - 23.73% type 'Home' (1.15s — deliberately unhurried) 23.73 - 26.55% hold on the renamed page 26.55 - 31.07% cursor to '+ Add' in the Pages list 31.07 - 32.20% press + click ring 32.20 - 36.44% zoom back out 35.59 - 39.27% the Add-a-page panel opens 39.27 - 41.53% cursor to the PAGE NAME field 41.53 - 46.89% type 'Gallery' 46.89 - 51.13% cursor to the Gallery page type 51.13 - 52.26% press + click ring 51.70 - 54.80% the type is selected 54.80 - 59.04% cursor to 'Add page' 59.04 - 60.17% press + click ring 59.61 - 63.28% the new Gallery page opens, empty 63.28 - 67.23% hold 67.23 - 71.19% photos and a title appear on it 71.19 - 72.88% hold (the zoom origin moves to the phone here) 72.88 - 77.40% zoom in 2.4x to the phone's lower half 74.58 - 81.07% cursor descends into the window, onto the Home tab 81.07 - 82.20% press + click ring 81.64 - 85.03% the pill slides to Home, the page behind it changes 85.40% every layer under m13 switches off (invisible — see above) 85.03 - 89.55% hold on the switched nav bar 89.55 - 92.94% zoom back out to the whole editor, now on Home 92.94 - 95.20% hold 95.20 - 98.59% crossfade back to the start — m13 over m3, two layers only 98.59 - 100 % hold, loop Layer order, bottom to top -------------------------------------------------------------------------- m3 start m4 name editable, 'Page 1' selected m5e name emptied f-home the typed 'Home', revealed over it m7e panel open, empty f-gal 'Gallery', revealed m8 name + type selected m9 new Gallery page, empty m10 Gallery page filled m13 switched back to Home, nav bar visible cursor ========================================================================== */ .mp-preview { /* ---- from build.py ---- */ --mp-duration: 17.7s; --mp-aspect: 1200 / 682; --mp-pencil-x: 11.73%; --mp-pencil-y: 79.64%; --mp-addpage-x: 11.39%; --mp-addpage-y: 75.39%; --mp-namefld-x: 86.94%; --mp-namefld-y: 13.53%; --mp-galtype-x: 86.94%; --mp-galtype-y: 69.82%; --mp-addbtn-x: 86.94%; --mp-addbtn-y: 96.35%; --mp-hometab-x: 44.08%; --mp-hometab-y: 93.71%; --mp-namerow-x: 9%; --mp-namerow-y: 79.5%; --mp-name-l: 4.0136%; --mp-name-t: 78.4431%; --mp-name-w: 10.2721%; --mp-name-h: 2.0958%; --mp-name-reveal: 26.49%; --mp-name-hide: 73.51%; --mp-panel-l: 75.0000%; --mp-panel-t: 11.1377%; --mp-panel-w: 23.9116%; --mp-panel-h: 4.7904%; --mp-gal-reveal: 17.21%; --mp-gal-hide: 82.79%; --mp-zoom-x: 5%; --mp-zoom-y: 88%; --mp-zoom: 1.9; --mp-zoom-inv: 0.5263; --mp-zoom2-x: 46%; --mp-zoom2-y: 97%; --mp-zoom2: 2.4; --mp-zoom2-inv: 0.4167; --mp-park-x: 45%; --mp-park-y: 50%; --mp-cursor-size: 18px; --mp-ring-size: 30px; --mp-ring-color: 216 60 45; --mp-radius: 12px; position: relative; width: 100%; aspect-ratio: var(--mp-aspect); overflow: hidden; border-radius: var(--mp-radius); background: #070a10; box-shadow: 0 0 0 1px rgb(0 0 0 / 30%), 0 12px 32px -12px rgb(0 0 0 / 45%); contain: paint; } .mp-stage { position: absolute; inset: 0; transform-origin: var(--mp-zoom-x) var(--mp-zoom-y); animation: mp-zoom var(--mp-duration) infinite, mp-origin var(--mp-duration) infinite; will-change: transform; } .mp-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .mp-m4 { opacity: 0; animation: mp-m4 var(--mp-duration) infinite; } .mp-m5e { opacity: 0; animation: mp-m5e var(--mp-duration) infinite; } .mp-m7e { opacity: 0; animation: mp-m7e var(--mp-duration) infinite; } .mp-m8 { opacity: 0; animation: mp-m8 var(--mp-duration) infinite; } .mp-m9 { opacity: 0; animation: mp-m9 var(--mp-duration) infinite; } .mp-m10 { opacity: 0; animation: mp-m10 var(--mp-duration) infinite; } .mp-m13 { opacity: 0; animation: mp-m13 var(--mp-duration) infinite; } /* --- the two typed fields ------------------------------------------------- */ .mp-field { position: absolute; opacity: 0; } .mp-field img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .mp-f-home { left: var(--mp-name-l); top: var(--mp-name-t); width: var(--mp-name-w); height: var(--mp-name-h); animation: mp-fld-home var(--mp-duration) infinite; } .mp-f-gal { left: var(--mp-panel-l); top: var(--mp-panel-t); width: var(--mp-panel-w); height: var(--mp-panel-h); animation: mp-fld-gal var(--mp-duration) infinite; } .mp-f-home img { animation: mp-type-home var(--mp-duration) infinite; } .mp-f-gal img { animation: mp-type-gal var(--mp-duration) infinite; } .mp-caret { position: absolute; top: 16%; bottom: 16%; width: 2px; background: #f4f7fb; opacity: 0; } /* the page-name row is white, so its caret has to be dark */ .mp-f-home .mp-caret { background: #14171c; animation: mp-caret-home var(--mp-duration) infinite; } .mp-f-gal .mp-caret { animation: mp-caret-gal var(--mp-duration) infinite; } /* --- cursor --------------------------------------------------------------- */ .mp-cursor-track { position: absolute; inset: 0; width: 100%; height: 100%; animation: mp-cursor var(--mp-duration) infinite; will-change: transform; pointer-events: none; } /* counter-scales the zoom so the pointer keeps a constant on-screen size */ .mp-cursor-scale { position: absolute; top: 0; left: 0; animation: mp-counterscale var(--mp-duration) infinite; transform-origin: 0 0; } .mp-arrow { display: block; width: var(--mp-cursor-size); height: auto; transform-origin: 0 0; animation: mp-press var(--mp-duration) infinite; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 55%)); overflow: visible; } .mp-ring { position: absolute; top: 0; left: 0; width: var(--mp-ring-size); height: var(--mp-ring-size); margin: calc(var(--mp-ring-size) / -2) 0 0 calc(var(--mp-ring-size) / -2); border-radius: 50%; border: 2.5px solid rgb(var(--mp-ring-color) / 90%); background: radial-gradient(circle, rgb(var(--mp-ring-color) / 30%) 0%, rgb(var(--mp-ring-color) / 0%) 70%); box-shadow: 0 0 0 2px rgb(255 255 255 / 22%); opacity: 0; animation: mp-ring var(--mp-duration) infinite; } /* ========================================================================== Keyframes ========================================================================== */ @keyframes mp-zoom { 0% { transform: scale(1); animation-timing-function: linear; } 2.825% { transform: scale(1); animation-timing-function: cubic-bezier(.32,0,.24,1); } 7.345% { transform: scale(var(--mp-zoom)); animation-timing-function: linear; } 32.203% { transform: scale(var(--mp-zoom)); animation-timing-function: cubic-bezier(.32,0,.24,1); } 36.441% { transform: scale(1); animation-timing-function: linear; } 72.881% { transform: scale(1); animation-timing-function: cubic-bezier(.32,0,.24,1); } 77.401% { transform: scale(var(--mp-zoom2)); animation-timing-function: linear; } 89.548% { transform: scale(var(--mp-zoom2)); animation-timing-function: cubic-bezier(.32,0,.24,1); } 92.938% { transform: scale(1); } 100% { transform: scale(1); } } /* Only ever moves while mp-zoom is holding scale(1) — see the header. */ @keyframes mp-origin { 0%, 71.186% { transform-origin: var(--mp-zoom-x) var(--mp-zoom-y); animation-timing-function: cubic-bezier(.4,0,.2,1); } 72.881% { transform-origin: var(--mp-zoom2-x) var(--mp-zoom2-y); } 93.500% { transform-origin: var(--mp-zoom2-x) var(--mp-zoom2-y); animation-timing-function: cubic-bezier(.4,0,.2,1); } 97.000% { transform-origin: var(--mp-zoom-x) var(--mp-zoom-y); } 100% { transform-origin: var(--mp-zoom-x) var(--mp-zoom-y); } } /* Generated by build.py — do not hand-edit. The cursor is counter-scaled so it keeps a constant on-screen size through a zoom, but interpolating the inverse linearly from 1 to 1/Z does NOT undo a zoom interpolating 1 to Z: linear in s and linear in 1/s agree only at the endpoints. Mid-ramp the product left 1 and the pointer swelled 10.7% at 1.9x, 20.4% at 2.4x, peaking a third of the way in. So each ramp steps through sampled reciprocals instead; residual 0.32px on an 18px cursor. Re-run build.py if any ramp timing changes. */ @keyframes mp-counterscale { 0.000% { scale: 1; animation-timing-function: linear; } 2.825% { scale: 1.0000; animation-timing-function: linear; } 3.327% { scale: 0.9569; animation-timing-function: linear; } 3.829% { scale: 0.8251; animation-timing-function: linear; } 4.332% { scale: 0.6912; animation-timing-function: linear; } 4.834% { scale: 0.6137; animation-timing-function: linear; } 5.336% { scale: 0.5718; animation-timing-function: linear; } 5.838% { scale: 0.5481; animation-timing-function: linear; } 6.341% { scale: 0.5349; animation-timing-function: linear; } 6.843% { scale: 0.5282; animation-timing-function: linear; } 7.345% { scale: var(--mp-zoom-inv); } 32.203% { scale: var(--mp-zoom-inv); animation-timing-function: linear; } 32.674% { scale: 0.5391; animation-timing-function: linear; } 33.145% { scale: 0.5924; animation-timing-function: linear; } 33.616% { scale: 0.6881; animation-timing-function: linear; } 34.087% { scale: 0.7871; animation-timing-function: linear; } 34.557% { scale: 0.8688; animation-timing-function: linear; } 35.028% { scale: 0.9297; animation-timing-function: linear; } 35.499% { scale: 0.9705; animation-timing-function: linear; } 35.970% { scale: 0.9931; animation-timing-function: linear; } 36.441% { scale: 1.0000; } 72.881% { scale: 1.0000; animation-timing-function: linear; } 73.383% { scale: 0.9345; animation-timing-function: linear; } 73.885% { scale: 0.7521; animation-timing-function: linear; } 74.388% { scale: 0.5900; animation-timing-function: linear; } 74.890% { scale: 0.5053; animation-timing-function: linear; } 75.392% { scale: 0.4619; animation-timing-function: linear; } 75.894% { scale: 0.4381; animation-timing-function: linear; } 76.397% { scale: 0.4250; animation-timing-function: linear; } 76.899% { scale: 0.4185; animation-timing-function: linear; } 77.401% { scale: var(--mp-zoom2-inv); } 89.548% { scale: var(--mp-zoom2-inv); animation-timing-function: linear; } 89.925% { scale: 0.4292; animation-timing-function: linear; } 90.301% { scale: 0.4830; animation-timing-function: linear; } 90.678% { scale: 0.5865; animation-timing-function: linear; } 91.055% { scale: 0.7038; animation-timing-function: linear; } 91.431% { scale: 0.8097; animation-timing-function: linear; } 91.808% { scale: 0.8948; animation-timing-function: linear; } 92.185% { scale: 0.9549; animation-timing-function: linear; } 92.561% { scale: 0.9893; animation-timing-function: linear; } 92.938% { scale: 1.0000; } 100.000% { scale: 1; } } /* ---- scene layers -------------------------------------------------------- */ /* Each fades in over the one below, holds, then CUTS to 0 at 85.4% — the moment m13 is fully opaque and everything beneath it is invisible anyway. That cut is what keeps the closing dissolve a two-layer crossfade (m13 -> m3). Fading them all out together instead, as this did originally, cross-dissolves the entire history: at the midpoint m10 contributed 17% and m9 13% of the composite — both Gallery-active — against m13's 22%, so the Gallery pill read STRONGER than Home and flashed just before the loop. */ @keyframes mp-m4 { 0%, 11.864% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 14.689% { opacity: 1; animation-timing-function: linear; } 85.400% { opacity: 1; animation-timing-function: steps(1, start); } 85.500% { opacity: 0; } 100% { opacity: 0; } } /* A cut: clearing a selection is instant. `steps(1, start)` is what makes that literally true — declaring the two keyframes 0.85% apart and letting them interpolate, as this did, is a 150ms dissolve from 'Page 1 selected' to an empty field. Soft-wiping a selection away is exactly what typing doesn't do. */ @keyframes mp-m5e { 0%, 17.232% { opacity: 0; animation-timing-function: steps(1, start); } 17.332% { opacity: 1; animation-timing-function: linear; } 85.400% { opacity: 1; animation-timing-function: steps(1, start); } 85.500% { opacity: 0; } 100% { opacity: 0; } } @keyframes mp-m7e { 0%, 35.593% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 39.266% { opacity: 1; animation-timing-function: linear; } 85.400% { opacity: 1; animation-timing-function: steps(1, start); } 85.500% { opacity: 0; } 100% { opacity: 0; } } @keyframes mp-m8 { 0%, 51.695% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 54.802% { opacity: 1; animation-timing-function: linear; } 85.400% { opacity: 1; animation-timing-function: steps(1, start); } 85.500% { opacity: 0; } 100% { opacity: 0; } } @keyframes mp-m9 { 0%, 59.605% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 63.277% { opacity: 1; animation-timing-function: linear; } 85.400% { opacity: 1; animation-timing-function: steps(1, start); } 85.500% { opacity: 0; } 100% { opacity: 0; } } @keyframes mp-m10 { 0%, 67.232% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 71.186% { opacity: 1; animation-timing-function: linear; } 85.400% { opacity: 1; animation-timing-function: steps(1, start); } 85.500% { opacity: 0; } 100% { opacity: 0; } } /* The pill slides Gallery -> Home. Slower in than the other cuts (0.6s): it is a dissolve between two different page contents, not the appearance of a panel. */ @keyframes mp-m13 { 0%, 81.638% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 85.028% { opacity: 1; } 95.198% { opacity: 1; animation-timing-function: cubic-bezier(.4,0,.2,1); } 98.588% { opacity: 0; } 100% { opacity: 0; } } /* Same cut as the scene layers — these sit in the middle of the stack. Each appears on the same frame as the emptied field it overlays, so it cuts in too. */ @keyframes mp-fld-home { 0%, 17.232% { opacity: 0; animation-timing-function: steps(1, start); } 17.332% { opacity: 1; animation-timing-function: linear; } 85.400% { opacity: 1; animation-timing-function: steps(1, start); } 85.500% { opacity: 0; } 100% { opacity: 0; } } @keyframes mp-fld-gal { 0%, 41.525% { opacity: 0; animation-timing-function: steps(1, start); } 41.625% { opacity: 1; animation-timing-function: linear; } 85.400% { opacity: 1; animation-timing-function: steps(1, start); } 85.500% { opacity: 0; } 100% { opacity: 0; } } /* steps() advances the reveal character by character. */ @keyframes mp-type-home { 0%, 17.232% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(4, end); } 23.729% { clip-path: inset(0 var(--mp-name-hide) 0 0); } 100% { clip-path: inset(0 var(--mp-name-hide) 0 0); } } @keyframes mp-type-gal { 0%, 41.525% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(7, end); } 46.893% { clip-path: inset(0 var(--mp-gal-hide) 0 0); } 100% { clip-path: inset(0 var(--mp-gal-hide) 0 0); } } @keyframes mp-caret-home { 0%, 17.180% { left: 0%; opacity: 0; } 17.232% { left: 0%; opacity: 1; animation-timing-function: steps(4, end); } 23.729% { left: var(--mp-name-reveal); opacity: 1; } 25.141% { left: var(--mp-name-reveal); opacity: 0; } 100% { left: var(--mp-name-reveal); opacity: 0; } } @keyframes mp-caret-gal { 0%, 41.440% { left: 0%; opacity: 0; } 41.525% { left: 0%; opacity: 1; animation-timing-function: steps(7, end); } 46.893% { left: var(--mp-gal-reveal); opacity: 1; } 48.254% { left: var(--mp-gal-reveal); opacity: 0; } 100% { left: var(--mp-gal-reveal); opacity: 0; } } @keyframes mp-cursor { 0%, 2.825% { transform: translate(var(--mp-park-x), var(--mp-park-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 11.299% { transform: translate(var(--mp-pencil-x), var(--mp-pencil-y)); animation-timing-function: linear; } 14.689% { transform: translate(var(--mp-pencil-x), var(--mp-pencil-y)); animation-timing-function: cubic-bezier(.4,0,.3,1); } 17.232% { transform: translate(var(--mp-namerow-x), var(--mp-namerow-y)); animation-timing-function: linear; } 26.554% { transform: translate(var(--mp-namerow-x), var(--mp-namerow-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 31.073% { transform: translate(var(--mp-addpage-x), var(--mp-addpage-y)); animation-timing-function: linear; } 32.203% { transform: translate(var(--mp-addpage-x), var(--mp-addpage-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 39.266% { transform: translate(var(--mp-namefld-x), var(--mp-namefld-y)); animation-timing-function: linear; } 46.893% { transform: translate(var(--mp-namefld-x), var(--mp-namefld-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 51.130% { transform: translate(var(--mp-galtype-x), var(--mp-galtype-y)); animation-timing-function: linear; } 52.260% { transform: translate(var(--mp-galtype-x), var(--mp-galtype-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 59.040% { transform: translate(var(--mp-addbtn-x), var(--mp-addbtn-y)); animation-timing-function: linear; } 60.169% { transform: translate(var(--mp-addbtn-x), var(--mp-addbtn-y)); animation-timing-function: cubic-bezier(.4,0,.3,1); } 63.277% { transform: translate(var(--mp-park-x), var(--mp-park-y)); animation-timing-function: linear; } /* The park point sits ABOVE the closing window, so the pointer descends into frame as the zoom settles rather than popping into existence inside it. */ 74.576% { transform: translate(var(--mp-park-x), var(--mp-park-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 81.073% { transform: translate(var(--mp-hometab-x), var(--mp-hometab-y)); animation-timing-function: linear; } 92.938% { transform: translate(var(--mp-hometab-x), var(--mp-hometab-y)); animation-timing-function: cubic-bezier(.4,0,.3,1); } 98.588% { transform: translate(var(--mp-park-x), var(--mp-park-y)); } 100% { transform: translate(var(--mp-park-x), var(--mp-park-y)); } } @keyframes mp-press { 0%, 11.017% { scale: 1; } 11.299% { scale: 0.82; } 12.429% { scale: 1; } 30.791% { scale: 1; } 31.073% { scale: 0.82; } 32.203% { scale: 1; } 50.847% { scale: 1; } 51.130% { scale: 0.82; } 52.260% { scale: 1; } 58.757% { scale: 1; } 59.040% { scale: 0.82; } 60.169% { scale: 1; } 80.791% { scale: 1; } 81.073% { scale: 0.82; } 82.203% { scale: 1; } 100% { scale: 1; } } @keyframes mp-ring { 0%, 11.130% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 11.299% { opacity: 0.85; scale: 0.30; } 14.124% { opacity: 0; scale: 1; } 30.900% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 31.073% { opacity: 0.85; scale: 0.30; } 33.898% { opacity: 0; scale: 1; } 50.960% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 51.130% { opacity: 0.85; scale: 0.30; } 53.955% { opacity: 0; scale: 1; } 58.870% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 59.040% { opacity: 0.85; scale: 0.30; } 61.864% { opacity: 0; scale: 1; } 80.900% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 81.073% { opacity: 0.85; scale: 0.30; } 83.898% { opacity: 0; scale: 1; } 100% { opacity: 0; scale: 1; } } /* --- paused / reduced motion --------------------------------------------- */ .mp-preview.is-paused .mp-stage, .mp-preview.is-paused .mp-layer, .mp-preview.is-paused .mp-field, .mp-preview.is-paused .mp-field img, .mp-preview.is-paused .mp-caret, .mp-preview.is-paused .mp-cursor-track, .mp-preview.is-paused .mp-cursor-scale, .mp-preview.is-paused .mp-arrow, .mp-preview.is-paused .mp-ring { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .mp-stage, .mp-layer, .mp-field, .mp-field img, .mp-caret, .mp-cursor-track, .mp-cursor-scale, .mp-arrow, .mp-ring { animation: none !important; } .mp-m4, .mp-m5e, .mp-m7e, .mp-m8, .mp-m9, .mp-m10, .mp-field { opacity: 0; } /* m13 over m10: two pages in the list AND a nav bar in the preview, which is the feature. m10 shows a fuller phone but no evidence of a second page. */ .mp-m13 { opacity: 1; } .mp-cursor-track { display: none; } }