/* ==========================================================================
   Glowmigos — Hero: a lit marquee sign standing on a nighttime street
   ========================================================================== */

.hero {
  position: relative;
  display: grid; align-items: start;
  padding-block: calc(var(--ticker-h, 34px) + clamp(1.1rem, 0.6rem + 1.6vw, 2.1rem)) clamp(16rem, 15rem + 20vw, 32rem);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 80% at 50% 112%, rgba(255, 181, 17, calc(0.16 + var(--glow) * 0.2)), transparent 58%),
    radial-gradient(80% 60% at 8% 6%, rgba(241, 57, 183, 0.16), transparent 60%),
    radial-gradient(80% 60% at 94% 12%, rgba(9, 188, 235, 0.2), transparent 62%),
    linear-gradient(178deg, #06153A 0%, #071B4B 40%, #04102E 100%);
}

/* --- Star field: two cheap tiled layers, no images ---------------------- */
.hero__stars {
  position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 62%;
  z-index: var(--z-scene); pointer-events: none; opacity: 0.85;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 12%, rgba(198,230,255,.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 84% 32%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.1px 1.1px at 34% 8%,  rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 72% 46%, rgba(190,222,255,.5), transparent 60%),
    radial-gradient(1px   1px   at 8%  40%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 30%, rgba(255,255,255,.45), transparent 60%);
  background-repeat: repeat;
  background-size: 620px 420px;
}

/* Lighting rig: spotlights and lasers render here, behind the sign, so the
   beams rake past the headline instead of washing it out. */
.hero__rig {
  position: absolute; inset: 0; z-index: 2;
  inline-size: 100%; block-size: 100%;
  display: none; pointer-events: none;
}
[data-show="on"] .hero__rig { display: block; }
[data-motion="reduced"] .hero__rig { display: none !important; }

/* --- The street ---------------------------------------------------------- */
/* The street runs off the right edge; a flat ground band carries it across
   the rest of the width so the scene reads as a block, not a floating cutout. */
.hero__ground {
  position: absolute; inset-inline: 0; inset-block-end: -1px;
  block-size: clamp(4.5rem, 2rem + 9vw, 9.5rem);
  z-index: var(--z-scene); pointer-events: none;
  background: linear-gradient(180deg, #061537 0%, #040F2B 42%, #040F2B 100%);
}
.hero__scene {
  position: absolute; inset-block-end: -1px; inset-inline-end: 0;
  inline-size: min(68%, 1060px); z-index: var(--z-scene); pointer-events: none;
}
.hero__scene svg { inline-size: 100%; block-size: auto; }
/* Scrim so the sign always wins the contrast fight against the artwork. */
.hero__scene::before {
  content: ""; position: absolute; inset-block-start: -14%; inset-inline: 0; block-size: 46%;
  background: linear-gradient(180deg, rgba(6, 18, 48, 0.92), rgba(6, 18, 48, 0));
  pointer-events: none;
}

/* --- Content ------------------------------------------------------------ */
.hero__grid {
  position: relative; z-index: var(--z-content);
  display: grid; justify-items: center;
  gap: clamp(1.1rem, 0.8rem + 1.2vw, 1.75rem);
  perspective: 1400px;   /* gives the sign's parallax tilt something to tilt in */
}

/* Logo mounted on top of the sign, like a real illuminated topper. */
.hero__sign { display: grid; justify-items: center; inline-size: min(100%, 54rem); will-change: transform; }
.hero__logo {
  position: relative; z-index: 3; isolation: isolate;
  inline-size: clamp(232px, 46vw, 430px);
  margin-block-end: clamp(-4.4rem, -1.4rem - 3.4vw, -1.6rem);
  transition: rotate var(--d-slow) var(--e-out), scale var(--d-slow) var(--e-out);
}
.hero__logo img { inline-size: 100%; }
.hero__logo::before {
  content: ""; position: absolute; inset: 2% 4% 16%; z-index: -1; border-radius: 50%;
  background:
    radial-gradient(58% 58% at 38% 46%, rgba(255, 213, 42, 0.46), rgba(255, 181, 17, 0.14) 46%, transparent 72%),
    radial-gradient(56% 56% at 66% 48%, rgba(9, 188, 235, 0.4), rgba(9, 188, 235, 0.12) 48%, transparent 72%);
  opacity: calc(0.32 + var(--glow) * 0.6);
  transition: opacity var(--d-slow) var(--e-out);
}
[data-show="on"] .hero__logo::before { animation: halo-pulse 4.4s var(--e-inout) infinite; }
@keyframes halo-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.hero__logo:hover { scale: 1.02; rotate: -0.8deg; }
.hero__logo.is-bouncing { animation: amigo-bounce 780ms var(--e-pop); }
@keyframes amigo-bounce {
  0%   { transform: translateY(0)     scaleY(1); }
  28%  { transform: translateY(-14px) scaleY(1.04); }
  52%  { transform: translateY(0)     scaleY(0.95); }
  74%  { transform: translateY(-5px)  scaleY(1.02); }
  100% { transform: translateY(0)     scaleY(1); }
}

/* Higher specificity than marquee.css's padding shorthand, which loads later. */
.hero .marquee { inline-size: 100%; padding-block-start: clamp(5.9rem, 3.6rem + 6.4vw, 7.6rem); }

/* --- Scroll cue: a pull-chain hanging over the dark foreground --------- */
.hero__chain {
  position: absolute; inset-block-end: clamp(1.4rem, 0.8rem + 2vw, 2.6rem);
  inset-inline-start: 50%; translate: -50% 0; z-index: var(--z-content);
  display: grid; justify-items: center; gap: 0.4rem;
  font-size: 0.64rem; font-weight: 800; letter-spacing: var(--tr-wider);
  text-transform: uppercase; text-decoration: none;
  color: var(--t-bright);
}
/* The cue sits over the artwork, so it carries its own plate. */
.hero__chain span:last-child, .hero__chain { --chain-pad: 0; }
.hero__chain::after {
  content: attr(data-label);
  padding: 0.42em 0.9em;
  border-radius: var(--r-pill);
  background: rgba(4, 16, 46, 0.82);
  border: 1px solid rgba(255, 181, 17, 0.3);
}
.hero__chain::before {
  content: ""; inline-size: 1px; block-size: 2.4rem;
  background: linear-gradient(180deg, transparent, rgba(137, 176, 255, 0.55));
}
.hero__chain-ball {
  inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 calc(8px + var(--glow) * 16px) rgba(255, 181, 17, 0.9);
  animation: chain-tug 3.4s var(--e-inout) infinite;
}
@keyframes chain-tug { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.hero__chain:hover { color: var(--c-sun); }
.hero__chain:hover .hero__chain-ball { transform: translateY(7px); }

/* --------------------------------------------------------------------------
   Scene fixtures.
   Each run is a single stroked path with a round dash pattern — one element
   per strand instead of sixty circles, and it scales perfectly.
   -------------------------------------------------------------------------- */
.hero-strand {
  opacity: calc(0.86 + var(--glow) * 0.14);
  transition: opacity var(--d-slow) var(--e-out);
}
.hero-strand--bloom { opacity: calc(0.3 + var(--glow) * 0.24); }

.hero-win rect { fill: var(--l-warm); opacity: 0.9; }
.hero-win rect:nth-child(2n) { fill: var(--l-warmer); opacity: 0.78; }
.hero-win rect:last-child { fill: var(--l-warmer); opacity: 0.95; }

.hero-cone, .hero-uplight path { opacity: calc(0.5 + var(--glow) * 0.34); transition: opacity var(--d-slow) var(--e-out); }
.glow-pool { transition: opacity var(--d-slow) var(--e-out); }

[data-show="on"] .hero-win rect { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-show="on"] .hero-strand { animation: strand-breathe 5.5s var(--e-inout) infinite; }
  @keyframes strand-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .hero { padding-block-end: clamp(11rem, 7rem + 26vw, 17rem); }
  .hero__scene { inline-size: 132%; inset-inline-end: -16%; }
  .badges .badge:last-child { display: none; }
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .hero__scene { inline-size: 92%; }
}

/* The tag sits above the sign, the way a real marquee is topped. */
.hero__tag { margin-block-end: clamp(0.6rem, 0.3rem + 1vw, 1.1rem); }

/* --------------------------------------------------------------------------
   The amigos dance.
   With SITE.partyLogo set, light-show.js crossfades to that artwork and this
   drives it. Without it, the same motion runs on the standard lockup —
   the pivot sits low so the characters swing further than the wordmark.
   -------------------------------------------------------------------------- */
.hero__logo-party {
  position: absolute; inset-block-start: 0; inset-inline: 0;
  display: block; inline-size: 100%;
  opacity: 0; pointer-events: none;
  transition: opacity 520ms var(--e-out), transform 620ms var(--e-pop);
  transform: scale(0.94);
}
.hero__logo-party img { inline-size: 100%; block-size: auto; }
.hero__logo-still { display: block; }
.hero__logo.is-party .hero__logo-party { opacity: 1; transform: none; }
.hero__logo.is-party .hero__logo-still { opacity: 0; transition: opacity 520ms var(--e-out); }
.hero__logo-still { transition: opacity 520ms var(--e-out); }

@media (prefers-reduced-motion: no-preference) {
  [data-show="on"] .hero__logo {
    transform-origin: 50% 84%;
    animation: amigo-dance var(--dance, 1.85s) var(--e-inout) infinite;
  }
  @keyframes amigo-dance {
    0%   { transform: translateY(0)    rotate(0deg)    scaleY(1); }
    14%  { transform: translateY(-10px) rotate(-1.7deg) scaleY(1.025); }
    28%  { transform: translateY(0)    rotate(-0.2deg) scaleY(0.985); }
    46%  { transform: translateY(-8px) rotate(1.6deg)  scaleY(1.02); }
    60%  { transform: translateY(0)    rotate(0.2deg)  scaleY(0.99); }
    78%  { transform: translateY(-5px) rotate(-0.8deg) scaleY(1.012); }
    100% { transform: translateY(0)    rotate(0deg)    scaleY(1); }
  }
  /* The bounce cue interrupts the dance, then the dance resumes. */
  [data-show="on"] .hero__logo.is-bouncing { animation: amigo-bounce 780ms var(--e-pop); }
}

/* --------------------------------------------------------------------------
   Aurora — slow colour drifting behind the star field.
   Soft radial gradients rather than blur filters, and transform-only motion,
   so four full-screen colour fields cost almost nothing.
   -------------------------------------------------------------------------- */
.hero__aurora {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.hero__aurora span {
  position: absolute;
  inset-inline-start: var(--ax); inset-block-start: var(--ay);
  inline-size: var(--aw); block-size: var(--ah);
  margin: calc(var(--ah) / -2) 0 0 calc(var(--aw) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ac), transparent 72%);
  opacity: calc(0.7 + var(--glow) * 0.3);
  will-change: transform;
  transition: opacity var(--d-slow) var(--e-out);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__aurora span {
    animation: aurora-drift var(--at, 26s) var(--e-inout) var(--ad, 0s) infinite alternate;
  }
  @keyframes aurora-drift {
    from { transform: translate3d(-4%, -3%, 0) scale(1); }
    to   { transform: translate3d(7%, 5%, 0) scale(1.2); }
  }
}

/* --------------------------------------------------------------------------
   Extruded type. The wordmark is beveled, so the headline is beveled too —
   a stack of hard shadows reads as depth, one soft one grounds it.
   -------------------------------------------------------------------------- */
.marquee__title {
  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__script { text-shadow: 0 3px 12px rgba(2, 8, 24, 0.85); }

/* The lockup gets a cast shadow so it sits above the sign rather than on it. */
.hero__logo::after {
  content: ""; position: absolute; z-index: -2;
  inset-inline: 14%; inset-block-end: 4%; block-size: 10%;
  background: radial-gradient(closest-side, rgba(1, 6, 18, 0.75), transparent 76%);
}

/* --------------------------------------------------------------------------
   "Click me" — points at the switch until someone actually throws it.
   -------------------------------------------------------------------------- */
.cta-nudge { position: relative; display: inline-flex; }

.clickme {
  position: absolute; inset-block-end: calc(100% + 4px); inset-inline-start: -26px;
  display: flex; align-items: flex-end;
  color: var(--c-red); pointer-events: none;
  transition: opacity var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.clickme__badge {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(0.62rem, 0.56rem + 0.24vw, 0.75rem);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: #FFFFFF; white-space: nowrap;
  padding: 0.45em 0.85em; border-radius: var(--r-pill);
  background: linear-gradient(180deg, #FF5A50, #E0261B);
  border: 2px solid #FFD5D1;
  box-shadow: 0 10px 26px -10px rgba(255, 59, 48, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: rotate(-5deg);
}
.clickme__arrow {
  inline-size: clamp(40px, 3.4vw, 54px); block-size: auto;
  margin-inline-start: -2px; margin-block-end: -10px;
}

@media (prefers-reduced-motion: no-preference) {
  .clickme { animation: clickme-bob 1.7s var(--e-inout) infinite; }
  @keyframes clickme-bob {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(4px, -7px, 0); }
  }
}

/* It has done its job the moment the switch is thrown. */
.show-used .clickme,
[data-show="on"] .clickme {
  opacity: 0; animation: none;
  transform: translateY(8px) scale(0.86);
}

@media (max-width: 47.99rem) {
  .clickme { inset-inline-start: 50%; translate: -50% 0; inset-block-end: calc(100% + 2px); }
  .clickme__arrow { display: none; }
}