/* ═══ SNAP+ — EFFETS 3D / ANIMATIONS ═══ */

.bg-glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.6;animation:gFloat 20s ease-in-out infinite}

.g1{width:500px;height:500px;background:rgba(var(--accent-rgb),.06);top:-10%;left:15%;animation-duration:18s}

.g2{width:400px;height:400px;background:rgba(var(--accent-rgb),.04);bottom:10%;right:10%;animation-delay:-8s;animation-duration:22s}

.g3{width:300px;height:300px;background:rgba(255,150,0,.03);top:40%;left:60%;animation-delay:-14s;animation-duration:25s}

@keyframes gFloat{0%,100%{transform:translate(0,0)}33%{transform:translate(40px,-30px)}66%{transform:translate(-25px,20px)}}

.bg-grid{position:absolute;bottom:0;left:50%;width:200%;height:45%;transform:translateX(-50%) perspective(500px) rotateX(65deg);transform-origin:center bottom;background-image:linear-gradient(rgba(var(--accent-rgb),.03) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.03) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(to top,rgba(0,0,0,.4),transparent 70%);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.4),transparent 70%);animation:gridMove 6s linear infinite}

@keyframes gridMove{from{background-position:0 0}to{background-position:0 60px}}

canvas{position:absolute;inset:0}

.noise{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px 128px;
}

.cursor-glow{position:fixed;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.05),transparent 70%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);transition:left .12s,top .12s;will-change:left,top}

@keyframes ghostFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@keyframes ring1{to{transform:rotateX(70deg) rotateZ(360deg)}}

@keyframes ring2{to{transform:rotateX(55deg) rotateY(25deg) rotateZ(-360deg)}}

@keyframes ring3{to{transform:rotateX(80deg) rotateY(-15deg) rotateZ(360deg)}}

@keyframes titleShine{0%{background-position:0%}100%{background-position:200%}}

@keyframes featIn{from{opacity:0;transform:translateX(-16px)}}

@keyframes btnShine{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}

@keyframes barSlide{0%{background-position:200%}100%{background-position:-200%}}

.card-glow{position:absolute;inset:-1px;border-radius:inherit;background:conic-gradient(from 0deg,transparent,rgba(var(--accent-rgb),.08),transparent 30%);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;padding:1px;pointer-events:none;animation:cardGlow 6s linear infinite;z-index:1}

@keyframes cardGlow{to{rotate:360deg}}

.card-shine{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;z-index:1;border-radius:20px}

@keyframes shimmer{0%{left:-100%}100%{left:200%}}

@keyframes bdot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

@keyframes cardPop{from{opacity:0;transform:scale(.96) translateY(8px)}}

@keyframes popIn{0%{transform:scale(0)}70%{transform:scale(1.1)}100%{transform:scale(1)}}

@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.4)}50%{opacity:.7;box-shadow:0 0 0 5px rgba(34,197,94,0)}}