/* ============================================================
   hero-drops.css — декоративные «капли» для hero (кросс-сайтовый флёр).

   Кит фиксирует визуал и анимацию каплей; сам hero (раскладка, контент,
   фоновые glow-пятна) остаётся site-local. Сайт вставляет две секции
   разметки внутрь своего hero и владеет позиционирующим контекстом:
   у hero должен быть position: relative (для оверлея частиц), а на
   десктопе — грид/флекс-колонка, в которую кладётся .hero-drops__visual.

   Две системы, переключаются по брейку 1024px:
   • <1024px — мобильные «частицы»: 3 мелкие капли в правом верхнем углу,
     абсолютный оверлей за контентом (z-index: -1).
   • ≥1024px — десктопный визуал: крупный лепесток + 3 капли в колонке.

   Все цвета — на токенах (--color-primary, --color-primary-soft,
   --shadow-bloom, --shadow-bloom-glow). Тот же SVG-паттern капли везде.

   Разметка (сайт вставляет в свой hero):

   1) Мобильный оверлей — прямой потомок .hero (за контентом):
     <div class="hero-drops__particles" aria-hidden="true">
       <svg class="hero-drops__particle hero-drops__particle--p1" viewBox="0 0 120 140" width="120" height="140" focusable="false">
         <defs>
           <radialGradient id="particleGrad1" cx="0.3" cy="0.25" r="0.85">
             <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.9"/>
             <stop offset="40%" stop-color="var(--color-primary-soft)" stop-opacity="0.9"/>
             <stop offset="100%" stop-color="var(--color-primary)" stop-opacity="0.95"/>
           </radialGradient>
         </defs>
         <path d="M 78 8 C 105 12, 118 45, 110 80 C 100 115, 60 132, 36 122 C 14 110, 4 75, 12 45 C 22 22, 50 8, 78 8 Z"
               transform="rotate(-15 60 70)" fill="url(#particleGrad1)"/>
       </svg>
       <!-- p2: тот же path, transform="rotate(-25 60 70)", id=particleGrad2 -->
       <!-- p3: тот же path, transform="rotate(-30 60 70)", id=particleGrad3 -->
     </div>

   2) Десктопный визуал — кладётся в колонку hero (напр. 2-я грид-колонка):
     <div class="hero-drops__visual" aria-hidden="true">
       <svg class="hero-drops__petal" viewBox="0 0 600 600" width="600" height="600" preserveAspectRatio="xMidYMid meet" focusable="false">
         <defs>
           <radialGradient id="bloomGrad" cx="0.35" cy="0.35" r="0.8">
             <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.9"/>
             <stop offset="35%" stop-color="var(--color-primary-soft)" stop-opacity="0.85"/>
             <stop offset="100%" stop-color="var(--color-primary)" stop-opacity="0.95"/>
           </radialGradient>
         </defs>
         <path d="M 420 60 C 510 80, 555 180, 555 280 C 555 405, 470 510, 340 540 C 230 555, 130 500, 90 405 C 55 320, 75 215, 165 145 C 240 90, 330 50, 420 60 Z"
               fill="url(#bloomGrad)"/>
       </svg>
       <svg class="hero-drops__drop" viewBox="0 0 120 140" ...>…id=dropGrad, opacity 0.7…</svg>
       <svg class="hero-drops__drop hero-drops__drop--small" ...>…transform="rotate(-22 60 70)", id=dropGrad2…</svg>
       <svg class="hero-drops__drop hero-drops__drop--tiny" ...>…transform="rotate(38 60 70)", id=dropGrad3…</svg>
     </div>
   ============================================================ */

/* ================================================================
   Десктопный визуал — колонка, только ≥1024px
   ================================================================ */

/* Скрыт на мобилке/планшете */
.hero-drops__visual {
  display: none;
}

@media (min-width: 1024px) {
  .hero-drops__visual {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    width: 100%;
    overflow: visible;
  }
}

/* Главный лепесток: абсолютно, top-right, повёрнут на 15°, с bloom-тенью */
.hero-drops__petal {
  position: absolute;
  top: 0;
  right: -8%;
  width: 90%;
  height: auto;
  transform-origin: 50% 50%;
  filter: drop-shadow(var(--shadow-bloom)) drop-shadow(var(--shadow-bloom-glow));
  overflow: visible;
}

/* Капля — единственная, нижний-правый угол */
.hero-drops__drop {
  position: absolute;
  right: 12%;
  bottom: 2%;
  width: 23%;
  height: auto;
  opacity: 0.6;
}

/* Малые капли-«молекулы» — размеры и позиции (асимметрично, не наезжают на лепесток) */
.hero-drops__drop--small {
  right: auto;
  left: 6%;
  top: 14%;
  bottom: auto;
  width: 19%;
  opacity: 0.55;
}

.hero-drops__drop--tiny {
  right: 0%;
  bottom: 32%;
  top: auto;
  left: auto;
  width: 10%;
  opacity: 0.4;
}

/* ================================================================
   Stagger-анимация: fade+rise при загрузке страницы
   ================================================================ */

@keyframes bloom-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Петал-специфичный keyframe — сохраняет rotate(15deg) на протяжении анимации */
@keyframes bloom-in-petal {
  from {
    opacity: 0;
    transform: rotate(15deg) translateY(12px);
  }
  to {
    opacity: 1;
    transform: rotate(15deg) translateY(0);
  }
}

/* --- Idle-анимации: лепесток дышит, капли дрейфуют --- */

@keyframes petal-breathe {
  0%, 100% { transform: rotate(15deg) translate(0, 0) scale(1, 1); }
  50%      { transform: rotate(15.4deg) translate(0, -6px) scale(1.015, 0.99); }
}

@keyframes drop-float {
  0%, 100% { transform: translate(0, 0) scale(1, 1) skewX(0); }
  25%      { transform: translate(-2px, -10px) scale(1.03, 0.97) skewX(1.2deg); }
  50%      { transform: translate(-5px, -18px) scale(0.97, 1.04) skewX(-0.8deg); }
  75%      { transform: translate(-3px, -8px) scale(1.02, 0.98) skewX(0.6deg); }
}

@keyframes drop-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1, 1) skewX(0); }
  25%      { transform: translate(3px, -7px) scale(0.98, 1.03) skewX(-0.8deg); }
  50%      { transform: translate(7px, -12px) scale(1.04, 0.97) skewX(1deg); }
  75%      { transform: translate(4px, -5px) scale(0.99, 1.02) skewX(-0.4deg); }
}

@keyframes drop-drift-c {
  0%, 100% { transform: translate(0, 0) scale(1, 1) skewX(0); }
  25%      { transform: translate(2px, -3px) scale(1.02, 0.98) skewX(0.6deg); }
  50%      { transform: translate(4px, -6px) scale(0.98, 1.03) skewX(-0.5deg); }
  75%      { transform: translate(2px, -2px) scale(1.01, 0.99) skewX(0.3deg); }
}

/* --- Привязка анимаций: load-stagger → idle chain --- */

.hero-drops__petal {
  animation:
    bloom-in-petal 700ms cubic-bezier(0.22, 1, 0.36, 1) 0ms both,
    petal-breathe 23s ease-in-out 800ms infinite,
    pulse-petal 11s ease-in-out 1300ms infinite;
  will-change: transform, opacity;
}

.hero-drops__drop {
  animation:
    bloom-in 700ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both,
    drop-float 5s cubic-bezier(0.45, 0, 0.55, 1) 900ms infinite,
    pulse-deep 7s ease-in-out 1450ms infinite;
  will-change: transform, opacity;
}

.hero-drops__drop--small {
  animation:
    bloom-in 700ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both,
    drop-drift-a 7s ease-in-out 1700ms infinite,
    pulse-mid 13s ease-in-out 1600ms infinite;
  will-change: transform, opacity;
}

.hero-drops__drop--tiny {
  animation:
    bloom-in 700ms cubic-bezier(0.22, 1, 0.36, 1) 500ms both,
    drop-drift-c 9s cubic-bezier(0.37, 0, 0.63, 1) 2500ms infinite,
    pulse-soft 5s ease-in-out 1750ms infinite;
  will-change: transform, opacity;
}

/* ================================================================
   Мобильные «частицы» — фоновые капли для мобилки/планшета.
   Видны только на <1024px, за контентом (z-index: -1).
   Связность с десктопным визуалом: тот же SVG-паттерн.
   ================================================================ */

.hero-drops__particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hero-drops__particles {
    display: none;
  }
}

.hero-drops__particle {
  position: absolute;
  display: block;
  height: auto;
  aspect-ratio: 6 / 7;
}

/* Позиции — компактный треугольник в верхнем правом углу .hero */
.hero-drops__particle--p1 {
  top: 6%;
  right: 5%;
  width: 28px;
  animation:
    particle-drift-1 7s ease-in-out 1000ms infinite,
    pulse-soft 7s ease-in-out 1300ms infinite;
  will-change: transform, opacity;
}

.hero-drops__particle--p2 {
  top: 16%;
  right: 14%;
  width: 20px;
  animation:
    particle-drift-2 13s cubic-bezier(0.45, 0, 0.55, 1) 2300ms infinite,
    pulse-light 11s ease-in-out 1500ms infinite;
  will-change: transform, opacity;
}

.hero-drops__particle--p3 {
  top: 26%;
  right: 6%;
  width: 14px;
  animation:
    particle-drift-3 17s cubic-bezier(0.37, 0, 0.63, 1) 3700ms infinite,
    pulse-light 13s ease-in-out 1700ms infinite;
  will-change: transform, opacity;
}

/* На ≥480px размеры чуть крупнее, треугольник тот же */
@media (min-width: 480px) {
  .hero-drops__particle--p1 { width: 32px; }
  .hero-drops__particle--p2 { width: 22px; }
  .hero-drops__particle--p3 { width: 16px; }
}

@media (min-width: 768px) {
  .hero-drops__particle--p1 { width: 36px; top: 5%; right: 5%; }
  .hero-drops__particle--p2 { width: 26px; top: 14%; right: 14%; }
  .hero-drops__particle--p3 { width: 20px; top: 24%; right: 7%; }
}

/* Drift-анимации — только transform + opacity (GPU). Простые периоды,
   разные ease — фазы не синхронизируются. */

@keyframes particle-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1, 1) skewX(0); }
  50%      { transform: translate(-6px, 10px) scale(1.03, 0.97) skewX(0.8deg); }
}

@keyframes particle-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1, 1) skewX(0); }
  50%      { transform: translate(8px, -7px) scale(0.97, 1.03) skewX(-0.6deg); }
}

@keyframes particle-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1, 1) skewX(0); }
  50%      { transform: translate(-4px, -5px) scale(1.02, 0.98) skewX(0.5deg); }
}

/* ================================================================
   Sync pulse — волна тени от центра наружу (stagger delay).
   Один период (6s), delay разнесён: petal/p1=1300ms → drop=1450ms →
   p2=1500ms → small=1600ms → p3=1700ms → tiny=1750ms.
   Все keyframes стартуют с opacity: 1 — нет скачка после bloom-in.
   Разные амплитуды: крупные уходят в тень сильнее, мелкие — едва.
   ================================================================ */

@keyframes pulse-petal {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.92; }
}

@keyframes pulse-deep {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@keyframes pulse-mid {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@keyframes pulse-light {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* prefers-reduced-motion: отключаем анимации каплей, элементы сразу видны */
@media (prefers-reduced-motion: reduce) {
  .hero-drops__petal {
    animation: none;
    opacity: 1;
    transform: rotate(15deg);
  }

  .hero-drops__drop {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-drops__drop--small {
    animation: none;
    opacity: 1;
  }

  .hero-drops__drop--tiny {
    animation: none;
    opacity: 1;
  }

  .hero-drops__particle--p1 {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .hero-drops__particle--p2 {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .hero-drops__particle--p3 {
    animation: none;
    transform: none;
    opacity: 1;
  }
}