/* Hope Taps · premium layer
   1) living midnight-sapphire backdrop behind every section
   2) the scroll-driven sunrise for "In under a week" */

/* ───────── 1 · BACKDROP ───────── */
html { background: #03061a; }
body { background: transparent !important; color: var(--ink); }
#shell { position: relative; z-index: 1; }

.lux-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, #0e1a5c 0%, rgba(14, 26, 92, 0) 60%),
    linear-gradient(180deg, #040824 0%, #050a2a 45%, #03061c 100%);
}
.lux-sky i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.lux-a {
  width: 90vmax; height: 90vmax; left: -30vmax; top: -25vmax;
  background: radial-gradient(closest-side, rgba(52, 92, 235, 0.30), rgba(52, 92, 235, 0.08) 55%, rgba(52, 92, 235, 0) 72%);
  animation: luxDriftA 38s ease-in-out infinite alternate;
}
.lux-b {
  width: 80vmax; height: 80vmax; right: -32vmax; top: 18vh;
  background: radial-gradient(closest-side, rgba(118, 64, 220, 0.24), rgba(118, 64, 220, 0.06) 55%, rgba(118, 64, 220, 0) 72%);
  animation: luxDriftB 46s ease-in-out infinite alternate;
}
.lux-c {
  width: 70vmax; height: 70vmax; left: 10vw; bottom: -42vmax;
  background: radial-gradient(closest-side, rgba(212, 162, 60, 0.16), rgba(212, 162, 60, 0.04) 55%, rgba(212, 162, 60, 0) 72%);
  animation: luxDriftC 52s ease-in-out infinite alternate;
}
.lux-dust {
  left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%;
  background: transparent;
  box-shadow:
    7vw 12vh 0 0.5px rgba(214, 226, 255, 0.55), 19vw 31vh 0 0 rgba(255, 220, 150, 0.6), 33vw 8vh 0 0.4px rgba(214, 226, 255, 0.45),
    46vw 22vh 0 0 rgba(214, 226, 255, 0.5), 58vw 5vh 0 0.6px rgba(255, 220, 150, 0.5), 71vw 27vh 0 0 rgba(214, 226, 255, 0.55),
    84vw 14vh 0 0.4px rgba(214, 226, 255, 0.5), 93vw 38vh 0 0 rgba(255, 220, 150, 0.45), 4vw 52vh 0 0 rgba(214, 226, 255, 0.4),
    15vw 68vh 0 0.5px rgba(214, 226, 255, 0.45), 27vw 84vh 0 0 rgba(255, 220, 150, 0.45), 39vw 59vh 0 0 rgba(214, 226, 255, 0.4),
    52vw 76vh 0 0.4px rgba(214, 226, 255, 0.5), 64vw 49vh 0 0 rgba(255, 220, 150, 0.5), 77vw 63vh 0 0.5px rgba(214, 226, 255, 0.4),
    89vw 81vh 0 0 rgba(214, 226, 255, 0.45), 97vw 58vh 0 0.3px rgba(255, 220, 150, 0.4), 11vw 93vh 0 0 rgba(214, 226, 255, 0.4),
    43vw 96vh 0 0.4px rgba(214, 226, 255, 0.35), 68vw 91vh 0 0 rgba(255, 220, 150, 0.4);
  animation: luxTwinkle 6s ease-in-out infinite alternate;
}
.lux-dust2 {
  transform: translate(3.5vw, 6vh);
  opacity: 0.7;
  animation-duration: 8s;
  animation-delay: -3s;
}
.lux-sky::after {
  /* fine film grain so gradients never band */
  content: "";
  position: absolute;
  inset: -50%;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes luxDriftA { to { transform: translate3d(14vw, 10vh, 0) scale(1.08); } }
@keyframes luxDriftB { to { transform: translate3d(-12vw, 14vh, 0) scale(1.12); } }
@keyframes luxDriftC { to { transform: translate3d(18vw, -8vh, 0) scale(0.94); } }
@keyframes luxTwinkle { from { opacity: 0.35; } to { opacity: 1; } }

/* let the backdrop through every section, then light each one */
section.sec,
.comparison-section,
#contact,
.footer { background: transparent !important; }
section.sec,
.comparison-section,
#contact {
  background:
    linear-gradient(90deg, rgba(212, 162, 60, 0), rgba(212, 162, 60, 0.4), rgba(242, 209, 138, 0.65), rgba(212, 162, 60, 0.4), rgba(212, 162, 60, 0)) 50% 0 / min(1100px, 90vw) 1px no-repeat,
    radial-gradient(50% 100% at 50% 0%, rgba(80, 118, 255, 0.13), rgba(80, 118, 255, 0) 70%) 50% 0 / 100% 380px no-repeat !important;
}
#shell { background: transparent !important; }
.footer { border-top: 1px solid rgba(212, 162, 60, 0.22) !important; background: linear-gradient(180deg, rgba(3, 6, 26, 0.4), rgba(3, 6, 26, 0.9)) !important; }
#navbar.scrolled { background: rgba(4, 8, 34, 0.82) !important; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }

@media (prefers-reduced-motion: reduce) {
  .lux-sky i { animation: none !important; }
}

/* ───────── 2 · SUNRISE ───────── */
.sunrise { position: relative; height: 420vh; background: #02041a; }
.sr-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sr-shade {
  position: absolute; inset: 0 0 auto; height: 28vh; pointer-events: none;
  background: linear-gradient(180deg, #040824, rgba(4, 8, 36, 0));
}
.sunrise .page-marker { top: 96px; z-index: 4; color: rgba(220, 229, 255, 0.7); }
.sr-ui {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: clamp(104px, 14vh, 150px) !important;
  padding-bottom: clamp(28px, 6vh, 64px) !important;
}
.sr-head { position: relative; align-self: flex-start; }
.sr-head::before {
  content: ""; position: absolute; z-index: -1; left: -12vw; top: -14vh; width: calc(100% + 30vw); height: calc(100% + 28vh);
  background: radial-gradient(closest-side, rgba(4, 8, 40, 0.5), rgba(4, 8, 40, 0));
  opacity: 0; transition: opacity 0.8s;
}
.sunrise.is-day .sr-head::before { opacity: 1; }
.sr-head .sec-h { margin-top: 22px; text-shadow: 0 2px 30px rgba(2, 4, 26, 0.45); }
.sr-head .eyebrow { text-shadow: 0 1px 12px rgba(2, 4, 26, 0.6); }

.sr-panel {
  width: min(560px, 100%);
  padding: 22px 26px 26px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(10, 17, 58, 0.78), rgba(4, 8, 34, 0.86));
  border: 1px solid rgba(212, 162, 60, 0.32);
  box-shadow: 0 30px 80px -30px rgba(2, 4, 26, 0.9), inset 0 1px 0 rgba(242, 209, 138, 0.18), 0 0 60px -20px rgba(212, 162, 60, 0.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.sr-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.sr-tab { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(220, 229, 255, 0.45); transition: color 0.5s; }
.sr-tab i { display: block; height: 3px; margin-bottom: 12px; border-radius: 3px; background: rgba(220, 229, 255, 0.14); overflow: hidden; }
.sr-tab b { display: block; height: 100%; background: linear-gradient(90deg, #A8751E, #F2D18A); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 10px rgba(242, 209, 138, 0.7); }
.sr-tab.lit { color: #F2D18A; }
.sr-cards { display: grid; }
.sr-card {
  grid-area: 1 / 1;
  display: flex; align-items: flex-start; gap: 20px;
  opacity: 0; transform: translateY(18px); filter: blur(4px);
  transition: opacity 0.55s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.55s ease;
}
.sr-card.past { transform: translateY(-18px); }
.sr-card.on { opacity: 1; transform: none; filter: none; }
.sr-num {
  flex: none; min-width: 1.1em;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 68px; line-height: 0.82; letter-spacing: -0.04em;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(212, 162, 60, 0.35));
}
.sr-card .tiny-text { color: #D4A23C; margin-bottom: 6px; }
.sr-title { margin: 0 0 8px; font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.02em; color: #f7f9ff; }
.sr-body { margin: 0; font-family: 'DM Sans', sans-serif; font-size: 15.5px; line-height: 1.65; color: #c9d5fa; }

@media (max-width: 760px) {
  .sunrise { height: 360vh; }
  .sunrise .page-marker { display: none; }
  .sunrise .sr-ui { padding-top: 92px !important; padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
  .sr-head .sec-h { margin-top: 14px; }
  .sr-panel { padding: 18px 18px 20px; border-radius: 18px; -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(160deg, rgba(10, 17, 58, 0.9), rgba(4, 8, 34, 0.94)); }
  .sr-tab { font-size: 10px; letter-spacing: 0.14em; }
  .sr-num { font-size: 52px; }
  .sr-body { font-size: 15px; }
}

/* no JS: plain stacked list */
html:not(.sr-ready) .sunrise { height: auto; }
html:not(.sr-ready) .sr-stage { position: relative; height: auto; }
html:not(.sr-ready) .sr-canvas, html:not(.sr-ready) .sr-shade, html:not(.sr-ready) .sr-track { display: none; }
html:not(.sr-ready) .sr-cards { gap: 28px; }
html:not(.sr-ready) .sr-card { grid-area: auto; opacity: 1; transform: none; filter: none; }
html:not(.sr-ready) .sr-ui { gap: 40px; padding-bottom: 80px; }
.sunrise::before { content: ""; position: absolute; left: 0; right: 0; top: -220px; height: 221px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(2, 4, 26, 0), #02041a); }