/* --------------------------------------------------------------------------- * rush-entry.css — the entry flow, REDESIGN r2 "THE CUT" (Part C). * * Step A the gate — the unlit RUSH sign on carbon (dark) / a cut-out * object on a gold foil field (light). Yes strikes * the sign alight (M26) and the double blade (M12) * cuts to the reel. * Step B the reel — posters: 4:5 plates, an outlined index numeral, a * slate on --t-bg-3, a 30° gold corner slab on * hover / focus / nearest / mine. Frames CUT in * under a 30° clip. N ≥ 7 collapses to a dense list. * B → site match cut — the picked plate travels rect → rect into * #rush-shot-img while a gold blade sweeps with it. * * Loaded in on EVERY page, never deferred: the gating rules at the top * must be in force before paints. Self-contained: easings, keyframes * and the blade geometry live here (rush-motion.css is front-page only). * * States live on (set by the cache-safe head hydrator, never by PHP): * html.rush-entry / -gate / -pick, html.rush-motion, html[data-theme] * and on the layer: div.rush-entry[data-state="gate|pick|leaving|switcher"]. * * Colour: every value is a ROLE (--t-*). In the light theme the gate state * re-declares the roles as the gold surface (the whole layer is the plate), * so nothing inside branches on theme. Literals survive only ON the photos * (numeral stroke, plate scrim) and are annotated /* fixed */. * ------------------------------------------------------------------------ */ :root { --ease-out-cine: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout-cine: cubic-bezier(0.77, 0, 0.18, 1); --ease-in-cine: cubic-bezier(0.4, 0, 1, 1); --ease-mark: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --rk-slash: 30deg; } @keyframes rk-rise { from { opacity: 0; transform: translateY(var(--rk-y, 28px)); } to { opacity: 1; transform: translateY(0); } } @keyframes rk-typerise { from { transform: translate3d(0, 110%, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes rk-fade { from { opacity: 0; } to { opacity: var(--rk-o, 1); } } @keyframes rk-spin { to { transform: rotate(360deg); } } /* M12 as a CSS reveal: a 30° band that opens from the left edge of the box. * --cut-k = tan(30°) × (height / width) of the box, in % of its width. */ @keyframes rk-cutin { from { clip-path: polygon(0 0, 0 0, calc(-1 * var(--cut-k, 72%)) 100%, calc(-1 * var(--cut-k, 72%)) 100%); } to { clip-path: polygon(0 0, calc(100% + var(--cut-k, 72%)) 0, 100% 100%, calc(-1 * var(--cut-k, 72%)) 100%); } } @keyframes rk-pushin { from { transform: scale(1.08); } to { transform: scale(1); } } /* M26 neon strike: the unlit sign flickers alight. */ @keyframes rk-strike { 0% { filter: brightness(0.66) saturate(0.7); } 8% { filter: brightness(1) saturate(1) drop-shadow(0 0 24px var(--t-glow)); } 12% { filter: brightness(0.3) saturate(0.7); } 20% { filter: brightness(1) saturate(1) drop-shadow(0 0 24px var(--t-glow)); } 30% { filter: brightness(0.55) saturate(0.8); } 40% { filter: brightness(1) saturate(1) drop-shadow(0 0 28px var(--t-glow)); } 100% { filter: brightness(1) saturate(1) drop-shadow(0 0 32px var(--t-glow)); } } /* Light: no strike — the poster lifts under a paper sweep. */ @keyframes rk-lift { 0% { filter: brightness(0.9) saturate(0.8); } 50% { filter: brightness(1.08) saturate(1); } 100% { filter: brightness(1) saturate(0.95); } } /* M23 ambient light sweep — a 30° band crossing the frame. */ @keyframes rk-sweep { from { transform: translateX(-70%) skewX(-30deg); } to { transform: translateX(70%) skewX(-30deg); } } /* M18 gold sweep on a pill. */ @keyframes rk-pillsweep { from { transform: translateX(-140%) skewX(-30deg); } to { transform: translateX(240%) skewX(-30deg); } } /* M29 living grain: 8 GPU offsets. */ @keyframes rk-grain { 0% { transform: translate(0, 0); } 12.5% { transform: translate(-3%, -4%); } 25% { transform: translate(4%, 2%); } 37.5% { transform: translate(-2%, 5%); } 50% { transform: translate(5%, -3%); } 62.5% { transform: translate(-5%, 1%); } 75% { transform: translate(2%, -5%); } 87.5% { transform: translate(-4%, 3%); } 100% { transform: translate(0, 0); } } /* M11 pulse (the toggle, the status dot). */ @keyframes rk-pulse { 0% { box-shadow: 0 0 0 0 var(--t-glow); } 100% { box-shadow: 0 0 0 14px transparent; } } /* M27 stamp. */ @keyframes rk-stamp { from { opacity: 0; transform: scale(1.35) rotate(-3deg); } to { opacity: 1; transform: none; } } /* ══ 0. Pre-paint gating (cache-safe, class-driven) ═════════════════════ */ div.rush-entry { display: none; } html.rush-entry div.rush-entry, div.rush-entry.is-up { display: grid; } html.rush-entry body { overflow: hidden; } /* visibility, not display: the hero keeps its layout so the match cut can * measure #rush-shot-img. rush-entry.js restores it at the start of the exit. */ html.rush-entry .rush-home, html.rush-entry .rush-header, html.rush-entry #main-content, html.rush-entry .rush-footer, html.rush-entry .rush-progress, html.rush-entry .rush-index, html.rush-entry .rush-cursor, html.rush-entry .rush-cursor-ring, html.rush-entry .rush-dock { visibility: hidden; } html.rush-entry-gate div.rush-entry .rush-entry-pick { display: none; } html.rush-entry-pick div.rush-entry .rush-entry-gate { display: none; } div.rush-entry[data-state="pick"] .rush-entry-gate, div.rush-entry[data-state="switcher"] .rush-entry-gate, div.rush-entry[data-state="leaving"] .rush-entry-gate { display: none; } div.rush-entry[data-state="gate"] .rush-entry-pick, div.rush-entry[data-state="gate"] .rush-entry-foot { display: none; } div.rush-entry .rush-entry-pick[hidden] { display: none; } /* ══ 1. The layer ═══════════════════════════════════════════════════════ */ div.rush-entry { position: fixed; inset: 0; z-index: 9000; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: var(--t-bg); color: var(--t-fg); font-family: "Work Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; box-sizing: border-box; transition: background-color 400ms ease; } div.rush-entry *, div.rush-entry *::before, div.rush-entry *::after { box-sizing: inherit; } div.rush-entry .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Light theme, gate state: the whole layer IS the gold plate (C2). The roles * are re-declared exactly as rush-theme.css's [data-surface="gold"] lock so * every child keeps reading roles. Ink on gold = 9.9:1. */ html[data-theme="light"] div.rush-entry[data-state="gate"] { --t-bg: #ffaa00; /* fixed: the gold lock */ --t-bg-2: #de8a08; /* fixed: the gold lock */ --t-bg-3: #ffe3b0; /* fixed: the gold lock */ --t-fg: #10100e; /* fixed: the gold lock */ --t-fg-2: rgba(16, 16, 14, 0.96); /* fixed: the gold lock — r2 fix: copy / "I'm not" sampled 3.1:1 on the foil at .7 */ --t-fg-3: rgba(16, 16, 14, 0.94); /* fixed: the gold lock — r2 fix: fine print + Terms/Privacy at 2.2:1 on the foil at .5 */ --t-line: rgba(16, 16, 14, 0.18); /* fixed: the gold lock */ --t-line-strong: rgba(16, 16, 14, 0.34); /* fixed: the gold lock */ --t-gold-text: #10100e; /* fixed: the gold lock */ --t-stroke: #10100e; /* fixed: the gold lock */ --t-focus: #10100e; /* fixed: the gold lock */ --t-glow: transparent; --t-sweep: rgba(251, 250, 244, 0.28); /* fixed: paper sweep on gold */ --t-sweep-blend: soft-light; --t-scrim: linear-gradient(to top, rgba(255, 170, 0, 0.92), rgba(255, 170, 0, 0.4) 42%, rgba(255, 170, 0, 0)); /* fixed: gold scrim */ --t-scrim-flat: rgba(255, 170, 0, 0.85); /* fixed: gold scrim */ --t-scrim-soft: rgba(255, 170, 0, 0.45); /* fixed: gold scrim */ --t-grain-alpha: 0.22; --t-grain-blend: multiply; color-scheme: light; background-image: url("../img/rush-gold-texture.webp?v=1.23.2"); background-size: cover; background-position: center; } html[data-theme="light"] div.rush-entry[data-state="gate"]::before { /* The foil rides at ~25% over flat gold. */ content: ""; position: absolute; inset: 0; background: rgba(255, 170, 0, 0.86); /* fixed: foil flat — r2 fix: .86 so the darkest foil speck under 13–16px ink stays ≥4.5:1 */ pointer-events: none; } /* The real wordmark is gold: on the gold plate (light gate) and on paper * (light reel) it is inked — never a text stand-in. */ html[data-theme="light"] div.rush-entry .rush-entry-logo { filter: brightness(0); } /* ── Background: the sign ─────────────────────────────────────────────── */ .rush-entry-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .rush-entry-signwrap { position: absolute; inset: 0; overflow: hidden; /* Dark rest: UNLIT (C2). The strike (M26) lights it on Yes. The filter * sits on the WRAP so the still and the clip light together. r2 fix (P1): * .58 not .38 — at .38 under the vignette the sign maxed at 31/255 (a black * wall); dim but perceivable is the brief. */ filter: brightness(0.66) saturate(0.7); transition: clip-path 600ms var(--ease-inout-cine), opacity 600ms var(--ease-out-cine), filter 600ms var(--ease-out-cine), transform 600ms var(--ease-out-cine); } .rush-entry-sign, .rush-entry-signclip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 42%; } .rush-entry-sign { opacity: 1; transition: opacity 600ms var(--ease-out-cine); } .rush-entry-signclip { opacity: 0; transition: opacity 600ms var(--ease-out-cine); } .rush-entry-signclip.is-live { opacity: 1; } div.rush-entry[data-state="gate"] .rush-entry-sign.is-under { opacity: 0; } /* Portrait phones: the 16:9 sign is framed in the empty upper half. */ @media (max-width: 767px) and (orientation: portrait) { .rush-entry-signwrap { top: 6vh; bottom: auto; height: 46vh; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%); /* fixed: mask */ mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%); /* fixed: mask */ } .rush-entry-sign, .rush-entry-signclip { object-position: 8% 50%; } } /* Light gate: the poster is a cut-out object — a 30° parallelogram on the * right 55% (≥ 768) / the top-right 42vh (phones) — dark-graded. */ html[data-theme="light"] div.rush-entry[data-state="gate"] .rush-entry-signwrap { /* Starts under the head row so the stepper + toggle stay on gold. */ clip-path: polygon(calc(30% + 42vh * 0.577) 0, 100% 0, 100% 100%, 30% 100%); top: 72px; height: 42vh; -webkit-mask-image: none; mask-image: none; } html[data-theme="light"] div.rush-entry[data-state="gate"] .rush-entry-signwrap { filter: brightness(0.9) saturate(0.8); } html[data-theme="light"] div.rush-entry[data-state="gate"] .rush-entry-sign, html[data-theme="light"] div.rush-entry[data-state="gate"] .rush-entry-signclip { object-position: 20% 50%; } @media (min-width: 768px) { html[data-theme="light"] div.rush-entry[data-state="gate"] .rush-entry-signwrap { clip-path: polygon(calc(45% + (100vh - 112px) * 0.577) 0, 100% 0, 100% 100%, 45% 100%); top: 112px; height: auto; bottom: 0; } html[data-theme="light"] div.rush-entry[data-state="gate"] .rush-entry-sign, html[data-theme="light"] div.rush-entry[data-state="gate"] .rush-entry-signclip { object-position: 30% 45%; } } /* Light reel: the blurred sign is a hint on paper, not a pattern. */ html[data-theme="light"] div.rush-entry[data-state="pick"] .rush-entry-signwrap, html[data-theme="light"] div.rush-entry[data-state="switcher"] .rush-entry-signwrap, html[data-theme="light"] div.rush-entry[data-state="leaving"] .rush-entry-signwrap { opacity: 0.1; } /* The vignette is gradients only; the grain layer rides separately. */ .rush-entry-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 62% 42%, transparent 25%, var(--t-scrim-flat) 78%), var(--t-scrim); transition: opacity 400ms ease; } /* Gate: the vignette is thinned so the unlit sign reads through it. */ div.rush-entry[data-state="gate"] .rush-entry-vignette { opacity: 0.5; } html[data-theme="light"] div.rush-entry[data-state="gate"] .rush-entry-vignette { opacity: 0; } /* M23 ambient sweep across the sign every 6 s (gate, motion, after the load). */ .rush-entry-sweep { position: absolute; inset: -20% -40%; background: linear-gradient(120deg, transparent 42%, var(--t-sweep) 50%, transparent 58%); mix-blend-mode: var(--t-sweep-blend); opacity: 0; pointer-events: none; } html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-sweep { opacity: 1; animation: rk-sweep 6s linear 1.4s infinite; } /* Step B: the sign steps back — dim + blur — so the posters own the frame. */ div.rush-entry[data-state="pick"] .rush-entry-signwrap, div.rush-entry[data-state="switcher"] .rush-entry-signwrap, div.rush-entry[data-state="leaving"] .rush-entry-signwrap { opacity: 0.22; filter: blur(6px) brightness(0.7) saturate(0.6); transform: scale(1.04); } div.rush-entry[data-state="pick"] .rush-entry-signclip, div.rush-entry[data-state="switcher"] .rush-entry-signclip, div.rush-entry[data-state="leaving"] .rush-entry-signclip { opacity: 0 !important; } /* ── The resting slab: a 30° gold stripe at the left edge (gate only) ──── */ .rush-entry-slab { position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: calc(14vw + 57.7vh); background-color: var(--t-gold); background-image: url("../img/rush-gold-texture.webp?v=1.23.2"); background-size: cover; background-position: center; clip-path: polygon(0 0, 100% 0, calc(100% - 57.7vh) 100%, 0 100%); --slab-o: 0.22; opacity: var(--slab-o); pointer-events: none; transition: opacity 400ms ease; } @media (max-width: 767px) { .rush-entry-slab { width: calc(26vw + 57.7vh); --slab-o: 0.16; } } html[data-theme="light"] div.rush-entry[data-state="gate"] .rush-entry-slab { --slab-o: 0; opacity: 0; } div.rush-entry:not([data-state="gate"]) .rush-entry-slab { opacity: 0; } /* ── The blades (M12): parked off-screen until a cut ─────────────────── */ .rush-entry-blade { position: absolute; inset: 0; z-index: 5; background-color: var(--t-gold); background-image: url("../img/rush-gold-texture.webp?v=1.23.2"); background-size: cover; background-position: center; clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%); pointer-events: none; } .rush-entry-blade::after { content: ""; position: absolute; inset: 0; background: rgba(255, 170, 0, 0.78); /* fixed: foil flat */ } .rush-entry-blade--ink { z-index: 6; background: var(--t-fg); } .rush-entry-blade--ink::after { content: none; } .rush-entry-blade.is-cutting { will-change: clip-path; } /* ── Living grain (M29) ──────────────────────────────────────────────── */ .rush-entry-grain { position: absolute; inset: -50%; z-index: 4; background: url("../img/rush-black-grain.webp?v=1.23.2") center / 512px 512px; opacity: var(--t-grain-alpha); mix-blend-mode: var(--t-grain-blend); pointer-events: none; } @media (min-width: 768px) { html.rush-motion div.rush-entry.is-up .rush-entry-grain { animation: rk-grain 640ms steps(8) infinite; } } /* ══ 2. Head: logo + stepper + theme ════════════════════════════════════ */ .rush-entry-head { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 0; } .rush-entry-logo { display: block; width: 150px; height: auto; flex: 0 0 auto; } .rush-entry-headtools { display: flex; align-items: flex-start; gap: 14px; } .rush-entry-stepper { margin: 4px 0 0; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; font-size: 12px; /* r2 fix: 12px floor */ font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-fg-2); } .rush-entry-steprule { display: flex; gap: 4px; } .rush-entry-steprule::before, .rush-entry-steprule::after { content: ""; display: block; width: 28px; height: 3px; background: var(--t-line-strong); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); } .rush-entry-steprule::before { background: var(--t-gold-text); } .rush-entry-steprule::after { transform-origin: left center; transform: scaleX(0); transition: transform 480ms var(--ease-mark, ease), background-color 480ms; } div.rush-entry[data-state="pick"] .rush-entry-steprule::after, div.rush-entry[data-state="switcher"] .rush-entry-steprule::after, div.rush-entry[data-state="leaving"] .rush-entry-steprule::after { background: var(--t-gold-text); transform: scaleX(1); } div.rush-entry[data-state="switcher"] .rush-entry-stepper { visibility: hidden; } /* The theme toggle in the layer: same component, the layer's roles. */ div.rush-entry .rush-theme--entry { margin-top: -2px; } html.rush-motion div.rush-entry .rush-theme--entry.is-pulsing { animation: rk-pulse 600ms ease-out; } /* ══ 3. Shared type ═════════════════════════════════════════════════════ */ div.rush-entry .rk-line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; } html.rush-motion div.rush-entry .rk-line-in, div.rush-entry .rk-line-in { display: block; transform: none; transition: none; } div.rush-entry .rush-display-l { margin: 0; font-weight: 900; font-size: clamp(2.5rem, 11vw, 3.4rem); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; color: var(--t-fg); text-wrap: balance; } .rush-entry-eyebrow, .rush-storemodal-eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-gold-text); } .rush-entry-copy, .rush-entry-intro { margin: 18px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--t-fg-2); } .rush-entry-fine, .rush-storemodal-fine { margin: 18px 0 0; font-size: 13px; /* r2 fix (P1): 12px at --t-fg-3 sampled 3.1–4.4:1 */ line-height: 1.5; color: var(--t-fg-2); } /* r2 fix (P1): the picker eyebrow on the light frame slate is ink, not the * 4.0:1 gold-text on a grain-greyed white. */ html[data-theme="light"] .rush-storemodal-eyebrow { color: var(--t-fg); } .rush-entry-fine a, .rush-storemodal-fine a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; } .rush-entry-fine a:hover { color: var(--t-gold-text); } /* ══ 4. Step A — the gate ═══════════════════════════════════════════════ */ .rush-entry-step { position: relative; z-index: 2; min-height: 0; } div.rush-entry .rush-entry-gate { display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 20px calc(36px + env(safe-area-inset-bottom)); } .rush-entry-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; } .rush-entry-yes, .rush-entry-no, .rush-entry-locate, .rush-entry-keep, .rush-reel-nav { font-family: inherit; font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Yes: the CONTRAST pill — gold on carbon (dark), ink with gold text on the * gold plate (light). The sweep (M18) is a ::before band. */ .rush-entry-yes { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border: 0; background: var(--t-gold); color: var(--t-on-gold); overflow: hidden; isolation: isolate; transition: background-color 150ms ease, transform 150ms ease; } html[data-theme="light"] div.rush-entry[data-state="gate"] .rush-entry-yes { background: var(--t-fg); color: #ffaa00; /* fixed: gold text on the ink pill */ } .rush-entry-yes > span { position: relative; z-index: 1; } .rush-entry-yes::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; background: rgba(251, 250, 244, 0.28); /* fixed: paper sweep */ transform: translateX(-140%) skewX(-30deg); pointer-events: none; } html[data-theme="light"] div.rush-entry[data-state="gate"] .rush-entry-yes::before { background: rgba(255, 170, 0, 0.35); /* fixed: gold sweep on ink */ } html.rush-motion .rush-entry-yes.is-sweeping::before, html.rush-motion .rush-entry-yes:hover::before, html.rush-motion .rush-entry-yes:focus-visible::before { animation: rk-pillsweep 450ms var(--ease-inout-cine) both; } .rush-entry-yes:hover { background: var(--t-gold-hover); } html[data-theme="light"] div.rush-entry[data-state="gate"] .rush-entry-yes:hover { background: var(--t-bg-2); color: var(--t-fg); } .rush-entry-yes:active { transform: translateY(1px); } .rush-entry-no { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; background: transparent; color: var(--t-fg-2); position: relative; } /* M19 cut underline. */ .rush-entry-no::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 9px; height: 2px; background: var(--t-gold-text); clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%); transform-origin: left center; transform: scaleX(0); transition: transform 300ms var(--ease-mark, ease); } .rush-entry-no:hover { color: var(--t-fg); } .rush-entry-no:hover::after, .rush-entry-no:focus-visible::after { transform: scaleX(1); } .rush-entry-yes:focus-visible, .rush-entry-no:focus-visible, .rush-entry-locate:focus-visible, .rush-entry-keep:focus-visible, .rush-reel-nav:focus-visible, .rush-entry-filter input:focus-visible, .rush-entry-fine a:focus-visible, .rush-storemodal-fine a:focus-visible { outline: 2px solid var(--t-focus); outline-offset: 3px; } /* ══ 5. Step B — the reel ═══════════════════════════════════════════════ */ div.rush-entry .rush-entry-pick { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; outline: 0; } .rush-entry-pickhead { position: relative; z-index: 3; padding: 16px 20px 14px; } .rush-entry-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; } .rush-entry-locate { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 1px solid var(--t-line-strong); background: transparent; color: var(--t-fg); width: 100%; transition: border-color 150ms ease, background-color 150ms ease; } .rush-entry-locate:hover:not([disabled]) { border-color: var(--t-fg); background: var(--t-bg-3); } .rush-entry-locate[disabled] { opacity: 0.6; cursor: progress; } .rush-entry-locate[hidden] { display: none; } .rush-entry-locate svg { width: 16px; height: 16px; flex: 0 0 auto; } html.rush-motion .rush-entry-locate.is-locating svg { animation: rk-spin 1.2s linear infinite; } .rush-entry-locstatus { margin: 0; flex: 1 1 100%; min-height: 0; font-size: 13px; line-height: 1.4; color: var(--t-fg-2); } .rush-entry-locstatus:empty { display: none; } .rush-entry-filter { display: block; flex: 1 1 100%; } .rush-entry-filter[hidden] { display: none; } .rush-entry-filter input { width: 100%; min-height: 44px; padding: 0 16px; border: 1px solid var(--t-line); border-radius: 999px; background: var(--t-bg-3); color: var(--t-fg); font: inherit; font-size: 15px; -webkit-appearance: none; appearance: none; } .rush-entry-filter input::placeholder { color: var(--t-fg-3); } /* Reel wrap + nav */ .rush-reel-wrap { position: relative; flex: 1 0 auto; display: flex; align-items: center; min-height: 0; } .rush-reel-nav { position: absolute; top: 50%; z-index: 4; width: 44px; height: 44px; margin-top: -22px; padding: 0; display: grid; place-items: center; border: 1px solid var(--t-line-strong); background: var(--t-scrim-flat); color: var(--t-fg); transition: border-color 150ms ease; } .rush-reel-nav:hover { border-color: var(--t-gold); } .rush-reel-nav[hidden] { display: none; } .rush-reel-nav svg { width: 18px; height: 18px; } .rush-reel-prev { left: 12px; } .rush-reel-next { right: 12px; } /* The list: one component, three layout modes decided by data-count + width. */ .rush-reel { list-style: none; margin: 0; padding: 0 20px 24px; width: 100%; display: flex; flex-direction: column; gap: 12px; } .rush-reel-item { position: relative; } .rush-reel-item[hidden] { display: none; } /* ── The poster ──────────────────────────────────────────────────────── */ .rush-frame { position: relative; border-radius: 14px; overflow: hidden; background: var(--t-bg-3); /* Dark: rim-light. Light: a paper postcard (see the light block). */ box-shadow: 0 0 0 1px var(--t-line), 0 30px 60px -30px var(--t-glow); transition: box-shadow 200ms ease, opacity 300ms ease, transform 500ms var(--ease-out-cine), filter 300ms ease; --cut-k: 60%; } html[data-theme="light"] .rush-frame { box-shadow: 0 0 0 2px var(--t-bg-3), var(--t-shadow-card); } .rush-frame-pick { position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: hidden; border-radius: 14px; } .rush-frame-plate { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--t-bg-2); } .rush-frame-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(0.85); transition: transform 700ms var(--ease-out-cine, ease), filter 300ms ease; } /* A light grade at the foot of the plate so the numeral and the corner slab * sit on something; the slate is NOT on the photo any more. */ .rush-frame-plate::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8, 8, 8, 0.55) 0%, rgba(8, 8, 8, 0.12) 40%, rgba(8, 8, 8, 0) 70%); /* fixed: on the photo */ pointer-events: none; } /* The index numeral: outlined Display L, top-left, on the photo. */ .rush-frame-num { position: absolute; left: 12px; top: 6px; z-index: 2; font-weight: 900; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.5px #fbfaf4; /* fixed: on the photo */ text-shadow: 0 1px 0 rgba(8, 8, 8, 0.4); /* fixed: on the photo */ font-variant-numeric: tabular-nums; pointer-events: none; } /* The 30° gold corner slab: slides in on hover / focus / nearest / mine. */ .rush-frame-corner { position: absolute; right: 0; bottom: 0; z-index: 2; width: 44%; height: 24%; background-color: var(--t-gold); background-image: url("../img/rush-gold-texture.webp?v=1.23.2"); background-size: cover; background-position: center; clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%); transform: translateX(104%); transition: transform 300ms var(--ease-mark, ease); pointer-events: none; } .rush-frame-corner::after { content: ""; position: absolute; inset: 0; background: rgba(255, 170, 0, 0.72); /* fixed: foil flat */ } .rush-frame-slate { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3px; padding: 12px 16px 14px; background: var(--t-bg-3); color: var(--t-fg); } .rush-frame-name { font-size: 24px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: var(--t-fg); position: relative; display: inline-block; align-self: flex-start; } /* M19 cut underline under the name on hover / focus. */ .rush-frame-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--t-gold-text); clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%); transform-origin: left center; transform: scaleX(0); transition: transform 300ms var(--ease-mark, ease); } .rush-frame-street, .rush-frame-hours { font-size: 13px; line-height: 1.35; color: var(--t-fg-2); } .rush-frame-street { font-size: 14px; margin-top: 2px; } .rush-frame-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.35; color: var(--t-fg); } .rush-frame-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--t-fg-3); flex: 0 0 auto; } .rush-frame-status.is-open::before { background: var(--t-gold); } html.rush-motion .rush-frame-status.is-open::before { animation: rk-pulse 2.4s ease-out infinite; } .rush-frame-status.is-closed { color: var(--t-fg-2); } .rush-frame-status[hidden] { display: none; } .rush-frame-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; min-height: 0; } .rush-frame-flags:empty { display: none; } .rush-frame-flags > span { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid var(--t-gold-text); border-radius: 999px; color: var(--t-gold-text); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .rush-frame-flags > span[hidden] { display: none; } .rush-frame-flags > .rush-frame-your { background: var(--t-gold); border-color: var(--t-gold); color: var(--t-on-gold); } .rush-frame-dist { opacity: 0.8; } /* Confirm mode: the viewed store's button reads "Continue with ". */ .rush-frame-continue { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-gold-text); } .rush-frame-continue::after { content: "\2192"; font-size: 15px; } .rush-frame-continue[hidden] { display: none; } /* States */ .rush-frame.is-mine { box-shadow: 0 0 0 2px var(--t-gold), 0 30px 60px -30px var(--t-glow); } .rush-frame.is-mine .rush-frame-corner, .rush-frame.is-near .rush-frame-corner, .rush-frame.is-viewing .rush-frame-corner { transform: none; } .rush-frame-pick:focus-visible { outline: 2px solid var(--t-focus); outline-offset: 3px; } .rush-frame-pick:focus-visible .rush-frame-corner { transform: none; } .rush-frame-pick:focus-visible .rush-frame-img { filter: saturate(1); } .rush-frame-pick:focus-visible .rush-frame-name::after { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { .rush-frame-img { filter: saturate(0.55); } .rush-frame-pick:hover .rush-frame-img, .rush-frame-pick:focus-visible .rush-frame-img { filter: saturate(1); } .rush-frame-pick:hover .rush-frame-img { transform: scale(1.06); } .rush-frame-pick:hover .rush-frame-corner { transform: none; } .rush-frame-pick:hover .rush-frame-name::after { transform: scaleX(1); } html.rush-motion .rush-reel-item:hover .rush-frame { transform: scale(1.04); z-index: 2; } /* Siblings dim under a hover — never the frame that holds keyboard focus. */ .rush-reel:hover .rush-reel-item:not(:hover):not(:focus-within) .rush-frame { opacity: 0.55; } } /* ── Foot ────────────────────────────────────────────────────────────── */ .rush-entry-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--t-line); background: var(--t-scrim-flat); } .rush-entry-foot .rush-storemodal-fine { margin: 0; } .rush-entry-keep { display: inline-flex; align-items: center; justify-content: center; gap: 0.32em; min-height: 44px; padding: 0 18px; border: 1px solid var(--t-line-strong); background: transparent; color: var(--t-fg); transition: border-color 150ms ease; } .rush-entry-keep:hover { border-color: var(--t-gold); } .rush-entry-keep[hidden] { display: none; } /* ══ 6. Layout modes (C4) ═══════════════════════════════════════════════ * N ≤ 3 phones: stacked, 16:9 plates · ≥768: three posters in a row (4:5) * 4–6 phones: 2-col, 4:5 plates · ≥768: 3-col grid, two rows * N ≥ 7 dense list rows: 96px square plate | slate; 1 / 2 / 3 columns. * .rush-reel[data-count] is registry-derived, so every mode is cache-safe. */ /* Phones, 4–6: a 2-col poster grid. */ @media (max-width: 767px) { .rush-reel[data-count="4"], .rush-reel[data-count="5"], .rush-reel[data-count="6"] { flex-direction: row; flex-wrap: wrap; gap: 10px; } .rush-reel[data-count="4"] .rush-reel-item, .rush-reel[data-count="5"] .rush-reel-item, .rush-reel[data-count="6"] .rush-reel-item { flex: 0 0 calc(50% - 5px); } .rush-reel[data-count="4"] .rush-frame-plate, .rush-reel[data-count="5"] .rush-frame-plate, .rush-reel[data-count="6"] .rush-frame-plate { aspect-ratio: 4 / 5; } .rush-reel[data-count="4"] .rush-frame-name, .rush-reel[data-count="5"] .rush-frame-name, .rush-reel[data-count="6"] .rush-frame-name { font-size: 18px; } .rush-reel[data-count="4"] .rush-frame-hours, .rush-reel[data-count="5"] .rush-frame-hours, .rush-reel[data-count="6"] .rush-frame-hours { display: none; } .rush-reel[data-count="4"] .rush-frame-slate, .rush-reel[data-count="5"] .rush-frame-slate, .rush-reel[data-count="6"] .rush-frame-slate { padding: 12px 12px 14px; } } /* Dense mode, N ≥ 7 (.is-many): list rows. */ .rush-reel.is-many { gap: 0; padding-top: 0; } .rush-reel.is-many .rush-frame { border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid var(--t-line); --cut-k: 0%; } .rush-reel.is-many .rush-frame-pick { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 0; border-radius: 0; } .rush-reel.is-many .rush-frame-plate { aspect-ratio: 1 / 1; border-radius: 8px; } .rush-reel.is-many .rush-frame-plate::before { display: none; } .rush-reel.is-many .rush-frame-num { display: none; } .rush-reel.is-many .rush-frame-corner { width: 34%; height: 34%; } .rush-reel.is-many .rush-frame-slate { background: transparent; padding: 0 8px 0 0; gap: 2px; } .rush-reel.is-many .rush-frame-name { font-size: 16px; } .rush-reel.is-many .rush-frame-street { font-size: 13px; margin-top: 0; } .rush-reel.is-many .rush-frame-hours { display: none; } .rush-reel.is-many .rush-frame.is-mine { box-shadow: none; border-bottom-color: var(--t-gold); } @media (hover: hover) and (pointer: fine) { html.rush-motion .rush-reel.is-many .rush-reel-item:hover .rush-frame { transform: none; } .rush-reel.is-many .rush-frame-pick:hover .rush-frame-img { transform: none; } /* A twelve-row list dims its siblings gently; the hovered row leads by its slab. */ .rush-reel.is-many:hover .rush-reel-item:not(:hover):not(:focus-within) .rush-frame { opacity: 0.78; } } /* Tablet ≥ 768. */ @media (min-width: 768px) { .rush-entry-head { padding: 24px 32px 0; } .rush-entry-logo { width: 170px; } div.rush-entry .rush-display-l { font-size: clamp(2.75rem, 6vw, 5rem); } /* The gate: copy column LEFT, the sign RIGHT (both themes). */ div.rush-entry .rush-entry-gate { justify-content: center; align-items: flex-start; text-align: left; padding: 24px 32px 48px 6vw; } div.rush-entry .rush-entry-gate > * { width: 100%; max-width: 620px; position: relative; z-index: 1; } div.rush-entry .rush-entry-gate .rush-display-l { font-size: clamp(3.5rem, 7.5vw, 6.5rem); line-height: 0.88; } .rush-entry-copy { font-size: 17px; max-width: 44ch; } .rush-entry-actions { flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; } .rush-entry-yes, .rush-entry-no { width: auto; } .rush-entry-pickhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow eyebrow" "title title" "intro tools"; align-items: end; column-gap: 32px; padding: 20px 32px 18px; width: min(100%, 1284px); margin-inline: auto; } .rush-storemodal-eyebrow { grid-area: eyebrow; } .rush-entry-pickhead .rush-display-l { grid-area: title; } .rush-entry-intro { grid-area: intro; margin-top: 12px; } .rush-entry-tools { grid-area: tools; margin-top: 0; justify-content: flex-end; } .rush-entry-locate { width: auto; } .rush-entry-locstatus { flex-basis: auto; text-align: right; } .rush-entry-filter { flex: 0 1 280px; } .rush-reel { flex-direction: row; flex-wrap: wrap; gap: 20px; padding: 6px 32px 28px; width: min(100%, 1284px); margin-inline: auto; } /* Posters: three in a row for N ≤ 3, a 3-col grid for 4–6. */ .rush-reel-item { flex: 0 0 calc((100% - 40px) / 3); } .rush-frame-plate { aspect-ratio: 4 / 5; } .rush-frame { --cut-k: 72%; } .rush-frame-name { font-size: 26px; } .rush-entry-foot { padding: 14px 32px calc(18px + env(safe-area-inset-bottom)); } /* Dense mode: two columns of rows. */ .rush-reel.is-many { gap: 0 32px; } .rush-reel.is-many .rush-reel-item { flex: 0 0 calc(50% - 16px); } } /* Desktop ≥ 1024. */ @media (min-width: 1024px) { .rush-entry-head { padding: 24px 40px 0; } .rush-entry-logo { width: 176px; } /* The intro + tools sit BESIDE the title so the posters clear the fold. */ .rush-entry-pickhead { padding: 18px 40px 18px; width: min(100%, 1300px); grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); grid-template-areas: "eyebrow eyebrow" "title intro" "title tools"; grid-template-rows: auto 1fr auto; align-items: end; } .rush-entry-pickhead .rush-display-l { align-self: end; } .rush-entry-intro { margin-top: 0; } .rush-entry-tools { margin-top: 12px; } .rush-reel { gap: 24px; padding: 6px 40px 32px; width: min(100%, 1300px); } .rush-reel-item { flex: 0 0 calc((100% - 48px) / 3); } /* Width caps the 4:5 plate so head + posters + foot fit a 900px viewport. */ .rush-reel[data-count="1"] .rush-reel-item, .rush-reel[data-count="2"] .rush-reel-item, .rush-reel[data-count="3"] .rush-reel-item { flex: 1 1 0; min-width: 240px; max-width: min(400px, calc((100vh - 530px) * 0.8)); } .rush-frame-name { font-size: 28px; } .rush-reel.is-many .rush-reel-item { flex: 0 0 calc((100% - 64px) / 3); } } /* Tall desktops: the head pins while a long grid scrolls beneath it. */ @media (min-width: 1024px) and (min-height: 721px) { .rush-entry-pickhead { position: sticky; top: 0; } } /* Short desktop viewports: let the pick section scroll rather than crush the posters. */ @media (min-width: 768px) and (max-height: 720px) { .rush-reel[data-count="1"] .rush-reel-item, .rush-reel[data-count="2"] .rush-reel-item, .rush-reel[data-count="3"] .rush-reel-item { max-width: 300px; } } /* ══ 7. Motion (html.rush-motion only) ══════════════════════════════════ */ /* Gate load (≤ 900 ms): sign 0 → rest 400, then logo / stepper / eyebrow / * two H2 lines (90 ms) / copy / Yes / No / fine (60 ms). */ html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-signwrap { animation: rk-fade 400ms ease-out both; } html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-slab { animation: rk-slabin 700ms var(--ease-out-cine) 120ms both; } @keyframes rk-slabin { from { transform: translateX(-60%); opacity: 0; } to { transform: none; opacity: var(--slab-o, 0.22); } } html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-logo, html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-headtools, html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-eyebrow, html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-copy, html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-actions, html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-fine { animation: rk-rise 520ms var(--ease-out-cine) both; } html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-logo { animation-delay: 180ms; } html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-headtools { animation-delay: 220ms; } html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-eyebrow { animation-delay: 260ms; } html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-gate .rk-line:nth-child(1) .rk-line-in { animation: rk-typerise 700ms var(--ease-out-cine) 300ms both; } html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-gate .rk-line:nth-child(2) .rk-line-in { animation: rk-typerise 700ms var(--ease-out-cine) 390ms both; } html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-copy { animation-delay: 420ms; } html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-actions { animation-delay: 480ms; } html.rush-motion div.rush-entry.is-up[data-state="gate"] .rush-entry-fine { animation-delay: 540ms; } /* The Yes pill is clickable from frame 1: only its parent's opacity/transform animate. */ /* Cut 1, 0–420 ms: the neon strike (dark) / the paper lift (light) while the * gate copy drops (220 ms). Scoped to the gate state so the pick-state grade * wins the moment the state flips under the blade. */ html.rush-motion div.rush-entry[data-state="gate"].is-leaving-gate .rush-entry-signwrap { animation: rk-strike 420ms linear both; } html.rush-motion[data-theme="light"] div.rush-entry[data-state="gate"].is-leaving-gate .rush-entry-signwrap { animation: rk-lift 600ms ease-in-out both; } html.rush-motion[data-theme="light"] div.rush-entry[data-state="gate"].is-leaving-gate .rush-entry-sweep { opacity: 1; animation: rk-sweep 600ms var(--ease-inout-cine) both; } html.rush-motion div.rush-entry.is-leaving-gate .rush-entry-gate { opacity: 0; transform: translateY(16px); transition: opacity 220ms var(--ease-in-cine), transform 220ms var(--ease-in-cine); pointer-events: none; } /* Pick step arrives (700–1000 ms): head rises per line; frames CUT in under * a 30° clip + 40 px rise, 60 ms stagger; plates push in 1.08 → 1. */ html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-storemodal-eyebrow, html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-entry-intro, html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-entry-tools, html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving ~ .rush-entry-foot { animation: rk-rise 700ms var(--ease-out-cine) both; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-entry-pickhead .rk-line:nth-child(1) .rk-line-in { animation: rk-typerise 700ms var(--ease-out-cine) 60ms both; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-entry-pickhead .rk-line:nth-child(2) .rk-line-in { animation: rk-typerise 700ms var(--ease-out-cine) 150ms both; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-entry-intro { animation-delay: 140ms; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-entry-tools { animation-delay: 200ms; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving ~ .rush-entry-foot { animation-delay: 260ms; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item { animation: rk-rise 700ms var(--ease-out-cine) both; --rk-y: 40px; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-frame { animation: rk-cutin 520ms var(--ease-inout-cine) both; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-frame-img { animation: rk-pushin 900ms var(--ease-out-cine) both; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(1), html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(1) .rush-frame, html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(1) .rush-frame-img { animation-delay: 120ms; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(2), html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(2) .rush-frame, html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(2) .rush-frame-img { animation-delay: 180ms; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(3), html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(3) .rush-frame, html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(3) .rush-frame-img { animation-delay: 240ms; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(4), html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(4) .rush-frame, html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(4) .rush-frame-img { animation-delay: 300ms; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(5), html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(5) .rush-frame, html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(5) .rush-frame-img { animation-delay: 360ms; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(6), html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(6) .rush-frame, html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(6) .rush-frame-img { animation-delay: 420ms; } html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(n+7), html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(n+7) .rush-frame, html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel-item:nth-child(n+7) .rush-frame-img { animation-delay: 480ms; } /* Dense rows arrive as a plain rise (no clip: the row has no plate to cut). */ html.rush-motion div.rush-entry.is-up[data-state="pick"] .rush-entry-pick.is-arriving .rush-reel.is-many .rush-frame { animation-name: rk-fade; } /* Nearest-first: the winning frame's corner slab stamps in. */ html.rush-motion .rush-frame.is-near .rush-frame-corner { animation: rk-stamp 420ms var(--ease-out-cine) both; } /* Switcher mode: the layer arrives under the short blade (JS): everything * but the blades is veiled until the band covers the viewport. */ div.rush-entry.is-veiled > :not(.rush-entry-blade) { opacity: 0 !important; } div.rush-entry.is-veiled { background-color: transparent; } /* Switcher mode: no rise. */ html.rush-motion div.rush-entry.is-up[data-state="switcher"] .rush-entry-pick { animation: rk-fade 150ms ease-out 150ms both; } /* Leaving: frames drop, head/tools/foot fade, the sign goes to black. */ html.rush-motion div.rush-entry[data-state="leaving"] .rush-reel-item:not(.is-picked) { opacity: 0; transform: translateY(24px); transition: opacity 260ms var(--ease-in-cine), transform 260ms var(--ease-in-cine); } html.rush-motion div.rush-entry[data-state="leaving"] .rush-reel-item.is-picked { opacity: 0; transition: opacity 120ms ease; } html.rush-motion div.rush-entry[data-state="leaving"] .rush-entry-pickhead, html.rush-motion div.rush-entry[data-state="leaving"] .rush-entry-foot, html.rush-motion div.rush-entry[data-state="leaving"] .rush-entry-head, html.rush-motion div.rush-entry[data-state="leaving"] .rush-reel-nav { opacity: 0; transition: opacity 200ms ease; } html.rush-motion div.rush-entry[data-state="leaving"] .rush-entry-bg, html.rush-motion div.rush-entry[data-state="leaving"] .rush-entry-grain { opacity: 0; transition: opacity 300ms ease 400ms; } /* The layer's own field lets go at 400 ms so the site (already bound) shows * under the travelling clone and the blade. */ html.rush-motion div.rush-entry[data-state="leaving"] { background-color: transparent; transition: background-color 300ms ease 400ms; } div.rush-entry.is-fading { opacity: 0; transition: opacity 150ms ease; pointer-events: none; } html:not(.rush-motion) div.rush-entry.is-fading { transition-duration: 200ms; } /* The match-cut clone (M1): a fixed, clipped window onto the picked photo. */ .rush-entry-cut { position: fixed; inset: 0; z-index: 9001; overflow: hidden; pointer-events: none; will-change: clip-path; } .rush-entry-cut img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, filter; max-width: none; } .rush-entry-cut::after { content: ""; position: absolute; inset: 0; background: var(--t-scrim); opacity: 0; transition: opacity 700ms var(--ease-inout-cine); } .rush-entry-cut.is-graded::after { opacity: 1; } /* Magnetic (M17) targets: the transform is driven by JS on fine pointers; * the inner span is the label that counter-moves. */ div.rush-entry [data-magnetic] { will-change: transform; } div.rush-entry [data-magnetic] > span { display: inline-block; } .rush-entry-locate-in { display: inline-flex; align-items: center; gap: 9px; } .rush-entry-keep-in { display: inline-flex; align-items: center; gap: 0.32em; } /* ══ 8. Reduced motion ═══════════════════════════════════════════════════ * html.rush-motion is never written under prefers-reduced-motion, so the * choreography above is already off; this also stops the transform * TRANSITIONS that are state, not reveal. Colour and opacity stay. */ @media (prefers-reduced-motion: reduce) { .rush-entry-steprule::after { transition: none; } .rush-frame-img { transition: filter 300ms ease; } .rush-frame-pick:hover .rush-frame-img { transform: none; } .rush-frame-corner, .rush-frame-name::after, .rush-frame { transition: none; } .rush-entry-signwrap, .rush-entry-sign, .rush-entry-signclip { transition: none; } div.rush-entry[data-state="pick"] .rush-entry-signwrap, div.rush-entry[data-state="switcher"] .rush-entry-signwrap, div.rush-entry[data-state="leaving"] .rush-entry-signwrap { transform: none; } .rush-entry-yes, .rush-entry-no::after { transition: none; } .rush-entry-yes:active { transform: none; } .rush-entry-sweep { display: none; } /* Nothing animates at all after boot (D5): the colour/opacity * transitions that are state, not reveal, are cut too. */ div.rush-entry, .rush-entry-vignette, .rush-entry-slab, .rush-entry-locate, .rush-entry-keep, .rush-reel-nav, .rush-frame-status::before, .rush-entry-yes::before { transition: none; animation: none; } /* Reduced motion: the sign rests LIT (there is no strike to light it). */ div.rush-entry[data-state="gate"] .rush-entry-signwrap { filter: brightness(0.7) saturate(0.8); } }