/*
  ЕДИНЫЙ НАБОР CSS-ИЛЛЮСТРАЦИЙ ДЛЯ 7 СТРАНИЦ СОСТОЯНИЙ.
  Выбор иллюстрации — атрибутом body[data-state]. Без картинок, SVG и JS.
  Значения: sleep | menopause | emotions | stress | weight | mind | body
*/
.state-visual { position: relative; min-height: 500px; overflow: hidden; border-radius: 44px; color: #fff; box-shadow: 0 18px 55px rgba(54,43,34,.08); isolation: isolate; }
.visual-grid, .visual-orb, .visual-line, .visual-mark { position: absolute; }
.visual-grid { inset: 0; opacity: .48; background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 70px 70px; }
.visual-copy { position: absolute; left: 46px; right: 46px; bottom: 42px; display: flex; flex-direction: column; }
.visual-copy strong { margin-bottom: 7px; font: 700 62px/1 Georgia, serif; letter-spacing: -.05em; }
.visual-copy span { max-width: 330px; font-size: 17px; line-height: 1.45; }
.visual-line { left: 46px; right: 46px; bottom: 155px; height: 1px; background: rgba(255,255,255,.22); }
.visual-mark { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 8px rgba(255,255,255,.1); }

/* 1. СОН: ночное небо, полумесяц, точка пробуждения */
body[data-state="sleep"] .state-visual { background: #22263d; }
body[data-state="sleep"] .visual-orb-a { top: 54px; right: 54px; width: 118px; height: 118px; border-radius: 50%; background: #f5dcb4; box-shadow: 0 0 60px rgba(245,220,180,.22); }
body[data-state="sleep"] .visual-orb-a:after { content: ""; position: absolute; top: -9px; left: 30px; width: 108px; height: 108px; border-radius: 50%; background: #22263d; }
body[data-state="sleep"] .visual-mark-a { left: 43%; bottom: 147px; background: #eb5b35; }
body[data-state="sleep"] .visual-copy strong { color: #f5dcb4; }

/* 2. МЕНОПАУЗА И ПРИЛИВЫ: тёплая волна проходит через прохладное поле */
body[data-state="menopause"] .state-visual { background: #33454a; }
body[data-state="menopause"] .visual-grid { opacity: .15; }
body[data-state="menopause"] .visual-orb-a { width: 360px; height: 360px; right: -90px; top: -60px; border-radius: 50%; background: radial-gradient(circle,#ffbc71 0 25%,#ef6547 26% 48%,rgba(239,101,71,.12) 49% 70%,transparent 71%); }
body[data-state="menopause"] .visual-orb-b { width: 190px; height: 190px; left: 35px; top: 95px; border: 22px solid rgba(192,229,220,.38); border-radius: 50%; }
body[data-state="menopause"] .visual-line { height: 12px; border-radius: 99px; background: linear-gradient(90deg,#b9d9d2,#f8b66c,#ef6547); }
body[data-state="menopause"] .visual-mark-a { right: 22%; bottom: 153px; background: #ffd3a3; }
body[data-state="menopause"] .visual-copy strong { color: #ffd3a3; }

/* 3. ЭМОЦИОНАЛЬНОЕ СОСТОЯНИЕ: напряжённые и спокойные дуги */
body[data-state="emotions"] .state-visual { background: #604e59; }
body[data-state="emotions"] .visual-grid { opacity: .12; }
body[data-state="emotions"] .visual-orb-a, body[data-state="emotions"] .visual-orb-b { border-radius: 50%; border-style: solid; background: transparent; }
body[data-state="emotions"] .visual-orb-a { width: 260px; height: 260px; right: 35px; top: 40px; border-width: 34px; border-color: #ef9278 transparent #ef9278 #ef9278; transform: rotate(35deg); }
body[data-state="emotions"] .visual-orb-b { width: 145px; height: 145px; right: 92px; top: 96px; border-width: 18px; border-color: #f5d8c8 #f5d8c8 transparent #f5d8c8; transform: rotate(-25deg); }
body[data-state="emotions"] .visual-line { background: linear-gradient(90deg,#ef9278 0 30%,rgba(255,255,255,.15) 30% 45%,#c9d6bd 45%); }
body[data-state="emotions"] .visual-mark-a { left: 46%; bottom: 147px; background: #c9d6bd; }
body[data-state="emotions"] .visual-copy strong { color: #f5d8c8; }

/* 4. ЭНЕРГИЯ И СТРЕСС: заряд постепенно возвращается */
body[data-state="stress"] .state-visual { background: #3c493b; }
body[data-state="stress"] .visual-grid { opacity: .17; }
body[data-state="stress"] .visual-orb-a { top: 65px; right: 65px; width: 210px; height: 106px; border: 9px solid #dce6c9; border-radius: 22px; }
body[data-state="stress"] .visual-orb-a:after { content: ""; position: absolute; right: -22px; top: 29px; width: 13px; height: 34px; border-radius: 0 7px 7px 0; background: #dce6c9; }
body[data-state="stress"] .visual-orb-b { top: 82px; right: 168px; width: 30px; height: 72px; border-radius: 9px; background: #ef8a61; box-shadow: 40px 0 #efaa68, 80px 0 #d3d8a8, 120px 0 #b7cca2; }
body[data-state="stress"] .visual-line { height: 8px; border-radius: 99px; background: linear-gradient(90deg,#ef8a61 0 28%,#b7cca2 28% 65%,rgba(255,255,255,.13) 65%); }
body[data-state="stress"] .visual-mark-a { left: 64%; bottom: 151px; background: #b7cca2; }
body[data-state="stress"] .visual-copy strong { color: #dce6c9; }

/* 5. ВЕС И ОБМЕН ВЕЩЕСТВ: баланс без весов и сантиметров */
body[data-state="weight"] .state-visual { background: #645346; }
body[data-state="weight"] .visual-grid { opacity: .14; }
body[data-state="weight"] .visual-orb-a { top: 58px; right: 66px; width: 225px; height: 225px; border: 28px solid #e8c99f; border-radius: 50%; }
body[data-state="weight"] .visual-orb-a:after { content: ""; position: absolute; inset: 29px; border-radius: 50%; border: 13px solid #9eb091; }
body[data-state="weight"] .visual-orb-b { top: 117px; right: 125px; width: 65px; height: 65px; border-radius: 50%; background: #ef7a56; }
body[data-state="weight"] .visual-line { height: 7px; background: linear-gradient(90deg,#9eb091 0 34%,#e8c99f 34% 71%,#ef7a56 71%); border-radius: 99px; }
body[data-state="weight"] .visual-mark-a { left: 52%; bottom: 151px; background: #e8c99f; }
body[data-state="weight"] .visual-copy strong { color: #f1ddc1; }

/* 6. ПАМЯТЬ И КОНЦЕНТРАЦИЯ: рассеянные точки собираются в линию */
body[data-state="mind"] .state-visual { background: #35454f; }
body[data-state="mind"] .visual-grid { opacity: .12; }
body[data-state="mind"] .visual-orb-a { inset: 55px 55px auto auto; width: 240px; height: 190px; background: radial-gradient(circle at 10% 20%,#f5c882 0 5px,transparent 6px), radial-gradient(circle at 42% 8%,#f5c882 0 7px,transparent 8px), radial-gradient(circle at 78% 32%,#f5c882 0 5px,transparent 6px), radial-gradient(circle at 20% 72%,#a7c3bb 0 6px,transparent 7px), radial-gradient(circle at 58% 62%,#a7c3bb 0 8px,transparent 9px), radial-gradient(circle at 88% 80%,#ef7a56 0 6px,transparent 7px); }
body[data-state="mind"] .visual-orb-b { right: 64px; top: 255px; width: 225px; height: 5px; border-radius: 99px; background: linear-gradient(90deg,transparent,#a7c3bb,#f5c882); }
body[data-state="mind"] .visual-line { background: linear-gradient(90deg,rgba(255,255,255,.12) 0 38%,#a7c3bb 38% 100%); }
body[data-state="mind"] .visual-mark-a { left: 38%; bottom: 147px; background: #a7c3bb; }
body[data-state="mind"] .visual-copy strong { color: #f5c882; }

/* 7. ТЕЛО И ДВИЖЕНИЕ: жёсткая геометрия переходит в мягкую дугу */
body[data-state="body"] .state-visual { background: #435247; }
body[data-state="body"] .visual-grid { opacity: .12; }
body[data-state="body"] .visual-orb-a { right: 78px; top: 62px; width: 220px; height: 220px; border-left: 34px solid #e0c79e; border-bottom: 34px solid #e0c79e; border-radius: 0 0 0 100%; transform: rotate(-45deg); }
body[data-state="body"] .visual-orb-b { right: 95px; top: 79px; width: 185px; height: 185px; border: 20px solid #9fb99b; border-color: #9fb99b #9fb99b transparent transparent; border-radius: 50%; transform: rotate(25deg); }
body[data-state="body"] .visual-line { height: 7px; border-radius: 99px; background: linear-gradient(90deg,#e0c79e 0 28%,#9fb99b 28% 74%,#ef7a56 74%); }
body[data-state="body"] .visual-mark-a { left: 74%; bottom: 151px; background: #ef7a56; }
body[data-state="body"] .visual-copy strong { color: #e0c79e; }

@media (max-width: 880px) { .state-visual { min-height: 420px; } }
@media (max-width: 560px) {
  .state-visual { min-height: 370px; border-radius: 32px; }
  .visual-copy { left: 28px; right: 28px; bottom: 30px; }
  .visual-copy strong { font-size: 50px; }
  .visual-line { left: 28px; right: 28px; bottom: 140px; }
  body[data-state] .visual-mark-a { bottom: 132px; }
  body[data-state="sleep"] .visual-orb-a { width: 90px; height: 90px; right: 34px; top: 40px; }
  body[data-state="sleep"] .visual-orb-a:after { width: 84px; height: 84px; left: 25px; }
  .visual-orb { transform: scale(.78); transform-origin: top right; }
}