/**
 * Beach Dogs & Tiki Bars — trail layer on top of the kit.
 *
 * The palette is pulled from the trail's own dusk photography (the glowing
 * beachfront pavilion at Sliders, the tiki poles at Coconuts): night-indigo
 * ground, lamplight cream type, sea-glass teal accent, and a tungsten
 * "sodium" that is literally the colour of the festoon bulbs in the
 * set-piece. Contrast on --ink: --paper 15.9:1, --muted 8.0:1.
 *
 * Below the palette: the String Lights set-piece (#lightsWrap), a pinned
 * 320vh scene between Chapter III and the tally. The wire, the bulbs, the
 * pools of light and the OPEN LATE tag are all positioned and driven by
 * beach-dogs-tiki-bars.js; this file owns the stage, the bulb fittings,
 * the pools and the ledger. All choreography is inline styles from the JS —
 * nothing here animates on its own except the ledger and tag fades, which
 * are class-toggled.
 */

.exp[data-trail="beach-dogs-tiki-bars"] {
  --ink: #0c1020;      /* the indigo of the sky once the sun is gone */
  --paper: #f6ead6;    /* lamplight cream */
  --muted: #b3a88f;    /* weathered deck wood */
  --accent: #5fb8ad;   /* sea-glass teal */
  --sodium: #f2a65a;   /* tungsten festoon glow */

  --x-selection-bg: var(--sodium);
  --x-selection-color: #1c1206;

  /* The trail's photography is bright dusk and daylight — the kit's default
     veil was tuned for dark interiors, so it is re-tinted to this ink. */
  --x-veil-grad-bg:
    linear-gradient(180deg, rgba(12,16,32,.92), rgba(12,16,32,.74) 42%, rgba(12,16,32,.97)),
    radial-gradient(72% 62% at 50% 52%, rgba(12,16,32,.66), transparent 76%);
  --x-coldveil-bg: linear-gradient(rgba(12,16,32,.55), rgba(12,16,32,.78));
  --x-prog-bg: var(--sodium);
  --x-kicker-color: var(--accent);
  --x-titleword-color: var(--paper);
  --x-titleword-bg: none;
  --x-titleword-bg-clip: border-box;
  --x-titleword-filter: drop-shadow(0 8px 34px rgba(0,0,0,.6));
  --x-btn-p-bg: var(--sodium);
  --x-btn-p-color: #1c1206;
  --x-btn-s-color: var(--paper);
}

/* ── the pinned wrapper ────────────────────────────────────────────────────
   A kit .scene is min-height:100vh flex with gutters; the lights need the
   full 320vh pin with an inner sticky stage, so the base rules are reset
   rather than extended. */
.scene.lights-wrap {
  display: block;
  min-height: 0;
  height: 320vh;
  padding: 0;
  overflow: visible;
}

.lights-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #0c1020;
}

/* ── the sky ───────────────────────────────────────────────────────────────
   JS rewrites this gradient every frame as dusk falls (amber horizon to
   indigo night). The CSS default is the early-dusk state, so the scene is
   still sensible with JS disabled. */
.lights-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(242,166,90,.28), transparent 60%),
    linear-gradient(180deg, #1d2440 0%, #4a3960 42%, #b0634f 68%, #e89a5a 88%, #f2b06a 100%);
}

/* ── the bar silhouette ────────────────────────────────────────────────────
   A thatch roof edge across the top and a dune line along the bottom: just
   enough geometry to read as a beach bar once the light is gone. */
.lights-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 9vh;
  background:
    repeating-linear-gradient(100deg,
      #05070f 0 14px, transparent 14px 26px),
    linear-gradient(180deg, #05070f 0%, rgba(5,7,15,0) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 78%);
  opacity: .9;
  pointer-events: none;
}

.lights-dunes {
  position: absolute;
  inset: auto 0 0;
  height: 22vh;
  background:
    radial-gradient(90% 130% at 18% 118%, #05070f 42%, transparent 43%),
    radial-gradient(120% 150% at 78% 125%, #070a16 46%, transparent 47%),
    linear-gradient(180deg, transparent, rgba(5,7,15,.85) 78%);
  pointer-events: none;
}

/* ── the header ──────────────────────────────────────────────────────────── */
.lights-head {
  position: absolute;
  top: 11vh;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  padding: 0 6vw;
  pointer-events: none;
}

.lights-head .kicker {
  margin-bottom: 10px;
}

.lights-line {
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--paper);
  max-width: 46ch;
  margin: 0 auto;
  text-shadow: 0 2px 18px rgba(0,0,0,.8);
}

.lights-hint {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── the wire and the bulbs ──────────────────────────────────────────────── */
#lightsSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lights-bulbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A bulb hangs from its attach point on the wire; .bulb-swing rotates about
   that point, so the cord, the glass and the glow move as one pendulum. */
.bulb {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.bulb:active {
  cursor: grabbing;
}

.bulb-swing {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.bulb .cord {
  position: absolute;
  left: -.75px;
  top: 0;
  width: 1.5px;
  height: 26px;
  background: #05070f;
}

.bulb .socket {
  position: absolute;
  left: -3.5px;
  top: 24px;
  width: 7px;
  height: 6px;
  border-radius: 2px 2px 1px 1px;
  background: #0a0d18;
}

/* The festoon glass: unlit it is near-black with a faint sheen of the last
   of the sky; the lit face is a ::before whose opacity is --lit, driven
   from JS, so scrubbing backwards dims the bulb in reverse. */
.bulb .glass {
  position: absolute;
  left: -7px;
  top: 29px;
  width: 14px;
  height: 18px;
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  background:
    radial-gradient(60% 42% at 38% 26%, rgba(246,234,214,.16), transparent 60%),
    linear-gradient(180deg, #131a2e, #0a0e1c);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.6);
}

.bulb .glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(52% 46% at 50% 38%, #fff3d6 0%, #ffd489 38%, #f2a65a 68%, #b96a2c 100%);
  opacity: var(--lit, 0);
}

/* The halo: one blurred radial behind each bulb. */
.bulb .glow {
  position: absolute;
  left: -46px;
  top: -12px;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255,190,110,.75), rgba(242,166,90,.28) 42%, transparent 72%);
  filter: blur(6px);
  opacity: calc(var(--lit, 0) * .8);
  pointer-events: none;
}

/* ── the pools of light ────────────────────────────────────────────────────
   Each lit bulb throws a warm ellipse onto the ground beneath it, and in
   that light a trail photograph warms into visibility. Both are functions
   of the same --lit the bulb carries. */
.pool {
  position: absolute;
  width: clamp(104px, 12vw, 178px);
  transform: translateX(-50%);
  pointer-events: none;
}

.pool-light {
  position: absolute;
  left: 50%;
  bottom: -3.2vh;
  width: 240%;
  height: 9vh;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255,190,110,.5), rgba(242,166,90,.16) 55%, transparent 78%);
  filter: blur(7px);
  opacity: calc(var(--lit, 0) * .85);
}

.pool-photo {
  position: relative;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  /* The photograph is there all along — it is just too dark to see until
     its bulb wakes. Night-sepia at 0, full warm colour at 1. */
  opacity: calc(.05 + var(--lit, 0) * .95);
  filter:
    brightness(calc(.24 + var(--lit, 0) * .84))
    saturate(calc(.35 + var(--lit, 0) * .65))
    sepia(calc((1 - var(--lit, 0)) * .5));
}

.pool-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pool-photo figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 14px 8px 6px;
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(180deg, transparent, rgba(5,7,15,.85));
  opacity: var(--lit, 0);
}

/* ── the OPEN LATE tag ─────────────────────────────────────────────────────
   A small kraft-paper tag on its own bit of string, hung from the wire once
   every bulb is lit. JS positions it at a wire point and rocks it gently;
   .show fades it in at the end of the track. */
.lights-tag {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}

.lights-tag.show {
  opacity: 1;
}

.lights-tag-card {
  position: absolute;
  left: -34px;
  top: 52px;
  width: 68px;
  padding: 9px 0 7px;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .04em;
  color: #2a1a08;
  background:
    radial-gradient(120% 160% at 30% 0%, #e8cf9e, #d3af76 70%, #bd9860);
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 22px rgba(242,166,90,.35);
  transform: rotate(-4deg);
  transform-origin: 50% -52px;
}

.lights-tag-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #0c1020;
  box-shadow: 0 0 0 2px #a5854f;
}

.lights-tag-string {
  position: absolute;
  left: -.75px;
  top: 0;
  width: 1.5px;
  height: 52px;
  background: #05070f;
}

/* ── the ledger ────────────────────────────────────────────────────────────
   One mono line at the lower left naming what each waking bulb reveals.
   JS swaps text and toggles .show. */
.lights-ledger {
  position: absolute;
  left: 8vw;
  bottom: 4vh;
  z-index: 3;
  max-width: 44ch;
  pointer-events: none;
}

.lights-ledger .ll-line {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 1px 12px rgba(0,0,0,.9);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .55s ease, transform .55s ease;
}

.lights-ledger.show .ll-line {
  opacity: 1;
  transform: translateY(0);
}

/* ── mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .scene.lights-wrap {
    height: 300vh;
  }

  .lights-head {
    top: 8vh;
  }

  .lights-line {
    font-size: .95rem;
  }

  /* The mute pill sits bottom-left on the kit, so the ledger moves right
     of it and shrinks. */
  .lights-ledger {
    left: 22px;
    right: 22px;
    bottom: 11vh;
    max-width: none;
  }

  .lights-ledger .ll-line {
    font-size: 9.5px;
    letter-spacing: .12em;
  }

  .pool {
    width: clamp(78px, 21vw, 116px);
  }

  .pool-photo figcaption {
    display: none;
  }

  .bulb .cord {
    height: 20px;
  }

  .bulb .socket {
    top: 18px;
  }

  .bulb .glass {
    left: -5.5px;
    top: 23px;
    width: 11px;
    height: 14px;
  }

  .bulb .glow {
    left: -38px;
    top: -14px;
    width: 88px;
    height: 88px;
  }

  .lights-tag-card {
    left: -29px;
    top: 40px;
    width: 58px;
    font-size: 12px;
    transform-origin: 50% -40px;
  }

  .lights-tag-string {
    height: 40px;
  }
}

/* ── reduced motion ────────────────────────────────────────────────────────
   The JS sets the finished state (night sky, every bulb lit, tag shown) and
   never starts the sway; here the fades come out so even that state change
   is instant. */
@media (prefers-reduced-motion: reduce) {
  .lights-ledger .ll-line,
  .lights-tag {
    transition: none;
  }
}