/* ============================================================
   CASCADIAN — Stock-photo tint presets  (per-slide capable)
   ------------------------------------------------------------
   Tints are scoped to the SECTION, not the document, so the
   same system drives both the overview (one slide per iframe)
   and the final deck (all slides in one document, each graded
   independently):

       <section class="s1" data-tint="forest" style="--pi:.8">

   Per slide you set two things on the <section>:
     • data-tint="<preset>"   picks a recipe (below), OR
     • style="--photo-filter:<raw filter>"  for a custom grade
       (inline always wins over a preset).
     • --pi  (0..1) lerps a preset from identity → full strength.

   Surfaces graded: every <image-slot> image (part="image") and
   the slide-06 competition background band. Founder portraits
   are excluded — grading faces looks bad.
   ============================================================ */

:root, deck-stage > section { --pi: 1; --photo-filter: none; }

image-slot::part(image),
.s5-new .band {
  filter: var(--photo-filter);
  transition: filter 220ms ease;
}
.sq-ta-avatar image-slot::part(image) { filter: none; }   /* never tint portraits */

/* Editor inspect-zoom — per-slide --photo-zoom (1 = none) set on the <section>.
   The photo magnifies in place and STAYS clipped inside its own box:
     • image-slots scale as a unit (NOT ::part(image) — that img carries a
       framing transform we must not clobber), clipped by their full-bleed
       container's overflow:hidden.
     • the competition band has no image-slot (it's a background-image) and
       sits in normal flow, so we zoom it via background-size — a background
       can't overflow its element, so it can never invade the slide. */
.bg, .band, .lpane { overflow: hidden; }
.bg > image-slot,
.band > image-slot,
.lpane > image-slot {
  transform: scale(var(--photo-zoom, 1));
  transform-origin: 50% 72%;
  transition: transform .15s ease;
}
.s5-new .band {
  background-size: calc(var(--photo-zoom, 1) * 100%) !important;
  transition: background-size .15s ease;
}

/* ============================================================
   Preset library — each filter function lerps identity → target
   by --pi.  Grouped: Neutral/B&W · Brand hues · Duotones · Film.
   ============================================================ */

/* ── Neutral & black-and-white ─────────────────────────────── */
[data-tint="editorial"]      { --photo-filter: saturate(calc(1 - .26*var(--pi))) sepia(calc(.16*var(--pi))) brightness(calc(1 + .03*var(--pi))) contrast(calc(1 + .04*var(--pi))); }
[data-tint="editorial-cool"] { --photo-filter: saturate(calc(1 - .30*var(--pi))) hue-rotate(calc(-10deg*var(--pi))) brightness(calc(1 + .03*var(--pi))) contrast(calc(1 + .05*var(--pi))); }
[data-tint="soft"]           { --photo-filter: saturate(calc(1 - .35*var(--pi))) brightness(calc(1 + .02*var(--pi))) contrast(calc(1 + .03*var(--pi))); }
[data-tint="muted"]          { --photo-filter: saturate(calc(1 - .55*var(--pi))) brightness(calc(1 + .02*var(--pi))) contrast(calc(1 + .05*var(--pi))); }
[data-tint="mono"]           { --photo-filter: grayscale(calc(.92*var(--pi))) brightness(calc(1 + .03*var(--pi))) contrast(calc(1 + .08*var(--pi))); }
[data-tint="mono-warm"]      { --photo-filter: grayscale(calc(.85*var(--pi))) sepia(calc(.25*var(--pi))) brightness(calc(1 + .03*var(--pi))) contrast(calc(1 + .07*var(--pi))); }
[data-tint="mono-cool"]      { --photo-filter: grayscale(calc(.90*var(--pi))) sepia(calc(.05*var(--pi))) hue-rotate(calc(-15deg*var(--pi))) brightness(calc(1 + .03*var(--pi))) contrast(calc(1 + .08*var(--pi))); }
[data-tint="noir"]           { --photo-filter: grayscale(var(--pi)) brightness(calc(1 - .02*var(--pi))) contrast(calc(1 + .20*var(--pi))); }

/* ── Brand-hue grades (keep some photographic color) ───────── */
[data-tint="forest"]         { --photo-filter: saturate(calc(1 - .40*var(--pi))) sepia(calc(.42*var(--pi))) hue-rotate(calc(48deg*var(--pi))) contrast(calc(1 + .07*var(--pi))); }
[data-tint="forest-deep"]    { --photo-filter: saturate(calc(1 - .30*var(--pi))) sepia(calc(.55*var(--pi))) hue-rotate(calc(55deg*var(--pi))) brightness(calc(1 - .04*var(--pi))) contrast(calc(1 + .10*var(--pi))); }
[data-tint="sand"]           { --photo-filter: sepia(calc(.46*var(--pi))) saturate(calc(1 - .12*var(--pi))) hue-rotate(calc(-8deg*var(--pi))) brightness(calc(1 + .04*var(--pi))); }
[data-tint="sand-warm"]      { --photo-filter: sepia(calc(.60*var(--pi))) saturate(calc(1 - .05*var(--pi))) hue-rotate(calc(-12deg*var(--pi))) brightness(calc(1 + .05*var(--pi))) contrast(calc(1 + .02*var(--pi))); }
[data-tint="stone"]          { --photo-filter: saturate(calc(1 - .50*var(--pi))) sepia(calc(.30*var(--pi))) hue-rotate(calc(-5deg*var(--pi))) brightness(calc(1 + .02*var(--pi))) contrast(calc(1 + .04*var(--pi))); }
[data-tint="slate"]          { --photo-filter: saturate(calc(1 - .48*var(--pi))) sepia(calc(.10*var(--pi))) hue-rotate(calc(-12deg*var(--pi))) brightness(calc(1 + .02*var(--pi))) contrast(calc(1 + .08*var(--pi))); }
[data-tint="ice"]            { --photo-filter: saturate(calc(1 - .40*var(--pi))) hue-rotate(calc(-25deg*var(--pi))) brightness(calc(1 + .06*var(--pi))) contrast(calc(1 + .04*var(--pi))); }
[data-tint="rust"]           { --photo-filter: sepia(calc(.50*var(--pi))) saturate(calc(1 + .10*var(--pi))) hue-rotate(calc(-20deg*var(--pi))) brightness(calc(1 + .02*var(--pi))) contrast(calc(1 + .05*var(--pi))); }
[data-tint="gold"]           { --photo-filter: sepia(calc(.55*var(--pi))) saturate(calc(1 + .05*var(--pi))) hue-rotate(calc(-5deg*var(--pi))) brightness(calc(1 + .06*var(--pi))) contrast(calc(1 + .03*var(--pi))); }

/* ── Duotones (collapse to one hue — strongest unify) ──────── */
[data-tint="duotone-forest"] { --photo-filter: grayscale(var(--pi)) sepia(var(--pi)) hue-rotate(calc(56deg*var(--pi))) saturate(calc(1 + .55*var(--pi))) brightness(calc(1 + .02*var(--pi))) contrast(calc(1 + .05*var(--pi))); }
[data-tint="duotone-sand"]   { --photo-filter: grayscale(var(--pi)) sepia(var(--pi)) hue-rotate(calc(-10deg*var(--pi))) saturate(calc(1 + .30*var(--pi))) brightness(calc(1 + .06*var(--pi))) contrast(calc(1 + .02*var(--pi))); }
[data-tint="duotone-slate"]  { --photo-filter: grayscale(var(--pi)) sepia(calc(.6*var(--pi))) hue-rotate(calc(170deg*var(--pi))) saturate(calc(1 + .25*var(--pi))) brightness(calc(1 + .02*var(--pi))) contrast(calc(1 + .06*var(--pi))); }
[data-tint="duotone-rust"]   { --photo-filter: grayscale(var(--pi)) sepia(var(--pi)) hue-rotate(calc(-18deg*var(--pi))) saturate(calc(1 + .60*var(--pi))) brightness(calc(1 + .02*var(--pi))) contrast(calc(1 + .05*var(--pi))); }

/* ── Film / cinematic ──────────────────────────────────────── */
[data-tint="bleach"]         { --photo-filter: saturate(calc(1 - .60*var(--pi))) brightness(calc(1 + .05*var(--pi))) contrast(calc(1 + .18*var(--pi))); }
[data-tint="warm-film"]      { --photo-filter: sepia(calc(.30*var(--pi))) saturate(calc(1 + .08*var(--pi))) hue-rotate(calc(-6deg*var(--pi))) brightness(calc(1 + .04*var(--pi))) contrast(calc(1 + .06*var(--pi))); }
[data-tint="cold-film"]      { --photo-filter: saturate(calc(1 - .20*var(--pi))) hue-rotate(calc(-18deg*var(--pi))) brightness(calc(1 + .02*var(--pi))) contrast(calc(1 + .10*var(--pi))); }