/* r4p‑replace‑id — Underscores compat + chain manager + per‑block id */
.srf-sticky-reveal.srf-self-contained{
  height: var(--srf-duration, 700vh);
  min-height: var(--srf-duration, 700vh);
  position: relative;
  overflow: visible !important;
  contain: layout paint;
}

/* Only show mask for the active block */
.srf-sticky-reveal.srf-self-contained .srf-mask-100vh{ visibility: hidden; }
.srf-sticky-reveal.srf-self-contained.is-active .srf-mask-100vh{ visibility: visible; }

/* Active block above */
.srf-sticky-reveal.srf-self-contained{ z-index: 0; }
.srf-sticky-reveal.srf-self-contained.is-active{ z-index: 10; }

.srf-sticky-reveal.srf-self-contained .srf-mask-100vh{
  position: sticky !important; top:0; height:100vh !important;
  overflow:hidden !important; background: var(--srf-bg, transparent);
  isolation:isolate; contain: layout paint; clip-path: inset(0);
}

.srf-sticky-reveal.srf-self-contained .srf-stage{ position:absolute; inset:0; overflow:hidden; }
.srf-self-contained .srf-center-text{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:1;
    max-width: 75%;
    margin: auto;
    width: 600px; 
font-weight: 800;}
.srf-self-contained .srf-center-text__inner{
  font-size: clamp(28px, calc(var(--srf-head-size,56px) + 1vw), 8vw);
  font-weight: var(--srf-head-weight,800);
  color: var(--srf-head-color,#623CEA);
  line-height: 1.05; text-align: center; transform-origin: center;
  will-change: transform; padding: 0 4vw;
}
.srf-self-contained .srf-reveal-stack{ list-style:none; margin:0; padding:0; position: relative; width:100%; height:100%; z-index:2; }
.srf-self-contained .srf-reveal-stack .layer{ position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); z-index: var(--z, 2); will-change: transform; }
.srf-self-contained .srf-reveal-stack .layer img{
  display:block;
  width: clamp(var(--srf-minw, 0px), var(--srf-img-w-px, 480px), 2000px);
  aspect-ratio:var(--srf-aspect,4/3); object-fit:contain; border-radius:var(--srf-radius,24px);
    filter: drop-shadow(5px 4px 6px #0000001c);
}


/* --- Underscores compat (scoped) --- */
.entry-content .srf-sticky-reveal.srf-self-contained{
  height: var(--srf-duration,700vh) !important;
  min-height: var(--srf-duration,700vh) !important;
  overflow: visible !important;
}
.entry-content .srf-sticky-reveal.srf-self-contained .wp-block,
.entry-content .srf-sticky-reveal.srf-self-contained .wp-block-group,
.entry-content .srf-sticky-reveal.srf-self-contained .wp-block-cover,
.entry-content .srf-sticky-reveal.srf-self-contained .is-layout-constrained{
  overflow: visible !important;
  contain: none !important;
}
.entry-content .srf-sticky-reveal.srf-self-contained .srf-mask-100vh{
  transform: none !important;
  perspective: none !important;
}
.hentry, .content-area, .site-main, .site{ overflow: visible !important; }
/* Show the 100vh mask for the active block AND the upcoming block */
.srf-sticky-reveal.srf-self-contained .srf-mask-100vh{ visibility: hidden; }
.srf-sticky-reveal.srf-self-contained.is-active .srf-mask-100vh,
.srf-sticky-reveal.srf-self-contained.is-prep   .srf-mask-100vh{
  visibility: visible;
}

/* Optional: inherit background during the seam so it never flashes white */
.srf-sticky-reveal.srf-self-contained { background: var(--srf-bg, transparent); }
/* Use 0–15 as a gentle hold percentage, per block via inline style or globally here */
.srf-sticky-reveal.srf-self-contained { --srf-end-hold: 8; }
/* visible when active, prepping, or released */

.srf-sticky-reveal.srf-self-contained .srf-mask-100vh {
    visibility: visible !important;
}
.srf-sticky-reveal.srf-self-contained.is-active   .srf-mask-100vh,
.srf-sticky-reveal.srf-self-contained.is-prep     .srf-mask-100vh,
.srf-sticky-reveal.srf-self-contained.is-released .srf-mask-100vh{ visibility: visible; }

/* released: unstick but keep a full-screen frame */
.srf-sticky-reveal.srf-self-contained.is-released .srf-mask-100vh{
  position: relative !important; top:auto !important;
  height:auto !important; min-height:100vh; overflow:hidden;
  background: var(--srf-bg, transparent);
}

/* Sticky Reveal — Image opacity fade (Option A) */
.srf-sticky-reveal .srf-image,
.srf-sticky-reveal .srf-snippet img,
.srf-sticky-reveal .srf-media img {
  opacity: 0.2;
  transition: opacity 0.35s ease-out;
  will-change: opacity, transform;
}