/* Building, lettering and cloud layers use the same coordinates throughout. */
.cinema{height:300svh;margin-bottom:-65svh;position:relative;background:var(--bg)}
.cinema + .needs{position:relative;z-index:2}
.cinema-sticky{height:100svh;min-height:0;position:sticky;top:0;isolation:isolate;overflow:hidden;--progress:0;--intro:1;--outline:0;--main-building:1;--masked-building:0;--house-y:0%;--house-scale:1;--sky-scale:1;--cloud-left:0%;--cloud-right:0%;--fog-y:70%;--fog-opacity:.8;--opening-bottom:1;--letter-width:80vw;--letter-height:41.0892vw;--cloud-brightness:1;--cloud-veil:0;--silver-fill:0;--silver-shift:-8%;--silver-glint:-70%;--cloud-silver:0;--building-saturation:1;--building-contrast:1}
.scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.scene::after{content:"";position:absolute;inset:0;z-index:4;background:var(--bg);opacity:var(--cloud-veil);pointer-events:none}
.scene-sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--sky-scale));will-change:transform}
.scene-building{position:absolute;top:60%;left:0;width:100%;height:auto;aspect-ratio:2560/2277;transform-origin:50% 100%;transform:translate3d(0,var(--house-y),0) scale(var(--house-scale));will-change:transform}
.scene-building img{filter:saturate(var(--building-saturation)) contrast(var(--building-contrast));display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.scene-main-building{opacity:var(--main-building)}
.scene-composite{position:absolute;inset:0;z-index:1;opacity:var(--masked-building);-webkit-mask-image:url('assets/construction-letters.svg');mask-image:url('assets/construction-letters.svg');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--letter-width) var(--letter-height);mask-size:var(--letter-width) var(--letter-height);-webkit-mask-position:center;mask-position:center;mask-mode:alpha}
.scene-cloud{filter:brightness(var(--cloud-brightness));position:absolute;z-index:2;pointer-events:none;will-change:transform}
.scene-cloud img{display:block;width:100%;height:auto}
.scene-cloud-left{top:24%;left:-18%;width:60%;transform:translate3d(var(--cloud-left),0,0)}
.scene-cloud-right{top:22%;right:-22%;width:55%;transform:translate3d(var(--cloud-right),0,0)}
.scene-fog{filter:brightness(var(--cloud-brightness));position:absolute;z-index:3;bottom:0;left:0;width:100%;height:90%;transform:translate3d(0,var(--fog-y),0);opacity:var(--fog-opacity);will-change:transform}
.scene-fog img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.scene-cloud::after,.scene-fog::after{content:"";position:absolute;inset:0;pointer-events:none;background:#343a40 url('assets/silver-flow.webp') center/cover no-repeat;opacity:calc(var(--cloud-silver)*.42);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%;mask-mode:alpha}
.scene-cloud::after{-webkit-mask-image:url('assets/find-cloud.webp');mask-image:url('assets/find-cloud.webp')}
.scene-cloud-right::after{background-position:75% 50%}
.scene-fog::after{-webkit-mask-image:url('assets/find-fog.webp');mask-image:url('assets/find-fog.webp');-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:top center;mask-position:top center;background-position:50% 72%}
.opening-copy{position:absolute;z-index:3;top:24%;left:3%;right:3%;text-align:center;color:#111719;opacity:var(--intro);transform:translateY(calc((1 - var(--intro))*20px));pointer-events:none}
.opening-copy h1{font-size:clamp(2.75rem,6.5vw,8.75rem);font-weight:700;line-height:1.04;letter-spacing:-.055em;margin:0;text-wrap:balance}
.opening-copy p{font-size:clamp(1rem,1.8vw,2rem);line-height:1.4;margin:24px 0 0;font-weight:500}
.construction-metal{position:absolute;left:50%;top:50%;width:var(--letter-width);height:var(--letter-height);transform:translate(-50%,-50%);z-index:1;opacity:var(--silver-fill);pointer-events:none;overflow:hidden;-webkit-mask-image:url('assets/construction-metal-mask.svg');mask-image:url('assets/construction-metal-mask.svg');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;mask-mode:alpha;will-change:opacity}
.metal-surface{position:absolute;inset:-10% -15%;background:#363b40 url('assets/silver-flow.webp') center/cover no-repeat;transform:translate3d(var(--silver-shift),0,0);will-change:transform}
.construction-metal::after{content:"";position:absolute;inset:-30%;background:linear-gradient(112deg,transparent 30%,#d9e4ec18 41%,#fff9eb80 48%,#ffffffb0 49%,#d8e3ed30 53%,transparent 62%);transform:translate3d(var(--silver-glint),0,0);pointer-events:none}
.letter-formation{position:absolute;left:50%;top:50%;width:var(--letter-width);height:var(--letter-height);transform:translate(-50%,-50%);z-index:2;opacity:var(--outline);pointer-events:none}
.construction-outline{filter:drop-shadow(0 0 1.2px #edf6ff99);display:block;width:100%;height:100%;overflow:visible;stroke-linejoin:round;stroke-linecap:butt}
.cinema-bottom,.cinema-progress{z-index:5}
.cinema-bottom{opacity:var(--opening-bottom)}
.scroll-caption{color:#243c4d;text-shadow:0 1px 6px #fff8}
.scroll-caption i{background:linear-gradient(180deg,#243c4d25,#243c4d)}
.skip-opening{opacity:1;font-size:.875rem;min-height:44px;background:#ffffff80;border:1px solid #243c4d44;color:#152c3b}
.skip-opening:hover{background:#ffffffe0}
.cinema-progress{background:#243c4d15}
.cinema-progress span{width:calc(var(--progress)*100%);background:#243c4d}
@media(max-width:800px){
 .cinema{height:240svh;margin-bottom:-50svh}
 .scene-building{top:60%;left:50%;width:max(100%,75svh);transform:translate3d(-50%,var(--house-y),0) scale(var(--house-scale))}
 .scene-cloud-left{top:27%;left:-58%;width:120%}
 .scene-cloud-right{top:33%;right:-65%;width:110%}
 .scene-fog{height:80%}
 .opening-copy{top:26%;left:6%;right:6%}
 .opening-copy h1{font-size:clamp(2.625rem,10.2vw,5rem);line-height:1.04}
 .opening-copy p{font-size:1.125rem;margin-top:20px}
 .scroll-caption{font-size:.875rem}
 .skip-opening{font-size:.875rem;padding:11px 15px}
}
@media(max-height:500px) and (min-width:801px){.opening-copy{top:29%}.opening-copy h1{font-size:min(6.5vw,16svh)}.opening-copy p{margin-top:12px}}
@media(prefers-reduced-motion:reduce){
 .cinema{height:100svh;min-height:600px;margin-bottom:0}
 .cinema-sticky{position:relative;height:100svh;min-height:600px}
 .letter-formation,.construction-metal,.scene-composite,.scene-fog,.cinema-bottom,.cinema-progress{display:none}
 .opening-copy{opacity:1;transform:none}
}

/* Color grading only: the original building, framing and choreography are preserved. */
.scene-sky{filter:grayscale(.78) brightness(.48)}
.scene-building img{filter:saturate(var(--building-saturation)) contrast(var(--building-contrast)) brightness(.78)}
.scene-cloud img,.scene-fog img{filter:grayscale(1) brightness(.68)}
.scene-cloud::after,.scene-fog::after,.metal-surface{filter:grayscale(1)}
.opening-copy{color:#f1f4f8;text-shadow:0 2px 30px #03091333}
.opening-copy p{color:#d0d9e6;font-weight:400}
.scroll-caption{color:#dbe4ef;text-shadow:none}
.scroll-caption i{background:linear-gradient(180deg,#dbe4ef25,#dbe4ef)}
.skip-opening{background:#0b14236b;border-color:#d7e4f345;color:#eef4fc;font-size:12px}
.skip-opening:hover{background:#172335cc}
.cinema-progress{background:#d5e3f015}
.cinema-progress span{background:#b4c6de}
.construction-metal::after{background:linear-gradient(112deg,transparent 30%,#d9e4ec18 41%,#edf5ff80 48%,#ffffffb0 49%,#d8e3ed30 53%,transparent 62%)}
@media(max-width:700px){.skip-opening{font-size:11px}.scroll-caption{font-size:10px}}

/* Progressive enhancement: the complete promise and contact work before JS. */
.cinema{height:auto;margin-bottom:0}
.cinema + .solutions{position:relative;z-index:2}
.cinema-sticky{position:relative;height:auto;min-height:100svh}
.opening-copy{position:relative;top:auto;left:auto;right:auto;width:100%;padding:160px 4% 150px;margin:0 auto;pointer-events:auto}
.opening-copy h1{max-width:1240px;margin:auto}
.opening-completion{display:inline}
.letter-formation,.construction-metal,.scene-composite,.scene-fog,.cinema-progress{display:none}
.opening-copy .opening-category{margin:0 0 20px;font-size:.875rem;line-height:1.5;letter-spacing:.08em;font-weight:500;color:#f1f3f5}
.opening-copy .opening-subtitle{margin:24px 0 0;color:#edf0f4}
.opening-actions{display:flex;align-items:center;flex-direction:column;gap:12px;margin-top:30px}
.opening-cta{min-height:52px;padding:14px 30px;font-size:1rem;font-weight:500;text-shadow:none;letter-spacing:0}
.opening-channel{font-size:.875rem;line-height:1.5;color:#edf0f4;letter-spacing:0}
.scroll-caption,.skip-opening{font-size:.875rem}
.skip-opening{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:#13171ce6;border-color:#d9dde34d}
.opening-copy:focus-within,.cinema-bottom:focus-within{opacity:1;transform:none}
.scene::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,#0006 0%,#0006 52%,transparent 76%)}
.scene-sky,.scene-building,.scene-cloud,.scene-fog,.construction-metal,.metal-surface{will-change:auto}
.cinema-sticky.is-in-view .scene-building,.cinema-sticky.is-in-view .scene-cloud,.cinema-sticky.is-in-view .metal-surface{will-change:transform}
.cinema-sticky.is-in-view .construction-metal{will-change:opacity}

html.opening-motion .cinema{height:260svh;margin-bottom:-55svh}
html.opening-motion .cinema-sticky{position:sticky;height:100svh;min-height:0}
html.opening-motion .opening-copy{position:absolute;top:20%;left:3%;right:3%;width:auto;padding:0}
html.opening-motion .opening-completion{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.opening-motion .letter-formation,html.opening-motion .construction-metal,html.opening-motion .scene-composite,html.opening-motion .scene-fog,html.opening-motion .cinema-progress{display:block}

@media(max-width:800px){
 .scene-cloud::after{-webkit-mask-image:url('assets/find-cloud-mobile.webp');mask-image:url('assets/find-cloud-mobile.webp')}
 .scene-fog::after{-webkit-mask-image:url('assets/find-fog-mobile.webp');mask-image:url('assets/find-fog-mobile.webp')}
 .opening-copy{padding:145px 6% 130px}
 .opening-copy h1{font-size:clamp(2.125rem,9.3vw,3.25rem);line-height:1.08;letter-spacing:-.045em}
 .opening-copy .opening-category{font-size:.8125rem;letter-spacing:.035em;margin-bottom:18px}
 .opening-copy .opening-subtitle{font-size:1.0625rem;line-height:1.5;margin-top:18px}
 .opening-actions{margin-top:24px;gap:10px}
 .opening-cta{font-size:.9375rem;min-height:50px;padding:13px 24px}
 .opening-channel{font-size:.8125rem}
 .scene-building{top:57%;left:0;width:100%;transform:translate3d(0,var(--house-y),0) scale(var(--house-scale))}
 .cinema-bottom{left:20px;right:20px;bottom:24px;gap:12px}
 .scroll-caption{font-size:.75rem;gap:9px}
 .skip-opening{font-size:.8125rem;padding:11px 13px}
 html.opening-motion .cinema{height:185svh;margin-bottom:-30svh}
 html.opening-motion .opening-copy{top:21%;left:6%;right:6%}
}
@media(prefers-reduced-motion:reduce){
 .cinema{height:auto!important;margin-bottom:0!important;min-height:0}
 .cinema-sticky{position:relative!important;height:auto!important;min-height:100svh}
 .opening-copy{position:relative!important;top:auto!important;left:auto!important;right:auto!important;width:100%}
 .opening-completion{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;white-space:normal!important}
 .cinema-bottom{display:flex}.scroll-caption{display:none}
 .scene-building,.scene-sky,.scene-cloud,.scene-fog{transform:none!important;will-change:auto!important}
 .scene-cloud-left,.scene-cloud-right{opacity:.5}
}