/* =====================================================================
   ACturo – 3D-laag
   Aanvulling op style.css. Verwijder je dit bestand (en de 3 scripts),
   dan is de site terug exact zoals voordien.
===================================================================== */

/* ---------- 3D-canvas achter de inhoud ---------- */
.scene-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.scene-3d.is-ready {
  opacity: 1;
}
.hero > .container,
.services > .container {
  position: relative;
  z-index: 1;
}
.services {
  position: relative;
  overflow: hidden;
}
/* zachte gloed achter de diensten, zodat de 3D-vormen oplichten */
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 10% 10%, rgba(63, 111, 112, 0.28), transparent 70%),
    radial-gradient(500px 380px at 95% 95%, rgba(63, 111, 112, 0.22), transparent 70%);
  pointer-events: none;
}

/* ---------- Hero: 3D-tekst en 3D-afbeelding ---------- */
.hero h1 span {
  text-shadow: none;
}

.hero-visual {
  position: relative;
  display: inline-block;
  transform: perspective(1400px) rotateX(var(--hx, 0deg)) rotateY(var(--hy, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-visual .hero-image {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 30px 40px rgba(8, 21, 33, 0.22));
}
/* schaduw op de "grond" die meebeweegt met het zweven */
.hero-visual::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -4%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 21, 33, 0.25), transparent);
  animation: shadow-float 5s ease-in-out infinite;
  z-index: 0;
}
@keyframes shadow-float {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.86); opacity: 0.65; }
}

/* ---------- 3D-knoppen ---------- */
.fx3d .btn-primary-custom {
  box-shadow: 0 5px 0 #284849, 0 12px 24px rgba(63, 111, 112, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.3s ease;
}
.fx3d .btn-primary-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #284849, 0 16px 30px rgba(63, 111, 112, 0.32);
}
.fx3d .btn-primary-custom:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #284849, 0 6px 12px rgba(63, 111, 112, 0.25);
}

/* ---------- Kantelende kaarten ---------- */
.fx3d .services .service-card,
.fx3d .projects .project-card,
.fx3d .pf-card,
.fx3d .contact .info-item,
.fx3d .about .about-image,
.fx3d .about .stats .stat {
  --lift: 0px;
  position: relative;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.35s ease;
}
.fx3d .services .service-card.is-tilting,
.fx3d .projects .project-card.is-tilting,
.fx3d .pf-card.is-tilting,
.fx3d .contact .info-item.is-tilting,
.fx3d .about .about-image.is-tilting,
.fx3d .about .stats .stat.is-tilting {
  transition: transform 0.12s linear, box-shadow 0.4s ease, border-color 0.35s ease;
}
.fx3d .services .service-card:hover { --lift: -10px; }
.fx3d .pf-card:hover { --lift: -6px; }
.fx3d .contact .info-item:hover { --lift: -5px; }

/* lichtreflectie die de muis volgt */
.fx3d .services .service-card::after,
.fx3d .projects .project-card::after,
.fx3d .pf-card::after,
.fx3d .contact .info-item::after,
.fx3d .about .about-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.28), transparent 55%);
}
.fx3d .services .service-card::after {
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(143, 211, 209, 0.16), transparent 55%);
}
.fx3d .is-tilting::after {
  opacity: 1;
}

/* diepte: inhoud van de dienstkaarten "zweeft" boven de kaart */
.fx3d .services .service-card {
  transform-style: preserve-3d;
}
.fx3d .services .service-card .service-icon {
  transform: translateZ(45px);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.25);
}
.fx3d .services .service-card h3 { transform: translateZ(30px); }
.fx3d .services .service-card p { transform: translateZ(15px); }
.fx3d .services .service-card a { display: inline-block; transform: translateZ(25px); }

/* iconen draaien in 3D bij hover */
.services .service-card .service-icon i,
.features .feature-item i,
.service-details .service-icon i,
.about .stats .stat .icon i,
.contact .info-item .icon i {
  display: inline-block;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.services .service-card:hover .service-icon i,
.about .stats .stat:hover .icon i,
.contact .info-item:hover .icon i {
  transform: rotateY(360deg);
}
.features .feature-item:hover i {
  transform: perspective(300px) rotateY(360deg) scale(1.1);
}

/* ---------- 3D-intrede bij het scrollen ---------- */
.r3d {
  opacity: 0;
  transform: perspective(1000px) rotateX(16deg) translateY(50px) scale(0.97);
  transform-origin: 50% 100%;
  transition:
    opacity 0.8s ease var(--d, 0s),
    transform 1s cubic-bezier(0.2, 0.75, 0.2, 1) var(--d, 0s);
}
.r3d.r3d-in {
  opacity: 1;
  transform: none;
}

/* ---------- Toegankelijkheid ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-visual::after { animation: none; }
  .r3d { opacity: 1; transform: none; transition: none; }
  .services .service-card .service-icon i,
  .features .feature-item i,
  .about .stats .stat .icon i,
  .contact .info-item .icon i { transition: none; }
}

@media (max-width: 991.98px) {
  .hero-visual { display: block; }
}

/* =====================================================================
   Scroll-interactie
===================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 2000;
  background: linear-gradient(90deg, #3f6f70, #8fd3d1);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* hero-laptop kantelt achterover en zakt weg; titel beweegt trager mee */
.hero-visual {
  transform: perspective(1400px) translateZ(var(--sz, 0px)) rotateX(calc(var(--hx, 0deg) + var(--sx, 0deg))) rotateY(var(--hy, 0deg));
  opacity: var(--so, 1);
}
.hero h1 {
  transform: translateY(var(--ty, 0px));
  will-change: transform;
}

/* kaarten kantelen volgens hun plek op het scherm (+ de muis) */
.fx3d .services .service-card,
.fx3d .projects .project-card,
.fx3d .pf-card {
  transform: perspective(900px) rotateX(calc(var(--rx, 0deg) + var(--srx, 0deg))) rotateY(var(--ry, 0deg)) translateY(var(--lift));
}
.fx3d .detail-row {
  transform: perspective(1200px) rotateX(calc(var(--srx, 0deg) * 0.4));
  transition: transform 0.3s ease-out;
}

/* detailblokken schuiven van links/rechts binnen */
.detail-row.r3d.from-left { transform: perspective(1000px) rotateY(18deg) translateX(-80px); transform-origin: 0 50%; }
.detail-row.r3d.from-right { transform: perspective(1000px) rotateY(-18deg) translateX(80px); transform-origin: 100% 50%; }
.detail-row.r3d.r3d-in { transform: perspective(1200px) rotateX(calc(var(--srx, 0deg) * 0.4)); }

/* cijfers springen in 3D naar voren */
.about .stats .stat h3.pop-3d { animation: pop-3d 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pop-3d {
  0% { transform: perspective(400px) rotateX(70deg) translateY(20px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* =====================================================================
   Lettertypes: Bricolage Grotesque (titels) + Instrument Sans (tekst)
===================================================================== */
body {
  font-family: "Instrument Sans", system-ui, sans-serif;
}
h1, h2, h3, h4, h5,
.h2-like,
.navbar-brand,
.hero h1,
.section-title h2,
.about h2,
.about .stats .stat h3 {
  font-family: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.hero h1 {
  font-weight: 800;
  letter-spacing: -0.035em;
}
.btn,
.nav-link,
.section-title span,
.about .subtitle {
  font-family: "Instrument Sans", system-ui, sans-serif;
}