/* ========================================================================== Landing Page Editor preview — 18.1s, nine scenes, eight clicks -------------------------------------------------------------------------- The whole build flow: pick Build a Page, filter templates to Product, take Flash Drop, add a Contact Us block, switch to the Midnight theme, scroll back up and publish. Trimmed from 22.8s -------------------------------------------------------------------------- 4.7s came out without dropping a single step: zoom ramps 0.65s -> 0.42s, six of them -1.38s two 1.65s cursor travels -> 0.95s -1.40s 'Applying theme...' held 0.9s -> 0.45s -0.45s dead air before each of the three zooms -0.80s the two template-gallery travels -0.40s the tail after Publish -0.45s What was NOT cut, and why: * The '+ Add' zoom. It looks like the cheapest 1.3s in the timeline, but at 720px that button is ~21px wide with 5px text, and this same stylesheet runs at 420px in a marketing row. Unzoomed the click is on something the viewer cannot read. All three zooms are load-bearing for the same reason. * The Product filter click. Dropping it would save ~1.9s but there is no clean way to do it: the gallery opens on 'All 33' and Flash Drop is not among the visible cards, so the only routes are to click a template the brief didn't ask for, or to crossfade the filter into place with nobody touching it. Not cropped, unlike every other preview -------------------------------------------------------------------------- The others drop the app's nav sidebar to get a squarer frame. Here the editor needs its LEFT panel — the BLOCKS list is where the new Contact Us block shows up, so it is content, not chrome — and its RIGHT panel holds the theme picker. The editor already spans the full width, and every frame has to share one output box to stack as layers. So this runs at the native 1.76 and is a different shape from the ~1.43 tiles. Beats -------------------------------------------------------------------------- 0.00 - 1.93% hold the Create screen 1.93 - 5.25% cursor to the 'Build a Page' card 5.25 - 6.35% press + click ring 5.80 - 8.84% crossfade to the template gallery (All 33) 8.84 - 13.26% cursor to the 'Product' filter chip 13.26 - 14.37% press + click ring 13.81 - 16.58% crossfade to Product (3 templates) 16.58 - 21.55% cursor to the 'Flash Drop' card 21.55 - 22.65% press + click ring 22.65 - 26.24% crossfade into the editor 27.62 - 29.95% zoom in 1.9x toward '+ Add' 27.62 - 32.60% cursor to it, arriving as the zoom settles 32.60 - 33.70% press + click ring 33.70 - 36.02% zoom back out 35.36 - 38.67% the Add a block modal opens 38.67 - 43.92% cursor to the 'Contact Us' block 43.92 - 45.03% press + click ring 45.03 - 48.62% modal closes; the block is added and the preview jumps to it 50.28 - 52.60% zoom in toward 'Theme' 52.60 - 55.25% cursor to it 55.25 - 56.35% press + click ring 56.35 - 58.67% zoom back out 57.46 - 60.77% the Themes panel opens 60.77 - 66.02% cursor to the 'Midnight' theme 66.02 - 67.13% press + click ring 67.13 - 69.34% 'Applying theme...' 69.34 - 71.82% holding on that 71.82 - 75.14% Midnight lands 77.35 - 83.98% the phone preview scrolls back up, 829px 83.98 - 85.91% hold at the top 85.91 - 88.23% zoom in toward 'Publish' 88.23 - 90.88% cursor to it 90.88 - 91.99% press + click ring 91.99 - 94.31% zoom back out 95.86 - 98.90% crossfade back to the start 98.90 - 100 % hold, loop Three zoom anchors, and one of them is not a button centre -------------------------------------------------------------------------- '+ Add' is top-left, 'Theme' and 'Publish' are top-right but far apart, so transform-origin walks between three anchors — only ever while scale is 1, where moving it has no visual effect, and it returns to the first by 100% so the loop is seamless. 'Publish' is anchored ABOVE its own centre: its top edge sits 1.26% from the frame top and anchoring on the centre holds the view only to 1.42%, clipping it. build.py checks all three against measured extents. The scroll is inside the phone -------------------------------------------------------------------------- Only the phone mock's screen scrolls; its status bar and home indicator hold still, as does the whole editor around it. So the scrolling window is a small clipped rect over the phone, not the frame. 829px, measured pixel-exact — a narrow correlation band ties between 828 and 830 because the preview is a scaled render, so build.py uses a tall band. Layer order, bottom to top -------------------------------------------------------------------------- p1 Create screen (always opaque; the loop returns here) p2 template gallery, All p3 gallery, Product p6 editor, 5 blocks p7 Add a block modal p8 editor, 6 blocks p9 Themes panel open p5 'Applying theme...' .lpe-final = p10 (Midnight) + the phone's scrolling window cursor ========================================================================== */ .lpe-preview { /* ---- from build.py ---- */ --lpe-duration: 18.1s; --lpe-aspect: 1200 / 682; --lpe-build-x: 58.40%; --lpe-build-y: 52.28%; --lpe-product-x: 22.76%; --lpe-product-y: 29.34%; --lpe-flash-x: 65.03%; --lpe-flash-y: 58.98%; --lpe-add-x: 11.97%; --lpe-add-y: 8.80%; --lpe-contact-x: 49.97%; --lpe-contact-y: 44.01%; --lpe-theme-x: 71.26%; --lpe-theme-y: 2.93%; --lpe-midnight-x: 83.13%; --lpe-midnight-y: 47.90%; --lpe-publish-x: 93.74%; --lpe-publish-y: 2.99%; --lpe-phone-l: 34.1497%; --lpe-phone-t: 12.1557%; --lpe-phone-w: 23.7075%; --lpe-phone-h: 85.2695%; --lpe-scroll: -36.7954%; /* 829px of the strip's own 2253px */ --lpe-zoom-add-x: 11.97%; --lpe-zoom-add-y: 8.80%; --lpe-zoom-theme-x: 71.26%; --lpe-zoom-theme-y: 2.93%; --lpe-zoom-publish-x: 93.74%; --lpe-zoom-publish-y: 2.40%; --lpe-park-x: 50%; --lpe-park-y: 40%; --lpe-zoom: 1.9; --lpe-zoom-inv: 0.5263; --lpe-cursor-size: 18px; --lpe-ring-size: 30px; --lpe-ring-color: 216 60 45; --lpe-radius: 12px; position: relative; width: 100%; aspect-ratio: var(--lpe-aspect); overflow: hidden; border-radius: var(--lpe-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; } .lpe-stage { position: absolute; inset: 0; transform-origin: var(--lpe-zoom-add-x) var(--lpe-zoom-add-y); animation: lpe-zoom var(--lpe-duration) infinite; will-change: transform; } .lpe-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .lpe-p2 { opacity: 0; animation: lpe-p2 var(--lpe-duration) infinite; } .lpe-p3 { opacity: 0; animation: lpe-p3 var(--lpe-duration) infinite; } .lpe-p6 { opacity: 0; animation: lpe-p6 var(--lpe-duration) infinite; } .lpe-p7 { opacity: 0; animation: lpe-p7 var(--lpe-duration) infinite; } .lpe-p8 { opacity: 0; animation: lpe-p8 var(--lpe-duration) infinite; } .lpe-p9 { opacity: 0; animation: lpe-p9 var(--lpe-duration) infinite; } .lpe-p5 { opacity: 0; animation: lpe-p5 var(--lpe-duration) infinite; } /* p10 and the phone's scrolling window arrive together. */ .lpe-final { position: absolute; inset: 0; opacity: 0; animation: lpe-final var(--lpe-duration) infinite; will-change: opacity; } .lpe-phone { position: absolute; left: var(--lpe-phone-l); top: var(--lpe-phone-t); width: var(--lpe-phone-w); height: var(--lpe-phone-h); overflow: hidden; /* this is what makes the scroll a scroll */ } .lpe-strip { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; animation: lpe-scroll var(--lpe-duration) infinite; will-change: transform; } /* --- cursor --------------------------------------------------------------- */ .lpe-cursor-track { position: absolute; inset: 0; width: 100%; height: 100%; animation: lpe-cursor var(--lpe-duration) infinite; will-change: transform; pointer-events: none; } .lpe-cursor-scale { position: absolute; top: 0; left: 0; animation: lpe-counterscale var(--lpe-duration) infinite; transform-origin: 0 0; } .lpe-arrow { display: block; width: var(--lpe-cursor-size); height: auto; transform-origin: 0 0; animation: lpe-press var(--lpe-duration) infinite; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 55%)); overflow: visible; } .lpe-ring { position: absolute; top: 0; left: 0; width: var(--lpe-ring-size); height: var(--lpe-ring-size); margin: calc(var(--lpe-ring-size) / -2) 0 0 calc(var(--lpe-ring-size) / -2); border-radius: 50%; border: 2.5px solid rgb(var(--lpe-ring-color) / 90%); background: radial-gradient(circle, rgb(var(--lpe-ring-color) / 30%) 0%, rgb(var(--lpe-ring-color) / 0%) 70%); box-shadow: 0 0 0 2px rgb(255 255 255 / 22%); opacity: 0; animation: lpe-ring var(--lpe-duration) infinite; } /* ========================================================================== Keyframes ========================================================================== */ @keyframes lpe-zoom { 0% { transform: scale(1); transform-origin: var(--lpe-zoom-add-x) var(--lpe-zoom-add-y); animation-timing-function: linear; } 27.624% { transform: scale(1); transform-origin: var(--lpe-zoom-add-x) var(--lpe-zoom-add-y); animation-timing-function: cubic-bezier(.32,0,.24,1); } 29.945% { transform: scale(var(--lpe-zoom)); transform-origin: var(--lpe-zoom-add-x) var(--lpe-zoom-add-y); animation-timing-function: linear; } 33.702% { transform: scale(var(--lpe-zoom)); transform-origin: var(--lpe-zoom-add-x) var(--lpe-zoom-add-y); animation-timing-function: cubic-bezier(.32,0,.24,1); } 36.022% { transform: scale(1); transform-origin: var(--lpe-zoom-add-x) var(--lpe-zoom-add-y); } /* The walk starts a beat AFTER the ramp's last keyframe, not on it. The ease flattens as it lands, so at the ramp's final keyframe the scale still reads 1.0006 — enough that moving the origin there shifts the frame by a fraction of a pixel. Holding to 37% costs nothing and makes the invariant exact. */ 37.000% { transform: scale(1); transform-origin: var(--lpe-zoom-add-x) var(--lpe-zoom-add-y); } /* anchor walks to 'Theme' — scale is 1, so nothing moves */ 40.000% { transform: scale(1); transform-origin: var(--lpe-zoom-theme-x) var(--lpe-zoom-theme-y); } 50.276% { transform: scale(1); transform-origin: var(--lpe-zoom-theme-x) var(--lpe-zoom-theme-y); animation-timing-function: cubic-bezier(.32,0,.24,1); } 52.597% { transform: scale(var(--lpe-zoom)); transform-origin: var(--lpe-zoom-theme-x) var(--lpe-zoom-theme-y); animation-timing-function: linear; } 56.354% { transform: scale(var(--lpe-zoom)); transform-origin: var(--lpe-zoom-theme-x) var(--lpe-zoom-theme-y); animation-timing-function: cubic-bezier(.32,0,.24,1); } 58.674% { transform: scale(1); transform-origin: var(--lpe-zoom-theme-x) var(--lpe-zoom-theme-y); } 60.000% { transform: scale(1); transform-origin: var(--lpe-zoom-theme-x) var(--lpe-zoom-theme-y); } /* and to 'Publish' */ 70.000% { transform: scale(1); transform-origin: var(--lpe-zoom-publish-x) var(--lpe-zoom-publish-y); } 85.912% { transform: scale(1); transform-origin: var(--lpe-zoom-publish-x) var(--lpe-zoom-publish-y); animation-timing-function: cubic-bezier(.32,0,.24,1); } 88.232% { transform: scale(var(--lpe-zoom)); transform-origin: var(--lpe-zoom-publish-x) var(--lpe-zoom-publish-y); animation-timing-function: linear; } 91.989% { transform: scale(var(--lpe-zoom)); transform-origin: var(--lpe-zoom-publish-x) var(--lpe-zoom-publish-y); animation-timing-function: cubic-bezier(.32,0,.24,1); } 94.309% { transform: scale(1); transform-origin: var(--lpe-zoom-publish-x) var(--lpe-zoom-publish-y); } 96.000% { transform: scale(1); transform-origin: var(--lpe-zoom-publish-x) var(--lpe-zoom-publish-y); } /* back to the first anchor so 100% matches 0% */ 100% { transform: scale(1); transform-origin: var(--lpe-zoom-add-x) var(--lpe-zoom-add-y); } } /* Generated by build.py — do not hand-edit. Sampling 1/scale instead of interpolating to it; see shared/counterscale.py. Residual 0.21px on an 18px cursor, against 1.9px for the naive spelling. */ @keyframes lpe-counterscale { 0.000% { scale: 1; animation-timing-function: linear; } 27.624% { scale: 1.0000; animation-timing-function: linear; } 27.882% { scale: 0.9569; animation-timing-function: linear; } 28.140% { scale: 0.8251; animation-timing-function: linear; } 28.398% { scale: 0.6912; animation-timing-function: linear; } 28.656% { scale: 0.6137; animation-timing-function: linear; } 28.913% { scale: 0.5718; animation-timing-function: linear; } 29.171% { scale: 0.5481; animation-timing-function: linear; } 29.429% { scale: 0.5349; animation-timing-function: linear; } 29.687% { scale: 0.5282; animation-timing-function: linear; } 29.945% { scale: var(--lpe-zoom-inv); } 33.702% { scale: var(--lpe-zoom-inv); animation-timing-function: linear; } 33.960% { scale: 0.5391; animation-timing-function: linear; } 34.218% { scale: 0.5924; animation-timing-function: linear; } 34.475% { scale: 0.6881; animation-timing-function: linear; } 34.733% { scale: 0.7871; animation-timing-function: linear; } 34.991% { scale: 0.8688; animation-timing-function: linear; } 35.249% { scale: 0.9297; animation-timing-function: linear; } 35.506% { scale: 0.9705; animation-timing-function: linear; } 35.764% { scale: 0.9931; animation-timing-function: linear; } 36.022% { scale: 1.0000; } 50.276% { scale: 1.0000; animation-timing-function: linear; } 50.534% { scale: 0.9569; animation-timing-function: linear; } 50.792% { scale: 0.8251; animation-timing-function: linear; } 51.050% { scale: 0.6912; animation-timing-function: linear; } 51.308% { scale: 0.6137; animation-timing-function: linear; } 51.565% { scale: 0.5718; animation-timing-function: linear; } 51.823% { scale: 0.5481; animation-timing-function: linear; } 52.081% { scale: 0.5349; animation-timing-function: linear; } 52.339% { scale: 0.5282; animation-timing-function: linear; } 52.597% { scale: var(--lpe-zoom-inv); } 56.354% { scale: var(--lpe-zoom-inv); animation-timing-function: linear; } 56.612% { scale: 0.5391; animation-timing-function: linear; } 56.870% { scale: 0.5924; animation-timing-function: linear; } 57.127% { scale: 0.6881; animation-timing-function: linear; } 57.385% { scale: 0.7871; animation-timing-function: linear; } 57.643% { scale: 0.8688; animation-timing-function: linear; } 57.901% { scale: 0.9297; animation-timing-function: linear; } 58.158% { scale: 0.9705; animation-timing-function: linear; } 58.416% { scale: 0.9931; animation-timing-function: linear; } 58.674% { scale: 1.0000; } 85.912% { scale: 1.0000; animation-timing-function: linear; } 86.170% { scale: 0.9569; animation-timing-function: linear; } 86.428% { scale: 0.8251; animation-timing-function: linear; } 86.685% { scale: 0.6912; animation-timing-function: linear; } 86.943% { scale: 0.6137; animation-timing-function: linear; } 87.201% { scale: 0.5718; animation-timing-function: linear; } 87.459% { scale: 0.5481; animation-timing-function: linear; } 87.716% { scale: 0.5349; animation-timing-function: linear; } 87.974% { scale: 0.5282; animation-timing-function: linear; } 88.232% { scale: var(--lpe-zoom-inv); } 91.989% { scale: var(--lpe-zoom-inv); animation-timing-function: linear; } 92.247% { scale: 0.5391; animation-timing-function: linear; } 92.505% { scale: 0.5924; animation-timing-function: linear; } 92.762% { scale: 0.6881; animation-timing-function: linear; } 93.020% { scale: 0.7871; animation-timing-function: linear; } 93.278% { scale: 0.8688; animation-timing-function: linear; } 93.536% { scale: 0.9297; animation-timing-function: linear; } 93.793% { scale: 0.9705; animation-timing-function: linear; } 94.051% { scale: 0.9931; animation-timing-function: linear; } 94.309% { scale: 1.0000; } 100.000% { scale: 1; } } /* Each scene fades in over the last and stays until the loop returns to p1. */ @keyframes lpe-p2 { 0%, 5.801% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 8.840% { opacity: 1; } 75.500% { opacity: 1; animation-timing-function: steps(1, start); } 75.600% { opacity: 0; } 100% { opacity: 0; } } @keyframes lpe-p3 { 0%, 13.812% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 16.575% { opacity: 1; } 75.500% { opacity: 1; animation-timing-function: steps(1, start); } 75.600% { opacity: 0; } 100% { opacity: 0; } } @keyframes lpe-p6 { 0%, 22.652% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 26.243% { opacity: 1; } 75.500% { opacity: 1; animation-timing-function: steps(1, start); } 75.600% { opacity: 0; } 100% { opacity: 0; } } @keyframes lpe-p7 { 0%, 35.359% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 38.674% { opacity: 1; } 75.500% { opacity: 1; animation-timing-function: steps(1, start); } 75.600% { opacity: 0; } 100% { opacity: 0; } } @keyframes lpe-p8 { 0%, 45.028% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 48.618% { opacity: 1; } 75.500% { opacity: 1; animation-timing-function: steps(1, start); } 75.600% { opacity: 0; } 100% { opacity: 0; } } @keyframes lpe-p9 { 0%, 57.459% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 60.773% { opacity: 1; } 75.500% { opacity: 1; animation-timing-function: steps(1, start); } 75.600% { opacity: 0; } 100% { opacity: 0; } } @keyframes lpe-p5 { 0%, 67.127% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 69.337% { opacity: 1; } 75.500% { opacity: 1; animation-timing-function: steps(1, start); } 75.600% { opacity: 0; } 100% { opacity: 0; } } @keyframes lpe-final { 0%, 71.823% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 75.138% { opacity: 1; } 95.856% { opacity: 1; animation-timing-function: cubic-bezier(.4,0,.2,1); } 98.895% { opacity: 0; } 100% { opacity: 0; } } /* Starts where p10 sits (scrolled), then rides back to the top. */ @keyframes lpe-scroll { 0%, 77.348% { transform: translateY(var(--lpe-scroll)); animation-timing-function: cubic-bezier(.36,0,.22,1); } 83.978% { transform: translateY(0); } 100% { transform: translateY(0); } } @keyframes lpe-cursor { 0%, 1.934% { transform: translate(var(--lpe-park-x), var(--lpe-park-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 5.249% { transform: translate(var(--lpe-build-x), var(--lpe-build-y)); animation-timing-function: linear; } 8.840% { transform: translate(var(--lpe-build-x), var(--lpe-build-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 13.260% { transform: translate(var(--lpe-product-x), var(--lpe-product-y)); animation-timing-function: linear; } 16.575% { transform: translate(var(--lpe-product-x), var(--lpe-product-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 21.547% { transform: translate(var(--lpe-flash-x), var(--lpe-flash-y)); animation-timing-function: linear; } 22.652% { transform: translate(var(--lpe-flash-x), var(--lpe-flash-y)); animation-timing-function: cubic-bezier(.4,0,.3,1); } 26.243% { transform: translate(var(--lpe-park-x), var(--lpe-park-y)); animation-timing-function: linear; } 27.624% { transform: translate(var(--lpe-park-x), var(--lpe-park-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 32.596% { transform: translate(var(--lpe-add-x), var(--lpe-add-y)); animation-timing-function: linear; } 36.022% { transform: translate(var(--lpe-add-x), var(--lpe-add-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 43.923% { transform: translate(var(--lpe-contact-x), var(--lpe-contact-y)); animation-timing-function: linear; } 45.028% { transform: translate(var(--lpe-contact-x), var(--lpe-contact-y)); animation-timing-function: cubic-bezier(.4,0,.3,1); } 48.618% { transform: translate(var(--lpe-park-x), var(--lpe-park-y)); animation-timing-function: linear; } 50.276% { transform: translate(var(--lpe-park-x), var(--lpe-park-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 55.249% { transform: translate(var(--lpe-theme-x), var(--lpe-theme-y)); animation-timing-function: linear; } 58.674% { transform: translate(var(--lpe-theme-x), var(--lpe-theme-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 66.022% { transform: translate(var(--lpe-midnight-x), var(--lpe-midnight-y)); animation-timing-function: linear; } 67.127% { transform: translate(var(--lpe-midnight-x), var(--lpe-midnight-y)); animation-timing-function: cubic-bezier(.4,0,.3,1); } 69.500% { transform: translate(var(--lpe-park-x), var(--lpe-park-y)); animation-timing-function: linear; } 85.912% { transform: translate(var(--lpe-park-x), var(--lpe-park-y)); animation-timing-function: cubic-bezier(.42,0,.22,1); } 90.884% { transform: translate(var(--lpe-publish-x), var(--lpe-publish-y)); animation-timing-function: linear; } 94.309% { transform: translate(var(--lpe-publish-x), var(--lpe-publish-y)); animation-timing-function: cubic-bezier(.4,0,.3,1); } 98.895% { transform: translate(var(--lpe-park-x), var(--lpe-park-y)); } 100% { transform: translate(var(--lpe-park-x), var(--lpe-park-y)); } } @keyframes lpe-press { 0%, 4.972% { scale: 1; } 5.249% { scale: 0.82; } 6.354% { scale: 1; } 12.983% { scale: 1; } 13.260% { scale: 0.82; } 14.365% { scale: 1; } 21.271% { scale: 1; } 21.547% { scale: 0.82; } 22.652% { scale: 1; } 32.320% { scale: 1; } 32.596% { scale: 0.82; } 33.702% { scale: 1; } 43.646% { scale: 1; } 43.923% { scale: 0.82; } 45.028% { scale: 1; } 54.972% { scale: 1; } 55.249% { scale: 0.82; } 56.354% { scale: 1; } 65.746% { scale: 1; } 66.022% { scale: 0.82; } 67.127% { scale: 1; } 90.608% { scale: 1; } 90.884% { scale: 0.82; } 91.989% { scale: 1; } 100% { scale: 1; } } @keyframes lpe-ring { 0%, 4.917% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 5.249% { opacity: 0.85; scale: 0.30; } 8.011% { opacity: 0; scale: 1; } 12.928% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 13.260% { opacity: 0.85; scale: 0.30; } 16.022% { opacity: 0; scale: 1; } 21.216% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 21.547% { opacity: 0.85; scale: 0.30; } 24.309% { opacity: 0; scale: 1; } 32.265% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 32.596% { opacity: 0.85; scale: 0.30; } 35.359% { opacity: 0; scale: 1; } 43.591% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 43.923% { opacity: 0.85; scale: 0.30; } 46.685% { opacity: 0; scale: 1; } 54.917% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 55.249% { opacity: 0.85; scale: 0.30; } 58.011% { opacity: 0; scale: 1; } 65.691% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 66.022% { opacity: 0.85; scale: 0.30; } 68.784% { opacity: 0; scale: 1; } 90.553% { opacity: 0; scale: 0.30; animation-timing-function: cubic-bezier(.2,.7,.3,1); } 90.884% { opacity: 0.85; scale: 0.30; } 93.646% { opacity: 0; scale: 1; } 100% { opacity: 0; scale: 1; } } /* --- paused / reduced motion --------------------------------------------- */ .lpe-preview.is-paused .lpe-stage, .lpe-preview.is-paused .lpe-layer, .lpe-preview.is-paused .lpe-final, .lpe-preview.is-paused .lpe-strip, .lpe-preview.is-paused .lpe-cursor-track, .lpe-preview.is-paused .lpe-cursor-scale, .lpe-preview.is-paused .lpe-arrow, .lpe-preview.is-paused .lpe-ring { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .lpe-stage, .lpe-layer, .lpe-final, .lpe-strip, .lpe-cursor-track, .lpe-cursor-scale, .lpe-arrow, .lpe-ring { animation: none !important; } .lpe-p2, .lpe-p3, .lpe-p6, .lpe-p7, .lpe-p8, .lpe-p9, .lpe-p5 { opacity: 0; } .lpe-final { opacity: 1; } /* the payoff: the themed page, ready to publish */ .lpe-strip { transform: translateY(0); } .lpe-cursor-track { display: none; } }