/* ==========================================================================
   MotoBi — Snow theme (/snow/)
   Loaded AFTER site.css. Everything is scoped to body.snow so the rest of
   the site is untouched.

   - Full-page night sky with faint diagonal streak lines
   - Three parallax layers of falling snow, drawn in pure CSS (no JS, no
     images): far layer behind the content, mid and near layers in front
   - "4K" glass panels: translucent, blurred, gradient hairline borders,
     deep shadows and a soft brand glow on hover
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page base — night sky
   -------------------------------------------------------------------------- */

html:has(> body.snow) {
  background: #040918; /* overscroll colour on iOS */
}

body.snow {
  --ink: #f2f6fc;
  --ink-2: #a9c0e4;
  --ink-3: #a9b7c8;
  --bg-2: #0f1829;
  --brand: #79a8ff;
  --brand-ink: #a6c6ff;
  background: linear-gradient(180deg, #081231 0%, #050b1c 55%, #03060f 100%);
  color: var(--night-ink);
}

/* Keep the page content above the streaks and the far snow layer. */
.snow main,
.snow .foot {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   2. Diagonal streak lines (the faint slanted lines in the reference)
   -------------------------------------------------------------------------- */

body.snow::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      104deg,
      rgba(158, 190, 255, 0.05) 0 1.5px,
      transparent 1.5px 120px
    ),
    repeating-linear-gradient(
      104deg,
      rgba(158, 190, 255, 0.028) 0 1px,
      transparent 1px 46px
    );
}

/* --------------------------------------------------------------------------
   3. Snowfall — three parallax layers, all pure CSS background tiles
   -------------------------------------------------------------------------- */

/* Far layer — small slow flakes, behind the content.
   Replaces the subtle site-wide snow from site.css on this page. */
body.snow::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 42% 8%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 76% 28%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 12%, #fff 0 1.4px, transparent 2px),
    radial-gradient(circle at 25% 72%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 82%, #fff 0 1.2px, transparent 2px);
  background-size:
    180px 220px,
    240px 280px,
    210px 260px,
    260px 300px,
    230px 280px,
    190px 240px;
  animation: snow-far 26s linear infinite;
}

/* Mid + near layers live on an extra fixed div so we get three depths. */
.snowfx {
  position: fixed;
  inset: 0;
  z-index: 42; /* in front of content, behind the sticky nav (50) */
  pointer-events: none;
}

.snowfx::before,
.snowfx::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Mid layer — medium flakes, gentle sideways drift. */
.snowfx::before {
  opacity: 0.6;
  background-image:
    radial-gradient(circle at 18% 22%, #fff 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 55% 10%, #fff 0 1.9px, transparent 2.9px),
    radial-gradient(circle at 84% 40%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 34% 64%, #fff 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 68% 86%, #fff 0 1.6px, transparent 2.6px);
  background-size:
    260px 320px,
    300px 340px,
    280px 300px,
    320px 360px,
    240px 280px;
  animation: snow-mid 15s linear infinite;
}

/* Near layer — the biggest, fastest flakes, slightly soft for depth. */
.snowfx::after {
  opacity: 0.75;
  filter: blur(0.4px);
  background-image:
    radial-gradient(circle at 22% 30%, #fff 0 2.4px, transparent 3.6px),
    radial-gradient(circle at 62% 12%, #fff 0 2.9px, transparent 4.2px),
    radial-gradient(circle at 88% 58%, #fff 0 2.2px, transparent 3.4px),
    radial-gradient(circle at 40% 78%, #fff 0 2.6px, transparent 3.8px);
  background-size:
    380px 420px,
    440px 460px,
    400px 400px,
    360px 440px;
  animation: snow-near 9s linear infinite;
}

/* Each layer falls exactly one tile-height per loop so the tiles repeat
   seamlessly; the horizontal drift makes it feel like real wind. */
@keyframes snow-far {
  from {
    background-position:
      0 -220px,
      40px -280px,
      -30px -260px,
      80px -300px,
      20px -280px,
      -50px -240px;
  }
  to {
    background-position:
      90px 220px,
      -40px 280px,
      70px 260px,
      -80px 300px,
      -60px 280px,
      50px 240px;
  }
}

@keyframes snow-mid {
  from {
    background-position:
      0 -320px,
      70px -340px,
      -60px -300px,
      30px -360px,
      -40px -280px;
  }
  to {
    background-position:
      140px 320px,
      -70px 340px,
      120px 300px,
      -90px 360px,
      80px 280px;
  }
}

@keyframes snow-near {
  from {
    background-position:
      0 -420px,
      -90px -460px,
      60px -400px,
      -30px -440px;
  }
  to {
    background-position:
      180px 420px,
      90px 460px,
      -140px 400px,
      120px 440px;
  }
}

/* --------------------------------------------------------------------------
   4. "4K" glass panels — cards, steps, stats, FAQ
   -------------------------------------------------------------------------- */

.snow .card,
.snow .step,
.snow .faq {
  background: linear-gradient(
    165deg,
    rgba(31, 52, 99, 0.55),
    rgba(8, 15, 34, 0.62)
  );
  border: 1px solid rgba(150, 188, 255, 0.16);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 44px rgba(1, 6, 18, 0.55);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

/* Gradient hairline along the top edge — the "4K panel" sheen. */
.snow .card {
  position: relative;
  overflow: hidden;
}
.snow .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 5%,
    rgba(125, 180, 255, 0.55) 50%,
    transparent 95%
  );
}

.snow a.card:hover {
  transform: translateY(-4px);
  border-color: rgba(140, 184, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 54px rgba(1, 6, 18, 0.6),
    0 0 0 1px rgba(124, 176, 255, 0.18),
    0 0 34px rgba(61, 124, 234, 0.28);
}

.snow .card h3,
.snow .step h3 {
  color: #fff;
}
.snow .card p,
.snow .step p,
.snow .section__head p {
  color: var(--night-ink2);
}
.snow .card__more {
  color: #9dbdff;
}

.snow .icon {
  background: rgba(61, 124, 234, 0.16);
  color: #a9c6ff;
  box-shadow: inset 0 0 0 1px rgba(150, 188, 255, 0.22);
}

.snow .eyebrow {
  color: #8fb4ff;
}

/* Stats strip → four floating glass tiles with gradient numerals. */
.snow .stats {
  width: min(calc(100% - var(--pad) - var(--pad)), var(--wide));
  margin: 0 auto;
  padding: 0 0 clamp(2.2rem, 6vw, 3.2rem);
  gap: 0.9rem;
  background: transparent;
  border-top: 0;
}
.snow .stats div {
  background: linear-gradient(
    165deg,
    rgba(31, 52, 99, 0.55),
    rgba(8, 15, 34, 0.62)
  );
  border: 1px solid rgba(150, 188, 255, 0.16);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 44px rgba(1, 6, 18, 0.55);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  padding: 1.2rem 1rem;
}
.snow .stats b {
  background: linear-gradient(120deg, #fff 20%, #9dbdff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   5. Sections, hero, FAQ on the night background
   -------------------------------------------------------------------------- */

.snow .hero {
  background:
    radial-gradient(
      120% 90% at 8% 0%,
      rgba(61, 124, 234, 0.36) 0%,
      transparent 60%
    ),
    radial-gradient(
      100% 75% at 100% 8%,
      rgba(1, 75, 200, 0.42) 0%,
      transparent 58%
    ),
    linear-gradient(168deg, #0a1f4d 0%, #050b1c 70%);
}

.snow .hero__note {
  color: var(--night-ink2);
}

.snow .section--alt {
  background: rgba(10, 20, 44, 0.35);
  border-block: 1px solid rgba(150, 188, 255, 0.1);
}

.snow .faq {
  overflow: hidden;
}
.snow .faq details {
  background: transparent;
  border-bottom-color: rgba(150, 188, 255, 0.12);
}
.snow .faq summary {
  color: var(--night-ink);
}
.snow .faq summary:hover {
  background: rgba(255, 255, 255, 0.05);
}
.snow .faq summary::after {
  border-color: rgba(200, 220, 255, 0.6);
}
.snow .faq details[open] summary {
  color: #9dbdff;
}
.snow .faq details[open] summary::after {
  border-color: #9dbdff;
}
.snow .faq p {
  color: var(--night-ink2);
}
.snow .faq a {
  color: #9dbdff;
}

/* Ghost buttons were designed for light sections — restyle for night. */
.snow .btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--night-ink);
  border-color: rgba(255, 255, 255, 0.28);
}
.snow .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------------------------------
   6. Header and footer on the night background
   -------------------------------------------------------------------------- */

.snow .nav {
  background: rgba(5, 11, 28, 0.72);
  border-bottom-color: rgba(150, 188, 255, 0.14);
}
@supports not (backdrop-filter: blur(1px)) {
  .snow .nav {
    background: #050b1c;
  }
}

.snow .brand {
  color: #fff;
}
.snow .brand em {
  color: #7ea8ff;
}

.snow .nav__links a {
  color: var(--night-ink2);
}
.snow .nav__links a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.snow .nav__strip {
  border-top-color: rgba(150, 188, 255, 0.1);
}
.snow .nav__strip a {
  color: var(--night-ink2);
}

.snow .langbar [aria-current] {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.snow .foot {
  background: rgba(4, 8, 20, 0.6);
  border-top-color: rgba(150, 188, 255, 0.14);
  color: var(--night-ink2);
}
.snow .foot h2 {
  color: #fff;
}
.snow .foot a {
  color: var(--night-ink2);
}
.snow .foot a:hover {
  color: #fff;
}
.snow .foot__brand .brand {
  color: #fff;
}
.snow .foot__base {
  border-top-color: rgba(150, 188, 255, 0.12);
}

/* --------------------------------------------------------------------------
   7. Reduced motion — stop the snowfall, keep the scene
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.snow::before,
  .snowfx::before,
  .snowfx::after {
    animation: none !important;
  }
}