/* ==========================================================================
   KIDS — cinematic layer for content pages (hero video, parallax video bands,
   framed media, scroll reveals). Pairs with cinematic.js. Requires site.css.
   ========================================================================== */

/* --- hero background video (drop inside .page-hero) --- */
.page-hero .hero-vid{position:absolute;inset:0;z-index:0;overflow:hidden}
.page-hero .hero-vid video{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  animation:kb 26s ease-in-out infinite alternate}
.page-hero .hero-vid::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(255,249,240,.95) 0%,rgba(255,249,240,.86) 34%,rgba(255,249,240,.5) 62%,rgba(255,249,240,.2) 100%)}
.page-hero.dark-hero .hero-vid::after{background:linear-gradient(105deg,rgba(20,14,40,.9) 0%,rgba(20,14,40,.72) 40%,rgba(20,14,40,.4) 75%,rgba(20,14,40,.28) 100%)}
.page-hero.dark-hero .crumb,.page-hero.dark-hero .crumb a{color:rgba(255,255,255,.75)}
.page-hero.dark-hero h1{color:#fff}
.page-hero.dark-hero p{color:rgba(255,255,255,.9)}
@keyframes kb{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.14) translateY(-2%)}}

/* --- full-bleed cinematic video band --- */
.cine-band{position:relative;min-height:clamp(340px,58vh,600px);display:flex;align-items:flex-end;overflow:hidden;
  border-radius:34px;box-shadow:0 50px 110px -55px rgba(20,14,40,.7);margin:clamp(20px,4vw,40px) 0}
.cine-band video{position:absolute;inset:0;width:100%;height:118%;top:-9%;object-fit:cover;will-change:transform}
.cine-band::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(20,14,40,.86),rgba(20,14,40,.22) 52%,rgba(20,14,40,.08) 100%),
             linear-gradient(105deg,color-mix(in srgb,var(--band,var(--grape)) 45%,transparent),transparent 60%)}
.cine-band .cine-copy{position:relative;z-index:2;padding:clamp(28px,5vw,60px);max-width:660px;color:#fff}
.cine-band .cine-copy .eyebrow{color:#fff;background:rgba(255,255,255,.18)}
.cine-band .cine-copy h2{color:#fff;font-size:clamp(28px,4.4vw,52px);margin:16px 0 12px}
.cine-band .cine-copy p{color:rgba(255,255,255,.92);font-size:clamp(15px,1.8vw,19px);max-width:52ch}
.cine-band .play-badge{position:absolute;top:22px;right:22px;z-index:2;width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.cine-band .play-badge:hover{transform:scale(1.08)}
.cine-band .play-badge svg{width:22px;height:22px;margin-left:3px;fill:var(--ink)}

/* --- framed in-content media with parallax --- */
.cine-media{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/10;background:#1b1440;
  box-shadow:0 40px 90px -50px rgba(20,14,40,.7);border:1px solid var(--line-soft)}
.cine-media video,.cine-media img{position:absolute;inset:-9%;width:118%;height:118%;object-fit:cover;will-change:transform}
.cine-media .tag{position:absolute;left:18px;bottom:18px;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border-radius:16px;padding:11px 18px;font-family:"Fredoka",sans-serif;font-weight:600;font-size:14px;box-shadow:0 14px 28px -16px rgba(20,14,40,.6)}

/* split: media + copy */
.cine-split{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,64px);align-items:center}
@media(min-width:920px){.cine-split{grid-template-columns:1.05fr .95fr}.cine-split.flip .cine-media{order:2}}

/* --- video gallery (click to play → lightbox) --- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.vgrid .vc{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;background:#1b1440;
  box-shadow:0 26px 60px -42px rgba(20,14,40,.6);border:1px solid var(--line-soft)}
.vgrid .vc img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.vgrid .vc:hover img{transform:scale(1.06)}
.vgrid .vc .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;
  background:linear-gradient(to top,rgba(20,14,40,.72),transparent 60%)}
.vgrid .vc .ov b{color:#fff;font-family:"Fredoka",sans-serif;font-weight:600;font-size:16px;position:relative;z-index:1}
.vgrid .vc .pl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.vgrid .vc:hover .pl{transform:translate(-50%,-50%) scale(1.1)}
.vgrid .vc .pl svg{width:22px;height:22px;margin-left:3px;fill:var(--ink)}

/* --- cinematic reveal (clip + rise) --- */
.cine-reveal{opacity:0;transform:translateY(42px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.cine-reveal.in{opacity:1;transform:none}

/* --- shared video lightbox (same as home) --- */
#vmodal{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:24px;
  background:rgba(20,14,35,.86);backdrop-filter:blur(10px);opacity:0;transition:opacity .35s var(--ease)}
#vmodal.open{display:grid;opacity:1}
#vmodal .vwrap{position:relative;width:min(94vw,960px);display:flex;align-items:center;justify-content:center}
#vmodal video{width:100%;max-height:86vh;object-fit:contain;border-radius:18px;background:#000;box-shadow:0 50px 120px -30px rgba(0,0,0,.85);transform:scale(.95);transition:transform .35s var(--ease)}
#vmodal.open video{transform:scale(1)}
#vmodal .vclose{position:absolute;top:-16px;right:-16px;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;color:var(--ink);font-size:26px;line-height:1;display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(0,0,0,.6);transition:transform .3s var(--ease)}
#vmodal .vclose:hover{transform:scale(1.1) rotate(90deg)}
@media(max-width:680px){#vmodal .vclose{top:-56px;right:0}}

@media(prefers-reduced-motion:reduce){
  .page-hero .hero-vid video{animation:none;transform:none}
  .cine-reveal{opacity:1;transform:none}
  .cine-band video,.cine-media video{transform:none!important}
}