/* Sito DRIP Studio · le aperture dei progetti (openings.js). Un livello dentro l'hero, tra la foto e il testo; ogni
   apertura lascia una composizione ferma. Solo token di drip-system.css. */
.zp-hero.has-opening .zp-hero-copy { z-index: 2; }
.zop { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; perspective: var(--persp-far); }

/* pass · il passaggio e il binario */
.zop-car { position: absolute; left: 0; top: 16%; width: 260vw; height: 26vh; display: flex; align-items: center; gap: 2.2vw; padding: 0 3vw; box-sizing: border-box; will-change: transform; }
.zop-car b { flex: 0 0 auto; height: 38%; aspect-ratio: 8 / 5; border-radius: var(--r-s); background: currentColor; opacity: .9; }
.zop-car.is-b { top: calc(16% + 26vh + var(--s2)); height: 5vh; }
.zop-track { position: absolute; left: 0; right: 0; top: calc(16% + 31vh + var(--s5)); height: var(--s6); color: var(--pon); --k: 1; }
.zop-track i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transform-origin: 0 50%; transform: scaleX(var(--k)); opacity: .7; }
.zop-track i + i { top: var(--s4); }
.zop-track em { position: absolute; right: var(--zp); bottom: calc(100% + var(--s2)); font: 700 var(--fs-h1)/.8 var(--font-sans); font-style: normal; letter-spacing: -.05em; opacity: var(--k); }

/* interface · gli strati dell'immagine si ricompongono */
.zop-slices i { position: absolute; left: 0; right: 0; top: calc(var(--i) * 100% / var(--n)); height: calc(100% / var(--n) + 1px); background-color: var(--pc); background-repeat: no-repeat; will-change: transform, opacity; }

@media (max-width: 768px) {
  .zop-car { height: 14vh; top: calc(var(--shell-h) + var(--s4)); }
  .zop-car.is-b { top: calc(var(--shell-h) + var(--s4) + 14vh + var(--s2)); height: 3vh; }
  .zop-track { top: calc(var(--shell-h) + var(--s5) + 17vh + var(--s4)); }
  .zop-track em { font-size: var(--fs-h2); }
}

/* surfaces · le superfici stampate si posano in pila a destra dell'hero */
.zop-stack i { position: absolute; right: calc(var(--zp) + var(--s6)); top: calc(var(--shell-h) + var(--s7)); width: min(17vw, 260px); aspect-ratio: 5 / 8; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--shadow-3); will-change: transform, opacity; }
.zop-stack i img { width: 100%; height: 100%; object-fit: cover; }

/* mark · tre tratti a 13° che diventano la banda del marchio sul bordo destro */
/* escono da dietro l'angolo del pannello del titolo e salgono inclinati di 13°, come la barra del segno DRIP */
.zop-mark i { position: absolute; bottom: 0; height: 74%; left: calc(min(61.8vw, 1040px) - var(--s6) + var(--i) * 34px); width: 21px; border-radius: var(--r-pill);
  transform-origin: 50% 100%; transform: rotate(13deg) scaleY(var(--e, 1)) translate3d(0, calc((1 - var(--e, 1)) * 40%), 0); }

/* doors · due ante che si aprono sui bordi */
.zop-doors { display: flex; }
.zop-doors i { flex: 1; transform-origin: 0 50%; backface-visibility: hidden; transform: rotateY(88deg); }
.zop-doors i + i { transform-origin: 100% 50%; }

/* pitch · le linee del campo */
.zop-pitch svg { position: absolute; right: var(--zp); top: calc(var(--shell-h) + var(--s5)); width: min(54vw, 860px); height: auto; fill: none; stroke: currentColor; stroke-width: 2.5; opacity: .5; }

/* civic · la pianta e l'interfaccia */
.zop-civic { color: var(--pon); }
.zop-civic canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .32; }
.zop-civic i { position: absolute; right: calc(var(--zp) + var(--s5)); top: calc(var(--shell-h) + var(--s5)); width: min(30vw, 470px); aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--shadow-3); }
.zop-civic i img { width: 100%; height: 100%; object-fit: cover; }

/* city · la città 3D è l'hero */
.zop-city { opacity: 0; transition: opacity var(--motion-l2) var(--ease-out); background: var(--brand-off-black); }
.zop-city.is-on { opacity: 1; }
.zop-city [data-stage] { position: absolute; inset: 0; }
.zop-city canvas { position: absolute; inset: 0; display: block; }

@media (max-width: 768px) {
  .zop-stack i { width: 28vw; right: var(--s4); }
  .zop-civic i { width: 54vw; }
  .zop-pitch svg { width: 88vw; left: var(--s4); right: auto; }
}