/* ---------- la scena viva ---------- */
.s3{position:fixed;inset:0;z-index:80;background:#02070d;color:#fff;overflow:hidden;
  clip-path:circle(0px at var(--ox,50%) var(--oy,50%));transition:clip-path 1.05s cubic-bezier(.76,0,.18,1)}
.s3[hidden]{display:none!important}
.s3.in{clip-path:circle(160vmax at var(--ox,50%) var(--oy,50%))}
.s3.out{clip-path:circle(0px at var(--ox,50%) var(--oy,50%));transition-duration:.75s;transition-timing-function:cubic-bezier(.7,0,.3,1)}
.s3-cv,.s3-film{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.s3-cv{touch-action:none}
.s3-film{object-fit:cover;opacity:0;transition:opacity 1s var(--ease);pointer-events:none}
.s3.film-on .s3-film{opacity:1}
.s3-shade{position:absolute;inset:0;pointer-events:none;transition:opacity .9s var(--ease);
  background:linear-gradient(to top,rgba(3,10,18,.86) 0%,rgba(3,10,18,.5) 30%,rgba(3,10,18,0) 56%),linear-gradient(to bottom,rgba(3,10,18,.38),rgba(3,10,18,0) 16%)}
.s3.filming .s3-shade{opacity:.25}
.s3-bars::before,.s3-bars::after{content:"";position:absolute;left:0;right:0;height:0;background:#000;transition:height 1s var(--ease);z-index:2}
.s3-bars::before{top:0}.s3-bars::after{bottom:0}
.s3.filming .s3-bars::before,.s3.filming .s3-bars::after{height:7.5vh}
.s3-copy{position:absolute;left:clamp(20px,6vw,80px);right:clamp(20px,6vw,80px);bottom:clamp(26px,8vh,84px);max-width:640px;z-index:3;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.s3.filming .s3-copy{opacity:0;transform:translateY(24px);pointer-events:none}
.s3-eye{margin:0 0 14px;font:500 clamp(.72rem,.9vw,.8rem) var(--f-mono);letter-spacing:.32em;text-transform:uppercase;color:#f0cf8c;text-shadow:0 1px 12px rgba(0,0,0,.7);opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.s3-title{font-family:var(--f-display);font-weight:400;font-size:clamp(3.1rem,10.5vw,7.6rem);line-height:.94;letter-spacing:.005em;margin:0;text-shadow:0 6px 40px rgba(0,0,0,.35)}
.s3-title .w{display:inline-block;white-space:nowrap;font-weight:inherit}
.s3-title span{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(8px);transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease)}
.s3-text{margin:18px 0 0;text-shadow:0 1px 14px rgba(0,0,0,.55);max-width:46ch;font-size:clamp(.98rem,1.4vw,1.12rem);line-height:1.55;color:rgba(255,255,255,.88);opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease) .55s,transform .9s var(--ease) .55s}
.s3-meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;opacity:0;transition:opacity .9s var(--ease) .7s}
.s3-meta:empty{display:none}
.s3-meta span{font:500 .68rem var(--f-mono);letter-spacing:.08em;padding:6px 11px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.s3-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease) .82s,transform .9s var(--ease) .82s}
.s3.copy .s3-eye,.s3.copy .s3-text,.s3.copy .s3-acts,.s3.copy .s3-meta{opacity:1;transform:none}
.s3.copy .s3-title span{opacity:1;transform:none;filter:none}
.s3-btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font:500 .92rem var(--f-body);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.s3-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.7)}
.s3-btn.play{background:var(--gold);border-color:var(--gold);color:#13202c;font-weight:600}
.s3-btn.play:hover{background:#e7c886;transform:translateY(-1px)}
.s3-btn.play i{width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.s3-x{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;z-index:5;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(3,10,18,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;opacity:0;transition:opacity .6s var(--ease) .5s,background .3s}
.s3.in .s3-x{opacity:1}.s3.out .s3-x{opacity:0;transition-delay:0s}
.s3-x:hover{background:rgba(3,10,18,.6)}
.s3-x span,.s3-x span::after{position:absolute;left:14px;top:23px;width:20px;height:1.5px;background:#fff;transform:rotate(45deg);content:""}
.s3-x span::after{left:0;top:0;transform:rotate(90deg)}
.s3-hint{position:absolute;top:max(28px,calc(env(safe-area-inset-top) + 12px));left:50%;transform:translate(-50%,-8px);margin:0;z-index:4;font:500 .66rem var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);padding:8px 14px;border-radius:999px;background:rgba(3,10,18,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity 1s var(--ease),transform 1s var(--ease);white-space:nowrap}
.s3.hint .s3-hint{opacity:1;transform:translate(-50%,0)}
.s3-credit{position:absolute;left:16px;bottom:calc(7.5vh + 14px);margin:0;z-index:3;font:500 .6rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);opacity:0;transition:opacity .8s}
.s3.film-on .s3-credit{opacity:1}
.s3-skip{position:absolute;right:16px;bottom:calc(7.5vh + 12px);z-index:4;font:500 .82rem var(--f-body);color:#fff;background:rgba(3,10,18,.5);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 18px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s}
.s3.filming .s3-skip{opacity:1;pointer-events:auto}
html.s3-open,html.s3-open body{overflow:hidden}
@media (max-width:640px){
  .s3-hint{left:16px;right:76px;transform:translate(0,-8px);text-align:center;white-space:normal;top:max(20px,calc(env(safe-area-inset-top) + 8px));padding:10px 12px;font-size:.6rem;letter-spacing:.18em}
  .s3.hint .s3-hint{transform:none}
  .s3-copy{bottom:max(26px,calc(env(safe-area-inset-bottom) + 18px))}
  .s3-text{font-size:.97rem}
  .s3-btn{min-height:44px;padding:0 16px;font-size:.88rem}
  .s3-acts{gap:8px}
}
@media (prefers-reduced-motion:reduce){.s3,.s3 *{transition-duration:.01ms!important;transition-delay:0s!important}}