/* ============================================================
   DK VISUALS v2 — interactive hero "camera" layer
   (loads after v2-scenes.css; overrides hero transforms)
   ============================================================ */

/* ---------- depth parallax (mouse-driven vars on .pin-stick) ---------- */
#proloog .hero-media{
  transform:translate3d(calc(var(--mx,0)*20px + var(--dx,0px)), calc(var(--my,0)*14px), 0)
            scale(calc(1.08 + var(--p,0)*.12));
  filter:brightness(calc(1 - var(--p,0)*.55));
}
#proloog .hero-inner{
  transform:translate3d(calc(var(--mx,0)*-26px), calc(var(--p,0)*-9vh + var(--my,0)*-16px), 0);
}
#proloog .hero-title{
  transform:perspective(1100px) rotateY(calc(var(--mx,0)*5deg)) rotateX(calc(var(--my,0)*-4deg));
}
#proloog .hero-fno{transform:translate(calc(var(--mx,0)*-9px),calc(var(--my,0)*-7px))}

/* ---------- golden-hour light (cursor as light source) ---------- */
.hero-light{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle 46vmin at var(--lx,50%) var(--ly,42%),
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%, rgba(4,4,3,.62) 100%)}
.hero-glow{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle 32vmin at var(--lx,50%) var(--ly,42%),
    rgba(255,186,92,.34), rgba(255,170,70,.1) 48%, transparent 72%)}

/* ---------- viewfinder cursor ---------- */
body.vf-on .cursor,body.vf-on .cursor-dot{opacity:0}
.vf{position:absolute;left:0;top:0;z-index:6;pointer-events:none;
  width:min(44vmin,400px);aspect-ratio:3/2;opacity:0;transition:opacity .35s ease;will-change:transform}
.vf.show{opacity:1}
.vf .c{position:absolute;width:24px;height:24px;border:1.5px solid rgba(243,239,230,.92)}
.vf .c.tl{top:0;left:0;border-right:0;border-bottom:0}
.vf .c.tr{top:0;right:0;border-left:0;border-bottom:0}
.vf .c.bl{bottom:0;left:0;border-right:0;border-top:0}
.vf .c.br{bottom:0;right:0;border-left:0;border-top:0}
.vf-grid{position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(243,239,230,.9) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(243,239,230,.9) 1px,transparent 1px);
  background-size:33.34% 33.34%;background-position:-1px -1px}
.vf-ring{position:absolute;left:50%;top:50%;width:52px;height:52px;border:1px solid var(--accent);
  border-radius:50%;transform:translate(-50%,-50%);transition:border-color .2s,box-shadow .2s,transform .2s}
.vf-ring::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,-50%);transition:background .2s}
.vf.af .vf-ring{border-color:#8fdc96;box-shadow:0 0 18px rgba(143,220,150,.35);transform:translate(-50%,-50%) scale(.86)}
.vf.af .vf-ring::after{background:#8fdc96}
.vf-hud{position:absolute;left:2px;right:2px;display:flex;gap:16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:rgba(243,239,230,.88);
  text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.8);white-space:nowrap}
.vf-hud.t{top:-26px}
.vf-hud.b{bottom:-26px;justify-content:space-between}
.vf-hud .rec{color:#e25b4a;animation:vfblink 1.3s steps(2) infinite}
.vf-hud .gold{color:var(--accent)}
@keyframes vfblink{50%{opacity:.15}}

/* ---------- shutter flash ---------- */
.shutter{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;background:#000}
.shutter.snap{animation:snap .55s ease forwards}
@keyframes snap{0%{opacity:0;background:#000}10%{opacity:1;background:#000}
  24%{opacity:.95;background:#fff}100%{opacity:0;background:#fff}}

/* ---------- top-right: film strip + captured polaroids ---------- */
.hero-tr{position:absolute;top:clamp(86px,12vh,130px);right:clamp(20px,4vw,52px);z-index:8;
  display:flex;flex-direction:column;gap:14px;align-items:flex-end;
  opacity:calc(1 - var(--p,0)*2.5)}
body.loaded .hero-tr{animation:heroFadeO 1.2s ease 1.6s backwards}
.hstrip{display:flex;gap:7px;padding:7px;border:1px solid var(--line);
  background:rgba(5,5,4,.42);backdrop-filter:blur(8px)}
.hstrip button{position:relative;width:60px;aspect-ratio:3/2;overflow:hidden;padding:0;
  opacity:.42;transition:opacity .3s;outline:1px solid transparent;outline-offset:1px}
.hstrip button:hover{opacity:.8}
.hstrip button.on{opacity:1;outline-color:var(--accent)}
.hstrip img{width:100%;height:100%;object-fit:cover;display:block}
.hstrip-label{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);text-align:right;margin-top:-6px}
.fdock{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.pol{width:118px;background:#f1ede3;padding:5px 5px 6px;box-shadow:0 14px 34px rgba(0,0,0,.55);
  transform:rotate(var(--r,0deg));animation:polIn .65s var(--ease)}
.pol img{width:100%;display:block}
.pol .pc{font-family:var(--mono);font-size:7.5px;color:#3a352c;letter-spacing:.06em;
  margin-top:4px;display:flex;justify-content:space-between;gap:6px;text-transform:uppercase}
@keyframes polIn{from{opacity:0;transform:translateY(-16px) scale(.78) rotate(var(--r,0deg))}}

/* ---------- interaction hint ---------- */
.hero-hint{margin-top:clamp(14px,2.2vh,22px);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.hero-hint b{color:var(--accent);font-weight:400}

/* ---------- modes (Tweaks) ---------- */
body.heromode-uit .hero-light,body.heromode-uit .hero-glow,body.heromode-uit .vf,
body.heromode-uit .hero-tr,body.heromode-uit .hero-hint,body.heromode-uit .shutter{display:none}
body.heromode-rustig .vf{display:none}

@media (hover:none),(pointer:coarse){
  .hstrip button{width:52px}
  .pol{width:96px}
}
@media (max-width:760px){
  .hero-tr{top:auto;bottom:clamp(86px,13vh,150px);right:16px;transform:translateY(-100%);display:none}
  /* on small screens the strip would collide with the title — keep dock only */
  .hero-tr.touch-show{display:flex}
  .vf{width:62vmin}
}
@media (prefers-reduced-motion: reduce){
  .hero-light,.hero-glow{display:none}
  .vf-hud .rec{animation:none}
}