:root {
  --bg: #24382f;
  --bg-deep: #24362e;
  --sage: #8a9a78;
  --wine: #7c3344;
  --wine-hot: #a34458;
  --cream: #e8dfd0;
  --mute: #a9b6ad;
  --floor: #3a2a1c;
  --line: rgba(232, 223, 208, 0.18);
  --z-gvozdi: #f0c400;
  --z-mak: #b44d62;
  --z-art: #d0122e;
  --z-golos: #8a4ecf;
  --z-dyhanie: #4eb8e8;
  --z-banya: #d9cbb0;
  --header-h: 4.25rem;
  --footer-h: 5.5rem;
  --font: "Golos Text", "Segoe UI", sans-serif;
  --display: "Unbounded", "Golos Text", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  min-height: 100%;
  background-color: var(--bg-deep);
  background-image:
    linear-gradient(rgba(18, 28, 24, 0.72), rgba(16, 26, 22, 0.8)),
    url("../assets/banya-bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

html.page-banya {
  background-image:
    linear-gradient(rgba(18, 28, 24, 0.42), rgba(16, 26, 22, 0.55)),
    url("../assets/banya-bg.png");
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cream);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

:focus-visible {
  outline: 1px solid var(--cream);
  outline-offset: 4px;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  background: linear-gradient(to bottom, rgba(18, 28, 24, 0.55), transparent);
}

.logo {
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.btn:hover,
.btn:focus-visible {
  background: var(--wine);
  border-color: var(--wine);
}

.hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--header-h) 1rem 0.35rem;
  background: transparent;
  overflow: visible;
}

.witch-stage {
  position: relative;
  width: min(100%, calc((100dvh - var(--header-h) - var(--footer-h) - 3rem) * 3 / 4));
  max-height: calc(100dvh - var(--header-h) - var(--footer-h) - 3rem);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  overflow: visible;
}

.witch-portraits {
  position: absolute;
  inset: 0;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 5.5%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 5.5%, #000 100%);
  mask-composite: intersect;
}

.witch-portraits img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.witch-glance {
  z-index: 0;
}

.witch-look {
  z-index: 1;
  opacity: 0;
  transition: opacity 1.15s ease-in-out;
}

.witch-stage:hover .witch-look,
.witch-stage:focus-within .witch-look {
  opacity: 1;
}

.witch-breathe {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 50% 42%;
  animation: breathe 8s ease-in-out infinite;
  will-change: transform;
}

.witch-stage.is-leaving {
  pointer-events: none;
}

.witch-stage.is-leaving::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--flash-x, 50%) var(--flash-y, 50%), rgba(232, 223, 208, 0.35), transparent 42%);
  animation: flash 0.5s ease-out forwards;
}

.particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.heater {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}

.stone-pile {
  position: absolute;
  bottom: 4.5%;
  width: 26%;
}

.stone-pile img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

.stone-pile-l {
  left: 0.5%;
}

.stone-pile-r {
  right: 0.5%;
  transform: scaleX(-1);
}

.ember {
  position: absolute;
  left: 18%;
  top: 22%;
  width: 64%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle, #ff6a2a 0%, #d32610 38%, transparent 72%);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  z-index: 0;
  filter: blur(10px);
}

.ember-a {
  animation: stone-heat 5.5s ease-in-out infinite;
}

.ember-b {
  animation: stone-heat 7s ease-in-out infinite 1.4s;
}

.steam-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}

.steam-wisp {
  fill: none;
  stroke: url(#steam-fade);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.steam-wisp-b {
  stroke-width: 7.5;
  animation: steam-rise 9s ease-in-out infinite;
}

.steam-col-l {
  animation: steam-drift-l 12s ease-in-out infinite;
  transform-origin: 14% 80%;
}

.steam-col-r {
  animation: steam-drift-r 14s ease-in-out infinite;
  transform-origin: 86% 80%;
}

.witch-stage:has([data-zone^="banya"]:hover) .steam-layer,
.witch-stage:has([data-zone^="banya"]:focus-visible) .steam-layer {
  filter: brightness(1.12);
}

.witch-stage:has([data-zone^="banya"]:hover) .ember,
.witch-stage:has([data-zone^="banya"]:focus-visible) .ember {
  animation-duration: 2.4s;
}

.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

.fx-mote {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(10px * var(--s, 1));
  height: calc(10px * var(--s, 1));
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9b8 0%, #f0c070 35%, transparent 72%);
  opacity: 0;
  filter: blur(0.4px);
  mix-blend-mode: plus-lighter;
  transform: translate3d(0, 8px, 0) scale(0.7);
  transition: opacity 0.55s ease, transform 0.7s ease;
  animation: fx-drift 7.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  animation-play-state: paused;
}

.fx-idle {
  opacity: 0.28;
  animation-play-state: running;
}

.fx-mak { --tone: var(--z-mak); }
.fx-golos { --tone: var(--z-golos); }
.fx-art { --tone: var(--z-art); }
.fx-dyhanie { --tone: var(--z-dyhanie); }
.fx-gvozdi { --tone: var(--z-gvozdi); }
.fx-banya { --tone: var(--z-banya); }

.fx-mak,
.fx-golos,
.fx-art,
.fx-dyhanie,
.fx-gvozdi,
.fx-banya {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--tone) 88%, #fff) 0%,
    color-mix(in srgb, var(--tone) 55%, transparent) 42%,
    transparent 74%
  );
}

.fx-ring {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2.4rem;
  height: 2.4rem;
  margin: -1.2rem 0 0 -1.2rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--z-golos) 55%, transparent);
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.45s ease, transform 0.7s ease;
  mix-blend-mode: plus-lighter;
}

.fx-breath {
  position: absolute;
  left: 38%;
  top: 42%;
  width: 24%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--z-dyhanie) 35%, transparent), transparent 70%);
  opacity: 0;
  filter: blur(10px);
  transform: scale(0.85);
  transition: opacity 0.55s ease, transform 1.1s ease;
  mix-blend-mode: plus-lighter;
}

.witch-stage:has([data-zone="mak"]:hover) .fx-mak,
.witch-stage:has([data-zone="mak"]:focus-visible) .fx-mak,
.witch-stage:has([data-zone="mak"].is-on) .fx-mak,
.witch-stage:has([data-zone="golos"]:hover) .fx-golos,
.witch-stage:has([data-zone="golos"]:focus-visible) .fx-golos,
.witch-stage:has([data-zone="golos"].is-on) .fx-golos,
.witch-stage:has([data-zone="art"]:hover) .fx-art,
.witch-stage:has([data-zone="art"]:focus-visible) .fx-art,
.witch-stage:has([data-zone="art"].is-on) .fx-art,
.witch-stage:has([data-zone="dyhanie"]:hover) .fx-dyhanie,
.witch-stage:has([data-zone="dyhanie"]:focus-visible) .fx-dyhanie,
.witch-stage:has([data-zone="dyhanie"].is-on) .fx-dyhanie,
.witch-stage:has([data-zone="gvozdi"]:hover) .fx-gvozdi,
.witch-stage:has([data-zone="gvozdi"]:focus-visible) .fx-gvozdi,
.witch-stage:has([data-zone="gvozdi"].is-on) .fx-gvozdi,
.witch-stage:has([data-zone^="banya"]:hover) .fx-banya,
.witch-stage:has([data-zone^="banya"]:focus-visible) .fx-banya,
.witch-stage:has([data-zone^="banya"].is-on) .fx-banya {
  opacity: 0.9;
  transform: translate3d(0, 0, 0) scale(1);
  animation-play-state: running;
}

.witch-stage:has([data-zone="golos"]:hover) .fx-ring,
.witch-stage:has([data-zone="golos"]:focus-visible) .fx-ring,
.witch-stage:has([data-zone="golos"].is-on) .fx-ring {
  opacity: 0.7;
  transform: scale(1.15);
  animation: fx-ring 2.4s ease-out infinite;
}

.witch-stage:has([data-zone="dyhanie"]:hover) .fx-breath,
.witch-stage:has([data-zone="dyhanie"]:focus-visible) .fx-breath,
.witch-stage:has([data-zone="dyhanie"].is-on) .fx-breath {
  opacity: 0.85;
  transform: scale(1.18);
  animation: fx-breathe-glow 3.2s ease-in-out infinite;
}

.witch-stage:has(.zone:hover) .fx-idle,
.witch-stage:has(.zone:focus-visible) .fx-idle,
.witch-stage:has(.zone.is-on) .fx-idle {
  opacity: 0.12;
}

@keyframes fx-drift {
  0%, 100% { transform: translate3d(0, 6px, 0) scale(0.85); }
  50% { transform: translate3d(4px, -10px, 0) scale(1.08); }
}

@keyframes fx-ring {
  0% { opacity: 0.65; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.55); }
}

@keyframes fx-breathe-glow {
  0%, 100% { opacity: 0.35; transform: scale(0.95); }
  50% { opacity: 0.9; transform: scale(1.22); }
}

@keyframes steam-drift-l {
  0%, 100% { transform: translate(0, 6px) rotate(-1deg); }
  50% { transform: translate(3px, -14px) rotate(1.4deg); }
}

@keyframes steam-drift-r {
  0%, 100% { transform: translate(0, 4px) rotate(1deg); }
  50% { transform: translate(-3px, -16px) rotate(-1.2deg); }
}

@keyframes steam-rise {
  0%, 100% { opacity: 0.4; transform: translateY(4px); }
  50% { opacity: 0.9; transform: translateY(-10px); }
}

@keyframes stone-heat {
  0%, 100% { opacity: 0.18; }
  42% { opacity: 0.82; }
  58% { opacity: 0.55; }
}

.zones {
  position: absolute;
  inset: 0;
  z-index: 6;
  isolation: isolate;
  pointer-events: none;
}

.zone {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.zone::before {
  content: "";
  position: absolute;
  inset: -50%;
  border-radius: inherit;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--glow) 70%, #fff) 0%,
    color-mix(in srgb, var(--glow) 38%, transparent) 28%,
    color-mix(in srgb, var(--glow) 12%, transparent) 52%,
    transparent 74%
  );
  filter: blur(22px);
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
  mix-blend-mode: plus-lighter;
  transition: opacity 0.4s ease, transform 0.45s ease;
}

.zone:hover::before,
.zone:focus-visible::before,
.zone.is-on::before {
  opacity: 0.95;
  transform: scale(1.14);
  animation: none;
}

.zone[data-zone="gvozdi"] { --glow: var(--z-gvozdi); left: 41%; top: 87%; width: 18%; height: 10%; z-index: 4; }
.zone[data-zone="mak"] { --glow: var(--z-mak); left: 42%; top: 6%; width: 16%; height: 14%; z-index: 3; }
.zone[data-zone="art"] { --glow: var(--z-art); left: 43%; top: 24%; width: 14%; height: 10%; z-index: 4; }
.zone[data-zone="golos"] { --glow: var(--z-golos); left: 46%; top: 19%; width: 9%; height: 6%; z-index: 4; }
.zone[data-zone="dyhanie"] { --glow: var(--z-dyhanie); left: 42%; top: 44%; width: 16%; height: 11%; z-index: 4; }
.zones-heater {
  z-index: 7;
}

.zone[data-zone="banya-l"] {
  --glow: var(--z-banya);
  left: 0.5%;
  top: auto;
  bottom: 4.5%;
  width: 26%;
  height: 16%;
  border-radius: 48% 42% 50% 46%;
  z-index: 5;
}

.zone[data-zone="banya-r"] {
  --glow: var(--z-banya);
  right: 0.5%;
  left: auto;
  top: auto;
  bottom: 4.5%;
  width: 26%;
  height: 16%;
  border-radius: 42% 48% 46% 50%;
  z-index: 5;
}

.hint {
  min-height: 1.4rem;
  margin: 0.55rem 0 0;
  text-align: center;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cream);
  opacity: 0.78;
  transition: opacity 0.3s, transform 0.3s;
}

.hint.is-zone {
  opacity: 1;
  color: var(--hint-color, var(--cream));
}

.directions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 42rem;
}

.directions a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.1rem;
}

.directions a:hover,
.directions a:focus-visible {
  color: var(--cream);
  border-bottom-color: color-mix(in srgb, var(--dir, var(--cream)) 70%, transparent);
}

.directions [data-dir="gvozdi"] { --dir: var(--z-gvozdi); }
.directions [data-dir="mak"] { --dir: var(--z-mak); }
.directions [data-dir="art"] { --dir: var(--z-art); }
.directions [data-dir="golos"] { --dir: var(--z-golos); }
.directions [data-dir="dyhanie"] { --dir: var(--z-dyhanie); }
.directions [data-dir="banya"] { --dir: var(--z-banya); }

.site-footer {
  flex: 0 0 auto;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem) 1.15rem;
  border-top: 1px solid var(--line);
  background: rgba(18, 28, 24, 0.45);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.5rem;
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  color: var(--mute);
  font-size: 0.92rem;
}

.footer-nav a:hover {
  color: var(--cream);
}

.footer-brand {
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}

.practice {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.practice-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 2rem) 1.5rem 4rem;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 46%);
}

.practice-card {
  max-width: 32rem;
  text-align: center;
}

.coming-soon-art {
  display: block;
  width: auto;
  max-width: min(100%, 22rem);
  max-height: min(58dvh, 30rem);
  height: auto;
  margin: 0 auto 1.35rem;
  object-fit: contain;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
}

.practice-kicker {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 80%, var(--cream));
}

.practice h1 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.practice p {
  margin: 0 0 2rem;
  color: var(--mute);
  font-size: 1.15rem;
}

.practice .coming-soon-note {
  margin: 0 0 1.6rem;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.86;
}

.practice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.btn-ghost {
  border-color: transparent;
  color: var(--mute);
}

.btn-ghost:hover {
  background: transparent;
  border-color: var(--line);
  color: var(--cream);
}

body[data-theme="gvozdi"] { --accent: var(--z-gvozdi); }
body[data-theme="mak"] { --accent: var(--z-mak); }
body[data-theme="art"] { --accent: var(--z-art); }
body[data-theme="golos"] { --accent: var(--z-golos); }
body[data-theme="dyhanie"] { --accent: var(--z-dyhanie); }
body[data-theme="banya"] { --accent: var(--z-banya); }

@keyframes breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -3px, 0) scale(1.006); }
}

@keyframes flash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pulse-zone {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.55; }
}

@media (hover: none) {
  .zone::before {
    animation: pulse-zone 5.5s ease-in-out infinite;
  }
  .zone[data-zone="gvozdi"]::before { animation-delay: 0s; }
  .zone[data-zone="mak"]::before { animation-delay: 0.9s; }
  .zone[data-zone="art"]::before { animation-delay: 1.8s; }
  .zone[data-zone="golos"]::before { animation-delay: 2.7s; }
  .zone[data-zone="dyhanie"]::before { animation-delay: 3.6s; }
  .zone[data-zone="banya-l"]::before,
  .zone[data-zone="banya-r"]::before { animation-delay: 4.5s; }
}

@media (max-width: 720px) {
  :root {
    --footer-h: 7.25rem;
  }

  .site-header {
    gap: 0.5rem;
    padding: 0 0.9rem;
  }

  .logo {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
  }

  .btn {
    min-height: 2.1rem;
    padding: 0 0.85rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .witch-stage {
    width: min(100%, calc((100dvh - var(--header-h) - var(--footer-h) - 3.25rem) * 3 / 4));
    max-height: calc(100dvh - var(--header-h) - var(--footer-h) - 3.25rem);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .footer-grid .btn {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .witch-look {
    transition: none;
  }

  .witch-stage img,
  .witch-breathe,
  .zone,
  .zone::before,
  .steam-col-l,
  .steam-col-r,
  .steam-wisp-b,
  .ember-a,
  .ember-b,
  .fx-mote,
  .fx-ring,
  .fx-breath {
    animation: none;
  }

  .fx-idle {
    opacity: 0.18;
    transform: none;
  }

  .witch-stage.is-leaving::after {
    animation: none;
  }
}