/* =========================================
   FONT & ROOT VARIABLES
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Gaegu&display=swap');

:root {
  --breath-bg: #221821;
  --breath-glow: rgba(255, 131, 162, 0.35);
  --btext: #ffe2e2;
  --font-soft: 'Gaegu', cursive;
}

/* =========================================
   RESET & BASE
========================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Soft handwritten text */
#quote,
#instruction,
#cycleControls {
  font-family: var(--font-soft);
  letter-spacing: 0.5px;
}

#quote {
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1.6;
  font-weight: 400;
  max-width: 22ch;
  text-align: center;
}

#instruction {
  font-size: 1rem;
  opacity: 0.75;
}

#cycleControls {
  font-size: 0.9rem;
  opacity: 0.35;
}

#cycleControls:hover {
  opacity: 1;
}

#cycleControls input {
  font-family: var(--font-soft);
  background: rgba(255, 207, 207, 0.08);
  border: 1px solid rgba(255, 172, 172, 0.2);
  border-radius: 6px;
  color: var(--btext);
  padding: 2px 4px;
  width: 40px;
  text-align: center;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Gaegu', sans-serif;
  background: var(--breath-bg);
  color: var(--btext);
  overflow: hidden;
  transition: background 4s ease;
  padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
}


/* =========================================
   BREATHING BACKGROUND STATES
========================================= */
body.inhale {
  background: radial-gradient(circle at center,
    #25061f 0%,
    #3a0a30 40%,
    var(--breath-bg) 100%);
}

body.hold {
  background: radial-gradient(circle at center,
    #833d5a,
    #72335a,
    var(--breath-bg));
}

body.exhale {
    background: radial-gradient(circle at center,
    #25061f 0%,
    #3a0a30 40%,
    var(--breath-bg) 100%);
}


/* =========================================
   LAYOUT
========================================= */
.container {
  text-align: center;
  width: 100%;
  max-width: 420px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}


/* =========================================
   TEXT ELEMENTS
========================================= */
#quote {
  font-size: clamp(1rem, 4vw, 1.3rem);
  line-height: 1.6;
  min-height: 3.5em;
  opacity: 0.9;
  transition: opacity 0.6s ease;
  padding: 0 10px;
}

#instruction {
  font-size: 1rem;
  opacity: 0.6;
}


/* =========================================
   HEART COMPONENT
========================================= */
.heart-wrapper {
  position: relative;
  width: clamp(140px, 40vw, 200px);
  height: clamp(120px, 35vw, 180px);
  cursor: pointer;
  transition: transform 0.2s ease;
  touch-action: manipulation;
}

/* Tap feedback (mobile-friendly) */
.heart-wrapper:active {
  transform: scale(0.95);
}

/* SVG sizing */
.heart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Outline */
.heart-outline {
  fill: none;
  stroke: rgba(255, 184, 184, 0.5);
  stroke-width: 2;
}

/* =========================================
   HEART PHASE STATES
========================================= */

.liquid {
  transform: translateY(100%);
  transition: transform var(--phaseTime, 4s) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Inhale → liquid rises */
.inhaling .liquid {
  transform: translateY(0%);
}

/* Hold → stay full */
.holding .liquid {
  transform: translateY(0%);
}

/* Exhale → liquid falls */
.exhaling .liquid {
  transform: translateY(100%);
}

.wave {
  transform: translateY(100%);
  transition: transform var(--phaseTime, 4s) cubic-bezier(0.4, 0, 0.2, 1);
  animation: waveDrift 6s linear infinite;
}

/* Wave follows liquid level */
.inhaling .wave,
.holding .wave {
  transform: translateY(0%);
}

.exhaling .wave {
  transform: translateY(100%);
}

/* Slow horizontal drift */
@keyframes waveDrift {
  0%   { transform: translateX(0) translateY(var(--waveY, 100%)); }
  50%  { transform: translateX(-4px) translateY(var(--waveY, 100%)); }
  100% { transform: translateX(0) translateY(var(--waveY, 100%)); }
}

/* =========================================
   HEARTBEAT (only during hold)
========================================= */
.holding.heart-wrapper {
  animation: heartBeat var(--pulseTime, 3s) ease-in-out infinite;
}

.inhaling.heart-wrapper,
.exhaling.heart-wrapper {
  animation: none;
}


/* =========================================
   GLOW EFFECT
========================================= */
.glow {
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(40px);
  background: radial-gradient(circle, #ff8fdf55, transparent 70%);
  opacity: 0;
  transition: opacity 2s ease;
  pointer-events: none;
}

/* Glow active during hold */
.holding .glow {
  opacity: 1;
  animation: holdPulse 3s ease-in-out infinite;
}

/* Disable glow otherwise */
.inhaling .glow,
.exhaling .glow {
  animation: none;
  opacity: 0;
}


/* =========================================
   ANIMATIONS
========================================= */

/* Subtle heartbeat */
@keyframes heartBeat {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.015); }
  50%  { transform: scale(1); }
  75%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* Hold glow pulse */
@keyframes holdPulse {
  0% {
    opacity: 0.5;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.5;
    transform: scale(0.95);
  }
}

.safe-footer {
    color: #ffe2e222;
}

.safe-footer a {
  color: #f7b4d72a;
}

.safe-footer a:hover {
  color: #ffd0e77b;
}

/* =========================================
   PARTICLES BACKGROUND
========================================= */
.particles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Individual particle */
.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 200, 220, 0.057);
  border-radius: 50%;
  pointer-events: none;

  animation: float 20s linear infinite;
}

@keyframes float {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(40px, -60px);
  }
  50% {
    transform: translate(-30px, 40px);
  }
  75% {
    transform: translate(20px, -20px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

/* Soft glowing circle (default state) */
.particle::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgb(255, 214, 240), transparent 60%);
  border-radius: 50%;
  opacity: 0.12;
}

/* =========================================
   HOLD PHASE → HEART SHAPE
========================================= */
body.hold .particle::before {
  content: "❤";
  font-size: 10px;
  color: rgba(255, 131, 162, 0.128);
  background: none;
  text-shadow: 0 0 6px rgba(255, 131, 162, 0.224);
  animation: heartGlow 2s ease-in-out infinite;
}

/* Hide circle during hold */
body.hold .particle {
  background: transparent;
}

@keyframes heartGlow {
  0%,100% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* Ensure content stays above particles */
.container {
  position: relative;
  z-index: 1;
}

/* =========================================
   ASMR SECTION
========================================= */
.sound-player {
  margin-top: 0.3rem;
  text-align: center;
  opacity: 0.45;
}

.sound-title {
  font-family: 'Gaegu', cursive;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}

.sound-buttons {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.sound-buttons button {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
  color: #f5cfe3;
  font-size: 1rem;
}

.sound-buttons button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.sound-buttons button.active {
  background: rgba(255, 150, 200, 0.25);
  box-shadow: 0 0 10px rgba(255,150,200,0.3);
}

/* tooltip */
.sound-buttons button::after {
  content: attr(aria-label);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 25, 0.9);
  color: #ffd6f0;
  padding: 3px 8px;
  font-size: 0.75rem;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
  white-space: nowrap;
  font-family: 'Gaegu', cursive;
  transform: translateX(-50%) translateY(5px);
}

.sound-buttons button:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.sound-buttons {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}

/* When visible */
.sound-buttons.open {
  max-height: 200px; /* enough space for icons */
  opacity: 1;
  margin-top: 1rem;
}

/* Toggle button style */
.sound-toggle {
  font-family: 'Gaegu', cursive;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  color: #ffd6f0;
  transition: 0.3s ease;
}

.sound-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* =========================================
   CREDITS BUTTON
========================================= */

.credits-wrapper {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 1000;
}

.credits-wrapper button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
  color: #f5cfe3;
  font-size: 1rem;
  position: relative;
}

.credits-wrapper button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.credits-modal a {
  color: #f7b4d7;
}

.credits-modal a:hover {
  color: #fff5fa;
}

/* Tooltip */
.credits-wrapper button::after {
  content: attr(aria-label);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: rgba(20, 20, 25, 0.9);
  color: #ffd6f0;
  padding: 3px 8px;
  font-size: 0.75rem;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
  white-space: nowrap;
  font-family: 'Gaegu', cursive;
}

.credits-wrapper button:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================
   CREDITS MODAL
========================================= */

.credits-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  z-index: 2000;
}

.credits-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.credits-content {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 2rem;
  width: 90%;
  max-width: 400px;
  color: #ffd6f0;
  text-align: center;
  font-family: 'Gaegu', cursive;
  position: relative;
}

.credits-content h2 {
  margin-top: 0;
}

.credits-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #ffd6f0;
  cursor: pointer;
}


/* =========================================
   MUSIC PLAYER
========================================= */

.music-wrapper {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1000;
}

.music-controls {
  display: flex;
  gap: 0.6rem;
}

.music-controls button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
  color: #f5cfe3;
  font-size: 1rem;
  position: relative;
}

.music-controls button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.music-controls button.active {
  background: rgba(255, 150, 200, 0.25);
  box-shadow: 0 0 10px rgba(255,150,200,0.3);
}

/* Tooltip */
.music-controls button::after {
  content: attr(aria-label);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: rgba(20, 20, 25, 0.9);
  color: #ffd6f0;
  padding: 3px 8px;
  font-size: 0.75rem;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
  white-space: nowrap;
  font-family: 'Gaegu', cursive;
}

.music-controls button:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}