/* Static scene and independently animated transparent product layer. */
.hero-layered{position:relative;isolation:isolate;overflow:hidden;background:#061733;text-align:center;padding:28px 0 0}
.hero-layered h1{position:relative;top:clamp(14px,3vw,26px);z-index:1;margin:0;color:#bceaff;font-size:clamp(86px,15vw,230px);font-weight:750;letter-spacing:-.065em;line-height:1;transform:none}
.hero-world{position:relative;width:100%;height:clamp(420px,42vw,700px);margin-top:-22px;isolation:auto}
.hero-backdrop{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transform:none;animation:none;mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 78%,transparent 100%)}
.hero-stage{position:absolute;z-index:2;left:22%;top:22px;width:56%;height:82%;perspective:1300px;transform:translateY(var(--scroll-y,0px));transform-style:preserve-3d;will-change:transform}
.hero-drop,.hero-float{width:100%;height:100%;transform-style:preserve-3d}
.hero-drop{animation:lightbox-arrive 1.7s cubic-bezier(.2,.7,.22,1) both}
.hero-float{animation:none}
.hero-product-photo{display:block;width:100%;height:100%;object-fit:contain;transform:rotateX(var(--hero-x,0deg)) rotateY(var(--hero-y,0deg));transition:transform .4s ease-out;filter:none}
.hero-caption{position:relative;z-index:2;display:flex;align-items:center;flex-direction:column;padding:0 20px 40px;margin-top:-12px;transform:none}
.hero-caption p{color:#d3ecff;font-size:clamp(17px,1.7vw,25px);font-weight:650;line-height:1.35;margin:0 0 20px}
.hero-caption .btn{border-radius:99px;padding:15px 30px;min-height:50px;font-size:15px;background:#0875fa;color:white;border:0}
@keyframes lightbox-arrive{0%{transform:translateY(-500px) rotateX(28deg) rotateY(20deg)}75%{transform:translateY(8px) rotateX(-3deg)}100%{transform:translateY(0) rotateX(0deg)}}
@keyframes lightbox-hover{0%,100%{transform:translateY(0) rotateY(-1deg)}50%{transform:translateY(-12px) rotateY(2deg)}}
@media(max-width:900px){.hero-world{height:clamp(350px,60vw,540px);margin-top:0}.hero-stage{left:8%;width:84%;height:80%}.hero-layered h1{font-size:20vw}.hero-backdrop{object-position:center}.hero-caption{margin-top:-12px}}
@media(max-width:600px){.hero-layered{padding-top:24px}.hero-world{height:360px}.hero-stage{left:2%;width:96%;top:30px;height:76%}.hero-caption{padding-bottom:30px}.hero-caption p{font-size:18px}.hero-backdrop{mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 70%,transparent)}}
@media(prefers-reduced-motion:reduce){.hero-stage,.hero-product-photo{transform:none;transition:none;will-change:auto}.hero-drop,.hero-float,.hero-product-photo{animation:none}}

/* Cast shadows remain anchored to the cube surface. */
.hero-cube-shadow{position:absolute;z-index:0;left:34%;top:80%;width:32%;height:6%;pointer-events:none;background:radial-gradient(ellipse at 20% 50%,#03234f 0%,#03234fc7 16%,transparent 34%),radial-gradient(ellipse at 50% 50%,#03234f 0%,#03234fd1 17%,transparent 36%),radial-gradient(ellipse at 80% 50%,#03234f 0%,#03234fc7 16%,transparent 34%);opacity:var(--shadow-opacity,.46);filter:blur(var(--shadow-blur,7px));transform:scaleX(var(--shadow-scale,1));border-radius:50%}
@media(max-width:900px){.hero-cube-shadow{left:26%;width:48%}}
@media(max-width:600px){.hero-cube-shadow{left:19%;width:62%;height:5%;top:80%}}