/* V5 — cinematic chapters continuing the hero atmosphere */

:root { --ambient-shift: 0px; }

body { background: #e9f0ec; }
main, .site-footer { position: relative; z-index: 2; }

.page-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-atmosphere__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(22px);
  opacity: .38;
  will-change: transform;
}
.page-atmosphere__orb--mint {
  width: min(52vw, 760px);
  height: min(52vw, 760px);
  left: -18vw;
  top: calc(28vh + var(--ambient-shift));
  background: radial-gradient(circle, rgba(84,197,183,.42), rgba(169,225,217,.08) 58%, transparent 72%);
  animation: ambient-breathe 16s ease-in-out infinite alternate;
}
.page-atmosphere__orb--coral {
  width: min(46vw, 680px);
  height: min(46vw, 680px);
  right: -16vw;
  top: calc(128vh - var(--ambient-shift));
  background: radial-gradient(circle, rgba(255,115,86,.25), rgba(246,207,195,.08) 56%, transparent 72%);
  animation: ambient-breathe 20s ease-in-out -6s infinite alternate-reverse;
}
.page-atmosphere__river {
  position: absolute;
  left: 54%;
  top: calc(70vh - var(--ambient-shift));
  width: 18vw;
  height: 270vh;
  border: 1px solid rgba(44,164,157,.14);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(169,225,217,.035),
    0 0 90px rgba(84,197,183,.13),
    inset 0 0 80px rgba(255,255,255,.2);
  transform: rotate(22deg);
  opacity: .72;
}
@keyframes ambient-breathe {
  from { transform: translate3d(-2%, -2%, 0) scale(.94); }
  to { transform: translate3d(4%, 5%, 0) scale(1.08); }
}

.section {
  position: relative;
  z-index: 1;
  margin: 28px 12px;
  overflow: hidden;
  border: 1px solid rgba(8,40,50,.07);
  border-radius: 44px;
  background: rgba(247,249,246,.9);
  box-shadow: 0 26px 80px rgba(8,40,50,.08);
  isolation: isolate;
}
.section > .container { position: relative; z-index: 2; }
.section::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169,225,217,.2), transparent 66%);
  pointer-events: none;
}

#services {
  margin-top: 30px;
  background:
    radial-gradient(620px 360px at 94% 8%, rgba(215,241,154,.2), transparent 68%),
    radial-gradient(520px 320px at 2% 88%, rgba(169,225,217,.2), transparent 70%),
    rgba(248,250,247,.94);
}
#services::before { right: -220px; bottom: -260px; }
.service-card { box-shadow: 0 18px 48px rgba(8,40,50,.07); }
.service-card:hover { box-shadow: 0 28px 72px rgba(8,40,50,.14); }

[aria-labelledby="why-h"] {
  min-height: 520px;
  display: flex;
  align-items: center;
  color: #effbfa;
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(90deg, rgba(6,31,41,.97) 0%, rgba(6,31,41,.87) 52%, rgba(6,31,41,.5) 100%),
    url("../img/hero-art-v3.png") center 56% / cover no-repeat;
  box-shadow: 0 36px 100px rgba(6,31,41,.2);
}
[aria-labelledby="why-h"]::before {
  right: -80px;
  top: -160px;
  background: radial-gradient(circle, rgba(101,228,208,.22), transparent 68%);
}
[aria-labelledby="why-h"] h2,
[aria-labelledby="why-h"] p { color: inherit; }
[aria-labelledby="why-h"] .lead { color: var(--v2-lime); }
[aria-labelledby="why-h"] .section-number { color: var(--v2-coral); }

#advantages {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(230,242,237,.94)),
    #f7faf7;
}
#advantages::before { left: -180px; top: -210px; }
#advantages .stat {
  border: 1px solid rgba(8,40,50,.07);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 54px rgba(8,40,50,.07);
}
#advantages .callout {
  border-color: rgba(8,40,50,.07);
  background: linear-gradient(120deg, rgba(215,241,154,.34), rgba(255,255,255,.78));
}

#steps {
  color: #ecf8f7;
  border-color: rgba(255,255,255,.1);
  background:
    radial-gradient(650px 430px at 90% 0%, rgba(84,197,183,.22), transparent 70%),
    linear-gradient(145deg, #061f29, #0b3a43 62%, #092b34);
  box-shadow: 0 38px 100px rgba(6,31,41,.2);
}
#steps::before {
  right: -90px;
  bottom: -120px;
  width: min(760px, 64vw);
  height: 760px;
  border-radius: 0;
  background: url("../img/hero-art-v3.png") 68% center / cover no-repeat;
  opacity: .09;
  filter: saturate(.9) contrast(1.08);
}
#steps h2,
#steps h3,
#steps p { color: inherit; }
#steps .timeline__item {
  padding: 28px 28px 28px 78px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 24px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
#steps .timeline__item:hover {
  color: #fff;
  border-color: rgba(101,228,208,.34);
  background: rgba(255,255,255,.09);
}
#steps .timeline__number { top: 28px; left: 22px; background: linear-gradient(145deg, #ff7356, #ff9a7f); }
#steps .timeline__item::after { left: 43px; top: 74px; background: linear-gradient(#ff8d72, rgba(101,228,208,.28)); }
#steps .callout {
  color: #dcebea;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}

[aria-labelledby="stay-h"] {
  background:
    radial-gradient(520px 330px at 96% 12%, rgba(255,115,86,.15), transparent 68%),
    linear-gradient(135deg, #e9f6f1, #f8faf5 54%, #eef2df);
}
[aria-labelledby="stay-h"]::before { left: -160px; bottom: -260px; }
.photos-pending [aria-labelledby="stay-h"] .photo {
  box-shadow: 0 22px 60px rgba(8,40,50,.11);
  transition: transform .35s ease, box-shadow .35s ease;
}
.photos-pending [aria-labelledby="stay-h"] .photo:hover { transform: translateY(-7px); box-shadow: 0 30px 72px rgba(8,40,50,.15); }

#support {
  color: #f2fbfa;
  border-color: rgba(255,255,255,.11);
  background:
    linear-gradient(90deg, rgba(6,31,41,.97), rgba(6,31,41,.81) 58%, rgba(6,31,41,.56)),
    url("../img/hero-art-v3.png") 74% 53% / cover no-repeat;
}
#support::before {
  left: -140px;
  top: -220px;
  background: radial-gradient(circle, rgba(255,115,86,.2), transparent 67%);
}
#support h2 { color: #fff; }
#support .section-number { color: var(--v2-coral); }
#support .galina { color: var(--v2-ink); box-shadow: 0 34px 90px rgba(0,0,0,.24); }

[aria-labelledby="clinic-h"] {
  background:
    radial-gradient(620px 390px at 100% 100%, rgba(169,225,217,.24), transparent 70%),
    rgba(250,251,248,.95);
}
[aria-labelledby="clinic-h"] .facts {
  padding: 26px;
  border: 1px solid rgba(8,40,50,.07);
  border-radius: 28px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 18px 54px rgba(8,40,50,.06);
  backdrop-filter: blur(16px);
}
[aria-labelledby="clinic-h"] .map-placeholder {
  min-height: 220px;
  border: 1px solid rgba(8,40,50,.08);
  background:
    radial-gradient(circle at 75% 30%, rgba(215,241,154,.55), transparent 22%),
    linear-gradient(145deg, #0d3540, #176f76);
  box-shadow: 0 24px 70px rgba(8,40,50,.14);
}
[aria-labelledby="clinic-h"] .map-placeholder span { color: #f5fbfa; }

#faq {
  background:
    radial-gradient(520px 330px at 0% 0%, rgba(246,207,195,.45), transparent 68%),
    linear-gradient(135deg, #f8f5ef, #edf6f2);
}
#faq::before { right: -180px; bottom: -220px; }
#faq details {
  border-color: rgba(8,40,50,.08);
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 40px rgba(8,40,50,.045);
  backdrop-filter: blur(12px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#faq details:hover { transform: translateX(5px); border-color: rgba(44,164,157,.28); box-shadow: 0 20px 48px rgba(8,40,50,.08); }

#reviews {
  color: #eef9f8;
  border-color: rgba(255,255,255,.1);
  background:
    radial-gradient(620px 390px at 10% 100%, rgba(84,197,183,.2), transparent 70%),
    linear-gradient(145deg, #082832, #0d4148);
}
#reviews::before { right: -170px; top: -220px; background: radial-gradient(circle, rgba(255,115,86,.2), transparent 68%); }
#reviews h2,
#reviews .section-lead { color: inherit; }
#reviews .review {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 60px rgba(0,0,0,.12);
  backdrop-filter: blur(16px);
}
#reviews .review blockquote,
#reviews .review figcaption { color: #eff8f7; }
#reviews .review__number { color: #082832; background: var(--v2-lime); }

.section--cta { margin: 28px 12px 46px; border-radius: 44px; box-shadow: 0 38px 100px rgba(6,31,41,.23); }

@supports (animation-timeline: view()) {
  .section > .container {
    animation: chapter-arrive linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
  @keyframes chapter-arrive {
    from { opacity: .76; transform: translateY(28px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (min-width: 1000px) {
  [aria-labelledby="why-h"], #support { background-attachment: fixed; }
}

@media (max-width: 899px) {
  .section { margin: 18px 10px; border-radius: 32px; }
  [aria-labelledby="why-h"] { min-height: 450px; background-position: 66% center; }
  #steps .timeline__item { padding: 24px 20px 24px 72px; }
  #steps .timeline__number { top: 24px; left: 18px; }
  #steps .timeline__item::after { left: 39px; }
  .section--cta { margin-bottom: 32px; }
}

@media (max-width: 719px) {
  .page-atmosphere__river { left: 60%; width: 38vw; opacity: .45; }
  .page-atmosphere__orb { opacity: .25; }
  .section { margin: 14px 7px; border-radius: 26px; }
  [aria-labelledby="why-h"] { min-height: 420px; background-attachment: scroll; background-position: 62% center; }
  #steps::before { width: 100%; opacity: .06; }
  #support { background-attachment: scroll; background-position: 68% center; }
  #faq details:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-atmosphere__orb { animation: none; }
  .section > .container { animation: none !important; transform: none !important; opacity: 1 !important; }
  .photos-pending [aria-labelledby="stay-h"] .photo:hover { transform: none; }
}