/* Scroll-arrival showreel: a warm, abstract Anu Dawn take on the warped-reel language. */
.showreel-section{padding-bottom:clamp(10rem,22vw,22rem)}
.showreel-stage{position:relative;min-height:260svh;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
.showreel-pin{position:sticky;top:0;height:100svh;min-height:620px;display:grid;place-items:center}
.showreel{position:relative;width:min(90vw,1280px);aspect-ratio:2.4/1;min-height:0;border:1px solid rgba(21,22,25,.16);border-radius:clamp(1rem,1.7vw,1.65rem);overflow:hidden;isolation:isolate;background:#d9dddc;box-shadow:0 35px 100px rgba(34,40,45,.2);transform-origin:center center;transform:perspective(1400px) rotateX(22deg) rotateY(-28deg) skewX(-9deg) rotateZ(-2deg) scale3d(.72,.72,1);opacity:.48;filter:saturate(.4) contrast(.85);will-change:transform,opacity,filter,clip-path}
.showreel:before,.showreel:after{display:none}
.reel-media{position:absolute;inset:0;z-index:0;background:#202326;overflow:hidden}
.reel-media iframe{position:absolute;top:0;left:-17.5%;width:135%;height:100%;border:0;pointer-events:none;opacity:.82}
.reel-media-wash{position:absolute;inset:0;background:linear-gradient(125deg,rgba(247,247,245,.46),rgba(192,138,45,.13) 48%,rgba(15,17,19,.24)),radial-gradient(circle at 50% 45%,transparent 15%,rgba(9,10,12,.22) 100%);mix-blend-mode:screen;pointer-events:none}
.reel-overlay{position:absolute;z-index:2;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,2.3vw,2.4rem);color:#fff;opacity:0;transform:scale(.72);transition:opacity .45s linear,transform .45s linear;pointer-events:none}
.reel-word{font-size:clamp(2.7rem,7.1vw,7.7rem);font-weight:500;letter-spacing:-.09em;line-height:.8;text-shadow:0 2px 24px rgba(0,0,0,.22)}
.play-button{position:relative;left:auto;top:auto;z-index:2;width:clamp(4.5rem,8vw,8.5rem);height:clamp(2.6rem,4.8vw,5.1rem);aspect-ratio:auto;flex:none;border:0;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.18);cursor:pointer;display:grid;place-items:center;transform:none;transition:background .55s,transform .55s;pointer-events:auto}
.play-button:hover,.play-button:focus-visible{background:#f4d88f;transform:scale(1.08)}
.play-triangle{width:0;height:0;margin-left:4px;border-left:clamp(.65rem,1.2vw,1.15rem) solid currentColor;border-top:clamp(.42rem,.8vw,.75rem) solid transparent;border-bottom:clamp(.42rem,.8vw,.75rem) solid transparent}
.reel-caption{position:absolute;z-index:3;left:clamp(1rem,2.5vw,2.5rem);bottom:clamp(1rem,2.5vw,2.5rem);color:rgba(255,255,255,.76);font-size:.58rem;text-shadow:0 1px 10px rgba(0,0,0,.55);opacity:.8}
.reel-plus{position:absolute;z-index:3;color:var(--ink);font-size:1.3rem;line-height:1;font-weight:400;opacity:.9;transition:transform .55s,opacity .55s}
.reel-plus--top-left{left:calc(5% + var(--pad));top:calc(50% - min(22vw,310px))}
.reel-plus--top-mid{left:50%;top:calc(50% - min(22vw,310px));transform:translateX(-50%)}
.reel-plus--top-right{right:calc(5% + var(--pad));top:calc(50% - min(22vw,310px))}
.reel-plus--bottom-left{left:calc(5% + var(--pad));bottom:calc(50% - min(22vw,310px))}
.reel-plus--bottom-mid{left:50%;bottom:calc(50% - min(22vw,310px));transform:translateX(-50%)}
.reel-plus--bottom-right{right:calc(5% + var(--pad));bottom:calc(50% - min(22vw,310px))}
.showreel-stage.is-settled .reel-plus{opacity:1}
@media(max-width:800px){
  .showreel-stage{min-height:215svh}
  .showreel-pin{min-height:520px}
  .showreel{width:min(90vw,680px);aspect-ratio:1.5/1;border-radius:1.1rem}
  .reel-media iframe{left:0;top:-8%;width:100%;height:116%}
  .reel-word{font-size:clamp(2.5rem,14vw,5rem)}
  .reel-overlay{gap:.65rem}
  .reel-plus{font-size:1rem}
  .reel-plus--top-left,.reel-plus--top-mid,.reel-plus--top-right{top:calc(50% - min(30vw,230px))}
  .reel-plus--bottom-left,.reel-plus--bottom-mid,.reel-plus--bottom-right{bottom:calc(50% - min(30vw,230px))}
}
@media(prefers-reduced-motion:reduce){
  .showreel-section{padding-bottom:clamp(6rem,12vw,12rem)}
  .showreel-stage{min-height:0;margin-inline:0;padding-inline:0}
  .showreel-pin{position:relative;height:auto;min-height:0;padding:1rem 0}
  .showreel{width:100%;aspect-ratio:1.6/1;transform:none!important;opacity:1!important;filter:none!important;clip-path:none!important;transition:none}
  .reel-overlay{opacity:1!important;transform:none!important;transition:none}
  .reel-plus{display:none}
  .reel-media iframe{opacity:.82}
}

/* Keep the scroll transform immediate; the reveal is driven by requestAnimationFrame. */
.showreel{transition:none}
.play-button:before{display:none}