/* =============================================================
   LaserBase FX — анимации и графические компоненты
   =============================================================
   Подключается ПОСЛЕ основного styles.css.
   Все переменные и цвета берутся из :root уже определённого.
   ============================================================= */

/* ---- Общая настройка reduced-motion (доступность) ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* ============================================================
   1) Фон с плавающими "лазерными" лучами (welcome + thanks)
   ============================================================ */
.step--welcome, .step--thanks{ position:relative; overflow:hidden; }

.step--welcome::before,
.step--thanks::before,
.step--welcome::after,
.step--thanks::after{
  content:"";
  position:absolute;
  top:-20%; left:-10%;
  width:140%; height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(214,168,79,0) 20%,
    rgba(214,168,79,.5) 50%,
    rgba(214,168,79,0) 80%,
    transparent 100%);
  filter:blur(.5px);
  pointer-events:none;
  transform-origin:center;
  z-index:0;
  animation:beam-drift 14s ease-in-out infinite;
}
.step--welcome::before, .step--thanks::before{
  top:15%; transform:rotate(-12deg);
  animation-delay:0s;
}
.step--welcome::after, .step--thanks::after{
  top:65%; transform:rotate(8deg);
  animation-delay:6s;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(240,195,106,0) 25%,
    rgba(240,195,106,.35) 50%,
    rgba(240,195,106,0) 75%,
    transparent 100%);
}
@keyframes beam-drift{
  0%,100%  { opacity:0; transform:translateX(-15%) rotate(-12deg); }
  20%,60%  { opacity:1; }
  50%      { transform:translateX(0)     rotate(-12deg); }
  100%     { transform:translateX(15%)   rotate(-12deg); }
}

/* Плавающие золотые точки-искры на welcome */
.step--welcome .fx-sparks{
  position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.step--welcome .fx-sparks span{
  position:absolute; bottom:-10px;
  width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold-2), transparent 70%);
  opacity:0; filter:blur(.4px);
  animation:spark-rise 9s linear infinite;
}
.step--welcome .fx-sparks span:nth-child(1){ left:12%; animation-delay:0s;  width:3px; height:3px; }
.step--welcome .fx-sparks span:nth-child(2){ left:28%; animation-delay:1.4s;}
.step--welcome .fx-sparks span:nth-child(3){ left:44%; animation-delay:2.8s;width:5px; height:5px;}
.step--welcome .fx-sparks span:nth-child(4){ left:62%; animation-delay:4.2s;}
.step--welcome .fx-sparks span:nth-child(5){ left:78%; animation-delay:5.6s;width:3px; height:3px;}
.step--welcome .fx-sparks span:nth-child(6){ left:88%; animation-delay:7.0s;}
@keyframes spark-rise{
  0%   { transform:translateY(0)      translateX(0);   opacity:0; }
  15%  { opacity:.9; }
  85%  { opacity:.6; }
  100% { transform:translateY(-90vh) translateX(15px); opacity:0; }
}

/* Welcome и thanks — контент выше слоя FX */
.step--welcome > *, .step--thanks > *{ position:relative; z-index:1; }

/* ============================================================
   2) Пульсирующая точка (breathing dot) на welcome-meta
   ============================================================ */
.welcome__meta .dot{
  animation:dot-pulse 2.4s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(214,168,79,.6);
}
@keyframes dot-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(214,168,79,.6); transform:scale(1); }
  50%    { box-shadow:0 0 0 8px rgba(214,168,79,0); transform:scale(1.1); }
}
.welcome__meta li:nth-child(2) .dot{ animation-delay:.8s; }
.welcome__meta li:nth-child(3) .dot{ animation-delay:1.6s; }

/* ============================================================
   3) Дыхание бренд-лого при первом появлении
   ============================================================ */
.brand__logo{ animation:brand-breath 4s ease-in-out infinite; }
@keyframes brand-breath{
  0%,100%{ text-shadow:0 0 0 rgba(214,168,79,0); }
  50%    { text-shadow:0 0 22px rgba(214,168,79,.28); }
}

/* ============================================================
   4) CTA — shimmer + пульсация тени + wiggle стрелки
   ============================================================ */
.cta{
  position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .3s ease;
  animation:cta-glow 3.4s ease-in-out infinite;
}
.cta::before{
  content:""; position:absolute; top:0; left:-60%;
  width:60%; height:100%;
  background:linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.28) 50%,
    transparent 100%);
  transform:skewX(-20deg);
  animation:cta-shimmer 3.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cta-shimmer{
  0%   { left:-60%; }
  55%  { left:120%; }
  100% { left:120%; }
}
@keyframes cta-glow{
  0%,100%{ box-shadow:0 8px 20px rgba(214,168,79,.25); }
  50%    { box-shadow:0 12px 30px rgba(214,168,79,.45); }
}
.cta:hover{ transform:translateY(-1px); }
.cta:active{ transform:translateY(1px); }

/* стрелка (последний символ в кнопке) — качается */
.cta{ display:inline-flex; align-items:center; justify-content:center; }
.cta > *{ display:inline-block; }

/* ============================================================
   5) Progress bar — переливающийся градиент + мягкое свечение
   ============================================================ */
.progress{ box-shadow:inset 0 0 0 1px rgba(214,168,79,.08); }
.progress__bar{
  background:linear-gradient(90deg,
    var(--gold) 0%,
    var(--gold-2) 40%,
    var(--gold) 80%,
    var(--gold-2) 100%);
  background-size:200% 100%;
  animation:progress-shift 2.6s linear infinite;
  box-shadow:0 0 12px rgba(240,195,106,.4);
}
@keyframes progress-shift{
  0%   { background-position:0% 0; }
  100% { background-position:-200% 0; }
}

/* ============================================================
   6) Вопросы — переход с плавным сдвигом
   ============================================================ */
.q{ opacity:0; transform:translateX(20px); transition:none; }
.q.is-active{
  opacity:1; transform:none;
  animation:q-slide-in .38s cubic-bezier(.25,.7,.35,1) both;
}
@keyframes q-slide-in{
  from{ opacity:0; transform:translateX(24px); }
  to  { opacity:1; transform:translateX(0);    }
}

/* Kicker (Question 1 of 5) — небольшое появление */
.q__num{ animation:num-pop .4s ease-out .1s both; }
@keyframes num-pop{
  from{ opacity:0; transform:translateY(-4px); letter-spacing:5px; }
  to  { opacity:1; transform:none;              letter-spacing:2.5px; }
}

/* ============================================================
   7) Опции — stagger appearance (по очереди)
   ============================================================ */
.q.is-active .opt{
  opacity:0; transform:translateY(8px);
  animation:opt-in .38s ease-out forwards;
}
.q.is-active .opt:nth-child(1){ animation-delay:.05s; }
.q.is-active .opt:nth-child(2){ animation-delay:.10s; }
.q.is-active .opt:nth-child(3){ animation-delay:.15s; }
.q.is-active .opt:nth-child(4){ animation-delay:.20s; }
.q.is-active .opt:nth-child(5){ animation-delay:.25s; }
@keyframes opt-in{
  to{ opacity:1; transform:none; }
}

/* Опция при hover — glow-обводка */
.opt{ position:relative; overflow:hidden; }
.opt::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(214,168,79,0);
  transition:box-shadow .25s ease;
  pointer-events:none;
}
.opt:hover::after{ box-shadow:0 0 0 4px rgba(214,168,79,.15); }

/* Опция выбранная — пульс волной один раз */
.opt.is-selected{
  animation:opt-select-pulse .5s ease-out;
}
@keyframes opt-select-pulse{
  0%   { box-shadow:0 0 0 0 rgba(214,168,79,.5), inset 0 0 0 3px rgba(214,168,79,.15); }
  100% { box-shadow:0 0 0 18px rgba(214,168,79,0), inset 0 0 0 3px rgba(214,168,79,.15); }
}

/* ============================================================
   8) Thanks — Ripple вокруг чекмарка + shimmer заголовок
   ============================================================ */
.thanks__check{
  position:relative;
  animation:check-drop .7s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes check-drop{
  0%{ transform:scale(.4); opacity:0; }
  60%{ transform:scale(1.1); opacity:1; }
  100%{ transform:scale(1); }
}
.thanks__check::after{
  content:""; position:absolute; inset:-4px;
  border-radius:50%;
  border:2px solid var(--gold);
  opacity:0;
  animation:check-ripple 2.4s ease-out infinite;
  animation-delay:.6s;
}
@keyframes check-ripple{
  0%   { opacity:.7; transform:scale(1);   }
  70%  { opacity:0;  transform:scale(1.8); }
  100% { opacity:0;  transform:scale(1.8); }
}

/* Заголовок thanks — печатается-появляется */
.thanks__title{ animation:th-title-in .5s ease-out .2s both; }
@keyframes th-title-in{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none;              }
}

/* Карточка сегмента — reveal snap */
.thanks__card{ animation:card-in .5s ease-out .35s both; }
@keyframes card-in{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none;              }
}

/* ============================================================
   9) PDF-подарок — glow-обводка золотой рамки + parallax
   ============================================================ */
.pdf-gift{
  position:relative;
  animation:card-in .6s ease-out .45s both;
  overflow:visible !important;
}
.pdf-gift::before{
  content:""; position:absolute; inset:-2px;
  border-radius:calc(var(--radius-sm) + 2px);
  background:linear-gradient(135deg,
    rgba(214,168,79,.5) 0%,
    rgba(240,195,106,.15) 45%,
    rgba(214,168,79,.5) 100%);
  background-size:200% 200%;
  z-index:-1;
  animation:pdf-glow 4s ease-in-out infinite;
  filter:blur(6px);
  opacity:.9;
}
@keyframes pdf-glow{
  0%,100% { background-position:0% 0%;   opacity:.75; }
  50%     { background-position:100% 100%; opacity:1; }
}

/* Иконка ↗ на кнопке PDF — лёгкая пружина при hover */
.cta--pdf .pdf-icon{
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cta--pdf:hover .pdf-icon{ transform:translate(2px,-2px) rotate(-8deg); }

/* Fallback (когда PDF не сгенерился) — dashed border дышит */
.pdf-fallback{
  animation:card-in .5s ease-out .45s both, dash-breath 3s ease-in-out infinite;
}
@keyframes dash-breath{
  0%,100%{ border-color:var(--line-strong); }
  50%    { border-color:var(--gold); }
}

/* ============================================================
   10) Contact form — плавное появление полей
   ============================================================ */
.step--contact .contact{ animation:c-fade .35s ease-out both; }
@keyframes c-fade{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none;              }
}
.step--contact .field{
  opacity:0; transform:translateY(4px);
  animation:opt-in .35s ease-out forwards;
}
.step--contact .field:nth-child(1){ animation-delay:.08s; }
.step--contact .field:nth-child(2){ animation-delay:.16s; }
.step--contact .field:nth-child(3){ animation-delay:.24s; }
.step--contact .field:nth-child(4){ animation-delay:.32s; }

/* Ввод в фокусе — золотое свечение вокруг */
.field input:focus{
  box-shadow:0 0 0 4px rgba(214,168,79,.15);
  transition:box-shadow .2s ease, border-color .15s ease;
}
.phone-input.is-focus{
  box-shadow:0 0 0 4px rgba(214,168,79,.15);
  transition:box-shadow .2s ease;
}

/* ============================================================
   11) Тонкие бранд-линии на back-button
   ============================================================ */
.back{ transition:background .2s ease, transform .15s ease; }
.back:hover{ background:rgba(214,168,79,.18); transform:translateX(-2px); }

/* ============================================================
   12) Общий reveal при mount контейнера
   ============================================================ */
.app{ animation:app-mount .35s ease-out both; }
@keyframes app-mount{
  from{ opacity:0; }
  to  { opacity:1; }
}