/* ==========================================================================
   Backup (Benefits) section — final (no gradient tiles / no rectangles)
   File: assets/css/13-backup.css
   FORCE LIGHT (no prefers-color-scheme)
   ========================================================================== */

/* ✅ Секция: гарантированные отступы (на случай если общий .section перебивает) */
.section-backup{
  padding-block: clamp(56px, 6vw, 96px) !important;
}

.section-backup{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* локальные цвета под скетч */
  --backup-ink: rgba(3, 7, 18, 0.92);
  --backup-muted: rgba(3, 7, 18, 0.72);

  --backup-bg-top: #f8fbff;
  --backup-bg-mid: #eef7ff;
  --backup-bg-bot: #f8fbff;

  /* чуть стабильнее для разных дисплеев (раньше было rgba(255,255,255,0.70) border) */
  --backup-card-bg: rgba(255,255,255,0.74);
  --backup-card-border: rgba(3,7,18,0.08);
  --backup-divider: rgba(3, 7, 18, 0.08);

  --backup-shadow:
    0 18px 50px rgba(3,7,18,0.12),
    0  2px 10px rgba(3,7,18,0.07);

  /* ===== ТЮНИНГ МЕДСЕСТРЫ (твои значения) ===== */
  --nurse-size: clamp(980px, 80vw, 1500px);
  --nurse-x: 100%;
  --nurse-y: 46%;

  background-color: var(--backup-bg-top);

  background-image:
    radial-gradient(circle 520px at 18% 18%, rgba(94, 234, 212, 0.18) 0%, rgba(94, 234, 212, 0.00) 72%),
    radial-gradient(circle 680px at 80% 42%, rgba(59, 130, 246, 0.20) 0%, rgba(59, 130, 246, 0.00) 74%),
    radial-gradient(circle 760px at 72% 110%, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.00) 72%),
    linear-gradient(180deg, var(--backup-bg-top) 0%, var(--backup-bg-mid) 55%, var(--backup-bg-bot) 100%);

  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
}

/* Вуаль для читаемости (cover, плавно уходит вправо) */
.section-backup::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(248, 252, 255, 0.96) 0%,
    rgba(248, 252, 255, 0.93) 54%,
    rgba(248, 252, 255, 0.45) 74%,
    rgba(248, 252, 255, 0.00) 88%,
    rgba(248, 252, 255, 0.00) 100%
  );
}

/* Медсестра отдельным слоем */
.section-backup::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;


background-image: url("/images/backup-nurse.png");
background-image: image-set(
  url("/images/backup-nurse.webp") type("image/webp"),
  url("/images/backup-nurse.png")  type("image/png")
);

  background-repeat: no-repeat;
  background-position: var(--nurse-x) var(--nurse-y);
  background-size: var(--nurse-size) auto;

  filter: drop-shadow(0 26px 70px rgba(59,130,246,0.16));

  clip-path: ellipse(68% 86% at 78% 44%);
  -webkit-mask-image: radial-gradient(95% 120% at 78% 28%, #000 72%, transparent 100%);
  mask-image: radial-gradient(95% 120% at 78% 28%, #000 72%, transparent 100%);
}

/* контент поверх */
.backup{
  position: relative;
  z-index: 2;
}

/* левая часть фиксированная, справа воздух под картинку */
.backup__grid{
  display:grid;
  align-items:center;
  gap: clamp(18px, 3vw, 44px);
  grid-template-columns: minmax(0, 720px) 1fr;
}

.backup__copy{ max-width: 780px; }

.backup__title{
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--backup-ink);
  font-size: clamp(34px, 3.6vw, 56px);
}

.backup__accent{
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Сабтайтл */
.backup__sub{
  margin: 0 0 22px !important;
  max-width: 60ch;

  color: rgba(3,7,18,0.68) !important;
  font-size: clamp(16px, 1.25vw, 19px) !important;
  line-height: 1.62 !important;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.backup__sub strong{
  color: rgba(3,7,18,0.88);
  font-weight: 700;
}

/* Glass panel */
.backup__panel{
  border-radius: var(--radius2);
  border: 1px solid var(--backup-card-border);
  background: var(--backup-card-bg);
  box-shadow: var(--backup-shadow);
  overflow: hidden;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  margin-top: 6px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .backup__panel{ background: rgba(255,255,255,0.88); }
}

.backup__list{
  list-style:none;
  margin:0;
  padding: 8px 0;
}

.backup__item{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding: 18px 20px;
  border-top: 1px solid var(--backup-divider);
}

.backup__item:first-child{ border-top:0; }

.backup__tick{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  flex: 0 0 34px;
  display:grid;
  place-items:center;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(94,234,212,0.32);
  box-shadow: 0 8px 18px rgba(3,7,18,0.10);

  color: var(--primary);
}

.backup__text{
  color: rgba(3,7,18,0.78);
  font-size: 16px;
  line-height: 1.5;
}

.backup__text strong{
  color: var(--backup-ink);
  font-weight: 800;
}

.backup__tint{
  color: rgba(59,130,246,0.92);
  font-weight: 700;
}

/* если в HTML остался backup__art — прячем */
.backup__art{ display:none !important; }

/* Mobile */
@media (max-width: 980px){
  .section-backup{
    padding-block: clamp(44px, 7vw, 72px) !important;
  }

  .backup__grid{ grid-template-columns: 1fr; }

  .section-backup{
    --nurse-size: clamp(900px, 165vw, 1600px);
    --nurse-x: 70%;
    --nurse-y: 126%;
  }

  .section-backup::before{
    background: linear-gradient(
      180deg,
      rgba(248, 252, 255, 0.97) 0%,
      rgba(248, 252, 255, 0.92) 72%,
      rgba(248, 252, 255, 0.78) 100%
    );
  }

  .section-backup::after{
    clip-path: ellipse(95% 70% at 55% 78%);
    -webkit-mask-image: radial-gradient(120% 100% at 55% 70%, #000 70%, transparent 100%);
    mask-image: radial-gradient(120% 100% at 55% 70%, #000 70%, transparent 100%);
  }

  .backup__sub{
    margin-bottom: 18px !important;
    max-width: 62ch;
  }
}

@media (prefers-reduced-motion: reduce){
  .section-backup::after{ filter: none; }
}

/* ==========================================================================
   Backup animations (reveal + subtle float)
   ========================================================================== */

/* Стартовые состояния включаем ТОЛЬКО если есть JS */
.js .section-backup::after{
  opacity: 0;
  transform: translate3d(26px, 10px, 0) scale(1.02);
  transition:
    opacity 700ms ease,
    transform 900ms cubic-bezier(.2,.9,.2,1);
  will-change: transform, opacity;
}

.js .section-backup::before{
  opacity: 0;
  transition: opacity 600ms ease;
}

.js .section-backup .backup__title,
.js .section-backup .backup__sub{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 550ms ease,
    transform 750ms cubic-bezier(.2,.9,.2,1);
}

.js .section-backup .backup__panel{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 650ms ease 120ms,
    transform 850ms cubic-bezier(.2,.9,.2,1) 120ms;
}

.js .section-backup .backup__item{
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 520ms ease,
    transform 720ms cubic-bezier(.2,.9,.2,1);
}

.js .section-backup .backup__tick{
  transform: scale(.92);
  transition: transform 520ms cubic-bezier(.2,.9,.2,1);
}

/* Активное состояние */
.section-backup[data-anim="on"]::before{ opacity: 1; }

.section-backup[data-anim="on"]::after{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

/* заголовок/подзаголовок */
.section-backup[data-anim="on"] .backup__title{
  opacity: 1;
  transform: none;
}

.section-backup[data-anim="on"] .backup__sub{
  opacity: 1;
  transform: none;
  transition-delay: 90ms;
}

/* панель */
.section-backup[data-anim="on"] .backup__panel{
  opacity: 1;
  transform: none;
}

/* список — ступенчатые задержки */
.section-backup[data-anim="on"] .backup__item{ opacity: 1; transform: none; }

.section-backup[data-anim="on"] .backup__item:nth-child(1){ transition-delay: 160ms; }
.section-backup[data-anim="on"] .backup__item:nth-child(2){ transition-delay: 220ms; }
.section-backup[data-anim="on"] .backup__item:nth-child(3){ transition-delay: 280ms; }
.section-backup[data-anim="on"] .backup__item:nth-child(4){ transition-delay: 340ms; }
.section-backup[data-anim="on"] .backup__item:nth-child(5){ transition-delay: 400ms; }
.section-backup[data-anim="on"] .backup__item:nth-child(6){ transition-delay: 460ms; }

.section-backup[data-anim="on"] .backup__tick{ transform: scale(1); }

/* Лёгкий "float" медсестры после появления */
@keyframes nb-nurse-float{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-10px, -6px, 0) scale(1.006); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

.section-backup[data-anim="on"]::after{
  animation: nb-nurse-float 10s ease-in-out 0.9s infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .section-backup::after,
  .section-backup::before,
  .section-backup .backup__title,
  .section-backup .backup__sub,
  .section-backup .backup__panel,
  .section-backup .backup__item,
  .section-backup .backup__tick{
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}