/* =====================================================================
   FV3 hero — fotorealistische 3D-container via zelfgehoste model-viewer.
   Poster-img draagt de eerste paint; het model fadet erin zodra geladen.
   ===================================================================== */

/* zelfde visuele positie/maat als de originele hero-PNG (right:160px, ±560px
   breed): de container vult ~78% van dit frame, vandaar het bredere kader.
   Net als de PNG ACHTER de hero-tekst (z1 onder hero-inner z2); de tekstlaag
   laat pointer-events door zodat slepen overal werkt. */
.fv3-stage{
  position:absolute;right:79px;top:50%;transform:translateY(-50%);
  width:min(51vw,722px);aspect-ratio:1320/920;
  z-index:1;user-select:none;-webkit-user-select:none
}
.hero .hero-inner{pointer-events:none}
.hero .hero-inner a,.hero .hero-inner button{pointer-events:auto}
.fv3-stage::before{content:"";position:absolute;inset:-6%;background:radial-gradient(circle at 52% 46%,rgba(59,130,246,.13) 0%,transparent 62%);pointer-events:none}

.fv3-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:opacity .5s ease;filter:drop-shadow(0 30px 50px rgba(1,4,14,.35))}
.fv3-stage.loaded .fv3-poster{opacity:0}

#fv3-mv{position:absolute;inset:0;width:100%;height:100%;background:transparent;--poster-color:transparent;opacity:0;transition:opacity .5s ease;cursor:grab;outline:none}
.fv3-stage.loaded #fv3-mv{opacity:1}
#fv3-mv:active{cursor:grabbing}

/* hotspot-pins (native model-viewer hotspots — billboarden automatisch) */
.fv3-pin{width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;position:relative}
.fv3-pin i{position:absolute;inset:22%;border-radius:50%;background:rgba(240,168,0,.95);box-shadow:0 0 0 3px rgba(2,6,23,.35),0 0 14px rgba(240,168,0,.8);transition:transform .25s;pointer-events:none}
.fv3-pin::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(240,168,0,.75);animation:fv3-pulse 2.2s ease-out infinite}
.fv3-pin:hover i{transform:scale(1.18)}
.fv3-pin.off{opacity:0;pointer-events:none}
.fv3-pin{transition:opacity .3s}
@keyframes fv3-pulse{0%{transform:scale(.55);opacity:.9}80%{transform:scale(1.25);opacity:0}100%{opacity:0}}

/* HUD: hint + aanzicht-presets */
.fv3-hud{position:absolute;left:0;right:0;bottom:-6px;display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.fv3-hint{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);opacity:.85;transition:opacity .4s}
.fv3-hint.off{opacity:0}
.fv3-views{display:inline-flex;gap:6px;pointer-events:auto}
.fv3-views button{padding:6px 13px;border-radius:999px;border:1px solid rgba(148,163,184,.22);background:rgba(148,163,184,.05);color:var(--muted-2);font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.fv3-views button:hover{color:var(--accent-2);border-color:rgba(121,177,252,.4)}
.fv3-views button.on{color:var(--text);border-color:rgba(240,168,0,.5);background:rgba(240,168,0,.08)}

/* hotspot-kaart */
.fv3-card{position:absolute;left:2%;bottom:56px;max-width:250px;padding:16px 18px;background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--border-2);border-radius:12px;box-shadow:0 22px 50px rgba(0,0,0,.45);z-index:4}
.fv3-card strong{display:block;font-size:14.5px;font-weight:800;color:var(--text);margin-bottom:6px;padding-right:18px}
.fv3-card p{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0}
.fv3-card-x{position:absolute;right:8px;top:6px;border:0;background:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:4px}
.fv3-card-x:hover{color:var(--text)}

/* responsive: onder 1100px onder de hero-copy, gecentreerd */
@media(max-width:1280px){.fv3-stage{width:min(48vw,640px);right:36px}}
@media(max-width:1100px){
  .fv3-stage{position:relative;right:auto;top:auto;transform:none;margin:40px auto 10px;width:min(92vw,620px)}
}

@media(prefers-reduced-motion:reduce){
  .fv3-pin::before{animation:none;opacity:.5}
  .fv3-poster,#fv3-mv{transition:none}
}

/* ---- technische USP-callouts: precisie-stip + stippel-elleboog + kaartje.
   Alleen aanwezig waar de markup .fv3-co gebruikt (FinalV5). ---- */
.fv3-co{position:relative;width:0;height:0;pointer-events:none;transition:opacity .35s}
.fv3-co.off{opacity:0}
.fv3-co-dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px}
.fv3-co-dot i{position:absolute;inset:3px;border-radius:50%;background:#ffc233;box-shadow:0 0 10px rgba(240,168,0,.9)}
.fv3-co-dot::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,194,51,.85)}
.fv3-co-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(255,194,51,.28)}
.fv3-co-line{position:absolute;stroke:rgba(255,194,51,.7);stroke-width:1.6;fill:none;stroke-dasharray:1.5 6;stroke-linecap:round}
.fv3-co-card{position:absolute;width:206px;padding:12px 15px;background:linear-gradient(165deg,rgba(15,31,68,.93),rgba(9,19,45,.9));border:1px solid rgba(255,194,51,.32);border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 16px 44px rgba(0,0,0,.5)}
.fv3-co-card::before,.fv3-co-card::after{content:"";position:absolute;width:9px;height:9px;border-color:rgba(255,194,51,.85);border-style:solid}
.fv3-co-card::before{left:-1px;top:-1px;border-width:1.5px 0 0 1.5px;border-top-left-radius:9px}
.fv3-co-card::after{right:-1px;bottom:-1px;border-width:0 1.5px 1.5px 0;border-bottom-right-radius:9px}
.fv3-co-card strong{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ffc233;margin-bottom:5px}
.fv3-co-card p{margin:0;font-size:12px;line-height:1.5;color:#cbd5e1}
/* richtingen (elleboog-geometrie sluit aan op de svg-viewBoxen in de markup) */
.fv3-co[data-dir=ur] .fv3-co-line{left:-2px;top:-174px}
.fv3-co[data-dir=ur] .fv3-co-card{left:192px;top:-130px;transform:translateY(-50%)}
.fv3-co[data-dir=dr] .fv3-co-line{left:-2px;top:-2px}
.fv3-co[data-dir=dr] .fv3-co-card{left:152px;top:114px;transform:translateY(-50%)}
/* progressieve reveal: stip zodra het vlak zichtbaar is; lijn + kaartje pas
   wanneer het vlak echt naar voren staat (.front — JS-hysterese) */
.fv3-co-dot,.fv3-co-line,.fv3-co-card{opacity:0;transition:opacity .3s ease}
.fv3-co:not(.front) .fv3-co-card{transform:translateY(calc(-50% + 10px))!important;transition:opacity .3s ease,transform .3s ease}
.fv3-stage.loaded .fv3-co:not(.off) .fv3-co-dot{opacity:1;transition:opacity .4s ease .1s}
.fv3-stage.loaded .fv3-co.front:not(.off) .fv3-co-line{opacity:1;transition:opacity .45s ease .15s}
.fv3-stage.loaded .fv3-co.front:not(.off) .fv3-co-card{opacity:1;transition:opacity .5s ease .32s,transform .5s cubic-bezier(.16,1,.3,1) .32s}
/* compacter op smallere schermen; onder 1100px (stage onder de tekst) uit */
@media(max-width:1280px){
  .fv3-co-card{width:180px;padding:10px 12px}
  .fv3-co-card p{font-size:11px}
}
@media(max-width:1100px){.fv3-co{display:none}}

/* kaart (deels) buiten beeld: lijn + kaart geheel weg, stip blijft */
.fv3-co.oob .fv3-co-line,.fv3-co.oob .fv3-co-card{opacity:0!important;transition:opacity .22s ease!important}