/* ═══════════════════════════════════════════════════════════════════════════ LUSKI — the interaction system ─────────────────────────────────────────────────────────────────────────── One place that owns how EVERY interactive element on the site moves, focuses and disables. Before this file existed each component invented its own: lifts at -2/-3/-4px, ten different scale(1.01)/scale(1.02) hover-grows, exactly three press states in the entire codebase, and ruby focus rings at four different offsets. Tuning the feel meant finding forty rules. ── PROPERTY OWNERSHIP (the rule that keeps this file from fighting others) ── THIS file owns: transform, box-shadow, outline, opacity, cursor COMPONENTS still own: color, background-color, border-color, text-decoration That split is why a component can keep its own ruby hover colour while its motion comes from here. It only holds if components never re-declare the owned properties, AND never use a `transition:` SHORTHAND -- a shorthand resets transition-property and silently deletes the transform timing set below. Component shorthands on tiered selectors were removed for exactly this reason; do not reintroduce one. Use longhands (transition-property, transition-duration) in component CSS if you need to animate a colour. ── SIX FAMILIES ── T0 inline link colour + underline only. No transform. Text in prose. T1 chip / tab lift -4px, no shadow. Small pill controls. T2 button lift -2px + ruby glow. Real actions. Half the chip lift because a 4px hop on a row of buttons reads as a wobble. T3 card lift -4px + deep shadow. Whole-surface click targets. T4 dense row no lift at all -- rows sit in tight lists where lifting one shoves the eye off the others. Press only. T5 field focus ring + border. Never moves; a moving input is hostile while you are typing into it. ── DELIBERATE EXCLUSIONS (do not add these to a tier) ── .arc-nav__link keeps its own -4px/300ms bounce in nav.css. It predates this file by a day and Eric signed it off as-is. .boot-overlay and every descendant (.boot-scene--title, .boot-menu__btn, .boot-start, .boot-start-hit) -- the boot sequence is off-limits by standing instruction. [data-cursor-plain] opts out of the cursor reticle; it opts out here too. .g-* garage classes garage/ pages load NO arcade CSS (see garage/index.html), so garage selectors here would be dead code. The garage is aligned to these same values by hand in garage.css. ── CONTAINING-BLOCK WARNING ── A non-none `transform` on an element makes it the containing block for any position:fixed descendant, which would trap a full-screen modal inside a card. Verified safe today: .res-overlay and .cart-overlay are both direct children of with no tiered ancestor. Before adding a selector to T1-T4, confirm it can never wrap a fixed-position overlay. ── FOCUS COLOUR ── Ruby, by Eric's explicit call (Aug 2026), not the blue garage/tokens.css uses. Ruby measures 3.21:1 on --arc-parchment and ~9:1 on --arc-bg, so it clears the 3:1 floor SC 1.4.11 sets for focus indicators on both grounds. Known accepted cost: on controls whose hover is also ruby, focused and hovered look similar. The two-tone ring below is what buys back most of the difference -- the inner --arc-focus-ground gap is a SHAPE change, so it still reads as focus at the same hue. ═══════════════════════════════════════════════════════════════════════════ */ /* ── (a) REST ────────────────────────────────────────────────────────────── Each tier declares its FULL transition list here, at rest, so the element animates both into and out of every state. Declaring transitions only inside :hover gives you an animated entry and an instant snap back. */ .ft-links a, .crumbs a, .prose a, .rg-links a, .areas-grid a, .text-link, .sc-link, .dlg-back, .res-direct a { transition-property: color, text-decoration-color, text-decoration-thickness; transition-duration: var(--arc-transition); transition-timing-function: var(--arc-ease); } .arc-nav__stars, .arc-nav__mute, .dos-chip, .dos-tab, .arc-bay-tab, .ql-tab, .arc-page-btn, .tab-btn, .calc-term-btn, .gen-pill, .f-pill, .dos-file__photo-btn, .res-modal-x, .luski-toast__close, .dos-file__cta, .enquire-btn, .reserve-btn, .res-pay-btn, .alert-btn, .empty-cta, .sell-banner-btn, .tool-btn, .submit-btn, .pkg-add-btn, .notify-btn, .full-btn, .ck-btn, .checkout-btn, .pay-btn, .btn, .btn-p, .btn-s, .ig-btn, .copy-btn, .extras-toggle, .car-card, .brand-card, .pkg-card, .model-card, .build-card, .notify-card, .who-card, .founder-card, .mat-card, .bq-card, .dos-row, .dlg-choice, .dlg-topic, .extra-item, .warranty-row, .gallery-thumb { /* Per-property timing, deliberately not one duration for all five. Motion wants the slow 300ms bounce; colour wants the original quick 160ms ease. Running a colour change on a bouncy curve overshoots the target colour and reads as a flicker, and 300ms on a row highlight feels laggy under the cursor. The lists are positional -- keep all three the same length and in the same order. */ transition-property: transform, box-shadow, color, background-color, border-color; transition-duration: var(--arc-dur-lift), var(--arc-dur-lift), var(--arc-transition), var(--arc-transition), var(--arc-transition); transition-timing-function: var(--arc-ease-bounce), var(--arc-ease-bounce), var(--arc-ease), var(--arc-ease), var(--arc-ease); } /* The photo inside a card zooms on the CARD's hover, so it needs the timing even though it is never itself a hover target. */ .car-card .cc-stage img, .build-card .bc-img img, .dos-tile .dos-tile__photo img { transition-property: transform; transition-duration: var(--arc-dur-lift); transition-timing-function: var(--arc-ease); } /* ── (b) HOVER ───────────────────────────────────────────────────────────── Gated behind a real mouse. On touch, :hover latches after a tap and stays stuck until you tap elsewhere -- an element frozen mid-lift reads as broken. This gate covers the TRANSFORM layer; colour hovers declared in component CSS are not gated and can still latch. That is a known remaining gap, not a claim that hover never fires on touch. */ @media (hover: hover) and (pointer: fine) { .arc-nav__stars:hover, .arc-nav__mute:hover, .dos-chip:hover, .dos-tab:hover, .arc-bay-tab:hover, .ql-tab:hover, .arc-page-btn:hover, .tab-btn:hover, .calc-term-btn:hover, .gen-pill:hover, .f-pill:hover, .dos-file__photo-btn:hover, .res-modal-x:hover, .luski-toast__close:hover { transform: translateY(var(--arc-lift-chip)); } .dos-file__cta:hover, .enquire-btn:hover, .reserve-btn:hover, .res-pay-btn:hover, .alert-btn:hover, .empty-cta:hover, .sell-banner-btn:hover, .tool-btn:hover, .submit-btn:hover, .pkg-add-btn:hover, .notify-btn:hover, .full-btn:hover, .ck-btn:hover, .checkout-btn:hover, .pay-btn:hover, .btn:hover, .btn-p:hover, .btn-s:hover, .ig-btn:hover, .copy-btn:hover, .extras-toggle:hover { transform: translateY(var(--arc-lift-btn)); box-shadow: var(--arc-glow-btn-hover); } /* The doubled class is a deliberate specificity bump, not a typo. It changes nothing about WHAT these rules match -- only how loudly they say it. Cards on several pages also carry .rv, the sitewide scroll-reveal, whose revealed state `.rv.in{transform:translateY(0)}` scores the same 0-2-0 as a bare `.card:hover` and is declared LATER (page