/* ============ 11 · CONTACT — финальный CTA ============ */

.section--contact {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(130px, 19vh, 230px);
  background:
    radial-gradient(ellipse 70% 55% at 50% 108%, rgba(227, 164, 41, .07), transparent 68%),
    linear-gradient(180deg, var(--bg-0) 0%, color-mix(in srgb, var(--bg-0), var(--bg-1) 50%) 60%, var(--bg-0) 100%);
}

/* ---------- атмосфера ---------- */

.section--contact .contact-atmo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.section--contact .contact-glow {
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(72vw, 980px);
  aspect-ratio: 1.6;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(227, 164, 41, .11) 0%, rgba(195, 74, 42, .045) 42%, transparent 70%);
  filter: blur(10px);
}

.section--contact .contact-rings {
  position: absolute;
  left: 50%;
  /* центр опущен в тон .contact-glow: верхние дуги уходят под текст,
     а не касаются лейбла и заголовка */
  top: 58%;
  width: min(120vw, 1240px);
  aspect-ratio: 1;
  /* margin-центрирование (не transform: его перезаписывает параллакс из main.js).
     max() = минус половина ширины min(120vw,1240px) на любом вьюпорте. */
  margin-left: max(-60vw, -620px);
  margin-top: max(-60vw, -620px);
  opacity: .8;
  /* fade верхних дуг: ни одна линия не пересекает лейбл и заголовок */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 26%, #000 44%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 26%, #000 44%);
}

.section--contact .contact-crocus {
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: clamp(340px, 44vw, 640px);
  height: auto;
  margin-left: clamp(-320px, -22vw, -170px);
  opacity: .11;
  /* мягкое растворение силуэта к краям, чтобы декор не резал композицию */
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 42%, #000 46%, transparent 96%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 42%, #000 46%, transparent 96%);
}

/* ---------- заголовок ---------- */

.section--contact .contact-head {
  margin-bottom: clamp(28px, 4vh, 44px);
}

.section--contact .contact-head .label {
  justify-content: center;
  margin-bottom: clamp(24px, 4vh, 40px);
}

.section--contact .contact-title {
  max-width: none;
  margin-inline: auto;
  font-size: clamp(3rem, 8.6vw, 7.75rem);
  line-height: 1.02;
}

/* компенсация свеса курсива перед прямым «?» */
.section--contact .contact-title em {
  margin-right: -0.07em;
}

.section--contact .contact-inner {
  position: relative;
}

.section--contact .contact-lead {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--ivory-70);
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  line-height: 1.7;
  text-wrap: balance;
}

/* ---------- mono-киккеры ---------- */

.section--contact .contact-kicker {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .8;
}

/* ---------- гигантский email ---------- */

.section--contact .contact-mail {
  margin-top: clamp(56px, 9vh, 104px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vh, 24px);
}

.section--contact .contact-email {
  position: relative;
  display: inline-block;
  max-width: 100%;
  font-family: 'Cormorant', serif;
  font-weight: 300;
  font-size: clamp(1.85rem, 5.4vw, 4.9rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  /* полновысотные цифры: «0» не путается со строчной «o» */
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  color: var(--ivory);
  text-decoration: none;
  padding-bottom: .14em;
  overflow-wrap: anywhere;
  transition: color .5s cubic-bezier(.16, 1, .3, 1);
}

.section--contact .contact-email::before,
.section--contact .contact-email::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}

.section--contact .contact-email::before {
  background: var(--line-gold);
}

.section--contact .contact-email::after {
  background: linear-gradient(90deg, #F6C45C 0%, #E3A429 45%, #A96B14 100%);
  transform: scaleX(0);
  /* wipe из центра к краям — в тон полностью центрированной композиции */
  transform-origin: center;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.section--contact .contact-email:hover {
  color: var(--gold-bright);
}

.section--contact .contact-email:hover::after {
  transform: scaleX(1);
}

/* ---------- телефон ---------- */

.section--contact .contact-meta {
  margin-top: clamp(48px, 7.5vh, 84px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.section--contact .contact-phone {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* тот же ритм kicker → значение, что у email */
  gap: clamp(16px, 2.4vh, 24px);
  font-family: 'Cormorant', serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  color: var(--ivory);
  text-decoration: none;
  padding-bottom: .3em;
  transition: color .5s cubic-bezier(.16, 1, .3, 1);
}

/* то же hairline-подчёркивание с градиентным wipe, что у email */
.section--contact .contact-phone::before,
.section--contact .contact-phone::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}

.section--contact .contact-phone::before {
  background: var(--line-gold);
}

.section--contact .contact-phone::after {
  background: linear-gradient(90deg, #F6C45C 0%, #E3A429 45%, #A96B14 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.section--contact .contact-phone:hover {
  color: var(--gold-bright);
}

.section--contact .contact-phone:hover::after {
  transform: scaleX(1);
}

/* ---------- адаптив ---------- */

@media (max-width: 768px) {
  .section--contact {
    padding-block: clamp(104px, 16vh, 150px);
  }

  .section--contact .contact-mail {
    margin-top: clamp(44px, 7vh, 64px);
  }

  .section--contact .contact-crocus {
    bottom: -4%;
    opacity: .06;
  }

  /* дуги колец не должны читаться как артефакт поверх текста */
  .section--contact .contact-rings {
    opacity: .3;
  }
}

@media (max-width: 480px) {
  /* нижний воздух ≈ верхнему: без оптического провала под телефоном */
  .section--contact {
    padding-block: clamp(104px, 16vh, 150px) clamp(72px, 11vh, 104px);
  }

  .section--contact .contact-meta {
    margin-top: 52px;
  }

  /* email никогда не упирается в края: >=10px воздуха на 320–480px,
     строка не ломается по <wbr> */
  .section--contact .contact-email {
    font-size: min(1.85rem, 6.8vw);
  }
}
