/* iv-hero-v022.css - hero overrides for the v022 library loop graded "graphite-gold v2".
   Source of truth: web-v022/grade-final/ (make_lut_v2.py, contrast_v2.json).

   1. Landscape poster (#iv-photo) for EVERY page that has #iv-bg (index, audiobooks, ...).
      It must be frame 0 of the delivered graded H.264 (iv-bg-v2.js swaps the poster texture
      for the video in place). Mirrors iv-2026.css:682-720 (1920 by default, 1280 at
      max-width 1200 and 760) and iv-threshold.css:179 (background-position 50% 42%).
      Phone (<= 640px) is NOT touched: iv-threshold.css:280 keeps portrait-720-v17.webp at
      50% 50% with the portrait v18 clip. "#iv-bg #iv-photo" (2,0,0) outranks the existing
      "#iv-photo" (1,0,0) rules, so this file works whatever its link order.
   2. Homepage-only desktop/tablet scrim (Option B), re-solved on the graded v2 clip:
      every hero text element >= 7:1 (gold em line >= 4.5:1, target 7:1), worst of 24
      phases, x1.18 Chromium margin. ".iv-home-chapters #iv-tint" (1,1,0) outranks the
      shipped "#iv-tint" (1,0,0). The phone ramp (iv-threshold.css:348-360), #iv-grade and
      .hero::after are unchanged. Same canvas scrim colour, normal blend, no filter. */

/* ---- 1. landscape posters (>= 641px) ---- */
@media (min-width: 641px) {
  #iv-bg #iv-photo {
    background-image: url("/assets/images/bg/library-orbit-1920-v022.webp");
    background-position: 50% 42%;
  }
}
@media (min-width: 641px) and (max-width: 1200px) {   /* iv-2026.css max-width 1200 + 760 rungs */
  #iv-bg #iv-photo {
    background-image: url("/assets/images/bg/library-orbit-1280-v022.webp");
  }
}

/* ---- 2. homepage scrim, desktop + tablet (>= 641px) ---- */
@media (min-width: 641px) {
  .iv-home-chapters #iv-tint {
    background: linear-gradient(180deg,
      rgba(var(--iv-scrim), 0.40)   0%,
      rgba(var(--iv-scrim), 0.62)  10%,
      rgba(var(--iv-scrim), 0.80)  15%,
      rgba(var(--iv-scrim), 0.80)  38%,
      rgba(var(--iv-scrim), 0.75)  44%,
      rgba(var(--iv-scrim), 0.75)  52%,
      rgba(var(--iv-scrim), 0.75)  58%,
      rgba(var(--iv-scrim), 0.75)  66%,
      rgba(var(--iv-scrim), 0.14)  76%,
      rgba(var(--iv-scrim), 0.12)  86%,
      rgba(var(--iv-scrim), 0.70)  95%,
      rgba(var(--iv-scrim), 1.00) 100%);
  }
}
/* Increase Contrast / prefers-contrast: more - +0.10 on the text rows (15-66 %),
   parity with the iOS WelcomeView. Must stay after the rule above (same specificity). */
@media (min-width: 641px) and (prefers-contrast: more) {
  .iv-home-chapters #iv-tint {
    background: linear-gradient(180deg,
      rgba(var(--iv-scrim), 0.40)   0%,
      rgba(var(--iv-scrim), 0.62)  10%,
      rgba(var(--iv-scrim), 0.90)  15%,
      rgba(var(--iv-scrim), 0.90)  38%,
      rgba(var(--iv-scrim), 0.85)  44%,
      rgba(var(--iv-scrim), 0.85)  52%,
      rgba(var(--iv-scrim), 0.85)  58%,
      rgba(var(--iv-scrim), 0.85)  66%,
      rgba(var(--iv-scrim), 0.14)  76%,
      rgba(var(--iv-scrim), 0.12)  86%,
      rgba(var(--iv-scrim), 0.70)  95%,
      rgba(var(--iv-scrim), 1.00) 100%);
  }
}