/*
 * Transiënt Groep – v8.0 – Beweging.
 * Niveaus (Customizer > Beweging en opmaak), als klasse op de body:
 *   tg-fx-uit | tg-fx-rustig | tg-fx-gemiddeld | tg-fx-spectaculair
 * Alleen eigenschappen die geen bestaande transform overschrijven (translate, scale, opacity).
 */
:root { --tg-ease: cubic-bezier(.22,.61,.36,1); }

.tg-sectie-vervolg { margin-top: clamp(64px,7vw,104px); }

/* ---------- Hero: langzame zoom, scrollbeweging en een sierlijke titel (gemiddeld en spectaculair) ---------- */
@keyframes tgKenBurns { from { scale: 1.08; } to { scale: 1.16; } }
@keyframes tgTitleIn  { from { opacity:0; filter:blur(12px); letter-spacing:.34em; translate:0 18px; } }

body:is(.tg-fx-gemiddeld,.tg-fx-spectaculair) .hero--montfort .hero__foto {
  animation: tgKenBurns 30s ease-in-out infinite alternate;
  translate: 0 calc(var(--tg-hy,0) * 1px);
  will-change: scale, translate;
}
body:is(.tg-fx-gemiddeld,.tg-fx-spectaculair) .hero--montfort .home-hero-center {
  opacity: calc(1 - var(--tg-hp,0) * 1.15);
  translate: 0 calc(var(--tg-hp,0) * -42px);
}
body:is(.tg-fx-gemiddeld,.tg-fx-spectaculair) .hero--montfort :is(.home-hero-title,.page-hero-brand-title) {
  animation-name: tgTitleIn;
  animation-duration: 1.5s;
  animation-timing-function: var(--tg-ease);
}

/* ---------- Gouden sprankels, lichtglans en voortgangslijn (spectaculair) ---------- */
.tg-sparkle { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; mix-blend-mode:screen; }
.tg-glow {
  position:absolute; inset:0; pointer-events:none; opacity:0; z-index:1; mix-blend-mode:screen;
  background: radial-gradient(ellipse at var(--gx,68%) var(--gy,34%), rgba(255,226,160,.34), rgba(255,226,160,.08) 38%, transparent 62%);
}
.tg-glow.tg-glow--on { animation: tgGlow 2.2s ease-out both; }
@keyframes tgGlow { 0% { opacity:0; } 18% { opacity:1; } 100% { opacity:0; } }

#tg-progress {
  position:fixed; left:0; top:0; height:2px; width:100%; z-index:9998; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(var(--tg-prog,0));
  background: linear-gradient(90deg, rgba(201,162,75,.15), #C9A24B);
}

/* ---------- Zacht verschijnen (alle niveaus behalve Uit) ---------- */
html.tg-rv-on .op.tg-rv {
  opacity:0 !important;
  transform:none !important;
  translate:0 38px;
  transition: opacity .95s var(--tg-ease) var(--tg-d,0ms), translate .95s var(--tg-ease) var(--tg-d,0ms) !important;
}
html.tg-rv-on .op.tg-rv.tg-in { opacity:1 !important; translate:0 0; }
html.tg-rv-on .op.tg-rv.tg-done {
  transition: opacity .3s ease, translate .3s ease, background-color .4s ease, color .4s ease, box-shadow .4s ease, border-color .4s ease !important;
}

/* ---------- Foto's schuiven open (spectaculair) ---------- */
html.tg-img-on .tg-img {
  opacity:0; scale:1.07; clip-path:inset(0 0 100% 0);
  transition: opacity 1.1s var(--tg-ease), scale 1.4s var(--tg-ease), clip-path 1.2s var(--tg-ease);
}
html.tg-img-on .tg-img.tg-img-in { opacity:1; scale:1; clip-path:inset(0 0 0 0); }

/* ---------- Kaarten ---------- */
body:is(.tg-fx-gemiddeld,.tg-fx-spectaculair) :is(.kolom,.sector,.stap) {
  transition: translate .55s var(--tg-ease), box-shadow .55s var(--tg-ease), border-color .4s ease;
}
body:is(.tg-fx-gemiddeld,.tg-fx-spectaculair) :is(.kolom,.sector,.stap):hover {
  translate: 0 -6px;
  box-shadow: 0 26px 54px rgba(22,35,63,.12);
}

/* ---------- Menupil ---------- */
body.tg-phase1 .tg-pill { view-transition-name: tg-pill; transition: background-color .35s ease, box-shadow .35s ease; }
body.tg-phase1 .tg-pill.tg-pill--scrolled { background: rgba(22,35,63,.94) !important; box-shadow: 0 14px 40px rgba(22,35,63,.28) !important; }

/* ---------- Knoppen die licht naar de cursor toe bewegen (spectaculair) ---------- */
body.tg-fx-spectaculair .knop {
  translate: var(--mx,0px) var(--my,0px);
  transition: translate .35s var(--tg-ease), background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

/* ---------- Mobiel: lichter ---------- */
@media (max-width:767px) {
  html.tg-rv-on .op.tg-rv { translate: 0 22px; }
  body:is(.tg-fx-gemiddeld,.tg-fx-spectaculair) .hero--montfort .hero__foto { animation: none; translate: none; }
  body:is(.tg-fx-gemiddeld,.tg-fx-spectaculair) .hero--montfort .home-hero-center { opacity: 1; translate: none; }
}

/* ---------- Verminderde beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  body .hero--montfort .hero__foto { animation: none !important; translate: none !important; }
  body .hero--montfort .home-hero-center { opacity: 1 !important; translate: none !important; }
  body :is(.kolom,.sector,.stap):hover { translate: none !important; }
  #tg-progress, .tg-sparkle, .tg-glow { display: none !important; }
}