/* ============================================================
   WDA — SECTION PHOTO LAYER  (v1.0)
   Quiet, environmental stock-photo layers that add atmosphere
   without competing with text, infographics or UI mockups.

   Built entirely on the WDA UI Kit tokens (tokens.css) and the
   existing reveal engine (motion.js adds .is-in; html.m-js gates
   the pre-JS safety state). No new animation language, no JS.

   STRUCTURE (decorative, aria-hidden):
     .sec-photo               absolutely-positioned layer, z-index 0
       .sec-photo__media      the background-image surface
       .sec-photo__overlay    gradient/tint that integrates + protects text

   The host <section> opts in with .has-photo, which lifts its
   content wrap above the layer. The hero uses .thero__photo.

   Every visual quantity is a CSS variable so a single image can
   be retuned — or swapped for a local /assets/images/stock file —
   in one line.
   ============================================================ */

/* ---- per-layer tunable variables (defaults = the quietest case) ---- */
.sec-photo {
  --photo-opacity:      .08;                       /* media visibility            */
  --photo-position:     center;                    /* object-position equivalent  */
  --photo-blur:         0px;                        /* controlled softening        */
  --photo-saturation:   .70;                        /* restrained desaturation     */
  --photo-brightness:   1;                           /* slight brightness trim      */
  --photo-overlay-start: rgba(255,255,255,0);        /* top of integrating gradient */
  --photo-overlay-end:   var(--color-bg-page);       /* settles into the surface    */
  --photo-overlay-angle: 180deg;
  --photo-scale-from:    1.035;                      /* reveal start scale (<=1.035)*/

  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* lift real content above the quiet layer (host opts in) */
.has-photo > .wrap { position: relative; z-index: 1; }

.sec-photo__media {
  position: absolute;
  inset: 0;
  background-position: var(--photo-position);
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(var(--photo-saturation)) brightness(var(--photo-brightness)) blur(var(--photo-blur));
  opacity: var(--photo-opacity);
  transform: translateZ(0);
}

.sec-photo__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--photo-overlay-angle), var(--photo-overlay-start), var(--photo-overlay-end));
}

/* on dark / ink sections the photo settles into ink, not white */
.sec--ink .sec-photo,
.section--ink .sec-photo {
  --photo-overlay-end: var(--color-ink);
  --photo-overlay-start: rgba(11,16,32,0);
  --photo-saturation: .58;
  --photo-brightness: .92;
}

/* ============================================================
   ROLE MODIFIERS — establish visual hierarchy (not all equal)
   ============================================================ */

/* hero — atmospheric, the loudest of the quiet layers */
.sec-photo--hero {
  --photo-opacity: .12;
  --photo-saturation: .62;
  --photo-brightness: 1.02;
  --photo-position: 78% 28%;
}

/* soft — barely-there texture beneath cards / diagrams */
.sec-photo--soft {
  --photo-opacity: .06;
  --photo-saturation: .5;
}

/* editorial — a visible, real photograph (foreground side panels) */
.sec-photo--editorial {
  --photo-opacity: .85;
  --photo-saturation: .9;
}

/* cta — warm emotional closure on the final ink block */
.sec-photo--cta {
  --photo-opacity: .16;
  --photo-saturation: .66;
  --photo-brightness: 1.04;
  --photo-position: center 30%;
}

/* ============================================================
   PLACEMENT + TREATMENT MODIFIERS  (composeable)
   ============================================================ */

/* anchor the image to one side and let it fall off toward content */
.sec-photo--right { --photo-position: 88% center; }
.sec-photo--left  { --photo-position: 12% center; }

/* radial mask — image is densest at one corner, dissolves across */
.sec-photo--masked .sec-photo__media {
  -webkit-mask-image: radial-gradient(135% 120% at var(--photo-mask-at, 82% 24%), #000 26%, transparent 76%);
          mask-image: radial-gradient(135% 120% at var(--photo-mask-at, 82% 24%), #000 26%, transparent 76%);
}

/* directional linear fade variants */
.sec-photo--fade-left .sec-photo__media {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 64%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 64%);
}
.sec-photo--fade-right .sec-photo__media {
  -webkit-mask-image: linear-gradient(90deg, #000 36%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 36%, transparent 100%);
}

/* soft blur — abstract, environmental */
.sec-photo--blurred { --photo-blur: 3px; }

/* desktop-only decorative fragments */
@media (max-width: 760px) {
  .sec-photo--mobile-hidden { display: none; }
}

/* ============================================================
   REVEAL — fade (+ ≤1.035 settle) AFTER the section appears.
   Overlays animate more slowly than content; image never loops.
   Uses the existing .is-in driver; html.m-js gates the start state
   so print / no-JS / pre-JS always show the settled image.
   ============================================================ */
html.m-js .sec-photo[data-inview] .sec-photo__media {
  opacity: 0;
  transform: scale(var(--photo-scale-from));
  transition:
    opacity   var(--motion-duration-cinematic) var(--motion-easing-soft),
    transform 1400ms                            var(--motion-easing-soft);
}
html.m-js .sec-photo[data-inview].is-in .sec-photo__media {
  opacity: var(--photo-opacity);
  transform: none;
}

/* mask reveal for editorial side panels */
html.m-js .sec-photo--reveal-mask[data-inview] .sec-photo__media {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 100%);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--motion-duration-cinematic) var(--motion-easing-reveal),
              opacity var(--motion-duration-reveal) var(--motion-easing-enter);
}
html.m-js .sec-photo--reveal-mask[data-inview].is-in .sec-photo__media {
  clip-path: inset(0 0 0 0);
}

/* reduced motion — no scale / mask travel, simple fade only */
@media (prefers-reduced-motion: reduce) {
  html.m-js .sec-photo[data-inview] .sec-photo__media {
    transform: none !important;
  }
  html.m-js .sec-photo--reveal-mask[data-inview] .sec-photo__media {
    clip-path: none !important;
  }
}

/* ============================================================
   HERO LAYER — slots into the existing .thero stack:
   .thero__bg (glows, z0) · .thero__grid-lines (z0) · THIS (z0)
   · .thero__inner (z2). Masked hard toward the left so the copy
   column keeps full contrast; brand glow still reads on top.
   ============================================================ */
.thero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  --photo-opacity: .13;
  --photo-saturation: .6;
  --photo-brightness: 1.03;
  --photo-position: 82% 26%;
  --photo-scale-from: 1.03;
}
.thero__photo .sec-photo__media {
  position: absolute;
  inset: 0;
  background-position: var(--photo-position);
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(var(--photo-saturation)) brightness(var(--photo-brightness));
  opacity: var(--photo-opacity);
  /* keep the image off the headline / lead column */
  -webkit-mask-image: radial-gradient(120% 115% at 86% 22%, #000 22%, transparent 72%);
          mask-image: radial-gradient(120% 115% at 86% 22%, #000 22%, transparent 72%);
}
/* warm the photo into the page surface + brand tint, protect text */
.thero__photo .sec-photo__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--color-bg-page) 6%, rgba(255,255,255,.4) 38%, transparent 78%),
    linear-gradient(180deg, transparent 60%, var(--color-bg-page) 100%);
}
html.m-js .thero__photo[data-inview] .sec-photo__media {
  opacity: 0;
  transform: scale(var(--photo-scale-from));
  transition:
    opacity   var(--motion-duration-hero) var(--motion-easing-soft),
    transform var(--motion-duration-hero) var(--motion-easing-soft);
}
html.m-js .thero__photo[data-inview].is-in .sec-photo__media {
  opacity: var(--photo-opacity);
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.m-js .thero__photo[data-inview] .sec-photo__media { transform: none !important; }
}

/* on small screens the hero photo would crowd the mockup — soften it */
@media (max-width: 760px) {
  .thero__photo { --photo-opacity: .08; }
  .thero__photo .sec-photo__media {
    -webkit-mask-image: radial-gradient(140% 80% at 70% 8%, #000 12%, transparent 64%);
            mask-image: radial-gradient(140% 80% at 70% 8%, #000 12%, transparent 64%);
  }
}