/* Transparent photographic scenes, independent foregrounds, camera moves, and flybys. */
.hero{display:grid;grid-template-columns:1.04fr 1fr;column-gap:30px;min-height:0}.hero-top,.capabilities{grid-column:1/-1}.hero-copy{width:100%;padding:60px 0 45px;align-self:center}.hero h1{font-size:clamp(62px,6.1vw,98px)}.capabilities{position:relative;z-index:1;margin-top:16px;align-self:end}
.creation-showcase{position:relative;isolation:isolate;min-width:0;width:100%;margin:25px 0 14px;grid-column:2;grid-row:2;--scene-progress:0}
.movie-stage{position:relative;aspect-ratio:1;perspective:1000px;isolation:isolate}
.movie-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s,visibility .65s;pointer-events:none}
.movie-scene.is-active{opacity:1;visibility:visible;z-index:2;pointer-events:auto}
.movie-scene img{position:absolute;display:block;object-fit:contain;width:100%;height:100%;filter:drop-shadow(0 12px 18px #0004);will-change:transform,opacity}
.shot-main{inset:0;z-index:2}.movie-scene.is-active .shot-main{animation:movie-arrival 8s cubic-bezier(.2,.65,.25,1) both}
.movie-scene:nth-child(even).is-active .shot-main{animation-name:movie-arrival-reverse}
.shot-satellite{z-index:4;pointer-events:none}.movie-scene .shot-satellite{width:39%;height:46%;left:-8%;top:48%;opacity:0}
.movie-scene .shot-satellite.second{width:45%;height:42%;left:65%;top:1%;z-index:1}
.movie-scene.is-active .shot-satellite{animation:movie-orbit 8s ease-in-out both}
.movie-scene.is-active .shot-satellite.second{animation-name:movie-orbit-back;animation-delay:.2s}
.scene-web .shot-main{width:105%;height:90%;left:-3%;top:7%}.scene-web .shot-satellite{width:48%;height:65%;left:56%;top:33%}.scene-web .shot-satellite.second{width:40%;height:52%;left:-4%;top:-4%}
.scene-brand .shot-main{width:105%;left:-2.5%}.scene-brand .shot-satellite{width:42%;height:44%;left:63%;top:52%}
.movie-lights{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}.movie-lights i{position:absolute;width:60%;height:1px;left:-15%;top:calc(15% + var(--i)*8%);background:linear-gradient(90deg,transparent,#259dff,#d6f7ff,transparent);filter:drop-shadow(0 0 4px #198eff);opacity:0;transform:rotate(-28deg);animation:movie-streak 3.7s linear infinite;animation-delay:calc(var(--i)*-.47s)}
.movie-lights b{position:absolute;width:3px;height:3px;left:calc(7% + var(--i)*9%);top:80%;background:#b5e9ff;border-radius:50%;box-shadow:0 0 9px #1da6ff;opacity:0;animation:movie-spark 4.6s ease-out infinite;animation-delay:calc(var(--i)*-.51s)}
.movie-orbit{position:absolute;inset:28% -4%;border:1px solid #259eff36;border-radius:50%;transform:rotate(-25deg);animation:movie-ring 7s ease-in-out infinite;z-index:0;pointer-events:none}.movie-orbit.two{inset:18% 1%;transform:rotate(28deg);animation-delay:-3.5s}
.movie-flare{position:absolute;width:40%;height:8%;left:-20%;top:38%;z-index:5;background:radial-gradient(ellipse,#e2f7ff55,transparent 65%);filter:blur(5px);pointer-events:none;opacity:0;animation:movie-flare 8s ease-in-out infinite}
.movie-scene .scene-label{position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:6;padding:8px 0;font-size:15px;color:#e5f5ff;text-shadow:0 2px 12px #000;letter-spacing:.3px}.scene-label small{display:block;font-size:9px;letter-spacing:2px;color:#7fbbdf;margin-bottom:5px}
.movie-options{display:flex;justify-content:center;gap:7px;margin:18px 0 0;position:relative;z-index:6;flex-wrap:wrap}.movie-options button{position:relative;overflow:hidden;border:1px solid #29435d;border-radius:20px;padding:7px 12px;font-size:10px;color:#92acc6;background:#060b1366;cursor:pointer}.movie-options button[aria-pressed=true]{border-color:#34aaff;color:#e7f7ff;box-shadow:0 0 16px #009dff21}.movie-options button:after{content:'';position:absolute;bottom:0;height:2px;left:0;right:0;background:#5cc9ff;transform-origin:left;transform:scaleX(0)}.movie-options button[aria-pressed=true]:after{transform:scaleX(var(--scene-progress))}.movie-options button:hover{color:white;border-color:#78caff}
.movie-scene:not(.is-active) img{animation:none!important}.movie-hold *{animation-play-state:paused!important}.paused .movie-scene.is-active .shot-main{opacity:1!important;transform:none!important}
@keyframes movie-arrival{0%{opacity:0;transform:translate3d(85%,18%,-350px) rotate(14deg) scale(.45)}10%{opacity:1;transform:translate3d(-2%,-1%,0) rotate(-2deg) scale(.96)}40%{transform:translate3d(1%,-3%,50px) rotate(1deg) scale(1.02)}82%{opacity:1;transform:translate3d(-2%,1%,0) rotate(-1deg) scale(1)}100%{opacity:0;transform:translate3d(-100%,-18%,180px) rotate(-13deg) scale(1.2)}}
@keyframes movie-arrival-reverse{0%{opacity:0;transform:translate3d(-85%,-20%,-350px) rotate(-18deg) scale(.4)}11%{opacity:1;transform:translate3d(1%,0,0) rotate(2deg) scale(.96)}45%{transform:translate3d(-2%,-2%,50px) rotate(-2deg) scale(1.04)}82%{opacity:1;transform:translate3d(1%,1%,0) rotate(1deg) scale(1)}100%{opacity:0;transform:translate3d(100%,15%,160px) rotate(16deg) scale(1.15)}}
@keyframes movie-orbit{0%{opacity:0;transform:translate(-170%,90%) rotate(-45deg) scale(.4)}15%{opacity:1;transform:translate(5%,-5%) rotate(13deg) scale(.9)}45%{transform:translate(15%,-22%) rotate(-8deg) scale(1.04)}80%{opacity:1;transform:translate(-4%,8%) rotate(8deg) scale(.95)}100%{opacity:0;transform:translate(240%,-150%) rotate(50deg) scale(.4)}}
@keyframes movie-orbit-back{0%{opacity:0;transform:translate(180%,-90%) rotate(35deg) scale(.2)}18%{opacity:.85;transform:translate(-6%,5%) rotate(-9deg) scale(.85)}55%{transform:translate(-15%,30%) rotate(9deg) scale(.95)}80%{opacity:.8;transform:translate(7%,-10%) rotate(-8deg) scale(.8)}100%{opacity:0;transform:translate(-230%,120%) rotate(-50deg) scale(.3)}}
@keyframes movie-streak{0%{opacity:0;transform:translate(-100%,150px) rotate(-28deg) scaleX(.2)}15%{opacity:.6}55%{opacity:0;transform:translate(180%,-230px) rotate(-28deg) scaleX(1.4)}100%{opacity:0;transform:translate(180%,-230px) rotate(-28deg)}}
@keyframes movie-spark{0%{opacity:0;transform:translate(0,50px) scale(.4)}20%{opacity:.8}80%,100%{opacity:0;transform:translate(70px,-420px) scale(.1)}}
@keyframes movie-ring{0%,100%{opacity:.25;transform:rotate(-25deg) scale(.9)}50%{opacity:.75;transform:rotate(20deg) scale(1.08)}}
@keyframes movie-flare{0%,15%{opacity:0;transform:translateX(0)}30%{opacity:.8}52%,100%{opacity:0;transform:translateX(350%)}}
@media(max-width:1100px){.hero{grid-template-columns:1fr}.hero-copy{padding:45px 0 15px;max-width:750px}.hero h1{font-size:clamp(62px,9vw,96px)}.creation-showcase{grid-column:1;grid-row:auto;width:min(100%,650px);margin:10px auto 28px}.capabilities{margin-top:25px}}
@media(max-width:600px){.creation-showcase{width:100%;margin-top:22px}.movie-options{gap:5px;margin-top:22px}.movie-options button{padding:7px 9px;font-size:9px}.scene-label small{font-size:8px;letter-spacing:1.4px}.movie-scene .scene-label{font-size:12px;bottom:-12px}}
@media(prefers-reduced-motion:reduce){.movie-lights,.movie-flare,.movie-orbit,.shot-satellite{display:none!important}.movie-scene.is-active .shot-main{animation:none!important;transform:none!important;opacity:1!important}.movie-scene{transition:none!important}}