/* =====================================================================
   ОКСИТЕЛЬ — kokteyl-upgrade.css
   Усиление страницы /kokteyl/. Подключается ТОЛЬКО на /kokteyl/
   (body.upg-kokteyl). Аддитивный слой поверх общего style.css:
   общий стиль не меняется, /vozduh/ и /pay/ не затрагиваются.
   Тема: пузырьки, пена, «вкусное» движение. Без внешних библиотек/шрифтов.
   Уважает prefers-reduced-motion. Неймспейс: .ku-* (kokteyl upgrade).
   ===================================================================== */

/* ---------- Полоса прогресса чтения ---------- */
.ku-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--c-cyan),var(--c-blue),var(--c-green),var(--c-yellow));
  box-shadow:0 1px 8px rgba(14,143,214,.55);
  transition:width .12s linear; will-change:width;
}

/* ---------- Живой «вкусный» градиент за hero ---------- */
.upg-kokteyl .hero{ position:relative; isolation:isolate; }
.upg-kokteyl .hero::before{
  content:""; position:absolute; inset:-12% -6% -2% -6%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(44% 40% at 18% 24%, rgba(52,182,230,.20), transparent 62%),
    radial-gradient(40% 36% at 84% 16%, rgba(252,194,28,.20), transparent 62%),
    radial-gradient(46% 42% at 66% 86%, rgba(124,194,67,.18), transparent 62%);
  animation:kuWash 17s ease-in-out infinite alternate;
}
@keyframes kuWash{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(8px,-14px,0) scale(1.05);} }

/* ---------- Поле поднимающихся пузырьков (создаёт JS) ---------- */
.ku-bubble{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 30% 26%, #fff 0%, rgba(255,255,255,.4) 52%, rgba(52,182,230,.22) 100%);
  box-shadow:inset 0 0 7px rgba(255,255,255,.8), 0 4px 12px rgba(14,143,214,.16);
  animation:kuRise linear infinite;
}
@keyframes kuRise{
  0%{ transform:translateY(30px) scale(.8); opacity:0; }
  12%{ opacity:.95; }
  60%{ opacity:.85; }
  100%{ transform:translateY(-240px) scale(1.05); opacity:0; }
}

/* ---------- Мягкая «пена» у нижней кромки hero ---------- */
.upg-kokteyl .hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:46px; z-index:0; pointer-events:none;
  background:
    radial-gradient(20px 16px at 8% 100%, #fff 60%, transparent 62%),
    radial-gradient(26px 20px at 20% 100%, #fff 60%, transparent 62%),
    radial-gradient(18px 15px at 33% 100%, #fff 60%, transparent 62%),
    radial-gradient(30px 22px at 48% 100%, #fff 60%, transparent 62%),
    radial-gradient(22px 17px at 63% 100%, #fff 60%, transparent 62%),
    radial-gradient(28px 21px at 78% 100%, #fff 60%, transparent 62%),
    radial-gradient(20px 16px at 92% 100%, #fff 60%, transparent 62%);
  opacity:.9;
}
.upg-kokteyl .hero > .container{ position:relative; z-index:1; }

/* ---------- Карточки/преимущества: hover-подъём + блик ---------- */
.upg-kokteyl .section .card.feature{ position:relative; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.upg-kokteyl .section .card.feature:hover{ transform:translateY(-7px); box-shadow:var(--sh-md); }
.upg-kokteyl .section .card.feature > .icon-badge{ transition:transform .3s var(--ease); }
.upg-kokteyl .section .card.feature:hover > .icon-badge{ transform:translateY(-2px) rotate(-6deg) scale(1.07); }
.upg-kokteyl .card.feature::before{
  content:""; position:absolute; top:0; left:-65%; width:42%; height:100%; z-index:2; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg); opacity:0;
}
.upg-kokteyl .card.feature:hover::before{ animation:kuSheen .85s ease; }
@keyframes kuSheen{ 0%{ left:-65%; opacity:0;} 25%{ opacity:1;} 100%{ left:135%; opacity:0;} }

/* ---------- Карточки цены: выразительный hover ---------- */
.upg-kokteyl .price-card{ transition:transform .32s var(--ease), box-shadow .32s var(--ease); position:relative; overflow:hidden; }
.upg-kokteyl .price-card:hover{ transform:translateY(-9px) scale(1.015); box-shadow:var(--sh-lg); }
.upg-kokteyl .price-card .kk-counter{ transition:color var(--dur) var(--ease); }
.upg-kokteyl .price-card:hover .kk-counter{ color:var(--c-blue); }

/* ---------- Курс «10 дней — 10 порций»: акцент на цифрах ---------- */
.upg-kokteyl .course-fig{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.upg-kokteyl .course-fig:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }

/* ---------- Усиление CTA: пульсирующее свечение ---------- */
.upg-kokteyl .cta-band{ position:relative; }
.upg-kokteyl .cta-band::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:0; pointer-events:none;
  animation:kuGlow 3.2s ease-in-out infinite;
}
.upg-kokteyl .cta-band__inner{ position:relative; z-index:1; }
@keyframes kuGlow{
  0%,100%{ box-shadow:0 0 38px 2px rgba(52,182,230,.28); }
  50%{ box-shadow:0 0 64px 10px rgba(124,194,67,.34); }
}

/* ---------- Уважение prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .ku-progress{ transition:none; }
  .upg-kokteyl .hero::before{ animation:none; }
  .ku-bubble{ display:none !important; }
  .upg-kokteyl .card.feature::before{ animation:none !important; }
  .upg-kokteyl .cta-band::after{ animation:none; box-shadow:0 0 40px 2px rgba(52,182,230,.22); }
  .upg-kokteyl .section .card.feature,.upg-kokteyl .price-card,.upg-kokteyl .course-fig{ transition:none; }
}