/* =========================================================
   MINDFUL RELAX — Animations
   ========================================================= */

/* ---------------------------------------------------------
   Shape base styles
   --------------------------------------------------------- */
.shape-wrapper {
  position: absolute;
  transform-origin: center center;
}

.shape {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform 1.5s ease-in-out;
}

/* ---------------------------------------------------------
   Ambient Drift — outer wrappers, always running
   --------------------------------------------------------- */
.shape-wrapper-1 { animation: drift-1 18s ease-in-out infinite; }
.shape-wrapper-2 { animation: drift-2 23s ease-in-out infinite; }
.shape-wrapper-3 { animation: drift-3 27s ease-in-out infinite; }
.shape-wrapper-4 { animation: drift-4 21s ease-in-out infinite; }

@keyframes drift-1 {
  0%   { transform: translate(0px,   0px)  scale(1.00) rotate(0deg);   }
  25%  { transform: translate(28px, -18px) scale(1.04) rotate(3deg);   }
  50%  { transform: translate(12px,  22px) scale(1.02) rotate(-1deg);  }
  75%  { transform: translate(-22px,  8px) scale(1.03) rotate(2deg);   }
  100% { transform: translate(0px,   0px)  scale(1.00) rotate(0deg);   }
}
@keyframes drift-2 {
  0%   { transform: translate(0px,    0px)  scale(1.00) rotate(0deg);  }
  20%  { transform: translate(-30px, 15px)  scale(1.03) rotate(-2deg); }
  45%  { transform: translate(20px,  -25px) scale(1.05) rotate(4deg);  }
  70%  { transform: translate(10px,   18px) scale(1.02) rotate(-3deg); }
  100% { transform: translate(0px,    0px)  scale(1.00) rotate(0deg);  }
}
@keyframes drift-3 {
  0%   { transform: translate(0px,   0px)   scale(1.00) rotate(0deg);  }
  30%  { transform: translate(18px,  28px)  scale(1.04) rotate(2deg);  }
  60%  { transform: translate(-25px,-12px)  scale(1.02) rotate(-4deg); }
  85%  { transform: translate(8px,  -20px)  scale(1.03) rotate(1deg);  }
  100% { transform: translate(0px,   0px)   scale(1.00) rotate(0deg);  }
}
@keyframes drift-4 {
  0%   { transform: translate(0px,   0px)   scale(1.00) rotate(0deg);  }
  35%  { transform: translate(-15px,-22px)  scale(1.05) rotate(-2deg); }
  65%  { transform: translate(25px,  10px)  scale(1.03) rotate(3deg);  }
  90%  { transform: translate(-8px,  20px)  scale(1.02) rotate(-1deg); }
  100% { transform: translate(0px,   0px)   scale(1.00) rotate(0deg);  }
}

/* ---------------------------------------------------------
   Background shape breathe — subtle pulse during session
   --------------------------------------------------------- */
#scene.breathing-active .shape-1 { animation: breathe-bg 8.57s ease-in-out infinite; animation-delay: 0s;    }
#scene.breathing-active .shape-2 { animation: breathe-bg 8.57s ease-in-out infinite; animation-delay: -2.5s; }
#scene.breathing-active .shape-3 { animation: breathe-bg 8.57s ease-in-out infinite; animation-delay: -5s;   }
#scene.breathing-active .shape-4 { animation: breathe-bg 8.57s ease-in-out infinite; animation-delay: -7.5s; }

@keyframes breathe-bg {
  0%   { transform: scale(1.00); opacity: 0.60; }
  10%  { transform: scale(1.00); opacity: 0.60; }
  50%  { transform: scale(1.30); opacity: 0.88; }
  60%  { transform: scale(1.30); opacity: 0.88; }
  100% { transform: scale(1.00); opacity: 0.60; }
}

/* =========================================================
   BREATHING FLOWER — Apple Watch style
   Three concentric layers of 6 petals + a center glow.
   Outer layer (large, heavily blurred) — 0,60,120,180,240,300°
   Mid layer   (medium, light blur)    — 30,90,150,210,270,330°
   Inner layer (small, crisp)          — 0,60,120,180,240,300°
   ========================================================= */

#breath-flower {
  position: fixed;
  top: 50%;
  left: 50%;
  /* identity transform at idle; overridden by .active */
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
}

#breath-flower.active {
  opacity: 1;
  animation: flower-rotate 120s linear infinite;
}

@keyframes flower-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Petal arm — static rotation, positions each spoke */
.petal-arm {
  position: absolute;
  width: 0;
  height: 0;
  transform: rotate(var(--petal-rot));
  transform-origin: 0 0;
}

/* ---------------------------------------------------------
   Outer petals: 150×150px, blur 22px
   Travel: -20px → -130px
   --------------------------------------------------------- */
.petal-outer {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  left: -75px;
  top: -75px;
  background: rgba(255, 255, 255, 0.13);
  filter: blur(22px);
  mix-blend-mode: screen;
  transform: translateY(-20px) scale(0.72);
  opacity: 0;
  transition: opacity 1.5s ease;
}

#breath-flower.active .petal-outer {
  animation: petal-outer-breathe 8.57s ease-in-out infinite;
}

@keyframes petal-outer-breathe {
  0%   { transform: translateY(-20px) scale(0.72); opacity: 0.38; }
  10%  { transform: translateY(-20px) scale(0.72); opacity: 0.38; }
  50%  { transform: translateY(-130px) scale(1.00); opacity: 0.72; }
  60%  { transform: translateY(-130px) scale(1.00); opacity: 0.72; }
  100% { transform: translateY(-20px) scale(0.72); opacity: 0.38; }
}

/* ---------------------------------------------------------
   Mid petals: 85×85px, blur 6px, offset 30°
   Travel: -14px → -85px
   --------------------------------------------------------- */
.petal-mid {
  position: absolute;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  left: -42px;
  top: -42px;
  background: rgba(255, 255, 255, 0.18);
  filter: blur(6px);
  mix-blend-mode: screen;
  transform: translateY(-14px) scale(0.75);
  opacity: 0;
  transition: opacity 1.5s ease;
}

#breath-flower.active .petal-mid {
  animation: petal-mid-breathe 8.57s ease-in-out infinite;
}

@keyframes petal-mid-breathe {
  0%   { transform: translateY(-14px) scale(0.75); opacity: 0.45; }
  10%  { transform: translateY(-14px) scale(0.75); opacity: 0.45; }
  50%  { transform: translateY(-85px)  scale(1.05); opacity: 0.82; }
  60%  { transform: translateY(-85px)  scale(1.05); opacity: 0.82; }
  100% { transform: translateY(-14px) scale(0.75); opacity: 0.45; }
}

/* ---------------------------------------------------------
   Inner petals: 44×44px, no blur, crisp bright core
   Travel: -6px → -48px
   --------------------------------------------------------- */
.petal-inner {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  left: -22px;
  top: -22px;
  background: rgba(255, 255, 255, 0.28);
  filter: blur(2px);
  mix-blend-mode: screen;
  transform: translateY(-6px) scale(0.78);
  opacity: 0;
  transition: opacity 1.5s ease;
}

#breath-flower.active .petal-inner {
  animation: petal-inner-breathe 8.57s ease-in-out infinite;
}

@keyframes petal-inner-breathe {
  0%   { transform: translateY(-6px) scale(0.78); opacity: 0.50; }
  10%  { transform: translateY(-6px) scale(0.78); opacity: 0.50; }
  50%  { transform: translateY(-48px) scale(1.10); opacity: 0.95; }
  60%  { transform: translateY(-48px) scale(1.10); opacity: 0.95; }
  100% { transform: translateY(-6px) scale(0.78); opacity: 0.50; }
}

/* ---------------------------------------------------------
   Center glow: large soft orb that lights up on inhale
   --------------------------------------------------------- */
.petal-center {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  left: -90px;
  top: -90px;
  background: radial-gradient(circle, rgba(255,255,255,0.30) 0%, transparent 70%);
  filter: blur(28px);
  mix-blend-mode: screen;
  transform: scale(0.40);
  opacity: 0;
  transition: opacity 1.5s ease;
}

#breath-flower.active .petal-center {
  animation: center-breathe 8.57s ease-in-out infinite;
}

@keyframes center-breathe {
  0%   { transform: scale(0.40); opacity: 0.20; }
  10%  { transform: scale(0.40); opacity: 0.20; }
  50%  { transform: scale(1.30); opacity: 0.60; }
  60%  { transform: scale(1.30); opacity: 0.60; }
  100% { transform: scale(0.40); opacity: 0.20; }
}

/* ---------------------------------------------------------
   Session loader — simple ring spinner shown while audio buffers
   --------------------------------------------------------- */
.loader-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.65);
  animation: loader-spin 0.75s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------
   Play button hover ring
   --------------------------------------------------------- */
@keyframes play-glow {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.15); }
  70%  { box-shadow: 0 0 0 20px rgba(255,255,255,0);  }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0);     }
}

.play-btn:hover {
  animation: play-glow 2s ease-out infinite;
}

/* ---------------------------------------------------------
   Theme label flash
   --------------------------------------------------------- */
@keyframes theme-flash {
  0%   { opacity: 0; transform: translateY(-6px); }
  20%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(6px); }
}

.theme-flash {
  animation: theme-flash 1.8s ease forwards;
}