:root {
  --pink: #ff2d78;
  --yellow: #ffd600;
  --cyan: #00e5ff;
  --purple: #b400ff;
}

/* ── Marquee ── */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 18s linear infinite;
}
.marquee-track span {
  white-space: nowrap;
  user-select: none;
}

/* ── Floating blobs ── */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  animation: blobFloat 8s ease-in-out infinite;
}
.blob-1 { width: 520px; height: 520px; background: var(--pink);   top: -140px; left: -120px; animation-delay: 0s; }
.blob-2 { width: 400px; height: 400px; background: var(--yellow); top: 30%;   right: -80px; animation-delay: -3s; }
.blob-3 { width: 300px; height: 300px; background: var(--purple); bottom: 5%; left: 20%;   animation-delay: -5s; }
.blob-4 { width: 250px; height: 250px; background: var(--cyan);   top: 10%;   right: 30%;  animation-delay: -1.5s; }

/* ── Grain overlay ── */
.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 9999;
}

/* ── Keyframes ── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -30px) scale(1.05); }
  66%       { transform: translate(-15px, 20px) scale(0.97); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(9px); opacity: 0.25; }
}