/* Slotsectie 'tegels' (16 okt 2026): nabouw van de oude hero #mdb-hero (WP 12464, widget 857b85c).
   Overgenomen: schuine kolommen (perspective(1400px) rotate(3deg)), kolommen afwisselend omhoog/omlaag,
   naadloze loop translate3d(0,-50%,0) op dezelfde pixelsnelheid als origineel (24s per 2 groepen; hier 4 groepen dus 48s, tablet 56s, mobiel 44s), verspringende kolomstart 0/15/8/22%,
   hover-zoom op tegels, pulserende gloed, fade-up van de tekst, muis-tilt en scroll-zoom (tegels.js).
   Alleen transform/opacity animeren. prefers-reduced-motion: zeer rustige scroll (4x trager), verder stil. */
.tegels{content-visibility:auto;contain-intrinsic-size:auto 720px;--tg-speed:48s;--tg-bg:#050816;position:relative;overflow:hidden;isolation:isolate;color:#fff;background:radial-gradient(circle at 20% 10%,rgba(0,78,128,.35) 0%,transparent 45%),radial-gradient(circle at 85% 75%,rgba(91,22,216,.12) 0%,transparent 50%),radial-gradient(ellipse at 10% 0%,#00315F 0,#070D1F 40%,#050816 100%);min-height:78vh;min-height:78svh;display:flex;align-items:center;contain:paint}
.tegels__visual{position:absolute;inset:0;z-index:0;overflow:hidden;transform-origin:50% 50%}
.tegels__cols{position:absolute;top:-18%;left:-8%;width:116%;height:136%;display:flex;gap:0;opacity:.78;transform:perspective(1400px) rotate(3deg)}
.tegels__col{flex:1;display:flex;flex-direction:column;min-width:0}
.tegels__track{display:flex;flex-direction:column;gap:0;animation:tegels-scroll var(--tg-speed) linear infinite;animation-play-state:paused}
.tegels__track--down{animation-direction:reverse}
.tegels__col--2 .tegels__track{margin-top:-15%}
.tegels__col--3 .tegels__track{margin-top:-8%}
.tegels__col--4 .tegels__track{margin-top:-22%}
.tegels__card{position:relative;flex:none;aspect-ratio:16/9;overflow:hidden;transform:translateZ(0);transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}
.tegels__card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(0,78,128,.15) 0%,transparent 50%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.tegels__card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.tegels__overlay{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(5,8,22,.92) 0%,rgba(5,8,22,.82) 32%,rgba(5,8,22,.46) 63%,rgba(5,8,22,.40) 100%),linear-gradient(180deg,rgba(5,8,22,.55) 0%,rgba(5,8,22,.12) 45%,rgba(5,8,22,.55) 100%)}
.tegels__overlay::before,.tegels__overlay::after{content:"";position:absolute;border-radius:50%;animation-play-state:paused!important}
.tegels__overlay::before{right:-5%;bottom:15%;width:50%;height:50%;background:radial-gradient(circle,rgba(91,22,216,.5) 0%,transparent 70%);opacity:.22;animation:tegels-glow 6s ease-in-out infinite reverse}
.tegels__overlay::after{left:-10%;top:20%;width:60%;height:60%;background:radial-gradient(circle,rgba(0,78,128,.6) 0%,transparent 70%);opacity:.45;animation:tegels-glow 8s ease-in-out infinite}
.tegels__fade{position:absolute;left:0;right:0;height:18vh;z-index:4;pointer-events:none}
.tegels__fade{bottom:0;background:linear-gradient(180deg,transparent 0%,var(--tg-bg) 100%)}
.tegels__visual::before{content:"";position:absolute;left:0;right:0;top:0;height:12vh;z-index:4;background:linear-gradient(0deg,transparent,#040915)}
.tegels__inner{position:relative;z-index:10;width:100%;padding-block:clamp(64px,9vw,112px);pointer-events:none}
.tegels__copy{max-width:560px;pointer-events:auto}
.tegels .eyebrow{color:#FF9A1F}
.tegels h2{font-family:Poppins,system-ui,sans-serif;font-size:clamp(1.8rem,4vw,3rem);line-height:1.15;margin:.25rem 0 1rem;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.5)}
.tegels__lead{font-family:Inter,system-ui,sans-serif;color:#C9D3F0;font-size:clamp(1rem,1.1vw,1.08rem);line-height:1.6;margin:0 0 1.25rem;max-width:32rem;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.tegels__cta{position:relative;overflow:hidden;display:inline-block;margin-top:.25rem;background:linear-gradient(135deg,#FF9A1F,#FFB347);color:#0B1B3A;font-family:Poppins,system-ui,sans-serif;font-weight:600;padding:.875rem 1.6rem;border-radius:10px;text-decoration:none;box-shadow:0 8px 30px rgba(255,154,31,.4),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}
.tegels__cta::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-100%);transition:transform .5s ease}
.tegels__cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 40px rgba(255,154,31,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.tegels__cta:hover::before{transform:translateX(100%)}
.tegels__cta:active{transform:translateY(-1px) scale(.98)}
.tegels__cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* tekst fade-up (alleen als JS draait; zonder JS gewoon zichtbaar) */
.tegels.is-armed .tegels__copy>*{opacity:0;transform:translateY(20px)}
.tegels.is-in .tegels__copy>*{animation:tegels-fade-up .8s ease forwards}
.tegels.is-in .tegels__copy>:nth-child(1){animation-delay:.2s}
.tegels.is-in .tegels__copy>:nth-child(2){animation-delay:.4s}
.tegels.is-in .tegels__copy>:nth-child(3){animation-delay:.6s}
.tegels.is-in .tegels__copy>:nth-child(4){animation-delay:.8s}
/* perf 16 okt: animaties staan standaard stil; tegels.js zet .is-live zodra de sectie in beeld is (en haalt het weg erbuiten). */
.tegels.is-live .tegels__track{animation-play-state:running;will-change:transform}
.tegels.is-live .tegels__overlay::before,.tegels.is-live .tegels__overlay::after{animation-play-state:running!important}
@media (hover:hover) and (min-width:1025px){
  .tegels__visual{pointer-events:auto}
  .tegels__card:hover{transform:translateZ(0) scale(1.12) translateY(-8px);box-shadow:0 25px 50px rgba(0,78,128,.5),0 0 0 2px rgba(255,154,31,.5);z-index:10}
  .tegels__card:hover::before{opacity:1}
  .tegels__card:hover img{transform:scale(1.05)}
}
@keyframes tegels-scroll{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,-50%,0)}}
@keyframes tegels-fade-up{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes tegels-glow{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.5;transform:scale(1.08)}}
@media (max-width:1024px){
  .tegels{--tg-speed:56s}
  .tegels__cols{top:-15%;left:-9%;width:118%;height:130%;transform:rotate(2deg)}
}
@media (max-width:768px){
  .tegels{--tg-speed:44s;min-height:640px;text-align:center}
  .tegels__cols{top:-6%;left:-24%;width:148%;height:112%;opacity:.9;transform:rotate(1.5deg)}
  .tegels__col--4{display:none}
  .tegels__overlay{background:radial-gradient(ellipse 88% 72% at 50% 50%,rgba(5,8,22,.86) 0%,rgba(5,8,22,.66) 58%,rgba(5,8,22,.4) 100%),linear-gradient(180deg,rgba(5,8,22,.4) 0%,rgba(5,8,22,.18) 52%,rgba(5,8,22,.52) 100%)}
  .tegels__copy{margin-inline:auto}
  .tegels__lead{margin-inline:auto;text-shadow:0 2px 10px rgba(0,0,0,.92),0 0 22px rgba(0,0,0,.55)}
  .tegels h2{text-shadow:0 2px 10px rgba(0,0,0,.92),0 0 22px rgba(0,0,0,.55)}
  .tegels__fade{height:48px}
}
@media (prefers-reduced-motion:reduce){
  /* 16 okt: niet volledig stil (origineel liep ook door); heel rustige scroll, 4x trager. Geen gloed/hover/tilt/zoom. */
  /* style.css r.143 zet bij reduce *{animation-duration:.001ms!important;iteration-count:1!important}: hier bewust overschreven (hogere specificiteit). */
  .tegels .tegels__col .tegels__track{animation-duration:calc(var(--tg-speed) * 4)!important;animation-iteration-count:infinite!important}
  .tegels__overlay::before,.tegels__overlay::after{animation:none}
  .tegels__card:hover,.tegels__card:hover img{transform:none}
  .tegels.is-armed .tegels__copy>*{opacity:1;transform:none;animation:none}
  .tegels__card,.tegels__card img,.tegels__cta,.tegels__cta::before{transition:none}
}