/* Breathe gadget — fullscreen pill animation (same language as .alma-breathe-trigger) */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.breathe-gadget-stage {
  max-width: min(40rem, 100%);
  margin: clamp(1rem, 3vw, 1.75rem) 0 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: 1.05rem;
  background: rgba(6, 6, 14, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
  text-align: start;
}

.breathe-gadget-launch {
  font-size: clamp(0.62rem, 1.1vw, 0.72rem) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 1.75rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.breathe-gadget-btn-star {
  font-size: 0.95em;
  opacity: 0.88;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
}

/* —— Fullscreen play: black field + radial halo + large pill + orbit particles —— */
.breathe-gadget-play {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: #000;
  box-sizing: border-box;
}

.breathe-gadget-play[hidden] {
  display: none !important;
}

.breathe-gadget-play__halo {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(92vw, 520px);
  height: min(92vw, 520px);
  max-height: 70vh;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 48%,
    rgba(255, 252, 248, 0.22) 0%,
    rgba(255, 255, 255, 0.07) 35%,
    rgba(255, 255, 255, 0.02) 55%,
    transparent 72%
  );
  filter: blur(4px);
  opacity: 0.95;
}

.breathe-gadget-play__shell {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: min(88vw, 440px);
  min-height: min(72vw, 400px);
  pointer-events: none;
}

.breathe-gadget-play__shell .alma-breathe-trigger {
  pointer-events: none;
}

/* Larger orbit for drifting “bowtie” particles */
.breathe-gadget-play__shell .breathe-gadget-play__orbit.alma-breathe-trigger-orbit {
  width: clamp(200px, 58vw, 360px);
  height: clamp(200px, 58vw, 360px);
}

/*
 * Hero-scale pill: matches floating Breathe control but readable at a distance.
 * Reuses alma-breathe-trigger keyframes (rim, sleep, cues, words).
 */
.alma-breathe-trigger--gadget-play {
  position: relative;
  z-index: 1;
  pointer-events: none;
  margin-top: 0.25rem;
  padding: 0.62rem 1.15rem 0.72rem;
  font-size: clamp(1.05rem, 3.8vw, 1.42rem);
  font-weight: 300;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.alma-breathe-trigger--gadget-play .alma-breathe-trigger__wrap {
  min-width: min(18em, 86vw);
  gap: 0.28em;
}

.alma-breathe-trigger--gadget-play .alma-breathe-trigger__star {
  font-size: 1.05em;
  margin-bottom: 0.08em;
}

.alma-breathe-trigger--gadget-play .alma-breathe-trigger__phase {
  height: 1.35em;
}

.alma-breathe-trigger--gadget-play .alma-breathe-trigger__cue {
  font-size: 0.88em;
  letter-spacing: 0.38em;
  color: rgba(255, 255, 255, 0.82);
}

.alma-breathe-trigger--gadget-play .alma-breathe-trigger__words {
  height: 1.45em;
}

.alma-breathe-trigger--gadget-play .alma-breathe-trigger__word {
  font-size: 1.05em;
  letter-spacing: 0.26em;
  font-weight: 400;
  color: rgba(255, 252, 255, 0.92);
}

.breathe-gadget-play__close {
  position: relative;
  z-index: 3;
  margin-top: clamp(1.75rem, 5vh, 2.75rem);
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(0.58rem, 1.05vw, 0.68rem);
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  padding: 0.55rem 1.25rem;
  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
  pointer-events: auto;
}

.breathe-gadget-play__close:hover,
.breathe-gadget-play__close:focus-visible {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.06);
}

.breathe-gadget-play__close:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.35);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .alma-breathe-trigger--gadget-play,
  .alma-breathe-trigger--gadget-play::before,
  .breathe-gadget-play__shell .alma-breathe-trigger-mini-bf {
    animation: none !important;
  }
}