/*
  Узоры на фоне и картинки первого экрана страницы психолога — общие для страницы (profile.html)
  и превью в конструкторе (admin-page.html). Цвета берутся из переменных темы (PageTheme.java / page-theme.js):
  --pattern, --glow, --soft, --scene1, --scene2, --veil, а своё фото — из --hero-img.
  Картинки нарисованы масками (mask): форма из SVG, цвет — из темы, поэтому подходят к любому фону и акценту.

  Разметка:  <… class="decor-dots scene-hills"> <div class="decor"></div> … <… class="hero-zone"><div class="scene"></div> … </…>
  Родитель .decor и .hero-zone должны создавать свой слой (position: relative; isolation: isolate).
*/
.decor, .scene { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.scene { overflow: hidden; }

/* ===== узор на фоне всей страницы ===== */
.decor-dots .decor { background-image: radial-gradient(var(--pattern) 1.4px, transparent 1.8px); background-size: 22px 22px; }
.decor-grid .decor {
    background-image: linear-gradient(var(--pattern) 1px, transparent 1px), linear-gradient(90deg, var(--pattern) 1px, transparent 1px);
    background-size: 34px 34px;
}
.decor-lines .decor { background-image: repeating-linear-gradient(135deg, var(--pattern) 0 1px, transparent 1px 16px); }
.decor-circles .decor {
    background-image: radial-gradient(circle, transparent 15px, var(--pattern) 15.5px 16.8px, transparent 17.3px);
    background-size: 52px 52px;
}
.decor-waves .decor {
    background-color: var(--pattern);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='36'><path d='M0 18Q15 6 30 18T60 18T90 18T120 18' fill='none' stroke='black' stroke-width='1.6'/></svg>") 0 0 / 120px 36px repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='36'><path d='M0 18Q15 6 30 18T60 18T90 18T120 18' fill='none' stroke='black' stroke-width='1.6'/></svg>") 0 0 / 120px 36px repeat;
}
.decor-leaves .decor {
    background-color: var(--pattern);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><path d='M14 40C14 24 26 12 42 10 42 26 30 38 14 40Z M14 40 34 20'/><path d='M60 84C56 70 62 56 76 50 80 64 74 78 60 84Z M60 84 72 60'/></svg>") 0 0 / 90px 90px repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><path d='M14 40C14 24 26 12 42 10 42 26 30 38 14 40Z M14 40 34 20'/><path d='M60 84C56 70 62 56 76 50 80 64 74 78 60 84Z M60 84 72 60'/></svg>") 0 0 / 90px 90px repeat;
}
.decor-glow .decor {
    background:
        radial-gradient(40% 900px at 10% 0, var(--glow), transparent 70%),
        radial-gradient(36% 800px at 95% 700px, var(--soft), transparent 70%),
        radial-gradient(42% 900px at 30% 100%, var(--glow), transparent 70%);
    opacity: .85;
}

/* ===== картинка первого экрана ===== */
.scene::before, .scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; }

/* холмы: два слоя — дальний светлее, ближний насыщеннее */
.scene-hills .scene::before, .scene-sun .scene::after { height: 30%; background: var(--scene2);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 210C300 140 560 200 820 210S1220 160 1440 190V320H0Z'/></svg>") bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 210C300 140 560 200 820 210S1220 160 1440 190V320H0Z'/></svg>") bottom / 100% 100% no-repeat;
    z-index: 1; }
.scene-hills .scene::after { height: 46%; background: var(--scene1);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 150C240 60 480 70 720 130S1200 90 1440 50V320H0Z'/></svg>") bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 150C240 60 480 70 720 130S1200 90 1440 50V320H0Z'/></svg>") bottom / 100% 100% no-repeat; }

/* море: две волны */
.scene-sea .scene::before { height: 40%; background: var(--scene1);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 170Q90 130 180 170T360 170T540 170T720 170T900 170T1080 170T1260 170T1440 170V320H0Z'/></svg>") bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 170Q90 130 180 170T360 170T540 170T720 170T900 170T1080 170T1260 170T1440 170V320H0Z'/></svg>") bottom / 100% 100% no-repeat; }
.scene-sea .scene::after { height: 26%; background: var(--scene2);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 200Q120 150 240 200T480 200T720 200T960 200T1200 200T1440 200V320H0Z'/></svg>") bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 200Q120 150 240 200T480 200T720 200T960 200T1200 200T1440 200V320H0Z'/></svg>") bottom / 100% 100% no-repeat; }

/* горы */
.scene-mountains .scene::before { height: 50%; background: var(--scene1);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 220L160 110L300 190L500 40L690 180L860 90L1050 200L1240 70L1440 180V320H0Z'/></svg>") bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 220L160 110L300 190L500 40L690 180L860 90L1050 200L1240 70L1440 180V320H0Z'/></svg>") bottom / 100% 100% no-repeat; }
.scene-mountains .scene::after { height: 30%; background: var(--scene2);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 260L220 170L400 240L620 150L830 250L1030 190L1250 245L1440 200V320H0Z'/></svg>") bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 260L220 170L400 240L620 150L830 250L1030 190L1250 245L1440 200V320H0Z'/></svg>") bottom / 100% 100% no-repeat; }

/* солнце над холмом (холм — общий с «Холмами» выше) */
.scene-sun .scene::before { left: auto; bottom: auto; top: 10%; right: 7%; width: 26%; max-width: 320px; aspect-ratio: 1;
    border-radius: 50%; background: radial-gradient(circle, var(--scene2) 0 58%, var(--scene1) 59% 100%); }

/* ветка в углу и отражённая — в противоположном */
.scene-branch .scene::before, .scene-branch .scene::after {
    left: auto; bottom: auto; top: 0; right: 0; width: 34%; max-width: 380px; aspect-ratio: 1; background: var(--scene2);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><path d='M296 4C230 60 170 130 96 296' fill='none' stroke='black' stroke-width='4'/><ellipse cx='236' cy='30' rx='30' ry='11' transform='rotate(-30 236 30)'/><ellipse cx='252' cy='86' rx='30' ry='11' transform='rotate(25 252 86)'/><ellipse cx='188' cy='84' rx='30' ry='11' transform='rotate(-45 188 84)'/><ellipse cx='206' cy='136' rx='30' ry='11' transform='rotate(20 206 136)'/><ellipse cx='146' cy='132' rx='30' ry='11' transform='rotate(-55 146 132)'/><ellipse cx='168' cy='186' rx='30' ry='11' transform='rotate(15 168 186)'/><ellipse cx='112' cy='182' rx='30' ry='11' transform='rotate(-60 112 182)'/><ellipse cx='134' cy='238' rx='30' ry='11' transform='rotate(10 134 238)'/></svg>") top right / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><path d='M296 4C230 60 170 130 96 296' fill='none' stroke='black' stroke-width='4'/><ellipse cx='236' cy='30' rx='30' ry='11' transform='rotate(-30 236 30)'/><ellipse cx='252' cy='86' rx='30' ry='11' transform='rotate(25 252 86)'/><ellipse cx='188' cy='84' rx='30' ry='11' transform='rotate(-45 188 84)'/><ellipse cx='206' cy='136' rx='30' ry='11' transform='rotate(20 206 136)'/><ellipse cx='146' cy='132' rx='30' ry='11' transform='rotate(-55 146 132)'/><ellipse cx='168' cy='186' rx='30' ry='11' transform='rotate(15 168 186)'/><ellipse cx='112' cy='182' rx='30' ry='11' transform='rotate(-60 112 182)'/><ellipse cx='134' cy='238' rx='30' ry='11' transform='rotate(10 134 238)'/></svg>") top right / contain no-repeat;
}
.scene-branch .scene::after { top: auto; right: auto; bottom: 0; left: 0; width: 24%; transform: scale(-1, -1); background: var(--scene1); }

/* своё фото: под вуалью цвета фона, чтобы текст читался */
.scene-photo .scene { background-image: linear-gradient(var(--veil), var(--veil)), var(--hero-img, none); background-size: cover; background-position: center; }

/* ===== маленькие образцы для кнопок конструктора ===== */
.decor-sample { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); }
/* свечение рассчитано на всю страницу (размеры в px) — в маленьком образце то же, но в долях */
.decor-sample.decor-glow .decor {
    background: radial-gradient(70% 90% at 15% 10%, var(--glow), transparent 70%), radial-gradient(70% 90% at 90% 95%, var(--soft), transparent 70%);
}