/* Photographic elements from the approved original, now separate 3D layers.
   WebGL H is actual extruded geometry; cards each independently transform in CSS3D. */
.hero-picture.hero3d-picture{overflow:visible;pointer-events:auto;isolation:isolate;perspective:950px;--hero3d-tilt-x:0deg;--hero3d-tilt-y:0deg}
.hero3d-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--hero3d-tilt-x)) rotateY(var(--hero3d-tilt-y));transition:transform .75s cubic-bezier(.18,.7,.3,1)}
.hero3d-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;filter:saturate(1.08)}
.hero3d-atmosphere{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 39% 68% at 53% 39%,#2e98ff28,transparent 76%),linear-gradient(90deg,#06102112,transparent 33%,#06102105);mix-blend-mode:screen;animation:hero3d-aurora 8s ease-in-out infinite alternate}
.hero3d-model{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;filter:drop-shadow(0 0 13px #2da8ffa9) drop-shadow(0 7px 9px #01081b77)}
.hero3d-logo-fallback{display:none;position:absolute;left:44.7%;top:0;width:20.5%;height:80%;z-index:2;background-image:url(assets/hero-original.webp);background-size:678px 357px;background-position:-303px 0;clip-path:polygon(5% 0,31% 0,31% 39%,71% 39%,71% 0,100% 0,100% 100%,71% 100%,71% 59%,31% 59%,31% 100%,5% 100%)}
.hero3d-picture[data-render="fallback"] .hero3d-backdrop{content:url(assets/hero-original.webp)}
.hero3d-picture[data-render="fallback"] .hero3d-logo-fallback,.hero3d-picture[data-render="fallback"] .hero3d-card{display:none}
.hero3d-light-ring{position:absolute;left:40%;top:0;width:28%;height:78%;z-index:3;pointer-events:none;background:linear-gradient(118deg,transparent 37%,#8adfff17 46%,transparent 50%);mix-blend-mode:screen;animation:hero3d-light 6s ease-in-out infinite alternate}
.hero3d-card{position:absolute;z-index:5;display:block;transform-style:preserve-3d;will-change:transform;outline-offset:-9px;animation:hero3d-float var(--float-time,7s) ease-in-out infinite alternate;animation-delay:var(--float-delay,0s);transition:filter .25s ease;filter:drop-shadow(0 9px 12px #0007);pointer-events:auto}
.hero3d-card img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;transform-origin:center;transform:translateZ(0) scale(1);transition:transform .35s cubic-bezier(.16,.9,.2,1),filter .35s ease;will-change:transform}
.hero3d-card:hover,.hero3d-card:focus-visible{filter:drop-shadow(0 0 20px #299eff) brightness(1.14);z-index:8;animation-play-state:paused}
.hero3d-card:hover img,.hero3d-card:focus-visible img{transform:translate3d(0,-5px,22px) rotateY(-5deg) scale(1.075);filter:brightness(1.08)}
.hero3d-card-hosting{left:5.46%;top:.84%;width:31.27%;height:26.05%;--float-time:4.6s;--float-delay:-1s;--z:18px}
.hero3d-card-domeny{left:5.31%;top:26.89%;width:31.42%;height:21.29%;--float-time:5.3s;--float-delay:-2s;--z:25px}
.hero3d-card-vps{left:2.21%;top:43.98%;width:35.25%;height:26.89%;--float-time:5.1s;--float-delay:-3.5s;--z:38px}
.hero3d-card-poczta{left:65.93%;top:15.69%;width:26.25%;height:26.05%;--float-time:5.0s;--float-delay:-2.4s;--z:23px}
.hero3d-card-backup{left:66.22%;top:38.10%;width:26.70%;height:24.93%;--float-time:5.8s;--float-delay:-1.3s;--z:15px}
.hero3d-card-migracja{left:65.34%;top:56.58%;width:29.05%;height:26.05%;--float-time:4.8s;--float-delay:-3.1s;--z:32px}
.hero3d-mouse-hint{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--hero3d-light-x,50%) var(--hero3d-light-y,45%),#7ed3ff12 0,transparent 28%);z-index:7;mix-blend-mode:screen}
.hero3d-picture:after{content:'';position:absolute;left:2%;right:2%;bottom:0;height:20%;pointer-events:none;z-index:1;background:linear-gradient(transparent,#0412250a)}
@keyframes hero3d-float{0%{transform:translate3d(-3px,-10px,calc(var(--z) - 6px)) rotateX(-7deg) rotateY(8deg)}50%{transform:translate3d(3px,2px,calc(var(--z) + 12px)) rotateX(2deg) rotateY(-3deg)}100%{transform:translate3d(-2px,12px,calc(var(--z) + 24px)) rotateX(8deg) rotateY(-9deg)}}
@keyframes hero3d-aurora{0%{opacity:.38;transform:translateX(-6px)}100%{opacity:.94;transform:translateX(8px)}}
@keyframes hero3d-light{0%{opacity:.3;transform:translateX(-30%)}100%{opacity:1;transform:translateX(45%)}}
/* Original gallery view is scaled as one coherent scene on phones. */
@media(max-width:700px){.hero-picture.hero3d-picture{perspective:800px}.hero3d-stage{overflow:visible}.hero3d-card:hover img{transform:translate3d(0,-2px,12px) scale(1.035)}.hero3d-logo-fallback{background-size:100% 100%}}
@media(prefers-reduced-motion:reduce){.hero3d-card,.hero3d-atmosphere,.hero3d-light-ring{animation:none!important}.hero3d-stage{transform:none!important;transition:none!important}.hero3d-card:hover img,.hero3d-card:focus-visible img{transform:none!important;transition:none!important}}