/* =========================================================
   Beweging en 3D (bij assets/js/effecten.js)
   Zonder JavaScript of met "minder beweging" blijft alles gewoon staan.
   ========================================================= */

/* ---------- 3D-kantelen met lichtvlek ---------- */
.tilt3d {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--schaal, 1));
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s var(--zacht-uit);
    transform-style: preserve-3d;
    will-change: transform;
}
.tilt3d:hover { transition-duration: 0.12s, 0.4s; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--schaal, 1)); }
.tilt3d::before {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
    background: radial-gradient(circle 220px at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08) 45%, transparent 72%);
    mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.3s;
}
.tilt3d:hover::before { opacity: 1; }
.st-kaart.tilt3d:hover { box-shadow: 0 34px 60px -30px rgba(20, 6, 10, 0.55); }

/* De kaart: bij hover komt de pagina iets naar voren */
.st-kaart__beeld { position: relative; }
.st-kaart__beeld img { transition: transform 0.6s var(--zacht-uit); }
.st-kaart:hover .st-kaart__beeld img { transform: scale(1.05) translateY(-1.5%); }

/* ---------- Binnenkomen bij scrollen ---------- */
.js .js-onthul { opacity: 0; transform: translateY(26px) scale(0.98); }
.js .js-onthul.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.7s var(--zacht-uit) var(--wacht, 0s), transform 0.8s var(--zacht-uit) var(--wacht, 0s);
}
/* een kantelkaart die binnenkomt, houdt daarna zijn eigen transform */
.js .js-onthul.is-in.tilt3d { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--schaal, 1)); }

/* ---------- Winkelwagen: knop en vliegend plaatje ---------- */
[data-wagen] { transition: transform 0.18s var(--zacht-uit), background 0.25s, color 0.25s, border-color 0.25s; }
[data-wagen]:active { transform: translateY(2px) scale(0.97); }
[data-wagen].is-bezig { transform: translateY(2px) scale(0.97); }
[data-wagen].is-bezig [data-wagen-tekst] { animation: tekst-op 0.5s var(--zacht-uit); }
@keyframes tekst-op { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vlieger { position: fixed; z-index: 200; pointer-events: none; object-fit: cover; object-position: top; border-radius: 10px;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5); background: var(--wit); }
.is-hup { animation: hup 0.6s var(--zacht-uit); }
@keyframes hup { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-8deg); } 60% { transform: scale(0.94) rotate(4deg); } 100% { transform: scale(1); } }

/* ---------- Schuiven: rijen en slideshows ---------- */
.schuif { position: relative; }
.schuif__baan {
    display: grid; grid-auto-flow: column; grid-auto-columns: var(--dia, minmax(220px, 23%)); gap: 18px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
    padding: 6px 4px 22px; scrollbar-width: none;
}
.schuif__baan::-webkit-scrollbar { display: none; }
.schuif__baan > * { scroll-snap-align: center; transform-origin: center; transition: opacity 0.25s; }
.schuif__baan:focus-visible { outline: 2px solid var(--goud); outline-offset: 4px; border-radius: 12px; }
.schuif__pijlen { display: flex; gap: 8px; }
.schuif__pijl {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--lijn);
    background: var(--wit); color: var(--inkt); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s, opacity 0.2s;
}
.schuif__pijl:hover:not(:disabled) { background: var(--inkt); color: var(--wit); transform: translateY(-2px); }
.schuif__pijl:disabled { opacity: 0.35; cursor: default; }
.schuif__pijl .icoon { width: 18px; height: 18px; }
.schuif__pijl--terug .icoon { transform: rotate(-135deg); }
.schuif__pijl--verder .icoon { transform: rotate(45deg); }
.schuif__stippen { display: flex; justify-content: center; gap: 8px; }
.schuif__stip { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(20, 6, 10, 0.2); cursor: pointer;
    transition: width 0.35s var(--zacht-uit), background 0.25s; }
.schuif__stip[aria-current="true"] { width: 26px; background: var(--inkt); }
/* zonder JavaScript geen pijlen en stippen, wel vegen */
.schuif:not(.is-klaar) .schuif__pijlen, .schuif:not(.is-klaar) .schuif__stippen { display: none; }

/* ---------- 3D-ring (held van de store) ---------- */
.draairing {
    --ring-x: -8deg; --ring-z: 0deg; --kaart: clamp(128px, 15vw, 200px);
    position: relative; height: calc(var(--kaart) * 1.42 + 90px); perspective: 1300px; user-select: none; touch-action: pan-y;
}
.ring__toneel { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d;
    transform: rotateX(var(--ring-x)) rotateZ(var(--ring-z)); transition: transform 0.6s var(--zacht-uit); }
.ring__baan { position: relative; width: var(--kaart); height: calc(var(--kaart) * 1.414); transform-style: preserve-3d;
    transition: transform 1.1s cubic-bezier(0.2, 0.85, 0.25, 1); }
.ring__item {
    position: absolute; inset: 0; display: block; border-radius: 12px; background: var(--wit);
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.6); transition: box-shadow 0.6s, opacity 0.6s;
}
.ring__item.is-achter { opacity: 0; pointer-events: none; }
/* de kaarten achteraan zijn wat donkerder (een laag eroverheen; een filter werkt slecht in 3D) */
.ring__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(10, 4, 6, 0.42); transition: opacity 0.6s; pointer-events: none; }
.ring__item.is-voor::after { opacity: 0; }
.ring__item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; border-radius: inherit; }
.ring__item.is-voor { box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.75), 0 0 0 2px rgba(241, 190, 26, 0.7); }
.ring__item:focus-visible { outline: 3px solid var(--goud); outline-offset: 3px; }
.ring__vloer { position: absolute; left: 10%; right: 10%; bottom: 0; height: 60px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(241, 190, 26, 0.28), transparent); filter: blur(6px); }
.ring__onder { position: absolute; left: 0; right: 0; bottom: -6px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.ring__bijschrift { min-width: 12ch; text-align: center; font-weight: 700; color: var(--wit); font-size: 0.95rem; }
.draairing .schuif__pijl { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); color: var(--wit); }
.draairing .schuif__pijl:hover { background: var(--wit); color: var(--inkt); }
/* zonder JavaScript: een nette waaier in plaats van een ring */
.draairing:not(.is-klaar) .ring__baan { display: flex; width: auto; gap: 10px; }
.draairing:not(.is-klaar) .ring__item { position: relative; width: calc(var(--kaart) * 0.6); height: calc(var(--kaart) * 0.85); }
.draairing:not(.is-klaar) .ring__item::after { opacity: 0; }
.draairing:not(.is-klaar) .ring__item:nth-child(n+5), .draairing:not(.is-klaar) .ring__onder { display: none; }

/* ---------- Bewegende achtergrond en kop van de held ---------- */
.gloed { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none;
    animation: zweef 16s ease-in-out infinite alternate; }
.gloed--1 { width: 46vw; height: 46vw; left: -12vw; top: -10vw; background: #2f7d4a; }
.gloed--2 { width: 38vw; height: 38vw; right: -10vw; top: -6vw; background: #f1be1a; opacity: 0.4; animation-duration: 19s; animation-delay: -6s; }
.gloed--3 { width: 42vw; height: 42vw; right: 8vw; bottom: -22vw; background: #b4471a; animation-duration: 22s; animation-delay: -11s; }
.gloed--4 { width: 36vw; height: 36vw; left: 14vw; bottom: -20vw; background: #1d3a6b; opacity: 0.75; animation-duration: 18s; animation-delay: -3s; }
@keyframes zweef { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vw, 3vw) scale(1.12); } 100% { transform: translate(-3vw, 5vw) scale(0.95); } }
.sneeuw { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
    background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent), radial-gradient(1px 1px at 85% 65%, #fff, transparent),
        radial-gradient(1px 1px at 55% 50%, #fff, transparent), radial-gradient(1.5px 1.5px at 10% 70%, #fff, transparent);
    background-size: 380px 380px; animation: val 40s linear infinite; }
@keyframes val { from { background-position: 0 0; } to { background-position: 60px 380px; } }

.woord { display: inline-block; white-space: nowrap; opacity: 0; transform: translateY(0.5em) rotateX(-40deg); transform-origin: bottom;
    animation: woord-op 0.9s var(--zacht-uit) forwards; animation-delay: calc(0.12s + var(--i) * 0.08s); }
@keyframes woord-op { to { opacity: 1; transform: none; } }
.held-in { opacity: 0; transform: translateY(16px); animation: woord-op 0.9s var(--zacht-uit) forwards; animation-delay: var(--na, 0.5s); }

@media (prefers-reduced-motion: reduce) {
    .tilt3d, .tilt3d:hover { transform: none !important; }
    .tilt3d::before { display: none; }
    .gloed, .sneeuw { animation: none; }
    .woord, .held-in { opacity: 1; transform: none; animation: none; }
    .ring__baan, .ring__toneel { transition: none; }
}

/* Een kop woord voor woord: het goudverloop per woord, anders valt het weg in de animatie */
h1 em .woord, h2 em .woord { background: var(--verloop-goud); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---------- haeswijk-digital.nl: bewegend licht in de held ---------- */
.held { isolation: isolate; }
.held .gloed { z-index: -1; filter: blur(70px); }
.gloed--rood { width: 40vw; height: 40vw; left: -10vw; top: 8vw; background: #c8102e; opacity: 0.5; animation-duration: 17s; }
.gloed--oranje { width: 34vw; height: 34vw; right: 6vw; top: 10vw; background: #ef5a1c; opacity: 0.45; animation-duration: 21s; animation-delay: -7s; }
.gloed--goud { width: 26vw; height: 26vw; left: 30vw; bottom: -6vw; background: #f1be1a; opacity: 0.28; animation-duration: 24s; animation-delay: -12s; }

/* ---------- haeswijk-digital.nl: de ring in de store-band ---------- */
.ring--band { --kaart: clamp(110px, 11vw, 150px); }
@media (max-width: 900px) { .ring--band { --kaart: clamp(110px, 30vw, 150px); } }
.storeband__binnen { overflow: hidden; }   /* de 3D-ring blijft binnen het blok */
/* decoratie (kruis, gloed, 3D-kaarten) mag nooit zorgen dat de pagina opzij gaat schuiven op mobiel */
html, body { overflow-x: clip; }

/* ---------- haeswijk-digital.nl: dienstkaarten en voor-wie-kaarten ---------- */
/* binnenkomen (main.js, .onthul) en daarna kantelen (tilt3d) werken samen */
.js .onthul.is-zichtbaar.tilt3d {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--schaal, 1));
    transition: opacity 0.9s var(--zacht-uit) var(--vertraging, 0s), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s var(--zacht-uit), border-color 0.3s;
}
.js .onthul.is-zichtbaar.tilt3d:hover { transition-duration: 0.9s, 0.12s, 0.4s, 0.3s; transition-delay: 0s; }
/* een witte kaart: een warme gloed en een gloeiende rand waar de muis is, in plaats van wit licht */
.dienst.tilt3d { position: relative; }
.dienst.tilt3d::before {
    mix-blend-mode: normal; z-index: 0;
    background: radial-gradient(circle 260px at var(--px, 50%) var(--py, 0%), rgba(239, 90, 28, 0.13), rgba(241, 190, 26, 0.07) 45%, transparent 70%);
}
.dienst.tilt3d::after {
    content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: inherit; pointer-events: none; padding: 1.5px; opacity: 0; transition: opacity 0.3s;
    background: radial-gradient(circle 200px at var(--px, 50%) var(--py, 0%), #ef5a1c, rgba(241, 190, 26, 0.6) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.dienst.tilt3d:hover::after { opacity: 1; }
.dienst.tilt3d > * { position: relative; z-index: 2; }
.dienst.tilt3d:hover { box-shadow: 0 40px 70px -36px rgba(138, 11, 32, 0.45); border-color: transparent; }
/* het icoon springt op en draait mee, de pijl draait (stond er al) */
.dienst__icoon { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s; }
.dienst:hover .dienst__icoon { transform: translateY(-4px) rotate(-8deg) scale(1.08); box-shadow: 0 18px 30px -12px rgba(239, 90, 28, 0.9); }
.dienst__icoon .icoon { transition: transform 0.6s var(--zacht-uit); }
.dienst:hover .dienst__icoon .icoon { transform: scale(1.12); }
.dienst__prijzen { transition: background 0.3s, transform 0.4s var(--zacht-uit); }
.dienst:hover .dienst__prijzen { transform: translateY(-2px); }
.dienst__top .label { transition: background 0.3s, color 0.3s; }
.dienst:hover .dienst__top .label { background: rgba(239, 90, 28, 0.1); color: var(--rood); }
/* de gekleurde voor-wie-kaarten krijgen het witte licht, zoals in de store */
.voorwie__kaart.tilt3d { position: relative; }
.voorwie__kaart.tilt3d:hover { box-shadow: 0 46px 80px -40px rgba(20, 6, 10, 0.65); }
@media (prefers-reduced-motion: reduce) {
    .js .onthul.is-zichtbaar.tilt3d { transform: none !important; }
    .dienst.tilt3d::after { display: none; }
    .dienst:hover .dienst__icoon, .dienst:hover .dienst__prijzen { transform: none; }
}

/* ---------- haeswijk-digital.nl: de held met een ring van telefoons ---------- */
.ring--tel { --kaart: clamp(130px, 12vw, 172px); width: 100%; height: calc(var(--kaart) * 2.164 + 100px); }
.ring--tel .ring__baan { height: calc(var(--kaart) * 2.164); }
.ring--tel .ring__item {
    padding: 5px; border-radius: calc(var(--kaart) * 0.17);
    background: linear-gradient(160deg, #3a1a20, #0c0305 40%, #1c0a0e);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.1) inset, 0 30px 60px -22px rgba(0, 0, 0, 0.85);
}
.ring--tel .ring__item img { border-radius: calc(var(--kaart) * 0.14); }
/* het eilandje bovenin, zoals op een echte telefoon */
.ring--tel .ring__item::before { content: ""; position: absolute; z-index: 2; top: 10px; left: 50%; width: 30%; height: 11px; transform: translateX(-50%);
    border-radius: 10px; background: #050102; }
.ring--tel .ring__item.is-voor { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.12) inset, 0 50px 90px -30px rgba(0, 0, 0, 0.85), 0 0 120px -10px rgba(239, 90, 28, 0.55); }
.ring--tel .ring__vloer { background: radial-gradient(closest-side, rgba(239, 90, 28, 0.35), transparent); }
.draairing:not(.is-klaar).ring--tel .ring__item { height: calc(var(--kaart) * 1.3); }
/* de zwevende kaartjes naast de ring, niet over de voorste telefoon */
.held__beeld .glas { z-index: 3; }
.held__beeld .glas--1 { left: -12%; bottom: 20%; }
.held__beeld .glas--2 { right: -12%; top: 4%; }