/*
 * Marquesina atmosphere (docs/design/VEGAS-REDESIGN.md §2.5, §3.1, §3.2, §4.1, §4.2, §4.7):
 * neon tube signs, bulb frames, the bulb arrow, Googie stars, skyline, horizon, glow boxes, CTA sheen,
 * and the keyframes of ignition / power / chase / twinkle / sheen / sign-on.
 *
 * Rules: only opacity and transform animate; every glow is a static pre-rendered layer whose opacity changes.
 * Without html.js-motion everything rests lit (signs at --halo, bulbs and stars at 1). Mode overrides
 * (lite / still / lights off / reduced) live in vg-motion.css. --halo is never set on .vg-neon itself.
 * Art is CSS or inline SVG (data URIs here); no photos are faked.
 */

/* ---------- A. Neon tube lettering (vg_neon()) ---------- */

.vg-sign {
  display: flex;
  align-items: center;
  height: calc(var(--vg-fs-sign) * 1.3);
  margin: 0;
  overflow: visible;
}

.vg-neon {
  --tube: var(--vg-pink);
  --core: var(--vg-pink-core);
  --ta: var(--vg-pink-a55);
  --tb: var(--vg-pink-a25);
  display: inline-block;
  color: var(--core);
  font: 400 var(--vg-fs-sign)/1 var(--vg-font-tube);
  font-size: min(var(--vg-fs-sign), calc((100vw - 32px) / var(--chars, 10) / .62));
  letter-spacing: .04em;
  text-transform: none;
  white-space: nowrap;
}

.vg-neon--red {
  --tube: var(--vg-red);
  --core: var(--vg-red-core);
  --ta: var(--vg-red-a55);
  --tb: var(--vg-red-a25);
}

.vg-neon--gold {
  --tube: var(--vg-gold);
  --core: var(--vg-gold-core);
  --ta: var(--vg-gold-a55);
  --tb: var(--vg-gold-a25);
}

.vg-neon--off {
  --core: var(--vg-tube-off);
}

.vg-neon__l {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.vg-neon__l::before {
  content: attr(data-ch);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--tube);
  text-shadow: 0 0 2px var(--tube), 0 0 7px var(--ta), 0 0 18px var(--ta), 0 0 34px var(--tb);
  opacity: var(--halo, 1);
  pointer-events: none;
}

.vg-neon--off .vg-neon__l::before {
  display: none;
}

.vg-neon__sp {
  display: inline-block;
  width: .32em;
}

/* Ignition (§4.2): 100 % CSS, triggered by the class vg-boot.js sets before first paint. The tube core
   (the text itself) is never hidden: only the halo layer starts at 0. One faulty letter, never on red. */
html.js-motion [data-vg-ignite] .vg-neon__l::before {
  opacity: 0;
  animation: vg-ignite-letter var(--vg-d-letter) linear calc(300ms + var(--i) * 45ms) forwards;
}

html.js-motion [data-vg-ignite] [data-vg-faulty]::before {
  animation: vg-ignite-letter var(--vg-d-letter) linear calc(300ms + var(--i) * 45ms) forwards, vg-faulty 600ms linear 1100ms 1;
}

/* Section signs (§4.3): scenes.js adds .is-lit when the sign enters the viewport. Failsafe: lit at 2.5 s
   if main.js never starts, and at once under html.vg-failsafe. */
html.js-motion [data-vg-scene="sign"]:not(.is-lit) .vg-neon__l::before {
  opacity: 0;
}

html.js-motion [data-vg-scene="sign"].is-lit .vg-neon__l::before {
  animation: vg-sign-on 400ms linear 1;
}

html.js-motion:not(.vg-ready) [data-vg-scene="sign"]:not(.is-lit) .vg-neon__l::before {
  animation: vg-failsafe 1ms linear 2500ms forwards;
}

html.vg-failsafe [data-vg-scene="sign"]:not(.is-lit) .vg-neon__l::before {
  opacity: var(--halo, 1);
}

/* ---------- B. Glow box (static shadow on ::after; only its opacity changes) ---------- */

.vg-glow {
  position: relative;
  isolation: isolate;
}

.vg-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--glow, var(--vg-gold)), 0 0 12px 1px var(--glow-a, var(--vg-gold-a55)), 0 0 28px 6px var(--glow-b, var(--vg-gold-a25));
  opacity: var(--glow-o, 1);
  transition: opacity var(--vg-d-ui) var(--vg-ease-out);
}

/* ---------- C. Bulbs: 3 phase layers, whatever the number of bulbs ---------- */

.vg-bulbs {
  position: absolute;
  inset: var(--bulb-inset, 7px);
  z-index: 1;
  pointer-events: none;
}

.vg-bulbs > i {
  --d: 12px;
  --p: 48px;
  --dot: radial-gradient(circle closest-side, var(--vg-bulb-core) 0 30%, var(--vg-gold) 48%, var(--vg-gold-a25) 72%, transparent);
  position: absolute;
  inset: 0;
  background:
    var(--dot) var(--o) 0 / var(--p) var(--d) repeat-x,
    var(--dot) var(--o) 100% / var(--p) var(--d) repeat-x,
    var(--dot) 0 var(--o) / var(--d) var(--p) repeat-y,
    var(--dot) 100% var(--o) / var(--d) var(--p) repeat-y;
}

.vg-bulbs > i:nth-child(1) { --o: 0px; --pd: 120ms; --cd: 0ms; }
.vg-bulbs > i:nth-child(2) { --o: 16px; --pd: 220ms; --cd: 600ms; }
.vg-bulbs > i:nth-child(3) { --o: 32px; --pd: 320ms; --cd: 1200ms; }

/* Power on at 120/220/320 ms, then the idle chase from 1800 ms (after the faulty letter is done). */
html.js-motion .vg-bulbs > i {
  opacity: .25;
  animation: vg-power 200ms ease-out var(--pd) forwards, vg-chase var(--vg-d-chase) linear calc(1800ms + var(--cd)) infinite;
}

/* ---------- Marquee frame (§3.2) ---------- */

.vg-marquee {
  --glow-o: .7;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--vg-s-3);
  padding: 22px; /* bulbs: 7 px inset + 12 px dot, so content never sits under a bulb */
  border: 3px solid var(--vg-brass);
  border-radius: var(--vg-r-lg);
  background: var(--vg-smoke);
}

.vg-marquee__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--vg-line);
  border-radius: var(--vg-r-sm);
  background: var(--vg-night);
  aspect-ratio: 16 / 9;
}

.vg-marquee__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No photo: a stack of three chips and the four suits, never a fake prize picture. */
.vg-marquee__art {
  height: 120px;
  border-radius: var(--vg-r-sm);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23FFF3DC'%3E%3Ccircle cx='82' cy='68' r='34' fill='%23B0122A' stroke='none'/%3E%3Ccircle cx='82' cy='68' r='29' stroke-width='6' stroke-dasharray='7.6 7.6'/%3E%3Ccircle cx='82' cy='68' r='19' stroke-width='1.5' stroke-dasharray='2 3'/%3E%3Ccircle cx='158' cy='68' r='34' fill='%23146B45' stroke='none'/%3E%3Ccircle cx='158' cy='68' r='29' stroke-width='6' stroke-dasharray='7.6 7.6'/%3E%3Ccircle cx='158' cy='68' r='19' stroke-width='1.5' stroke-dasharray='2 3'/%3E%3Ccircle cx='120' cy='52' r='36' fill='%231A1411' stroke='%23FFC444' stroke-width='2'/%3E%3Ccircle cx='120' cy='52' r='30' stroke='%23FFC444' stroke-width='6' stroke-dasharray='7.85 7.85'/%3E%3Ccircle cx='120' cy='52' r='20' stroke='%23FFC444' stroke-width='1.5' stroke-dasharray='2 3'/%3E%3C/g%3E%3Cpath fill='%23FFF3DC' d='M120 38c4 5 9 8 9 13a5 5 0 0 1-8 4l1 7h-4l1-7a5 5 0 0 1-8-4c0-5 5-8 9-13z'/%3E%3Cpath fill='%23FF3345' d='M20 30s-9-6-9-12a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6-9 12-9 12zM220 82l8 12-8 12-8-12z'/%3E%3Cpath fill='%23C9973F' d='M220 14a5 5 0 0 0-4 8 5 5 0 1 0 3 8l-1 6h4l-1-6a5 5 0 1 0 3-8 5 5 0 0 0-4-8zM20 84c4 5 9 8 9 13a5 5 0 0 1-8 4l1 6h-4l1-6a5 5 0 0 1-8-4c0-5 5-8 9-13z'/%3E%3C/svg%3E") center / contain no-repeat,
    radial-gradient(70% 90% at 50% 100%, var(--vg-felt) 0 60%, var(--vg-felt-deep));
}

.vg-marquee__title {
  margin: 0;
  color: var(--vg-bulb);
  font-size: var(--vg-fs-hero);
}

/* ---------- Bulb arrow toward the CTA (§3.2): 3 sibling <svg>, one per phase; only the svg opacity moves ---------- */

.vg-arrow {
  position: relative;
  flex: none;
  width: 56px;
  height: 24px;
}

.vg-arrow > svg {
  position: absolute;
  inset: 0;
  width: 56px;
  height: 24px;
  overflow: visible;
  fill: var(--vg-gold-core);
  stroke: var(--vg-gold);
  stroke-width: 1.5;
}

.vg-arrow > svg:nth-child(1) { --cd: 0ms; }
.vg-arrow > svg:nth-child(2) { --cd: 600ms; }
.vg-arrow > svg:nth-child(3) { --cd: 1200ms; }

html.js-motion .vg-arrow > svg {
  opacity: .35;
  animation: vg-chase var(--vg-d-chase) linear calc(1800ms + var(--cd)) infinite;
}

/* ---------- CTA glow + one sheen (§4.2: t = 900 ms) ---------- */

.vg-btn__sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.vg-btn__sheen > i {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 248 231 / .55) 50%, transparent 65%);
  transform: translateX(-120%);
}

html.js-motion .vg-btn--lit::after {
  animation: vg-glow-up 300ms var(--vg-ease-out) 900ms forwards;
}

html.js-motion .vg-btn--lit .vg-btn__sheen > i {
  animation: vg-sheen 600ms var(--vg-ease-in-out) 900ms 1 both;
}

/* ---------- Night sky: skyline, horizon, Googie stars ---------- */

.vg-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 55% at 50% 100%, rgb(255 51 69 / .22), transparent 70%),
    radial-gradient(70% 38% at 50% 100%, rgb(255 196 68 / .18), transparent 72%),
    var(--vg-night);
}

/* Sign towers, one Googie star and gold windows at 20 %. Purely decorative, never the LCP. */
.vg-skyline {
  position: absolute;
  inset: auto 0 0;
  height: 96px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cdefs%3E%3Cpattern id='w' width='8' height='10' patternUnits='userSpaceOnUse'%3E%3Crect x='2' y='3' width='3' height='4' fill='%23FFC444' fill-opacity='.2'/%3E%3C/pattern%3E%3Cg id='t'%3E%3Crect x='0' y='72' width='34' height='48'/%3E%3Crect x='38' y='42' width='26' height='78'/%3E%3Crect x='70' y='60' width='40' height='60'/%3E%3Crect x='116' y='30' width='22' height='90'/%3E%3Crect x='144' y='78' width='46' height='42'/%3E%3Crect x='196' y='50' width='30' height='70'/%3E%3Crect x='232' y='16' width='18' height='104'/%3E%3Crect x='256' y='66' width='44' height='54'/%3E%3Crect x='306' y='38' width='28' height='82'/%3E%3Crect x='340' y='82' width='60' height='38'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' fill='%231A1411'/%3E%3Cuse href='%23t' fill='url(%23w)'/%3E%3Crect x='43' y='14' width='16' height='28' fill='%234A0D18' stroke='%23C9973F' stroke-width='1.5'/%3E%3Crect x='310' y='12' width='20' height='26' fill='%230F3D2B' stroke='%23C9973F' stroke-width='1.5'/%3E%3Cpath fill='%23C9973F' d='M241 0l2.5 7 7 2.5-7 2.5-2.5 7-2.5-7-7-2.5 7-2.5z'/%3E%3C/svg%3E") bottom center / auto 100% repeat-x;
}

.vg-star {
  position: absolute;
  width: var(--s, 14px);
  height: var(--s, 14px);
  background: radial-gradient(circle, var(--vg-bulb-core) 0 18%, var(--vg-gold) 40%, transparent 70%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.vg-star:nth-of-type(1) { --s: 16px; top: 14%; left: 10%; --td: 0ms; }
.vg-star:nth-of-type(2) { --s: 11px; top: 26%; right: 14%; --td: 900ms; }
.vg-star:nth-of-type(3) { --s: 13px; top: 8%; right: 38%; --td: 1700ms; }

html.js-motion .vg-star {
  animation: vg-twinkle var(--vg-d-twinkle) var(--vg-ease-in-out) calc(1600ms + var(--td, 0ms)) infinite alternate both;
}

/* ---------- Keyframes (vg-motion.css overrides them per mode) ---------- */

@keyframes vg-ignite-letter {
  0% { opacity: 0; }
  40% { opacity: .9; }
  55% { opacity: .7; }
  100% { opacity: 1; }
}

/* Two drops, once, one letter (WCAG 2.3.1: <= 3 drops per second, §4.7). */
@keyframes vg-faulty {
  0%, 100% { opacity: 1; }
  10% { opacity: .25; }
  18% { opacity: 1; }
  30% { opacity: .35; }
  40% { opacity: 1; }
}

@keyframes vg-power {
  from { opacity: .25; }
  to { opacity: 1; }
}

/* .35 -> 1 -> .35 at 0.56 Hz per layer. */
@keyframes vg-chase {
  0%, 100% { opacity: .35; }
  12% { opacity: 1; }
  33% { opacity: .35; }
}

@keyframes vg-twinkle {
  from { opacity: .45; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes vg-sheen {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes vg-glow-up {
  from { opacity: .55; }
  to { opacity: 1; }
}

@keyframes vg-sign-on {
  0% { opacity: 0; }
  60% { opacity: .8; }
  100% { opacity: 1; }
}