/* ============================================================================
   Anchor Breath — Open Water styles
   Ported from the design handoff prototype <style> block.

   Key difference from the prototype: #stage and #ui are position:absolute
   (not fixed) so they live inside the fullscreen breath section and scroll
   away naturally with the rest of the page.
   ============================================================================ */

/* ---- section containers ---- */
#hero.hero,
#guided-breath.hero {
  position: relative;
  overflow: hidden;
  /* svh = "small viewport height" = height when browser chrome is fully visible.
     On iOS this correctly excludes the toolbar area that 100vh incorrectly includes.
     On desktop the chrome never changes so svh === vh — no gap. */
  min-height: 100svh;
}

/* ---- canvas stage (behind everything, fills the section) ---- */
#stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ab-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- UI overlay — everything anchored to fixed % points so nothing shifts
   when text appears/disappears ---- */
#ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

#markZone {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: 46vmin;
  height: 46vmin;
}

.center-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--base-font-display);
  font-style: italic;
  color: var(--base-paper);
  letter-spacing: 0.005em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--base-dur) var(--base-ease);
  text-shadow: 0 1px 6px rgba(46, 37, 51, 0.25);
}
.center-word.is-hidden,
.center-word.is-empty { opacity: 0; }

#tracker {
  position: absolute;
  left: 50%;
  top: 73%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.8rem;
  align-items: center;
  height: 8px;
  opacity: 0;
  transition: opacity var(--base-dur-slow) var(--base-ease);
}
#tracker.is-on { opacity: 1; }

.ab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--base-ink-soft);
  opacity: 0.2;
  transition:
    opacity var(--base-dur-slow) var(--base-ease),
    transform var(--base-dur-slow) var(--base-ease);
}
.ab-dot.is-done    { opacity: 0.48; }
.ab-dot.is-current { opacity: 0.92; transform: scale(1.55); }

#fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity var(--base-dur-slow) var(--base-ease);
}
#fade.is-hidden { opacity: 0; }

#copy {
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
  width: min(40rem, 88vw);
  margin: 0;
  font-family: var(--base-font-mono);
  font-weight: 400;
  color: var(--base-ink-soft);
  font-size: clamp(0.72rem, 0.5rem + 0.5vw, 0.875rem);
  letter-spacing: 0.045em;
  line-height: 1.95;
  text-align: center;
  text-wrap: balance;
}
.ab-emoji { font-size: 1.05em; }

#actions {
  position: absolute;
  left: 50%;
  top: 83%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.ab-cta {
  font-size: 1rem;
  white-space: nowrap;
  padding: 1.05em 2.1em;
  box-shadow: var(--base-shadow-sm);
  transition:
    opacity var(--base-dur) var(--base-ease),
    transform var(--base-dur-fast) var(--base-ease),
    background var(--base-dur-fast) var(--base-ease);
}

.ab-again {
  pointer-events: auto;
  white-space: nowrap;
  letter-spacing: 0;
  transition:
    opacity var(--base-dur-slow) var(--base-ease),
    color var(--base-dur-fast) var(--base-ease);
}
.ab-again:hover { color: var(--base-ink); }

/* ---- Open Water sits on a warm, darker wash — lift the type for legibility ---- */
body.ab-onwater #copy {
  color: #fdeee2;
  text-shadow: 0 1px 18px rgba(38, 28, 38, 0.55), 0 0 2px rgba(38, 28, 38, 0.35);
}
body.ab-onwater .ab-dot      { background: #fdeee2; }
body.ab-onwater .ab-again    { color: #fdeee2; border-bottom-color: rgba(253, 238, 226, 0.55); }
body.ab-onwater .ab-again:hover { color: #fff; }

/* ---- responsive ---- */
@media (max-width: 640px) {
  #markZone  { width: 62vmin; height: 62vmin; }
  #tracker   { top: 72%; }
  #copy      { top: 71%; font-size: clamp(0.9rem, 4vw, 1.05rem); text-wrap: pretty; }
  #actions   { top: 86%; }
}