/* kit.css — Unity example-site kit (unity-examples, uplift/2026-10), trimmed for Avenue's launch page.
   Loaded BEFORE css/launch.css. The example tag, example footer and demo-form notice are removed: this is a
   client page. Holds the reset, the image-slot frame, the entrance contract, scroll-scene defaults and the
   reduced-motion net. Design lives in css/launch.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: #fff; color: #000; font-weight: 700; }
.skip:focus { top: 12px; }

/* ── Image slots: a fixed frame that survives any client photograph ────────────────────────────
   The frame's aspect ratio is set per class in launch.css; the photograph fills it and is placed by --focus. */
figure[data-slot] { position: relative; margin: 0; overflow: hidden; }
figure[data-slot] > img, figure[data-slot] > video { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }

/* ── The entrance contract: one hook that cannot hide a page ─────────────────────────────────────
   The head's inline script puts `js` on <html>, and `motion-ok` too unless the visitor asked for reduced motion.
   `is-ready` is added when the fonts and the hero picture have loaded, ALWAYS within 1.5 s of navigation (a timer in
   kit.js and the same timer in the head, so a kit.js that fails to load cannot hold a page back), and at once when motion
   is off. Things may be hidden for the entrance ONLY under
       html.motion-ok:not(.is-ready) .thing { opacity: 0; … }
   With scripts blocked `motion-ok` is never set, so the rule never matches and nothing stays hidden. */

/* ── Scroll scenes: [data-pin] bands receive --p (0→1) from kit.js; CSS does the rest ──────────── */
[data-pin] { --p: 0; }
/* Without JS, or under reduced motion, every scene is its finished state: html.motion-ok gates it. */
html:not(.motion-ok) [data-pin] { --p: 1; }

/* ── Reduced motion: nothing hidden, nothing moving, no autoplay (kit.js pauses video) ────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}
/* Reveals: hidden only when JS + motion are on, so a no-JS page shows everything */
html.motion-ok.js [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 18px, 0); }
[data-reveal] { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }