/* ===================================
   CONTACTS PAGE — ДЕКОР
   Тема: дом (адрес) / звонок (телефон) / письмо (email) / геометка-сердце (карта).
   Персональные, "человечные" мотивы для последней точки контакта на сайте.
   =================================== */

:root {
    --doodle-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='34' viewBox='0 0 36 34'%3E%3Cpath d='M4 16L18 4L32 16' stroke='%23EE7A5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M8 14V30H28V14' stroke='%23EE7A5D' stroke-width='2' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M15 30V21H21V30' stroke='%23EE7A5D' stroke-width='1.8' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    --doodle-ringing-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M10 6C10 6 14 4 16 8C17 10 15 11 15 13C15 17 19 21 23 21C25 21 26 19 28 20C32 22 30 26 30 26C28 29 22 29 16 23C10 17 7 8 10 6Z' fill='none' stroke='%2325A9B8' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M24 4C26 5 27 7 27 9' stroke='%2325A9B8' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3Cpath d='M28 2C31 4 32 7 32 10' stroke='%2325A9B8' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
    --doodle-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='30' viewBox='0 0 38 30'%3E%3Crect x='2' y='3' width='34' height='24' rx='3' fill='none' stroke='%2352CC9A' stroke-width='1.8'/%3E%3Cpath d='M3 5L19 18L35 5' stroke='%2352CC9A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    --doodle-pin-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='40' viewBox='0 0 30 40'%3E%3Cpath d='M15 2C7 2 2 8 2 15C2 24 15 37 15 37C15 37 28 24 28 15C28 8 23 2 15 2Z' fill='none' stroke='%23EE7A5D' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M15 19C15 19 10 15.5 10 12.5C10 10.5 11.5 9.5 13 10.2C14 10.6 15 12 15 12C15 12 16 10.6 17 10.2C18.5 9.5 20 10.5 20 12.5C20 15.5 15 19 15 19Z' fill='%23EE7A5D' fill-opacity='0.7'/%3E%3C/svg%3E");
    --doodle-underline-contacts: 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='%23EE7A5D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --doodle-dots-contacts: 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='rgba(37,169,184,0.25)'/%3E%3Ccircle cx='16' cy='6' r='2' fill='rgba(37,169,184,0.25)'/%3E%3Ccircle cx='28' cy='9' r='2' fill='rgba(37,169,184,0.25)'/%3E%3Ccircle cx='36' cy='5' r='2' fill='rgba(37,169,184,0.25)'/%3E%3C/svg%3E");
}

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

@keyframes contactsPhoneRing {
    0%, 100% { transform: rotate(0deg); }
    20%      { transform: rotate(-12deg); }
    40%      { transform: rotate(10deg); }
    60%      { transform: rotate(-8deg); }
    80%      { transform: rotate(4deg); }
}

@keyframes contactsHeartBeat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* ===================================
   1. HERO — рукописное подчёркивание заголовка + дом
   =================================== */
.page-hero__title {
    position: relative;
    display: inline-block;
}

.page-hero__title::after {
    content: '';
    display: block;
    width: 90px;
    height: 12px;
    margin-top: 6px;
    background: var(--doodle-underline-contacts) no-repeat left center / contain;
    opacity: .8;
}

.page-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 14%;
    right: 8%;
    width: 38px;
    height: 36px;
    background: var(--doodle-home) no-repeat center / contain;
    opacity: .5;
    animation: contactsDoodleFloat 8s ease-in-out infinite;
}

@media (max-width: 768px) {
    .page-hero::after { display: none; }
}

/* ===================================
   2. КАРТА — геометка-сердце поверх плашки с адресом
   =================================== */
.contacts-main__map-block {
    position: relative;
}

.contacts-main__map-block::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 26px;
    height: 34px;
    background: var(--doodle-pin-heart) no-repeat center / contain;
    opacity: .8;
    z-index: 2;
    pointer-events: none;
    animation: contactsHeartBeat 2.4s ease-in-out infinite;
}

@media (max-width: 480px) {
    .contacts-main__map-block::after {
        width: 20px;
        height: 26px;
        top: 10px;
        right: 10px;
    }
}

/* ===================================
   3. ФОН СЕКЦИИ КОНТАКТОВ — лёгкая точечная текстура
   =================================== */
.contacts-main {
    position: relative;
    overflow: hidden;
}

.contacts-main::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(238, 122, 93, .08) 1.4px, transparent 1.6px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 55% 40% at 50% 0%, black 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 55% 40% at 50% 0%, black 0%, transparent 75%);
    opacity: .45;
}

.contacts-main > .container {
    position: relative;
    z-index: 1;
}

/* ===================================
   4. ИКОНКА ТЕЛЕФОНА — "звонящая" анимация на ховере карточки
   =================================== */
.contacts-card:nth-child(2):hover .contacts-card__icon svg {
    animation: contactsPhoneRing 0.5s ease-in-out;
}

/* ===================================
   5. ФОРМА — конверт-стикер в углу блока формы
   =================================== */
.contacts-form-block {
    position: relative;
}

.contacts-form-block::after {
    content: '';
    position: absolute;
    top: -12px;
    right: 28px;
    width: 34px;
    height: 26px;
    background: var(--doodle-envelope) no-repeat center / contain;
    opacity: .85;
    transform: rotate(-6deg);
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 768px) {
    .contacts-form-block::after {
        width: 28px;
        height: 22px;
        right: 20px;
    }
}

/* ===================================
   6. ИНФО-КОЛОНКА ФОРМЫ — телефонная трубка сверху
   =================================== */
.contacts-form-info {
    position: relative;
}

.contacts-form-info__title {
    position: relative;
}

.contacts-form-info::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -4px;
    width: 30px;
    height: 30px;
    background: var(--doodle-ringing-phone) no-repeat center / contain;
    opacity: .4;
    pointer-events: none;
    z-index: 0;
    animation: contactsDoodleFloat 9s ease-in-out infinite reverse;
}

@media (max-width: 1024px) {
    .contacts-form-info::before { display: none; }
}

/* ===================================
   7. СОЦСЕТИ — водяной знак-точки
   =================================== */
.contacts-form-socials {
    position: relative;
}

.contacts-form-socials::after {
    content: '';
    position: absolute;
    top: -4px;
    right: 0;
    width: 36px;
    height: 14px;
    background: var(--doodle-dots-contacts) no-repeat center / contain;
    opacity: .6;
    pointer-events: none;
}

/* ===================================
   ACCESSIBILITY / PRINT
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .page-hero::after,
    .contacts-main__map-block::after,
    .contacts-form-info::before,
    .contacts-card:nth-child(2):hover .contacts-card__icon svg {
        animation: none;
    }
}

@media print {
    .page-hero::after,
    .page-hero__title::after,
    .contacts-main::before,
    .contacts-main__map-block::after,
    .contacts-form-block::after,
    .contacts-form-info::before,
    .contacts-form-socials::after {
        display: none !important;
    }
}

/* ===================================
   8. CTA-БЛОК СТРАНИЦЫ КОНТАКТОВ
   =================================== */
.contacts-cta {
    position: relative;
    background: var(--color-bg-blue);
    padding: var(--space-16) 0;
    overflow: hidden;
}

.contacts-cta__bg-blob {
    position: absolute;
    top: -30%;
    left: -10%;
    width: 60%;
    height: 160%;
    background: radial-gradient(ellipse at center, rgba(238, 122, 93, .14) 0%, rgba(82, 204, 154, .06) 50%, transparent 70%);
    filter: blur(60px);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morphBlob 20s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

.contacts-cta::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 16%;
    right: 10%;
    width: 34px;
    height: 32px;
    background: var(--doodle-home) no-repeat center / contain;
    opacity: .4;
    animation: contactsDoodleFloat 9s ease-in-out infinite;
}

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

.contacts-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.contacts-cta__text {
    flex: 1;
    min-width: 260px;
}

.contacts-cta__title {
    font-family: var(--font-body), serif;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

.contacts-cta__subtitle {
    font-size: var(--fz-md);
    color: var(--color-text-secondary);
    line-height: var(--lh-normal);
    max-width: 480px;
}

.contacts-cta__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .contacts-cta__inner { flex-direction: column; text-align: center; }
    .contacts-cta__subtitle { margin-inline: auto; }
    .contacts-cta__actions { justify-content: center; }
}

@media (max-width: 768px) {
    .contacts-cta { padding: var(--space-10) 0; }
    .contacts-cta::after { opacity: .2; }
    .contacts-cta__actions { flex-direction: column; width: 100%; }
    .contacts-cta__actions .btn { width: 100%; justify-content: center; }
}

/* ===================================
   ДОПОЛНЕНИЕ К CONTACTS-DECOR.CSS
   =================================== */

/* ===================================
   9. БЛОК ПРЕИМУЩЕСТВ ПЕРЕД ФОРМОЙ — список-флажки
   =================================== */
.contacts-benefits {
    max-width: 480px;
    margin-bottom: var(--space-8);
}

.contacts-benefits__title {
    font-family: var(--font-heading), sans-serif;
    font-size: var(--fz-base);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

/* ===================================
   10. ПРОГРЕСС "ЧТО ПРОИСХОДИТ ПОСЛЕ ОТПРАВКИ ФОРМЫ"
   =================================== */
.contacts-form-progress {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px dashed var(--color-border);
}

.contacts-form-progress__label {
    font-size: var(--fz-xs);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--space-4);
    text-align: center;
}