/* ============================================================
   ATbio — Animation demo (ani.html)
   Pure CSS animated gradient orbs + floating tags.
   GPU-friendly, infinite loop. No JS, no images.
   ============================================================ */

.ani-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  gap: 40px;
}

/* === Original size stage === */
.ani-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* === Small size stage === */
.ani-stage-sm {
  position: relative;
  width: 100%;
  max-width: 360px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* === Floating tags === */
.float-tag {
  position: absolute;
  background: #e5e7ea;
  border-radius: 14px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.15);
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 500;
  color: #111;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  z-index: 3;
  min-width: 140px;
}
.float-tag .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #000;
  display: block;
}

/* === Animated gradient orbs === */
.orb-stage,
.orb-stage-sm {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(80, 220, 255, 0.85) 0%,
    rgba(120, 230, 220, 0.55) 28%,
    rgba(170, 245, 200, 0.35) 50%,
    rgba(255, 255, 255, 0) 72%);
  will-change: transform;
  mix-blend-mode: multiply;
}

/* Original size orbs */
.orb-a {
  width: 62%;
  aspect-ratio: 1;
  left: 4%;
  bottom: 0%;
  animation: orbDriftA 2.33s ease-in-out infinite;
}
.orb-b {
  width: 70%;
  aspect-ratio: 1;
  right: 6%;
  top: -4%;
  animation: orbDriftB 3s ease-in-out infinite;
}

/* Small size orbs */
.orb-a-sm {
  width: 55%;
  aspect-ratio: 1;
  left: 20%;
  bottom: 0%;
  animation: orbDriftA 2.33s ease-in-out infinite;
}
.orb-b-sm {
  width: 60%;
  aspect-ratio: 1;
  right: 10%;
  top: 5%;
  animation: orbDriftB 3s ease-in-out infinite;
}

@keyframes orbDriftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(4%, -6%) scale(1.06); }
}

@keyframes orbDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-3%, 5%) scale(0.94); }
}

/* === Floating tag motion === */
@keyframes tagFloat {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(6px, -10px) rotate(-1deg); }
  50%  { transform: translate(-4px, -14px) rotate(0.8deg); }
  75%  { transform: translate(-8px, 4px) rotate(0.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.float-anim {
  animation: tagFloat 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  animation-delay: var(--d, 0s);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .float-anim, .orb { animation-duration: 30s; animation-timing-function: linear; }
}