/* HeatHosting Premium 3D — ambient & interactive motion on ALL existing sections.
   Preview-only addon. Zero layout dimensions changed. No external dependencies. */
:root{--hs-ease:cubic-bezier(.2,.75,.22,1)}
/* Scene depth: picture is currently a baked asset; motion is on the plane, not its individual objects. */
.hero{isolation:isolate}
.hero .stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#aadaff 1px,transparent 1.8px),radial-gradient(circle,#7aaeff 1px,transparent 1.8px);background-size:147px 98px,211px 151px;background-position:0 0,30px 48px;opacity:.12;animation:hs-stars 15s linear infinite alternate}
.hero-picture{transform:perspective(1000px) rotateX(var(--hs-hero-x,0deg)) rotateY(var(--hs-hero-y,0deg)) translate3d(0,var(--hs-hero-float,0px),0);transform-origin:55% 55%;transition:transform .65s var(--hs-ease);will-change:transform;animation:hs-hero-float 8s ease-in-out infinite alternate}
.hero-picture>img{filter:drop-shadow(0 5px 10px #028bff20)}
.hero .hero-shimmer{mix-blend-mode:screen;background-size:260% 100%;animation:hs-scene-shimmer 6.7s ease-in-out infinite}
.hero h1 span{background:linear-gradient(105deg,#0870f5 0%,#60c4ff 45%,#0667e3 75%);background-size:230% 100%;color:transparent;background-clip:text;-webkit-background-clip:text;animation:hs-text-glint 7s linear infinite}
.hero-buttons .blue,.nav-order{animation:hs-cta-aura 4s ease-in-out infinite alternate}
.trust-logos b{display:inline-block;animation:hs-logos 6s ease-in-out infinite alternate;animation-delay:calc(var(--hs-i,0) * -.48s)}
.journey{isolation:isolate;overflow:hidden}
.journey>img{will-change:filter;animation:hs-landscape-light 10s ease-in-out infinite alternate}
.ecosystem-intro .pill:hover,.ecosystem-side li:hover{filter:drop-shadow(0 3px 5px #1b84ff5a)}
.ecosystem-side li:before{box-shadow:0 0 0 0 #1586ff48;animation:hs-tick-pulse 4s ease-in-out infinite;animation-delay:calc(var(--hs-i,0) * .7s)}
/* Pricing: real independent 3D HTML cards. Their resting composition is preserved. */
.pricing{isolation:isolate;--hs-spot-x:58%;--hs-spot-y:35%}
.motion-pricing-haze{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 22% 65% at var(--hs-spot-x) var(--hs-spot-y),#087cff27,transparent 75%);mix-blend-mode:screen;opacity:.75;transition:opacity .4s}
.plan.motion-3d{isolation:isolate;overflow:visible;transform-style:preserve-3d;backface-visibility:hidden;transform:perspective(760px) rotateX(var(--hs-rx,0deg)) rotateY(var(--hs-ry,-4deg)) scale(var(--hs-scale,1));transition:transform .3s var(--hs-ease),box-shadow .3s ease,border-color .3s ease;translate:0 var(--hs-base-y,0px);animation:hs-card-float 5s ease-in-out infinite alternate;animation-delay:calc(var(--hs-i,0)*-.55s);will-change:transform,translate}
.plan.motion-3d:first-child{--hs-ry:8deg}
.plan.motion-3d.featured{--hs-scale:1.02;--hs-base-y:-5px;animation-duration:4.3s;box-shadow:0 0 0 1px #368fff,0 0 24px #087cffcc,inset 0 0 20px #136eff70}
.plan.motion-3d::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(104deg,transparent 15%,#c5f1ff00 30%,#c5f1ff20 48%,#c5f1ff00 64%,transparent 80%);background-size:300% 100%;background-position:100% 0;animation:hs-plan-shine 9s ease-in-out infinite;animation-delay:calc(var(--hs-i,0)*-1s)}
.plan.motion-3d > *{position:relative;z-index:1}
.plan.motion-3d .best-label{position:absolute;z-index:5;box-shadow:0 0 13px #4aa9ff,0 0 25px #0a70ff83;animation:hs-best-glow 3s ease-in-out infinite alternate}
.plan.motion-3d:hover,.plan.motion-3d:focus-within{box-shadow:0 0 0 1px #5caaff,0 15px 24px #036aff43,inset 0 0 16px #036aff18;animation-play-state:paused;z-index:8}
.plan.motion-3d.featured:hover,.plan.motion-3d.featured:focus-within{box-shadow:0 0 0 2px #67c7ff,0 0 33px #088affc9,inset 0 0 22px #136eff60}
.plan.motion-3d .choose{transition:transform .2s,box-shadow .2s;transform:translateZ(11px)}
.plan.motion-3d .choose:hover,.plan.motion-3d .choose:focus-visible{transform:translateZ(23px) scale(1.04);box-shadow:0 0 16px #168cff99}
.billing-controls button{transition:background .25s ease,box-shadow .25s ease}
.billing-controls button.selected{box-shadow:0 0 10px #067bff88}
/* Panel = real moving 3D picture-plane; source artwork itself remains bitmap. */
.client-panel{isolation:isolate}
.client-panel::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 53% 48%,#63baff2d,transparent 31%);animation:hs-panel-light 9s ease-in-out infinite alternate}
.client-panel .panel-preview{transform:translateX(12px) perspective(1050px) rotateZ(-2deg) rotateX(var(--hs-panel-x,0deg)) rotateY(var(--hs-panel-y,-5deg)) scale(1.04);transform-origin:bottom center;transition:transform .55s var(--hs-ease);animation:hs-panel-hover 6s ease-in-out infinite alternate;will-change:transform;transform-style:preserve-3d}
.client-panel .panel-preview::after{content:'';position:absolute;inset:5% 2% 1%;pointer-events:none;background:linear-gradient(120deg,transparent 36%,#ffffff00 47%,#dbf7ff30 51%,transparent 57%);background-size:300% 100%;animation:hs-panel-scan 8s linear infinite;mix-blend-mode:screen;z-index:2;clip-path:polygon(5% 0,100% 0,100% 100%,0 100%)}
.support-head img{border-radius:50%;transform-style:preserve-3d;animation:hs-avatar-float 5s ease-in-out infinite alternate;box-shadow:0 0 0 2px #68c0ff66,0 0 18px #0877ff52}
.support .pill{position:relative;box-shadow:0 0 0 0 #2c8dff33;animation:hs-cta-aura 5s ease-in-out infinite alternate}
/* Finale: original mountains are baked with lettering. Overlay animated atmospheric layers without changing text geometry. */
.final-photo{isolation:isolate;overflow:hidden}
.final-photo>img{position:relative;z-index:0}
.motion-final-glow,.motion-mist{position:absolute;inset:0;pointer-events:none;z-index:1}
.motion-final-glow{background:radial-gradient(ellipse 25% 75% at 60% 41%,#fffad245,transparent 80%);mix-blend-mode:screen;animation:hs-final-light 9s ease-in-out infinite alternate}
.motion-mist{z-index:2;inset:auto -20% 0;height:38%;opacity:.45;filter:blur(9px);background:radial-gradient(ellipse at 20% 90%,#bddfff8a 0%,transparent 39%),radial-gradient(ellipse at 80% 90%,#acc9e28f 0%,transparent 45%);animation:hs-mist 12s ease-in-out infinite alternate}
.motion-mist-b{height:26%;opacity:.26;filter:blur(15px);animation-direction:alternate-reverse;animation-duration:16s}
.final-photo .hotspot{z-index:4}
/* Gentle reveal; all content remains visible without JS. */
.motion-ready .hs-reveal{opacity:0;filter:blur(3px);transform:translate3d(0,13px,0);transition:opacity .7s var(--hs-ease),filter .7s var(--hs-ease),transform .7s var(--hs-ease);transition-delay:var(--hs-delay,0ms)}
.motion-ready .hs-reveal.hs-visible{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}
/* When content hosts transform in CSS, avoid reveal transform overriding the 3D plane. */
.motion-ready .hero-picture.hs-reveal,.motion-ready .panel-preview.hs-reveal,.motion-ready .plan.hs-reveal{transform:none;filter:none;opacity:1}
@keyframes hs-stars{to{background-position:50px -27px,-30px 40px;opacity:.25}}
@keyframes hs-hero-float{from{translate:0 0}to{translate:0 -4px}}
@keyframes hs-scene-shimmer{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes hs-text-glint{to{background-position:230% 0}}
@keyframes hs-cta-aura{to{box-shadow:0 0 14px #007cff83,inset 0 1px 0 #c9efff99}}
@keyframes hs-logos{to{translate:0 -3px;opacity:.78}}
@keyframes hs-landscape-light{to{filter:brightness(1.12) saturate(1.07)}}
@keyframes hs-tick-pulse{50%{box-shadow:0 0 0 5px #1586ff00}}
@keyframes hs-card-float{from{translate:0 calc(var(--hs-base-y,0px) + 1px)}to{translate:0 calc(var(--hs-base-y,0px) - 5px)}}
@keyframes hs-plan-shine{0%,28%{background-position:110% 0}55%,100%{background-position:-140% 0}}
@keyframes hs-best-glow{to{filter:brightness(1.24);box-shadow:0 0 20px #4aa9ff,0 0 30px #0a70ff}}
@keyframes hs-panel-light{to{opacity:.45;transform:translateX(1.5%)}}
@keyframes hs-panel-hover{from{translate:0 1px}to{translate:0 -5px}}
@keyframes hs-panel-scan{to{background-position:-200% 0}}
@keyframes hs-avatar-float{to{translate:0 -5px;filter:brightness(1.12)}}
@keyframes hs-final-light{to{opacity:.4;transform:translateX(2%) scale(1.1)}}
@keyframes hs-mist{from{transform:translate3d(-5%,0,0) scale(1)}to{transform:translate3d(6%,-5px,0) scale(1.08)}}
@media(hover:none),(pointer:coarse){.plan.motion-3d{will-change:auto}.hero-picture,.panel-preview{will-change:auto}}
@media(max-width:700px){.client-panel .panel-preview{transform:none;animation:hs-panel-hover 8s ease-in-out infinite alternate}.hero-picture{transform:none}.plan.motion-3d,.plan.motion-3d.featured{transform:none;--hs-base-y:0px;animation:hs-card-float 6s ease-in-out infinite alternate}.plan.motion-3d.featured{--hs-base-y:-3px}.motion-mist{height:26%}.hero .stars{opacity:.08}}
@media(prefers-reduced-motion:reduce){.hero .stars,.hero-picture,.hero-shimmer,.hero h1 span,.hero-buttons .blue,.nav-order,.trust-logos b,.journey>img,.ecosystem-side li:before,.plan.motion-3d,.plan.motion-3d::before,.plan.motion-3d .best-label,.client-panel::before,.client-panel .panel-preview,.client-panel .panel-preview::after,.support-head img,.support .pill,.motion-final-glow,.motion-mist{animation:none!important;transition:none!important;translate:none!important}.motion-ready .hs-reveal{opacity:1!important;filter:none!important;transform:none!important}.plan.motion-3d{transform:none!important}}
.hs-paused *, .hs-paused *::before,.hs-paused *::after{animation-play-state:paused!important}