/* ========================================================================== FKC Kitchens — initial states for the cinematic layer. Load in , BEFORE the page paints (Elementor → Custom Code, location Head, priority 1). Every rule here only ever matches an element that fkc-bridge.js put a data-* attribute onto, so if the bridge fails to load for any reason, none of these selectors match anything and the page simply renders fully visible — it fails open, not closed. This is a deliberate improvement over the static build, where the parked state was baked into the HTML at build time and needed a separate `.js` class gate on as a safety valve; that gate is not needed here and is not used. Values are hand-ported from css/tokens.css and css/styles.css, using the custom.css tokens already loaded via Additional CSS (see IMPORT-README step 2), with literal fallbacks in case load order ever puts this file first. ========================================================================== */ /* ---- Reveal-on-scroll ---------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--fkc-ease, cubic-bezier(0.16, 1, 0.3, 1)), transform 0.6s var(--fkc-ease, cubic-bezier(0.16, 1, 0.3, 1)); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } [data-reveal="left"] { transform: translateX(-22px); } [data-reveal="right"] { transform: translateX(22px); } [data-reveal="scale"] { transform: scale(0.97); } [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; } /* Escape hatch used by FKC.revealAll() and by the no-WebGL path. */ .reveal-all [data-reveal] { opacity: 1 !important; transform: none !important; } /* ---- Split headings ------------------------------------------------------ */ .split-line__mask { display: block; overflow: hidden; } [data-split] { opacity: 1; } /* the heading itself is always visible; only its lines animate, and only once split happens */ /* ---- Hero waypoints ------------------------------------------------------- Ported from .hero-way in css/styles.css. Non-first waypoints are stacked absolutely so the active one swaps in place rather than pushing layout. */ .fkc-hero-way { opacity: 0; transform: translateY(24px); transition: opacity 0.5s var(--fkc-ease, cubic-bezier(0.16, 1, 0.3, 1)), transform 0.5s var(--fkc-ease, cubic-bezier(0.16, 1, 0.3, 1)); } .fkc-hero-way:not(:first-child) { position: absolute; inset-block-end: 0; inset-inline-start: 0; } .fkc-hero-way.is-active { opacity: 1; transform: none; } /* Hero copy fade — main.js sets opacity/transform as inline styles on scroll, this just makes that transition smooth rather than instant. */ .fkc-hero__copy { transition: opacity 0.3s linear, transform 0.3s linear; } /* When the 3D layer reports itself off (no WebGL, reduced motion, narrow viewport, low-power device), scene.js sets data-webgl="off" and main.js's showAll() clears every inline style it set — the waypoints then just need to stop being absolutely stacked so they read as a normal list. */ [data-hero][data-webgl="off"] .fkc-hero-way { position: static; opacity: 1; transform: none; } /* ---- Reduced motion: collapse everything above to its resting state ------ */ @media (prefers-reduced-motion: reduce) { [data-reveal], .fkc-hero-way { transition: none !important; opacity: 1 !important; transform: none !important; } .fkc-hero-way:not(:first-child) { position: static; } }