/* ===================================================================== anim.css — Fetraco · Cinematic Premium Animation Layer --------------------------------------------------------------------- ADDITIVE ONLY. Load AFTER css/styles.css + css/pages.css on every page. Pairs with js/anim.js. - Reveal system keyed on [data-anim] + back-compat for legacy .reveal. - Hero Ken-Burns + title cascade, parallax hook, refined micro-hovers. - Namespaced via [data-anim] / "anim-" so it NEVER clashes with the home bespoke systems (.dest / .about / .gal / .wcu / .rev / .slides). - No JS smooth-scroll / scroll-hijack — only CSS html{scroll-behavior}, which is harmless to the pinned .dest section. - Fully honours prefers-reduced-motion (everything visible, no motion). ===================================================================== */ :root{ /* Premium easing — expo-out "settle" + softer companions */ --anim-ease: cubic-bezier(.22, 1, .36, 1); /* confident editorial decel */ --anim-ease-soft: cubic-bezier(.33, .85, .4, 1); /* gentle micro motion */ --anim-ease-glide: cubic-bezier(.16, .84, .44, 1); /* long fluid glide / hero */ /* Reveal timing */ --anim-dur: .9s; /* primary reveal duration */ --anim-dur-soft: 1.15s; /* longer hero-scale settle */ --anim-stagger: 70ms; /* per-index cascade step */ --anim-shift: 34px; /* fade-up travel distance */ --anim-blur: 14px; } /* CSS-only smooth anchor scroll — NO JS hijack (safe for the .dest pin) */ html{ scroll-behavior:smooth; } /* ===================================================================== 1 · REVEAL SYSTEM · [data-anim] hidden -> .anim-in revealed Stagger via --anim-i (transition-delay cascade). transform/opacity/ filter/clip-path only — GPU friendly, no layout thrash. ===================================================================== */ [data-anim]{ opacity:0; transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease), filter var(--anim-dur) var(--anim-ease), clip-path var(--anim-dur) var(--anim-ease); transition-delay:calc(var(--anim-i, 0) * var(--anim-stagger)); will-change:opacity, transform; } /* --- Variants · initial (hidden) state --- */ [data-anim="fade-up"] { transform:translate3d(0, var(--anim-shift), 0); } [data-anim="fade-down"] { transform:translate3d(0, calc(var(--anim-shift) * -.82), 0); } [data-anim="fade"] { transform:none; } [data-anim="zoom-in"] { transform:scale(.92); } [data-anim="slide-left"] { transform:translate3d(48px, 0, 0); } /* enters from right */ [data-anim="slide-right"]{ transform:translate3d(-48px, 0, 0); } /* enters from left */ [data-anim="clip-up"]{ /* cinematic curtain wipe */ transform:translate3d(0, 28px, 0); clip-path:inset(0 0 100% 0); -webkit-clip-path:inset(0 0 100% 0); } [data-anim="blur-in"]{ transform:translate3d(0, 18px, 0); filter:blur(var(--anim-blur)); } /* Soft easing + longer settle for large / hero-scale elements */ [data-anim][data-anim-soft]{ transition-duration:var(--anim-dur-soft); transition-timing-function:var(--anim-ease-glide); } /* --- Revealed (settled) state --- */ [data-anim].anim-in{ opacity:1; transform:translate3d(0, 0, 0) scale(1); filter:blur(0); clip-path:inset(0 0 0 0); -webkit-clip-path:inset(0 0 0 0); } /* Release the compositor hint once settled (JS adds .anim-settled on end) */ [data-anim].anim-settled{ will-change:auto; } /* ===================================================================== 2 · BACK-COMPAT · legacy .reveal upgraded to richer easing. JS adds BOTH .is-in (legacy) and .anim-in. Only defined when the node is NOT already driven by [data-anim]. ===================================================================== */ .reveal:not([data-anim]){ opacity:0; transform:translate3d(0, 28px, 0); transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease); transition-delay:calc(var(--anim-i, 0) * var(--anim-stagger)); will-change:opacity, transform; } .reveal:not([data-anim]).is-in, .reveal:not([data-anim]).anim-in{ opacity:1; transform:none; } /* ===================================================================== 3 · HERO CINEMATIC (.phero) ===================================================================== */ /* Slow Ken-Burns drift on the sub-page hero photo — pure CSS, no JS */ @keyframes anim-kenburns{ from{ transform:scale(1.005) translate3d(0, 0, 0); } to { transform:scale(1.08) translate3d(0, -1.4%, 0); } } .phero__media img{ transform-origin:50% 42%; animation:anim-kenburns 22s var(--anim-ease-glide) both; will-change:transform; } /* Parallax shift DISABLED (2026-07-11): the downward translate shifted the hero image layer down and exposed the top edge of the .phero, leaving a visible strip/band across the very top of every sub-page. The media now stays inset:0 and covers the full frame; the Ken-Burns zoom (on the img) keeps the motion. (JS still sets --anim-py on scroll — harmless no-op now.) */ .phero__media[data-parallax], .phero__media.anim-parallax{ transform:none; } /* --- Hero title cascade · primed hidden; plays when .phero gets .anim-hero-in. clip + fade-up gives a trailer-style line reveal. --- */ .phero .crumb, .phero__eyebrow, .phero__title, .phero__lead, .phero__meta{ opacity:0; transform:translate3d(0, 26px, 0); clip-path:inset(0 0 100% 0); -webkit-clip-path:inset(0 0 100% 0); transition: opacity var(--anim-dur-soft) var(--anim-ease-glide) var(--anim-hd, 0ms), transform var(--anim-dur-soft) var(--anim-ease-glide) var(--anim-hd, 0ms), clip-path var(--anim-dur-soft) var(--anim-ease-glide) var(--anim-hd, 0ms); will-change:opacity, transform, clip-path; } .phero .crumb { --anim-hd:.05s; } .phero__eyebrow { --anim-hd:.16s; } .phero__title { --anim-hd:.28s; } .phero__lead { --anim-hd:.46s; } .phero__meta { --anim-hd:.60s; } .phero.anim-hero-in .crumb, .phero.anim-hero-in .phero__eyebrow, .phero.anim-hero-in .phero__title, .phero.anim-hero-in .phero__lead, .phero.anim-hero-in .phero__meta{ opacity:1; transform:none; clip-path:inset(0 0 -10% 0); -webkit-clip-path:inset(0 0 -10% 0); } /* Meta chips ride in one beat after their container settles */ .phero.anim-hero-in .phero__meta .chip{ animation:anim-chip-pop .6s var(--anim-ease) both; } .phero.anim-hero-in .phero__meta .chip:nth-child(2){ animation-delay:.06s; } .phero.anim-hero-in .phero__meta .chip:nth-child(3){ animation-delay:.12s; } .phero.anim-hero-in .phero__meta .chip:nth-child(4){ animation-delay:.18s; } @keyframes anim-chip-pop{ from{ opacity:0; transform:translateY(10px) scale(.96); } to { opacity:1; transform:none; } } /* Soft sheen sweep over the hero as the title lands — luxury, barely-there */ .phero{ position:relative; } .phero::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(115deg, transparent 38%, rgba(230,197,133,.10) 50%, transparent 62%); transform:translateX(-120%); opacity:0; } .phero.anim-hero-in::after{ animation:anim-hero-sheen 1.6s var(--anim-ease-glide) .45s both; } @keyframes anim-hero-sheen{ 0% { transform:translateX(-120%); opacity:0; } 35% { opacity:1; } 100%{ transform:translateX(120%); opacity:0; } } /* Very soft ambient gold breathing on the hero eyebrow (idle, minimal) */ @keyframes anim-gold-glow{ 0%,100%{ text-shadow:0 0 0 rgba(230,197,133,0); } 50% { text-shadow:0 0 16px rgba(230,197,133,.32); } } .phero.anim-hero-in .phero__eyebrow{ animation:anim-gold-glow 6s var(--anim-ease-soft) 1.8s infinite; } /* ===================================================================== 4 · SECTION HEADINGS · gold underline draw .anim-rule (opt-in on .h2) draws when its [data-anim] wrapper reveals. ===================================================================== */ .anim-rule{ position:relative; padding-bottom:.42em; } .anim-rule::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:2px; background:linear-gradient(90deg, var(--gold,#c9a24b), var(--gold-soft,#e6c585)); transition:width .9s var(--anim-ease-glide) .2s; } [data-anim].anim-rule.anim-in::after, [data-anim].anim-in .anim-rule::after, .anim-in > .anim-rule::after{ width:clamp(48px, 7vw, 92px); } /* Sub-page eyebrows also draw a short gold line on reveal */ .eyebrow{ position:relative; } .eyebrow::after{ content:""; position:absolute; left:0; bottom:-7px; height:2px; width:0; border-radius:2px; background:linear-gradient(90deg, var(--gold,#c9a24b), transparent); transition:width .9s var(--anim-ease-glide) .15s; } [data-anim].eyebrow.anim-in::after, .anim-in > .eyebrow::after{ width:54px; } /* ===================================================================== 5 · MICRO-INTERACTIONS (refined, subtle — enhance, never override) ===================================================================== */ /* Card — deepen existing lift, soft gold rim glow, smoother image zoom */ .card{ transition:transform .5s var(--anim-ease-soft), box-shadow .5s var(--anim-ease-soft); } .card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(230,197,133,0); transition:box-shadow .5s var(--anim-ease-soft); } .card:hover{ box-shadow:0 38px 70px -32px rgba(0,0,0,.58), 0 10px 30px -22px rgba(201,162,75,.45); } .card:hover::after{ box-shadow:inset 0 0 0 1px rgba(230,197,133,.55); } .card__media img{ transition:transform .9s var(--anim-ease-glide); } .card:hover .card__media img{ transform:scale(1.07); } /* Card link — arrow nudge + growing gold underline under the label */ .card__link{ position:relative; } .card__link::after{ content:""; position:absolute; left:0; bottom:-3px; height:1.5px; width:0; background:var(--gold,#c9a24b); transition:width .45s var(--anim-ease); } .card:hover .card__link::after, .card__link:hover::after{ width:calc(100% - 24px); } /* stops short of the arrow */ .card__link svg{ transition:transform .4s var(--anim-ease); } .card:hover .card__link svg, .card__link:hover svg{ transform:translateX(5px); } /* Buttons — moving sheen sweep + lift (header CTA keeps its own sheen) */ .btn{ position:relative; overflow:hidden; transition:transform .3s var(--anim-ease), box-shadow .3s var(--anim-ease), filter .3s; } .btn::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.42) 48%, transparent 64%); transform:translateX(-130%); transition:transform .7s var(--anim-ease-glide); } .btn:hover::after{ transform:translateX(130%); } .btn--gold:hover{ filter:brightness(1.04); box-shadow:0 20px 38px -14px rgba(201,162,75,.92); } .site-head__cta{ transition:transform .3s var(--anim-ease), box-shadow .3s var(--anim-ease), filter .3s; } /* Chips & pills — buttery gold hover lift */ .chip,.pill{ transition:transform .3s var(--anim-ease-soft), background-color .3s, border-color .3s, box-shadow .3s; } .chip:not(.chip--gold):hover{ transform:translateY(-2px); background:rgba(230,197,133,.2); border-color:rgba(230,197,133,.5); } .pill:hover{ transform:translateY(-3px); border-color:rgba(201,162,75,.45); box-shadow:0 16px 32px -22px rgba(201,162,75,.6); } .pill svg,.chip svg{ transition:transform .35s var(--anim-ease); } .pill:hover svg{ transform:scale(1.12) rotate(-4deg); } /* Features & facts — tactile lift */ .feature{ transition:transform .4s var(--anim-ease-soft), box-shadow .4s var(--anim-ease-soft); } .feature:hover{ transform:translateY(-3px); box-shadow:0 26px 54px -34px rgba(0,0,0,.6); } .feature__ic{ transition:transform .4s var(--anim-ease), box-shadow .4s var(--anim-ease); } .feature:hover .feature__ic{ transform:scale(1.06) rotate(-3deg); box-shadow:0 0 0 4px rgba(201,162,75,.16); } .fact{ transition:transform .4s var(--anim-ease-soft), box-shadow .4s var(--anim-ease-soft); } .fact:hover{ transform:translateY(-2px); box-shadow:0 26px 48px -32px rgba(0,0,0,.5); } /* Gallery tiles — richer zoom + brightness bloom */ .gallery-grid a{ position:relative; } .gallery-grid img{ transition:transform .8s var(--anim-ease-glide), filter .8s var(--anim-ease); } .gallery-grid a:hover img{ transform:scale(1.08); filter:brightness(1.05) saturate(1.05); } /* Timeline dots — gentle gold glow pulse once their row reveals */ [data-anim].anim-in .tl-item__dot, .tl-item[data-anim].anim-in .tl-item__dot{ animation:anim-dot-pulse 2.8s var(--anim-ease-soft) infinite; } @keyframes anim-dot-pulse{ 0%,100%{ box-shadow:0 0 0 5px rgba(201,162,75,.18); } 50% { box-shadow:0 0 0 8px rgba(201,162,75,.06); } } /* FAQ details — smoother marker + open polish */ .faq summary{ transition:background .3s var(--anim-ease); } .faq summary:hover{ background:rgba(201,162,75,.05); } .faq summary::after{ transition:transform .35s var(--anim-ease), color .3s; } .faq details[open]{ box-shadow:0 18px 44px -34px rgba(0,0,0,.5); } /* Nav underline — align easing token (already silky in pages.css) */ .site-nav a::after{ transition:width .35s var(--anim-ease); } /* ===================================================================== 6 · REDUCED MOTION · everything visible, zero motion ===================================================================== */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } [data-anim], [data-anim].anim-in, .reveal:not([data-anim]), .reveal:not([data-anim]).is-in, .phero .crumb, .phero__eyebrow, .phero__title, .phero__lead, .phero__meta{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; -webkit-clip-path:none !important; transition:none !important; animation:none !important; will-change:auto !important; } .phero__media img, .phero__media[data-parallax], .phero__media.anim-parallax, .phero.anim-hero-in .phero__eyebrow, [data-anim].anim-in .tl-item__dot{ animation:none !important; transform:none !important; } .phero.anim-hero-in::after{ animation:none !important; display:none !important; } .anim-rule::after{ width:clamp(48px, 7vw, 92px) !important; transition:none !important; } .eyebrow::after{ width:54px !important; transition:none !important; } /* Keep hover affordances instant, no glide / translate jumps */ .card,.card__media img,.btn,.btn::after,.feature,.feature__ic,.fact, .chip,.pill,.card__link svg,.card__link::after{ transition:none !important; animation:none !important; } .card:hover,.feature:hover,.fact:hover,.pill:hover,.chip:hover{ transform:none !important; } .btn::after{ display:none !important; } }