/* Gedeelde bewegingsbouwstenen van de merkfamilie (FL-062), de schermvullende paginaovergang en merkwissel (wens 51),
   de logogebaren (FL-043) en de Shelters-deur (SG-036). Alleen transform, opacity, clip-path en filter.
   Alles leest de tokens van family-tokens.css: bij data-motion="off" en reduced motion zijn de duren 0 ms. */

/* 1. Schermvullende overgang (wens 51): vertrek met paneel, merkteken, merknaam en bestemming; aankomst tilt het paneel op.
   De aankomst staat al bij de eerste verf: html.ff-arriving tekent dezelfde compositie met ::before (paneel, teken, merknaam)
   en ::after (bestemming), zodat de wissel tussen twee pagina's niet te zien is. Alleen transform, opacity en clip-path. */
.ff-stage{position:fixed;inset:0;z-index:2147483000;pointer-events:auto;contain:strict;--stage-ease:cubic-bezier(.76,0,.24,1);--stage-rise:cubic-bezier(.16,1,.3,1)}
.ff-stage::before,.ff-stage-panel{content:"";position:absolute;inset:0;clip-path:var(--stage-from);transition:clip-path 600ms var(--stage-ease)}
.ff-stage::before{background:var(--stage-accent)}
.ff-stage-panel{background:var(--stage-deep);transition-delay:80ms}
.ff-stage.ff-stage-in::before,.ff-stage.ff-stage-in .ff-stage-panel{clip-path:var(--stage-to)}
.ff-stage{--stage-from:inset(100% 0 0 0 round 34% 34% 0 0);--stage-to:inset(0 0 0 0 round 0 0 0 0)}
.ff-stage[data-ff-brand="shelters-of-grace"]{--stage-from:inset(100% 0 0 0 round 50% 50% 0 0)}
.ff-stage[data-ff-brand="nappy-dappy"]{--stage-from:inset(100% 0 0 0 round 46% 46% 0 0)}
.ff-stage[data-ff-brand="rechtstreeks"],.ff-stage[data-ff-brand="heramind"]{--stage-from:polygon(0 115%,100% 135%,100% 135%,0 135%);--stage-to:polygon(0 -20%,100% 0,100% 100%,0 100%)}
.ff-stage-mark{position:absolute;left:50%;top:calc(50% - 132px);width:56px;height:56px;translate:-50% 0;opacity:0;scale:.82;transition:opacity 380ms ease 330ms,scale 650ms var(--stage-rise) 330ms}
.ff-stage-mark :is(img,svg){display:block;width:56px;height:56px;object-fit:contain}
.ff-stage-eyebrow,html.ff-arriving::before{font:600 12px/20px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--stage-accent)}
.ff-stage-eyebrow{position:absolute;left:0;right:0;top:calc(50% - 62px);text-align:center;opacity:0;translate:0 8px;transition:opacity 380ms ease 380ms,translate 650ms var(--stage-rise) 380ms}
.ff-stage-title,html.ff-arriving::after{position:fixed;left:0;right:0;top:50%;padding:0 24px;text-align:center;color:var(--stage-ink);font-family:var(--stage-font,inherit);font-weight:500;font-size:clamp(38px,8.5vw,92px);line-height:1.04;letter-spacing:-.025em;transform:translateY(-30%);text-wrap:balance}
.ff-stage-title{position:absolute}
.ff-stage-word{display:inline-block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;white-space:nowrap;vertical-align:top}
.ff-stage-word>span{display:inline-block;translate:0 105%;transition:translate 760ms var(--stage-rise);transition-delay:calc(410ms + var(--i,0)*20ms)}
.ff-stage-line{position:absolute;left:50%;top:calc(50% + clamp(62px,9vw,118px));width:140px;height:2px;translate:-50% 0;background:color-mix(in srgb,var(--stage-ink) 18%,transparent);opacity:0;transition:opacity 300ms ease 520ms}
.ff-stage-line i{position:absolute;inset:0;background:var(--stage-accent);transform-origin:0 50%;scale:0 1;transition:scale 900ms cubic-bezier(.3,.7,.4,1) 560ms}
.ff-stage-in .ff-stage-mark{opacity:1;scale:1}.ff-stage-in .ff-stage-eyebrow{opacity:1;translate:0 0}.ff-stage-in .ff-stage-word>span{translate:0 0}
.ff-stage-in .ff-stage-line{opacity:1}.ff-stage-in .ff-stage-line i{scale:.86 1}
.ff-stage-ready .ff-stage-line i{scale:1 1;transition:scale 120ms ease}.ff-stage-ready .ff-stage-line{opacity:0;transition:opacity 120ms ease 60ms}
/* Terug via de browserknop: het paneel tilt op. */
.ff-stage.ff-stage-in.ff-stage-out .ff-stage-panel,.ff-stage.ff-stage-in.ff-stage-out::before{clip-path:inset(0 0 100% 0);transition:clip-path 800ms var(--stage-ease)}
.ff-stage.ff-stage-in.ff-stage-out :is(.ff-stage-mark,.ff-stage-eyebrow,.ff-stage-title,.ff-stage-line){opacity:0;transition:opacity 260ms ease}

/* Aankomst: dezelfde compositie vanaf de eerste verf. Het merkteken staat als achtergrond op het paneel. */
html.ff-arriving::before{content:attr(data-ff-eyebrow);position:fixed;inset:0;z-index:2147483000;display:block;box-sizing:border-box;padding-top:calc(50vh - 62px);text-align:center;background:var(--stage-deep) var(--stage-mark,none) no-repeat center calc(50% - 104px)/56px 56px;pointer-events:auto}
html.ff-arriving::after{content:attr(data-ff-title);z-index:2147483001;pointer-events:none}
/* Een anker (#planner) springt direct, onder het dichte paneel; geen zachte scroll tijdens de aankomst. */
html.ff-arriving{scroll-behavior:auto!important}
html.ff-arriving[data-ff-brand="rechtstreeks"]{--stage-mark:url("/family/rechtstreeks.svg")}
html.ff-arriving[data-ff-brand="nappy-dappy"]{--stage-mark:url("/family/nappy-logo.svg")}
html.ff-arriving[data-ff-brand="heramind"]{--stage-mark:url("/family/heramind.webp")}
html.ff-arriving[data-ff-brand="shelters-of-grace"]{--stage-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='%23f7f3e9'%3E%3Cpath d='M45 8H31C16.6 8 8 18.5 8 33v24c0 5.5 4.5 10 10 10h5V34c0-7.7 4.3-12 12-12h10V8Z'/%3E%3Cpath d='M35 72h14c14.4 0 23-10.5 23-25V23c0-5.5-4.5-10-10-10h-5v33c0 7.7-4.3 12-12 12H35v14Z'/%3E%3C/g%3E%3Crect x='34' y='30' width='12' height='20' rx='6' fill='%23c99a4e'/%3E%3C/svg%3E")}
html.ff-revealing::after{animation:ff-stage-title-out 420ms cubic-bezier(.4,0,1,1) forwards}
html.ff-revealing::before{animation:ff-stage-lift 820ms var(--stage-ease,cubic-bezier(.76,0,.24,1)) 120ms forwards}
html.ff-revealing[data-ff-brand="shelters-of-grace"]::before{animation-name:ff-stage-lift-arch}
html.ff-revealing[data-ff-brand="nappy-dappy"]::before{animation-name:ff-stage-lift-soft}
html.ff-revealing:is([data-ff-brand="rechtstreeks"],[data-ff-brand="heramind"])::before{animation-name:ff-stage-lift-slant}
@keyframes ff-stage-title-out{to{opacity:0;transform:translateY(calc(-30% - 28px))}}
@keyframes ff-stage-lift{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes ff-stage-lift-arch{from{clip-path:inset(0 0 0 0 round 0 0 0 0)}to{clip-path:inset(0 0 100% 0 round 0 0 50% 50%)}}
@keyframes ff-stage-lift-soft{from{clip-path:inset(0 0 0 0 round 0 0 0 0)}to{clip-path:inset(0 0 100% 0 round 0 0 46% 46%)}}
@keyframes ff-stage-lift-slant{from{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% -20%,0 0)}}
/* Na het optillen komt de inhoud rustig in beeld: header eerst, dan de eerste blokken van de pagina. */
html.ff-revealing body>header,html.ff-revealing .site-header{animation:ff-stage-arrive-head 900ms var(--stage-rise,cubic-bezier(.16,1,.3,1)) 380ms both}
html.ff-revealing main>:is(:nth-child(1),:nth-child(2),:nth-child(3)){animation:ff-stage-arrive 1100ms var(--stage-rise,cubic-bezier(.16,1,.3,1)) both}
html.ff-revealing main>:nth-child(1){animation-delay:420ms}html.ff-revealing main>:nth-child(2){animation-delay:520ms}html.ff-revealing main>:nth-child(3){animation-delay:620ms}
@keyframes ff-stage-arrive{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}
@keyframes ff-stage-arrive-head{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.ff-stage,html.ff-arriving::before,html.ff-arriving::after{display:none!important}html.ff-revealing *{animation:none!important}}
html[data-motion="off"] .ff-stage,html[data-motion="off"].ff-arriving::before,html[data-motion="off"].ff-arriving::after{display:none!important}
@media print{.ff-stage,html.ff-arriving::before,html.ff-arriving::after{display:none!important}}

/* 3. Opkomen: koppen en blokken schuiven 18 px omhoog zodra ze in beeld komen. Zonder JS of in een verborgen tab blijft alles zichtbaar. */
html.js-ready .ff-rise{opacity:0;translate:0 18px;transition:opacity var(--dur-reveal,950ms) var(--curve-enter,ease-out),translate var(--dur-reveal,950ms) var(--curve-enter,ease-out)}
html.js-ready .ff-rise.ff-in{opacity:1;translate:0 0}
html[data-motion="off"] .ff-rise{opacity:1;translate:0 0;transition:none}

/* 3b. Beelden (wens 51): een doek gaat omhoog en het beeld zoomt rustig terug. Rijen kaarten komen na elkaar op.
   transform in plaats van translate, zodat het zweefeffect van family-vivid (translate) er niet mee botst. */
html.js-ready .ff-media{clip-path:inset(0 0 100% 0);transform:scale(1.06);transform-origin:50% 60%;transition:clip-path 1100ms cubic-bezier(.76,0,.24,1),transform 1500ms cubic-bezier(.16,1,.3,1)}
html.js-ready .ff-media.ff-in{clip-path:inset(0 0 0 0);transform:none}
html.js-ready[data-family-brand="shelters-of-grace"] .ff-media{transform:none;transition:clip-path 1300ms cubic-bezier(.65,0,.35,1)}
html.js-ready .ff-stagger{opacity:0;transform:translateY(28px);transition:opacity 900ms cubic-bezier(.16,1,.3,1) var(--ff-d,0ms),transform 1000ms cubic-bezier(.16,1,.3,1) var(--ff-d,0ms)}
html.js-ready .ff-stagger.ff-in{opacity:1;transform:none}
html[data-motion="off"] :is(.ff-media,.ff-stagger){clip-path:none;transform:none;opacity:1;transition:none}
@media (prefers-reduced-motion:reduce){html :is(.ff-media,.ff-stagger){clip-path:none!important;transform:none!important;opacity:1!important;transition:none!important}}

/* 4. Woorden die één voor één opkomen in de kop van de pagina (55 ms per woord), één keer per sessie. */
.ff-w{display:inline;overflow:visible}
.ff-w>span{display:inline-block;opacity:0;translate:0 .4em;animation:ff-word var(--dur-reveal,950ms) var(--curve-enter,ease-out) both;animation-delay:calc(var(--i,0)*var(--stagger-word,55ms))}
@keyframes ff-word{to{opacity:1;translate:0 0}}
html[data-motion="off"] .ff-w>span{opacity:1;translate:0 0;animation:none}

/* 5. Signaallijn: een dunne lijn in de merkkleur bovenaan die met de pagina meetekent. */
.ff-signal{position:fixed;top:0;left:0;width:100%;height:2px;z-index:calc(var(--z-header,50) + 1);pointer-events:none;background:var(--brand-accent-strong,var(--brand-accent,var(--core-violet)));transform-origin:0 50%;transform:scaleX(var(--ff-progress,0))}
@supports (animation-timeline: scroll()){
 html[data-ff-signal="css"] .ff-signal{transform:none;animation:ff-signal linear both;animation-timeline:scroll(root)}
}
@keyframes ff-signal{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 6. Knoppen: indrukken veert (scale .97), magnetisch alleen bij een fijne pointer, de pijl schiet weg en komt terug. */
[data-ff-magnetic]{transition:translate var(--dur-base,350ms) var(--curve-soft,ease-out)}
html[data-motion="off"] [data-ff-magnetic]{translate:0 0!important;transition:none}
.ff-btn{position:relative;isolation:isolate;overflow:hidden;transition:translate var(--dur-base,350ms) var(--curve-soft,ease-out),scale var(--dur-fast,200ms) var(--curve-soft,ease-out),box-shadow var(--dur-base,350ms),color var(--dur-fast,200ms)}
.ff-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ff-sweep,var(--brand-accent-strong,var(--brand-accent)));translate:-101% 0;transition:translate var(--dur-slow,550ms) var(--curve-move,ease-in-out)}
.ff-btn:hover::before,.ff-btn:focus-visible::before{translate:0 0}
.ff-btn:active{scale:.97}
.ff-btn:hover :is(svg,.icon):last-child,.ff-btn:focus-visible :is(svg,.icon):last-child{animation:ff-shoot var(--dur-slow,550ms) var(--curve-move,ease-in-out) 1}
@keyframes ff-shoot{0%{translate:0 0;opacity:1}45%{translate:140% 0;opacity:0}50%{translate:-140% 0;opacity:0}100%{translate:0 0;opacity:1}}
html[data-motion="off"] .ff-btn::before{display:none}
html[data-motion="off"] .ff-btn:active{scale:1}

/* 7. Links: een onderstreping die van links naar rechts groeit (0,45 s), vast bij aria-current. */
.ff-link-u{position:relative;text-decoration:none}
.ff-link-u::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform 450ms var(--curve-enter,ease-out)}
.ff-link-u:hover::after,.ff-link-u:focus-visible::after,.ff-link-u[aria-current]::after{transform:scaleX(1)}
html[data-motion="off"] .ff-link-u::after{transition:none}

/* 8. Logopaneel (FL-043): logo's in rust in merkgrijs, bij hover of focus inkleuren met het eigen gebaar (300 tot 500 ms). */
.ff-card .ff-logo{display:block}
.ff-card .ff-logo :is(img,svg){filter:grayscale(1) opacity(.78);transition:filter var(--dur-base,350ms) var(--curve-soft,ease-out)}
.ff-card:hover .ff-logo :is(img,svg),.ff-card:focus-visible .ff-logo :is(img,svg){filter:none}
.ff-card .ff-logo svg path,.ff-card .ff-logo svg rect{transition:translate var(--dur-base,350ms) var(--curve-move,ease-in-out),scale var(--dur-base,350ms) var(--curve-soft,ease-out);transform-box:fill-box;transform-origin:center}
/* Shelters: de twee helften schuiven 3 px uit elkaar als een deur die opengaat, de honingkern licht op. */
.ff-card:is(:hover,:focus-visible) .ff-logo[data-logo="shelters-of-grace"] path:first-of-type{translate:-3px 0}
.ff-card:is(:hover,:focus-visible) .ff-logo[data-logo="shelters-of-grace"] path:last-of-type{translate:3px 0}
.ff-card:is(:hover,:focus-visible) .ff-logo[data-logo="shelters-of-grace"] rect{scale:1.18}
/* Rechtstreeks: de schuine poot schiet 3 px langs zijn eigen diagonaal door en veert terug (hooguit 400 ms). */
.ff-card:is(:hover,:focus-visible) .ff-logo[data-logo="rechtstreeks"] path:last-of-type{animation:ff-rt-leg min(var(--dur-base,350ms),400ms) var(--curve-soft,ease-out) 1}
@keyframes ff-rt-leg{40%{translate:2.8px 1.2px}100%{translate:0 0}}
/* Nappy Dappy: het hele logo veert één keer (1 naar 1,06 naar 0,98 naar 1). */
.ff-card:is(:hover,:focus-visible) .ff-logo[data-logo="nappy-dappy"] img{animation:ff-spring var(--dur-base,350ms) var(--curve-soft,ease-out) 1}
@keyframes ff-spring{0%{scale:1}40%{scale:1.06}75%{scale:.98}100%{scale:1}}
/* Heramind: tot het vectorlogo met losse bellen er is (HP-110) ademt het hele beeldmerk één keer. */
.ff-card:is(:hover,:focus-visible) .ff-logo[data-logo="heramind"] img{animation:ff-breathe var(--dur-slow,550ms) var(--curve-soft,ease-out) 1}
@keyframes ff-breathe{50%{scale:1.04}}
@media (hover:none){.ff-card .ff-logo :is(img,svg){filter:none}.ff-card .ff-logo svg :is(path,rect){transition:none}}
html[data-motion="off"] .ff-card .ff-logo :is(img,svg,path,rect){animation:none;translate:0 0;scale:1}

/* 9. Shelters: de voordeur. Het herobeeld opent als een boog (hooguit 1,7 s, één keer per sessie). */
html.js-ready[data-family-brand="shelters-of-grace"]:not([data-entrance="seen"]) .hero-image{animation:ff-door var(--budget-hero-entrance,1700ms) var(--curve-move,ease-in-out) both}
@keyframes ff-door{0%{clip-path:inset(24% 32% 0 32% round 999px 999px 0 0)}55%{clip-path:inset(0 0 0 0 round 999px 999px 0 0)}100%{clip-path:inset(0 0 0 0 round 0 0 0 0)}}
html[data-motion="off"] .hero-image{animation:none}

/* 10. Beweging uit: ook de gedeelde lagen van voorheen luisteren naar de ene vlag. */
html[data-motion="off"] :is(.ff-living-card,.fv-surface,.fv-button,.fv-menu-link){transition:none!important;animation:none!important;translate:none!important;scale:1!important}

/* Stille herolus (wens 51): de video ligt over de foto en verschijnt pas als hij speelt; de pauzeknop staat rechtsonder. */
[data-ff-loop]{position:relative}
[data-ff-loop] .ff-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;opacity:0;transition:opacity 900ms ease;pointer-events:none}
[data-ff-loop].ff-loop-on .ff-loop{opacity:1}
.ff-loop-toggle{position:absolute;right:12px;bottom:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgb(20 16 28 / .55);color:var(--core-white);cursor:pointer;backdrop-filter:blur(6px)}
.ff-loop-toggle:focus-visible{outline:2px solid var(--core-white);outline-offset:2px}
html[data-motion="off"] [data-ff-loop] .ff-loop{opacity:0}
@media (prefers-reduced-motion:reduce){[data-ff-loop] .ff-loop{display:none}}

/* Merkenfamilie (wens 52): de panelen ademen om beurten, en bij data-gesture maakt elk merkteken zijn gebaar, ook op telefoons.
   De gebaren zijn die van FL-043 (hover), nu ook uit zichzelf; het logo kleurt dan even in. */
.ff-family-row .ff-panel{animation:ff-panel-breathe 6s ease-in-out infinite alternate;animation-delay:calc(var(--ff-pi,0) * -1.5s)}
@keyframes ff-panel-breathe{from{translate:0 0}to{translate:0 -5px}}
.ff-family-row .ff-panel[data-gesture="on"] .ff-logo :is(img,svg){filter:none}
.ff-family-row .ff-panel[data-gesture="on"] .ff-logo[data-logo="heramind"] img{animation:ff-hera-breathe 1.3s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ff-hera-breathe{0%{scale:1}30%{scale:1.14;translate:0 -5px}60%{scale:.96;translate:0 0}100%{scale:1}}
.ff-family-row .ff-panel[data-gesture="on"] .ff-logo[data-logo="rechtstreeks"] svg{animation:ff-rt-dash 1.1s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ff-rt-dash{0%{translate:0 0}35%{translate:10px 0}60%{translate:-3px 0}100%{translate:0 0}}
.ff-family-row .ff-panel[data-gesture="on"] .ff-logo[data-logo="rechtstreeks"] path:last-of-type{animation:ff-rt-leg 600ms var(--curve-soft,ease-out) 2}
.ff-family-row .ff-panel[data-gesture="on"] .ff-logo[data-logo="nappy-dappy"] img{animation:ff-nappy-bounce 1.2s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ff-nappy-bounce{0%{scale:1;translate:0 0}25%{scale:1.1 .9;translate:0 2px}45%{scale:.94 1.08;translate:0 -12px}70%{scale:1.04 .97;translate:0 0}100%{scale:1;translate:0 0}}
.ff-family-row .ff-panel[data-gesture="on"] .ff-logo[data-logo="shelters-of-grace"] path:first-of-type{animation:ff-door-left 1.4s cubic-bezier(.65,0,.35,1) both}
.ff-family-row .ff-panel[data-gesture="on"] .ff-logo[data-logo="shelters-of-grace"] path:last-of-type{animation:ff-door-right 1.4s cubic-bezier(.65,0,.35,1) both}
.ff-family-row .ff-panel[data-gesture="on"] .ff-logo[data-logo="shelters-of-grace"] rect{animation:ff-door-core 1.4s ease-in-out both}
@keyframes ff-door-left{45%{translate:-4px 0}100%{translate:0 0}}
@keyframes ff-door-right{45%{translate:4px 0}100%{translate:0 0}}
@keyframes ff-door-core{45%{scale:1.25}100%{scale:1}}
html[data-motion="off"] .ff-family-row .ff-panel,html[data-motion="off"] .ff-family-row .ff-panel .ff-logo *{animation:none!important}
@media (prefers-reduced-motion:reduce){.ff-family-row .ff-panel,.ff-family-row .ff-panel .ff-logo *{animation:none!important}}