/* Chapter One v1.2 — depth zoom and curated cinematic project frames.
   Gallery is intentionally separate; this file owns only the immersive chapter. */
#cinema-wrap .cinema-frame.showreel-shell{
  width:min(56vw,890px);
  top:49%;
  z-index:6!important;
  transform:translate3d(-50%,calc(-18% + var(--frame-y,0px)),0)
    scale(var(--cinema-scale,.98))!important;
  transform-origin:center center!important;
  transition:border-color .35s ease,box-shadow .35s ease;
  will-change:transform;
  box-shadow:0 34px 104px #020715ce,0 0 72px #6ba9fe18;
}
#cinema-wrap .cinema-frame.showreel-shell:hover{
  box-shadow:0 44px 114px #020714e3,0 0 85px #86bafe22;
}
#cinema-wrap .cinema-copy{
  z-index:17!important;
  opacity:1!important;
  pointer-events:none;
}
#cinema-wrap .float-reel-card{
  z-index:8!important;
  opacity:clamp(.78, var(--float-opacity,1), 1)!important;
  filter:none!important;
  pointer-events:auto!important;
  width:clamp(155px,15vw,226px);
}
#cinema-wrap .float-reel-card--one{left:4%;top:43%;--float-base-rot:-7deg}
#cinema-wrap .float-reel-card--two{right:4%;top:51%;--float-base-rot:7deg}
#cinema-wrap .float-reel-card--three{
  display:block!important;left:7%;bottom:10%;top:auto;
  width:clamp(145px,13vw,200px);--float-base-rot:4deg;
}
#cinema-wrap .float-reel-card__inner{
  background:#0b182c;
  border:1px solid #93b8e980;
  box-shadow:0 16px 40px #030913a3;
}
#cinema-wrap .float-reel-card__media{background:#0c1e36;isolation:isolate}
#cinema-wrap .float-reel-card__poster{
  position:absolute;inset:0;z-index:2;
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.86) saturate(.94);
  transform:scale(1.02);
  transition:transform .5s ease,filter .5s ease;
  pointer-events:none;
}
#cinema-wrap .float-reel-card:hover .float-reel-card__poster{
  filter:brightness(1.05) saturate(1.07);transform:scale(1.085)
}
#cinema-wrap .float-reel-card__placeholder{display:none!important}
#cinema-wrap .float-reel-card__meta{
  background:#07152be8;
  color:#d4e9ff;
  padding:10px 12px;
  font-size:9px;
  letter-spacing:.11em;
}
#cinema-wrap .showreel-visual{isolation:isolate}
#cinema-wrap .showreel-montage{
  position:absolute;inset:0;z-index:2;overflow:hidden;
  pointer-events:none;
  opacity:0;
  background:#07101d;
  transition:opacity .38s ease;
}
#cinema-wrap .showreel-shell.is-montage-active:not(.has-video) .showreel-montage{opacity:1}
#cinema-wrap .showreel-shell.has-video .showreel-montage{opacity:0}
#cinema-wrap .showreel-shell.is-montage-active .showreel-placeholder{
  opacity:0!important;visibility:hidden;
  transition:opacity .32s ease,visibility .32s ease;
}
#cinema-wrap .montage-shot{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  opacity:0;
  transform:scale(1.07) translate3d(0,0,0);
  filter:brightness(.72) saturate(.91);
  transition:opacity .28s ease,filter .3s ease;
  will-change:transform,opacity;
}
#cinema-wrap .montage-shot.is-current{
  opacity:1;animation:fiqri-shot-move 1.72s linear both;
}
#cinema-wrap .montage-shot[data-format="portrait"]{object-position:center 42%}
@keyframes fiqri-shot-move{
 from{transform:scale(1.045) translate3d(0,0,0)}
 to{transform:scale(1.125) translate3d(-.7%,.4%,0)}
}
#cinema-wrap .showreel-montage::after{
 content:"";position:absolute;inset:0;z-index:2;
 pointer-events:none;
 background:linear-gradient(180deg,#05112665 0%,transparent 29%,#03081415 50%,#020613c9 100%);
}
#cinema-wrap .montage-credit{
  position:absolute;z-index:3;left:6.4%;right:20%;bottom:12.5%;
  display:flex;flex-direction:column;align-items:start;gap:5px;
  color:#f5f9ff;text-align:left;
  text-shadow:0 4px 18px #000b;
}
#cinema-wrap .montage-credit__number{
 font:700 clamp(8px,.7vw,11px)/1.2 "Space Grotesk",sans-serif;
 letter-spacing:.17em;color:#b3d7ff;
}
#cinema-wrap .montage-credit__name{
  max-width:100%;
  font:600 clamp(19px,2.6vw,38px)/1.08 "Space Grotesk",sans-serif;
  letter-spacing:-.055em;
  text-wrap:balance;
}
#cinema-wrap .montage-credit__category{
  margin-top:3px;
  font:600 clamp(8px,.7vw,10px)/1.3 "Space Grotesk",sans-serif;
  color:#b5cde7;letter-spacing:.11em;text-transform:uppercase;
}
#cinema-wrap .montage-progress{
 position:absolute;z-index:4;left:6.4%;right:6.4%;bottom:9.2%;
 height:1px;overflow:hidden;
 background:#e0f0ff3c;
}
#cinema-wrap .montage-progress span{
 display:block;width:100%;height:100%;
 background:#b0d7ff;
 transform:scaleX(0);
 transform-origin:left;
}
#cinema-wrap .showreel-shell.is-montage-active .montage-progress.is-running span{
 animation:fiqri-montage-progress var(--montage-beat,1700ms) linear both;
}
@keyframes fiqri-montage-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#cinema-wrap .showreel-topline,#cinema-wrap .showreel-bottomline{pointer-events:none}
#cinema-wrap .showreel-bottomline{letter-spacing:.11em}
@media(max-width:1060px){
 #cinema-wrap .cinema-frame.showreel-shell{width:min(66vw,740px)}
 #cinema-wrap .float-reel-card{width:clamp(125px,16vw,185px)}
 #cinema-wrap .float-reel-card--one{left:-3%}
 #cinema-wrap .float-reel-card--two{right:-3%}
 #cinema-wrap .float-reel-card--three{left:2%;bottom:10%;width:140px}
}
@media(max-width:700px){
 #cinema-wrap .cinema-frame.showreel-shell{
   width:91vw;top:49%;
 }
 #cinema-wrap .float-reel-card{display:none!important}
 #cinema-wrap .showreel-message{max-width:53%}
 #cinema-wrap .montage-credit{left:6%;right:7%;bottom:17%;gap:2px}
 #cinema-wrap .montage-credit__name{font-size:clamp(16px,5vw,25px)}
 #cinema-wrap .montage-credit__category{font-size:7px}
 #cinema-wrap .montage-credit__number{font-size:8px}
 #cinema-wrap .montage-progress{left:6%;right:6%;bottom:12.2%}
 #cinema-wrap .showreel-bottomline{bottom:7px}
}
@media(prefers-reduced-motion:reduce){
 #cinema-wrap .cinema-frame.showreel-shell{
   transform:translate3d(-50%,-18%,0) scale(.93)!important;
   will-change:auto;
 }
 #cinema-wrap .montage-shot{animation:none!important;transition:none!important}
 #cinema-wrap .montage-progress span{animation:none!important;transform:scaleX(1)}
 #cinema-wrap .float-reel-card:hover .float-reel-card__poster{transform:none}
}

/* If real 1–2 second silent teaser clips are added later, the active clip
   occupies the same shot without a layout reflow or YouTube player chrome. */
#cinema-wrap .montage-clip{
 position:absolute;z-index:1;inset:0;
 display:block;width:100%;height:100%;
 object-fit:cover;object-position:center;
 opacity:0;pointer-events:none;
 filter:brightness(.78) saturate(.95);
 transition:opacity .25s ease;
}
#cinema-wrap .montage-clip.is-current{opacity:1}
#cinema-wrap .montage-clip[hidden]{display:none!important}


/* V1.2.1 — keep project credits legible above the poster vignette. */
#cinema-wrap .showreel-montage{z-index:6}
#cinema-wrap .showreel-frame-lines{z-index:7!important;pointer-events:none}
#cinema-wrap .montage-credit{
  left:5.5%;right:12%;bottom:12%;
  width:fit-content;max-width:75%;
  padding:9px 13px 10px;
  border-radius:7px;
  background:linear-gradient(90deg,#031022d9,#031022b4 75%,#03102251);
  backdrop-filter:blur(3px);
}
#cinema-wrap .montage-credit__name{font-size:clamp(17px,2vw,28px)}
#cinema-wrap .montage-credit__category{font-size:9px}
@media(max-width:700px){
  /* The editorial heading already tells the story. Dense internal placeholder
     copy and two footer lines collide in a genuine 16:9 mobile frame. */
  #cinema-wrap .showreel-message{display:none!important}
  #cinema-wrap .showreel-bottomline{display:none!important}
  #cinema-wrap .cinema-frame.showreel-shell{top:45%}
  #cinema-wrap .cinema-footer{bottom:14%}
  #cinema-wrap .montage-credit{
    bottom:9%;left:6%;right:6%;
    width:auto;max-width:88%;
    padding:6px 8px;
    gap:2px;
  }
  #cinema-wrap .montage-credit__number{font-size:7px}
  #cinema-wrap .montage-credit__name{font-size:clamp(12px,3.2vw,17px)}
  #cinema-wrap .montage-credit__category{font-size:7px;margin-top:0}
  #cinema-wrap .montage-progress{bottom:5%}
}


/* V1.3 — a slightly larger centre lens, without the former full-screen collision.
   Three supporting cards are deliberately different in size, aspect and depth. */
#cinema-wrap .cinema-frame.showreel-shell{
 width:min(58vw,930px);
 top:50%;
 z-index:11!important;
}
#cinema-wrap .cinema-copy{z-index:18!important}
#cinema-wrap .float-reel-card{
 z-index:5!important;
 scale:var(--chapter-card-depth,1);
 opacity:var(--chapter-card-fade,1)!important;
 transition:scale .16s linear,opacity .16s linear;
 will-change:scale,transform;
}
#cinema-wrap .float-reel-card--one{
 left:5.1%;top:34%;
 width:clamp(100px,9vw,142px);
 --float-base-rot:-7deg
}
#cinema-wrap .float-reel-card--one .float-reel-card__media{
 aspect-ratio:9/16;
}
#cinema-wrap .float-reel-card--one .float-reel-card__poster{
 object-position:50% 45%;
}
#cinema-wrap .float-reel-card--two{
 right:4.1%;top:51%;
 width:clamp(160px,15vw,225px);
 --float-base-rot:8deg
}
#cinema-wrap .float-reel-card--two .float-reel-card__media{
 aspect-ratio:16/9;
}
#cinema-wrap .float-reel-card--three{
 display:block!important;
 left:6.7%;bottom:10%;top:auto;
 width:clamp(160px,15vw,213px);
 --float-base-rot:4deg;
}
#cinema-wrap .float-reel-card--three .float-reel-card__media{
 aspect-ratio:1760/761;
}
#cinema-wrap .float-reel-card__poster{object-fit:cover}
#cinema-wrap .float-reel-card__meta{
 font-size:clamp(7px,.65vw,9px);
 padding:9px 10px;
}
#cinema-wrap .montage-youtube-panel{
 position:absolute;inset:0;z-index:1;
 width:100%;height:100%;
 overflow:hidden;
 pointer-events:none;
 opacity:0;
 transition:opacity .65s ease;
 background:transparent;
}
#cinema-wrap .montage-youtube-panel.is-current{opacity:1}
#cinema-wrap .montage-youtube-panel > div,
#cinema-wrap .montage-youtube-panel iframe{
 position:absolute;inset:0;
 display:block;width:100%;height:100%;
 min-width:100%;min-height:100%;
 border:0!important;pointer-events:none;
 background:transparent;
}
/* Crop the 16:9 YouTube player to the central 9:16 Shorts image when necessary. */
#cinema-wrap .montage-youtube-panel[data-format="portrait"] iframe{
 width:316%;min-width:316%;
 left:-108%;
}
#cinema-wrap .montage-skip{
 position:absolute;z-index:10;inset:0;
 display:flex;justify-content:flex-end;align-items:flex-end;gap:6px;
 padding:0 6% 6%;
 color:#e6f3ff;
 font:600 11px "Space Grotesk",sans-serif;
 text-shadow:0 2px 9px #000d;
 background:transparent;border:0;
 cursor:pointer;pointer-events:auto;
 opacity:0;transition:opacity .25s ease;
}
#cinema-wrap .showreel-shell:hover .montage-skip,
#cinema-wrap .showreel-shell:focus-within .montage-skip{opacity:1}
#cinema-wrap .montage-skip:focus-visible{
 outline:3px solid #bfdeff;
 outline-offset:-7px;
 opacity:1;
}
#cinema-wrap .montage-shot{
 transition:opacity .65s ease;
}
#cinema-wrap .montage-shot.is-current{
 animation:fiqri-shot-move 5s linear both;
}
#cinema-wrap .showreel-shell.is-montage-active .montage-progress.is-running span{
 animation-duration:5s;
}
@media(max-width:1040px){
 #cinema-wrap .cinema-frame.showreel-shell{width:min(62vw,800px)}
 #cinema-wrap .float-reel-card--one{left:2%;width:clamp(95px,11vw,128px)}
 #cinema-wrap .float-reel-card--two{right:2%;width:clamp(145px,16vw,191px)}
 #cinema-wrap .float-reel-card--three{left:3%;width:clamp(135px,16vw,188px)}
}
@media(max-width:700px){
 #cinema-wrap .cinema-frame.showreel-shell{width:90vw;top:45%}
 #cinema-wrap .float-reel-card{display:none!important}
 #cinema-wrap .montage-skip{opacity:.82;padding-bottom:12%;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 #cinema-wrap .cinema-frame.showreel-shell{
  transform:translate3d(-50%,-18%,0) scale(1)!important
 }
 #cinema-wrap .montage-youtube-panel{transition:none}
 #cinema-wrap .montage-shot{transition:none;animation:none!important}
 #cinema-wrap .float-reel-card{scale:1;transition:none}
}


/* V1.3.1 — keep the external navigation CTA outside the growing film.
   The former centered button touched the lower frame edge on scroll. */
@media(min-width:701px){
 #cinema-wrap .cinema-footer{
  left:auto!important;right:3.5%!important;
  bottom:5%!important;
  width:auto;justify-content:flex-end!important;
 }
}
@media(max-width:700px){
 #cinema-wrap .cinema-frame.showreel-shell{width:92vw}
}

/* Maintain high contrast for the changing film title over bright original thumbnails. */
#cinema-wrap .montage-credit__name{
 display:block!important;
 visibility:visible!important;
 opacity:1!important;
 color:#f7fbff!important;
 font-weight:700!important;
 line-height:1.18!important;
 text-shadow:0 3px 14px #000f;
 min-height:1.18em;
}