/* Corredor HENRICASTA
   Layout: corredor 3D fixo em CSS; a rolagem da página move a câmera pra frente,
   cartazes pendurados nas duas paredes. */
:root{
  --void:#07070a;        /* preto do corredor */
  --wall:#14110f;        /* parede marrom-escura */
  --carpet:#3a0f12;      /* carpete vermelho de cinema */
  --brass:#d8b26a;       /* latão das molduras / lâmpadas da marquise */
  --paper:#efe9df;       /* texto da ficha */
  --dim:#8d857a;         /* texto secundário */
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
html,body{background:var(--void);color:var(--paper)}
body{margin:0;font-family:var(--mono);overflow-x:hidden}
#spacer{height:520vh}
#stage{position:fixed;inset:0;perspective:760px;perspective-origin:50% 46%;overflow:hidden;background:var(--void)}
#world{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform}
#world > *{position:absolute;left:0;top:0;transform-style:preserve-3d;backface-visibility:hidden}

.wall{background:
   linear-gradient(to bottom, rgba(0,0,0,.65), transparent 18%, transparent 78%, rgba(0,0,0,.7)),
   repeating-linear-gradient(90deg, var(--wall) 0 118px, #0f0d0c 118px 120px);
}
.wall::after{content:"";position:absolute;left:0;right:0;bottom:16%;height:3px;background:linear-gradient(90deg,transparent,rgba(216,178,106,.35),transparent);background-size:420px 100%}
.floor{background:
   radial-gradient(circle at 50% 50%, rgba(216,178,106,.10) 0 2px, transparent 3px) 0 0/36px 36px,
   linear-gradient(90deg, rgba(0,0,0,.6), transparent 20%, transparent 80%, rgba(0,0,0,.6)),
   var(--carpet)}
.ceil{background:
   repeating-linear-gradient(0deg, transparent 0 300px, rgba(255,236,200,.85) 300px 312px, transparent 312px 420px),
   linear-gradient(90deg,#050505,#0d0c0b 30%,#0d0c0b 70%,#050505)}
.ceil::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 46%,rgba(255,236,200,.05) 50%,transparent 54%)}

/* parede do fundo */
.endwall{display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at 50% 40%,#2a1d14 0,#0b0908 70%)}
.marquee{border:2px solid var(--brass);padding:28px 54px 30px;position:relative;box-shadow:0 0 60px rgba(216,178,106,.25),inset 0 0 40px rgba(216,178,106,.12)}
.marquee::before{content:"";position:absolute;inset:-10px;border-radius:2px;background:radial-gradient(circle,var(--brass) 0 2.5px,transparent 3.5px) 0 0/22px 22px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:8px;opacity:.9;animation:bulbs 1.6s steps(2) infinite}
@keyframes bulbs{50%{opacity:.45}}
.marquee small{display:block;font:500 13px/1 var(--mono);letter-spacing:.4em;color:var(--brass);margin-bottom:14px}
.marquee b{display:block;font:900 92px/.86 var(--display);letter-spacing:.02em;color:var(--paper)}
.marquee span{display:block;font:italic 400 22px/1.2 var(--serif);color:var(--brass);margin-top:12px}

/* cartazes */
.poster{width:220px;height:330px;margin:-165px 0 0 -110px;cursor:pointer;transition:filter .5s}
.poster .glow{position:absolute;inset:-90px -70px -60px;background:radial-gradient(ellipse at 50% 18%,rgba(255,230,180,.22),transparent 62%);transform:translateZ(-1px);pointer-events:none;transition:opacity .4s}
.poster .frame{position:absolute;inset:0;padding:9px;background:linear-gradient(135deg,#6b5530,var(--brass) 30%,#5a4527 60%,#c9a35c);box-shadow:0 18px 40px rgba(0,0,0,.7)}
.poster .sheet{position:relative;width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;padding:14px 12px 10px;background:#0b0a09;color:var(--paper)}
.poster .screen{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.poster .screen{overflow:hidden}
.poster .screen iframe{position:absolute;top:0;left:50%;height:100%;width:267%;transform:translateX(-50%);border:0;pointer-events:none}
.poster .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.poster .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 22%,transparent 45%,rgba(0,0,0,.85))}
.poster .art{position:absolute;inset:0;background:#111 center/cover no-repeat}
.poster .top{position:relative;font:500 8.5px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.poster h3{position:relative;margin:auto 0 0;font:900 40px/.86 var(--display);letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
.poster .tag{position:relative;font:italic 400 14px/1.2 var(--serif);margin:6px 0 10px;color:var(--brass)}
.poster .billing{position:relative;font:500 5.6px/1.5 var(--display);letter-spacing:.12em;text-transform:uppercase;opacity:.8;border-top:1px solid currentColor;padding-top:6px}
.poster .billing em{font-style:normal;font-weight:800;font-size:7px}
.poster .rec{position:absolute;top:10px;right:10px;font:500 8px var(--mono);letter-spacing:.1em;color:#fff;opacity:0;transition:opacity .3s;display:flex;gap:5px;align-items:center;z-index:2}
.poster .rec i{width:6px;height:6px;border-radius:50%;background:#e33;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.poster.live .screen,.poster.live .rec{opacity:1}
.poster.live .art{opacity:0}
.poster.live .glow{opacity:1.8}
.poster.live .frame{box-shadow:0 0 50px rgba(255,220,160,.45),0 18px 40px rgba(0,0,0,.7)}
.poster.off{filter:brightness(.18) saturate(.3)}
.poster.off .glow{opacity:0}

/* névoa no ponto de fuga */
#fog{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 34% 30% at 50% 46%,rgba(7,7,10,.92),rgba(7,7,10,.5) 45%,transparent 100%);transition:opacity .2s}
#vign{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75))}

/* interface */
header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;
  padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(to bottom,rgba(7,7,10,.85),transparent)}
.brand{font:800 22px/1 var(--display);letter-spacing:.12em}
.brand span{display:block;font:400 9.5px/1.4 var(--mono);letter-spacing:.24em;color:var(--dim);margin-top:4px}
nav{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid rgba(216,178,106,.35);border-radius:999px;background:rgba(10,9,8,.7)}
nav button{all:unset;cursor:pointer;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border-radius:999px;color:var(--dim);display:flex;gap:6px;align-items:baseline}
nav button sup{font-size:8px;color:var(--brass)}
nav button[aria-pressed="true"]{background:var(--brass);color:#120e08}
nav button[aria-pressed="true"] sup{color:#120e08}
nav button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
footer{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));padding-top:20px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  font:400 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:linear-gradient(to top,rgba(7,7,10,.85),transparent)}
#hint b{color:var(--paper);font-weight:500}
.meter{display:flex;align-items:center;gap:10px}
.meter div{width:120px;height:2px;background:rgba(239,233,223,.15)}
.meter div i{display:block;height:100%;width:0;background:var(--brass)}
.note{color:var(--brass)}

/* cartaz aberto + ficha técnica */
#detail{position:fixed;inset:0;z-index:40;display:grid;place-items:center;overflow-y:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:70px 40px;
  background:rgba(5,5,7,0);transition:background .5s;pointer-events:none}
#detail.open{background:rgba(5,5,7,.88);pointer-events:auto}
.dwrap{display:flex;gap:28px;align-items:stretch;flex-wrap:wrap;justify-content:center;max-width:980px;width:100%}
#big{flex:0 0 auto;width:min(340px,80vw);aspect-ratio:2/3;max-width:100%;position:relative}
#big .poster{position:absolute;inset:0;width:100%;height:100%;margin:0;transform-origin:top left;cursor:default}
#big .poster .sheet{padding:22px 18px 14px}
#big .poster h3{font-size:clamp(44px,12vw,62px)}
#big .poster .tag{font-size:20px}
#big .poster .top{font-size:11px}
#big .poster .billing{font-size:8.5px}
#big .poster .billing em{font-size:10px}
.ficha{flex:1 1 320px;min-width:0;max-width:520px;border:1px solid rgba(216,178,106,.4);background:rgba(16,14,12,.92);padding:22px 22px 18px;opacity:0;transform:translateX(24px);transition:opacity .45s .25s,transform .45s .25s;display:flex;flex-direction:column;gap:16px}
#detail.open .ficha{opacity:1;transform:none}
.fhead{display:flex;justify-content:space-between;gap:10px;font:500 10px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);border-bottom:1px solid rgba(216,178,106,.3);padding-bottom:10px}
.ficha h2{margin:0;font:900 clamp(44px,8vw,64px)/.85 var(--display);text-transform:uppercase;text-wrap:balance}
.ficha .lede{margin:-6px 0 0;font:italic 400 18px/1.35 var(--serif);color:var(--dim);max-width:44ch}
dl{display:grid;grid-template-columns:auto 1fr;margin:0;font-size:12px}
dl dt,dl dd{padding:9px 0;border-bottom:1px dashed rgba(239,233,223,.14);margin:0}
dl dt{color:var(--dim);letter-spacing:.16em;text-transform:uppercase;font-size:10px;padding-right:18px}
dl dd{text-align:right;font-variant-numeric:tabular-nums}
dd.tbd{color:rgba(239,233,223,.35)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.actions button{all:unset;cursor:pointer;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:13px 16px;border:1px solid var(--brass);color:var(--brass)}
.actions button.primary{background:var(--brass);color:#120e08}
.actions button:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.src{font-size:9.5px;letter-spacing:.12em;color:rgba(239,233,223,.35);text-transform:uppercase;line-height:1.6}
#toast{position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:var(--brass);color:#120e08;font:500 11px var(--mono);letter-spacing:.1em;padding:10px 14px;opacity:0;transition:opacity .3s;pointer-events:none;max-width:calc(100vw - 32px)}
#toast.show{opacity:1}
#gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
#gallery[hidden]{display:none}
#gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border:1px solid rgba(216,178,106,.25)}
#gallery a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@media (max-width:600px){
  .brand{font-size:18px}
  nav button{padding:7px 9px;font-size:9.5px}
  .meter div{width:70px}
  #hint{max-width:60vw}
}
@media (prefers-reduced-motion:reduce){
  .marquee::before,.poster .rec i{animation:none}
}