/* ---------------------------------------------------------------------------
   mood.css — atmospheric polish layer for borderlan.land.
   Loaded AFTER style.css; only glows, shadows, filters and animations here.
   No layout metrics are touched (scrollbar styling excepted).
--------------------------------------------------------------------------- */

/* ---- 1. Cinematic vignette ------------------------------------------------
   Fixed full-viewport radial darkening; sits above the page (z 5) but below
   dialog backdrop (z 30) and loading overlay (z 40). Kept subtle so it reads
   as candlelight falloff even where it crosses the panels. */
body::after{
  content:"";position:fixed;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 46%,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,.10) 72%,
      rgba(0,0,0,.24) 88%,
      rgba(0,0,0,.42) 100%);
}

/* ---- 2. Torch-light flicker on the ornate frames --------------------------
   Two stacked animations with odd, non-multiple durations so the beat never
   repeats obviously: a slow warm box-shadow breathe + a tiny brightness
   wobble (~2-3% amplitude). Only 3 .panel elements exist, so this is cheap. */
@keyframes torch-breathe{
  0%,100%{box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 22px rgba(214,126,44,0)}
  38%    {box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 30px rgba(214,126,44,.09)}
  61%    {box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 24px rgba(214,126,44,.04)}
  82%    {box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 32px rgba(214,126,44,.11)}
}
@keyframes torch-flicker{
  0%,100%{filter:brightness(1)}
  17%    {filter:brightness(1.02)}
  31%    {filter:brightness(.995)}
  44%    {filter:brightness(1.03)}
  58%    {filter:brightness(1.005)}
  73%    {filter:brightness(1.025)}
  86%    {filter:brightness(.99)}
}
.panel{
  animation:torch-breathe 7.3s ease-in-out infinite,
            torch-flicker 11.7s ease-in-out infinite;
}

/* ---- 3. Interactive candle-glow blooms ------------------------------------ */
.slotrow{transition:box-shadow .35s ease}
.slotrow:hover{
  box-shadow:inset 0 0 0 1px rgba(200,162,74,.35),
             0 0 14px rgba(200,162,74,.18),
             0 0 30px rgba(200,162,74,.07);
}

.seat-input{transition:box-shadow .3s ease,border-color .3s ease}
.seat-input:focus{
  box-shadow:0 0 10px rgba(200,162,74,.35),
             0 0 22px rgba(200,162,74,.12),
             inset 0 0 6px rgba(200,162,74,.10);
}

.seat-join{transition:box-shadow .3s ease,background .2s ease}
.seat-join:hover{
  box-shadow:0 0 10px rgba(230,207,134,.35),0 0 22px rgba(200,162,74,.14);
}

/* stone plaque button: keep its full carved shadow stack, add a warm bloom */
.btn{transition:filter .15s,transform .05s,box-shadow .35s ease}
.btn:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 5px rgba(0,0,0,.35),
    0 0 0 2px rgba(138,108,46,.85),
    0 0 0 3px #000,
    0 4px 9px rgba(0,0,0,.65),
    0 0 18px rgba(230,207,134,.30),
    0 0 40px rgba(200,162,74,.12);
}

/* OPEN badge: faint green pulse once every few seconds */
@keyframes open-pulse{
  0%,86%,100%{box-shadow:0 0 0 rgba(120,220,150,0)}
  92%        {box-shadow:0 0 9px rgba(120,220,150,.45),0 0 18px rgba(120,220,150,.18)}
}
.status.open{animation:open-pulse 4.9s ease-in-out infinite}

/* ---- 4. Text atmosphere ---------------------------------------------------- */
@keyframes title-glow{
  0%,100%{text-shadow:0 1px 0 #000,0 0 12px rgba(200,162,74,.35)}
  47%    {text-shadow:0 1px 0 #000,0 0 16px rgba(230,207,134,.55),0 0 30px rgba(200,162,74,.18)}
}
.panel h3{animation:title-glow 6.1s ease-in-out infinite}

/* footer line: near-imperceptible candle waver */
@keyframes candle-waver{
  0%,100%{opacity:.7}
  13%    {opacity:.67}
  29%    {opacity:.71}
  46%    {opacity:.665}
  63%    {opacity:.695}
  81%    {opacity:.675}
}
.entrance-foot{animation:candle-waver 8.9s ease-in-out infinite}

/* ---- 5. Dialog atmosphere -------------------------------------------------- */
.panel-backdrop{transition:background .25s ease,backdrop-filter .25s ease,
  -webkit-backdrop-filter .25s ease}
.panel-backdrop.show{
  -webkit-backdrop-filter:blur(3px) sepia(.18);
  backdrop-filter:blur(3px) sepia(.18);
}
.panel-backdrop.show .dialog{
  box-shadow:0 18px 50px rgba(0,0,0,.7),
             0 0 24px rgba(200,162,74,.22),
             0 0 60px rgba(200,162,74,.10);
}

/* ---- 6. Scrollbars (signup sheet + dialog body) ---------------------------- */
.slots,.dialog{
  scrollbar-width:thin;
  scrollbar-color:rgba(200,162,74,.55) rgba(10,8,6,.6);
}
.slots::-webkit-scrollbar,.dialog::-webkit-scrollbar{width:8px}
.slots::-webkit-scrollbar-track,.dialog::-webkit-scrollbar-track{
  background:rgba(10,8,6,.6);border-radius:4px}
.slots::-webkit-scrollbar-thumb,.dialog::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#8a6c2e,#c8a24a 45%,#8a6c2e);
  border-radius:4px;border:1px solid rgba(0,0,0,.9)}
.slots::-webkit-scrollbar-thumb:hover,.dialog::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#a9812f,#e6cf86 45%,#a9812f)}

/* ---- 7. Reduced motion: kill every animation from this layer --------------- */
@media (prefers-reduced-motion:reduce){
  .panel,
  .panel h3,
  .status.open,
  .entrance-foot{animation:none}
}