/* Motion layer: ambient particles, 3D canvases, entrance + hover animation. All of it honours reduced motion. */
#fxBg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body>header,body>section,body>footer,.flash-stack{position:relative;z-index:1}
.header{z-index:70!important}
.flash-stack{position:fixed!important}
.fx3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0;transition:opacity 1.2s ease}
.fx3d.ready{opacity:1}
.hero .fx3d{z-index:1}
.page-hero .fx3d{z-index:0;opacity:0;-webkit-mask-image:linear-gradient(90deg,transparent 18%,#000 62%);mask-image:linear-gradient(90deg,transparent 18%,#000 62%)}
.page-hero .fx3d.ready{opacity:.8}
.page-hero{overflow:hidden}
@keyframes riseIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulseGlow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
@keyframes sheen{0%{background-position:-160% 0}60%,100%{background-position:260% 0}}
@keyframes gradShift{0%{background-position:0 50%}100%{background-position:200% 50%}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}100%{box-shadow:0 0 0 20px rgba(37,211,102,0)}}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes drift{0%{transform:translateX(0)}100%{transform:translateX(60px)}}
body[data-fx="1"] .rise{animation:riseIn .75s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
body[data-fx="1"] .reveal:not(.in) .rise{animation-play-state:paused}
/* ambient loops */
body[data-fx="1"] .wa-float{animation:ring 2.2s ease-out infinite}
body[data-fx="1"] .hero .cloud{animation:drift 22s ease-in-out infinite alternate}
body[data-fx="1"] .hero .cloud.c2{animation-duration:30s}body[data-fx="1"] .hero .cloud.c3{animation-duration:26s;animation-delay:-8s}
/* 3D tilt: JS sets --rx/--ry */
.tilting{transition:transform .12s ease-out,box-shadow .35s!important;will-change:transform}
.prop-card.tilting,.cat-card.tilting,.why-card.tilting,.offer.tilting,.t-card.tilting,.tool-card.tilting,.stat.tilting{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px)!important}
.svc-card.tilting,.gal-item.tilting{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px)}
.prop-card::after,.why-card::after,.offer::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.prop-card,.why-card,.offer{position:relative}
.prop-card.tilting::after,.why-card.tilting::after,.offer.tilting::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rise{animation:none!important}.fx3d,#fxBg{display:none}
}