/* Lightweight depth; each demo keeps its own art direction and local film. */
.demo-page .hero{perspective:1200px}
.demo-page .hero video{opacity:.7;mix-blend-mode:normal;filter:brightness(.8)}
.demo-page .hero-content{transform-style:preserve-3d}
.demo-page .hero-content h1{text-shadow:0 5px 0 #0002,0 20px 45px #0008}
.demo-page .hero-content .button{box-shadow:0 7px 0 #0003,0 16px 35px #0004}
.demo-page .gallery{perspective:1400px}
.demo-page .gallery figure{border:1px solid #ffffff26;border-radius:5px;box-shadow:0 15px 40px #0004;transition:transform .4s ease,box-shadow .4s ease;transform-style:preserve-3d}
.demo-page .gallery figcaption{background:#0b0e12a6;padding:10px 14px;border:1px solid #ffffff33;backdrop-filter:blur(8px);transform:translateZ(24px)}
.demo-page .services{perspective:1200px}
.demo-page .services article{padding:28px 16px;border:1px solid #ffffff22;border-top-color:var(--accent);background:linear-gradient(135deg,#ffffff08,#ffffff01);box-shadow:0 9px 0 #0002;transform-style:preserve-3d;transition:transform .35s,box-shadow .35s}
.demo-page .services article h3{transform:translateZ(15px)}
.demo-page .depth-panel{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s ease,box-shadow .3s ease}
.demo-page .gallery figure:hover{box-shadow:0 30px 65px #0007}
.video-start{position:absolute;z-index:5;right:5%;bottom:60px;border:1px solid #ffffff8c;background:#0c0e12e6;color:#fff;padding:12px 18px;min-height:48px;border-radius:3px;font-size:12px;cursor:pointer}
.video-start[hidden]{display:none}
.reduce-motion .demo-page .depth-panel{transform:none!important}
@media(max-width:800px),(hover:none){.demo-page .depth-panel{transform:none}.demo-page .gallery figure{box-shadow:0 10px 25px #0004}.demo-page .hero-content h1{text-shadow:0 12px 24px #0007}}
@media(prefers-reduced-motion:reduce){.demo-page .depth-panel{transform:none!important}}