/* Kaishu home hero — proposed scrims over the CarrierLab 3D scene.
   Mockup only. Existing live tokens are documented first.
   Navy is rgba(11, 22, 42, …) to match the current hero scrim. */

/* ========== already on the live site ========== */
.hero-banner__scrim {
  /* desktop / base (left-to-right) */
  background: linear-gradient(
    to right,
    rgba(11, 22, 42, 0.92),
    rgba(11, 22, 42, 0.84) 40%,
    rgba(11, 22, 42, 0.74) 58%,
    rgba(11, 22, 42, 0.36) 72%,
    rgba(11, 22, 42, 0.08) 88%,
    rgba(11, 22, 42, 0)
  );
}

/* mobile additionally stacks a bottom-up lift (card area). Combined with the desktop gradient. */
@media (max-width: 900px) {
  .hero-banner__scrim {
    background:
      linear-gradient(to top, rgba(11, 22, 42, 0.7), rgba(11, 22, 42, 0.5) 34%, rgba(11, 22, 42, 0.18), rgba(11, 22, 42, 0) 70%),
      linear-gradient(to right, rgba(11, 22, 42, 0.92), rgba(11, 22, 42, 0.84) 40%, rgba(11, 22, 42, 0.74) 58%, rgba(11, 22, 42, 0.36) 72%, rgba(11, 22, 42, 0.08) 88%, rgba(11, 22, 42, 0));
  }
}

/* ========== proposed: desktop mid ==========
   Lightest single desktop CSS that still passes all-pixel WCAG AA
   (body 4.5:1, large 3:1) on BOTH 原向 and 翻转, white type.
   Use this if one overlay must serve all four scene combos. */
.hero-banner__scrim.is-mid {
  background: linear-gradient(
    to right,
    rgba(11, 22, 42, 0.74),
    rgba(11, 22, 42, 0.60) 36%,
    rgba(11, 22, 42, 0.36) 56%,
    rgba(11, 22, 42, 0.12) 76%,
    rgba(11, 22, 42, 0)
  );
}

/* ========== proposed: desktop light ==========
   Visually the airiest. All-pixel AA passes on 翻转.
   On 原向, p10 AA passes, but a few highlight pixels under the body
   sit at ~4.23:1 (just under 4.5). Use only if shipping 翻转. */
.hero-banner__scrim.is-light {
  background: linear-gradient(
    to right,
    rgba(11, 22, 42, 0.62),
    rgba(11, 22, 42, 0.48) 34%,
    rgba(11, 22, 42, 0.22) 56%,
    rgba(11, 22, 42, 0.06) 76%,
    rgba(11, 22, 42, 0)
  );
}

/* ========== proposed: mobile plus (required) ==========
   Existing mobile scrim FAILS the 40px headline (p10 ~2.6–2.9 over the sky).
   Keep the current LTR + bottom-up stacks, and ADD a top-down veil.
   On 翻转 this also passes all-pixel AA. On 原向, p10 AA passes but a few
   window highlights under the body remain below 4.5 all-pixel. */
@media (max-width: 900px) {
  .hero-banner__scrim.is-plus {
    background:
      linear-gradient(to bottom, rgba(11, 22, 42, 0.66), rgba(11, 22, 42, 0.52) 14%, rgba(11, 22, 42, 0.30) 28%, rgba(11, 22, 42, 0.12) 44%, rgba(11, 22, 42, 0) 60%),
      linear-gradient(to top, rgba(11, 22, 42, 0.7), rgba(11, 22, 42, 0.5) 34%, rgba(11, 22, 42, 0.18), rgba(11, 22, 42, 0) 70%),
      linear-gradient(to right, rgba(11, 22, 42, 0.92), rgba(11, 22, 42, 0.84) 40%, rgba(11, 22, 42, 0.74) 58%, rgba(11, 22, 42, 0.36) 72%, rgba(11, 22, 42, 0.08) 88%, rgba(11, 22, 42, 0));
  }
}

/* Flipped variants only (v=3, v=4): deepen the mobile top-gradient first stop
   so 12px nav-pill text meets WCAG 4.5:1 over the glass plate. Do not change
   --glass-* or the shared .is-plus used by 原向. */
@media (max-width: 900px) {
  .hero-banner__scrim.is-plus.is-plus-flip {
    background:
      linear-gradient(to bottom, rgba(11, 22, 42, 0.70), rgba(11, 22, 42, 0.52) 14%, rgba(11, 22, 42, 0.30) 28%, rgba(11, 22, 42, 0.12) 44%, rgba(11, 22, 42, 0) 60%),
      linear-gradient(to top, rgba(11, 22, 42, 0.7), rgba(11, 22, 42, 0.5) 34%, rgba(11, 22, 42, 0.18), rgba(11, 22, 42, 0) 70%),
      linear-gradient(to right, rgba(11, 22, 42, 0.92), rgba(11, 22, 42, 0.84) 40%, rgba(11, 22, 42, 0.74) 58%, rgba(11, 22, 42, 0.36) 72%, rgba(11, 22, 42, 0.08) 88%, rgba(11, 22, 42, 0));
  }
}

/* Stronger mobile top veil (if 原向 is kept and all-pixel body must pass).
   Even this left a few window pixels under the 原向 body at ~3.14:1. */
@media (max-width: 900px) {
  .hero-banner__scrim.is-strong {
    background:
      linear-gradient(to bottom, rgba(11, 22, 42, 0.78), rgba(11, 22, 42, 0.64) 16%, rgba(11, 22, 42, 0.40) 32%, rgba(11, 22, 42, 0.16) 48%, rgba(11, 22, 42, 0) 64%),
      linear-gradient(to top, rgba(11, 22, 42, 0.7), rgba(11, 22, 42, 0.5) 34%, rgba(11, 22, 42, 0.18), rgba(11, 22, 42, 0) 70%),
      linear-gradient(to right, rgba(11, 22, 42, 0.92), rgba(11, 22, 42, 0.84) 40%, rgba(11, 22, 42, 0.74) 58%, rgba(11, 22, 42, 0.36) 72%, rgba(11, 22, 42, 0.08) 88%, rgba(11, 22, 42, 0));
  }
}