/* ==========================================================================
   Galeria — sala de exibição: abertura em tela cheia, mosaico e visualizador de cinema
   ========================================================================== */
.gl{background:#050608}
.gl-hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.gl-hero .sl i{position:absolute;inset:-3%;background-size:cover;background-position:center;opacity:0;animation:glFade 36s infinite}
.gl-hero .sl i:nth-child(1){animation-delay:-1s}.gl-hero .sl i:nth-child(2){animation-delay:5s}.gl-hero .sl i:nth-child(3){animation-delay:11s}
.gl-hero .sl i:nth-child(4){animation-delay:17s}.gl-hero .sl i:nth-child(5){animation-delay:23s}.gl-hero .sl i:nth-child(6){animation-delay:29s}
@keyframes glFade{0%{opacity:0;transform:scale(1.02)}4%{opacity:1}17%{opacity:1}21%{opacity:0;transform:scale(1.13) translate3d(-1%,-.6%,0)}100%{opacity:0}}
.gl-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,6,8,.55),rgba(5,6,8,.05) 30%,rgba(5,6,8,.25) 60%,#050608),radial-gradient(ellipse 70% 60% at 20% 85%,rgba(5,6,8,.7),transparent 70%)}
.gl-hero .in{position:relative;z-index:2;width:100%;padding-bottom:clamp(70px,11vh,130px)}
.gl-hero h1{font-family:var(--ff-display);font-weight:400;font-size:clamp(70px,12vw,200px);line-height:.85;color:#f7f1e3;margin:18px 0 22px;letter-spacing:-.02em}
.gl-hero h1 em{font-style:italic;color:var(--ouro-claro)}
.gl-hero .lead{max-width:52ch;color:rgba(239,233,219,.86)}
.gl-hero .cnt{display:flex;gap:34px;flex-wrap:wrap;margin-top:30px}
.gl-hero .cnt b{display:block;font-family:var(--ff-display);font-weight:400;font-size:clamp(32px,3.6vw,50px);color:var(--ouro-claro);line-height:1}
.gl-hero .cnt span{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--texto-mute)}
.gl-cue{position:absolute;z-index:2;left:50%;bottom:24px;transform:translateX(-50%);width:1px;height:56px;background:linear-gradient(rgba(255,255,255,.6),transparent);animation:glCue 2.4s ease-in-out infinite}
@keyframes glCue{0%{transform:translateX(-50%) scaleY(0);transform-origin:top}50%{transform:translateX(-50%) scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:translateX(-50%) scaleY(0);transform-origin:bottom}}

/* filtros */
.gl-bar{position:sticky;top:64px;z-index:20;background:rgba(5,6,8,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linha-sutil)}
.gl-bar .wrap{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-top:14px;padding-bottom:14px}
.gl-bar .wrap::-webkit-scrollbar{display:none}
.gl-bar button{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--linha-sutil);background:none;color:var(--texto-dim);font-size:12.5px;letter-spacing:.06em;cursor:pointer;transition:.35s}
.gl-bar button span{font-size:11px;color:var(--texto-mute)}
.gl-bar button:hover{border-color:var(--linha);color:#fff}
.gl-bar button[aria-pressed="true"]{border-color:var(--ouro);color:#fff;background:rgba(201,162,75,.1)}
.gl-bar button[aria-pressed="true"] span{color:var(--ouro-claro)}
.gl-bar .play{margin-left:auto;border-color:rgba(232,199,122,.45);color:var(--ouro-claro)}

/* mosaico */
.gl-wall{padding:clamp(30px,4vw,50px) 0 clamp(80px,9vw,130px)}
.gl-grid{columns:4 280px;column-gap:14px}
.gl-it{position:relative;display:block;width:100%;color:inherit;text-decoration:none;margin:0 0 14px;padding:0;border:0;background:#0b0e15;cursor:zoom-in;overflow:hidden;break-inside:avoid;opacity:0;transform:translateY(24px) scale(.98);transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.gl-it.in{opacity:1;transform:none}
.gl-it[hidden]{display:none}
.gl-it img{display:block;width:100%;height:auto;filter:brightness(.9) saturate(.95);transition:transform 1.4s cubic-bezier(.16,1,.3,1),filter .8s}
.gl-it:hover img{transform:scale(1.06);filter:brightness(1.04) saturate(1.05)}
.gl-it::before{content:"";position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 0 0 rgba(232,199,122,0);transition:box-shadow .5s}
.gl-it:hover::before{box-shadow:inset 0 0 0 1px rgba(232,199,122,.7)}
.gl-it figcaption,.gl-it .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 16px 14px;text-align:left;background:linear-gradient(0deg,rgba(5,6,8,.85),transparent);color:#fff;font-size:13px;line-height:1.4;transform:translateY(100%);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.gl-it:hover .cap,.gl-it:focus-visible .cap{transform:none}
.gl-it .cap small{display:block;margin-bottom:4px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ouro-claro)}

/* visualizador de cinema */
.gv{position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);background:#030405;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.gv.on{opacity:1;visibility:visible;transition:opacity .6s}
.gv .amb{position:absolute;inset:-10%;background-size:cover;background-position:center;filter:blur(70px) saturate(1.3) brightness(.4);transform:scale(1.1);transition:background-image .8s,opacity .8s;opacity:.85;pointer-events:none}
.gv-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px clamp(16px,3vw,32px)}
.gv-top .ct{font-family:var(--ff-display);font-size:16px;color:#efe9db;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.gv-top .ct b{color:var(--ouro-claro);font-weight:400}
.gv-top .bt{display:flex;gap:8px}
.gv button.ic{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);background:rgba(8,10,16,.5);backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:.3s}
.gv button.ic:hover{border-color:var(--ouro);color:var(--ouro-claro)}
.gv button.ic svg{width:20px;height:20px}
.gv button.ic[aria-pressed="true"]{border-color:var(--ouro);color:var(--ouro-claro)}
.gv-stage{position:relative;z-index:1;display:grid;place-items:center;overflow:hidden;touch-action:pan-y}
.gv-stage img{position:absolute;max-width:min(92vw,1800px);max-height:calc(100% - 20px);object-fit:contain;box-shadow:0 40px 120px rgba(0,0,0,.7);opacity:0;transform:scale(.97);transition:opacity .7s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.gv-stage img.on{opacity:1;transform:none}
.gv.kb .gv-stage img.on{animation:gvKen 5.6s ease-out forwards}
@keyframes gvKen{from{transform:scale(1)}to{transform:scale(1.06)}}
.gv-stage .nv{position:absolute;top:50%;z-index:3;width:60px;height:60px;margin-top:-30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(8,10,16,.45);backdrop-filter:blur(10px);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.3s}
.gv-stage .nv:hover{border-color:var(--ouro);color:var(--ouro-claro);transform:scale(1.06)}
.gv-stage .nv svg{width:24px;height:24px}
.gv-stage .pv{left:clamp(10px,2.5vw,32px)}.gv-stage .nx{right:clamp(10px,2.5vw,32px)}
.gv-bot{position:relative;z-index:2;padding:12px 0 18px}
.gv-cap{text-align:center;padding:0 20px 14px;min-height:46px}
.gv-cap small{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ouro-claro)}
.gv-cap b{display:block;margin-top:6px;font-family:var(--ff-display);font-weight:400;font-size:clamp(18px,2vw,24px);color:#f7f1e3}
.gv-film{display:flex;gap:8px;overflow-x:auto;padding:4px clamp(16px,3vw,32px);scrollbar-width:none;scroll-behavior:smooth}
.gv-film::-webkit-scrollbar{display:none}
.gv-film button{flex:none;width:84px;height:56px;padding:0;border:0;background:#0b0e15;cursor:pointer;opacity:.4;transition:opacity .4s,box-shadow .4s;overflow:hidden}
.gv-film button img{width:100%;height:100%;object-fit:cover}
.gv-film button:hover{opacity:.8}
.gv-film button.on{opacity:1;box-shadow:0 0 0 2px var(--ouro)}
.gv-prog{position:absolute;left:0;top:0;height:2px;width:0;background:var(--ouro)}
.gv.kb .gv-prog{animation:gvProg 5.6s linear}
@keyframes gvProg{to{width:100%}}
@media (max-width:760px){
  .gl-grid{columns:2 150px;column-gap:8px}
  .gl-it{margin-bottom:8px}
  .gl-it .cap{display:none}
  .gv-stage .nv{display:none}
  .gv-stage img{max-width:100vw}
  .gv-film button{width:64px;height:44px}
  .gl-bar{top:58px}
}
@media (prefers-reduced-motion:reduce){ .gl-hero .sl i{animation:none}.gl-hero .sl i:first-child{opacity:1}.gl-it{opacity:1;transform:none} }
