/* ===================================
   PSYCHOTHERAPY-DECOR.CSS — декоративные паттерны
   Надстройка над psychotherapy.css / services.css.
   Тематика: спокойствие, забота, диалог, поддержка.
   Только фон/декор через ::before/::after — верстку не трогает
   =================================== */

:root {
    --psy-doodle-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='26' viewBox='0 0 30 26'%3E%3Cpath d='M15 23C15 23 2 14 2 7C2 2 8 0 12 4C13.5 5.5 15 8 15 8C15 8 16.5 5.5 18 4C22 0 28 2 28 7C28 14 15 23 15 23Z' fill='none' stroke='%2325A9B8' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
    --psy-doodle-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60'%3E%3Cpath d='M20 45C8 45 4 33 14 29C10 16 26 8 36 15C42 6 60 8 62 20C76 18 82 34 70 40C74 50 60 54 52 47C46 53 28 53 24 46Z' fill='none' stroke='%2352CC9A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --psy-doodle-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath d='M2 14Q12 2 22 14T42 14T62 14T82 14T102 14T122 14' fill='none' stroke='%2325A9B8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --psy-doodle-spiral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M25 25c0-6 5-8 9-4s2 11-5 11-11-8-7-15 15-10 20-2' fill='none' stroke='%23EE7A5D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    --psy-doodle-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16'%3E%3Ccircle cx='4' cy='8' r='2' fill='%2325A9B8'/%3E%3Ccircle cx='16' cy='6' r='2' fill='%2325A9B8'/%3E%3Ccircle cx='28' cy='9' r='2' fill='%2325A9B8'/%3E%3Ccircle cx='36' cy='5' r='2' fill='%2325A9B8'/%3E%3C/svg%3E");
    --psy-doodle-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='44' viewBox='0 0 34 44'%3E%3Cpath d='M17 42C6 32 4 18 17 2c13 16 11 30 0 40Z' fill='none' stroke='%2352CC9A' stroke-width='1.5'/%3E%3Cpath d='M17 42V10' stroke='%2352CC9A' stroke-width='1.2'/%3E%3C/svg%3E");
    --psy-doodle-bubble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath d='M4 6a4 4 0 014-4h30a4 4 0 014 4v16a4 4 0 01-4 4H16l-8 8v-8H8a4 4 0 01-4-4Z' fill='none' stroke='%2325A9B8' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
    --psy-doodle-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14' viewBox='0 0 90 14'%3E%3Cpath d='M2 9C12 2 18 12 28 6C38 0 44 12 54 6C64 0 72 12 82 6' fill='none' stroke='%2325A9B8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --psy-doodle-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40L0 20C100 0 200 40 300 20C400 0 500 40 600 20C700 0 800 40 900 20C1000 0 1100 40 1200 20L1200 40Z' fill='white'/%3E%3C/svg%3E");

    --psy-doodle-heart-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='26' viewBox='0 0 30 26'%3E%3Cpath d='M15 23C15 23 2 14 2 7C2 2 8 0 12 4C13.5 5.5 15 8 15 8C15 8 16.5 5.5 18 4C22 0 28 2 28 7C28 14 15 23 15 23Z' fill='none' stroke='rgba(37,169,184,0.22)' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
    --psy-doodle-check-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='30' viewBox='0 0 36 30'%3E%3Cpath d='M4 16L14 25L32 4' fill='none' stroke='rgba(82,204,154,0.3)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --psy-doodle-question-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='40' viewBox='0 0 26 40'%3E%3Cpath d='M6 12C6 5 12 2 17 5C22 8 21 15 16 18C13 20 13 22 13 25' stroke='rgba(37,169,184,0.28)' stroke-width='2.6' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='13' cy='33' r='2.4' fill='rgba(37,169,184,0.28)'/%3E%3C/svg%3E");
}

@keyframes psyDoodleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(6deg); }
}

@keyframes psyDoodleFloatReverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(8px) rotate(-8deg); }
}

@keyframes psyPulseSoft {
    0%, 100% { transform: scale(1); opacity: .5; }
    50%      { transform: scale(1.08); opacity: .7; }
}

/* ===================================
   HERO
   =================================== */
.psy-hero {
    position: relative;
    isolation: isolate;
}

.psy-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--psy-doodle-bubble), var(--psy-doodle-cloud), var(--psy-doodle-dots);
    background-repeat: no-repeat;
    background-position: 4% 22%, 90% 68%, 88% 12%;
    background-size: 56px 46px, 100px 66px, 60px 24px;
    opacity: .4;
}

.psy-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 12%;
    right: 8%;
    width: 40px;
    height: 34px;
    background: var(--psy-doodle-heart) no-repeat center / contain;
    opacity: .5;
    animation: psyDoodleFloat 8s ease-in-out infinite;
}

.psy-hero .container {
    position: relative;
    z-index: 1;
}

.psy-hero .service-tag:nth-child(odd)  { transform: rotate(-1.5deg); }
.psy-hero .service-tag:nth-child(even) { transform: rotate(1.2deg); }
.psy-hero .service-tag {
    display: inline-flex;
    transition: transform var(--transition-base, .3s), box-shadow var(--transition-base, .3s);
}
.psy-hero .service-tag:hover {
    transform: rotate(0deg) translateY(-2px);
}

.psy-hero .service-hero__image {
    outline: 2px dashed rgba(37, 169, 184, .35);
    outline-offset: 8px;
}

/* ===================================
   ВОЛНИСТЫЕ РАЗДЕЛИТЕЛИ
   =================================== */
.hero__divider {
    position: relative;
    overflow: hidden;
}

.hero__divider::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 200%;
    background: currentColor;
    -webkit-mask-image: var(--psy-doodle-wave-mask);
    mask-image: var(--psy-doodle-wave-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: .06;
    pointer-events: none;
}

/* ===================================
   ВВОДНАЯ СЕКЦИЯ
   =================================== */
.psy-intro {
    position: relative;
    isolation: isolate;
}

.psy-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(37, 169, 184, .12) 1.4px, transparent 1.6px);
    background-size: 26px 26px;
    opacity: .6;
}

.psy-intro > .container {
    position: relative;
    z-index: 1;
}

.section-title::after {
    content: '';
    display: block;
    width: 90px;
    height: 12px;
    margin-top: 10px;
    background: var(--psy-doodle-underline) no-repeat left center / contain;
}

.principle-box {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.principle-box::after {
    content: '';
    position: absolute;
    right: 4%;
    bottom: 6%;
    width: 42px;
    height: 36px;
    background: var(--psy-doodle-heart-w) no-repeat center / contain;
    opacity: .3;
    pointer-events: none;
    z-index: 0;
}

.feature-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.feature-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: var(--psy-doodle-dots) no-repeat center / contain;
    opacity: .3;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.16,1,.3,1);
}

.feature-card:hover::after {
    transform: scale(1.2);
}

/* ===================================
   АУДИТОРИИ
   =================================== */
.psy-audience--kids {
    position: relative;
    isolation: isolate;
}

.psy-audience--kids::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(37, 169, 184, .08) 1.4px, transparent 1.6px);
    background-size: 30px 30px;
    opacity: .7;
}

.psy-audience--kids > .container {
    position: relative;
    z-index: 1;
}

.psy-tag-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.psy-tag-card::after {
    content: '';
    position: absolute;
    right: 6%;
    bottom: 8%;
    width: 24px;
    height: 24px;
    background: var(--psy-doodle-check-w) no-repeat center / contain;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    z-index: 0;
}

.psy-tag-card:hover::after {
    opacity: .8;
    transform: scale(1);
}

/* Тёмная секция взрослых — звёздное небо + плавающие элементы */
.psy-audience--adults {
    position: relative;
    isolation: isolate;
}

.psy-audience--adults::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .18) 1px, transparent 1.4px);
    background-size: 44px 44px;
    opacity: .5;
}

.psy-audience--adults::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 10%;
    right: 6%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(82, 204, 154, .25), transparent 70%);
    animation: psyPulseSoft 6s ease-in-out infinite;
}

.psy-audience--adults > .container {
    position: relative;
    z-index: 1;
}

.psy-tag-card--dark::after {
    content: '';
    position: absolute;
    right: 6%;
    bottom: 8%;
    width: 22px;
    height: 22px;
    background: var(--psy-doodle-wave) no-repeat center / contain;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    z-index: 0;
}

.psy-tag-card--dark:hover::after {
    opacity: .5;
    transform: translateX(0);
}

/* ===================================
   ДВА ПУТИ
   =================================== */
.psy-paths {
    position: relative;
    isolation: isolate;
}

.psy-paths::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--psy-doodle-leaf), var(--psy-doodle-spiral);
    background-repeat: no-repeat;
    background-position: 4% 15%, 94% 75%;
    background-size: 34px 44px, 50px 50px;
    opacity: .35;
}

.psy-paths > .container {
    position: relative;
    z-index: 1;
}

.path-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.path-card--growth::after {
    content: '';
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 60px;
    height: 60px;
    background: var(--psy-doodle-leaf) no-repeat center / contain;
    opacity: .08;
    pointer-events: none;
    z-index: 0;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
}

.path-card--growth:hover::after {
    transform: scale(1.15) rotate(8deg);
}

.path-card--support::after {
    content: '';
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 56px;
    height: 56px;
    background: var(--psy-doodle-heart) no-repeat center / contain;
    opacity: .08;
    pointer-events: none;
    z-index: 0;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
}

.path-card--support:hover::after {
    transform: scale(1.15) rotate(-8deg);
}

.psy-family-block {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.psy-family-block::after {
    content: '';
    position: absolute;
    left: 5%;
    top: 12%;
    width: 30px;
    height: 26px;
    background: var(--psy-doodle-heart-w) no-repeat center / contain;
    opacity: .5;
    pointer-events: none;
    animation: psyDoodleFloatReverse 9s ease-in-out infinite;
}

/* ===================================
   ТАЙМЛАЙН ПРОЦЕССА
   =================================== */
.psy-process {
    position: relative;
    isolation: isolate;
}

.psy-process::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(37, 169, 184, .06) 31px 32px);
    opacity: .5;
}

.psy-timeline {
    position: relative;
    z-index: 1;
}

.psy-timeline__marker {
    position: relative;
}

.psy-timeline__marker::after {
    content: '';
    position: absolute;
    inset: -7px;
    border: 2px dashed rgba(37, 169, 184, .3);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.16,1,.3,1);
}

.psy-timeline__item:hover .psy-timeline__marker::after {
    transform: scale(1.1);
}

/* ===================================
   СПЕЦИАЛИСТ
   =================================== */
.psy-specialist {
    position: relative;
    isolation: isolate;
}

.psy-specialist::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--psy-doodle-dots), var(--psy-doodle-wave);
    background-repeat: no-repeat;
    background-position: 8% 20%, 85% 80%;
    background-size: 50px 20px, 120px 24px;
    opacity: .4;
}

.psy-specialist > .container {
    position: relative;
    z-index: 1;
}

.psy-specialist__icon {
    position: relative;
}

.psy-specialist__icon::after {
    content: '';
    position: absolute;
    inset: -10px;
    border: 2px dashed rgba(37, 169, 184, .3);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

/* ===================================
   FAQ
   =================================== */
.psy-faq {
    position: relative;
    isolation: isolate;
}

.psy-faq::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--psy-doodle-question-w), var(--psy-doodle-question-w), var(--psy-doodle-question-w);
    background-repeat: no-repeat;
    background-position: 6% 10%, 92% 40%, 10% 85%;
    background-size: 26px 40px, 22px 34px, 24px 36px;
    opacity: .6;
}

.psy-faq > .container {
    position: relative;
    z-index: 1;
}

.faq-item {
    position: relative;
    transition: transform .3s ease;
}

.faq-item[open] {
    transform: translateX(2px);
}

/* ===================================
   CTA
   =================================== */
.psy-cta {
    position: relative;
    isolation: isolate;
}

.psy-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--psy-doodle-heart), var(--psy-doodle-wave), var(--psy-doodle-dots);
    background-repeat: no-repeat;
    background-position: 6% 25%, 40% 88%, 88% 30%;
    background-size: 34px 30px, 140px 24px, 50px 20px;
    opacity: .4;
}

.psy-cta::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 15%;
    left: 8%;
    width: 44px;
    height: 44px;
    background: var(--psy-doodle-cloud) no-repeat center / contain;
    opacity: .35;
    animation: psyDoodleFloatReverse 9s ease-in-out infinite;
}

.psy-cta > .container {
    position: relative;
    z-index: 1;
}

/* ===================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ДЕКОРА
   =================================== */
@media (max-width: 768px) {
    .psy-hero::before,
    .psy-cta::before,
    .psy-faq::before,
    .psy-audience--adults::before {
        opacity: .22;
    }

    .psy-hero::after,
    .psy-cta::after,
    .psy-audience--adults::after {
        width: 32px;
        height: 32px;
    }

    .principle-box::after {
        opacity: .18;
        transform: scale(.8);
    }

    .psy-paths::before {
        opacity: .2;
    }
}

/* ===================================
   ACCESSIBILITY / PRINT
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .psy-hero::after,
    .psy-cta::after,
    .psy-audience--adults::after,
    .psy-family-block::after {
        animation: none;
    }
}

@media print {
    .psy-hero::before,
    .psy-hero::after,
    .psy-cta::before,
    .psy-cta::after,
    .psy-intro::before,
    .psy-audience--kids::before,
    .psy-audience--adults::before,
    .psy-audience--adults::after,
    .psy-paths::before,
    .psy-process::before,
    .psy-specialist::before,
    .psy-faq::before,
    .principle-box::after,
    .feature-card::after,
    .psy-tag-card::after,
    .psy-tag-card--dark::after,
    .path-card--growth::after,
    .path-card--support::after,
    .psy-family-block::after,
    .psy-timeline__marker::after,
    .psy-specialist__icon::after,
    .hero__divider::after {
        display: none !important;
    }
}