// Scenio landing · the hero — brief §3/§3a/§3c @911cee4. The photograph is full-width the whole time; copy, CTAs and the bottom-centred search never move; only the film and the callouts animate. §3c: the move is the approved one-shot camera walk (scenio-walk.mp4 → walk/0001–0097.jpg — the white manor, 10.04 s) scrubbed by scroll on a canvas — frame = round(p / .90 × 96) through a damped follower (.14, initialised at mount); Frame B (0097) is in place from p .90; dwell .92 → 1. Callouts are DOM overlays; every anchor, lifetime and box rule lives in hero-callouts.js (window.SCENIO_HERO_CALLOUTS) — authored against the manor film, see hero-callouts.html.
(() => {
if (!window.SCENIO_INIT) return; // host guard (C4-m10): the bundle carries this file too; it runs only on its host page, which sets window.SCENIO_INIT first
const NS = window.ScenioPaperCrimson_b9a328;
const { UButton, UFormField, UInput, UInputNumber, USelectMenu, ScenioCallout, ScenioDate, ScenioLocationField, ScenioGuestField } = NS;
const { useState, useEffect, useRef, useLayoutEffect, useMemo, useCallback, memo, forwardRef } = React;
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const seg = (p, a, b) => clamp((p - a) / (b - a), 0, 1);
const lerp = (a, b, t) => a + (b - a) * t;
const NAV = { desktop: 78, mobile: 66 };
const ASSETS = '../../assets/hero/';
const FRAME = { w: 1920, h: 1080 }; // the film's frame
const N = 97, FILM_END = .90; // 97 frames scrubbed over p 0 → .90; Frame B holds from .90
const frameSrc = (i) => `${ASSETS}walk/${String(i + 1).padStart(4, '0')}.jpg`;
const CFG = window.SCENIO_HERO_CALLOUTS; // hero-callouts.js — the authored set
const DWELL = .92, FOLLOW = .14, STAGGER = 120;
const LAUNCH = CFG.launch || [0, 420, 980]; // the launch cadence: the three A callouts arrive one after another with uneven gaps (ruling)
const WAVE_B = CFG.waves; // B wave 0 (Światło, Dekoracje) at p .7875 = frame 85, wave 1 (Muzyka) at .825 = frame 89 — the camera has settled
// Frame A set — anchors keyed per film frame ([frame, x%, y%], linear between keys); each callout has its own in / out frame and fades over `fade` frames before out; box = preferred top-left at the in frame, % of the film frame; the box then travels with its anchor
const SET_A = CFG.a;
// Frame B set — THREE on frame 0097: Światło → the wall lantern's flame, Muzyka → the open right leaf (abstract: “w salonie”), Dekoracje → the hydrangea urn; the boxes form one column on the wall right of the door, right edge 24px from the stage edge, tops at 40 / 47.5 / 55 % of the frame
const SET_B = CFG.b;
const DOOR_B = CFG.door.noGo; // frame 0097: the door incl. leaves and casing (outer casing edge) — never covered by a box
const ALL = [...SET_A, ...SET_B];
// the film cover-fitted to the stage; a stage narrower than 16:9 crops from the LEFT (the landscape), so the venue, the doorway and the wall right of it stay in view at every size
function coverBox(W, H) { const k = Math.max(W / FRAME.w, H / FRAME.h); const w = FRAME.w * k, h = FRAME.h * k; return { w, h, k, x: -(w - W), y: -(h - H) / 2 }; }
const keyed = (keys, f) => { if (f <= keys[0][0]) return { x: keys[0][1], y: keys[0][2] }; for (let i = 1; i < keys.length; i++) { if (f <= keys[i][0]) { const t = (f - keys[i - 1][0]) / (keys[i][0] - keys[i - 1][0]); return { x: lerp(keys[i - 1][1], keys[i][1], t), y: lerp(keys[i - 1][2], keys[i][2], t) }; } } const a = keys[keys.length - 2], b = keys[keys.length - 1]; const t = Math.min((f - b[0]) / (b[0] - a[0]), 1.5); return { x: b[1] + (b[1] - a[1]) * t, y: b[2] + (b[2] - a[2]) * t }; };
// box estimate for the placer and the proofs: width = max(min, 22 + text) capped at max; the second line (the bound name, or the cta) wraps to two lines when it does not fit — height 30 (label only) · 44 (one line) · 59 (two lines)
const boxSize = (label, note, min = 112, max = Infinity, cta) => { const tw = (s) => (s ? 22 + String(s).length * 5.6 : 0); const w = Math.round(clamp(Math.max(22 + String(label).length * 8.4, tw(note), tw(cta), min), min, Math.max(min, max))); const lines = (s) => (s ? Math.min(2, Math.ceil((tw(s) - 22) / (w - 22))) : 0); const n = Math.max(lines(note), lines(cta)); return { w, h: n ? (n > 1 ? 59 : 44) : 30, lines: n }; };
// the Frame B column: right edge = W − right; boxes stack from their authored tops with `gap` between; the column shifts up when its bottom would cover an anchor standing in the column (the hydrangeas) or leave the stage
function columnB(defs, sizes, anchorsPx, W, H, topPx, right, gap = 8) { const sorted = defs.slice().sort((p, q) => p.top - q.top); const out = {}; let bottom = -Infinity; sorted.forEach((c) => { const y = Math.max(topPx(c.top), bottom + gap); out[c.id] = { x: W - right - sizes[c.id].w, y }; bottom = y + sizes[c.id].h; }); const top = out[sorted[0].id].y; const left = Math.min(...sorted.map((c) => out[c.id].x)); const inCol = sorted.map((c) => anchorsPx[c.id]).filter((a) => a && a.x >= left - 8); const below = inCol.filter((a) => a.y > (top + bottom) / 2); const limit = Math.min(H - 8, ...below.map((a) => a.y - 14)); const over = bottom - limit; if (over > 0) sorted.forEach((c) => { out[c.id].y -= over; }); return out; }
// the wall right of the door: how wide a Frame B box may be at this stage (never under the minimum)
const wallWidth = (W, box, right, min) => Math.max(min, W - right - (box.x + DOOR_B.right / 100 * box.w));
// boxes: preferred position, else shifts by the footprint + 8px, else the far side of the anchor, else the least-overlapping candidate — never over an anchor (±8px), another box, the copy, the search panel, the header band or (Frame B) the doorway. Obstacles carry their own margin m (default 8).
function placeSet(defs, prefer, anchorsPx, sizes, W, H, obstacles) {
const PAD = 8, out = {}, placed = [];
const inside = (r) => r.x >= PAD && r.y >= PAD && r.x + r.w <= W - PAD && r.y + r.h <= H - PAD;
const hit = (r, o, m) => r.x < o.x + o.w + m && r.x + r.w + m > o.x && r.y < o.y + o.h + m && r.y + r.h + m > o.y;
const coversAnchor = (r) => Object.values(anchorsPx).some((a) => a && a.x > r.x - PAD && a.x < r.x + r.w + PAD && a.y > r.y - PAD && a.y < r.y + r.h + PAD);
const ok = (r) => inside(r) && !coversAnchor(r) && !placed.some((o) => hit(r, o, PAD)) && !obstacles.some((o) => hit(r, o, o.m ?? PAD));
const overlap = (r) => [...placed, ...obstacles].reduce((s, o) => s + Math.max(0, Math.min(r.x + r.w, o.x + o.w) - Math.max(r.x, o.x)) * Math.max(0, Math.min(r.y + r.h, o.y + o.h) - Math.max(r.y, o.y)), 0) + (inside(r) ? 0 : 1e6);
defs.forEach((c) => {
const { w, h } = sizes[c.id]; const a = anchorsPx[c.id]; const pr = prefer[c.id]; if (!pr) return;
const x0 = clamp(pr.x, PAD, Math.max(PAD, W - w - PAD)), y0 = clamp(pr.y, PAD, Math.max(PAD, H - h - PAD)); const dx = w + PAD, dy = h + PAD;
const cands = [[x0, y0], [x0 - dx, y0], [x0 + dx, y0], [x0, y0 - dy], [x0, y0 + dy], [x0 - dx, y0 - dy], [x0 + dx, y0 - dy], [x0 - dx, y0 + dy], [x0 + dx, y0 + dy]];
if (a) cands.push([2 * a.x - x0 - w, y0], [x0, 2 * a.y - y0 - h], [2 * a.x - x0 - w, 2 * a.y - y0 - h]);
const rects = cands.map(([x, y]) => ({ x, y, w, h })); const pick = rects.find(ok) || rects.slice().sort((p, q) => overlap(p) - overlap(q))[0]; placed.push(pick); out[c.id] = pick;
});
return out;
}
// W1.7 (WCAG 2.2.2): the word turns through the list ONCE and rests on the first word; it never starts under reduced motion or with the film switched off (the still toggle)
function RotatingWord({ words, interval = 3600, reduced }) {
const [i, setI] = useState(0);
const [out, setOut] = useState(false);
const [em, setEm] = useState([]);
const box = useRef(null); const spans = useRef([]);
const measure = () => { const fs = box.current ? parseFloat(getComputedStyle(box.current).fontSize) || 1 : 1; setEm(spans.current.map((el) => (el ? el.offsetWidth / fs : 0))); };
useEffect(() => { measure(); const r = () => measure(); window.addEventListener('resize', r); if (document.fonts) document.fonts.ready.then(measure); return () => window.removeEventListener('resize', r); }, [words.join('|')]);
useEffect(() => {
if (reduced) return;
let steps = 0;
const t = setInterval(() => { steps += 1; if (steps > words.length) { clearInterval(t); return; } setOut(true); setTimeout(() => { setI((n) => (n + 1) % words.length); setOut(false); }, 300); if (steps === words.length) clearInterval(t); }, interval);
return () => clearInterval(t);
}, [words.length, interval, reduced]);
return (
{words.map((w, k) => { spans.current[k] = el; }} style={{ position: 'absolute', left: 0 }}>{w})}{words[i]}
);
}
// compact frames (< 1180): the callouts collapse to a legend row under the text — the category, then the bound name (or the listing cta); each row is the same link as its box; the Frame A set gives way to the Frame B set as the camera arrives
function Legend({ t, set, texts }) {
const cur = set === 'a' ? SET_A : SET_B;
return