/* First-frame approach: an actual decoded video image advances toward its red region. */
.section02-entry-image{display:none}
.section02.is-loading{clip-path:none;background:#000}
.section02.is-loading .section02-film,.section02.is-loading .section02-entry-image{visibility:hidden}
.section02.is-opening{clip-path:none;overflow:hidden;background:#000}
.section02.is-opening .section02-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;filter:none;opacity:var(--base-opacity,0);will-change:mask-image,opacity;
  -webkit-mask-image:radial-gradient(circle at var(--entry-anchor-x,50%) var(--entry-anchor-y,50%),#000 0,#000 var(--base-solid-r,0px),transparent var(--base-reveal-r,0px));
  mask-image:radial-gradient(circle at var(--entry-anchor-x,50%) var(--entry-anchor-y,50%),#000 0,#000 var(--base-solid-r,0px),transparent var(--base-reveal-r,0px));}
.section02.is-opening .section02-entry-image{display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;pointer-events:none;transform:scale(var(--intro-scale,.28));transform-origin:var(--entry-anchor-x,50%) var(--entry-anchor-y,50%);opacity:var(--intro-opacity,0);will-change:transform,mask-image,opacity;
  -webkit-mask-image:radial-gradient(circle at var(--entry-anchor-x,50%) var(--entry-anchor-y,50%),#000 0,#000 var(--solid-r,0px),transparent var(--reveal-r,0px));
  mask-image:radial-gradient(circle at var(--entry-anchor-x,50%) var(--entry-anchor-y,50%),#000 0,#000 var(--solid-r,0px),transparent var(--reveal-r,0px));}
.section02.is-opening .section02-shade,.section02.is-opening .pupil-glint{display:none}
.section02.is-active .section02-film{-webkit-mask-image:none;mask-image:none;opacity:1}

/* Rotate only the mobile film pixels. The full-height sticky frame keeps the
   scroll geometry and the upright editorial copy unchanged. */
.section02-media-frame{display:contents}
@media(max-width:700px){
  .section02.is-opening .section02-media-frame{display:block;position:absolute;left:50%;top:50%;width:100svh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
  .section02.is-active .section02-media-frame{display:block;position:sticky;top:0;width:100%;height:100svh}
  .section02.is-active .section02-film{position:absolute;inset:auto;left:50%;top:50%;width:100svh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center;object-fit:cover}
}