/* ============================================================
   Праздничный слой: конфетти, огни, появления, параллакс.
   transform + opacity, ease-out cubic-bezier(.23,1,.32,1),
   всё гасится при prefers-reduced-motion.
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
}

/* ---------- конфетти ---------- */
#confetti{
  position:fixed;inset:0;z-index:70;pointer-events:none;
  width:100%;height:100%;
}

/* ---------- гирлянда огней на светлом фоне ---------- */
.lights{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lights i{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff8e6,rgba(231,201,123,.85) 52%,rgba(231,201,123,0) 74%);
  box-shadow:0 0 14px rgba(231,201,123,.55);
  animation:bokeh linear infinite;
  will-change:transform,opacity;
}
@keyframes bokeh{
  0%{transform:translate3d(0,18px,0) scale(.85);opacity:0}
  14%{opacity:1}
  86%{opacity:.65}
  100%{transform:translate3d(22px,-140px,0) scale(1.2);opacity:0}
}

/* ---------- имя по буквам ---------- */
.ltr{
  display:inline-block;
  transform:translate3d(0,.42em,0);
  opacity:0;
  filter:blur(7px);
  transition:transform .72s var(--ease-out),opacity .5s ease-out,filter .5s ease-out;
}
.ltr.in{transform:none;opacity:1;filter:none}

/* ---------- появление секций (усиленное) ---------- */
.rv{
  opacity:0;
  transform:translate3d(0,26px,0) scale(.985);
  transition:opacity .62s var(--ease-out),transform .62s var(--ease-out);
  will-change:transform,opacity;
}
.rv.in{opacity:1;transform:none;will-change:auto}

/* карточки въезжают по очереди */
.split .card{
  opacity:0;transform:translate3d(0,30px,0) scale(.97);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out),box-shadow .35s var(--ease-out);
}
.split.in .card{opacity:1;transform:none}
.split.in .card:nth-child(1){transition-delay:0ms}
.split.in .card:nth-child(2){transition-delay:70ms}
.split.in .card:nth-child(3){transition-delay:140ms}
.split.in .card:nth-child(4){transition-delay:210ms}
.split.in .card:nth-child(5){transition-delay:280ms}
.split.in .card:nth-child(6){transition-delay:350ms}

/* иконка в карточке оживает при наведении */
@media (hover:hover) and (pointer:fine){
  .card:hover .card__ico{transform:translate3d(0,-2px,0) rotate(-4deg)}
}
.card__ico{transition:transform .28s var(--ease-out)}

/* ---------- кнопки: нажатие и блик ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn__ink{
  position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:rgba(255,255,255,.65);pointer-events:none;
  transform:translate3d(-50%,-50%,0) scale(0);
  animation:ink .55s var(--ease-out) forwards;
}
@keyframes ink{to{transform:translate3d(-50%,-50%,0) scale(14);opacity:0}}
.btn--gold::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translate3d(-120%,0,0);
}
.btn--gold.sheen::after{animation:sheen 1.1s var(--ease-out)}
@keyframes sheen{to{transform:translate3d(120%,0,0)}}
@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{transform:translate3d(0,-2px,0)}
  .mod:hover{transform:translate3d(0,-2px,0)}
}

/* ---------- переключатели конструктора ---------- */
.mod{transition:border-color .25s var(--ease-out),background .25s var(--ease-out),transform .22s var(--ease-out),box-shadow .25s var(--ease-out)}
.mod[aria-pressed="true"]{box-shadow:0 10px 26px -14px rgba(166,144,88,.75)}
.mod__dot{transition:background .25s var(--ease-out),border-color .25s var(--ease-out),transform .3s var(--ease-out)}
.mod[aria-pressed="true"] .mod__dot{transform:scale(1.12)}
.chip{
  animation:chipIn .34s var(--ease-out) backwards;
}
@keyframes chipIn{from{opacity:0;transform:translate3d(0,7px,0) scale(.9)}}

/* сцена реагирует на включение */
.stage{transition:box-shadow .5s var(--ease-out)}
.stage.pulse{box-shadow:0 30px 70px -26px rgba(166,144,88,.85)}
.stage__cap{transition:opacity .3s ease-out,transform .3s var(--ease-out)}
.stage__cap.swap{opacity:0;transform:translate3d(0,-6px,0)}

/* шаги появляются по очереди */
.steps .step{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.steps.in .step{opacity:1;transform:none}
.steps.in .step:nth-child(2){transition-delay:80ms}
.steps.in .step:nth-child(3){transition-delay:160ms}
.steps.in .step:nth-child(4){transition-delay:240ms}
@media (prefers-reduced-motion:reduce){.steps .step{opacity:1;transform:none}}

/* ---------- счётчики ---------- */
.num{font-variant-numeric:tabular-nums}

/* ---------- галерея: параллакс и бесконечная лента ---------- */
.gal figure{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.gal img{will-change:transform}
@media (hover:hover) and (pointer:fine){
  .gal figure:hover{transform:translate3d(0,-6px,0)}
}
.gal figcaption{
  transform:translate3d(0,6px,0);opacity:0;
  transition:transform .4s var(--ease-out),opacity .4s ease-out;
}
.gal figure.seen figcaption{transform:none;opacity:1}

/* ---------- отзывы ---------- */
.rev{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .rev:hover{transform:translate3d(0,-4px,0);box-shadow:var(--shadow-m)}
}
.rev__q{display:inline-block;transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .rev:hover .rev__q{transform:translate3d(0,-3px,0) rotate(-6deg)}
}

/* ---------- FAQ: плавное раскрытие ---------- */
.faq__body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .34s var(--ease-io);
}
.faq details[open] .faq__body{grid-template-rows:1fr}
.faq__body>div{overflow:hidden}
.faq__body p{
  opacity:0;transform:translate3d(0,-6px,0);
  transition:opacity .3s ease-out .06s,transform .3s var(--ease-out) .06s;
}
.faq details[open] .faq__body p{opacity:1;transform:none}

/* ---------- финальный блок ---------- */
.final{isolation:isolate}
.final .lights i{background:radial-gradient(circle at 35% 35%,rgba(255,246,224,.9),rgba(231,201,123,.35) 55%,transparent 72%)}

/* ---------- разделитель-серпантин ---------- */
.ribbon{
  position:relative;height:22px;margin-bottom:-2px;
  background:radial-gradient(11px 22px at 11px 0,transparent 97%,var(--gold) 100%) repeat-x 0 0/22px 22px;
  opacity:.85;
}
.ribbon::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold-2);opacity:.5;
}

/* ---------- шапка сжимается ---------- */
.hdr__in{transition:height .3s var(--ease-out)}
.hdr.is-stuck .hdr__in{height:50px}

/* ---------- прожектор за курсором (только мышь) ---------- */
@media (hover:hover) and (pointer:fine){
  .hero__spot{
    position:absolute;inset:0;pointer-events:none;z-index:1;
    background:radial-gradient(220px 220px at var(--mx,50%) var(--my,30%),rgba(231,201,123,.22),transparent 70%);
    transition:opacity .4s ease-out;
  }
}
.hero__spot{display:none}
@media (hover:hover) and (pointer:fine){.hero__spot{display:block}}

/* ---------- тише при просьбе уменьшить движение ---------- */
@media (prefers-reduced-motion:reduce){
  .lights,#confetti,.hero__spot{display:none!important}
  .ltr{opacity:1;transform:none;filter:none;transition:none}
  .rv,.split .card{opacity:1;transform:none;transition:opacity .2s ease}
  .btn--gold.sheen::after{animation:none}
  .gal figcaption{opacity:1;transform:none}
}