/* site/mood.css
 *
 * THE MOOD, Aster 31 October 2026. Tyler that night: "since the images are AI,
 * it'd be cool to kind of like add a subtle ... something to make the vibe just
 * more silhouette-y. And then if one of the trucks has lights on, it could just
 * be like, that's pretty cool."
 *
 * Two things, both in CSS so every photo keeps its file and its alt text:
 *
 *  1. THE GRADE. Every generated scene is pulled a little toward night: less
 *     colour, more contrast and a touch darker, so the trucks read as shapes
 *     against the sky and the AI gloss falls away. A soft vignette closes the
 *     corners. Stronger on the graphite bands than on cream.
 *  2. THE GLOW. On the night scenes where a truck has its lights on, a copy of
 *     the picture rides on a pseudo element, darkened and pushed hard in
 *     contrast so only the brightest parts survive (headlights, lamps,
 *     windows and the lime paint), blurred and screened back over the photo.
 *     That is a bloom: the lights glow, lime trucks wear a faint phosphor
 *     halo and the dark stays dark. A browser without blend modes shows the
 *     plain grade.
 *
 * Linked before contrast.css by phosphor-clean.mjs rule 10, so a measured text
 * fix always wins. Nothing here touches text. Reduced motion changes nothing,
 * there is no motion. No Oxford commas, no em dashes.
 */

/* 1. the grade */
html img[src*="/assets/scenes/"],
html img[src*="/assets/editorial/corral-"] { filter: saturate(.86) contrast(1.08) brightness(.95); }
html :is(.night-feature, .field-notes, .dealer-partner, .finish-story) img[src*="/assets/scenes/"] { filter: saturate(.78) contrast(1.16) brightness(.88); }

/* the vignette, on the frames that hold only a picture */
html :is(.night-feature > figure, .dealer-partner > figure, .finish-story figure, .dealer-hero-photo) { position: relative; isolation: isolate; }
html :is(.night-feature > figure, .dealer-partner > figure, .finish-story figure, .dealer-hero-photo)::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(8, 10, 9, .42) 100%);
}

/* 2. the glow, on the four scenes with lights on. The pseudo element carries
   the same picture as a background, blurred and cut down to its brightest
   parts by brightness and contrast, then screened over the photo. Screen
   only ever lightens, and black adds nothing, so only the lights bloom.
   (backdrop-filter was tried first: Chrome paints the filtered backdrop
   itself and the blend does not reach it, so the scene went dark.) */
html :is(figure, picture, a):has(> img:is([src*="ph-town-dusk"], [src*="ph-station-night"], [src*="moonlit-winter-traverse"])) { position: relative; isolation: isolate; }
html :is(figure, picture, a):has(> img:is([src*="ph-town-dusk"], [src*="ph-station-night"], [src*="moonlit-winter-traverse"]))::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: var(--glow) center / cover no-repeat;
  filter: brightness(.76) contrast(3.2) blur(12px);
  mix-blend-mode: screen; opacity: .6;
}
html :has(> img[src*="ph-town-dusk"]) { --glow: url("/assets/scenes/low-light/ph-town-dusk-1200.webp"); }
html :has(> img[src*="ph-station-night"]) { --glow: url("/assets/scenes/low-light/ph-station-night-1200.webp"); }
html :has(> img[src*="moonlit-winter-traverse"]) { --glow: url("/assets/scenes/moonlit-winter-traverse.webp"); }
/* the field notes carry words inside the link, so the glow there is held to
   the picture's own box, 1200 by 630 from the top, and its corners */
html .field-notes-grid > a:has(> img:is([src*="ph-town-dusk"], [src*="ph-station-night"]))::after { inset: 0 0 auto 0; aspect-ratio: 1200 / 630; border-radius: 14px; }

/* the hero, the lime truck with its lights on outside the shelter. Its photo
   is the section's background, so the glow is the section's ::before (its
   ::after is the after hours caption), set under the words with a z-index of
   minus one inside the section's own stacking context, and masked to the
   right half where the truck stands, so nothing blooms behind the headline. */
html .market section.dealer-hero { isolation: isolate; }
html .market section.dealer-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: url("/assets/scenes/moonlit-field-shelter-v2.webp") 62% 55% / cover no-repeat;
  filter: brightness(.76) contrast(3.2) blur(12px);
  mix-blend-mode: screen; opacity: .6;
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 68%);
  mask-image: linear-gradient(90deg, transparent 42%, #000 68%);
}
/* a phone: phosphor-night.css sets the hero's photo as a 330 tall strip at
   the foot of the section (70% 100% / auto 330px), so the glow takes the
   same size and place and fades in only over that strip */
@media (max-width: 760px) {
  html .market section.dealer-hero::before {
    background-position: 70% 100%; background-size: auto 330px;
    -webkit-mask-image: linear-gradient(180deg, transparent calc(100% - 300px), #000 calc(100% - 220px));
    mask-image: linear-gradient(180deg, transparent calc(100% - 300px), #000 calc(100% - 220px));
  }
}