/* The film and copy share one pinned viewport. The rest of the site scrolls normally. */
.home-page { font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.home-page > .header { position:absolute; top:0; left:0; right:0; color:#292921; background:transparent; border-color:#29292124; }
.home-page > .header nav a { color:#49493e; }
.home-page > .header .header-cta { border-color:#29292145; }
.home-page > .header .header-cta:hover { background:#292921; color:#fff; }
.home-page > .header .menu-toggle { color:#292921; }
.cinema { --cinema-paper:#eae6df; color:#292921; background:var(--cinema-paper); position:relative; }
.cinema-stage { position:relative; padding-top:125px; }
.cinema-art { position:relative; width:100%; overflow:hidden; }
.cinema-poster { width:100%; }
.cinema-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.cinema-wash { display:none; }
.cinema-chapters { position:relative; padding:48px var(--gutter) 70px; display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.cinema-chapter h1,.cinema-chapter h2 { font-size:clamp(44px,5.2vw,84px); font-weight:500; line-height:1.04; letter-spacing:-.055em; margin:0 0 23px; text-wrap:balance; }
.cinema-accent { color:#b83c15; }
.cinema-chapter p { font-size:16px; line-height:1.6; letter-spacing:-.015em; max-width:365px; color:#48483f; margin:0 0 25px; text-wrap:pretty; }
.cinema-cta { display:inline-flex; gap:28px; align-items:center; font-size:15px; font-weight:500; padding:4px 0 10px; border-bottom:1px solid #29292170; }
.cinema-cta span { display:grid; place-items:center; width:32px; height:32px; border:1px solid #29292150; border-radius:50%; font-size:19px; transition:background .2s,color .2s; }
.cinema-cta:hover span { background:#292921; color:#fff; }
.cinema-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px var(--gutter); }
.cinema-progress,.cinema-scroll { display:none; }
.cinema-actions { display:flex; align-items:center; gap:28px; margin-left:auto; font-size:11px; }
.cinema-toggle { border:0; border-bottom:1px solid #29292150; background:none; color:#48483f; padding:4px 0; font-size:11px; }
.cinema-actions a { padding:4px 0; }
.cinema.is-active { height:700svh; }
.cinema.is-active .cinema-stage { position:sticky; top:0; height:100svh; min-height:600px; overflow:hidden; padding:0; }
.cinema.is-active .cinema-art { position:absolute; inset:0; height:100%; }
.cinema.is-active .cinema-poster { height:100%; object-fit:cover; }
.cinema.is-active.is-ready .cinema-video { opacity:1; }
.cinema.is-active .cinema-wash { display:block; position:absolute; inset:0; background:linear-gradient(0deg,#eae6dfee 0%,#eae6df00 15%); }
/* Directional light follows the copy; the center stays open for the camera. */
.cinema-wash::before,.cinema-wash::after { content:''; position:absolute; inset:0; opacity:0; }
.cinema-wash::before { background:linear-gradient(90deg,#eeeae1eb 0%,#eeeae1b8 24%,#eeeae100 60%); }
.cinema-wash::after { background:linear-gradient(270deg,#eeeae1eb 0%,#eeeae1b8 24%,#eeeae100 60%); }
.cinema[data-position="left"] .cinema-wash::before { opacity:var(--copy-opacity,1); }
.cinema[data-position="right"] .cinema-wash::after { opacity:var(--copy-opacity,1); }
.cinema.is-active .cinema-chapters { display:block; position:absolute; inset:0; padding:0; pointer-events:none; }
.cinema.is-active .cinema-chapter { position:absolute; left:var(--gutter); top:23%; width:min(42%,600px); pointer-events:auto; will-change:transform,opacity; }
.cinema.is-active .cinema-chapter:not(:first-child) { visibility:hidden; }
.cinema.is-active .cinema-possibility { left:auto; right:var(--gutter); top:22%; width:min(36%,520px); }
.cinema.is-active .cinema-making { top:43%; }
.cinema.is-active .cinema-world { left:auto; right:var(--gutter); top:32%; width:min(36%,520px); }
.cinema.is-active .cinema-invitation { top:25%; }
.cinema.is-active .cinema-bottom { position:absolute; bottom:0; left:var(--gutter); right:var(--gutter); padding:24px 0; }
.cinema.is-active .cinema-progress { display:flex; align-items:center; width:120px; }
.cinema-track { width:100%; height:2px; background:#29292125; }
.cinema-track i { display:block; height:100%; background:#292921; transform:scaleX(0); transform-origin:left; }
/* Official Lucide mouse and chevron-down icons; only the scroll wheel moves. */
.cinema.is-active .cinema-scroll { display:inline-flex; align-items:center; gap:14px; padding:4px 10px; min-height:60px; border:0; border-radius:3px; background:transparent; color:#292921; font-size:12px; font-weight:500; letter-spacing:.015em; }
.cinema-scroll-label { transition:color .25s; }
.cinema-scroll-icon { display:flex; flex-direction:column; align-items:center; gap:1px; width:30px; color:#292921; }
.cinema-scroll-mouse { width:26px; height:26px; stroke-width:1.5; }
.cinema-scroll-chevron { width:16px; height:16px; stroke-width:1.5; color:#b83c15; }
.cinema-scroll:hover .cinema-scroll-label { color:#b83c15; }
.cinema-scroll:focus-visible { outline:1px solid #b83c15; outline-offset:5px; }
@media(prefers-reduced-motion:no-preference) {
  .cinema.is-active .cinema-scroll-mouse path { animation:scroll-wheel 3s ease-in-out infinite; }
  .cinema-scroll:is(:hover,:focus-visible) .cinema-scroll-mouse path { animation:none; }
}
@media(prefers-reduced-motion:reduce) {
  .cinema-scroll-label { transition:none; }
}
@keyframes scroll-wheel {
  0%,20%,100% { transform:translateY(0); opacity:1; }
  65% { transform:translateY(4px); opacity:0; }
  66% { transform:translateY(0); opacity:0; }
}
.cinema.is-active .cinema-actions { margin:0; }
@media(max-width:1050px) {
  .cinema-chapter h1,.cinema-chapter h2 { font-size:clamp(40px,5.5vw,60px); }
  .cinema-chapter p { font-size:14px; }
  .cinema.is-active .cinema-chapter { width:43%; }
  .cinema.is-active .cinema-scroll { display:none; }
}
/* Keep a predictable reading zone above the uncropped film on phones. */
@media(max-width:760px) {
  .home-page > .header nav { background:#eae6df; border-color:#29292125; }
  .cinema-chapters { grid-template-columns:1fr; gap:44px; padding-bottom:35px; }
  .cinema-chapter h1,.cinema-chapter h2 { font-size:clamp(40px,10.5vw,62px); margin-bottom:17px; }
  .cinema-chapter p { font-size:14px; line-height:1.6; max-width:340px; margin-bottom:17px; }
  .cinema.is-active .cinema-stage { min-height:640px; }
  .cinema.is-active .cinema-chapter { top:145px; left:var(--gutter); right:auto; width:calc(100% - 2 * var(--gutter)); }
  .cinema.is-active .cinema-art { top:auto; bottom:110px; height:auto; aspect-ratio:16/9; }
  .cinema.is-active .cinema-poster,.cinema.is-active .cinema-video { object-fit:contain; }
  .cinema.is-active .cinema-wash { background:linear-gradient(180deg,#eae6df 0%,#eae6df00 18%,#eae6df00 83%,#eae6df 100%); }
  .cinema-wash::before,.cinema-wash::after { display:none; }
  .cinema.is-active .cinema-bottom { padding:20px 0; gap:18px; }
  .cinema.is-active .cinema-progress { width:40px; flex-shrink:0; }
  .cinema-actions { gap:18px; font-size:10px; }
  .cinema-toggle { font-size:10px; }
  .cinema-cta { font-size:13px; gap:20px; }
}
@media(max-height:740px) and (max-width:760px) {
  .cinema.is-active .cinema-chapter { top:118px; }
  .cinema-chapter h1,.cinema-chapter h2 { font-size:36px; }
  .cinema.is-active .cinema-art { bottom:80px; }
}
@media(max-height:620px) {
  .cinema.is-active .cinema-stage { min-height:0; }
  .cinema.is-active .cinema-chapter { top:105px; width:43%; }
  .cinema-chapter h1,.cinema-chapter h2 { font-size:32px; margin-bottom:15px; }
  .cinema-chapter p { font-size:12px; max-width:280px; margin-bottom:14px; }
  .cinema.is-active .cinema-art { inset:0; height:100%; aspect-ratio:auto; }
  .cinema.is-active .cinema-poster,.cinema.is-active .cinema-video { object-fit:cover; }
  .cinema.is-active .cinema-wash { background:linear-gradient(0deg,#eae6dfee,transparent 20%); }
  .cinema-wash::before,.cinema-wash::after { display:block; }
  .cinema.is-active .cinema-bottom { padding:16px 0; }
}
@media(max-height:620px) and (max-width:760px) {
  .cinema.is-active .cinema-chapter[data-position="right"] { left:auto; right:var(--gutter); }
}
/* Vertically center the opening copy without affecting its scroll entrance. */
@media(min-width:761px) {
  .cinema.is-active .cinema-idea { top:50%; translate:0 -50%; }
}