/* =========================================================
   GSAP Block Animations – effect CSS (blob, dots, transition)
   ========================================================= */

/* Cursor blob */
.gba-blob{
  position:fixed;inset:0 0 auto auto;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.15);mix-blend-mode:difference;
  z-index:9999;transition:opacity .2s;
}

/* Dots grid */
.anim-dots-grid{position:relative;overflow:hidden}
.anim-dots-grid canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Magnetic button */
.anim-magnetic{display:inline-block;will-change:transform;transition:transform .15s cubic-bezier(.19,1,.22,1)}

/* Tilt card */
.anim-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .2s ease-out}

/* Pixelated page transition */
.gba-transition{position:fixed;inset:0;z-index:99999;display:none;
  grid-template-columns:repeat(12,1fr);grid-auto-rows:calc(100vh / 10)}
.gba-transition .transition-block{background:#000;opacity:1;will-change:opacity}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){.gba-blob{display:none!important}}