/* ===================================
   BAR-DECOR.CSS — декоративные паттерны для барокамеры
   Тема: кислород, давление, капсула, иллюминатор
   Надстройка над bar.css / services.css, ничего не переопределяет,
   только добавляет фоновые декорации (::before/::after, background)
   =================================== */

:root {
    /* Пузырьки разных размеров */
    --bar-doodle-bubble-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='26' fill='none' stroke='%2325A9B8' stroke-width='1.6' stroke-opacity='0.3'/%3E%3Ccircle cx='22' cy='22' r='5' fill='%2325A9B8' fill-opacity='0.18'/%3E%3C/svg%3E");
    --bar-doodle-bubble-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='none' stroke='%2352CC9A' stroke-width='1.6' stroke-opacity='0.3'/%3E%3C/svg%3E");

    /* Манометр — дуга со шкалой */
    --bar-doodle-gauge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Ccircle cx='35' cy='35' r='30' fill='none' stroke='%23EE7A5D' stroke-width='1.6' stroke-opacity='0.28'/%3E%3Cline x1='35' y1='35' x2='50' y2='20' stroke='%23EE7A5D' stroke-width='2' stroke-linecap='round' stroke-opacity='0.28'/%3E%3Ccircle cx='35' cy='35' r='3' fill='%23EE7A5D' fill-opacity='0.28'/%3E%3C/svg%3E");

    /* Капсула-иллюминатор */
    --bar-doodle-capsule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='50' viewBox='0 0 90 50'%3E%3Crect x='4' y='9' width='82' height='32' rx='16' fill='none' stroke='%2325A9B8' stroke-width='1.6' stroke-opacity='0.28'/%3E%3Ccircle cx='45' cy='25' r='8' fill='none' stroke='%2325A9B8' stroke-width='1.4' stroke-opacity='0.28'/%3E%3C/svg%3E");

    /* Волнистая линия давления (синусоида) */
    --bar-doodle-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='26' viewBox='0 0 130 26'%3E%3Cpath d='M2 13Q15 2 28 13T54 13T80 13T106 13T132 13' fill='none' stroke='%2325A9B8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

    /* Точки-пузырьки для россыпи */
    --bar-doodle-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='18' viewBox='0 0 44 18'%3E%3Ccircle cx='4' cy='9' r='2.4' fill='%2352CC9A' fill-opacity='0.4'/%3E%3Ccircle cx='18' cy='6' r='1.8' fill='%2352CC9A' fill-opacity='0.4'/%3E%3Ccircle cx='30' cy='11' r='2.2' fill='%2352CC9A' fill-opacity='0.4'/%3E%3Ccircle cx='40' cy='5' r='1.6' fill='%2352CC9A' fill-opacity='0.4'/%3E%3C/svg%3E");

    /* Крестик-плюс (медицина/кислород) */
    --bar-doodle-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 4v20M4 14h20' stroke='%23EE7A5D' stroke-width='2.6' stroke-linecap='round' stroke-opacity='0.3'/%3E%3C/svg%3E");

    /* Молекула O2 — два кружка, связанные линией */
    --bar-doodle-o2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Ccircle cx='16' cy='15' r='10' fill='none' stroke='%2325A9B8' stroke-width='1.8' stroke-opacity='0.32'/%3E%3Ccircle cx='44' cy='15' r='10' fill='none' stroke='%2325A9B8' stroke-width='1.8' stroke-opacity='0.32'/%3E%3Cline x1='26' y1='15' x2='34' y2='15' stroke='%2325A9B8' stroke-width='1.8' stroke-opacity='0.32'/%3E%3C/svg%3E");

    /* Волнистая маска для разделителей (капсульная, мягче чем "wave" у bak) */
    --bar-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 24C80 8 160 36 240 24C320 8 400 36 480 24C560 8 640 36 720 24C800 8 880 36 960 24C1040 8 1120 36 1200 24L1200 40Z' fill='white'/%3E%3C/svg%3E");

    /* Приглушённые водяные варианты для карточек */
    --bar-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.35)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --bar-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");
    --bar-doodle-exclaim-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='40' viewBox='0 0 24 40'%3E%3Cpath d='M12 3C10 14 11 20 12 26' stroke='rgba(220,38,38,0.28)' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='12' cy='34' r='2.4' fill='rgba(220,38,38,0.28)'/%3E%3C/svg%3E");
    --bar-doodle-bubble-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='rgba(82,204,154,0.28)' stroke-width='1.6'/%3E%3C/svg%3E");
}

@keyframes barDoodleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(5deg); }
}

@keyframes barDoodleFloatReverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(10px) rotate(-7deg); }
}

@keyframes barDoodleDrift {
    0%   { transform: translateX(0) translateY(0); }
    50%  { transform: translateX(6px) translateY(-8px); }
    100% { transform: translateX(0) translateY(0); }
}

/* ===================================
   HERO
   =================================== */
.bar-hero {
    position: relative;
    isolation: isolate;
}

.bar-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--bar-doodle-capsule), var(--bar-doodle-o2), var(--bar-doodle-dots);
    background-repeat: no-repeat;
    background-position: 3% 20%, 90% 66%, 86% 12%;
    background-size: 130px 72px, 56px 28px, 48px 20px;
    opacity: .4;
}

.bar-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 8%;
    right: 10%;
    width: 46px;
    height: 46px;
    background: var(--bar-doodle-bubble-lg) no-repeat center / contain;
    opacity: .5;
    animation: barDoodleFloat 9s ease-in-out infinite;
}

.bar-hero .container {
    position: relative;
    z-index: 1;
}

/* стикеры-теги — как капли/пузырьки, слегка вкривь */
.service-tag:nth-child(odd)  { transform: rotate(-1.2deg); }
.service-tag:nth-child(even) { transform: rotate(1deg); }
.service-tag {
    display: inline-flex;
    transition: transform var(--transition-base, .3s), box-shadow var(--transition-base, .3s);
}
.service-tag:hover {
    transform: rotate(0deg) translateY(-2px);
}

/* круглая рамка-иллюминатор вокруг фото */
.service-hero__image {
    outline: 2px dashed rgba(37, 169, 184, .32);
    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(--bar-doodle-wave-mask);
    mask-image: var(--bar-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;
}

/* ===================================
   БЛОК "СУТЬ МЕТОДА"
   =================================== */
.bar-about {
    position: relative;
    isolation: isolate;
}

.bar-about::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: .55;
}

.bar-about > .container {
    position: relative;
    z-index: 1;
}

.section-title {
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 90px;
    height: 14px;
    margin-top: 10px;
    background: var(--bar-doodle-wave) no-repeat left center / contain;
    opacity: .8;
}

/* водяной знак молекулы O2 на карточке "как это работает" */
.principle-box {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.principle-box::after {
    content: '';
    position: absolute;
    right: 3%;
    bottom: 8%;
    width: 60px;
    height: 30px;
    background: var(--bar-doodle-o2) no-repeat center / contain;
    opacity: .14;
    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: 24px;
    height: 24px;
    background: var(--bar-doodle-bubble-sm) no-repeat center / contain;
    opacity: .3;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.16,1,.3,1);
}

.feature-card:hover::after {
    transform: translateY(-4px) scale(1.15);
}

/* ===================================
   ДИАГРАММА ЭТАПОВ ПРОЦЕДУРЫ (bar-loop)
   =================================== */
.bar-loop {
    position: relative;
    isolation: isolate;
}

.bar-loop::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, .1) 31px 32px);
    opacity: .45;
}

.bar-loop__title,
.bar-loop__subtitle,
.bar-loop__diagram,
.bar-loop__return {
    position: relative;
    z-index: 1;
}

/* пунктирное кольцо-иллюминатор за иконкой узла */
.bar-loop__node-icon {
    position: relative;
}

.bar-loop__node-icon::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px dashed rgba(37, 169, 184, .32);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

.bar-loop__node:nth-child(4n+1) .bar-loop__node-icon::after { transform: rotate(3deg); }
.bar-loop__node:nth-child(4n+3) .bar-loop__node-icon::after { transform: rotate(-5deg); }

/* стрелки — пунктир вместо гладкой линии (движение давления) */
.bar-loop__arrow path {
    stroke-dasharray: 4 3;
}

.bar-note {
    position: relative;
    overflow: hidden;
}

.bar-note::after {
    content: '';
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 34px;
    background: var(--bar-doodle-exclaim-w) no-repeat center / contain;
    pointer-events: none;
}

/* ===================================
   ПОКАЗАНИЯ
   =================================== */
.service-indications {
    position: relative;
    isolation: isolate;
}

.service-indications::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 6%;
    left: 4%;
    width: 30px;
    height: 30px;
    background: var(--bar-doodle-bubble-sm) no-repeat center / contain;
    opacity: .35;
    animation: barDoodleDrift 10s ease-in-out infinite;
}

.service-indications > .container {
    position: relative;
    z-index: 1;
}

.indication-item {
    position: relative;
}

.indication-item__number {
    position: relative;
}

.indication-item__number::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px dashed rgba(37, 169, 184, .32);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

/* визуальная панель с капсулой — украшаем плавающими пузырьками */
.bar-visual-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--bar-doodle-gauge), var(--bar-doodle-dots);
    background-repeat: no-repeat;
    background-position: 88% 82%, 10% 10%;
    background-size: 46px 46px, 44px 18px;
    opacity: .35;
}

.bar-visual-panel::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 8%;
    right: 12%;
    width: 26px;
    height: 26px;
    background: var(--bar-doodle-bubble-sm) no-repeat center / contain;
    opacity: .5;
    animation: barDoodleFloatReverse 8s ease-in-out infinite;
}

/* группы направлений для взрослых — маленький плюсик-водяной знак */
.bar-adults__group {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.bar-adults__group::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 6px;
    width: 16px;
    height: 16px;
    background: var(--bar-doodle-plus) no-repeat center / contain;
    opacity: .35;
    pointer-events: none;
}

/* противопоказания — водяной знак восклицательного знака */
.indications-contraindications {
    position: relative;
    overflow: hidden;
}

.indications-contraindications::after {
    content: '';
    position: absolute;
    right: 5%;
    top: 12%;
    width: 22px;
    height: 36px;
    background: var(--bar-doodle-exclaim-w) no-repeat center / contain;
    pointer-events: none;
}

/* ===================================
   РЕЗУЛЬТАТЫ
   =================================== */
.service-results {
    position: relative;
    isolation: isolate;
}

.service-results::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    bottom: 8%;
    right: 5%;
    width: 40px;
    height: 40px;
    background: var(--bar-doodle-bubble-lg) no-repeat center / contain;
    opacity: .3;
    animation: barDoodleFloat 11s ease-in-out infinite;
}

.service-results > .container {
    position: relative;
    z-index: 1;
}

.result-item {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}

.result-item::after {
    content: '';
    position: absolute;
    right: 6%;
    top: 8%;
    width: 30px;
    height: 26px;
    background: var(--bar-doodle-check-w) no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
    opacity: .9;
}

.result-item:hover {
    transform: translateY(-3px);
}

.results-note {
    position: relative;
    overflow: hidden;
}

.results-note::after {
    content: '';
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 20px;
    background: var(--bar-doodle-wave) no-repeat center / contain;
    opacity: .35;
    pointer-events: none;
}

/* ===================================
   FAQ
   =================================== */
.service-faq {
    position: relative;
    isolation: isolate;
}

.service-faq::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--bar-doodle-question-w), var(--bar-doodle-question-w), var(--bar-doodle-question-w);
    background-repeat: no-repeat;
    background-position: 6% 12%, 92% 42%, 10% 86%;
    background-size: 26px 40px, 22px 34px, 24px 36px;
    opacity: .55;
}

.service-faq > .container {
    position: relative;
    z-index: 1;
}

.faq-item {
    position: relative;
    transition: transform .3s ease;
}

.faq-item[open] {
    transform: translateX(2px);
}

/* ===================================
   CTA
   =================================== */
.doctors-cta {
    position: relative;
    isolation: isolate;
}

.doctors-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--bar-doodle-o2), var(--bar-doodle-wave), var(--bar-doodle-dots);
    background-repeat: no-repeat;
    background-position: 6% 22%, 40% 88%, 88% 28%;
    background-size: 58px 28px, 140px 26px, 44px 18px;
    opacity: .4;
}

.doctors-cta::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 14%;
    left: 8%;
    width: 42px;
    height: 42px;
    background: var(--bar-doodle-bubble-lg) no-repeat center / contain;
    opacity: .38;
    animation: barDoodleFloatReverse 9s ease-in-out infinite;
}

.doctors-cta > .container {
    position: relative;
    z-index: 1;
}

/* ===================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ДЕКОРА
   =================================== */
@media (max-width: 768px) {
    .bar-hero::before,
    .doctors-cta::before,
    .service-faq::after,
    .bar-visual-panel::before {
        opacity: .2;
    }

    .bar-hero::after,
    .doctors-cta::after,
    .bar-visual-panel::after,
    .service-indications::after,
    .service-results::after {
        width: 30px;
        height: 30px;
    }

    .principle-box::after,
    .indications-contraindications::after {
        opacity: .08;
        transform: scale(.8);
    }
}

/* ===================================
   ACCESSIBILITY / PRINT
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .bar-hero::after,
    .doctors-cta::after,
    .bar-visual-panel::after,
    .service-indications::after,
    .service-results::after,
    .bar-hero__bubbles span,
    .bar-visual-panel__bubbles span {
        animation: none;
    }
}

@media print {
    .bar-hero::before,
    .bar-hero::after,
    .doctors-cta::before,
    .doctors-cta::after,
    .bar-about::before,
    .service-indications::after,
    .service-results::after,
    .service-faq::after,
    .bar-visual-panel::before,
    .bar-visual-panel::after,
    .principle-box::after,
    .feature-card::after,
    .result-item::after,
    .indications-contraindications::after,
    .bar-note::after,
    .hero__divider::after,
    .bar-hero__bubbles,
    .bar-visual-panel__bubbles,
    .bar-adults__group::after {
        display: none !important;
    }
}