/* ==========================================================================
   MakeBelieveTransition  (.mbt-frame / .mbt)
   Click-driven "real -> make-believe" image reveal for makebelievevillage.org

   The real photo sits at the bottom of the frame. The imagined artwork sits
   on top of it inside .mbt-mask, whose CSS mask opens as --p goes 0 -> 1.
   mbt.js tweens --p when the visitor presses the control; nothing moves on
   scroll. Nothing here is baked into the image files.

   Effect personalities (data-effect on .mbt):
     storyboard   diagonal sweep with a wobbly graphite edge   (studio-classroom)
     greenScreen  world grows out of the green-screen zone     (green-screen)
     cartoon      ink outlines lead, colour fills in behind   (reel-kidz)
     lens         radial reveal from the camera, gentle settle (student-camera)

   Tunable custom properties:
     --p          reveal progress 0..1 (set by JS on .mbt-frame; leave alone)
     --ox --oy    reveal origin (greenScreen, lens)        e.g. data-origin="44% 50%"
     --s1..--s3   blob seed points (cartoon)               e.g. data-seeds="28% 26% | 70% 42% | 20% 42%"
     --lead       how far the ink outlines run ahead of the colour (cartoon)
     --angle      sweep angle (storyboard)                 e.g. data-angle="108deg"
     --feather    softness of the reveal edge, % of frame  e.g. data-feather="8%"
     --mbt-control-inset   distance of the control from the frame's corner
   Duration lives in JS (data-duration on .mbt-frame, default 900ms).
   Colors mirror index.html tokens.
   ========================================================================== */

.mbt-figure{margin:0;}

.mbt-frame{
  --p:0;
  --mbt-control-inset:14px;
  position:relative;
}

.mbt{
  --ox:50%; --oy:50%;
  --feather:16%;
  position:relative;
  overflow:hidden;
  border-radius:20px;
  background:var(--deep,#0D1B2E);
  aspect-ratio:var(--mbt-ratio,16/9);
  box-shadow:0 18px 50px rgba(13,27,46,.16);
  isolation:isolate;
  contain:layout paint;
}
/* Both layers share one box, one crop, one radius: no layout shift between states */
.mbt img,.mbt picture{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;margin:0;
}
.mbt-fx,.mbt-mask,.mbt-edge,.mbt-edge-band{position:absolute;inset:0;}
.mbt-edge{pointer-events:none;mix-blend-mode:screen;opacity:.7;}
.mbt-edge-band{background:var(--gold,#FFB800);}
/* Only promote the animated layer while it is actually moving */
.mbt-frame.is-animating .mbt-fx,
.mbt-frame.is-peeking .mbt-fx{will-change:transform,mask-position;}
/* Seam decorations only show mid-transition */
.mbt-frame.is-rest .mbt-edge{opacity:0;}
/* The displacement filters push pixels a few px; a hair of overscan on the
   masked layer keeps the frame edge from showing a sliver of the real photo */
.mbt-frame.is-fx .mbt[data-effect="storyboard"] .mbt-mask,
.mbt-frame.is-fx .mbt[data-effect="cartoon"] .mbt-mask,
.mbt-frame.is-fx .mbt[data-effect="cartoon"] .mbt-ink-mask{transform:scale(1.02);}

/* --------------------------------------------------------------------------
   Effect: storyboard  (diagonal sweep, graphite seam, hand-drawn wobble)
   -------------------------------------------------------------------------- */
.mbt[data-effect="storyboard"]{--angle:108deg;--feather:5%;}
.mbt[data-effect="storyboard"] .mbt-mask{
  --e:calc(var(--p) * (100% + var(--feather)));
  -webkit-mask-image:linear-gradient(var(--angle),#000 calc(var(--e) - var(--feather)),transparent var(--e));
          mask-image:linear-gradient(var(--angle),#000 calc(var(--e) - var(--feather)),transparent var(--e));
}
.mbt[data-effect="storyboard"] .mbt-edge{mix-blend-mode:multiply;opacity:.4;}
.mbt[data-effect="storyboard"] .mbt-edge-band{
  --e:calc(var(--p) * (100% + var(--feather)) - var(--feather) * .5);
  background:var(--deep,#0D1B2E);
  -webkit-mask-image:linear-gradient(var(--angle),transparent calc(var(--e) - 1.6%),#000 calc(var(--e) - .5%),#000 calc(var(--e) + .3%),transparent calc(var(--e) + 1.4%));
          mask-image:linear-gradient(var(--angle),transparent calc(var(--e) - 1.6%),#000 calc(var(--e) - .5%),#000 calc(var(--e) + .3%),transparent calc(var(--e) + 1.4%));
}
.mbt-frame.is-fx .mbt[data-effect="storyboard"] .mbt-fx,
.mbt-frame.is-fx .mbt[data-effect="storyboard"] .mbt-edge{filter:url(#mbt-sketch-edge);}

/* --------------------------------------------------------------------------
   Effect: greenScreen  (world escapes the green-screen zone, warm rim)
   -------------------------------------------------------------------------- */
.mbt[data-effect="greenScreen"]{--feather:18%;}
.mbt[data-effect="greenScreen"] .mbt-mask{
  --r:calc(var(--p) * (112% + var(--feather)));
  -webkit-mask-image:radial-gradient(circle at var(--ox) var(--oy),#000 calc(var(--r) - var(--feather)),transparent var(--r));
          mask-image:radial-gradient(circle at var(--ox) var(--oy),#000 calc(var(--r) - var(--feather)),transparent var(--r));
}
.mbt[data-effect="greenScreen"] .mbt-edge{opacity:.5;filter:blur(5px);}
.mbt[data-effect="greenScreen"] .mbt-edge-band{
  --r:calc(var(--p) * (112% + var(--feather)));
  background:radial-gradient(circle at var(--ox) var(--oy),var(--gold,#FFB800),var(--teal,#0ABFBF) 70%);
  -webkit-mask-image:radial-gradient(circle at var(--ox) var(--oy),transparent calc(var(--r) - var(--feather) - 2%),#000 calc(var(--r) - var(--feather) * .45),transparent calc(var(--r) + 1%));
          mask-image:radial-gradient(circle at var(--ox) var(--oy),transparent calc(var(--r) - var(--feather) - 2%),#000 calc(var(--r) - var(--feather) * .45),transparent calc(var(--r) + 1%));
}

/* --------------------------------------------------------------------------
   Effect: cartoon  (the photo is drawn into a cartoon)
   Two layers of the same artwork share one set of organic blob masks seeded
   on the puppets and the clapperboard. The ink layer (grayscale, multiplied
   over the photo, so it reads as outlines and shading) runs --lead ahead of
   the colour layer, so contours appear first and colour fills in behind them.
   The sketch displacement filter keeps the growing edge hand-drawn.
   -------------------------------------------------------------------------- */
.mbt[data-effect="cartoon"]{--s1:28% 26%;--s2:70% 42%;--s3:20% 42%;--feather:9%;--lead:26%;
  --ld:calc(var(--lead) * min(1, var(--p) * 5));   /* ink lead ramps in over the first 20% so nothing shows at rest */
  /* three blobs: puppets first, clapperboard next, sofa/puppet corner last */
  --g1:calc(var(--p) * 138%);
  --g2:calc((var(--p) - .08) * 138%);
  --g3:calc((var(--p) - .16) * 138%);
}
.mbt-ink{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.72;
  filter:grayscale(1) contrast(1.6) brightness(1.28);}
.mbt-ink-mask{position:absolute;inset:0;display:block;}
.mbt-frame.is-rest.is-imagined .mbt-ink{opacity:0;}   /* colour layer covers it anyway; drop the paint */
.mbt[data-effect="cartoon"] .mbt-mask{
  -webkit-mask-image:
    radial-gradient(ellipse 70% 62% at var(--s1),#000 calc(var(--g1) - var(--feather)),transparent var(--g1)),
    radial-gradient(ellipse 62% 70% at var(--s2),#000 calc(var(--g2) - var(--feather)),transparent var(--g2)),
    radial-gradient(ellipse 72% 60% at var(--s3),#000 calc(var(--g3) - var(--feather)),transparent var(--g3));
          mask-image:
    radial-gradient(ellipse 70% 62% at var(--s1),#000 calc(var(--g1) - var(--feather)),transparent var(--g1)),
    radial-gradient(ellipse 62% 70% at var(--s2),#000 calc(var(--g2) - var(--feather)),transparent var(--g2)),
    radial-gradient(ellipse 72% 60% at var(--s3),#000 calc(var(--g3) - var(--feather)),transparent var(--g3));
}
.mbt[data-effect="cartoon"] .mbt-ink-mask{
  -webkit-mask-image:
    radial-gradient(ellipse 70% 62% at var(--s1),#000 calc(var(--g1) + var(--ld) - var(--feather)),transparent calc(var(--g1) + var(--ld))),
    radial-gradient(ellipse 62% 70% at var(--s2),#000 calc(var(--g2) + var(--ld) - var(--feather)),transparent calc(var(--g2) + var(--ld))),
    radial-gradient(ellipse 72% 60% at var(--s3),#000 calc(var(--g3) + var(--ld) - var(--feather)),transparent calc(var(--g3) + var(--ld)));
          mask-image:
    radial-gradient(ellipse 70% 62% at var(--s1),#000 calc(var(--g1) + var(--ld) - var(--feather)),transparent calc(var(--g1) + var(--ld))),
    radial-gradient(ellipse 62% 70% at var(--s2),#000 calc(var(--g2) + var(--ld) - var(--feather)),transparent calc(var(--g2) + var(--ld))),
    radial-gradient(ellipse 72% 60% at var(--s3),#000 calc(var(--g3) + var(--ld) - var(--feather)),transparent calc(var(--g3) + var(--ld)));
}
.mbt[data-effect="cartoon"] .mbt-edge{display:none;}
.mbt-frame.is-fx .mbt[data-effect="cartoon"] .mbt-fx{filter:url(#mbt-sketch-edge);}
.mbt-frame.is-fx .mbt[data-effect="cartoon"] .mbt-ink{filter:url(#mbt-sketch-edge) grayscale(1) contrast(1.6) brightness(1.28);}

/* --------------------------------------------------------------------------
   Effect: lens  (radial from the camera; imagined layer settles from 1.04)
   -------------------------------------------------------------------------- */
.mbt[data-effect="lens"]{--feather:20%;}
.mbt[data-effect="lens"] .mbt-mask{
  --r:calc(var(--p) * (110% + var(--feather)));
  -webkit-mask-image:radial-gradient(circle at var(--ox) var(--oy),#000 calc(var(--r) - var(--feather)),transparent var(--r));
          mask-image:radial-gradient(circle at var(--ox) var(--oy),#000 calc(var(--r) - var(--feather)),transparent var(--r));
}
.mbt[data-effect="lens"] .mbt-fx{
  transform:scale(calc(1.04 - var(--p) * .04));
  transform-origin:var(--ox) var(--oy);
}
.mbt[data-effect="lens"] .mbt-edge{opacity:.35;filter:blur(8px);}
.mbt[data-effect="lens"] .mbt-edge-band{
  --r:calc(var(--p) * (110% + var(--feather)));
  background:radial-gradient(circle at var(--ox) var(--oy),#fff,var(--gold,#FFB800) 55%,var(--flame,#E8532A) 100%);
  -webkit-mask-image:radial-gradient(circle at var(--ox) var(--oy),transparent calc(var(--r) - var(--feather) - 3%),#000 calc(var(--r) - var(--feather) * .5),transparent calc(var(--r) + 2%));
          mask-image:radial-gradient(circle at var(--ox) var(--oy),transparent calc(var(--r) - var(--feather) - 3%),#000 calc(var(--r) - var(--feather) * .5),transparent calc(var(--r) + 2%));
}

/* --------------------------------------------------------------------------
   The control: Enter Make Believe / Return to Reality
   Deep Space pill with a Star Gold play mark; flips to gold when transformed.
   -------------------------------------------------------------------------- */
.mbt-control{
  position:absolute;right:var(--mbt-control-inset);bottom:var(--mbt-control-inset);z-index:3;
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:5px 18px 5px 5px;margin:0;
  border-radius:40px;border:1.5px solid rgba(255,184,0,.6);
  background:rgba(13,27,46,.8);color:var(--stardust,#F5F1EB);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;line-height:1;
  cursor:pointer;white-space:nowrap;
  box-shadow:0 6px 18px rgba(13,27,46,.35);
  opacity:0;transform:translateY(8px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,color .3s,box-shadow .3s;
}
.mbt-control[hidden]{display:none;}
.mbt-frame.is-in .mbt-control{opacity:1;transform:none;}
.mbt-control .mbt-ic{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--gold,#FFB800);display:grid;place-items:center;
  transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s;
}
.mbt-control .mbt-ic svg{width:12px;height:14px;display:block;fill:var(--deep,#0D1B2E);margin-left:2px;transition:fill .3s;}
.mbt-control:hover{border-color:var(--gold,#FFB800);box-shadow:0 8px 24px rgba(13,27,46,.45),0 0 0 4px rgba(255,184,0,.18);}
.mbt-control:hover .mbt-ic{transform:scale(1.1);}
.mbt-control:active .mbt-ic{transform:scale(.96);}
.mbt-control:focus-visible{outline:3px solid var(--gold,#FFB800);outline-offset:3px;}
/* Transformed state: gold pill, mark points back the way we came */
.mbt-frame.is-imagined .mbt-control{background:rgba(255,184,0,.94);color:var(--deep,#0D1B2E);border-color:rgba(255,184,0,.94);}
.mbt-frame.is-imagined .mbt-control .mbt-ic{background:var(--deep,#0D1B2E);transform:rotate(180deg);}
.mbt-frame.is-imagined .mbt-control:hover .mbt-ic{transform:rotate(180deg) scale(1.1);}
.mbt-frame.is-imagined .mbt-control .mbt-ic svg{fill:var(--gold,#FFB800);}

/* --------------------------------------------------------------------------
   Caption row
   -------------------------------------------------------------------------- */
.mbt-caption{margin-top:14px;font-size:13.5px;line-height:1.5;opacity:.8;}

/* --------------------------------------------------------------------------
   Static mode (prefers-reduced-motion): mask stays open, layer crossfades
   -------------------------------------------------------------------------- */
.mbt-frame.is-static{--p:1;}
.mbt-frame.is-static .mbt-fx{opacity:0;transition:opacity .2s ease;transform:none;}
.mbt-frame.is-static.is-imagined .mbt-fx{opacity:1;}
.mbt-frame.is-static .mbt-edge{display:none;}
.mbt-frame.is-static .mbt-control{transition:opacity .2s,background .2s,color .2s;transform:none;}
.mbt-frame.is-static .mbt-control .mbt-ic{transition:none;}

/* --------------------------------------------------------------------------
   Layout helpers used on the Programs page (image + copy rows)
   -------------------------------------------------------------------------- */
.mbt-row{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:48px;align-items:center;margin-top:56px;
}
.mbt-row.flip .mbt-figure{order:2;}
.mbt-row .mbt-copy h3{font-size:clamp(24px,3vw,34px);color:var(--deep,#0D1B2E);margin:10px 0 14px;}
.mbt-row .mbt-copy p{font-size:16px;line-height:1.75;opacity:.82;}
.mbt-kicker{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--teal,#0ABFBF);
}
@media(max-width:880px){
  .mbt-row{grid-template-columns:1fr;gap:26px;margin-top:48px;}
  .mbt-row.flip .mbt-figure{order:0;}
}

/* --------------------------------------------------------------------------
   Phones: keep the reveal, drop the filters and rim glow, compact control
   -------------------------------------------------------------------------- */
@media(max-width:640px){
  .mbt{border-radius:16px;}
  .mbt-frame{--mbt-control-inset:10px;}
  .mbt .mbt-edge{display:none;}
  .mbt-frame.is-fx .mbt-fx{filter:none;}
  .mbt[data-effect="lens"] .mbt-fx{transform:none;}
  .mbt[data-effect="storyboard"]{--feather:10%;}
  .mbt[data-effect="cartoon"]{--feather:13%;}
  .mbt-ink{filter:grayscale(1) contrast(1.6) brightness(1.28) !important;}
  .mbt-control{font-size:11px;letter-spacing:1px;padding:4px 14px 4px 4px;gap:8px;}
  .mbt-control .mbt-ic{width:34px;height:34px;}
}

/* --------------------------------------------------------------------------
   Fallback: no CSS mask support -> plain crossfade on the same --p
   -------------------------------------------------------------------------- */
@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .mbt .mbt-fx{opacity:var(--p);}
  .mbt .mbt-edge,.mbt .mbt-ink{display:none;}
}

/* ==========================================================================
   MakeBelieveStack  (.mbs)   home page pinned programs deck
   The section is tall; its inner stage sticks to the viewport. Each program
   is a full-bleed card. As the visitor scrolls, the next card rises from the
   bottom and lands on the previous one, which stays peeking out behind it,
   a little smaller and dimmer. Motion follows the scroll exactly (mbt.js
   writes the transforms), so stopping mid-way holds the card mid-way.
   The frame inside each card still transforms only on Enter Make Believe.
   Tuning: --mbs-step (scroll travel per card), --mbs-hold (pause once the
   deck is complete), --mbs-card-h (card height), --mbs-peek (how far a
   covered card's top edge shows), --mbs-shrink (scale step per depth).
   ========================================================================== */
.mbs{
  --mbs-step:80vh;
  --mbs-hold:25vh;
  --mbs-card-h:min(64vh,640px);
  --mbs-peek:16px;
  --mbs-shrink:.05;
  position:relative;
  height:calc(100vh + (var(--n,3) - 1) * var(--mbs-step) + var(--mbs-hold));
  padding:0;
}
.mbs-sticky{
  position:sticky;top:0;
  height:100vh;height:100svh;
  box-sizing:border-box;padding-top:var(--nav-h,84px);
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.mbs-sticky>.wrap{width:100%;}
.mbs-head{margin-bottom:26px;}
.mbs-stack{position:relative;height:var(--mbs-card-h);
  /* room above for the peeking edges of covered cards */
  margin-top:calc(var(--mbs-peek) * 2);}
.mbs-card{
  position:absolute;inset:0;
  border-radius:24px;overflow:hidden;
  background:var(--deep,#0D1B2E);
  box-shadow:0 24px 60px rgba(13,27,46,.28);
  transform:translate3d(0,110%,0);
  transform-origin:50% 0;
  will-change:transform;
}
.mbs-card:first-child{transform:none;}
/* the frame fills the card; layers crop with object-fit */
.mbs-card .mbt-figure,.mbs-card .mbt-frame{position:absolute;inset:0;}
.mbs-card .mbt{aspect-ratio:auto;height:100%;max-height:none;border-radius:0;box-shadow:none;}
.mbs-card .mbt-frame{--mbt-control-inset:20px;}
/* copy overlaid on the lower-left, over a scrim; the control keeps the lower-right */
.mbs-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:120px 46% 26px 28px;
  background:linear-gradient(to top,rgba(13,27,46,.88) 0%,rgba(13,27,46,.55) 45%,rgba(13,27,46,0) 100%);
  color:var(--stardust,#F5F1EB);
}
.mbs-copy .mbt-kicker{color:var(--gold,#FFB800);}
.mbs-copy h3{font-size:clamp(24px,3vw,38px);color:#fff;margin:8px 0 10px;}
.mbs-copy p{font-size:15.5px;line-height:1.6;opacity:.9;max-width:520px;}
.mbs-lnk{
  display:inline-block;margin-top:12px;pointer-events:auto;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--gold,#FFB800);border-bottom:1.5px solid rgba(255,184,0,.5);padding-bottom:2px;
}
.mbs-lnk:hover{color:#fff;border-color:#fff;}
/* dimming veil for cards that have been covered (opacity set by mbt.js) */
.mbs-card::after{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:var(--deep,#0D1B2E);opacity:var(--veil,0);
}
.mbt-hint{text-align:center;font-size:15px;opacity:.75;margin:-8px auto 8px;}

@media(max-height:800px){
  .mbs{--mbs-card-h:min(60vh,560px);}
  .mbs-head{margin-bottom:14px;}
  .mbs-head h2{font-size:clamp(26px,3.4vw,36px);}
}
@media(max-width:880px){
  .mbs{--mbs-card-h:60vh;--mbs-peek:12px;}
  .mbs-head h2{font-size:clamp(26px,7vw,34px);}
  .mbs-card{border-radius:18px;}
  .mbs-copy{padding:90px 18px 22px 18px;}
  /* phones: the site's fixed newsletter + chat pills sit over the card's bottom corners,
     so the control moves to the top-right of the card */
  .mbs-card .mbt-control{top:var(--mbt-control-inset);bottom:auto;}
  .mbs-copy h3{font-size:22px;margin:6px 0 6px;}
  .mbs-copy p{font-size:14px;}
  .mbs-lnk{margin-top:8px;font-size:12px;}
  .mbs-card .mbt-frame{--mbt-control-inset:14px;}
}
@media(prefers-reduced-motion:reduce){
  .mbs-card{will-change:auto;}
}
/* No JavaScript: nothing pins, the cards simply stack down the page */
body:not(.js-ready) .mbs{height:auto;padding:60px 0;}
body:not(.js-ready) .mbs-sticky{position:static;height:auto;padding-top:0;display:block;overflow:visible;}
body:not(.js-ready) .mbs-stack{height:auto;margin-top:0;}
body:not(.js-ready) .mbs-card{position:relative;inset:auto;height:var(--mbs-card-h);margin-bottom:24px;transform:none !important;}