/* ===== ЖИВОЙ АНИМИРОВАННЫЙ ФОН РАЗДЕЛОВ ===== */

/* Карточки остаются чистыми */
.sh-benefits__grid .sh-card{
  min-height:238px;
  background:rgba(255,255,255,.88);
  border-color:var(--sh-line);
}
.sh-benefits__grid .sh-card::before,
.sh-benefits__grid .sh-card::after{
  display:none;
}
.sh-benefits__grid .sh-card__number{display:none}

/* Общий принцип фоновых фигур */
.sh-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.sh-section > .sh-container{
  position:relative;
  z-index:2;
}
.sh-section::before,
.sh-section::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s ease;
}
.sh-section.is-in-view::before,
.sh-section.is-in-view::after{
  opacity:1;
}

/* 1. Преимущества — мягкие бирюзовые круги и сетка */
#shBenefits::before{
  top:-240px;
  right:-190px;
  width:720px;
  height:720px;
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 40%,rgba(19,191,174,.17),transparent 20%),
    radial-gradient(circle at 55% 55%,transparent 0 44%,rgba(19,191,174,.11) 45% 46%,transparent 47%),
    radial-gradient(circle at 55% 55%,transparent 0 60%,rgba(8,127,116,.08) 61% 62%,transparent 63%);
  animation:sh-orbit-one 18s ease-in-out infinite;
}
#shBenefits::after{
  bottom:-160px;
  left:-100px;
  width:370px;
  height:370px;
  background:
    linear-gradient(45deg,transparent 47%,rgba(19,191,174,.13) 48% 52%,transparent 53%),
    linear-gradient(-45deg,transparent 47%,rgba(19,191,174,.1) 48% 52%,transparent 53%);
  background-size:42px 42px;
  transform:rotate(12deg);
  animation:sh-grid-drift 16s ease-in-out infinite;
}

/* 2. Цели — крупные вытянутые линии */
#shGoals::before{
  top:-270px;
  left:8%;
  width:530px;
  height:900px;
  border:42px solid rgba(19,191,174,.1);
  border-radius:280px;
  transform:rotate(34deg);
  animation:sh-tall-shape 17s ease-in-out infinite;
}
#shGoals::after{
  right:-220px;
  bottom:-260px;
  width:700px;
  height:520px;
  border-radius:45% 55% 45% 55%;
  background:radial-gradient(circle at 40% 35%,rgba(8,127,116,.14),transparent 42%);
  filter:blur(4px);
  animation:sh-pulse-shape 14s ease-in-out infinite;
}

/* 3. Направления — диагональные прямоугольники */
#shDirections::before{
  top:80px;
  left:-160px;
  width:510px;
  height:300px;
  border:2px solid rgba(19,191,174,.2);
  border-radius:52px;
  transform:rotate(-29deg);
  box-shadow:
    95px 175px 0 -1px rgba(19,191,174,.1),
    195px 350px 0 -1px rgba(8,127,116,.08);
  animation:sh-diagonal-slide 18s ease-in-out infinite;
}
#shDirections::after{
  top:-100px;
  right:-120px;
  width:540px;
  height:540px;
  border-radius:50%;
  background:conic-gradient(from 120deg,transparent,rgba(19,191,174,.11),transparent 30%);
  animation:sh-spin-slow 25s linear infinite;
}

/* 4. Тренеры — большие полупрозрачные квадраты */
#shTeam::before{
  top:70px;
  right:-110px;
  width:530px;
  height:530px;
  border:34px solid rgba(19,191,174,.1);
  border-radius:78px;
  transform:rotate(25deg);
  animation:sh-square-float 16s ease-in-out infinite;
}
#shTeam::after{
  bottom:-250px;
  left:7%;
  width:740px;
  height:370px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(19,191,174,.12),transparent 66%);
  filter:blur(10px);
  animation:sh-pulse-shape 12s ease-in-out infinite reverse;
}

/* 5. Отзывы — концентрические тонкие кольца */
#shReviews::before{
  top:-280px;
  left:-190px;
  width:650px;
  height:650px;
  border:1px solid rgba(19,191,174,.22);
  border-radius:50%;
  box-shadow:
    0 0 0 55px rgba(19,191,174,.06),
    0 0 0 110px rgba(19,191,174,.04),
    0 0 0 165px rgba(19,191,174,.025);
  animation:sh-orbit-one 20s ease-in-out infinite reverse;
}
#shReviews::after{
  right:7%;
  bottom:-130px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(8,127,116,.13),transparent 66%);
  animation:sh-pulse-shape 11s ease-in-out infinite;
}

/* 6. Абонементы — волны и акцентная зона */
#shPrices::before{
  top:-180px;
  right:-90px;
  width:650px;
  height:460px;
  border:30px solid rgba(19,191,174,.1);
  border-radius:48% 52% 58% 42%;
  transform:rotate(-18deg);
  animation:sh-wave-float 16s ease-in-out infinite;
}
#shPrices::after{
  bottom:-170px;
  left:-80px;
  width:480px;
  height:480px;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 33%,rgba(19,191,174,.12) 34% 35%,transparent 36%),
    radial-gradient(circle at 50% 50%,transparent 0 49%,rgba(19,191,174,.08) 50% 51%,transparent 52%);
  animation:sh-spin-slow 28s linear infinite reverse;
}

/* 7. FAQ — лёгкий паттерн-ромбы */
#shFaq::before{
  top:80px;
  right:-110px;
  width:500px;
  height:560px;
  background:
    linear-gradient(45deg,transparent 47%,rgba(19,191,174,.12) 48% 52%,transparent 53%),
    linear-gradient(-45deg,transparent 47%,rgba(19,191,174,.1) 48% 52%,transparent 53%);
  background-size:58px 58px;
  transform:rotate(12deg);
  mask-image:linear-gradient(to bottom,transparent,black 25%,black 70%,transparent);
  animation:sh-grid-drift 18s ease-in-out infinite reverse;
}
#shFaq::after{
  bottom:-260px;
  left:-140px;
  width:600px;
  height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(19,191,174,.1),transparent 67%);
  animation:sh-pulse-shape 13s ease-in-out infinite;
}

/* 8. Адреса — спокойный финальный градиент */
#shBranches::before{
  inset:0;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 8% 80%,rgba(19,191,174,.13),transparent 21%),
    radial-gradient(circle at 91% 10%,rgba(8,127,116,.11),transparent 25%);
  animation:sh-background-breathe 12s ease-in-out infinite;
}
#shBranches::after{
  right:-180px;
  bottom:-220px;
  width:580px;
  height:580px;
  border:32px solid rgba(19,191,174,.1);
  border-radius:38% 62% 48% 52%;
  transform:rotate(26deg);
  animation:sh-square-float 17s ease-in-out infinite reverse;
}

/* Появление контента при прокрутке */
.sh-section .sh-eyebrow,
.sh-section .sh-title,
.sh-section .sh-subtitle,
.sh-section .sh-card,
.sh-section .sh-direction,
.sh-section .sh-trainer,
.sh-section .sh-review-card,
.sh-section .sh-price,
.sh-section .sh-branch,
.sh-section .sh-faq,
.sh-section .sh-trial{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.sh-section.is-in-view .sh-eyebrow,
.sh-section.is-in-view .sh-title,
.sh-section.is-in-view .sh-subtitle,
.sh-section.is-in-view .sh-card,
.sh-section.is-in-view .sh-direction,
.sh-section.is-in-view .sh-trainer,
.sh-section.is-in-view .sh-review-card,
.sh-section.is-in-view .sh-price,
.sh-section.is-in-view .sh-branch,
.sh-section.is-in-view .sh-faq,
.sh-section.is-in-view .sh-trial{
  opacity:1;
  transform:translateY(0);
}
.sh-section.is-in-view .sh-title{transition-delay:.08s}
.sh-section.is-in-view .sh-subtitle{transition-delay:.16s}
.sh-section.is-in-view .sh-card:nth-child(1),
.sh-section.is-in-view .sh-direction:nth-child(1),
.sh-section.is-in-view .sh-trainer:nth-child(1),
.sh-section.is-in-view .sh-price:nth-child(1){transition-delay:.16s}
.sh-section.is-in-view .sh-card:nth-child(2),
.sh-section.is-in-view .sh-direction:nth-child(2),
.sh-section.is-in-view .sh-trainer:nth-child(2),
.sh-section.is-in-view .sh-price:nth-child(2){transition-delay:.24s}
.sh-section.is-in-view .sh-card:nth-child(3),
.sh-section.is-in-view .sh-direction:nth-child(3),
.sh-section.is-in-view .sh-trainer:nth-child(3),
.sh-section.is-in-view .sh-price:nth-child(3){transition-delay:.32s}
.sh-section.is-in-view .sh-card:nth-child(4),
.sh-section.is-in-view .sh-direction:nth-child(4),
.sh-section.is-in-view .sh-trainer:nth-child(4),
.sh-section.is-in-view .sh-price:nth-child(4){transition-delay:.4s}

@keyframes sh-orbit-one{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(-22px,26px,0) rotate(9deg)}
}
@keyframes sh-grid-drift{
  0%,100%{transform:rotate(12deg) translate3d(0,0,0)}
  50%{transform:rotate(18deg) translate3d(22px,-16px,0)}
}
@keyframes sh-tall-shape{
  0%,100%{transform:rotate(34deg) translate3d(0,0,0)}
  50%{transform:rotate(29deg) translate3d(28px,24px,0)}
}
@keyframes sh-pulse-shape{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.13);opacity:1}
}
@keyframes sh-diagonal-slide{
  0%,100%{transform:rotate(-29deg) translate3d(0,0,0)}
  50%{transform:rotate(-24deg) translate3d(35px,22px,0)}
}
@keyframes sh-spin-slow{to{transform:rotate(360deg)}}
@keyframes sh-square-float{
  0%,100%{transform:rotate(25deg) translate3d(0,0,0)}
  50%{transform:rotate(32deg) translate3d(-22px,28px,0)}
}
@keyframes sh-wave-float{
  0%,100%{transform:rotate(-18deg) translate3d(0,0)}
  50%{transform:rotate(-10deg) translate3d(-24px,30px)}
}
@keyframes sh-background-breathe{
  0%,100%{opacity:.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}

@media(max-width:600px){
  .sh-section::before{transform:scale(.72)!important}
  .sh-section::after{transform:scale(.68)!important}
  .sh-section .sh-card,
  .sh-section .sh-direction,
  .sh-section .sh-trainer,
  .sh-section .sh-review-card,
  .sh-section .sh-price,
  .sh-section .sh-branch{
    transform:translateY(22px);
  }
}

@media(prefers-reduced-motion:reduce){
  .sh-section::before,
  .sh-section::after{animation:none!important}
  .sh-section .sh-eyebrow,
  .sh-section .sh-title,
  .sh-section .sh-subtitle,
  .sh-section .sh-card,
  .sh-section .sh-direction,
  .sh-section .sh-trainer,
  .sh-section .sh-review-card,
  .sh-section .sh-price,
  .sh-section .sh-branch,
  .sh-section .sh-faq,
  .sh-section .sh-trial{
    transition:none!important;
    opacity:1!important;
    transform:none!important;
  }
}