/* ===== Комната тишины — практика 5 чувств ===== */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: 'Nunito', system-ui, sans-serif; }

.scene { position: fixed; inset: 0; overflow: hidden; transition: background 2.6s ease;
  background: radial-gradient(120% 100% at 50% 38%, #3b3a5e 0%, #2a2945 50%, #1f1e38 100%); }
.scene.s-start { background: radial-gradient(120% 100% at 50% 40%, #3b3a5e, #262540 55%, #1d1c34); }
.scene.s-see   { background: radial-gradient(120% 100% at 50% 38%, #5a5b86, #3e3d63 55%, #2c2b4c); }
.scene.s-hear  { background: radial-gradient(120% 100% at 50% 40%, #4f6486, #384a6b 55%, #283854); }
.scene.s-touch { background: radial-gradient(120% 100% at 50% 42%, #7a6485, #5a4a6b 55%, #3e3450); }
.scene.s-smell { background: radial-gradient(120% 100% at 50% 40%, #6a6a8e, #4e5274 55%, #383a58); }
.scene.s-taste { background: radial-gradient(120% 100% at 50% 42%, #b79a64, #8a7150 55%, #5e4d3a); }
.scene.s-end   { background: radial-gradient(120% 100% at 50% 40%, #e6c98a, #d2a86e 50%, #b88a58); }

/* декор-объекты (размыты на старте, фокусируются) */
.decor { position: absolute; inset: 0; filter: blur(var(--blur, 14px)); transition: filter 2.4s ease, opacity 2s ease; }
.decor > div { position: absolute; border-radius: 30px; opacity: .55; transition: box-shadow 1.5s ease; }
.lamp { left: 50%; top: 16%; width: 220px; height: 220px; transform: translateX(-50%); border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,224,150,.7), transparent 65%); opacity: .9 !important; }
.d-window { left: 12%; top: 26%; width: 130px; height: 180px; background: linear-gradient(160deg, rgba(200,220,255,.5), rgba(160,185,235,.25)); }
.d-plant { right: 13%; bottom: 8%; width: 120px; height: 200px; border-radius: 50% 50% 20px 20px !important;
  background: radial-gradient(circle at 50% 30%, rgba(120,190,130,.55), rgba(80,140,95,.2) 70%); }
.d-drape { right: 8%; top: 0; width: 90px; height: 320px; border-radius: 0 0 60px 60px !important;
  background: linear-gradient(180deg, rgba(230,170,190,.45), transparent); }
.scene.s-see .decor > div, .scene.s-hear .decor > div { animation: glowcycle 6s ease-in-out infinite; }
.lamp { animation-delay: 0s; } .d-window { animation-delay: 1.2s; } .d-plant { animation-delay: 2.4s; } .d-drape { animation-delay: 3.6s; }
@keyframes glowcycle { 0%,100% { box-shadow: 0 0 0 transparent; } 12% { box-shadow: 0 0 40px 8px rgba(255,245,210,.5); } }

/* центральный контент */
.center { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px; transition: transform .8s ease; }
.scene.s-hear .center { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.sense-icon { font-size: 2.6rem; margin-bottom: 14px; opacity: .9; transition: all .6s; min-height: 1em; }
.orbs { display: flex; gap: 12px; margin-bottom: 22px; min-height: 14px; }
.orbs span { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.85);
  box-shadow: 0 0 10px rgba(255,255,255,.7); animation: orb 3s ease-in-out infinite; }
@keyframes orb { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.prompt { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: clamp(1.4rem, 4.4vw, 2.3rem);
  color: #fff; margin: 0 0 14px; max-width: 600px; line-height: 1.4; text-shadow: 0 2px 20px rgba(0,0,0,.3); transition: color 1s; }
.scene.s-end .prompt { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.sub { color: rgba(255,255,255,.78); font-size: 1.05rem; max-width: 460px; margin: 0 0 30px; line-height: 1.5; min-height: 1.2em; }

.controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.t-btn { border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 1rem; padding: 14px 30px; border-radius: 999px;
  color: #fff; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); transition: all .25s; }
.t-btn:hover { background: rgba(255,255,255,.28); transform: translateY(-2px); }
.t-btn.solid { background: rgba(255,255,255,.92); color: #3a3656; }
.t-btn.solid:hover { background: #fff; }
.scene.s-end .t-btn.solid { color: #8a6a3a; }

/* индикатор чувств */
.senses-bar { position: absolute; bottom: 26px; left: 0; right: 0; z-index: 6; display: flex; gap: 16px; justify-content: center; }
.senses-bar span { font-size: 1.2rem; opacity: .3; transition: all .5s; filter: grayscale(1); }
.senses-bar span.on { opacity: 1; filter: none; transform: scale(1.3); }
.senses-bar span.past { opacity: .6; filter: none; }

.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(255,255,255,.26); }

/* эффекты */
.fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.ripple { position: absolute; left: 50%; top: 42%; border: 2px solid rgba(255,255,255,.4); border-radius: 50%;
  transform: translate(-50%,-50%); animation: ripple 5s ease-out forwards; }
@keyframes ripple { 0% { width: 40px; height: 40px; opacity: .6; } 100% { width: 150vmax; height: 150vmax; opacity: 0; } }
.smoke { position: absolute; bottom: -120px; width: 220px; height: 220px; border-radius: 50%; filter: blur(34px); opacity: 0;
  animation: smoke 13s ease-in forwards; }
@keyframes smoke { 0% { opacity: 0; transform: translateY(0) scale(.7); } 20% { opacity: .55; } 100% { opacity: 0; transform: translateY(-105vh) scale(1.6); } }
.fx-golden { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 2.5s ease;
  background: radial-gradient(circle at 50% 42%, rgba(255,225,150,.35), transparent 65%); }
.scene.s-taste .fx-golden { opacity: 1; }

/* ===== хаб выбора практик ===== */
.hub { position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex;
  align-items: center; align-items: safe center; justify-content: center; padding: 60px 24px;
  background: radial-gradient(120% 100% at 50% 30%, #3b3a5e, #262540 55%, #1d1c34); }
.hub-back { position: absolute; top: 18px; left: 18px; color: #fff; text-decoration: none; font-weight: 800; font-size: .92rem;
  padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.14); transition: background .2s, transform .18s; }
.hub-back:hover { background: rgba(255,255,255,.26); transform: translateX(-3px); }
.hub-inner { max-width: 640px; width: 100%; text-align: center; }
.hub-title { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.6rem); color: #fff; margin: 0 0 8px; }
.hub-sub { color: rgba(255,255,255,.72); font-size: 1.05rem; margin: 0 0 30px; }
.hub-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .hub-cards { grid-template-columns: 1fr; } }
.hub-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 30px 22px;
  transition: all .22s ease; backdrop-filter: blur(8px); }
.hub-card:hover { background: rgba(255,255,255,.16); transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.3); }
.hub-card .hc-ico { font-size: 2.6rem; }
.hub-card .hc-name { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 1.22rem; color: #fff; }
.hub-card .hc-desc { color: rgba(255,255,255,.7); font-size: .92rem; line-height: 1.5; }

/* экран-приветствие */
.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% 30%, #43426a, #2a2945 55%, #1d1c34);
  transition: opacity 1.3s ease, visibility 1.3s; }
.intro.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.intro .i-inner { max-width: 560px; 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); }

.warmth { position: fixed; z-index: 2; width: 60px; height: 60px; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255,210,150,.5), transparent 70%); animation: warmth 1s ease-out forwards; }
@keyframes warmth { 0% { opacity: .7; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.8); } }