/* ===== Адам · слой эффектов =====
   Только визуальные надстройки. Базовый style.css не трогаем —
   если что-то мешает, достаточно убрать подключение wow.css и wow.js. */

/* --- появление блоков при прокрутке --- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.40s}.rv-d6{transition-delay:.48s}

/* --- зерно поверх фона: убирает «плоскость» градиентов --- */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.028;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- полоса прогресса чтения --- */
.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,var(--amber),var(--rose),var(--violet));
  box-shadow:0 0 12px rgba(243,180,109,.6);transition:width .12s linear}

/* --- световое пятно за курсором внутри стеклянных карточек --- */
.glass{position:relative;overflow:hidden}
.glass::before{content:"";position:absolute;top:var(--my,50%);left:var(--mx,50%);width:340px;height:340px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle,rgba(243,180,109,.16),rgba(155,124,224,.09) 42%,transparent 68%)}
.glass.lit::before{opacity:1}
.glass>*{position:relative;z-index:1}

/* --- 3D-наклон карточек --- */
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.tilt.act{transition:transform .09s linear}

/* --- живой градиент на акцентном заголовке ---
   background — сокращённое свойство и сбрасывает background-clip,
   поэтому обрезку по тексту повторяем здесь же, иначе вместо букв будут заливки. */
.hero h1 em{background-image:linear-gradient(100deg,var(--amber),var(--rose),var(--violet),var(--amber));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:flow-g 9s ease-in-out infinite}
@keyframes flow-g{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* --- подчёркивание-росчерк у заголовков секций --- */
h2.sec{position:relative;display:inline-block}
h2.sec::after{content:"";position:absolute;left:0;bottom:-8px;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--amber),var(--rose));transition:width 1.1s cubic-bezier(.22,.61,.36,1) .25s}
h2.sec.in::after{width:64px}

/* --- кнопки: блик и мягкое свечение --- */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn::after{content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transition:left .75s ease}
.btn:hover::after{left:150%}
.btn.primary:hover{box-shadow:0 16px 46px rgba(243,180,109,.5)}
.nav-cta{position:relative;overflow:hidden}
.nav-cta::after{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .7s ease}
.nav-cta:hover::after{left:150%}

/* --- карточки функций: подсветка рамки и подскок иконки --- */
.feature{transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .35s,box-shadow .35s}
.feature:hover{box-shadow:0 22px 60px rgba(0,0,0,.4)}
.feature .ic{display:inline-block;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.feature:hover .ic{transform:translateY(-4px) scale(1.14) rotate(-6deg)}

/* --- телефон: мягкое парение --- */
.phone{animation:float-ph 7s ease-in-out infinite;will-change:transform}
@keyframes float-ph{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.phone.tilt{animation:none}

/* --- звёзды: разная глубина, плавный параллакс --- */
.stars i{will-change:transform}
.aurora i{will-change:transform}

/* --- цифры-счётчики --- */
.num-anim{font-variant-numeric:tabular-nums}

/* --- строки сравнения: подсветка выгоды --- */
.check-row{transition:background .3s,padding-left .3s;border-radius:10px}
.check-row:hover{background:rgba(255,255,255,.04);padding-left:8px}

/* --- пункты ИИ: точка «дышит» --- */
.ai-points li i{box-shadow:0 0 0 0 currentColor;animation:pulse-d 2.8s ease-out infinite}
.ai-points li:nth-child(2) i{animation-delay:.7s}
.ai-points li:nth-child(3) i{animation-delay:1.4s}
.ai-points li:nth-child(4) i{animation-delay:2.1s}
@keyframes pulse-d{0%{box-shadow:0 0 0 0 rgba(255,255,255,.28)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* --- тарифы и товары: подъём --- */
.plan,.pack,.cam-card,.teaser{transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s,border-color .4s}
.plan:hover,.pack:hover,.cam-card:hover{transform:translateY(-6px);box-shadow:0 26px 70px rgba(0,0,0,.45)}

/* --- уход со страницы --- */
body{transition:opacity .32s ease}
body.leaving{opacity:0}

/* --- курсор-ореол (только мышь) --- */
.halo{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;z-index:190;pointer-events:none;
  background:radial-gradient(circle,rgba(243,180,109,.5),transparent 65%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .3s,width .25s,height .25s}
.halo.on{opacity:1}
.halo.big{width:56px;height:56px;background:radial-gradient(circle,rgba(232,127,166,.42),transparent 68%)}

/* --- падающая звезда --- */
.shoot{position:absolute;width:2px;height:2px;border-radius:50%;background:#FFF6E4;
  box-shadow:0 0 7px 1px rgba(255,238,210,.85);opacity:0;pointer-events:none;
  animation:shoot 1.3s ease-in forwards}
.shoot::after{content:"";position:absolute;right:1px;top:50%;width:86px;height:1px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(255,238,210,0),rgba(255,238,210,.7))}
@keyframes shoot{
  0%{opacity:0;transform:rotate(19deg) translateX(0) scale(.6)}
  14%{opacity:1;transform:rotate(19deg) translateX(46px) scale(1)}
  78%{opacity:.9}
  100%{opacity:0;transform:rotate(19deg) translateX(330px) scale(.7)}
}
@media(prefers-reduced-motion:reduce){.shoot{display:none}}

/* --- переписка в макете телефона --- */
.ph-msg{transition:opacity .45s ease, transform .45s ease}
.ph-msg.ph-hide{opacity:0;transform:translateY(8px)}
.ph-typing{display:flex;gap:4px;align-items:center;width:auto;max-width:52px;padding:10px 12px}
.ph-typing i{width:5px;height:5px;border-radius:50%;background:var(--soft);opacity:.5;
  animation:ph-dot 1.1s ease-in-out infinite}
.ph-typing i:nth-child(2){animation-delay:.16s}
.ph-typing i:nth-child(3){animation-delay:.32s}
@keyframes ph-dot{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-3px);opacity:.9}}

/* --- на телефонах и при «уменьшить движение» лишнее выключаем --- */
@media(hover:none){
  .halo{display:none}
  .glass::before{display:none}
  .phone{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  .ph-msg{opacity:1!important;transform:none!important;transition:none}
  .ph-typing{display:none}
  .halo,.grain{display:none}
  .phone{animation:none}
  h2.sec.in::after{width:64px;transition:none}
}