/* ==========================================================================
   Glowmigos — Hero: one street, from 4:30 PM to 9:15 PM
   Everything keys off --dusk (0 = daylight, 1 = night), written by
   daylight.js. Sky layers cross-fade, the sun drops, and each lighting
   system comes on at its own moment. Only opacity and transform move.
   ========================================================================== */

.hero {
  --dusk: 0;
  /* Helpers: each system's "on" amount, 0..1, clamped. */
  --on-landscape: clamp(0, calc((var(--dusk) - 0.50) * 6), 1);
  --on-windows:   clamp(0, calc((var(--dusk) - 0.58) * 6), 1);
  --on-patio:     clamp(0, calc((var(--dusk) - 0.64) * 6), 1);
  --on-roof:      clamp(0, calc((var(--dusk) - 0.76) * 6), 1);
  --on-night:     clamp(0, calc((var(--dusk) - 0.70) * 3.4), 1);
  --on-golden:    clamp(0, calc(1 - abs(var(--dusk) - 0.36) * 3.2), 1);

  position: relative;
  display: grid; align-items: start;
  min-block-size: 100svh;
  padding-block: calc(4.6rem + clamp(0.6rem, 0.2rem + 1.2vw, 1.6rem)) clamp(3.5rem, 2rem + 4vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
  background: #04102E;
}

/* --- Sky: three layers cross-faded ------------------------------------- */
.hero__sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__sky span { position: absolute; inset: 0; transition: none; }
.hero__sky-day    { background: linear-gradient(180deg, #5FB2F2 0%, #9DD3FF 46%, #E8F3FF 100%); opacity: clamp(0, calc(1 - var(--dusk) * 1.9), 1); }
.hero__sky-golden { background: linear-gradient(180deg, #4A3B8F 0%, #C9557A 38%, #FF9A4A 66%, #FFD59A 100%); opacity: var(--on-golden); }
.hero__sky-night  {
  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%);
  opacity: clamp(0, calc((var(--dusk) - 0.42) * 2.2), 1);
}

/* The sun: drops as dusk rises, warms, then goes. */
.hero__sun {
  position: absolute; z-index: 0; pointer-events: none;
  inset-inline-start: 14%; inset-block-start: 10%;
  inline-size: clamp(4.5rem, 9vw, 8rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #FFFBEA, #FFE27A 40%, rgba(255, 181, 17, 0.0) 70%);
  box-shadow: 0 0 60px 20px rgba(255, 220, 120, 0.45);
  transform: translate3d(0, calc(var(--dusk) * 62vh), 0) scale(calc(1 + var(--dusk) * 0.9));
  opacity: clamp(0, calc(1 - (var(--dusk) - 0.34) * 4), 1);
  will-change: transform, opacity;
}
.hero__moon {
  position: absolute; z-index: 0; pointer-events: none;
  inset-inline-end: 12%; inset-block-start: 8%;
  inline-size: clamp(1.4rem, 2.4vw, 2.2rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #FFFFFF, #DCE8FF 70%);
  box-shadow: 0 0 28px 6px rgba(220, 232, 255, 0.28);
  opacity: var(--on-night);
  transform: translate3d(0, calc((1 - var(--dusk)) * -12vh), 0);
}

/* --- Star field: two cheap tiled layers, no images ---------------------- */
.hero__stars {
  position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 62%;
  z-index: 1; pointer-events: none;
  opacity: calc(var(--on-night) * 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. */
.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 ---------------------------------------------------------- */
.hero__ground {
  position: absolute; inset-inline: 0; inset-block-end: -1px;
  block-size: clamp(2.2rem, 1rem + 3vw, 3.6rem);
  z-index: 1; pointer-events: none;
  background: #040F2B;
}
.hero__ground::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #7C9E5A, #5E7F44);
  opacity: clamp(0, calc(1 - var(--dusk) * 1.6), 1);
}
.hero__scene {
  position: relative; inline-size: 100%; z-index: 1; pointer-events: none;
  /* Feather the artwork into the sky so the block has no hard edges. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, #000 72%, transparent 99%);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, #000 72%, transparent 99%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero__scene svg { inline-size: 100%; block-size: auto; display: block; }

/* Scene materials: night defaults; where color-mix is available they slide
   toward daylight as --dusk falls. */
.hero__scene {
  --sc-land: #05132F; --sc-hill: #061838; --sc-ground: #040F2B; --sc-walk: #0A1B3C;
  --sc-post: #0A1B3C; --sc-beam: #102450; --sc-wall: #0C2149; --sc-wing: #0A1D42; --sc-fascia: #12295A;
  --sc-glass: #0C2149; --sc-garage: #0E2350; --sc-garage-line: #193262;
  --sc-shrub: #0A2038; --sc-trunk: #0A1B3C; --sc-canopy: #0A2038; --sc-stem: #16264A;
}
@supports (color: color-mix(in oklab, red calc(1 * 50%), blue)) {
  .hero__scene {
    --day: calc((1 - var(--dusk)) * 100%);
    --sc-land: color-mix(in oklab, #6F9A57 var(--day), #05132F);
    --sc-hill: color-mix(in oklab, #5C8A47 var(--day), #061838);
    --sc-ground: color-mix(in oklab, #7C9E5A var(--day), #040F2B);
    --sc-walk: color-mix(in oklab, #CFC7B7 var(--day), #0A1B3C);
    --sc-post: color-mix(in oklab, #8C7A63 var(--day), #0A1B3C);
    --sc-beam: color-mix(in oklab, #A5917A var(--day), #102450);
    --sc-wall: color-mix(in oklab, #E8E0D2 var(--day), #0C2149);
    --sc-wing: color-mix(in oklab, #DCD2C1 var(--day), #0A1D42);
    --sc-fascia: color-mix(in oklab, #F7F3EC var(--day), #12295A);
    --sc-glass: color-mix(in oklab, #7FA3C4 var(--day), #0C2149);
    --sc-garage: color-mix(in oklab, #D7CFC1 var(--day), #0E2350);
    --sc-garage-line: color-mix(in oklab, #BFB6A8 var(--day), #193262);
    --sc-shrub: color-mix(in oklab, #5C8E3E var(--day), #0A2038);
    --sc-trunk: color-mix(in oklab, #6B4F35 var(--day), #0A1B3C);
    --sc-canopy: color-mix(in oklab, #4E8A3A var(--day), #0A2038);
    --sc-stem: color-mix(in oklab, #7E7462 var(--day), #16264A);
  }
}
.sc-land { fill: var(--sc-land); } .sc-hill { fill: var(--sc-hill); } .sc-ground { fill: var(--sc-ground); } .sc-walk { fill: var(--sc-walk); }
.sc-post { fill: var(--sc-post); } .sc-beam { fill: var(--sc-beam); } .sc-wall { fill: var(--sc-wall); } .sc-wing { fill: var(--sc-wing); } .sc-fascia { fill: var(--sc-fascia); }
.sc-glass { fill: var(--sc-glass); } .sc-garage { fill: var(--sc-garage); } .sc-garage-line { stroke: var(--sc-garage-line); stroke-width: 2; fill: none; }
.sc-shrub { fill: var(--sc-shrub); } .sc-trunk { fill: var(--sc-trunk); } .sc-canopy { fill: var(--sc-canopy); } .sc-stem { fill: var(--sc-stem); }

/* Fixtures come on in order: landscape, windows, patio, roofline. */
.hero-strand--roof { opacity: calc(var(--on-roof) * (0.86 + var(--glow) * 0.14)); }
.hero-strand--roof.hero-strand--bloom { opacity: calc(var(--on-roof) * (0.3 + var(--glow) * 0.24)); }
.hero-strand--patio { opacity: calc(var(--on-patio) * (0.86 + var(--glow) * 0.14)); }
.hero-strand--patio.hero-strand--bloom { opacity: calc(var(--on-patio) * (0.3 + var(--glow) * 0.24)); }
.hero-wire { opacity: calc(0.6 + var(--on-night) * 0.4); }
.hero-win rect { fill: var(--l-warm); opacity: calc(var(--on-windows) * 0.9); }
.hero-win rect:nth-child(2n) { fill: var(--l-warmer); opacity: calc(var(--on-windows) * 0.78); }
.hero-win rect:last-child { fill: var(--l-warmer); opacity: calc(var(--on-windows) * 0.95); }
.hero-spill { opacity: calc(var(--on-windows) * 0.32); }
.hero-cone, .hero-uplight path { opacity: calc(var(--on-landscape) * (0.5 + var(--glow) * 0.34)); }
.glow-pool { opacity: calc(var(--on-landscape) * 0.45); }
.hero-path circle { fill: var(--sc-stem); }
.hero-path ellipse { opacity: var(--on-landscape); }
.hero[data-phase="night"] .hero-path circle, .hero[data-phase="dusk"] .hero-path circle { fill: #FFE6BE; }

[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; } }
}

/* --- Content ------------------------------------------------------------ */
.hero__grid {
  position: relative; z-index: var(--z-content);
  display: grid; justify-items: center; align-items: center;
  gap: clamp(1.4rem, 1rem + 2vw, 3rem);
  perspective: 1400px;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); }
}
.hero__sign { display: grid; justify-items: center; inline-size: min(100%, 44rem); will-change: transform; }
/* The house: the thing the sign is pointing at. */
.hero__stage { display: grid; gap: 0.9rem; inline-size: 100%; align-self: center; }
.hero__logo {
  position: relative; z-index: 3; isolation: isolate;
  inline-size: clamp(210px, 40vw, 320px);
  margin-block-end: clamp(-3.4rem, -1.2rem - 2.4vw, -1.4rem);
  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) * var(--on-night));
}
[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); }
}
.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%);
}

.hero .marquee { inline-size: 100%; padding: clamp(4.2rem, 3rem + 3.2vw, 5.4rem) clamp(1.2rem, 0.8rem + 2vw, 2.4rem) clamp(1.4rem, 1rem + 1.4vw, 2rem); }
.hero .marquee__inner { gap: clamp(0.6rem, 0.4rem + 0.6vw, 0.9rem); }
.hero .marquee__title { font-size: clamp(2.1rem, 1.5rem + 2.3vw, 3.3rem); }
.hero .marquee__sub { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem); }
.hero .marquee__sub b { margin-block-start: 0.35em; }
.hero .marquee__actions { margin-block-start: clamp(0.9rem, 0.6rem + 0.8vw, 1.3rem); }
.hero .marquee__actions--party { margin-block-start: clamp(2.6rem, 2rem + 1.2vw, 3.2rem); }
.hero .btn--xl { min-block-size: 3.2rem; padding: 0.8rem 1.5rem; }

/* Daylight: the marquee is a real sign with its bulbs off. */
.hero[data-lit="off"] .mb { animation: none; opacity: 0.22; }
.hero[data-lit="off"] .mb__core { fill: #B9B2A4; }
.hero[data-lit="off"] .mb__glow { opacity: 0; }
.hero[data-lit="off"] .marquee { box-shadow: 0 40px 90px -50px #000; border-color: rgba(255, 181, 17, 0.28); }
.hero[data-lit="off"] .marquee__script { color: var(--t-muted); }
.marquee__script { transition: color 700ms var(--e-out); }
.marquee { transition: box-shadow 700ms var(--e-out), border-color 700ms var(--e-out); }

.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 DAY ●──○ NIGHT control ---------------------------------------- */
.hero__control {
  position: relative; z-index: var(--z-content);
  inline-size: min(100%, 30rem); justify-self: center;
  display: grid; gap: 0.5rem;
  padding: 0.8rem 1rem 0.7rem;
  border-radius: var(--r-lg);
  background: rgba(4, 16, 46, 0.78);
  border: 1px solid rgba(255, 181, 17, 0.3);
  box-shadow: 0 20px 50px -30px #000;
}
@supports (backdrop-filter: blur(6px)) { .hero__control { backdrop-filter: blur(10px); background: rgba(4, 16, 46, 0.62); } }
.hero__clock { display: flex; align-items: baseline; gap: 0.7rem; }
.hero__clock-time { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--c-sun); line-height: 1; }
.hero__clock-note { font-size: 0.78rem; color: var(--t-body); }
.dayslider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; }
.dayslider__label { font-family: var(--f-display); font-weight: 800; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-muted); }
.dayslider .range { --range-track: linear-gradient(90deg, #9DD3FF, #FF9A4A 40%, #1A2A63 75%, #071B4B); block-size: 1.8rem; }
.dayslider .range::-webkit-slider-thumb { background: radial-gradient(circle at 40% 35%, #FFFBEA, #FFE27A 55%, var(--c-gold)); }
.dayslider .range::-moz-range-thumb { background: radial-gradient(circle at 40% 35%, #FFFBEA, #FFE27A 55%, var(--c-gold)); }

/* Aurora — night only. */
.hero__aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: var(--on-night); }
.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;
}
@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); }
  }
}
.confetti { opacity: var(--on-night); }

/* --- Party lockup + dance ---------------------------------------------- */
.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; transition: opacity 520ms var(--e-out); }
.hero__logo.is-party .hero__logo-party { opacity: 1; transform: none; }
.hero__logo.is-party .hero__logo-still { opacity: 0; }
@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); }
  }
  [data-show="on"] .hero__logo.is-bouncing { animation: amigo-bounce 780ms var(--e-pop); }
}

/* --- CLICK ME nudge ------------------------------------------------------ */
.cta-nudge { position: relative; display: inline-flex; }
.clickme {
  position: absolute; inset-block-end: calc(100% - 0.6rem); inset-inline-end: -0.6rem;
  display: grid; justify-items: end; gap: 0.1rem; pointer-events: none;
  color: var(--c-red); z-index: 2;
}
.clickme__badge {
  font-family: var(--f-display); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--c-red); padding: 0.28em 0.6em; border-radius: var(--r-pill);
  transform: rotate(-6deg); box-shadow: 0 6px 18px -8px rgba(255, 59, 48, 0.9);
}
.clickme__arrow { inline-size: 54px; block-size: auto; margin-inline-end: 0.6rem; }
@media (prefers-reduced-motion: no-preference) {
  .clickme { animation: clickme-bob 1.6s var(--e-inout) infinite; }
  @keyframes clickme-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
}
[data-show="on"] .clickme { display: none; }

/* --- Breakpoints -------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .hero { min-block-size: 0; }
  .clickme { inset-inline-end: 50%; translate: 50% 0; justify-items: center; }
  .clickme__arrow { inline-size: 34px; margin: 0; }
  .showbtn { inline-size: 100%; justify-content: center; }
  .showbtn__label { letter-spacing: 0.07em; white-space: nowrap; }
}