/* ===== DOSE OF SPIRIT: BAR LIGHT =====
   Everything below the toggle is scoped to html[data-light="bar"].
   The ":root" on the token and override selectors lifts specificity above html[data-theme="dark"]. */

/* ---------- Toggle button (same look as .theme-toggle) ---------- */
.bar-toggle {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--glass-2); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .3s var(--ease), background .25s, color .35s, box-shadow .35s;
}
.bar-toggle:hover { background: var(--glass-hover); }
.bar-toggle:active { transform: scale(.94); }
.bar-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bar-toggle svg { width: 18px; height: 18px; display: block; pointer-events: none; transform-origin: 50% 12%; transition: filter .35s; }
.bar-toggle[aria-pressed="true"] {
  color: #ffb25c;
  box-shadow: inset 0 0 0 1px rgba(255, 178, 92, .5), 0 0 16px rgba(255, 178, 92, .35);
}
.bar-toggle[aria-pressed="true"] svg { filter: drop-shadow(0 0 4px #ffb25c) drop-shadow(0 0 9px rgba(255, 178, 92, .7)); }
.bar-toggle.swap svg { animation: barSwing .65s var(--ease); }
@keyframes barSwing {
  0% { transform: rotate(0); }
  25% { transform: rotate(16deg); }
  55% { transform: rotate(-10deg); }
  80% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}

@media (max-width: 560px) {
  .bar-toggle, .theme-toggle { width: 36px; height: 36px; }
}

/* ---------- Palette: warm dim bar ---------- */
html[data-light="bar"]:root {
  color-scheme: dark;
  --wall: #120c08;
  --wall-2: #1a120c;
  --paper: #1d140e;
  --ink: #f5e6d3;
  --ink-2: #dcc8ae;
  --mute: #b3a089;
  --line: rgba(255, 190, 120, .14);
  --acrylic-top: rgba(255, 170, 90, .24);
  --acrylic-bot: rgba(255, 120, 40, .06);
  --acrylic-edge: rgba(255, 190, 120, .85);
  --surface: #1c130d;
  --surface-2: #281b12;
  --on-ink: #1a0f08;
  --on-ink-soft: rgba(26, 15, 8, .64);
  --ink-hover: #fff3e0;
  --glass: rgba(255, 190, 120, .07);
  --glass-2: rgba(28, 18, 11, .74);
  --glass-hover: rgba(255, 190, 120, .17);
  --badge-bg: #120c08;
  --track: rgba(255, 190, 120, .13);
  --soft-1: #b3a089;
  --soft-2: #cdb9a0;
  --soft-3: #bba78f;
  --band-bg: #0b0705;
  --band-fg: #f5e6d3;
  --nav-solid: rgba(20, 13, 8, .8);
  --card-bg: rgba(32, 20, 12, .76);
  --pill-bg: rgba(32, 20, 12, .88);
  --case-top: rgba(255, 170, 90, .08);
  --case-bot: rgba(255, 170, 90, .02);
  --case-edge: rgba(255, 176, 98, .24);
  --hair: rgba(255, 190, 120, .07);
  --glare-1: rgba(255, 170, 90, .12);
  --glare-2: rgba(255, 170, 90, .06);
  --stage-core: #3b2414;
  --scrim: rgba(8, 4, 2, .6);
  --scrim-2: rgba(8, 4, 2, .72);
  --sh: .5;
}

/* palette cross-fade while the lamp is switched (class is added/removed by barlight.js) */
html.bar-anim *, html.bar-anim *::before, html.bar-anim *::after {
  transition: background-color .45s, color .45s, border-color .45s, fill .45s, stroke .45s, stop-color .45s, box-shadow .45s !important;
}

/* ---------- Light layers ---------- */
.bar-glow, .bar-vig {
  position: fixed; inset: 0; z-index: 35;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.bar-glow { overflow: hidden; mix-blend-mode: screen; --lx: 50vw; --ly: 30vh; }
html[data-light="bar"] .bar-glow, html[data-light="bar"] .bar-vig {
  opacity: 1; visibility: visible;
  transition: opacity .6s ease, visibility 0s;
}

/* overhead pendant cones */
.bar-cone {
  position: absolute; top: 0; left: var(--x);
  width: max(34vw, 280px); height: 82vh;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 16% 62% at 50% 0, rgba(255, 206, 140, .26), transparent 100%),
    radial-gradient(ellipse 50% 100% at 50% 0, rgba(255, 154, 60, .27) 0%, rgba(255, 140, 50, .12) 42%, rgba(255, 120, 40, 0) 76%);
  animation: barBreathe var(--d, 8s) ease-in-out var(--o, 0s) infinite;
}
.bar-cone.c1 { --x: 12%; --d: 9s; --o: -2s; }
.bar-cone.c2 { --x: 37%; --d: 7s; --o: -5s; }
.bar-cone.c3 { --x: 63%; --d: 11s; --o: -1s; }
.bar-cone.c4 { --x: 88%; --d: 8s; --o: -6s; }
.bar-cone::before { /* the bulb */
  content: ""; position: absolute; left: 50%; top: -14px; width: 54px; height: 54px; margin-left: -27px;
  background: radial-gradient(circle, rgba(255, 224, 170, .8), rgba(255, 170, 80, .25) 45%, transparent 70%);
}
@keyframes barBreathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

/* cursor spotlight: moved by transform only (--lx / --ly are written by barlight.js) */
.bar-spot {
  position: absolute; left: 0; top: 0;
  width: clamp(420px, 58vmin, 780px); aspect-ratio: 1;
  transform: translate3d(calc(var(--lx) - 50%), calc(var(--ly) - 50%), 0);
  background: radial-gradient(circle, rgba(255, 176, 90, .24) 0%, rgba(255, 150, 60, .1) 38%, rgba(255, 130, 40, 0) 68%);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
  will-change: transform;
}

/* vignette + film grain */
.bar-vig {
  background: radial-gradient(ellipse 125% 105% at 50% 42%, rgba(8, 4, 2, 0) 52%, rgba(8, 4, 2, .5) 100%);
}
.bar-vig::after {
  content: ""; position: absolute; inset: 0; opacity: .08;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .78  0 0 0 0 .55  0 0 0 1.4 -.35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* turning on: tungsten flicker (class is added by barlight.js for ~700ms) */
html.bar-flicker .bar-glow { animation: barFlicker .7s linear 1; }
html.bar-flicker .bar-vig { animation: barFlickerSoft .7s linear 1; }
@keyframes barFlicker {
  0% { opacity: 0; } 7% { opacity: .95; } 12% { opacity: .1; } 20% { opacity: 1; }
  27% { opacity: .25; } 34% { opacity: .05; } 48% { opacity: .85; } 56% { opacity: .4; }
  70% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes barFlickerSoft {
  0% { opacity: 0; } 12% { opacity: .5; } 27% { opacity: .3; } 48% { opacity: .8; } 70% { opacity: 1; } 100% { opacity: 1; }
}

/* ---------- Page surfaces ---------- */
html[data-light="bar"]:root .btn-ink:hover { box-shadow: 0 8px 24px rgba(255, 138, 40, .3); }
html[data-light="bar"]:root .receipt .btn-ink:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
html[data-light="bar"]:root .hero-card {
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 176, 98, .22), 0 0 44px -10px rgba(255, 138, 40, .3);
}
html[data-light="bar"]:root .ticker, html[data-light="bar"]:root .foot { box-shadow: inset 0 1px 0 rgba(255, 176, 98, .2); }
html[data-light="bar"]:root .tk { box-shadow: inset 0 0 0 1px rgba(255, 190, 120, .3); }
html[data-light="bar"]:root .foot-cols { color: rgba(245, 230, 211, .74); }
html[data-light="bar"]:root .case {
  box-shadow: 0 1px 0 var(--hair), 0 40px 80px -40px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--hair), 0 0 70px -24px rgba(255, 138, 40, .28);
}
html[data-light="bar"]:root .rx-paper {
  background: linear-gradient(180deg, rgba(255, 170, 90, .07), transparent 45%), var(--surface);
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 176, 98, .2), 0 0 60px -22px rgba(255, 138, 40, .28);
}
html[data-light="bar"]:root .kit { box-shadow: inset 0 0 0 1px rgba(255, 176, 98, .2), 0 0 28px -12px rgba(255, 138, 40, .32); }
html[data-light="bar"]:root .kit:not(.wide) .foil {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 206, 150, .7), transparent 38%),
    conic-gradient(from 210deg at 30% 60%, #4a3524, #b88a5a, #2e2015, #9a7248, #3d2a1b, #c9a070, #4a3524),
    #2e2015;
  box-shadow: inset 0 0 0 1px rgba(255, 176, 98, .25);
}
html[data-light="bar"]:root .kit.wide .foil { box-shadow: inset 0 0 0 1px var(--line), inset 0 -30px 50px -30px rgba(255, 138, 40, .2); }
html[data-light="bar"]:root .cart-foot { background: var(--surface-2); }
html[data-light="bar"]:root .drawer { box-shadow: -1px 0 0 rgba(255, 176, 98, .24), -30px 0 90px rgba(0, 0, 0, .55); }
html[data-light="bar"]:root .d-stage {
  background:
    radial-gradient(ellipse 60% 55% at 50% 22%, rgba(255, 150, 60, .3), transparent 100%),
    radial-gradient(ellipse at 50% 70%, var(--stage-core), var(--wall) 70%);
}
html[data-light="bar"]:root .d-floor { background: radial-gradient(ellipse, rgba(255, 138, 40, .5), transparent 70%); }

/* printed paper keeps its white, with a candle-lit tint */
html[data-light="bar"]:root .lbl {
  --paper: #f6ead8;
  background: linear-gradient(180deg, #f9efdf, #f1e2c9);
  box-shadow: inset -3cqi 0 4cqi rgba(90, 50, 20, .1), inset 3cqi 0 4cqi rgba(255, 228, 184, .75);
}
html[data-light="bar"]:root .lbl-top { color: #8b7660; }
html[data-light="bar"]:root .lbl-sub { color: #5a4b3d; }
html[data-light="bar"]:root .lbl-ml { color: #66594b; }
html[data-light="bar"]:root .receipt { background: #f6ead8; }
html[data-light="bar"]:root .receipt .rc-c { color: #75665a; }

/* ---------- Acrylic shelves lit like LED strips ---------- */
html[data-light="bar"]:root .hcell::after, html[data-light="bar"]:root .cell::after {
  border-top: 1px solid rgba(255, 190, 120, .9);
  box-shadow: 0 1px 0 rgba(255, 154, 60, .6), 0 6px 14px -2px rgba(255, 138, 40, .36), 0 12px 28px rgba(255, 120, 30, .14);
}

/* ---------- Vials: warm rim light, glass tint, specular streak, shelf caustic ---------- */
html[data-light="bar"]:root #glassBack stop:nth-child(1) { stop-color: #ffb877; stop-opacity: .3; }
html[data-light="bar"]:root #glassBack stop:nth-child(2) { stop-color: #5a2f16; stop-opacity: .2; }
html[data-light="bar"]:root #glassBack stop:nth-child(3) { stop-color: #ff9a3c; stop-opacity: .34; }
html[data-light="bar"]:root #neckGrad stop:nth-child(1) { stop-color: #6f4526; }
html[data-light="bar"]:root #neckGrad stop:nth-child(2) { stop-color: #e0a468; }
html[data-light="bar"]:root #neckGrad stop:nth-child(3) { stop-color: #55321a; }
html[data-light="bar"]:root #capGrad stop:nth-child(1) { stop-color: #8a6a48; }
html[data-light="bar"]:root #capGrad stop:nth-child(2) { stop-color: #ffe2b8; }
html[data-light="bar"]:root #capGrad stop:nth-child(3) { stop-color: #b88a58; }
html[data-light="bar"]:root #capGrad stop:nth-child(4) { stop-color: #fff0d6; }
html[data-light="bar"]:root #capGrad stop:nth-child(5) { stop-color: #7a5736; }

/* body outline, then the two highlight strokes (matched by attributes, not position) */
html[data-light="bar"]:root .vial-svg > path[fill="none"][stroke^="rgba"] { stroke: rgba(255, 170, 90, .42); }
html[data-light="bar"]:root .vial-svg > rect[stroke] { stroke: rgba(255, 170, 90, .3); }
html[data-light="bar"]:root .vial-svg > path[stroke="#fff"][stroke-width="2.2"] { stroke: #ffc27a; stroke-opacity: .95; stroke-width: 2.6; }
html[data-light="bar"]:root .vial-svg > path[stroke="#fff"][stroke-width="1.1"] { stroke: #ff9a3c; stroke-opacity: .85; stroke-width: 1.5; }
html[data-light="bar"]:root .vial .cap ellipse { fill: #ffd9a3; }
html[data-light="bar"]:root .vial .glint { fill: #ffc27a; }

html[data-light="bar"]:root .hcell .vial, html[data-light="bar"]:root .cell .vial { z-index: 1; }

/* caustic: light through the drink lands on the shelf in the drink's own colour */
html[data-light="bar"]:root .vial::before {
  content: ""; position: absolute; pointer-events: none;
  left: -18%; right: -18%; top: calc(100% - 4px); height: calc(var(--plank, 9px) + 8px);
  background: radial-gradient(ellipse closest-side, var(--lq, #ff9a3c) 0%, rgba(255, 140, 50, 0) 100%);
  opacity: .6;
}
/* specular streak lives on the glass body (.vb) so it rocks with the bottle */
html[data-light="bar"]:root .vb::after {
  content: ""; position: absolute; pointer-events: none;
  left: 24%; width: 5.5%; top: 20%; height: 76%;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 214, 160, 0) 0%, rgba(255, 214, 160, .8) 18%, rgba(255, 170, 90, .4) 62%, rgba(255, 150, 70, 0) 100%);
  mix-blend-mode: screen;
  opacity: .55;
  transition: opacity .3s;
}
html[data-light="bar"]:root .cell:hover .vb::after, html[data-light="bar"]:root .hcell.slosh .vb::after {
  opacity: 1;
  animation: barStreak 1.2s cubic-bezier(.2, .8, .2, 1);
}
/* the lamp stays put while the glass tilts, so the highlight slides the other way */
@keyframes barStreak {
  15% { transform: translateX(160%); }
  40% { transform: translateX(-120%); }
  65% { transform: translateX(60%); }
  85% { transform: translateX(-20%); }
}

/* ---------- Reduced motion: static light, no flicker, no breathing ---------- */
@media (prefers-reduced-motion: reduce) {
  .bar-cone { animation: none; }
  html[data-light="bar"]:root .vb::after { animation: none !important; }
  .bar-spot { transition: none; }
  html.bar-flicker .bar-glow, html.bar-flicker .bar-vig { animation: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
  .bar-cone { height: 64vh; }
  .bar-vig { background: radial-gradient(ellipse 140% 110% at 50% 42%, rgba(8, 4, 2, 0) 55%, rgba(8, 4, 2, .45) 100%); }
}