/* Floating gradient behind the top of every page (same motion as the Instagram story).
   Pure CSS: four soft blue blobs drift on a 9s loop. Reduced-motion users get them static. */
.ivl-top-bg { position: relative; overflow: hidden; }
.ivl-top-bg > :not(.ivl-bg-blobs) { position: relative; z-index: 1; }
.ivl-bg-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* fade out towards the bottom so the blobs never meet the next section with a hard edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%); }
.ivl-bg-blobs i { position: absolute; display: block; border-radius: 50%; will-change: transform;
  width: var(--s); height: var(--s); left: calc(var(--x) - var(--s) / 2); top: calc(var(--y) - var(--s) / 2);
  background: radial-gradient(circle, var(--c) 0%, transparent 68%);
  animation: ivl-drift 9s ease-in-out infinite; animation-delay: var(--d); }
.ivl-bg-blobs i:nth-child(1) { --s: clamp(560px, 80vw, 1100px); --x: 82%; --y: 6%;  --c: rgba(0,102,255,.20); --ax: 110px; --ay: 70px;  --d: 0s; }
.ivl-bg-blobs i:nth-child(2) { --s: clamp(500px, 70vw, 980px);  --x: 6%;  --y: 40%; --c: rgba(0,102,255,.13); --ax: 90px;  --ay: 120px; --d: -3s; }
.ivl-bg-blobs i:nth-child(3) { --s: clamp(480px, 66vw, 920px);  --x: 94%; --y: 66%; --c: rgba(120,150,255,.16); --ax: 120px; --ay: 90px; --d: -6s; }
.ivl-bg-blobs i:nth-child(4) { --s: clamp(440px, 60vw, 860px);  --x: 28%; --y: 76%; --c: rgba(0,140,255,.10); --ax: 140px; --ay: 60px;  --d: -1.8s; }
@keyframes ivl-drift {
  0%   { transform: translate3d(0, var(--ay), 0) scale(1); }
  25%  { transform: translate3d(var(--ax), 0, 0) scale(1.08); }
  50%  { transform: translate3d(0, calc(var(--ay) * -1), 0) scale(1); }
  75%  { transform: translate3d(calc(var(--ax) * -1), 0, 0) scale(.92); }
  100% { transform: translate3d(0, var(--ay), 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .ivl-bg-blobs i { animation: none; } }