/* Variant A — Liquid Glass (closest to the app) */

.variant-a { position: relative; }

/* Ambient drifting blobs behind everything */
.bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-blobs .blob { position: absolute; border-radius: 50%; filter: blur(80px); }
.bg-blobs .blob-1 {
  width: 46vw; height: 46vw; top: -12vw; left: -8vw;
  background: var(--blob-blue); animation: blob-drift-1 32s ease-in-out infinite;
}
.bg-blobs .blob-2 {
  width: 40vw; height: 40vw; top: 30vh; right: -10vw;
  background: var(--blob-orange); animation: blob-drift-2 38s ease-in-out infinite;
}
@keyframes blob-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, 5vh) scale(1.12); }
}
@keyframes blob-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5vw, -4vh) scale(1.08); }
}

/* Phone: glow halo + subtle perspective tilt + slow bob */
.phone-halo { position: relative; perspective: 1400px; }
.phone-halo::before {
  content: ""; position: absolute; inset: -6% -4% -8%; z-index: -1;
  background: radial-gradient(60% 55% at 50% 45%, var(--blob-blue), transparent 70%);
  filter: blur(30px);
}
.variant-a .phone {
  transform: rotateY(-9deg) rotateX(3deg);
  animation: phone-bob 6s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes phone-bob {
  0%, 100% { transform: rotateY(-9deg) rotateX(3deg) translateY(0); }
  50% { transform: rotateY(-9deg) rotateX(3deg) translateY(-10px); }
}
@media (max-width: 900px) {
  .variant-a .phone { transform: none; animation: none; }
}

/* Usecase tiles get a faint tinted wash in glass variant */
.variant-a .usecase { background: var(--c-card); }
.variant-a .usecase::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  background: radial-gradient(120% 90% at 100% 0%, var(--c-glass-tint), transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
  .bg-blobs .blob { animation: none; }
  .variant-a .phone { animation: none; }
}