/* ---- 1. Palette. Re-theming is these six lines. ------------ */
:root{
  --ris-paper:  #CDE9D8;  /* "CANDY" MINT — the background, everywhere */
  --ris-ink:    #101A12;  /* near-black, green cast — body text     */
  --ris-moss:   #40573F;  /* accent: eyebrows, buttons, focus ring  */
  --ris-deep:   #060A07;  /* letterbox bars, vignette               */
  --ris-haze:   #BFD9C6;  /* pale mint, used in the photo grade     */
  --ris-forest: #1B3024;  /* dark slabs — no longer used, kept as   */
                          /* an option if you want the rhythm back  */

  /* Other mints options:
     #E6F2EA  paler, nearly white — safest at full-page scale
     #D3E4D5  dustier, more sage than mint
     #DAEADF  soft mint
     Only --ris-paper needs to change; everything else follows. */

  /* Tuning knobs */
  --ris-bar:   5.5svh;    /* letterbox thickness. 0 = no bars  */
  --ris-grade: 0.26;      /* colour-grade strength, 0 to 0.5   */
}

/* ---- 2. Page shell ---------------------------------------- */
body{ overflow-x:clip; background:var(--ris-paper); }

.scene{ position:relative; view-timeline-name:--scene; }

.scene:not(.alignfull){
  width:100vw;
  margin-inline:calc(50% - 50vw);
  max-width:none;
}

.scene.scene{ margin-block:0; }

.scene > .curtain,
.scene > .slab{ width:100%; max-width:none; margin-inline:0; margin-block:0; }

/* ---- 3. The curtain (sticky full-bleed shot) --------------- */
.curtain{
  position:sticky; top:0;
  /* Per-shot height: style="--ris-height:75svh" on a .curtain div */
  height:var(--ris-height, 100svh);
  min-height:520px;
  z-index:0; overflow:hidden;
  display:grid; place-items:center;
  background:var(--ris-deep);
}
.curtain--short{ --ris-height: 82svh; min-height:460px; }

.curtain__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
  /* Which band of the source lands in frame. 0% pins the top of the
     image, 100% pins the bottom. Override per shot with a
     style="--ris-focus:80%" attribute on that .curtain div. */
  object-position:center var(--ris-focus, 45%);
}

.curtain__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(125% 85% at 50% 42%,
      transparent 38%, rgba(6,10,7,.58) 100%),
    linear-gradient(180deg,
      rgba(6,10,7,.42) 0%, rgba(6,10,7,.06) 48%, rgba(6,10,7,.62) 100%);
}

/* Color grade: one wash across every photo so a warm knit and a
   cool studio shot end up in the same film stock. */
.curtain__grade{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  mix-blend-mode:soft-light;
  opacity:var(--ris-grade);
  background:linear-gradient(160deg, var(--ris-haze), var(--ris-moss) 55%, var(--ris-deep));
}

/* Pull a warm shot back toward the page palette. Desaturate first,
   then tint — the order a colorist works in. Tint alone can't beat
   a sunset; soft-light green over saturated amber just goes muddy.
   Dropping saturation first gives the green something neutral to sit
   on, then the grade does the work. */
.curtain--cool{ --ris-grade: 0.32; }
.curtain--cool .curtain__img{ filter:saturate(0.55) contrast(1.03); }

/* Stronger, if it's still too warm. `color` blending takes hue and
   saturation from the grade layer and keeps the photo's luminance —
   a near-duotone. Swap the saturate() above to 0.8 if you use this,
   otherwise you're flattening the image twice. */
/* .curtain--cool .curtain__grade{ mix-blend-mode:color; opacity:.34; } */

/* ---- 4. Letterbox bars that retract --------------
   The projector opening. Bars sit over everything, scaleY down to
   their resting height as the scene arrives. This is the one loud
   move — everything else stays quiet. */
.curtain::before,
.curtain::after{
  content:""; position:absolute; left:0; right:0; z-index:4;
  height:var(--ris-bar); background:var(--ris-deep);
  pointer-events:none;
}
.curtain::before{ top:0;    transform-origin:top; }
.curtain::after { bottom:0; transform-origin:bottom; }

/* Opt a shot out of the letterbox entirely. content:none removes the
   pseudo-elements outright, so no later --ris-bar change can bring
   them back on this one. */
.curtain--open::before,
.curtain--open::after{ content:none; }

/* ---- 5. Title card ----------------------------------------- */
.curtain__title{
  position:relative; z-index:3;
  margin:0; color:#fff; text-align:center;
  font-size:clamp(2.5rem,7vw,4.75rem);
  line-height:1.02;
  letter-spacing:.06em;
  font-weight:400;
  text-wrap:balance;
  text-shadow:0 1px 40px rgba(6,10,7,.45);
}

/* ---- 6. Slabs (the panels that wipe over the shot) ---------- */
.slab{
  position:relative; z-index:1;
  background:var(--ris-paper); color:var(--ris-ink);
  padding:clamp(4rem,12vh,9rem) 1.25rem;
}
.slab__inner{ max-width:760px; margin:0 auto; }
.slab--wide .slab__inner{ max-width:1100px; }

/* Dark slab, kept but no longer applied anywhere */
.slab--dark{ background:var(--ris-forest); color:var(--ris-paper); }
.slab--dark .slab__eyebrow{ color:var(--ris-haze); }
.slab--dark a{ color:var(--ris-haze); }

/* Optional: a barely-there tonal step between slabs. Still mint, but
   gives the page some structure.
   Uncomment and add class="slab slab--step" to alternate sections. */
/* .slab--step{ background:#D0E3D6; } */

.slab__eyebrow{
  margin:0 0 .75rem; color:var(--ris-moss);
  font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase;
}
.slab__lede{
  margin:0; font-size:clamp(1.5rem,3.4vw,2.25rem);
  line-height:1.35; text-wrap:pretty;
}

/* ---- 7. Buttons + gallery ------------------------- */
.wp-element-button,
.wp-block-button__link{
  background-color:var(--ris-moss); color:var(--ris-paper);
  border-color:var(--ris-moss);
}
.is-style-outline .wp-block-button__link{
  background:transparent; color:currentColor; border:1px solid currentColor;
}
.is-style-outline .wp-block-button__link:hover{
  background:var(--ris-moss); color:var(--ris-paper); border-color:var(--ris-moss);
}
.wp-block-gallery img{ border-radius:2px; }

/* ============================================================
   8. Motion — scroll-driven, no JS, no scroll listeners.

   Everything below is inside @supports, so browsers without
   scroll-driven animations (Firefox, as of now) get the static
   page and nothing breaks. Check caniuse before assuming.

   Note the timeline: curtains are position:sticky, so
   view() measured on the curtain itself barely moves. We name a
   view-timeline on .scene (which scrolls normally) and let the
   descendants attach to it. That's the fix for sticky + parallax.
   ============================================================ */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){

  /* Slow push-in. Scroll-driven, so it never drifts out of sync
     with the reader the way a time-based ken burns does. */
  .curtain__img{
    animation:ris-push linear both;
    animation-timeline:--scene;
    animation-range:cover 0% cover 65%;   /* ← tune duration here */
  }
  /* The end scale is 1.02, not 1.00, on purpose. The image is
     inset:0 and exactly fills the curtain, so at scale(1) any
     vertical translate slides it off its own box and exposes a
     sliver of the near-black curtain background at the top edge.
     Keeping overscan at the end means the translate always has room.

     The zoom range is deliberately shallow (10% down to 2%). A deeper
     push looks better in motion but resamples the bitmap the whole
     way, and on a display wider than the source it is upscaling —
     which reads as softness. Widen the range for more drama, narrow
     it for more bite. */
  @keyframes ris-push{
    from{ transform:scale(1.10) translate3d(0,-0.9%,0); }
    to  { transform:scale(1.02) translate3d(0, 0.9%,0); }
  }

  /* Bars retract as the scene arrives */
  .curtain::before,
  .curtain::after{
    animation:ris-bars linear both;
    animation-timeline:--scene;
    animation-range:entry 0% entry 90%;
  }
  @keyframes ris-bars{
    from{ transform:scaleY(2.4); }
    to  { transform:scaleY(1); }
  }

  /* Title dissolves in, then out under the incoming slab */
  .curtain__title{
    animation:ris-titlecard linear both;
    animation-timeline:--scene;
    animation-range:entry 55% cover 50%;
  }
  @keyframes ris-titlecard{
    0%        { opacity:0; transform:translate3d(0,1.25rem,0) scale(.985); }
    38%, 68%  { opacity:1; transform:none; }
    100%      { opacity:0; transform:translate3d(0,-1rem,0) scale(1.03); }
  }

  /* Grade deepens slightly as the shot is pushed off — the fade
     to black at the end of a take. */
  .curtain__grade{
    animation:ris-grade linear both;
    animation-timeline:--scene;
    animation-range:cover 35% cover 85%;
  }
  @keyframes ris-grade{
    from{ opacity:var(--ris-grade); }
    to  { opacity:calc(var(--ris-grade) + .35); }
  }

  .reveal{
    animation:ris-rise linear both;
    animation-timeline:view();
    animation-range:entry 15% cover 40%;
  }
  @keyframes ris-rise{
    from{ opacity:0; transform:translate3d(0,20px,0); }
    to  { opacity:1; transform:none; }
  }

  /* Gallery: staggered arrival, not true parallax.
     Every tile animates over the SAME range but from a different
     distance — different distance / same duration = different
     apparent speed, so it reads as parallax, but they all land on
     the grid at the same scroll point. Continuous differential
     speeds would break the row alignment, which matters here
     because the gallery is is-cropped and one image is a portrait
     crop among squares. */
  .wp-block-gallery .wp-block-image{
    animation:ris-float linear both;
    animation-timeline:view();
    animation-range:entry 5% cover 38%;
    will-change:transform;
  }
  @keyframes ris-float{
    from{ opacity:0; transform:translate3d(0, var(--ris-rise, 56px), 0); }
    to  { opacity:1; transform:none; }
  }

  /* The stagger. Tiles start below and rise, so nothing ever
     overlaps the heading above during transit. Tune the spread —
     closer together is calmer, further apart is more theatrical. */
  .wp-block-gallery .wp-block-image:nth-child(3n+1){ --ris-rise: 76px; }
  .wp-block-gallery .wp-block-image:nth-child(3n+2){ --ris-rise: 40px; }
  .wp-block-gallery .wp-block-image:nth-child(3n)  { --ris-rise: 92px; }

  /* Single/double column on phones: varied distances just look
     ragged when tiles arrive one at a time. Flatten the spread. */
  @media (max-width: 700px){
    .wp-block-gallery .wp-block-image{ --ris-rise: 32px !important; }
  }

}}

/* ---- 9. Floor ---------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .curtain__img{ transform:none; }
  :root{ --ris-bar:3svh; }
}
/* Focus ring uses moss, not a pale green — pale green on mint lands
   around 2:1, under the 3:1 minimum for a non-text indicator. */
:where(a,button,.wp-element-button):focus-visible{
  outline:2px solid var(--ris-moss);
  outline-offset:3px;
}