/* ==========================================================================
   SHELL — background layers, ticker, masthead, nav, footer, toasts
   ========================================================================== */

/* --- ambient background ------------------------------------------------- */
.bg-stack{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
}
.bg-image{
  position:absolute; inset:0;
  background:url('../img/tavern-bg.jpg') center/cover no-repeat;
  /* No filter() at all on purpose — not blur, not brightness.
     A filtered full-screen layer has to be re-rasterised as it drifts,
     which is one of the most expensive things you can ask a GPU to do
     continuously. The dimming is folded into opacity instead (.30 × the
     old brightness .42 ≈ .13), so the layer is a plain bitmap and the
     drift becomes a pure GPU transform. */
  opacity:.13;
  transform:scale(1.08);
  will-change:transform;
  animation:bgDrift 46s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  from{ transform:scale(1.08) translate3d(-1.2%,-.8%,0); }
  to  { transform:scale(1.16) translate3d(1.2%,.8%,0); }
}

/* faint perspective grid, like a neon floor */
.bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(168,85,247,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.18) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 100%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 100%, #000 0%, transparent 72%);
  opacity:.5;
}

#fx-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}

.bg-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,  rgba(120,40,200,.30), transparent 65%),
    radial-gradient(ellipse 60% 50% at 12% 88%, rgba(99,245,66,.10),  transparent 62%),
    linear-gradient(180deg, rgba(6,3,13,.55) 0%, rgba(6,3,13,.85) 55%, var(--void) 100%);
}
.bg-scanlines{
  position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  opacity:.45;
  /* no mix-blend-mode here: a full-screen blend pass has to recomposite
     every time the canvas underneath repaints, which is every frame. At
     this opacity plain alpha looks the same and costs nothing. */
}

/* soft light that follows the cursor */
.cursor-glow{
  position:fixed;
  top:0; left:0;
  width:520px; height:520px;
  margin:-260px 0 0 -260px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle, rgba(168,85,247,.16), rgba(168,85,247,.05) 42%, transparent 68%);
  opacity:0;
  transition:opacity .5s var(--ease);
  will-change:transform;
}
body.has-pointer .cursor-glow{ opacity:1; }

/* --- news ticker -------------------------------------------------------- */
.ticker{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--ticker-h);
  z-index:60;
  display:flex;
  align-items:stretch;
  background:linear-gradient(90deg, var(--plum), var(--midnight-2) 60%, var(--plum));
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 24px rgba(0,0,0,.6);
}
.ticker__label{
  display:flex;
  align-items:center;
  padding:0 1rem;
  font-family:var(--ui);
  font-weight:700;
  font-size:.66rem;
  letter-spacing:.28em;
  color:#180528;
  background:linear-gradient(135deg,var(--toxic),var(--toxic-dim));
  box-shadow:var(--glow-toxic);
  flex-shrink:0;
  z-index:2;
}
.ticker__viewport{
  position:relative;
  flex:1;
  overflow:hidden;
}
/* Edge fades as painted overlays rather than a mask.
   A mask on a box whose child animates non-stop has to be re-applied to
   changing content every frame; these are static layers the compositor
   draws once and reuses. Same look, no per-frame cost. */
.ticker__viewport::before,
.ticker__viewport::after{
  content:'';
  position:absolute;
  top:0; bottom:0;
  width:44px;
  z-index:2;
  pointer-events:none;
}
.ticker__viewport::before{
  left:0;
  background:linear-gradient(90deg, var(--midnight-2), rgba(18,7,38,0));
}
.ticker__viewport::after{
  right:0;
  background:linear-gradient(270deg, var(--plum), rgba(27,11,54,0));
}
.ticker__track{
  position:absolute;
  top:0; left:0;
  height:100%;
  display:flex;
  align-items:center;
  white-space:nowrap;
  will-change:transform;
  animation:tickerRun var(--ticker-duration,42s) linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes tickerRun{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }   /* content is duplicated once */
}
.ticker__item{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:0 1.6rem;
  font-family:var(--ui);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.ticker__item::before{
  content:'◆';
  font-size:.5rem;
  color:var(--violet);
}
.ticker__item--hot{ color:var(--toxic); }
.ticker__item--hot::before{ color:var(--toxic); }

/* --- masthead ----------------------------------------------------------- */
.masthead{
  position:fixed;
  top:var(--ticker-h); left:0; right:0;
  height:var(--mast-h);
  z-index:55;
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding-inline:clamp(1rem,3vw,2rem);
  background:rgba(10,4,18,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line-soft);
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.masthead.is-stuck{
  background:rgba(8,3,15,.93);
  border-bottom-color:var(--line);
  box-shadow:0 10px 40px rgba(0,0,0,.55);
}
.brand{ flex-shrink:0; display:flex; align-items:center; }
.brand__logo{
  height:34px; width:auto;
  /* same black-plate knockout as the hero wordmark */
  mix-blend-mode:screen;
  mask-image:radial-gradient(ellipse 80% 74% at 50% 50%, #000 56%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 74% at 50% 50%, #000 56%, transparent 100%);
  filter:drop-shadow(0 0 12px rgba(99,245,66,.55));
  transition:transform .4s var(--ease), filter .4s var(--ease);
}
.brand:hover .brand__logo{
  transform:scale(1.06);
  filter:drop-shadow(0 0 20px rgba(99,245,66,.9));
}
.brand__logo.is-spun{ animation:spin360 .7s var(--ease-out); }
@keyframes spin360{ to{ transform:rotate(360deg) scale(1.06); } }

/* --- nav ---------------------------------------------------------------- */
.nav{
  position:relative;
  display:flex;
  align-items:center;
  gap:.15rem;
  margin-inline:auto;
}
.nav a{
  position:relative;
  z-index:2;
  padding:.55rem .9rem;
  font-family:var(--ui);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  border-radius:8px;
  transition:color .3s var(--ease);
  white-space:nowrap;
}
.nav a:hover{ color:var(--ink); }
.nav a.is-active{ color:#150525; }

/* the pill that slides between nav items */
.nav__glide{
  position:absolute;
  top:50%;
  left:0;
  height:34px;
  width:0;
  z-index:1;
  border-radius:8px;
  transform:translateY(-50%);
  background:linear-gradient(135deg,var(--violet-hot),var(--magenta));
  box-shadow:var(--glow-violet);
  opacity:0;
  transition:left .45s var(--ease-out), width .45s var(--ease-out), opacity .3s var(--ease);
  pointer-events:none;
}
.nav__glide.is-on{ opacity:1; }

/* --- right side --------------------------------------------------------- */
.masthead__right{
  display:flex;
  align-items:center;
  gap:.7rem;
  flex-shrink:0;
}

.coin-hud{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.34rem .7rem;
  border-radius:999px;
  border:1px solid rgba(251,191,36,.35);
  background:rgba(251,191,36,.08);
  font-family:var(--ui);
  font-weight:700;
  font-size:.78rem;
  color:var(--gold);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.coin-hud.is-bump{
  transform:scale(1.18);
  box-shadow:var(--glow-gold);
}
.coin-hud__icon{ font-size:.9rem; }

.live-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .85rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-family:var(--ui);
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--ink-mute);
  transition:all .35s var(--ease);
}
.live-pill__dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--ink-faint);
  transition:all .35s var(--ease);
}
.live-pill.is-live{
  color:#fff;
  border-color:rgba(255,60,60,.6);
  background:rgba(255,40,40,.14);
}
.live-pill.is-live .live-pill__dot{
  background:#ff3b3b;
  box-shadow:0 0 10px #ff3b3b;
  animation:pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot{
  50%{ transform:scale(1.45); opacity:.55; }
}

/* --- mobile menu button ------------------------------------------------- */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:.5rem;
}
.nav-toggle span{
  display:block;
  width:22px; height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --- views / page transitions ------------------------------------------- */
.view{
  padding-top:3.2rem;
  padding-bottom:6rem;
  animation:viewIn .6s var(--ease-out);
}
/* home opens on the hero, which carries its own spacing */
#view-home{ padding-top:0; }
/* the bus view opens on a full-bleed image */
#view-bus{ padding-top:0; }
@keyframes viewIn{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
.view[hidden]{ display:none; }

/* --- footer ------------------------------------------------------------- */
.footer{
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg,transparent,rgba(27,11,54,.55));
  padding:3rem 0 2.4rem;
}
.footer__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
  text-align:center;
}
.footer__logo{
  height:40px; width:auto;
  opacity:.85;
  mix-blend-mode:screen;
  mask-image:radial-gradient(ellipse 80% 74% at 50% 50%, #000 56%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 74% at 50% 50%, #000 56%, transparent 100%);
  filter:drop-shadow(0 0 14px rgba(99,245,66,.4));
}
.footer__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
}
.footer__links a{
  padding:.4rem .9rem;
  border-radius:999px;
  border:1px solid var(--line-soft);
  font-family:var(--ui);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-mute);
  transition:all .3s var(--ease);
}
.footer__links a:hover{
  color:var(--ink);
  border-color:var(--violet);
  box-shadow:var(--glow-violet);
  transform:translateY(-2px);
}
.footer__legal{
  color:var(--ink-faint);
  font-size:.8rem;
  margin:0;
}
.footer__legal a{ color:var(--ink-mute); text-decoration:underline; }

/* --- spark button ------------------------------------------------------- */
.spark-btn{
  position:fixed;
  right:1.4rem; bottom:1.4rem;
  z-index:50;
  width:54px; height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.4rem;
  border:1px solid rgba(99,245,66,.4);
  background:radial-gradient(circle at 35% 30%, rgba(99,245,66,.28), rgba(10,4,18,.9));
  box-shadow:var(--glow-toxic);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.spark-btn:hover{ transform:scale(1.12) rotate(-8deg); }
.spark-btn:active{ transform:scale(.94); }

/* --- toasts ------------------------------------------------------------- */
.toast-stack{
  position:fixed;
  right:1.4rem; bottom:5.4rem;
  z-index:70;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  align-items:flex-end;
  pointer-events:none;
}
.toast{
  padding:.6rem 1rem;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(20,8,40,.94);
  backdrop-filter:blur(10px);
  font-family:var(--ui);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ink);
  box-shadow:0 8px 30px rgba(0,0,0,.6);
  animation:toastIn .4s var(--ease-out);
}
.toast--coin{ border-color:rgba(251,191,36,.5); color:var(--gold); }
.toast.is-out{ animation:toastOut .35s var(--ease) forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(24px); } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(24px); } }

/* --- responsive --------------------------------------------------------- */
@media (max-width:1080px){
  .nav a{ padding:.5rem .62rem; font-size:.72rem; }
}

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .coin-hud{ display:none; }

  .nav{
    position:fixed;
    /* .masthead uses backdrop-filter, which makes it the containing block for
       fixed-position children — so offsets here resolve against the header,
       not the viewport. top:100% therefore means "flush under the header",
       and stays correct whatever height the header ends up being. */
    top:100%;
    left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:.6rem;
    background:#08030f;
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 50px rgba(0,0,0,.75);
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    max-height:calc(100vh - var(--ticker-h) - var(--mast-h));
    overflow-y:auto;
  }
  .nav.is-open{ opacity:1; transform:none; visibility:visible; }
  .nav a{
    padding:.85rem 1rem;
    font-size:.9rem;
    border-bottom:1px solid var(--line-soft);
    border-radius:0;
  }
  .nav a.is-active{ color:var(--toxic); }
  .nav__glide{ display:none; }
}

@media (max-width:520px){
  .ticker__label{ padding:0 .7rem; font-size:.6rem; letter-spacing:.18em; }
  .brand__logo{ height:28px; }
  .spark-btn{ width:48px; height:48px; right:1rem; bottom:1rem; }
}