/* Cinema layer. Everything here applies only once cinema.js has added .cine to <html>. */

/* Lenis drives the scroll, so the browser's own smooth scrolling has to stand down. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto !important}
html.lenis.lenis-stopped{overflow:clip}

.cine .hero__in{will-change:transform,opacity}
.cine .contact{overflow:hidden}

@media (min-width:900px) and (min-height:700px){
  /* Story chapters as a sticky stack of cards. */
  .cine .story{display:block}
  .cine .story .chapter{
    position:sticky;top:calc(10vh + var(--i,0) * 14px);
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:8px clamp(32px,5vw,80px);align-content:start;
    min-height:min(56vh,520px);margin-bottom:clamp(28px,4vw,56px);
    padding:clamp(28px,3.4vw,52px);
    background:var(--w);border:0;border-top:2px solid var(--k);border-radius:0 0 22px 22px;
    box-shadow:0 30px 60px -34px rgba(0,0,0,.28);
    transform-origin:50% 0;will-change:transform;
    opacity:1;transform:none;transition:none
  }
  /* The card stays solid (so the one beneath never shows through) and greys out under this veil instead. */
  .cine .story .chapter::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--g1);opacity:var(--dim,0);pointer-events:none}
  .cine .story .chapter:nth-child(2){--i:1}
  .cine .story .chapter:nth-child(3){--i:2}
  .cine .story .chapter:nth-child(4){--i:3}
  .cine .story .chapter:last-child{margin-bottom:0}
  .cine .story .chapter > *{grid-column:2}
  .cine .story .chapter > .chapter__k,.cine .story .chapter > h3{grid-column:1}
  .cine .story .chapter > .chapter__k{grid-row:1}
  .cine .story .chapter > h3{grid-row:2 / span 3;margin:6px 0 0;font-size:clamp(2rem,3.6vw,3.6rem)}
  .cine .story .chapter > p:not(.chapter__k){font-size:clamp(17px,1.3vw,19px)}
  .cine .story .chapter > p:nth-of-type(2){grid-row:1 / span 2}

  /* "None." scene: the section fills the screen while it is held. */
  .cine .degree{min-height:100vh;display:flex;align-items:center;padding-block:clamp(40px,6vh,90px)}
  .cine .degree__none{transform-origin:0 60%;will-change:transform,opacity}
  .cine .degree .eyebrow,.cine .degree__copy{opacity:1;transform:none;transition:none}
}