/* showcase.css — owned by P8 PR-3, reworked by PR-9 and v3 (the owner's 2026-10-08 request: three short 3-second promo animations of the services, rotating by themselves, only their short title under them; the P8 plan 3.3, D-302, D-303). web/account.py links it from the auth document only while AUTH_V2 is on (with auth.css, before loader.css). Every rule here is scoped under body.auth.as-a2; no @import, no url() (tests/core/test_account_app.py); no GIF, video, canvas or image: the demonstrations are dom.js nodes and inline SVG moved by CSS keyframes on classes (the CSP: style-src self). The motion rule (C-29: app.css removes every animation under reduced motion — the calm version at the end then plays its own discrete states — and .a2-still does while paused): every part's base style is its FINAL state, so a still demonstration shows its outcome (Solved / Booked / Verified). * a lasting part animates `from` its start state (the head may turn at a middle step) and has NO end step — its end is the base style — `animation-fill-mode: both` (the start waits for the delay); * a passing effect (.a2-fx: the scan beam, the badge's ping, the detection frames, the status line and its spinner, the script's highlight, a glow, the face's scan ring, line and landmarks) is hidden in its base style (opacity 0) and animates with an `a2-fx-*` keyframes whose last step is hidden again, `animation-fill-mode: backwards` (once played it is its base again: hidden). Only transforms and opacity move: 60 fps, nothing outside the panel. No animation on a ::before or ::after (app.css's reduced-motion rule reaches elements only). The timing rule (each demonstration's motion ends by 2.5 s, its outcome then holds until the 3 s crossfade): a demonstration's rule that sets an animation-delay, animation-duration or animation-iteration-count sets the delay AND the duration together, so the end read from that one rule is the part's real end (tests/core/test_p8_showcase.py; the browser test measures it too). The progress bar's segment is the one part timed to the advance itself (3 s). Parts (js/core/showcase.js): .a2-show (ltr|rtl, a2-still while paused, a2-reduced: the calm version) holds the view (.a2-view: the decorative stage .a2-stage — its progress bar .a2-progress, the demonstration .a2-frame-, an outgoing one .a2-leaving while it fades — and the Pause/Play icon button .a2-play on its top corner), the title (.a2-caption > .a2-caption-text, an outgoing one .a2-leaving) and a visually hidden status line. Inside a demonstration (dir=ltr: a picture of a page) every part is placed in percent of the demonstration, so the script's highlight (a layer the demonstration's size, its box at its corner) lands on each date exactly at every size. No mouse pointer and no click (the owner, 2026-10-08: "show video as automate handling"): the AI and the script mark the targets by themselves (a glow, not a click's ripple). */ /* ── the showcase, its view and stage (D-302's sizing: both axes, so short laptops fit) ─────────────────────────── */ body.auth.as-a2 .a2-show { display: none; } /* The stage's height is what the brand column leaves once everything under and around it is counted (--a2-room): the v2 header (88 px), the column's padding, the title, the gaps and the legal footer — so the column never scrolls and the footer stays in view (1024x600, 1366x657, 1280x720: browser_p8_showcase.py). */ @media (min-width: 768px) and (min-height: 540px) { body.auth.as-a2 .a2-show { --a2-room: 270px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; inline-size: min(440px, 100%); margin-inline: auto; color: var(--as-neutral-0); container-type: inline-size; } } @media (min-width: 1280px) { body.auth.as-a2 .a2-show { margin-inline: auto 48px; } /* toward the seam (the end side) */ } body.auth.as-a2 .a2-view { position: relative; inline-size: min(100%, calc((100dvh - var(--a2-room)) * 14 / 15)); margin-inline: auto; } body.auth.as-a2 .a2-stage { position: relative; box-sizing: border-box; display: grid; grid-template: 1fr / 1fr; inline-size: 100%; aspect-ratio: 14 / 15; padding: max(13%, 46px) 6% 6%; background: radial-gradient(120% 70% at 50% 0%, rgba(109, 155, 255, .34), transparent 62%), var(--as-brand-800); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--as-radius-30); box-shadow: 0 30px 60px -30px rgba(5, 11, 30, .6); container-type: inline-size; overflow: hidden; } /* the progress bar: one segment per demonstration (done: full; on show: filling for the 3 s; next: empty); it runs in the page's direction, beside the Pause button (28 px, 10 px from the top and the end side) */ body.auth.as-a2 .a2-progress { position: absolute; inset-block-start: 22px; inset-inline: 6% 52px; display: flex; gap: 6px; block-size: 4px; } body.auth.as-a2 .a2-seg { position: relative; flex: 1 1 0; overflow: hidden; border-radius: var(--as-radius-pill); background: rgba(255, 255, 255, .26); } body.auth.as-a2 .a2-seg-fill { position: absolute; inset: 0; background: var(--as-neutral-0); transform: scaleX(0); transform-origin: left center; } body.auth.as-a2 .a2-show.rtl .a2-seg-fill { transform-origin: right center; } body.auth.as-a2 .a2-seg-done .a2-seg-fill, body.auth.as-a2 .a2-seg-now .a2-seg-fill { transform: none; } /* ── a demonstration: a white card (a picture of a page, white in both themes); every part placed in percent ──── */ body.auth.as-a2 .a2-frame { grid-area: 1 / 1; position: relative; box-sizing: border-box; min-inline-size: 0; overflow: hidden; container-type: inline-size; background: var(--as-neutral-0); color: var(--as-neutral-950); border-radius: var(--as-radius-22); box-shadow: var(--as-shadow-l); line-height: 1.25; text-align: start; } body.auth.as-a2 .a2-frame span, body.auth.as-a2 .a2-frame bdi { display: block; } body.auth.as-a2 .a2-frame bdi { unicode-bidi: isolate; } /* a passing effect: out of the flow, hidden in its final state, never in the way */ body.auth.as-a2 .a2-frame .a2-fx { position: absolute; opacity: 0; pointer-events: none; } /* the ✓ (CSS borders: no image, no data: URL), sized by its box's font-size */ body.auth.as-a2 .a2-frame .a2-check { inline-size: .32em; block-size: .62em; margin-block-start: -.18em; border: solid currentColor; border-width: 0 .15em .15em 0; transform: rotate(45deg); } /* the outcome chip: green, white text, a white disc with the ✓ (white on --as-ok-700: 6.59:1) */ body.auth.as-a2 .a2-frame .a2-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 1.8cqi; box-sizing: border-box; block-size: 9.5%; padding-inline: 1.6cqi 3.8cqi; border-radius: var(--as-radius-pill); background: var(--as-ok-700); color: var(--as-neutral-0); font-size: max(10px, 3.7cqi); font-weight: 700; white-space: nowrap; box-shadow: 0 1.4cqi 3.6cqi -1.2cqi rgba(10, 107, 63, .7), 0 0 0 1cqi rgba(18, 161, 80, .16); } body.auth.as-a2 .a2-frame .a2-chip-icon { display: grid; place-items: center; flex: none; inline-size: 5.4cqi; block-size: 5.4cqi; border-radius: 50%; background: var(--as-neutral-0); color: var(--as-ok-700); font-size: 4.2cqi; } /* a marked target's tick: a white disc with a ✓ in its top corner */ body.auth.as-a2 .a2-frame .a2-tick { position: absolute; inset-block-start: 8%; right: 5%; display: grid; place-items: center; inline-size: 4.4cqi; block-size: 4.4cqi; border-radius: 50%; background: var(--as-neutral-0); font-size: 3.2cqi; } /* a target marked by the AI or the script: a glow of the target's shape spreading from it (not a click's ripple) */ body.auth.as-a2 .a2-frame .a2-fx-glow { z-index: 3; inset: -1px; box-sizing: border-box; border-radius: inherit; border: .6cqi solid var(--as-brand-400); box-shadow: 0 0 2.6cqi .4cqi rgba(61, 116, 255, .55); } /* who does the work: the AI / the script's badge (white on the brand gradient: 6.75:1 at its lightest) */ body.auth.as-a2 .a2-frame .a2-ai { position: relative; flex: none; display: flex; align-items: center; gap: 1.2cqi; padding: 1cqi 2.4cqi; border-radius: var(--as-radius-pill); background: linear-gradient(135deg, var(--as-brand-600), var(--as-brand-800)); color: var(--as-neutral-0); font-size: max(9px, 3cqi); font-weight: 800; letter-spacing: .04em; } body.auth.as-a2 .a2-frame .a2-ai-dot { flex: none; inline-size: 1.4cqi; block-size: 1.4cqi; border-radius: 50%; background: var(--as-ok-300); } body.auth.as-a2 .a2-frame .a2-fx-ping { inset: 0; border: 2px solid var(--as-brand-400); border-radius: var(--as-radius-pill); } /* the work's status line ("AI solving…"): a light pill, a spinner, brand text (--as-brand-700 on --as-brand-50: 7.6:1), where the outcome chip then pops */ body.auth.as-a2 .a2-frame .a2-fx-status { z-index: 3; display: flex; align-items: center; gap: 1.8cqi; box-sizing: border-box; block-size: 9.5%; padding-inline: 2.2cqi 3.6cqi; border: 1px solid var(--as-brand-100); border-radius: var(--as-radius-pill); background: var(--as-brand-50); color: var(--as-brand-700); font-size: max(10px, 3.6cqi); font-weight: 700; white-space: nowrap; } body.auth.as-a2 .a2-frame .a2-fx-spinner { position: relative; flex: none; box-sizing: border-box; inline-size: 3.6cqi; block-size: 3.6cqi; border-radius: 50%; border: .6cqi solid var(--as-brand-100); border-top-color: var(--as-brand-600); } /* the scanned zone: the beam passes over the targets (above them), inside the zone only */ body.auth.as-a2 .a2-frame .a2-zone { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; border-radius: 2cqi; } /* a demonstration's header row */ body.auth.as-a2 .a2-frame .a2-toprow { position: absolute; left: 6%; right: 6%; top: 4.5%; block-size: 11%; display: flex; align-items: center; gap: 3cqi; } /* ── 1 CAPTCHA Solver: the AI beam scans the grid, frames the three 482 tiles, then marks them by itself ───────── */ body.auth.as-a2 .a2-frame-1 .a2-task { flex: 1 1 auto; min-inline-size: 0; font-size: max(10px, 3.7cqi); font-weight: 700; } body.auth.as-a2 .a2-frame-1 .a2-zone { left: 6%; top: 18%; inline-size: 88%; block-size: 64%; } body.auth.as-a2 .a2-frame-1 .a2-fx-beam { left: 0; right: 0; top: 0; block-size: 24%; border-block-end: 2px solid var(--as-brand-400); background: linear-gradient(to bottom, rgba(61, 116, 255, 0), rgba(61, 116, 255, .16) 55%, rgba(109, 155, 255, .45)); box-shadow: 0 8px 20px -6px rgba(0, 70, 238, .55); } body.auth.as-a2 .a2-frame-1 .a2-tile { position: absolute; z-index: 1; display: grid; place-items: center; box-sizing: border-box; inline-size: 27.33%; block-size: 19.33%; border: 1px solid var(--as-neutral-150); border-radius: 2.6cqi; background: var(--as-neutral-75); color: var(--as-neutral-950); font: 700 4.6cqi / 1 var(--as-font-display); font-variant-numeric: tabular-nums; } body.auth.as-a2 .a2-frame-1 .a2-c1 { left: 6%; } body.auth.as-a2 .a2-frame-1 .a2-c2 { left: 36.33%; } body.auth.as-a2 .a2-frame-1 .a2-c3 { left: 66.67%; } body.auth.as-a2 .a2-frame-1 .a2-r1 { top: 18%; } body.auth.as-a2 .a2-frame-1 .a2-r2 { top: 40.33%; } body.auth.as-a2 .a2-frame-1 .a2-r3 { top: 62.67%; } /* the AI's detection frame (dashed), then the marked tile: brand blue, white number (6.75:1), its tick */ body.auth.as-a2 .a2-frame-1 .a2-fx-detect { inset: -3px; border: 2px dashed var(--as-brand-500); border-radius: 3cqi; } body.auth.as-a2 .a2-frame-1 .a2-on { position: absolute; inset: -1px; display: grid; place-items: center; border-radius: inherit; background: var(--as-brand-600); color: var(--as-neutral-0); box-shadow: 0 0 0 .9cqi rgba(61, 116, 255, .28); } body.auth.as-a2 .a2-frame-1 .a2-tick { color: var(--as-brand-600); } body.auth.as-a2 .a2-frame-1 .a2-done, body.auth.as-a2 .a2-frame-1 .a2-fx-status { left: 0; right: 0; top: 86%; margin-inline: auto; inline-size: max-content; } /* ── 2 Script Automation Booking: the script's highlight steps over the taken dates and lands on the first free one (green), the free time is picked, Booked ─────────────────────────────────────────────────────────────────────── */ body.auth.as-a2 .a2-frame-2 .a2-cal-icon { position: relative; flex: none; inline-size: 7cqi; block-size: 7cqi; border-radius: 1.8cqi; background: linear-gradient(160deg, var(--as-brand-600), var(--as-brand-800)); } body.auth.as-a2 .a2-frame-2 .a2-cal-icon::before { content: ""; position: absolute; inset: 36% 22% 20%; border-radius: .6cqi; background: rgba(255, 255, 255, .92); } body.auth.as-a2 .a2-frame-2 .a2-cal-name { flex: 1 1 auto; min-inline-size: 0; font-size: max(10px, 3.7cqi); font-weight: 700; } body.auth.as-a2 .a2-frame-2 .a2-wd { position: absolute; top: 17%; inline-size: 5.6%; block-size: 1.4%; margin-left: 2.8%; border-radius: var(--as-radius-pill); background: var(--as-neutral-150); } body.auth.as-a2 .a2-frame-2 .a2-day { position: absolute; z-index: 1; display: grid; place-items: center; box-sizing: border-box; inline-size: 11.2%; block-size: 9.5%; border: 1px solid var(--as-neutral-150); border-radius: 1.8cqi; background: var(--as-neutral-0); color: var(--as-neutral-950); font-size: max(9px, 3.2cqi); font-weight: 600; } body.auth.as-a2 .a2-frame-2 .a2-c1 { left: 6%; } body.auth.as-a2 .a2-frame-2 .a2-c2 { left: 18.8%; } body.auth.as-a2 .a2-frame-2 .a2-c3 { left: 31.6%; } body.auth.as-a2 .a2-frame-2 .a2-c4 { left: 44.4%; } body.auth.as-a2 .a2-frame-2 .a2-c5 { left: 57.2%; } body.auth.as-a2 .a2-frame-2 .a2-c6 { left: 70%; } body.auth.as-a2 .a2-frame-2 .a2-c7 { left: 82.8%; } body.auth.as-a2 .a2-frame-2 .a2-r1 { top: 22%; } body.auth.as-a2 .a2-frame-2 .a2-r2 { top: 33.3%; } body.auth.as-a2 .a2-frame-2 .a2-r3 { top: 44.6%; } body.auth.as-a2 .a2-frame-2 .a2-r4 { top: 55.9%; } body.auth.as-a2 .a2-frame-2 .a2-r5 { top: 67.2%; } body.auth.as-a2 .a2-frame-2 .a2-day > .a2-num { position: relative; } body.auth.as-a2 .a2-frame-2 .a2-past { border-color: transparent; background: transparent; color: var(--as-neutral-500); } body.auth.as-a2 .a2-frame-2 .a2-taken { background: var(--as-neutral-100); color: var(--as-neutral-600); text-decoration: line-through; } /* a free date: open, white, its number bold (the script finds the first one) */ body.auth.as-a2 .a2-frame-2 .a2-free { border-color: var(--as-neutral-200); background: var(--as-neutral-0); color: var(--as-neutral-950); font-weight: 700; } /* the script's highlight: the demonstration's size, its box (a date's size) at its top-left corner (see the header) */ body.auth.as-a2 .a2-frame-2 .a2-fx-seek { z-index: 3; inset: 0; transform-origin: 0 0; } body.auth.as-a2 .a2-frame-2 .a2-seek-box { position: absolute; left: 0; top: 0; box-sizing: border-box; inline-size: 11.2%; block-size: 9.5%; border-radius: 1.8cqi; border: .6cqi solid var(--as-brand-500); background: rgba(61, 116, 255, .14); box-shadow: 0 0 0 .9cqi rgba(61, 116, 255, .18), 0 .6cqi 2.4cqi rgba(0, 70, 238, .35); } body.auth.as-a2 .a2-frame-2 .a2-fx-status { left: 6%; top: 82%; block-size: 10%; } /* the picked date and time: green, white text (6.59:1), its tick, a green glow */ body.auth.as-a2 .a2-frame-2 .a2-fx-glow { border-color: var(--as-ok-500); box-shadow: 0 0 2.6cqi .4cqi rgba(18, 161, 80, .5); } body.auth.as-a2 .a2-frame-2 .a2-on { position: absolute; inset: -1px; z-index: 1; display: grid; place-items: center; border-radius: inherit; background: var(--as-ok-700); color: var(--as-neutral-0); font-weight: 800; box-shadow: 0 0 0 .9cqi rgba(18, 161, 80, .3); } body.auth.as-a2 .a2-frame-2 .a2-tick { inset-block-start: -14%; right: -14%; inline-size: 3.8cqi; block-size: 3.8cqi; color: var(--as-ok-700); font-size: 2.8cqi; box-shadow: 0 .3cqi .8cqi rgba(7, 21, 49, .25); } body.auth.as-a2 .a2-frame-2 .a2-slot { position: absolute; z-index: 1; top: 82%; display: grid; place-items: center; box-sizing: border-box; inline-size: 19%; block-size: 10%; border: 1px solid var(--as-neutral-200); border-radius: 2.2cqi; background: var(--as-neutral-0); color: var(--as-neutral-950); font: 700 max(10px, 3.4cqi) / 1 var(--as-font-display); font-variant-numeric: tabular-nums; } body.auth.as-a2 .a2-frame-2 .a2-slot-taken { border-color: transparent; background: var(--as-neutral-100); color: var(--as-neutral-600); text-decoration: line-through; } body.auth.as-a2 .a2-frame-2 .a2-slot-1 { left: 6%; } body.auth.as-a2 .a2-frame-2 .a2-slot-2 { left: 27%; } body.auth.as-a2 .a2-frame-2 .a2-booked { right: 6%; top: 82%; block-size: 10%; } /* ── 3 Remote Selfie: a phone; the ring turns and a line scans the face (liveness), then green with a ✓ ─────── */ body.auth.as-a2 .a2-frame.a2-frame-3 { background: transparent; box-shadow: none; overflow: visible; } body.auth.as-a2 .a2-frame-3 .a2-phone { position: absolute; left: 21%; top: 0; bottom: 0; inline-size: 58%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.4cqi; padding: 8cqi 3.4cqi 6cqi; border: 1.6cqi solid var(--as-neutral-950); border-radius: 8cqi; background: var(--as-neutral-0); text-align: center; box-shadow: var(--as-shadow-l), 0 0 0 .5cqi rgba(255, 255, 255, .22); } body.auth.as-a2 .a2-frame-3 .a2-notch { position: absolute; top: 2.4cqi; left: 0; right: 0; margin-inline: auto; inline-size: 13cqi; block-size: 2.4cqi; border-radius: var(--as-radius-pill); background: var(--as-neutral-950); } body.auth.as-a2 .a2-frame-3 .a2-hint { color: var(--as-neutral-600); font-size: max(10px, 3.4cqi); font-weight: 600; } body.auth.as-a2 .a2-frame-3 .a2-cam { position: relative; flex: none; inline-size: 80%; aspect-ratio: 1; } body.auth.as-a2 .a2-frame-3 .a2-cam::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: .7cqi solid var(--as-neutral-150); } body.auth.as-a2 .a2-frame-3 .a2-face { position: absolute; inset: 9%; overflow: hidden; border-radius: 50%; background: var(--as-brand-50); } body.auth.as-a2 .a2-frame-3 .a2-face-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; } body.auth.as-a2 .a2-frame-3 .a2-shoulders, body.auth.as-a2 .a2-frame-3 .a2-skull { fill: var(--as-brand-200); } body.auth.as-a2 .a2-frame-3 .a2-fx-mesh circle { fill: var(--as-brand-600); } body.auth.as-a2 .a2-frame-3 .a2-headg { transform-box: fill-box; transform-origin: 50% 90%; } body.auth.as-a2 .a2-frame-3 .a2-fx-scan { left: 6%; right: 6%; top: 6%; block-size: .7cqi; border-radius: var(--as-radius-pill); background: var(--as-brand-400); box-shadow: 0 0 1.6cqi .5cqi rgba(61, 116, 255, .6); } body.auth.as-a2 .a2-frame-3 .a2-fx-spin { inset: 0; box-sizing: border-box; border-radius: 50%; border: .7cqi solid transparent; border-top-color: var(--as-brand-500); border-right-color: var(--as-brand-500); } body.auth.as-a2 .a2-frame-3 .a2-ring { position: absolute; inset: 0; box-sizing: border-box; border-radius: 50%; border: .7cqi solid var(--as-ok-500); box-shadow: 0 0 0 1.4cqi rgba(18, 161, 80, .14); } body.auth.as-a2 .a2-frame-3 .a2-badge { position: absolute; right: 1%; bottom: 3%; display: grid; place-items: center; box-sizing: border-box; inline-size: 24%; aspect-ratio: 1; border-radius: 50%; border: .7cqi solid var(--as-neutral-0); background: var(--as-ok-700); color: var(--as-neutral-0); font-size: 5.6cqi; box-shadow: 0 .8cqi 2cqi -.4cqi rgba(10, 107, 63, .6); } body.auth.as-a2 .a2-frame-3 .a2-bar { position: relative; flex: none; inline-size: 72%; block-size: 1.4cqi; overflow: hidden; border-radius: var(--as-radius-pill); background: var(--as-neutral-150); } body.auth.as-a2 .a2-frame-3 .a2-bar-fill, body.auth.as-a2 .a2-frame-3 .a2-bar-ok { position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; } body.auth.as-a2 .a2-frame-3 .a2-bar-fill { background: var(--as-brand-500); } body.auth.as-a2 .a2-frame-3 .a2-bar-ok { background: var(--as-ok-500); } body.auth.as-a2 .a2-frame-3 .a2-verified { position: relative; block-size: auto; padding-block: 1.4cqi; font-size: max(10px, 3.4cqi); } /* ── the motion — lasting parts: from their start, no end step (the end is the base style), `both` fill; passing effects: a2-fx-*, ending hidden ────────────────────────────────────────────────────────────────────────────── */ @keyframes a2-enter { from { opacity: 0; transform: scale(.96); } } @keyframes a2-leave { from { opacity: 1; transform: none; } } @keyframes a2-caption-in { from { opacity: 0; transform: translateY(6px); } } @keyframes a2-caption-out { from { opacity: 1; transform: none; } } @keyframes a2-fill { from { transform: scaleX(0); } } @keyframes a2-rise { from { opacity: 0; transform: translateY(30%); } } @keyframes a2-pop { from { opacity: 0; transform: scale(.4); } } @keyframes a2-mark { from { opacity: 0; transform: scale(.8); } } @keyframes a2-fade { from { opacity: 0; } } @keyframes a2-grow { from { transform: scaleX(0); } } @keyframes a2-turn { from { transform: none; } 50% { transform: translateX(-6px) rotate(-5deg); } } @keyframes a2-fx-beam { 0% { opacity: 0; transform: translateY(-100%); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(330%); } } @keyframes a2-fx-ping { 0% { opacity: 0; transform: scale(1); } 10% { opacity: .9; } 100% { opacity: 0; transform: scale(1.35, 1.8); } } @keyframes a2-fx-detect { 0% { opacity: 0; transform: scale(1.12); } 18% { opacity: 1; transform: scale(1); } 88% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } @keyframes a2-fx-glow { 0% { opacity: 0; transform: scale(.94); } 12% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } } @keyframes a2-fx-status { 0% { opacity: 0; transform: translateY(40%); } 10% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.92); } } @keyframes a2-fx-spinner { 0% { opacity: 1; transform: rotate(0deg); } 94% { opacity: 1; } 100% { opacity: 0; transform: rotate(1080deg); } } /* the script's highlight (from .3 s, for 1 s): it steps over the taken dates 9 to 16 (their corners in percent of the demonstration: date d at column (d + 2) % 7 + 1, row (d + 2) / 7 + 1 of the sheet), off at the row's end and on at the next row's start, and lands on 17, the first free date, at 1.1 s */ @keyframes a2-fx-seek { 0% { opacity: 0; transform: translate(57.2%, 33.3%); } 5% { opacity: 1; transform: translate(57.2%, 33.3%); } 10% { transform: translate(57.2%, 33.3%); } 14% { transform: translate(70%, 33.3%); } 19% { transform: translate(70%, 33.3%); } 23% { opacity: 1; transform: translate(82.8%, 33.3%); } 28% { opacity: 1; transform: translate(82.8%, 33.3%); } 31% { opacity: 0; transform: translate(82.8%, 33.3%); } 32% { opacity: 0; transform: translate(6%, 44.6%); } 35% { opacity: 1; transform: translate(6%, 44.6%); } 40% { transform: translate(6%, 44.6%); } 44% { transform: translate(18.8%, 44.6%); } 49% { transform: translate(18.8%, 44.6%); } 53% { transform: translate(31.6%, 44.6%); } 58% { transform: translate(31.6%, 44.6%); } 62% { transform: translate(44.4%, 44.6%); } 67% { transform: translate(44.4%, 44.6%); } 71% { transform: translate(57.2%, 44.6%); } 76% { transform: translate(57.2%, 44.6%); } 80% { transform: translate(70%, 44.6%); } 88% { opacity: 1; transform: translate(70%, 44.6%); } 100% { opacity: 0; transform: translate(70%, 44.6%); } } @keyframes a2-fx-spin { 0% { opacity: 0; transform: rotate(0deg); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: rotate(630deg); } } @keyframes a2-fx-scan { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 50% { transform: translateY(26cqi); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } } @keyframes a2-fx-mesh { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } /* the crossfade: the incoming demonstration and title fade in, the outgoing ones (.a2-leaving: hidden, their final state) fade out over them, then leave the page (showcase.js) */ body.auth.as-a2 .a2-stage > .a2-frame { animation-name: a2-enter; animation-duration: .4s; animation-timing-function: var(--as-ease); animation-fill-mode: both; } body.auth.as-a2 .a2-stage .a2-frame.a2-leaving { z-index: 1; opacity: 0; transform: scale(1.02); animation-name: a2-leave; animation-duration: .3s; animation-timing-function: ease-in; } body.auth.as-a2 .a2-seg-now .a2-seg-fill { animation-name: a2-fill; animation-duration: 3s; animation-timing-function: linear; animation-fill-mode: both; } body.auth.as-a2 .a2-frame .a2-toprow, body.auth.as-a2 .a2-frame .a2-tile, body.auth.as-a2 .a2-frame .a2-day, body.auth.as-a2 .a2-frame .a2-wd, body.auth.as-a2 .a2-frame .a2-on, body.auth.as-a2 .a2-frame .a2-slot, body.auth.as-a2 .a2-frame .a2-chip, body.auth.as-a2 .a2-frame .a2-ai, body.auth.as-a2 .a2-frame .a2-phone, body.auth.as-a2 .a2-frame .a2-hint, body.auth.as-a2 .a2-frame .a2-headg, body.auth.as-a2 .a2-frame .a2-bar-fill, body.auth.as-a2 .a2-frame .a2-bar-ok, body.auth.as-a2 .a2-frame .a2-ring, body.auth.as-a2 .a2-frame .a2-badge { animation-duration: .4s; animation-timing-function: var(--as-ease); animation-fill-mode: both; } /* the lasting parts that animate keep their own layer to the end: at an animation's end Chromium would otherwise put the part back into its parent's layer and, until that layer is painted again, leave it blank (seen in recordings: the outcome chip vanishing for a few tenths of a second) */ body.auth.as-a2 .a2-frame .a2-on, body.auth.as-a2 .a2-frame .a2-slot, body.auth.as-a2 .a2-frame .a2-chip, body.auth.as-a2 .a2-frame .a2-ai, body.auth.as-a2 .a2-frame .a2-hint, body.auth.as-a2 .a2-frame .a2-bar-fill, body.auth.as-a2 .a2-frame .a2-bar-ok, body.auth.as-a2 .a2-frame .a2-ring, body.auth.as-a2 .a2-frame .a2-badge, body.auth.as-a2 .a2-frame .a2-fx, body.auth.as-a2 .a2-stage > .a2-frame, body.auth.as-a2 .a2-caption-text { will-change: transform, opacity; } /* a passing effect: its own timing; before its delay its first step, after its end its (hidden) base */ body.auth.as-a2 .a2-frame .a2-fx { animation-timing-function: ease-in-out; animation-fill-mode: backwards; } /* the pops overshoot a little */ body.auth.as-a2 .a2-frame .a2-chip, body.auth.as-a2 .a2-frame .a2-on, body.auth.as-a2 .a2-frame .a2-badge, body.auth.as-a2 .a2-frame .a2-ai { animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } /* 1: the AI badge wakes and pings, "AI solving…", its beam scans the grid and frames each 482 tile as it passes, then the three are marked by themselves one after another (blue with a tick, a glow), then Solved — all by 2.5 s */ body.auth.as-a2 .a2-frame-1 .a2-ai { animation-name: a2-pop; animation-duration: .4s; animation-delay: .2s; } body.auth.as-a2 .a2-frame-1 .a2-fx-ping { animation-name: a2-fx-ping; animation-duration: .45s; animation-iteration-count: 2; animation-delay: .35s; } body.auth.as-a2 .a2-frame-1 .a2-fx-status { animation-name: a2-fx-status; animation-duration: 1.8s; animation-delay: .25s; } body.auth.as-a2 .a2-frame-1 .a2-fx-spinner { animation-name: a2-fx-spinner; animation-duration: 1.8s; animation-delay: .25s; animation-timing-function: linear; } body.auth.as-a2 .a2-frame-1 .a2-fx-beam { animation-name: a2-fx-beam; animation-duration: .9s; animation-delay: .3s; } body.auth.as-a2 .a2-frame-1 .a2-fx-detect { animation-name: a2-fx-detect; } body.auth.as-a2 .a2-frame-1 .a2-hit-1 .a2-fx-detect { animation-duration: .6s; animation-delay: .55s; } body.auth.as-a2 .a2-frame-1 .a2-hit-2 .a2-fx-detect { animation-duration: .65s; animation-delay: .75s; } body.auth.as-a2 .a2-frame-1 .a2-hit-3 .a2-fx-detect { animation-duration: .7s; animation-delay: .95s; } body.auth.as-a2 .a2-frame-1 .a2-on { animation-name: a2-mark; } body.auth.as-a2 .a2-frame-1 .a2-fx-glow { animation-name: a2-fx-glow; animation-timing-function: ease-out; } body.auth.as-a2 .a2-frame-1 .a2-hit-1 .a2-on { animation-duration: .35s; animation-delay: 1.1s; } body.auth.as-a2 .a2-frame-1 .a2-hit-1 .a2-fx-glow { animation-duration: .55s; animation-delay: 1.1s; } body.auth.as-a2 .a2-frame-1 .a2-hit-2 .a2-on { animation-duration: .35s; animation-delay: 1.35s; } body.auth.as-a2 .a2-frame-1 .a2-hit-2 .a2-fx-glow { animation-duration: .55s; animation-delay: 1.35s; } body.auth.as-a2 .a2-frame-1 .a2-hit-3 .a2-on { animation-duration: .35s; animation-delay: 1.6s; } body.auth.as-a2 .a2-frame-1 .a2-hit-3 .a2-fx-glow { animation-duration: .55s; animation-delay: 1.6s; } body.auth.as-a2 .a2-frame-1 .a2-done { animation-name: a2-pop; animation-duration: .4s; animation-delay: 1.95s; } /* 2: the script's badge wakes, "Searching for a free date…", its highlight steps over the taken dates and lands on the first free one (green with a tick, a glow), the times rise and the free one is picked by itself, then Booked — all by 2.5 s */ body.auth.as-a2 .a2-frame-2 .a2-ai { animation-name: a2-pop; animation-duration: .4s; animation-delay: .15s; } body.auth.as-a2 .a2-frame-2 .a2-fx-ping { animation-name: a2-fx-ping; animation-duration: .45s; animation-iteration-count: 2; animation-delay: .3s; } body.auth.as-a2 .a2-frame-2 .a2-fx-status { animation-name: a2-fx-status; animation-duration: 1.2s; animation-delay: .2s; } body.auth.as-a2 .a2-frame-2 .a2-fx-spinner { animation-name: a2-fx-spinner; animation-duration: 1.2s; animation-delay: .2s; animation-timing-function: linear; } body.auth.as-a2 .a2-frame-2 .a2-fx-seek { animation-name: a2-fx-seek; animation-duration: 1s; animation-delay: .3s; } body.auth.as-a2 .a2-frame-2 .a2-on { animation-name: a2-mark; } body.auth.as-a2 .a2-frame-2 .a2-fx-glow { animation-name: a2-fx-glow; animation-timing-function: ease-out; } body.auth.as-a2 .a2-frame-2 .a2-day .a2-on { animation-duration: .35s; animation-delay: 1.12s; } body.auth.as-a2 .a2-frame-2 .a2-day .a2-fx-glow { animation-duration: .55s; animation-delay: 1.12s; } body.auth.as-a2 .a2-frame-2 .a2-slot { animation-name: a2-rise; animation-duration: .3s; animation-delay: 1.35s; } body.auth.as-a2 .a2-frame-2 .a2-slot .a2-on { animation-duration: .35s; animation-delay: 1.65s; } body.auth.as-a2 .a2-frame-2 .a2-slot .a2-fx-glow { animation-duration: .55s; animation-delay: 1.65s; } body.auth.as-a2 .a2-frame-2 .a2-booked { animation-name: a2-pop; animation-duration: .4s; animation-delay: 1.95s; } /* 3: the hint, the ring turns and the line scans the face while its landmarks show and the head turns (liveness), the bar fills, then the ring, the bar and the badge turn green, Verified — all by 2.5 s */ body.auth.as-a2 .a2-frame-3 .a2-hint { animation-name: a2-rise; animation-duration: .35s; animation-delay: .15s; } body.auth.as-a2 .a2-frame-3 .a2-fx-spin { animation-name: a2-fx-spin; animation-duration: 1.5s; animation-delay: .3s; animation-timing-function: linear; } body.auth.as-a2 .a2-frame-3 .a2-fx-scan { animation-name: a2-fx-scan; animation-duration: 1.35s; animation-delay: .4s; } body.auth.as-a2 .a2-frame-3 .a2-fx-mesh { animation-name: a2-fx-mesh; animation-duration: 1.25s; animation-delay: .45s; } body.auth.as-a2 .a2-frame-3 .a2-headg { animation-name: a2-turn; animation-duration: 1s; animation-delay: .55s; animation-timing-function: ease-in-out; } body.auth.as-a2 .a2-frame-3 .a2-bar-fill { animation-name: a2-grow; animation-duration: 1.45s; animation-delay: .3s; animation-timing-function: ease-in-out; } body.auth.as-a2 .a2-frame-3 .a2-bar-ok { animation-name: a2-fade; animation-duration: .25s; animation-delay: 1.75s; } body.auth.as-a2 .a2-frame-3 .a2-ring { animation-name: a2-pop; animation-duration: .35s; animation-delay: 1.75s; } body.auth.as-a2 .a2-frame-3 .a2-badge { animation-name: a2-pop; animation-duration: .4s; animation-delay: 1.9s; } body.auth.as-a2 .a2-frame-3 .a2-verified { animation-name: a2-pop; animation-duration: .4s; animation-delay: 2.05s; } /* the title under the stage: the incoming one rises in, the outgoing one fades out over it (no jump: one line) */ body.auth.as-a2 .a2-caption-text { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; animation-name: a2-caption-in; animation-duration: .32s; animation-delay: .14s; animation-timing-function: var(--as-ease); animation-fill-mode: both; } body.auth.as-a2 .a2-caption-text.a2-leaving { opacity: 0; transform: translateY(-6px); animation-name: a2-caption-out; animation-duration: .16s; animation-delay: 0s; animation-timing-function: ease-in; } /* paused: the demonstration on show in its final state at once (the passing effects hidden) */ body.auth.as-a2 .a2-show.a2-still .a2-stage *, body.auth.as-a2 .a2-show.a2-still .a2-caption * { animation: none !important; } /* ── reduced motion: the CALM version (the owner, 2026-10-09: his Windows turns animation effects off, and he saw only the first demonstration, still). The same three demonstrations advance every 3 s (showcase.js: the root's a2-reduced class is the only difference), with the progress bar (its segments discrete: the one on show full, no fill) and the Pause control (WCAG 2.2.2). Every animation above is dropped (as app.css does under reduced motion; restated here so this sheet holds alone), and these rules, all !important to pass app.css's, play instead: * the crossfade: opacity only (a2-fade in, a2-leave / a2-caption-out out, the outgoing parts' transform none); * inside a demonstration, discrete states: a2-calm-* keyframes hold ONE state (`from, to`: no step between two values, so nothing is interpolated, nothing moves) for a window — a2-calm-off keeps a part's outcome hidden until its moment (delay 0, duration = that moment), a2-calm-on shows a passing effect (the status line, the detection frames, the landmarks) from its delay for its duration, a2-calm-checked tints a date the script has checked, a2-calm-ring-1 / -3 draw the scan ring a quarter, then three quarters. Each rule says `animation: !important` and every window ends by 2.5 s, like the full version's. No beam, highlight, spinner, glow, ping, head turn, scan line or growing bar: those stay hidden or still. Paused (a2-still), the final state at once, as above. */ body.auth.as-a2 .a2-show.a2-reduced .a2-stage *, body.auth.as-a2 .a2-show.a2-reduced .a2-caption * { animation: none !important; } body.auth.as-a2 .a2-show.a2-reduced .a2-stage .a2-frame.a2-leaving, body.auth.as-a2 .a2-show.a2-reduced .a2-caption-text.a2-leaving { transform: none; } body.auth.as-a2 .a2-show.a2-reduced .a2-frame .a2-fx-spinner { display: none; } @keyframes a2-calm-off { from, to { opacity: 0; } } @keyframes a2-calm-on { from, to { opacity: 1; } } @keyframes a2-calm-checked { from, to { border-color: var(--as-brand-500); background-color: var(--as-brand-50); color: var(--as-brand-700); } } @keyframes a2-calm-ring-1 { from, to { opacity: 1; border-right-color: transparent; } } @keyframes a2-calm-ring-3 { from, to { opacity: 1; border-bottom-color: var(--as-brand-500); } } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-stage > .a2-frame { animation: a2-fade .4s var(--as-ease) both !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-stage .a2-frame.a2-leaving { animation: a2-leave .3s ease-in !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-caption-text { animation: a2-fade .32s var(--as-ease) .14s both !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-caption-text.a2-leaving { animation: a2-caption-out .16s ease-in !important; } /* 1: "AI solving…"; the AI frames the three 482 tiles, then marks them one after another; Solved */ body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-1 .a2-fx-status { animation: a2-calm-on 1.7s .25s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-1 .a2-hit-1 .a2-fx-detect { animation: a2-calm-on .55s .55s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-1 .a2-hit-2 .a2-fx-detect { animation: a2-calm-on .6s .75s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-1 .a2-hit-3 .a2-fx-detect { animation: a2-calm-on .65s .95s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-1 .a2-hit-1 .a2-on { animation: a2-calm-off 1.1s 0s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-1 .a2-hit-2 .a2-on { animation: a2-calm-off 1.35s 0s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-1 .a2-hit-3 .a2-on { animation: a2-calm-off 1.6s 0s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-1 .a2-done { animation: a2-calm-off 1.95s 0s !important; } /* 2: "Searching for a free date…"; the taken dates 9 to 16 checked one after another (tinted, in place), then 17, the first free one, green; the times show and 11:00 is picked; Booked */ body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-fx-status { animation: a2-calm-on 1.15s .2s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-day.a2-c5.a2-r2 { animation: a2-calm-checked .77s .35s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-day.a2-c6.a2-r2 { animation: a2-calm-checked .68s .44s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-day.a2-c7.a2-r2 { animation: a2-calm-checked .59s .53s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-day.a2-c1.a2-r3 { animation: a2-calm-checked .5s .62s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-day.a2-c2.a2-r3 { animation: a2-calm-checked .41s .71s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-day.a2-c3.a2-r3 { animation: a2-calm-checked .32s .8s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-day.a2-c4.a2-r3 { animation: a2-calm-checked .23s .89s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-day.a2-c5.a2-r3 { animation: a2-calm-checked .14s .98s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-day .a2-on { animation: a2-calm-off 1.12s 0s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-slot { animation: a2-calm-off 1.35s 0s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-slot .a2-on { animation: a2-calm-off 1.65s 0s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-2 .a2-booked { animation: a2-calm-off 1.95s 0s !important; } /* 3: the face's landmarks show, the scan ring is drawn by quarters (one, two, three), then the ring, the bar and the badge turn green; Verified */ body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-3 .a2-fx-mesh { animation: a2-calm-on 1.25s .45s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-3 .a2-fx-spin { animation: a2-calm-ring-1 .45s .3s, a2-calm-on .5s .75s, a2-calm-ring-3 .5s 1.25s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-3 .a2-bar-fill { animation: a2-calm-off 1.75s 0s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-3 .a2-bar-ok { animation: a2-calm-off 1.75s 0s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-3 .a2-ring { animation: a2-calm-off 1.75s 0s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-3 .a2-badge { animation: a2-calm-off 1.9s 0s !important; } body.auth.as-a2 .a2-show.a2-reduced:not(.a2-still) .a2-frame-3 .a2-verified { animation: a2-calm-off 2.05s 0s !important; } /* ── the title and the Pause/Play icon (on the blue panel: white focus ring with a dark offset, D-302) ───────── */ body.auth.as-a2 .a2-caption { display: grid; margin: 0; min-inline-size: 0; text-align: center; color: var(--as-neutral-0); white-space: nowrap; letter-spacing: -.005em; font: 700 clamp(16px, 4.4cqi, 21px) / 1.3 var(--as-font-display); } :root:lang(ar) body.auth.as-a2 .a2-caption, :root:lang(ur) body.auth.as-a2 .a2-caption { font-family: var(--font-ar); letter-spacing: 0; } body.auth.as-a2 .a2-play { position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-end: 10px; box-sizing: border-box; display: grid; place-items: center; inline-size: 28px; block-size: 28px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); color: var(--as-neutral-0); cursor: pointer; } body.auth.as-a2 .a2-play::before { content: ""; box-sizing: border-box; inline-size: 9px; block-size: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } body.auth.as-a2 .a2-play.a2-is-paused::before { inline-size: 0; block-size: 0; margin-left: 2px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; } body.auth.as-a2 .a2-play:focus-visible { outline: 3px solid var(--as-neutral-0); outline-offset: 2px; box-shadow: 0 0 0 2px var(--as-brand-800); } @media (hover: hover) { body.auth.as-a2 .a2-play:hover { border-color: var(--as-neutral-0); background: rgba(255, 255, 255, .24); } } @media (forced-colors: active) { body.auth.as-a2 .a2-play { border-color: ButtonText; } }