/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
html {
  scroll-behavior: smooth;
}

@keyframes breathe-box {
  0%   { transform: translate(-50%, -50%) scale(0.09); opacity: 1; }  /* start small */
  25%  { transform: translate(-50%, -50%) scale(2.5); opacity: 1; }    /* inhale (4s) */
  50%  { transform: translate(-50%, -50%) scale(2.5); opacity: 1; }    /* hold full */
  75%  { transform: translate(-50%, -50%) scale(0.09); opacity: 1; }  /* exhale */
  100% { transform: translate(-50%, -50%) scale(0.09); opacity: 1; }  /* hold empty */
}
.animate-breathe-box {
  animation: breathe-box 16s ease-in-out infinite;
}


@keyframes breathe-478 {
  0%    { transform: translate(-50%, -50%) scale(0.09); opacity: 1; }
  21%   { transform: translate(-50%, -50%) scale(2.5); opacity: 1; }
  58%   { transform: translate(-50%, -50%) scale(2.5); opacity: 1; }
  100%  { transform: translate(-50%, -50%) scale(0.09); opacity: 1; }
}

/* Smaller scale on small screens */
@media (max-width: 640px) {
  @keyframes breathe-478 {
    0%    { transform: translate(-50%, -50%) scale(0.09); opacity: 1; }
    21%   { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    58%   { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    100%  { transform: translate(-50%, -50%) scale(0.09); opacity: 1; }
  }
}


.animate-breathe-478 {
  animation: breathe-478 19s ease-in-out infinite;
}
.breath-phase-active {
  font-size: 2rem;
  font-weight: bold;
  opacity: 1;
}

.breath-phase-inactive {
  font-size: 1.5rem;
  opacity: 0.5;
}

@media (max-width: 640px) {
  @keyframes breathe-box {
    0% { transform: translate(-50%, -50%) scale(0.09); opacity: 1; }
    25% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    75% { transform: translate(-50%, -50%) scale(0.09); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.09); opacity: 1; }
  }
}