/* ============================================================
   BODEGA BAR — FX LAYER (Awwwards elevation pass)
   Loaded after each page's inline styles. One source of feel.
   ============================================================ */

/* ---------- 1 ▸ ROLL-GATE LOADER ---------- */
.gate-loader{
  position:fixed;inset:0;z-index:10000;
  background:repeating-linear-gradient(180deg,#2a2724 0 26px,#3a3631 26px 30px,#211f1c 30px 34px);
  display:flex;align-items:center;justify-content:center;
  transition:transform 1s cubic-bezier(.83,0,.17,1);
}
.gate-loader::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:#141312;
}
.gate-loader.up{transform:translateY(-103%)}
.gl-inner{text-align:center;font-family:'IBM Plex Mono',monospace}
.gl-mark{
  display:block;color:#FFF4E2;font-weight:600;letter-spacing:.5em;font-size:clamp(1rem,2.4vw,1.6rem);
  text-indent:.5em;animation:glpulse 1.2s ease-in-out infinite alternate;
}
.gl-sub{
  display:block;color:#FFB73D;font-size:.68rem;letter-spacing:.34em;margin-top:14px;text-indent:.34em;
}
@keyframes glpulse{from{opacity:.55}to{opacity:1}}

/* ---------- 3 ▸ KINETIC CHARACTERS ---------- */
.ch{
  display:inline-block;
  transition:font-variation-settings .3s ease,transform .3s ease;
}

/* ---------- 4a ▸ SITE-WIDE CONTEXTUAL CURSOR ---------- */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .fx-cursor, .fx-cursor *{cursor:none!important}
}
.fx-dot{
  position:fixed;z-index:9998;width:9px;height:9px;border-radius:50%;
  background:#FFB73D;pointer-events:none;left:0;top:0;
  transform:translate(-50%,-50%);mix-blend-mode:difference;
}
.fx-ring{
  position:fixed;z-index:9998;width:38px;height:38px;border-radius:50%;
  border:1.5px solid #FFB73D;pointer-events:none;left:0;top:0;
  transform:translate(-50%,-50%);opacity:.75;
  display:flex;align-items:center;justify-content:center;
  transition:width .3s cubic-bezier(.34,1.56,.64,1),height .3s cubic-bezier(.34,1.56,.64,1),opacity .3s,background .3s;
}
.fx-ring.big{width:64px;height:64px;opacity:1}
.fx-ring.label{width:74px;height:74px;background:rgba(26,26,26,.85);border-color:#FFB73D;opacity:1;mix-blend-mode:normal}
.fx-label{
  font-family:'IBM Plex Mono',monospace;font-size:.58rem;font-weight:600;
  letter-spacing:.18em;color:#FFB73D;opacity:0;transition:opacity .2s;
  text-indent:.18em;
}
.fx-ring.label .fx-label{opacity:1}

/* ---------- 4b ▸ MAGNETIC CTAs ---------- */
.btn,.cta,.dbtn{
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,translate .4s cubic-bezier(.22,1,.36,1);
  will-change:translate;
}

/* ---------- 4c ▸ CLIP-MASK IMAGE REVEALS ---------- */
.mask{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s cubic-bezier(.83,0,.17,1);
}
.mask img{transform:scale(1.14)}
.mask.in{clip-path:inset(0 0 0% 0)}
.mask.in img{transform:scale(1)}

/* ---------- 5 ▸ NEON FOOTER WORDMARK ---------- */
.neonmark{
  display:flex;flex-wrap:wrap;column-gap:.05em;justify-content:center;
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:clamp(3rem,11vw,10rem);line-height:1.05;
  margin:clamp(24px,4vw,56px) 0 clamp(36px,5vw,64px);
  user-select:none;
}
.neonmark .nl{
  color:transparent;-webkit-text-stroke:1.5px #3a362f;
  transition:color .12s linear,text-shadow .25s ease,-webkit-text-stroke .12s linear;
}
.neonmark .sp{width:.35em}
.neonmark .nl.lit{
  color:#FFB73D;-webkit-text-stroke:1.5px transparent;
  text-shadow:0 0 16px rgba(255,183,61,.75),0 0 56px rgba(245,133,36,.4);
}

/* ---------- 2 ▸ SCROLL FEEL HELPERS ---------- */
.photowall{will-change:transform}

/* ---------- MOBILE REFINEMENTS (shared, overrides page CSS) ---------- */
@media(max-width:820px){
  .nav-links{display:none!important}
  .hamburger{display:block!important}
  .nav-logo img{height:64px}
  nav.scrolled .nav-logo img{height:48px}
}
@media(max-width:900px){
  .hero-drink{left:-7%;width:52%;bottom:-9%}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .gate-loader{display:none}
  .fx-dot,.fx-ring{display:none}
  .mask{clip-path:none;transition:none}
  .mask img{transform:none}
  .ch{transition:none}
}
@media (pointer:coarse){
  .fx-dot,.fx-ring{display:none}
}