/* ==========================================================================
   Web Project Group — динамика и анимации
   Подключается после css/style.css.

   Все стартовые «спрятанные» состояния работают только при классе .motion
   на <html>. Его ставит маленький скрипт в <head>, если пользователь
   не просил уменьшить движение (prefers-reduced-motion). Без JS или
   с отключённой анимацией страница показывается целиком и статично.

   1. Общие переменные
   2. Фон: плавающие фигуры и свечение
   3. Появление блоков при прокрутке
   4. Заголовки по словам / буквам
   5. Барабаны цифр
   6. Карточки: наклон, блик, иконки
   7. Кнопка, QR, мелочи
   ========================================================================== */

/* ==========================================================================
   1. Общие переменные
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --ease-in: cubic-bezier(.55, 0, .85, .2);

}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.card {
  position: relative;
}

/* ==========================================================================
   2. Фон: плавающие фигуры и свечение (создаются скриптом)
   ========================================================================== */

.bits {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bits i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border: .2rem solid var(--color-accent);
  border-radius: .4rem;
  opacity: .3;
  animation: drift var(--t) ease-in-out var(--d) infinite alternate;
}

.bits i:nth-child(3n) { border-radius: 50%; }

.bits i:nth-child(3n + 1) {
  border: 0;
  background: var(--color-accent);
  opacity: .16;
}

.bits b {
  position: absolute;
  width: 70rem;
  height: 70rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215, 102, 44, .16), transparent 65%);
  animation: glow 24s ease-in-out infinite alternate;
}

.bits b:nth-of-type(1) { left: -20rem; top: 8rem; }
.bits b:nth-of-type(2) { right: -24rem; top: 38%; animation-duration: 30s; animation-direction: alternate-reverse; }
.bits b:nth-of-type(3) { left: 10%; bottom: -20rem; animation-duration: 27s; }

@keyframes drift {
  to { translate: var(--dx) var(--dy); rotate: var(--r); }
}

@keyframes glow {
  to { translate: 18rem 12rem; scale: 1.25; }
}

/* ==========================================================================
   3. Появление блоков при прокрутке
   Используются отдельные свойства translate / rotate / scale,
   чтобы не мешать transform, которым карточки наклоняются под курсором.
   ========================================================================== */

.motion :is(.masthead__logo, .lead, .intro > p, .section__intro,
  .service, .feature, .outcome, .benefit, .condition, .note, .contact,
  .request, .footer) {
  transition:
    opacity .9s ease var(--rv-d, 0s),
    translate 1.2s var(--ease-out) var(--rv-d, 0s),
    rotate 1.2s var(--ease-out) var(--rv-d, 0s),
    scale 1.2s var(--ease-out) var(--rv-d, 0s),
    filter .9s ease var(--rv-d, 0s),
    transform .5s var(--ease-out),
    box-shadow .4s ease;
}

.motion :is(.masthead__logo, .lead, .intro > p, .section__intro,
  .service, .feature, .outcome, .benefit, .condition, .note, .contact,
  .request, .footer):not(.is-in) {
  opacity: 0;
  translate: 0 4rem;
}

/* Варианты «откуда прилетает» */
.motion .masthead__logo:not(.is-in)            { translate: 40% 0; rotate: 10deg; scale: .7; }

.motion .service:nth-child(odd):not(.is-in)    { translate: -40% 14%; rotate: -8deg; filter: blur(.6rem); }
.motion .service:nth-child(even):not(.is-in)   { translate: 40% 14%; rotate: 8deg; filter: blur(.6rem); }
.motion .feature:not(.is-in)                   { translate: 0 60%; scale: .8; filter: blur(.6rem); }

.motion .outcome.grid__full:not(.is-in)        { translate: 0 30%; scale: .9; }
.motion .outcome:nth-child(even):not(.is-in)   { translate: -25% 0; rotate: -3deg; }
.motion .outcome:nth-child(odd):not(.grid__full):not(.is-in) { translate: 25% 0; rotate: 3deg; }

.motion .benefit:first-child:not(.is-in)       { translate: -30% 0; rotate: -4deg; }
.motion .benefit:last-child:not(.is-in)        { translate: 30% 0; rotate: 4deg; }

.conditions { perspective: 160rem; }
.motion .condition { transform-origin: 50% 0; }
.motion .condition:not(.is-in)                 { translate: 0 3rem; rotate: x -80deg; }

.motion .note:not(.is-in)                      { translate: 0 3rem; scale: .92; }
.motion .contact:first-child:not(.is-in)       { translate: -20% 0; }
.motion .contact:last-child:not(.is-in)        { translate: 20% 0; }
.motion .request:not(.is-in)                   { translate: 0 8rem; scale: .92; }

/* Подчёркивание акцентов во вступлении прорисовывается */
.motion .intro .accent {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 .08em no-repeat;
  transition: background-size 1s var(--ease-out) calc(var(--rv-d, 0s) + .5s);
}

.motion .intro .accent + .accent { transition-delay: calc(var(--rv-d, 0s) + .8s); }
.motion .intro .accent + .accent + .accent { transition-delay: calc(var(--rv-d, 0s) + 1.1s); }
.motion .intro > p.is-in .accent { background-size: 100% .08em; }

/* ==========================================================================
   4. Заголовки: слова (и буквы в h1) выезжают из-под маски
   ========================================================================== */

.motion :is(.masthead__title, .section__title, .request__title):not(.is-split) {
  opacity: 0;
}

.split-w {
  display: inline-block;
  white-space: nowrap;
  clip-path: inset(-.15em -.15em -.3em);
}

.split-w__i {
  display: inline-block;
  transform-origin: 0 100%;
}

.motion .split-w__i {
  translate: 0 120%;
  rotate: 8deg;
  opacity: 0;
  transition:
    translate 1s var(--ease-out) calc(var(--rv-d, 0s) + var(--wd, 0s)),
    rotate 1s var(--ease-out) calc(var(--rv-d, 0s) + var(--wd, 0s)),
    opacity .4s ease calc(var(--rv-d, 0s) + var(--wd, 0s));
}

.motion .is-in .split-w__i {
  translate: 0 0;
  rotate: 0deg;
  opacity: 1;
}

/* ==========================================================================
   5. Барабаны цифр
   ========================================================================== */

.reel {
  position: relative;
  display: inline-block;
  clip-path: inset(0 -.2em);
}

.reel__ghost {
  visibility: hidden;
}

.reel__strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: translate var(--rd, 1.6s) cubic-bezier(.15, .85, .2, 1) var(--rdl, 0s);
}

.reel__strip > span {
  display: block;
}

.is-rolled .reel__strip {
  translate: 0 calc(-100% * var(--to) / 30);
}

.reel-reset .reel__strip {
  transition: none;
}

/* ==========================================================================
   6. Карточки: наклон под курсором, блик, живые иконки
   ========================================================================== */

.tilt {
  transform: perspective(110rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(36rem circle at var(--mx, 50%) var(--my, 50%), rgba(215, 102, 44, .11), transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.tilt:hover::after { opacity: 1; }

.tilt:hover {
  box-shadow: 0 2.6rem 5rem -2.6rem rgba(45, 45, 45, .3);
}

.motion :is(.service__icon, .feature__icon) {
  animation: bob 5s ease-in-out infinite;
}

.motion .service:nth-child(2) .service__icon { animation-delay: -1.2s; }
.motion .service:nth-child(3) .service__icon { animation-delay: -2.4s; }
.motion .service:nth-child(4) .service__icon { animation-delay: -3.6s; }

@keyframes bob {
  50% { translate: 0 -.8rem; rotate: -4deg; }
}

.motion .condition__icon {
  scale: .3;
  rotate: -60deg;
  opacity: 0;
  transition:
    scale .9s var(--ease-spring) calc(var(--rv-d, 0s) + .45s),
    rotate .9s var(--ease-spring) calc(var(--rv-d, 0s) + .45s),
    opacity .4s ease calc(var(--rv-d, 0s) + .45s);
}

.motion .condition.is-in .condition__icon {
  scale: 1;
  rotate: 0deg;
  opacity: 1;
}

.motion .condition.is-in:hover .condition__icon {
  scale: 1.1;
  rotate: 10deg;
  transition-delay: 0s;
}

.motion .note__icon { animation: ping 2.8s ease-in-out infinite; }

@keyframes ping {
  0%, 60%, 100% { scale: 1; }
  30% { scale: 1.15; }
}

/* ==========================================================================
   7. Кнопка, QR-код, полоса прокрутки, поля
   ========================================================================== */

.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color .2s ease, translate .3s var(--ease-out), scale .15s ease, box-shadow .3s ease;
}

.button::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  translate: -150% 0;
  pointer-events: none;
}

.motion .button::after { animation: shine 3.8s ease-in-out 1.5s infinite; }

.button:hover {
  translate: 0 -.3rem;
  box-shadow: 0 1.4rem 3rem -1.2rem rgba(215, 102, 44, .75);
}

.button:active {
  translate: 0 0;
  scale: .97;
}

@keyframes shine {
  0%        { translate: -150% 0; }
  35%, 100% { translate: 300% 0; }
}

.field__label { transition: color .2s ease; }
.field:focus-within .field__label { color: var(--color-accent); }
.field__input { transition: border-color .2s ease, box-shadow .2s ease; }
.field__input:focus { box-shadow: 0 0 0 .4rem rgba(215, 102, 44, .14); }

.contact__qr-wrap {
  position: relative;
  flex: 0 0 auto;
  width: var(--icon-qr);
  border-radius: var(--radius-qr);
  overflow: hidden;
}

.contact__qr-wrap .contact__qr {
  width: 100%;
}

.contact__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18%;
  background: linear-gradient(180deg, transparent, rgba(215, 102, 44, .3));
  border-bottom: 2px solid var(--color-accent);
  opacity: 0;
  pointer-events: none;
}

.motion .contact.is-in .contact__scan { animation: scan 3.4s ease-in-out 1s infinite; }

@keyframes scan {
  0%   { translate: 0 -100%; opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { translate: 0 560%; opacity: 0; }
}

.scroll-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 900;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), #f2a574);
  transform-origin: 0 50%;
  scale: var(--p, 0) 1;
  pointer-events: none;
}

/* Анимации вне экрана ставим на паузу */
.is-paused,
.is-paused * {
  animation-play-state: paused !important;
}