/* ===== Дышащий объект ===== */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: 'Nunito', system-ui, sans-serif; }

.breath-scene { position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 42%, #2e2d4e 0%, #21203c 55%, #17162e 100%); }

/* плавающие мотики света в пространстве */
.motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.motes span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,245,220,.5);
  box-shadow: 0 0 6px rgba(255,240,200,.6); animation: moteBreath 16s ease-in-out infinite; }
@keyframes moteBreath { /* вдох 0–25% тянутся к центру, замри 25–50%, выдох 50–75%, замри 75–100% */
  0% { transform: translate(0,0); opacity: .2; }
  25% { transform: translate(var(--mx,0), var(--my,0)); opacity: .7; }
  50% { transform: translate(var(--mx,0), var(--my,0)); opacity: .7; }
  75% { transform: translate(0,0); opacity: .2; }
  100% { transform: translate(0,0); opacity: .2; }
}

/* объект */
.breath-wrap { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.breath-obj { position: relative; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center;
  animation: bScale 16s ease-in-out infinite; }
@keyframes bScale { 0% { transform: scale(.84); } 25% { transform: scale(1.08); } 50% { transform: scale(1.08); } 75% { transform: scale(.84); } 100% { transform: scale(.84); } }

.halo { position: absolute; border-radius: 50%; filter: blur(14px); }
.halo.h1 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(214,190,255,.5), transparent 68%); animation: bHalo 16s ease-in-out infinite; }
.halo.h2 { width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,225,180,.55), transparent 66%); animation: bHalo 16s ease-in-out infinite; animation-delay: -.4s; }
@keyframes bHalo { 0% { opacity: .22; transform: scale(.78); } 25% { opacity: .7; transform: scale(1.3); } 50% { opacity: .7; transform: scale(1.3); } 75% { opacity: .2; transform: scale(.78); } 100% { opacity: .2; transform: scale(.78); } }

/* витражные грани света */
.facets { position: absolute; width: 200px; height: 200px; animation: facetSpin 80s linear infinite; }
.facets .pet { position: absolute; left: 50%; top: 50%; width: 56px; height: 130px; margin: -65px 0 0 -28px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; mix-blend-mode: screen; filter: blur(2px);
  animation: bFacet 16s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bFacet { 0% { opacity: .2; } 25% { opacity: .85; } 50% { opacity: .85; } 75% { opacity: .2; } 100% { opacity: .2; } }
.facets .pet:nth-child(1) { background: radial-gradient(circle at 50% 30%, rgba(247,217,106,.8), transparent 70%); transform: rotate(0deg); }
.facets .pet:nth-child(2) { background: radial-gradient(circle at 50% 30%, rgba(244,168,196,.8), transparent 70%); transform: rotate(60deg); }
.facets .pet:nth-child(3) { background: radial-gradient(circle at 50% 30%, rgba(143,207,159,.8), transparent 70%); transform: rotate(120deg); }
.facets .pet:nth-child(4) { background: radial-gradient(circle at 50% 30%, rgba(127,176,224,.8), transparent 70%); transform: rotate(180deg); }
.facets .pet:nth-child(5) { background: radial-gradient(circle at 50% 30%, rgba(181,143,216,.8), transparent 70%); transform: rotate(240deg); }
.facets .pet:nth-child(6) { background: radial-gradient(circle at 50% 30%, rgba(255,225,180,.8), transparent 70%); transform: rotate(300deg); }
@keyframes facetSpin { to { transform: rotate(360deg); } }

/* плотное ядро света */
.core { position: relative; width: 86px; height: 86px; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #fffdf5, #ffe6a8 45%, rgba(255,200,140,.4) 75%, transparent);
  box-shadow: 0 0 30px rgba(255,228,170,.8); animation: bCore 16s ease-in-out infinite; z-index: 3; }
@keyframes bCore {
  0% { transform: scale(.92); filter: brightness(1.3) saturate(1.2); }
  25% { transform: scale(1.02); filter: brightness(1) saturate(1); }
  50% { transform: scale(1.02); filter: brightness(1) saturate(1); }
  75% { transform: scale(.92); filter: brightness(1.35) saturate(1.25); }
  100% { transform: scale(.92); filter: brightness(1.3); } }

/* текст и управление */
.breath-text { position: absolute; left: 0; right: 0; bottom: 13%; z-index: 4; text-align: center; padding: 0 24px;
  color: rgba(255,255,255,.8); font-size: 1.05rem; letter-spacing: .3px; }
.breath-text .l1 { font-family: 'Comfortaa', sans-serif; font-size: 1.15rem; color: #fff; margin-bottom: 4px; }
.exit { position: fixed; top: 18px; left: 18px; z-index: 40; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(40,40,60,.42);
  text-decoration: none; font-size: 1.3rem; transition: background .2s; backdrop-filter: blur(3px); }
.exit:hover { background: rgba(40,40,60,.6); }

/* интро */
.intro { position: fixed; inset: 0; z-index: 20; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: center; align-items: safe center; justify-content: center; padding: 44px 26px;
  background: radial-gradient(120% 100% at 50% 32%, #3a3a60, #262540 55%, #1d1c34); transition: opacity 1.3s ease, visibility 1.3s; }
.intro.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.intro .i-inner { max-width: 540px; text-align: center; }
.intro .i-title { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.2rem); color: #fff; margin: 0 0 24px; }
.intro .i-text { color: rgba(255,255,255,.82); font-size: 1.06rem; line-height: 1.72; text-align: left; }
.intro .i-text p { margin: 0 0 16px; }
.intro .i-text .last { font-family: 'Comfortaa', sans-serif; color: #fff; font-size: 1.18rem; text-align: center; margin-top: 6px; }
.intro .i-btn { margin-top: 30px; border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 1.05rem;
  padding: 15px 40px; border-radius: 999px; color: #3a3656; background: rgba(255,255,255,.94); transition: all .25s; }
.intro .i-btn:hover { background: #fff; transform: translateY(-2px); }