/* * FG Sections — per-section entrance choreography + dynamic micro-interactions. * * North Star: "The Field Report" — motion that *confirms*, never performs. * Each content band reveals as it enters the viewport: heads rise, grids stagger, * the experience seal counts up, the featured project clips open. * * Safety contract (no flash, no a11y regression): * - Hidden states apply ONLY under `html.fg-anim`, a class set pre-paint by an * inline snippet and ONLY when the visitor allows motion. * - No-JS, reduced-motion, and gate-failure visitors never get `.fg-anim`, so * they always see fully static, fully visible content. * - The engine (fg-sections.js) only ever ADDS `.is-in` to reveal; it never hides. * - Compositor-only: opacity, transform, clip-path. RTL-safe (no unmirrored X). * * Built on the canonical --fg-* tokens (main.css :root); reuses --fg-ease. * Loaded after fg-home.css on the front page and key landing templates. */ :root { --fg-reveal-shift: 26px; --fg-reveal-dur: 0.72s; --fg-reveal-step: 70ms; } /* ============================================================ 1. Reveal engine — hidden states (gated, motion-only) Real markup selectors, present at parse time → no FOUC. ============================================================ */ @media (prefers-reduced-motion: no-preference) { html.fg-anim .fg-section__intro > *, html.fg-anim .fg-section__head > .fg-btn, html.fg-anim .fg-section__head > a:not(.fg-section__intro), html.fg-anim .fg-why__lead > *, html.fg-anim .fg-roster .fg-client, html.fg-anim .fg-services__grid > .fg-svc-card, html.fg-anim .fg-why__cards > .fg-why-card, html.fg-anim .fg-works__list > .fg-work-item, html.fg-anim .fg-work-feature, html.fg-anim .fg-appt__form-col, html.fg-anim .fg-appt__media { opacity: 0; transform: translateY(var(--fg-reveal-shift)); transition: opacity var(--fg-reveal-dur) var(--fg-ease), transform var(--fg-reveal-dur) var(--fg-ease); transition-delay: calc(var(--i, 0) * var(--fg-reveal-step)); will-change: opacity, transform; } /* Per-group stagger cadence. */ html.fg-anim .fg-roster { --fg-reveal-step: 42ms; } html.fg-anim .fg-services__grid { --fg-reveal-step: 78ms; } html.fg-anim .fg-why__cards { --fg-reveal-step: 90ms; } html.fg-anim .fg-works__list { --fg-reveal-step: 80ms; } /* ----- Revealed: a section enters → its children settle ----- */ html.fg-anim .fg-section.is-in .fg-section__intro > *, html.fg-anim .fg-section.is-in .fg-section__head > .fg-btn, html.fg-anim .fg-section.is-in .fg-section__head > a, html.fg-anim .fg-section.is-in .fg-why__lead > *, html.fg-anim .fg-section.is-in .fg-client, html.fg-anim .fg-section.is-in .fg-svc-card, html.fg-anim .fg-section.is-in .fg-why-card, html.fg-anim .fg-section.is-in .fg-work-item, html.fg-anim .fg-section.is-in .fg-work-feature, html.fg-anim .fg-section.is-in .fg-appt__form-col, html.fg-anim .fg-section.is-in .fg-appt__media { opacity: 1; transform: none; will-change: auto; } /* ----- Projects: featured media clips open top→bottom ----- */ html.fg-anim .fg-work-feature__media { clip-path: inset(0 0 100% 0); transition: clip-path 0.95s var(--fg-ease) 0.12s; will-change: clip-path; } html.fg-anim .fg-section.is-in .fg-work-feature__media { clip-path: inset(0 0 0 0); will-change: auto; } } /* ============================================================ 2. Experience seal — count-up presentation The engine tweens the value; CSS guarantees a stable box so the rolling digits never cause layout shift (CLS). ============================================================ */ .fg-why__stat-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .fg-why__stat-num[data-fg-count] { min-width: 2ch; display: inline-block; text-align: center; } /* ============================================================ 3. Dynamic micro-interactions (always on; reduced-motion safe) Direction-neutral transforms only (scale / translateY), so RTL needs no mirroring. These read as "alive", not decorative. ============================================================ */ /* Service cards: index seal + icon respond as a set on hover/focus. */ .fg-svc-card { transition: transform var(--fg-dur-normal) var(--fg-ease), box-shadow var(--fg-dur-normal) var(--fg-ease), border-color var(--fg-dur-normal) var(--fg-ease); } .fg-svc-card:hover, .fg-svc-card:focus-within { transform: translateY(-4px); } .fg-svc-card__icon { transition: transform var(--fg-dur-normal) var(--fg-ease), color var(--fg-dur-normal) var(--fg-ease); } .fg-svc-card:hover .fg-svc-card__icon, .fg-svc-card:focus-within .fg-svc-card__icon { transform: scale(1.08); } .fg-svc-card__link .fg-arrow, .fg-svc-card__link svg { transition: transform var(--fg-dur-fast) var(--fg-ease); } /* Arrow eases along the reading direction (RTL → toward the start/left). */ .fg-svc-card:hover .fg-svc-card__link .fg-arrow, .fg-svc-card__link:hover .fg-arrow, .fg-svc-card__link:focus-visible .fg-arrow { transform: translateX(-0.28rem); } /* Project list rows: lift + media zoom as a coherent unit. */ .fg-work-item { transition: transform var(--fg-dur-normal) var(--fg-ease), background-color var(--fg-dur-normal) var(--fg-ease), border-color var(--fg-dur-normal) var(--fg-ease); } .fg-work-item:hover, .fg-work-item:focus-within { transform: translateY(-3px); } .fg-work-item__media img, .fg-work-item__media { transition: transform 0.6s var(--fg-ease); } .fg-work-item:hover .fg-work-item__media img { transform: scale(1.06); } .fg-work-item__arrow { transition: transform var(--fg-dur-fast) var(--fg-ease); } .fg-work-item:hover .fg-work-item__arrow { transform: translateX(-0.28rem); } /* Featured project: a slow, quiet zoom signals "this is the cover". */ .fg-work-feature__media img { transition: transform 1.1s var(--fg-ease); } .fg-work-feature:hover .fg-work-feature__media img { transform: scale(1.04); } /* Mission / Vision cards: the seal icon answers a hover. */ .fg-why-card { transition: transform var(--fg-dur-normal) var(--fg-ease), box-shadow var(--fg-dur-normal) var(--fg-ease), border-color var(--fg-dur-normal) var(--fg-ease); } .fg-why-card:hover { transform: translateY(-3px); } .fg-why-card__icon { transition: transform var(--fg-dur-normal) var(--fg-ease), color var(--fg-dur-normal) var(--fg-ease); } .fg-why-card:hover .fg-why-card__icon { transform: scale(1.1); color: var(--fg-color-primary); } /* ============================================================ 4. Reduced-motion: belt-and-suspenders. (`.fg-anim` is already withheld from these visitors, but pin every choreographed property to its resting state regardless.) ============================================================ */ @media (prefers-reduced-motion: reduce) { .fg-section__intro > *, .fg-why__lead > *, .fg-client, .fg-svc-card, .fg-why-card, .fg-work-item, .fg-work-feature, .fg-appt__form-col, .fg-appt__media { opacity: 1 !important; transform: none !important; } .fg-work-feature__media { clip-path: none !important; } }