/* ==========================================================================
   Fort 24-7 — Interactie & animatie (FX)

   Gelaagde beelden
   - Een gelaagd beeld is een Flatsome "Banner" met klasse  fx-visual  en per laag
     een "Text box" met klasse  fx-layer  (met daarin de afbeelding).
     Animatie en parallax zet je per laag in de UX Builder bij de Text box:
     Animate (bv. Fade In Up) en Parallax (bv. -2 … 2).
     Vertraging: klasse  fx-d1 … fx-d5  (0,15 s per stap).
   - Hero's: banner met klasse  fx-stage  = vaste canvas van 1920 px breed die
     gecentreerd achter de hero-tekst staat (zelfde coördinaten als in Figma).

   Decoratieve F-vormen
   - Secties met een decoratieve vorm (klasse deco-f of een eigen ::after-vorm)
     krijgen automatisch parallax via assets/js/fx.js. Snelheid per sectie:
     klasse  fx-deco-speed-1 … 5  (standaard 3), uit met  fx-deco-static.

   Alles respecteert "verminderde beweging" (Flatsome zet animaties/parallax dan
   uit; hover-bewegingen staan hieronder in een media query) en parallax staat
   op mobiel uit (Flatsome-standaard).
   ========================================================================== */

/* ---------- Gelaagde beelden ---------- */
.banner.fx-visual { background: transparent !important; min-height: 0; overflow: visible; }
.fx-visual .banner-bg { display: none; }
.fx-visual .banner-layers, .fx-visual .banner-inner { overflow: visible !important; }
.fx-visual .banner-layers.container { max-width: none; width: 100%; margin: 0; padding: 0; }
.fx-visual .text-box { max-height: none; }
.fx-visual .text-box .text-inner { padding: 0; }
.fx-visual .text-box .text-box-content { z-index: auto; }
.fx-visual .fx-layer .img { margin: 0 !important; width: 100% !important; }
.fx-visual .fx-layer .img-inner, .fx-visual .fx-layer img { display: block; width: 100%; height: auto; }
.fx-visual [data-parallax] { opacity: 1 !important; } /* parallax zonder uitfaden */
.fx-d1 [data-animate] { transition-delay: .15s !important; }
.fx-d2 [data-animate] { transition-delay: .3s !important; }
.fx-d3 [data-animate] { transition-delay: .45s !important; }
.fx-d4 [data-animate] { transition-delay: .6s !important; }
.fx-d5 [data-animate] { transition-delay: .75s !important; }

/* Hero: vaste 1920-canvas achter de tekst */
.hero .fx-stage { position: absolute !important; top: 0; left: 50%; width: 1920px !important; margin-left: -960px; z-index: 0; pointer-events: none; }
.section.hero .hero__visual, .section.hero .hero__visual > .col-inner, .section.hero .hero__row, .section.hero > .section-content { position: static !important; }
.hero .hero__text { position: relative; z-index: 2; }
/* Gelaagd beeld naast tekst (zelfde marges als de vroegere platte afbeelding) */
.relation__img .banner.fx-visual { margin: 0 -5px 0 15px; width: auto; }
.hero .hero__visual { padding: 0 !important; min-height: 0; }
.hero .hero__text { position: relative; z-index: 2; }

/* Rustiger, modernere Flatsome fade-animaties */
@media (prefers-reduced-motion: no-preference) {
	/* alleen property/duur/easing: de vertraging (staffeling per kolom) blijft van Flatsome */
	[data-animate] { transition-property: transform, opacity, filter !important; transition-duration: 1.1s, .8s, 1s !important; transition-timing-function: cubic-bezier(.2,.7,.2,1), ease-out, ease !important; }
	[data-animate="fadeInUp"] { transform: translate3d(0, 40px, 0); }
	[data-animate="fadeInLeft"] { transform: translate3d(-40px, 0, 0); }
	[data-animate="fadeInRight"] { transform: translate3d(40px, 0, 0); }
	[data-animate="fadeInDown"] { transform: translate3d(0, -40px, 0); }
	[data-animate][data-animated="true"] { transform: none !important; }
}

/* Gelaagd beeld: alle lagen faden als één geheel in. Faden de lagen los, dan is de persoon
   halverwege nog doorschijnend en schemert de vorm erachter er dwars doorheen (lijkt dan
   "voor" de persoon te komen). Per laag blijft alleen de beweging (fade-up) met eigen
   vertraging; de persoon ligt zo altijd dekkend boven de vormen. */
/* fx.js start alle lagen van één beeld tegelijk: fx-visual--wait (nog niet in beeld) → --in. */
@media (prefers-reduced-motion: no-preference) {
	.fx-visual .banner-layers { transition: opacity .8s ease-out; }
	.fx-visual.fx-visual--wait .banner-layers { opacity: 0; }
	.fx-visual .fx-layer [data-animate] { opacity: 1 !important; }
}
/* Mobiel: de home-hero-foto staat in het eerste scherm en komt direct, samen met de tekst */
@media (max-width: 549px) {
	.hero--home .fx-layer [data-animate] { transition-delay: 0s !important; }
}

/* ---------- Decoratieve F-vormen: echte laag met parallax (zie fx.js) ---------- */
.fx-deco { position: absolute; pointer-events: none; }
.fx-deco__img { position: absolute; inset: 0; will-change: transform; }
.fx-deco-after::after, .fx-deco-before::before { visibility: hidden; }

/* ---------- Knoppen ---------- */
.button { position: relative; overflow: hidden; transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
.button.primary:not(.is-outline)::before { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); pointer-events: none; }
.button.primary:not(.is-outline):hover { background-color: #00dcc9; color: var(--f-purple); box-shadow: 0 10px 22px -10px rgba(0, 150, 138, .75); }
.button.white.is-outline:hover, .dark .button.white.is-outline:hover { background-color: #fff !important; color: var(--f-purple) !important; border-color: #fff !important; box-shadow: 0 10px 22px -12px rgba(37, 18, 60, .55); }
.button.white.is-outline:hover span { color: var(--f-purple) !important; }
.button.secondary.is-outline:hover, .header-main .header-button-1 .button:hover { background-color: var(--f-purple); color: #fff; border-color: var(--f-purple); box-shadow: 0 10px 22px -12px rgba(37, 18, 60, .6); }
.button:focus-visible, a:focus-visible, .nav > li > a:focus-visible { outline: 3px solid var(--f-teal); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
	.button:hover { transform: translateY(-2px); }
	.button:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
	.button.primary:not(.is-outline):hover::before { left: 130%; transition: left .7s ease; }
}

/* ---------- Tekstlinks & navigatie ---------- */
.link-arrow::after { display: inline-block; white-space: pre; transition: transform .25s cubic-bezier(.2,.8,.2,1); } /* pre: behoudt de spatie vóór de pijl */
.link-arrow:hover::after { transform: translateX(5px); }
.link-plain { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s ease, color .2s; }
.link-plain:hover { background-size: 100% 2px; color: var(--f-purple); }
.header-main .header-nav-main > li > a { position: relative; }
.header-main .header-nav-main > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--f-teal); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.header-main .header-nav-main > li.has-dropdown > a::after { right: 28px; }
.header-main .header-nav-main > li > a:hover::after, .header-main .header-nav-main > li.active > a::after { transform: scaleX(1); }
.nav-dropdown > li > a { transition: background-color .2s, color .2s, padding-left .2s; }
.header-main .nav-dropdown.nav-dropdown-default > li > a:hover { padding-left: 16px; }
.fort-footer ul a { transition: color .2s, padding-left .2s; }
.fort-footer ul a:hover { padding-left: 4px; }
.social-icons a.icon { transition: transform .2s, color .2s; }
.social-icons a.icon:hover { transform: translateY(-2px); color: var(--f-teal) !important; }

/* ---------- Kaarten & blokken ---------- */
.card, .info-card, .keurmerk, .fx-lift { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .25s; }
.card { position: relative; }
.card .card__img { overflow: hidden; display: block; }
.card .card__img img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.card .link-arrow::before { content: ""; position: absolute; inset: 0; z-index: 1; } /* hele kaart klikbaar */
.card:hover, .info-card:hover, .fx-lift:hover { box-shadow: 0 18px 40px -16px rgba(37, 18, 60, .28); }
.keurmerk:hover { border-color: var(--f-teal); box-shadow: 0 12px 28px -18px rgba(37, 18, 60, .35); }
.card:hover .link-arrow::after { transform: translateX(5px); }
@media (prefers-reduced-motion: no-preference) {
	.card:hover, .fx-lift:hover { transform: translateY(-6px); }
	.info-card:hover, .keurmerk:hover { transform: translateY(-4px); }
	.card:hover .card__img img { transform: scale(1.06); }
}

/* Foto's: zachte zoom bij hover */
.img-rounded .img-inner, .fx-zoom .img-inner { overflow: hidden; }
.img-rounded .img-inner { border-radius: var(--f-radius); }
@media (prefers-reduced-motion: no-preference) {
	.img-rounded img, .fx-zoom img { transition: transform 1s cubic-bezier(.2,.8,.2,1); }
	.img-rounded:hover img, .fx-zoom:hover img { transform: scale(1.04); }
}

/* Icoon-features: icoon beweegt mee bij hover */
.feature--icon .feature__icon img { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.feature--icon:hover .feature__icon img { transform: translateY(-3px) rotate(-6deg); }

/* Parallax van gelaagde beelden alleen op desktop (op mobiel/tablet zou een laag uit zijn
   fotostrook kunnen schuiven); de fade-up animaties blijven wel actief. */
@media (max-width: 849px) {
	.fx-visual [data-parallax] { transform: none !important; }
}

/* Trust bar: iconen */
.trustbar__item img { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.trustbar__item:hover img { transform: rotate(-8deg) scale(1.12); }

/* Logo's partners */
.logo-row .img img { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.logo-row .img-inner { overflow: visible; }
.logo-row .img:hover img { transform: scale(1.06); }

/* Beschikbaarheid: levende status-stip */
@media (prefers-reduced-motion: no-preference) {
	.status::before { animation: fx-pulse 2.2s ease-out infinite; }
	.status--wait::before { animation-name: fx-pulse-wait; }
}
@keyframes fx-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 206, 189, .55); } 70% { box-shadow: 0 0 0 9px rgba(0, 206, 189, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 206, 189, 0); } }
@keyframes fx-pulse-wait { 0% { box-shadow: 0 0 0 0 rgba(255, 75, 0, .5); } 70% { box-shadow: 0 0 0 9px rgba(255, 75, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 75, 0, 0); } }

/* Sticky header: schaduw zodra hij meeschuift */
.header-wrapper .header-main { transition: box-shadow .3s ease; }
.header-wrapper.stuck .header-main { box-shadow: 0 8px 24px -12px rgba(37, 18, 60, .25); }

/* Formuliervelden: focus */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="date"], select, textarea { transition: border-color .2s, box-shadow .2s; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus { border-color: var(--f-teal) !important; box-shadow: 0 0 0 3px rgba(0, 206, 189, .2) !important; outline: none; }

/* Terug naar boven-knop (Flatsome, aan via migratie 006) in huisstijl */
.back-to-top.button { width: 48px; height: 48px; min-height: 0; padding: 0; line-height: 46px; right: 24px; bottom: 24px; margin: 0; border-radius: 50%; background-color: var(--f-teal) !important; border: 1px solid var(--f-teal) !important; color: var(--f-purple) !important; box-shadow: 0 10px 22px -10px rgba(0, 150, 138, .75); transition: opacity .3s, transform .3s, background-color .25s, color .25s; }
.back-to-top.button i { font-size: 22px; top: -1px; }
.back-to-top.button:hover { background-color: var(--f-purple) !important; border-color: var(--f-purple) !important; color: #fff !important; }
.back-to-top.button::before { display: none; }
@media (max-width: 549px) { .back-to-top.button { right: 16px; bottom: 16px; width: 44px; height: 44px; line-height: 42px; } }

/* Menu-dropdowns: zacht inschuiven */
@media (prefers-reduced-motion: no-preference) {
	.header-main .nav-dropdown { transform: translateY(8px); transition: opacity .25s, visibility .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
	.header-main li.has-dropdown:hover > .nav-dropdown, .header-main li.current-dropdown > .nav-dropdown { transform: none; }
	/* Mobiel menu: items schuiven gestaffeld in */
	.off-canvas .nav-sidebar > li { opacity: 0; transform: translateX(16px); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
	.mfp-ready.off-canvas .nav-sidebar > li { opacity: 1; transform: none; }
	.mfp-ready.off-canvas .nav-sidebar > li:nth-child(n) { transition-delay: calc(var(--i, 0) * 25ms); }
}

/* Oranje verloopband ("Vooruit. Nooit achterom.") beweegt heel subtiel */
@media (prefers-reduced-motion: no-preference) {
	.section.bg-gradient { background-size: 180% 100%; animation: fx-gradient 14s ease-in-out infinite alternate; }
}
@keyframes fx-gradient { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Tablet: persoon staat (via fx.js) rechts naast de tekst; een zacht paars verloop achter de
   tekst houdt die leesbaar waar hij de foto/vormen nog raakt. */
@media (min-width: 550px) and (max-width: 1239px) {
	.section.hero--inner:has(.fx-stage--shifted)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(37, 18, 60, .82) 0%, rgba(37, 18, 60, .55) 42%, rgba(37, 18, 60, 0) 62%); }
}

/* Uitlijning van hero-lagen met de achtergrondfoto gebeurt in fx.js (alignStages).
   Zonder JavaScript: lagen verbergen op mobiel (de foto-strook blijft staan). */
@media (max-width: 549px) {
	.hero .fx-stage:not(.fx-stage--aligned) { visibility: hidden; }
}

/* Footer op tablet (550–849 px): logo boven, drie linkkolommen naast elkaar, erkenningen eronder */
@media (min-width: 550px) and (max-width: 849px) {
	.fort-footer .footer-grid > .col:nth-child(1) { flex: 0 0 100%; max-width: 100%; padding-bottom: 24px; }
	.fort-footer .footer-grid > .col:nth-child(2), .fort-footer .footer-grid > .col:nth-child(3), .fort-footer .footer-grid > .col:nth-child(4) { flex: 0 0 33.333%; max-width: 33.333%; }
	.fort-footer .footer-grid > .col:nth-child(5) { flex: 0 0 100%; max-width: 100%; display: block !important; }
	.fort-footer .footer-logos { margin-left: 0 !important; }
}

/* Mobiel: kolommen staan onder elkaar, dus geen opgetelde desktop-staffeling */
@media (max-width: 549px) {
	.row > .col[data-animate] + .col[data-animate], .col + .col [data-animate] { transition-delay: 0s !important; }
}

/* Sticky header: logo met ademruimte */
.header-wrapper.stuck #logo img { max-height: 50px !important; width: auto; }

/* Nieuwsbericht op mobiel: zijmarge 24px zoals de rest van de site */
@media (max-width: 549px) {
	.blog-single > .row, .blog-single .row.row-large { padding-left: 9px; padding-right: 9px; }
}