/* Benta Media Studio — the four-act scroll cinema.
   Si gira → Si monta → Si pubblica → Si sviluppa.
   Pure CSS 3D + one rAF loop. No WebGL, no libraries. */

.film{position:relative;z-index:5;background:var(--paper)}
#field{position:fixed;inset:0;z-index:1;pointer-events:none}
.blob{position:fixed;border-radius:50%;filter:blur(90px);opacity:.42;z-index:0;pointer-events:none}
.b1{width:46vw;height:46vw;left:-14vw;top:-8vw;background:#ffd9c4}
.b2{width:40vw;height:40vw;right:-12vw;top:34vh;background:#cfe0ff}
.b3{width:38vw;height:38vw;left:22vw;bottom:-14vw;background:#d5f0e3}
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--coral);z-index:500}
.flash{position:fixed;inset:0;z-index:390;pointer-events:none;opacity:0;
 background:radial-gradient(circle at 50% 48%,#fff 0%,#ffe9dc 45%,#ffd0b8 100%)}
@media(max-width:700px){.blob{filter:blur(50px)}}

.scene{position:relative;z-index:5}
#sA{height:360vh;height:360svh}
#sB{height:320vh;height:320svh}
#sC{height:360vh;height:360svh}
#sD{height:340vh;height:340svh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
 perspective:1300px;perspective-origin:50% 48%}
.rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.word{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);z-index:2;
 pointer-events:none;will-change:transform,opacity}
.word .giant{font-family:var(--disp);font-weight:600;line-height:.9;letter-spacing:-.04em;
 font-size:clamp(38px,8vw,110px)}
.word .giant i{font-style:italic;font-weight:400;color:var(--coral-ink)}
.tagL{position:absolute;left:var(--pad);bottom:26px;z-index:6}
.tagR{position:absolute;right:var(--pad);bottom:26px;z-index:6;font-family:var(--mono);
 font-size:10px;letter-spacing:.2em;color:var(--soft)}
@media(max-width:820px),(max-height:560px){
  .word{top:84px;transform:none}
  .word .giant{font-size:clamp(28px,7.5vw,48px)}
}

/* ---------- ACT 1 — the camera ---------- */
.cam-rig{position:absolute;left:0;top:0}
.cam-photo{position:absolute;left:50%;top:50%;width:440px;max-width:none;
 transform:translate(-50%,-50%);filter:drop-shadow(0 40px 55px rgba(21,18,14,.4));display:block}
.rec{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;
 background:var(--coral);box-shadow:0 0 14px var(--coral);margin-left:145px;margin-top:-112px}
.hud{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0}
.hud .br{position:absolute;width:30px;height:30px;border:1.5px solid rgba(21,18,14,.5)}
.hud .tl{top:11vh;left:8vw;border-right:0;border-bottom:0}
.hud .tr{top:11vh;right:8vw;border-left:0;border-bottom:0}
.hud .bl{bottom:11vh;left:8vw;border-right:0;border-top:0}
.hud .brr{bottom:11vh;right:8vw;border-left:0;border-top:0}
.focus{position:absolute;left:50%;top:50%;width:min(190px,46vw);aspect-ratio:1;
 border:1.5px solid var(--coral)}
.readout{position:absolute;left:50%;bottom:12vh;transform:translateX(-50%);display:flex;gap:20px;
 font-family:var(--mono);font-size:11px;letter-spacing:.12em;white-space:nowrap}
.readout u{text-decoration:none;color:var(--coral-ink)}
.blade{position:absolute;left:0;width:100%;height:52%;background:var(--ink);z-index:8;will-change:transform}
.blade.t{top:0;transform:translateY(-100%)}
.blade.b{bottom:0;transform:translateY(100%)}

/* ---------- ACT 2 — the edit ---------- */
.shot{position:absolute;left:50%;top:50%;width:400px;height:505px;transform-style:preserve-3d;
 background:var(--paper2);overflow:hidden;border-radius:6px;
 box-shadow:0 50px 110px rgba(21,18,14,.3);will-change:transform,opacity}
.ph{position:absolute;inset:0;background-size:cover;background-position:center}
.shot .cap{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:9px;
 letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88);z-index:4;
 text-shadow:0 1px 6px rgba(0,0,0,.5)}
.divider{position:absolute;top:0;bottom:0;width:2px;background:#fff;z-index:5;
 box-shadow:0 0 16px rgba(0,0,0,.35)}
.divider::after{content:'';position:absolute;left:50%;top:50%;width:24px;height:24px;
 transform:translate(-50%,-50%) rotate(45deg);border:2px solid #fff;background:var(--coral)}
.panel{position:absolute;left:50%;top:50%;background:rgba(255,253,249,.95);border:1px solid var(--hair);
 border-radius:10px;padding:13px 15px;box-shadow:0 26px 60px rgba(21,18,14,.16);
 will-change:transform,opacity}
.panel h5{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--soft);font-weight:400;margin-bottom:9px}
.slider{width:140px;height:3px;background:rgba(21,18,14,.14);position:relative;margin-bottom:11px;border-radius:2px}
.slider i{position:absolute;left:0;top:0;height:100%;background:var(--coral);border-radius:2px}
.slider u{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:var(--ink);
 transform:translate(-50%,-50%);text-decoration:none}
.histo{display:flex;align-items:flex-end;gap:2px;height:52px;width:150px}
.histo b{flex:1;background:linear-gradient(180deg,var(--ink),rgba(21,18,14,.25));border-radius:1px;font-weight:400}

/* ---------- ACT 3 — publish ---------- */
.box{position:absolute;left:0;top:0;transform-style:preserve-3d}
.f{position:absolute;left:50%;top:50%;transform-style:preserve-3d;backface-visibility:hidden}
.phone{filter:drop-shadow(0 40px 60px rgba(21,18,14,.26))}
.phone .front{width:224px;height:466px;border-radius:30px;transform:translate(-50%,-50%) translateZ(11px);
 background:linear-gradient(160deg,#3d3d46,#141419);padding:9px}
.phone .back{width:224px;height:466px;border-radius:30px;background:#17171c;
 transform:translate(-50%,-50%) rotateY(180deg) translateZ(11px)}
.phone .side{width:22px;height:466px;background:linear-gradient(180deg,#3a3a43,#16161b)}
.phone .rt{transform:translate(-50%,-50%) rotateY(90deg) translateZ(112px)}
.phone .lf{transform:translate(-50%,-50%) rotateY(-90deg) translateZ(112px)}
.screen{position:absolute;inset:9px;border-radius:23px;background:#fff;overflow:hidden;
 display:flex;flex-direction:column;color:var(--ink)}
.igbar{display:flex;align-items:center;gap:7px;padding:9px 10px;border-bottom:1px solid rgba(21,18,14,.09)}
.igbar .av{width:20px;height:20px;border-radius:50%;
 background:conic-gradient(from 0deg,var(--coral),#dd9b1f,#c03c78,var(--coral))}
.igbar .nm{font-size:9.5px;font-weight:600}
.igbar .dots{margin-left:auto;font-size:11px;letter-spacing:2px;color:var(--soft)}
.igimg{height:224px;position:relative;overflow:hidden;opacity:0;will-change:opacity}
.igact{display:flex;gap:11px;padding:9px 10px 3px}
.igact i{display:block;width:15px;height:15px;border:1.6px solid var(--ink);border-radius:3px}
.igact i.h{border-radius:50% 50% 4px 50%;transform:rotate(45deg);border-color:var(--coral);
 background:var(--coral);opacity:0;transition:opacity .4s}
.igact i.h.on{opacity:1}
.igcap{padding:6px 10px;font-size:9px;line-height:1.45;color:var(--soft)}
.laptop{transform-style:preserve-3d;filter:drop-shadow(0 40px 60px rgba(21,18,14,.22))}
.lbase{position:absolute;left:50%;top:50%;width:490px;height:310px;
 transform:translate(-50%,-50%) rotateX(90deg);background:linear-gradient(180deg,#dcd6cc,#a9a49b);border-radius:10px}
.lscreen{position:absolute;left:50%;top:50%;width:490px;height:310px;transform-origin:50% 100%;
 transform:translate(-50%,-100%) translateY(-155px) rotateX(-8deg);
 background:#fff;border:9px solid #23232a;border-radius:12px;overflow:hidden}
.site{position:absolute;inset:0;display:flex;flex-direction:column;color:var(--ink)}
.snav{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid rgba(21,18,14,.1);
 font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.snav b{font-family:var(--disp);font-size:12px;font-weight:600}
.snav .sp{margin-left:auto;display:flex;gap:9px}
.shero{flex:1;position:relative;overflow:hidden;opacity:0;will-change:opacity}
.shero .txt{position:absolute;left:16px;bottom:14px;z-index:3;font-family:var(--disp);font-weight:600;
 font-size:24px;line-height:.96;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.shero .txt i{font-style:italic;font-weight:400}

/* ---------- ACT 4 — the system (DEVELOP) ---------- */
.dash{position:absolute;left:50%;top:50%;width:640px;height:400px;transform-style:preserve-3d;
 background:#14131a;border:1px solid rgba(247,243,236,.14);border-radius:14px;overflow:hidden;
 display:flex;box-shadow:0 50px 100px rgba(21,18,14,.4);will-change:transform,opacity}
.dside{width:82px;flex:none;background:rgba(255,255,255,.04);border-right:1px solid rgba(247,243,236,.09);
 padding:16px 12px;display:flex;flex-direction:column;gap:9px}
.dside i{height:9px;border-radius:3px;background:rgba(247,243,236,.16);opacity:0;will-change:opacity,transform}
.dside i:first-child{background:var(--develop);opacity:1}
.dmain{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.dtop{display:flex;gap:10px;align-items:center}
.dtop b{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
 color:rgba(247,243,236,.55);font-weight:400}
.dtop u{margin-left:auto;width:54px;height:20px;border-radius:100px;background:var(--develop);
 text-decoration:none;opacity:0;will-change:opacity}
.dtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dtile{background:rgba(255,255,255,.05);border:1px solid rgba(247,243,236,.08);border-radius:8px;
 padding:11px;opacity:0;transform:translateY(12px);will-change:opacity,transform}
.dtile s{display:block;width:34px;height:6px;border-radius:3px;background:rgba(247,243,236,.22);
 text-decoration:none;margin-bottom:9px}
.dtile em{display:block;width:60%;height:13px;border-radius:4px;background:var(--c,var(--develop));font-style:normal}
.dchart{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(247,243,236,.08);border-radius:8px;
 position:relative;overflow:hidden;min-height:96px}
.dchart svg{position:absolute;inset:0;width:100%;height:100%}
.dchart path{fill:none;stroke:var(--develop);stroke-width:2.4;stroke-linecap:round;
 stroke-dasharray:1000;stroke-dashoffset:1000}
.drows{display:flex;flex-direction:column;gap:7px}
.drow{height:11px;border-radius:4px;background:rgba(247,243,236,.11);opacity:0;
 transform:translateX(-14px);will-change:opacity,transform}
@media(max-width:820px){
  .dash{width:340px;height:430px;flex-direction:column}
  .dside{width:auto;flex-direction:row;border-right:0;border-bottom:1px solid rgba(247,243,236,.09);padding:12px}
  .dside i{width:34px;height:8px}
  .dtiles{grid-template-columns:1fr 1fr}
  .dtiles .dtile:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .film .scene{height:auto!important}
  .film .stage{position:relative;height:auto;min-height:60vh;padding-block:48px}
  .flash,#field{display:none!important}
}