/* ═══════════════════════════════════════════════════════
   STILLNESS — ANIMATIONS
   Keyframes, blob background, motion system
   ═══════════════════════════════════════════════════════ */

/* ── Blob Scene ──────────────────────────────────────── */
.blob-scene {
  position: fixed; inset: 0;
  z-index: var(--z-bg);
  background: linear-gradient(140deg, #F5F3EF 0%, #EDE8DF 45%, #F0EAE0 100%);
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0;
  will-change: transform;
  transform: translateZ(0);         
  contain: strict;                   
  animation: fadeInBlob 1.8s var(--ease-out) forwards;
}

@keyframes fadeInBlob {
  to { opacity: var(--blob-opacity, 0.5); }
}

.blob-1 {
  width: min(800px, 70vw); height: min(800px, 70vw);
  background: radial-gradient(circle at 40% 40%, #E8C9A8 0%, #C8956C 55%, transparent 80%);
  top: -18%; left: -12%;
  --blob-opacity: 0.22;
  animation-delay: 0s;
  animation-name: fadeInBlob, drift1;
  animation-duration: 1.8s, 24s;
  animation-timing-function: var(--ease-out), ease-in-out;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
}

.blob-2 {
  width: min(560px, 50vw); height: min(560px, 50vw);
  background: radial-gradient(circle at 35% 35%, #F2E0C8 0%, #C0845A 55%, transparent 80%);
  top: 22%; right: -10%;
  --blob-opacity: 0.18;
  animation-delay: .2s;
  animation-name: fadeInBlob, drift2;
  animation-duration: 1.8s, 30s;
  animation-timing-function: var(--ease-out), ease-in-out;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
}

.blob-3 {
  width: min(650px, 60vw); height: min(650px, 60vw);
  background: radial-gradient(circle at 40% 50%, #F8F0E4 0%, #D9B590 55%, transparent 80%);
  bottom: -12%; left: 28%;
  --blob-opacity: 0.20;
  animation-delay: .4s;
  animation-name: fadeInBlob, drift3;
  animation-duration: 1.8s, 20s;
  animation-timing-function: var(--ease-out), ease-in-out;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
}

.blob-4 {
  width: min(320px, 30vw); height: min(320px, 30vw);
  background: radial-gradient(circle, #DFB898 0%, #B8754A 60%, transparent 100%);
  top: 55%; left: 5%;
  --blob-opacity: 0.15;
  animation-delay: .6s;
  animation-name: fadeInBlob, drift4;
  animation-duration: 1.8s, 36s;
  animation-timing-function: var(--ease-out), ease-in-out;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
}

@keyframes drift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(55px, 75px) scale(1.10); }
}
@keyframes drift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-70px, 55px) scale(1.08); }
}
@keyframes drift3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-45px, -65px) scale(1.12); }
}
@keyframes drift4 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(80px, -45px) scale(1.18); }
}

/* ── Page Load Entrance ──────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Floating scroll indicator ───────────────────────── */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

/* ── Number counter ──────────────────────────────────── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Ambient pulse during meditation ─────────────────── */
@keyframes ambientPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%       { opacity: 0.7;  transform: scale(1.04); }
}

/* ── Spinner ─────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}