/* UNCLUB · página viva (fotos, vídeo, galeria, pratos e drinks). Dados em assets/fotos/fotos.js */

/* ---- topo: fotos da pista atrás do texto ---- */
.hero__fundo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__fundo-f{position:absolute;inset:-4%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease;transform:scale(1.04)}
.hero__fundo-f.is-on{opacity:.55;animation:fundoZoom 14s ease-out both}
.hero__fundo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 38%,color-mix(in srgb,var(--bg) 55%,transparent) 100%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 40%,transparent) 0%,transparent 40%,var(--bg) 100%)}
:root[data-theme="light"] .hero__fundo-f.is-on{opacity:.32}
.hero > .wrap{position:relative;z-index:1}
@keyframes fundoZoom{from{transform:scale(1.04)}to{transform:scale(1.12)}}
@media (max-width:860px){
  .hero__fundo::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 62%,transparent) 0%,color-mix(in srgb,var(--bg) 84%,transparent) 55%,var(--bg) 100%)}
}

/* ---- como é a noite ---- */
.noite{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.noite__video{position:relative;aspect-ratio:9/16;background:var(--card);border:1px solid var(--line);overflow:hidden}
.noite__video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.noite__play{position:absolute;inset:auto 16px 16px auto;z-index:2}
.noite__txt{display:flex;flex-direction:column;gap:18px;min-width:0}
.noite__lista{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--gold)}
.noite__lista li{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.noite__lista b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.15}
.noite__lista span{font-size:14px;color:var(--ink-2);line-height:1.45}
.noite__fotos{display:flex;gap:12px;margin-top:6px}
.noite__foto{flex:1 1 0;min-width:0;aspect-ratio:4/3;padding:0;border:1px solid var(--line);background:var(--card);overflow:hidden;cursor:zoom-in}
.noite__foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.noite__foto:hover img{transform:scale(1.05)}
@media (max-width:760px){
  .noite{grid-template-columns:1fr}
  .noite__video{width:min(100%,320px);justify-self:center}
  .noite__lista{grid-template-columns:1fr}
}

/* ---- as noites: galeria ---- */
.gal__head{display:flex;flex-direction:column;gap:16px}
.gal__chips{display:flex;flex-wrap:wrap;gap:8px}
.gal__chip{font-family:var(--label);font-size:14px;padding:9px 14px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-2);background:transparent;cursor:pointer;min-height:40px}
.gal__chip:hover{border-color:var(--gold);color:var(--gold-ink)}
.gal__chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--cta-fg)}
.gal__trilhos{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.gal__faixa{display:flex;overflow:hidden;--h:clamp(170px,22vw,260px)}
.gal__trilho{display:flex;gap:12px;padding-right:12px;flex-shrink:0;animation:galAnda var(--dur,60s) linear infinite}
.gal__faixa--b .gal__trilho{animation-direction:reverse}
.gal__faixa:hover .gal__trilho,.gal__faixa:focus-within .gal__trilho{animation-play-state:paused}
@keyframes galAnda{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.gal__f{position:relative;height:var(--h);aspect-ratio:var(--r);flex-shrink:0;padding:0;border:0;background:var(--card);overflow:hidden;cursor:zoom-in}
.gal__f img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gal__f:hover img{transform:scale(1.05)}
.gal__tag{position:absolute;left:10px;bottom:8px;font-size:12px;color:#efe6d6;text-shadow:0 1px 8px rgba(0,0,0,.8);opacity:0;transition:opacity .3s}
.gal__f:hover .gal__tag,.gal__f:focus-visible .gal__tag{opacity:1}
.gal__f:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){
  .gal__faixa{overflow-x:auto;scrollbar-width:thin}
  .gal__trilho{animation:none}
  .gal__trilho[aria-hidden="true"]{display:none}
}

/* ---- jantar: pratos e drinks ---- */
.pratos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,17vw,220px);gap:12px;margin-top:clamp(32px,5vw,48px)}
.prato{position:relative;padding:0;border:0;background:var(--card);overflow:hidden;cursor:zoom-in;text-align:left}
.prato--grande{grid-column:span 2;grid-row:span 2}
.prato img,.drink img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.prato:hover img,.drink:hover img{transform:scale(1.05)}
.prato::after,.drink::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.65) 100%);pointer-events:none}
.prato span,.drink span{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;font-family:var(--display);font-style:italic;font-size:18px;line-height:1.2;color:#f0d58a;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.prato--grande span{font-size:26px;left:20px;bottom:18px}
.prato:focus-visible,.drink:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.drinks{margin-top:clamp(40px,6vw,64px)}
.drinks__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.drinks__head h3{margin:0;font-style:italic;color:var(--gold);font-size:28px}
.drinks__head p{margin:0;font-size:14px;color:var(--mute)}
.drinks__fila{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px max(clamp(16px,4vw,40px),calc((100% - 1200px)/2 + 40px)) 12px;scroll-padding-inline:max(clamp(16px,4vw,40px),calc((100% - 1200px)/2 + 40px));scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.drink{position:relative;flex:0 0 clamp(180px,22vw,240px);aspect-ratio:4/5;padding:0;border:0;background:var(--card);overflow:hidden;scroll-snap-align:start;cursor:zoom-in}
@media (max-width:760px){
  .pratos{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}
  .prato span{font-size:15px;left:10px;bottom:8px}
  .prato--grande span{font-size:22px}
}

/* ---- novidades: artes (stories) ---- */
#artes{padding-bottom:clamp(24px,4vw,40px)}
.artes{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px max(clamp(16px,4vw,40px),calc((100% - 1200px)/2 + 40px)) 12px;scroll-padding-inline:max(clamp(16px,4vw,40px),calc((100% - 1200px)/2 + 40px));scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.arte{flex:0 0 clamp(170px,19vw,230px);aspect-ratio:9/16;padding:0;border:1px solid var(--line);background:var(--card);overflow:hidden;scroll-snap-align:start;cursor:zoom-in}
.arte img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.arte:hover img{transform:scale(1.03)}
.arte:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- tela cheia ---- */
.lb{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(8,7,6,.94);color:#efe6d6}
.lb::backdrop{background:rgba(8,7,6,.94)}
.lb__fig{margin:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 64px 20px}
.lb__fig img{max-width:100%;max-height:calc(100dvh - 120px);width:auto;height:auto;object-fit:contain}
.lb__fig figcaption{font-size:14px;color:#c3b8a6;text-align:center}
.lb__bt{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(240,213,138,.4);background:rgba(10,9,8,.6);color:#f0d58a;font-size:26px;line-height:1;display:grid;place-items:center;cursor:pointer}
.lb__bt:hover{background:#c89a3c;color:#0a0908}
.lb__x{top:12px;right:12px;font-size:20px}
.lb__ant{left:12px;top:50%;transform:translateY(-50%)}
.lb__prox{right:12px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){
  .lb__fig{padding:60px 8px 84px}
  .lb__ant,.lb__prox{top:auto;bottom:16px;transform:none}
  .lb__ant{left:calc(50% - 60px)}.lb__prox{right:calc(50% - 60px)}
}

/* ---- seções entram suaves ---- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero__fundo-f.is-on{animation:none}
  .hero__fundo-f{transition:none}
}
@media (max-width:760px){
  .gal__chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * clamp(16px,4vw,40px));padding-inline:clamp(16px,4vw,40px);scrollbar-width:none}
  .gal__chips::-webkit-scrollbar{display:none}
  .gal__chip{flex-shrink:0}
}

/* ---- fundo com foto nas seções ---- */
.tem-fundo{position:relative;isolation:isolate}
.sec__fundo{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:.5;pointer-events:none}
.sec__fundo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 22%,color-mix(in srgb,var(--bg) 45%,transparent) 60%,var(--bg) 100%),
  radial-gradient(ellipse at 50% 40%,transparent 0%,color-mix(in srgb,var(--bg) 50%,transparent) 100%)}
.section--alt.tem-fundo .sec__fundo::after{background:
  linear-gradient(180deg,var(--bg-2) 0%,color-mix(in srgb,var(--bg-2) 55%,transparent) 22%,color-mix(in srgb,var(--bg-2) 45%,transparent) 60%,var(--bg-2) 100%)}
:root[data-theme="light"] .sec__fundo{opacity:.22}
/* cartões por cima da foto: vidro escuro com borda dourada */
.tem-fundo .ing__tipo,.tem-fundo .ing__noite,.tem-fundo .ing__promo,.tem-fundo .ing__pedido,.tem-fundo .faixas,.tem-fundo .onde__mapa{background:color-mix(in srgb,var(--card) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tem-fundo .ing__tipo{border-color:color-mix(in srgb,var(--gold) 45%,var(--line-strong));background-image:linear-gradient(160deg,color-mix(in srgb,var(--gold) 12%,transparent) 0%,transparent 55%)}
.tem-fundo .ing__tipo:hover:not(.is-off){border-color:var(--gold);box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 1px var(--gold)}
.tem-fundo .ing__promo{border-color:var(--gold);background-image:linear-gradient(160deg,color-mix(in srgb,var(--gold) 22%,transparent),transparent 70%)}
.tem-fundo .ing__pedido{box-shadow:0 24px 60px rgba(0,0,0,.5);background-image:linear-gradient(180deg,color-mix(in srgb,var(--gold) 10%,transparent),transparent 40%)}
.tem-fundo .faixas{padding:4px 22px;border:1px solid var(--line-strong);border-top:2px solid var(--gold);border-radius:var(--radius)}
.tem-fundo .sec__note,.tem-fundo .lead{color:var(--ink)}
