/* ============================================================
   Mindful Suite – Animations
   Soft, breathable, emotionally supportive motion
   ============================================================ */

/* ── Fade In ──────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Breathing Ring ──────────────────────────────────── */
@keyframes breatheExpand {
  0%   { transform: scale(1); opacity: 0.5; }
  50%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 0.5; }
}

@keyframes breatheGlow {
  0%   { box-shadow: 0 0 20px var(--c-glow), 0 0 60px transparent; }
  50%  { box-shadow: 0 0 40px var(--c-glow), 0 0 100px var(--c-glow-soft); }
  100% { box-shadow: 0 0 20px var(--c-glow), 0 0 60px transparent; }
}

/* ── Pulse Soft ──────────────────────────────────────── */
@keyframes pulseSoft {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.03); }
}

/* ── Float Gentle ────────────────────────────────────── */
@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ── Star Twinkle ────────────────────────────────────── */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%       { opacity: 0.8; transform: scale(1.4); }
}

/* ── Ambient Drift ───────────────────────────────────── */
@keyframes driftSlow {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(10px, -15px) scale(1.02); }
  66%  { transform: translate(-8px, -8px) scale(0.99); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ── Wave Calm ───────────────────────────────────────── */
@keyframes waveCalm {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  25%       { transform: scaleX(1.02) scaleY(0.98); }
  75%       { transform: scaleX(0.98) scaleY(1.02); }
}

/* ── Shimmer ──────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Stagger Utilities ───────────────────────────────── */
.anim-fade-in       { animation: fadeIn 0.8s var(--m-ease-soft) both; }
.anim-fade-in-up    { animation: fadeInUp 0.9s var(--m-ease-soft) both; }
.anim-fade-in-down  { animation: fadeInDown 0.7s var(--m-ease-soft) both; }
.anim-float         { animation: floatGentle 5s ease-in-out infinite; }
.anim-pulse-soft    { animation: pulseSoft 4s ease-in-out infinite; }

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.6s; }
.delay-5 { animation-delay: 0.85s; }

/* ── Breathing Visuals ───────────────────────────────── */
.breathing-ring {
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  border: 1.5px solid var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--m-ease-breathe), box-shadow 0.5s;
}

.breathing-ring::before {
  content: '';
  position: absolute;
  inset: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--c-border);
}

.breathing-ring::after {
  content: '';
  position: absolute;
  inset: -2rem;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  opacity: 0.3;
}

.breathing-ring.inhale {
  transform: scale(1.35);
  box-shadow: 0 0 60px var(--c-glow), 0 0 120px var(--c-glow-soft);
  border-color: var(--c-accent-2);
}

.breathing-ring.hold {
  transform: scale(1.35);
  box-shadow: 0 0 40px var(--c-glow);
}

.breathing-ring.exhale {
  transform: scale(1);
  box-shadow: 0 0 15px var(--c-glow-soft);
}

.breathing-ring.hold-after {
  transform: scale(1);
  box-shadow: none;
}

/* ── Stars BG ─────────────────────────────────────────── */
.stars-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.star {
  position: absolute;
  background: var(--c-text);
  border-radius: 50%;
  animation: twinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  width: var(--size, 2px);
  height: var(--size, 2px);
  opacity: 0.3;
}


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

.page-fade-in {
  animation: fadeInPage 0.8s ease-out forwards;
}

.page-fade-out {
  animation: fadeIn 0.4s ease-out reverse forwards;
}

/* ── Zen Impulse ─────────────────────────────────────── */
.zen-impulse {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--c-text-soft);
  opacity: 0.7;
  margin-top: 1.5rem;
  min-height: 1.5rem;
  letter-spacing: 0.02em;
}