/* AutoNews route-aware page scenery
   One server-side theme key drives the image, composition and safety mask.
   Keep page-specific background decisions here instead of scattering URL
   selectors and hard-coded images across feature stylesheets. */

body.editorial-ui {
  --page-scene: url("../images/page-scenes/news-v1.f3196dea72de.webp");
  --page-scene-position: center 42%;
  --page-scene-opacity: .56;
  --page-scene-opacity-mobile: .34;
  --page-scene-filter: grayscale(.12) saturate(.72) contrast(.9);
  --page-motif:
    repeating-linear-gradient(116deg, transparent 0 72px, rgb(50 103 139 / 8%) 73px 74px, transparent 75px 150px);
}

body.editorial-ui[data-page-visual="home"] {
  --page-scene: url("../images/page-scenes/home-v1.63a6e17bcc88.webp");
  --page-scene-position: 100% -100px;
  --page-scene-opacity: .62;
  --page-scene-filter: grayscale(.14) saturate(.68) contrast(.88);
  --page-motif:
    radial-gradient(circle at 89% 13%, transparent 0 104px, rgb(52 105 141 / 8%) 105px 106px, transparent 107px 136px, rgb(52 105 141 / 5%) 137px 138px, transparent 139px),
    linear-gradient(164deg, transparent 0 44%, rgb(52 105 141 / 6%) 44.2% 44.35%, transparent 44.6% 100%);
}

body.editorial-ui[data-page-visual="news"] {
  --page-scene: url("../images/page-scenes/news-v1.f3196dea72de.webp");
  --page-scene-position: center -40px;
  --page-scene-opacity: .54;
  --page-motif:
    repeating-linear-gradient(118deg, transparent 0 84px, rgb(48 101 137 / 7%) 85px 86px, transparent 87px 174px),
    linear-gradient(90deg, transparent 0 7%, rgb(48 101 137 / 7%) 7.1% 7.2%, transparent 7.3% 92%, rgb(48 101 137 / 7%) 92.1% 92.2%, transparent 92.3%);
}

body.editorial-ui[data-page-visual="cars"] {
  --page-scene: url("../images/page-scenes/cars-v1.6cb66f4c20c0.webp");
  --page-scene-position: 100% -35px;
  --page-scene-opacity: .58;
  --page-scene-filter: grayscale(.08) saturate(.66) contrast(.92);
  --page-motif:
    linear-gradient(rgb(47 101 138 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(47 101 138 / 6%) 1px, transparent 1px),
    radial-gradient(circle at 88% 14%, transparent 0 88px, rgb(47 101 138 / 9%) 89px 90px, transparent 91px);
}

body.editorial-ui[data-page-visual="events"] {
  --page-scene: url("../images/page-scenes/events-v1.94ebb0a6094a.webp");
  --page-scene-position: center -50px;
  --page-scene-opacity: .5;
  --page-scene-filter: grayscale(.2) saturate(.72) contrast(.9);
  --page-motif:
    repeating-linear-gradient(90deg, transparent 0 136px, rgb(52 102 137 / 7%) 137px 138px, transparent 139px 274px),
    linear-gradient(180deg, transparent 0 14%, rgb(52 102 137 / 9%) 14.1% 14.25%, transparent 14.4% 100%);
}

body.editorial-ui[data-page-visual="media"] {
  --page-scene: url("../images/page-scenes/media-v1.4e16b8a95b44.webp");
  --page-scene-position: 100% -70px;
  --page-scene-opacity: .5;
  --page-scene-filter: grayscale(.2) saturate(.62) contrast(.9);
  --page-motif:
    radial-gradient(circle at 88% 14%, transparent 0 78px, rgb(42 93 129 / 8%) 79px 81px, transparent 82px 118px, rgb(42 93 129 / 5%) 119px 120px, transparent 121px),
    repeating-linear-gradient(180deg, transparent 0 112px, rgb(42 93 129 / 5%) 113px 114px, transparent 115px 228px);
}

body.editorial-ui[data-page-visual="policy"] {
  --page-scene: url("../images/page-scenes/policy-v1.97e0b2081412.webp");
  --page-scene-position: center -30px;
  --page-scene-opacity: .58;
  --page-scene-filter: grayscale(.06) saturate(.66) contrast(.9);
  --page-motif:
    linear-gradient(rgb(43 96 133 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(43 96 133 / 6%) 1px, transparent 1px),
    repeating-linear-gradient(135deg, transparent 0 164px, rgb(43 96 133 / 5%) 165px 166px, transparent 167px 330px);
}

body.editorial-ui[data-page-visual="community"] {
  --page-scene: url("../images/page-scenes/community-v1.3f2571ee8a5b.webp");
  --page-scene-position: 100% -80px;
  --page-scene-opacity: .5;
  --page-scene-filter: grayscale(.25) saturate(.64) brightness(1.08) contrast(.9);
  --page-motif:
    radial-gradient(circle at 12% 21%, rgb(71 125 160 / 8%) 0 5px, transparent 6px),
    radial-gradient(circle at 86% 15%, rgb(71 125 160 / 9%) 0 8px, transparent 9px),
    radial-gradient(circle at 76% 34%, rgb(71 125 160 / 6%) 0 4px, transparent 5px);
}

/* The scene is a single composited layer. Text safety comes from the two
   gradients, while the image remains visible in the outer negative space. */
body.editorial-ui .main::before {
  inset: 80px 0 auto !important;
  width: 100%;
  height: min(900px, calc(100vh + 90px)) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 42%, transparent) 0%,
      color-mix(in srgb, var(--paper) 58%, transparent) 55%,
      var(--paper) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--paper) 82%, transparent) 0%,
      color-mix(in srgb, var(--paper) 42%, transparent) 47%,
      color-mix(in srgb, var(--paper) 12%, transparent) 100%),
    var(--page-scene) var(--page-scene-position) / 100% auto no-repeat !important;
  opacity: var(--page-scene-opacity) !important;
  filter: var(--page-scene-filter) !important;
  mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(180deg, #000 0 74%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 0 74%, transparent 100%) !important;
  contain: paint;
}

/* A different low-cost geometric signature continues below the photo. */
body.editorial-ui .an-page-watermark {
  inset: 80px 0 0 !important;
  min-height: calc(100% - 80px) !important;
  background-image: var(--page-motif) !important;
  background-repeat: repeat-y !important;
  background-position: center top !important;
  background-size: 100% 960px !important;
  opacity: .11 !important;
  filter: none !important;
  mix-blend-mode: multiply !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 95px, #000 calc(100% - 120px), transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0, #000 95px, #000 calc(100% - 120px), transparent 100%) !important;
}

/* The old shared gauge made every route look identical. The route motif now
   carries that visual role with less DOM and no animation. */
body.editorial-ui .main::after { display: none !important; }

html[data-theme="dark"] body.editorial-ui {
  --page-scene-opacity: .28;
  --page-scene-opacity-mobile: .2;
  --page-scene-filter: grayscale(.28) saturate(.58) brightness(.68) contrast(.95);
}
html[data-theme="dark"] body.editorial-ui .an-page-watermark {
  opacity: .09 !important;
  filter: brightness(1.6) !important;
  mix-blend-mode: screen !important;
}

@media (max-width: 900px) {
  body.editorial-ui .main::before {
    inset-block-start: 68px !important;
    height: 720px !important;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--paper) 48%, transparent) 0%,
        color-mix(in srgb, var(--paper) 67%, transparent) 58%,
        var(--paper) 100%),
      var(--page-scene) var(--page-scene-position) / auto 100% no-repeat !important;
    opacity: var(--page-scene-opacity-mobile) !important;
  }
  body.editorial-ui .an-page-watermark {
    inset-block-start: 68px !important;
    min-height: calc(100% - 68px) !important;
    background-size: 150% 760px !important;
    opacity: .075 !important;
  }
}

@media (max-width: 600px) {
  body.editorial-ui .main::before {
    height: 620px !important;
    background-position: center top !important;
    opacity: var(--page-scene-opacity-mobile) !important;
  }
  body.editorial-ui .an-page-watermark { opacity: .055 !important; }
}

@media (prefers-reduced-data: reduce) {
  body.editorial-ui .main::before { background-image: none !important; }
}