/* Extra beweging en beeld — alles degradeert netjes zonder JavaScript of bij "verminderde beweging" */
@view-transition { navigation: auto; }
.fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform-origin: left; transform: scaleX(0); z-index: 300; pointer-events: none; }
.fx-glow { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: radial-gradient(circle, rgba(184,150,100,.07), transparent 65%); pointer-events: none; z-index: 5; opacity: 0; transition: opacity .6s; mix-blend-mode: screen; will-change: transform; }
.fx-glow.is-on { opacity: 1; }

/* achtergrondfoto's met parallax */
.fx-host { position: relative; overflow: hidden; isolation: isolate; }
.fx-host > .container { position: relative; z-index: 1; }
.fx-bg { position: absolute; left: 0; right: 0; top: -14%; bottom: -14%; z-index: -1; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s var(--ease); will-change: transform; }
.fx-bg.is-ready { opacity: .2; }
.fx-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--anthracite) 0%, rgba(23,20,17,.35) 32%, rgba(23,20,17,.35) 68%, var(--anthracite) 100%), radial-gradient(ellipse at center, transparent 30%, rgba(23,20,17,.7) 100%); }

/* vonken in de hero (smidse) */
.fx-sparks { position: absolute; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; }
.hero__media { will-change: transform; }

/* kaarten: foto bij hover + kantelen */
.card { transform-style: preserve-3d; }
.card__photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .7s var(--ease), transform 1.2s var(--ease); transform: scale(1.08); z-index: 0; }
.card__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,20,17,.95) 10%, rgba(23,20,17,.55) 70%, rgba(23,20,17,.7)); }
.card:hover .card__photo, .card:focus-visible .card__photo { opacity: .75; transform: scale(1); }
.card > :not(.card__photo) { position: relative; z-index: 1; }

/* titels woord voor woord */
.fx-w { display: inline-block; opacity: 0; transform: translateY(.3em); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.fx-in .fx-w { opacity: 1; transform: none; }

/* fotogalerij */
.fx-gallery { padding-bottom: clamp(56px, 8vw, 110px); }
.fx-track { display: flex; gap: clamp(14px, 2vw, 26px); overflow-x: auto; padding: 8px var(--gutter) 28px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; cursor: grab; -webkit-overflow-scrolling: touch; }
.fx-track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.fx-shot { flex: 0 0 auto; width: clamp(220px, 27vw, 380px); aspect-ratio: 3 / 4; padding: 0; border: 1px solid var(--gold-soft); background: var(--brown); overflow: hidden; cursor: zoom-in; position: relative; scroll-snap-align: center; transition: border-color .4s, transform .6s var(--ease); }
.fx-shot:hover, .fx-shot:focus-visible { border-color: var(--gold); transform: translateY(-3px); }
.fx-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); pointer-events: none; -webkit-user-drag: none; }
.fx-shot:hover img { transform: scale(1.025); }
.fx-shot::after { content: "+"; position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(23,20,17,.7); color: var(--gold); border: 1px solid var(--gold-soft); font-size: 1.1rem; opacity: 0; transition: opacity .3s; }
.fx-shot:hover::after, .fx-shot:focus-visible::after { opacity: 1; }
.fx-hint { text-align: center; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin: 6px 0 0; }
.fx-lb { position: fixed; inset: 0; z-index: 400; background: rgba(12,10,8,.94); display: none; align-items: center; justify-content: center; padding: 24px; }
.fx-lb.is-open { display: flex; animation: fxfade .3s var(--ease); }
.fx-lb img { max-width: min(92vw, 900px); max-height: 86vh; object-fit: contain; border: 1px solid var(--gold-soft); }
.fx-lb button { position: absolute; background: transparent; border: 1px solid var(--gold-soft); color: var(--offwhite); width: 46px; height: 46px; font-size: 1.3rem; cursor: pointer; }
.fx-lb button:hover { border-color: var(--gold); color: var(--gold); }
.fx-lb__close { top: 20px; right: 20px; } .fx-lb__prev { left: 20px; top: 50%; } .fx-lb__next { right: 20px; top: 50%; }
@keyframes fxfade { from { opacity: 0; } to { opacity: 1; } }

/* knoppen die licht naar de muis trekken */
@media (hover: hover) and (pointer: fine) { .btn[data-mag] { transition: transform .35s var(--ease), color .5s var(--ease), border-color .5s var(--ease); } }

@media (prefers-reduced-motion: reduce) {
  .fx-w { opacity: 1; transform: none; filter: none; transition: none; }
  .fx-bg { transition: none; } .card__photo { transition: none; } .fx-glow, .fx-sparks { display: none; }
}

/* Gemeenschappelijke look voor alle werkfoto's: donkerder, iets warmer en rustiger van kleur, passend bij zwart en goud.
   Dit is een CSS-laag; de originele foto's blijven onaangeraakt. */
img[src*="assets/werk-"] { filter: brightness(.88) contrast(1.06) saturate(.8) sepia(.16); }
.fx-shot::before, .service .photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(23,20,17,.05) 0%, rgba(23,20,17,.28) 100%), rgba(184,150,100,.07); mix-blend-mode: multiply; }
.service .photo { position: relative; }

/* Over ons: de foto van Lander met zijn paard is hier echt zichtbaar achter de titel (enkel gecropt en donkerder gemaakt) */
.fx-bg--photo { background-position: 50% 41%; }
.fx-bg--photo.is-ready { opacity: .85; }
.fx-bg--photo::after { background: linear-gradient(90deg, rgba(23,20,17,.94) 0%, rgba(23,20,17,.72) 38%, rgba(23,20,17,.28) 72%, rgba(23,20,17,.18) 100%), linear-gradient(180deg, var(--anthracite) 0%, rgba(23,20,17,.1) 30%, rgba(23,20,17,.15) 62%, var(--anthracite) 100%); }