/* ==========================================================================
   Glowmigos — Showtime furniture: the ticker, the marquee sign, the badges
   A lighting company should have a marquee. So: an actual marquee, with
   actual chasing bulbs, generated to fit whatever size the sign ends up.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ticker strip — the sign above the sign.
   -------------------------------------------------------------------------- */
.ticker {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: calc(var(--z-nav) + 1);
  block-size: var(--ticker-h, 34px);
  display: flex; align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #FFD52A, #FFB511 62%, #E89B00);
  border-block-end: 2px solid #08183C;
  box-shadow: 0 6px 22px -10px rgba(255, 181, 17, 0.85);
  color: #2A1A00;
}
.ticker__run {
  display: flex; flex: none; align-items: center;
  gap: 0; white-space: nowrap;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .ticker__run { animation: ticker-roll 46s linear infinite; }
  .ticker:hover .ticker__run { animation-play-state: paused; }
}
@keyframes ticker-roll { to { transform: translate3d(-50%, 0, 0); } }

.ticker__item {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding-inline: 0.85rem;
  font-family: var(--f-display); font-weight: 800;
  font-size: 0.68rem; letter-spacing: var(--tr-wider); text-transform: uppercase;
}
.ticker__sep {
  inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none;
  background: #2A1A00;
  box-shadow: inset 0 0 0 2px #FFE9A0;
}

/* --------------------------------------------------------------------------
   2. The marquee sign.
   The bulb ring is generated by marquee.js from the box's real geometry, so
   it stays a proper marquee at every breakpoint instead of a stretched image.
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem) clamp(1.35rem, 0.8rem + 3.4vw, 3.4rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(16, 48, 122, 0.92), rgba(4, 16, 46, 0.94) 70%);
  border: 2px solid rgba(255, 181, 17, 0.5);
  box-shadow:
    0 40px 90px -50px #000,
    inset 0 0 60px -20px rgba(255, 181, 17, 0.35);
}
/* Inner hairline — real signs have a double bezel. */
.marquee::after {
  content: ""; position: absolute; inset: 9px;
  border-radius: calc(var(--r-xl) - 8px);
  border: 1px solid rgba(255, 213, 42, 0.22);
  pointer-events: none;
}
.marquee__bulbs {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: visible;
}
.marquee__bulbs svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.mb__glow { fill: var(--mbc, #FFD52A); opacity: 0.22; }
.mb__core { fill: #FFF4E2; }
.mb { opacity: 0.42; }
@media (prefers-reduced-motion: no-preference) {
  .mb { animation: mb-chase 1.6s steps(1, end) infinite; animation-delay: calc(var(--i) * -400ms); }
  @keyframes mb-chase {
    0%, 24%   { opacity: 1; }
    25%, 100% { opacity: 0.36; }
  }
}
[data-show="on"] .mb { --mbc: var(--mbs, #FFD52A); }
[data-show="on"] .mb__core { fill: var(--mbs, #FFF4E2); }

.marquee__inner { position: relative; z-index: 2; display: grid; gap: clamp(0.9rem, 0.6rem + 1vw, 1.35rem); justify-items: center; text-align: center; }
.marquee__title { max-inline-size: 15ch; }
/* Extruded gradient type, in two layers.
   The element paints the hard-shadow stack with no fill; ::before paints the
   gradient copy on top as in-flow content. Doing it the other way round (a
   negative z-index shadow layer) loses to the element's own background, and a
   filter on a background-clip:text element rasterises the gradient away. */
.marquee__title em {
  font-style: normal; display: inline-block; position: relative;
  background: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 #17417f, 0 2px 0 #143b76, 0 3px 0 #12356c,
    0 4px 0 #102f62, 0 5px 0 #0e2958, 0 6px 0 #0c244e,
    0 7px 0 #0a1f45, 0 8px 0 #081a3b,
    0 14px 30px rgba(0, 0, 0, 0.6);
}
.marquee__title em::before {
  content: attr(data-text);
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 100%;
  background: linear-gradient(96deg, var(--c-sun), var(--c-gold) 38%, var(--c-cyan));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none;
  pointer-events: none;
}
.marquee__sub { font-size: var(--fs-lead); color: var(--t-body); max-inline-size: 46ch; }
.marquee__sub b { color: var(--t-bright); font-weight: 600; }

/* The gold script-feel accent line. */
.marquee__script {
  font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.3rem);
  font-weight: 600; font-style: italic;
  color: var(--c-sun);
  letter-spacing: 0.01em;
}

.marquee__actions {
  display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center;
  margin-block-start: 0.35rem;
}

/* --------------------------------------------------------------------------
   3. Badge rail — lifted straight off the logo's own tagline strip.
   -------------------------------------------------------------------------- */
.badges {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem clamp(0.4rem, 0.2rem + 1vw, 1rem);
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 181, 17, 0.28);
  background: rgba(4, 16, 46, 0.7);
}
.badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(0.58rem, 0.5rem + 0.24vw, 0.7rem);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--t-muted);
}
.badge .bulb { inline-size: 0.45rem; block-size: 0.45rem; }

/* --------------------------------------------------------------------------
   4. Neon confetti — transform-only, so it costs nothing to animate.
   -------------------------------------------------------------------------- */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: var(--z-scene); }
.confetti span {
  position: absolute;
  inline-size: var(--w, 26px); block-size: var(--h, 26px);
  background: var(--cc, var(--c-cyan));
  opacity: calc(0.1 + var(--glow) * 0.14);
  border-radius: var(--cr, 3px);
  will-change: transform;
  transition: opacity var(--d-slow) var(--e-out);
}
@media (prefers-reduced-motion: no-preference) {
  .confetti span { animation: confetti-float var(--cd, 14s) var(--e-inout) infinite alternate; animation-delay: calc(var(--i) * -1.7s); }
  @keyframes confetti-float {
    from { transform: translate3d(0, 0, 0) rotate(var(--cro, 0deg)); }
    to   { transform: translate3d(0, -26px, 0) rotate(calc(var(--cro, 0deg) + 18deg)); }
  }
}

/* --------------------------------------------------------------------------
   5. Bigger, chunkier calls to action.
   -------------------------------------------------------------------------- */
.btn--xl {
  min-block-size: 3.65rem; padding: 1rem 2rem;
  font-size: clamp(0.8rem, 0.74rem + 0.24vw, 0.95rem);
  border-radius: var(--r-lg);
}
.btn--xl.btn--primary { border: 2px solid #FFE9A0; }
.btn--xl.btn--ghost { border-width: 2px; }