/* ══════════════════════════════════════════════════════════════
   CHWILA ODDECHU — instrument oddechowy wiatrowska.pro
   Sygnatura serwisu: strona nie opowiada o spokoju, tylko go daje.
   ══════════════════════════════════════════════════════════════ */

/* ── pływający przycisk (jedyna zapętlona animacja w serwisie — celowo) ── */
.aw-breath-fab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 85;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--aw-gold, #d4af37);
  background: radial-gradient(circle at 35% 30%, rgba(212,175,55,0.22), rgba(18,46,39,0.96) 70%);
  color: var(--aw-gold-light, #e6c875);
  font-size: var(--fs-base);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: awFabBreathe 7s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.aw-breath-fab img {
  width: 40px;
  height: 40px;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.aw-breath-fab:hover {
  animation-play-state: paused;
  transform: scale(1.08);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(212, 175, 55, 0.12);
}
.aw-breath-fab .aw-fab-hint {
  position: absolute;
  left: calc(100% + 12px);
  white-space: nowrap;
  font-family: var(--aw-font-body, serif);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--aw-gold-light, #e6c875);
  background: rgba(18, 46, 39, 0.92);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 7px 14px;
  border-radius: 30px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.aw-breath-fab:hover .aw-fab-hint,
.aw-breath-fab:focus-visible .aw-fab-hint { opacity: 1; transform: translateX(0); }

@keyframes awFabBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 0 0 rgba(212,175,55,0.25); }
  50%      { transform: scale(1.05); box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 0 10px rgba(212,175,55,0); }
}

@media (max-width: 700px) {
  /* nad mobilnym paskiem CTA, gdy ten jest widoczny */
  body:has(.aw-mobile-cta.is-visible) .aw-breath-fab { bottom: 84px; }
  .aw-breath-fab .aw-fab-hint { display: none; }
}
@media print { .aw-breath-fab { display: none !important; } }


/* ── logo w menu oddycha (subtelnie, tylko skala) ── */
@keyframes awBrandBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.site-header .aw-brand > img {
  animation: awBrandBreathe 7s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
.site-header .aw-brand:hover > img { animation-play-state: paused; }

/* ── scena (wspólna dla nakładki i strony /oddech) ── */
.aw-breath-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  text-align: center;
  color: var(--aw-cream, #fdfbf7);
  min-height: 420px;
  padding: 30px 20px;
}
.aw-breath-visual {
  position: relative;
  width: min(62vmin, 340px);
  height: min(62vmin, 340px);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* zewnętrzny pierścień */
.aw-breath-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.35);
}
/* cztery punkty stron świata — subtelny kompas Huny */
.aw-breath-visual::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background:
    radial-gradient(circle 3px at 50% 0%,   var(--aw-gold, #d4af37) 98%, transparent) ,
    radial-gradient(circle 3px at 100% 50%, rgba(212,175,55,0.55) 98%, transparent),
    radial-gradient(circle 3px at 50% 100%, rgba(212,175,55,0.55) 98%, transparent),
    radial-gradient(circle 3px at 0% 50%,   rgba(212,175,55,0.55) 98%, transparent);
}
.aw-breath-ball {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 38% 32%, rgba(244, 224, 138, 0.55), rgba(212, 175, 55, 0.28) 45%, rgba(26, 61, 53, 0.0) 78%),
    radial-gradient(circle, rgba(212, 175, 55, 0.20), rgba(212, 175, 55, 0.05) 70%);
  box-shadow:
    0 0 60px rgba(212, 175, 55, 0.25),
    inset 0 0 40px rgba(212, 175, 55, 0.18);
  transform: scale(0.55);
  will-change: transform;
}
.aw-breath-ball img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  opacity: 0.45;
  filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.35));
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 82%);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 82%);
  pointer-events: none;
  user-select: none;
}
.aw-breath-ball.is-holding {
  animation: awHoldGlow 2.4s ease-in-out infinite;
}
@keyframes awHoldGlow {
  0%, 100% { box-shadow: 0 0 60px rgba(212,175,55,0.25), inset 0 0 40px rgba(212,175,55,0.18); }
  50%      { box-shadow: 0 0 90px rgba(212,175,55,0.40), inset 0 0 55px rgba(212,175,55,0.28); }
}
.aw-breath-count {
  position: absolute;
  bottom: -14%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--aw-font-display, serif);
  font-style: italic;
  font-size: var(--fs-xl);
  color: rgba(253, 251, 247, 0.9);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.aw-breath-phase {
  font-family: var(--aw-font-display, serif);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: 0.04em;
  min-height: 1.5em;
  transition: opacity 0.5s ease;
}
.aw-breath-phase.is-switching { opacity: 0; }

.aw-breath-cycles {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.aw-breath-cycles i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.28);
  transition: background 0.4s, transform 0.4s;
}
.aw-breath-cycles i.done { background: var(--aw-gold, #d4af37); transform: scale(1.25); }

.aw-breath-controls {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.aw-breath-btn {
  font-family: var(--aw-font-caps, serif);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 14px 34px;
  cursor: pointer;
  border: 1px solid var(--aw-gold, #d4af37);
  background: var(--aw-gold-gradient, linear-gradient(135deg,#f4e08a,#d4af37 45%,#b8912a 60%,#f4e08a));
  color: var(--aw-green-dark, #122e27);
  transition: transform 0.25s, box-shadow 0.25s;
}
.aw-breath-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.aw-breath-btn--ghost {
  background: transparent;
  color: var(--aw-gold-light, #e6c875);
}
.aw-breath-btn--ghost:hover { background: rgba(212, 175, 55, 0.12); box-shadow: none; }
.aw-breath-btn--icon {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.aw-breath-btn--icon[aria-pressed="false"] { opacity: 0.55; }

.aw-breath-note {
  font-family: var(--aw-font-body, serif);
  font-style: italic;
  font-size: var(--fs-base);
  color: rgba(253, 251, 247, 0.65);
  max-width: 42ch;
}

/* ── zakończenie ── */
.aw-breath-done { display: none; }
.aw-breath-stage.is-done .aw-breath-live { display: none; }
.aw-breath-stage.is-done .aw-breath-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.aw-breath-done .sign {
  font-family: var(--aw-font-script, cursive);
  font-size: var(--fs-xl);
  color: var(--aw-gold-light, #e6c875);
  line-height: 1.2;
}
.aw-breath-done .streak {
  font-family: var(--aw-font-caps, serif);
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.8);
}

/* ── nakładka pełnoekranowa (dialog) ── */
.aw-breath-overlay {
  border: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(35, 71, 60, 0.9), transparent 70%),
    linear-gradient(170deg, #1a3d35 0%, #0d211b 100%);
  color: var(--aw-cream, #fdfbf7);
  overflow: hidden;
}
.aw-breath-overlay::backdrop { background: transparent; }
.aw-breath-overlay .aw-breath-stage { min-height: 100dvh; }
.aw-breath-overlay .aw-breath-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}

/* link startowy w hero */
.aw-breath-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 4px 0;
  margin-top: 26px;
  cursor: pointer;
  font-family: var(--aw-font-body, serif);
  font-style: italic;
  font-size: var(--fs-base);
  color: rgba(253, 251, 247, 0.75);
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  transition: color 0.25s, border-color 0.25s;
}
.aw-breath-inline-link:hover { color: var(--aw-gold-light, #e6c875); border-color: var(--aw-gold-light, #e6c875); }
.aw-breath-inline-link .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--aw-gold, #d4af37);
  animation: awFabBreathe 7s ease-in-out infinite;
}

/* ── reduced motion: doświadczenie tekstowe zamiast animacji ── */
@media (prefers-reduced-motion: reduce) {
  .aw-breath-fab, .aw-breath-inline-link .dot, .aw-breath-ball img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  opacity: 0.45;
  filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.35));
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 82%);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 82%);
  pointer-events: none;
  user-select: none;
}
.aw-breath-ball.is-holding { animation: none !important; }
  .aw-breath-ball { transition: none !important; transform: scale(0.8) !important; opacity: 0.5; }
  .aw-breath-phase.is-switching { opacity: 1; }
}