/* =========================================================
   06 — EFFECTS (Background + Motion)
========================================================= */

/* Background */
.bg{ position:fixed; inset:0; pointer-events:none; z-index:-1; }
.blob{
  position:absolute;
  width: 520px;
  height:520px;
  border-radius:50%;
  filter: blur(60px);
  opacity:.35;
  animation: float 10s ease-in-out infinite;
}
.b1{ left:-120px; top:-140px; background: radial-gradient(circle at 30% 30%, #7DF9FF, transparent 60%); }
.b2{ right:-140px; bottom:-160px; background: radial-gradient(circle at 30% 30%, #B38BFF, transparent 60%); animation-delay: -3s; }

@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(20px, -18px) scale(1.03); }
}

.grain{
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.10;
}

/* Reveal float in */
.reveal.is-in.hero-tabs,
.reveal.is-in.showcase__frame{
  animation: floatIn .7s ease both;
}
@keyframes floatIn{
  from{ transform: translateY(12px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}