/* =========================================================
   PROEDITORS — motion design layer (2026)
   Подключается после plstudio.css и только дополняет его.
   Всё построено на классе html.motion-ready, который
   ставит motion.js: без JS сайт остаётся полностью видимым.
   ========================================================= */

:root{
  --eo:cubic-bezier(.16,1,.3,1);
  --eo-soft:cubic-bezier(.22,.61,.36,1);
  --glow-1:rgba(92,225,255,.55);
  --glow-2:rgba(76,91,255,.5);
  --glow-3:rgba(139,92,255,.5);
}

/* ---------- полоса прогресса чтения ---------- */

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  height:2px;
  background:rgba(255,255,255,.045);
  pointer-events:none;
}

.scroll-progress span{
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(var(--p,0));
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-3),var(--accent),var(--accent-2));
  box-shadow:0 0 16px rgba(76,91,255,.7);
  will-change:transform;
}

/* ---------- шапка: компакт при скролле ---------- */

.nav{
  transition:
    padding .45s var(--eo),
    background .45s ease,
    box-shadow .45s ease,
    border-color .45s ease;
}

body.is-scrolled .nav{
  padding:6px 8px 6px 18px;
  background:rgba(4,4,9,.9);
  border-color:rgba(255,255,255,.14);
  box-shadow:
    0 18px 50px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.1);
}

/* фиксированная шапка: меньше blur и плотнее фон — дешевле при скролле */
.nav{
  background:rgba(6,6,11,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

body.is-scrolled .brand-mark{
  box-shadow:0 0 30px rgba(76,91,255,.65);
}

/* ---------- reveal: мягкий подъём без тяжёлого blur ---------- */

html.motion-ready .reveal{
  opacity:0;
  translate:0 30px;
  scale:.988;
  transition:
    opacity .7s ease,
    translate .85s var(--eo),
    scale .85s var(--eo),
    transform .3s ease,
    border-color .3s ease,
    background .3s ease;
  transition-delay:var(--delay,0s);
}

html.motion-ready .reveal:not(.is-visible){transform:none}

html.motion-ready .reveal.is-visible{
  opacity:1;
  translate:none;
  scale:none;
  transition-delay:0s;
}

/* ---------- hero: сборка сцены ---------- */

/* место под три строки заголовка — печать не дёргает layout */
html.motion-ready .hero h1{
  min-height:2.95em;
  opacity:0;
  transition:opacity .35s ease;
}

html.motion-ready .hero.is-in h1{opacity:1}

/* каретка печатающей машинки: нулевая ширина, чтобы не
   провоцировать перенос строки на границе контейнера */
.type-caret{
  position:relative;
  display:inline-block;
  width:0;
  height:.82em;
  vertical-align:-.04em;
}

.type-caret::after{
  content:"";
  position:absolute;
  left:.05em;
  top:0;
  width:.085em;
  height:100%;
  border-radius:2px;
  background:linear-gradient(180deg,var(--accent-3),var(--accent-2));
  box-shadow:0 0 16px rgba(92,225,255,.85);
  animation:caret-blink 1s steps(1) infinite;
}

.type-caret.is-done::after{
  animation:caret-fade 1.6s ease .25s forwards;
}

@keyframes caret-blink{
  0%,48%{opacity:1}
  49%,100%{opacity:0}
}

@keyframes caret-fade{
  from{opacity:1}
  to{opacity:0}
}

html.motion-ready .hero .eyebrow,
html.motion-ready .hero-lead,
html.motion-ready .hero-actions,
html.motion-ready .hero-note{
  opacity:0;
  translate:0 18px;
  transition:
    opacity .7s ease,
    translate .85s var(--eo);
}

html.motion-ready .hero.is-in .eyebrow{
  opacity:1;
  translate:none;
  transition-delay:.02s;
}

html.motion-ready .hero.is-in .hero-lead{
  opacity:1;
  translate:none;
  transition-delay:.16s;
}

html.motion-ready .hero.is-in .hero-actions{
  opacity:1;
  translate:none;
  transition-delay:.28s;
}

html.motion-ready .hero.is-in .hero-note{
  opacity:1;
  translate:none;
  transition-delay:.38s;
}

/* карточки визуала собираются по очереди */
html.motion-ready .hero-visual .glass-card{
  opacity:0;
  scale:.9;
  transition:
    opacity .8s ease,
    scale 1s var(--eo);
}

html.motion-ready .hero.is-in .hero-visual .preview-card{
  opacity:1;
  scale:1;
  transition-delay:.18s;
}

html.motion-ready .hero.is-in .hero-visual .sound-card{
  opacity:1;
  scale:1;
  transition-delay:.34s;
}

html.motion-ready .hero.is-in .hero-visual .format-badge{
  opacity:1;
  scale:1;
  transition-delay:.46s;
}

/* прогресс-бар превью оживает */
.progress span{
  transform-origin:0 50%;
  animation:progress-in 2.4s var(--eo) infinite;
}

@keyframes progress-in{
  0%{transform:scaleX(.02)}
  55%{transform:scaleX(.62)}
  70%{transform:scaleX(.62)}
  100%{transform:scaleX(.02)}
}

/* свечение оставлено статичным: анимация scale у blur-слоя
   заставляла браузер перерисовывать его каждый кадр */

/* ---------- заголовки: split по словам ---------- */

.split-word{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}

.split-word > span{
  display:inline-block;
  translate:0 118%;
  rotate:3deg;
  opacity:0;
  transition:
    translate .95s var(--eo),
    rotate .95s var(--eo),
    opacity .55s ease;
  transition-delay:var(--wd,0s);
  will-change:translate, rotate;
}

h2.is-in .split-word > span{
  translate:0 0;
  rotate:0deg;
  opacity:1;
}

/* заголовки без split: цельный reveal без обрезки букв */
html.motion-ready .section-head h2.no-split{
  opacity:0;
  translate:0 22px;
  transition:opacity .6s ease, translate .8s var(--eo);
}

html.motion-ready .section-head.is-visible h2.no-split{
  opacity:1;
  translate:none;
}

/* ---------- стеклянные карточки: spotlight за курсором ---------- */

.glass-card:not(.contact-form)::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  z-index:2;
  background:
    radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
      rgba(130,142,255,.2),
      rgba(92,225,255,.07) 42%,
      transparent 68%);
  transition:opacity .4s ease;
}

.glass-card:not(.contact-form):hover::after{opacity:1}

/* ---------- 3D-наклон hero-сцены ---------- */

@media (hover:hover) and (pointer:fine){
  .hero-visual{
    perspective:1100px;
    perspective-origin:50% 45%;
  }

  .hero-visual .glass-card{
    transform-style:preserve-3d;
    will-change:transform;
  }

  .preview-card{
    --rot:-3deg;
    --rx:0deg;
    --ry:0deg;
    --tx:0px;
    --ty:0px;
    transform:
      rotate(var(--rot))
      translate3d(var(--tx),var(--ty),0)
      rotateX(var(--rx))
      rotateY(var(--ry));
    animation:float 9s ease-in-out infinite;
  }

  .sound-card{
    --rot:5deg;
    --rx:0deg;
    --ry:0deg;
    --tx:0px;
    --ty:0px;
    transform:
      rotate(var(--rot))
      translate3d(var(--tx),var(--ty),0)
      rotateX(var(--rx))
      rotateY(var(--ry));
  }

  .format-badge{
    --rot:4deg;
    --rx:0deg;
    --ry:0deg;
    --tx:0px;
    --ty:0px;
    transform:
      rotate(var(--rot))
      translate3d(var(--tx),var(--ty),0)
      rotateX(var(--rx))
      rotateY(var(--ry));
  }
}

/* ---------- магнитные кнопки ---------- */

@media (hover:hover) and (pointer:fine){
  .btn{
    --mag-x:0px;
    --mag-y:0px;
    translate:var(--mag-x) var(--mag-y);
    transition:
      translate .4s var(--eo),
      transform .2s ease,
      background .2s ease,
      border-color .2s ease,
      box-shadow .2s ease,
      color .2s ease;
  }

  .btn .btn-arrow{
    translate:calc(var(--mag-x) * .55) calc(var(--mag-y) * .55);
    transition:translate .4s var(--eo), transform .2s ease;
  }
}

/* ---------- микро-интеракции карточек ---------- */

.format-icon{
  transition:translate .45s var(--eo), rotate .45s var(--eo), color .3s ease;
}

.format-card:hover .format-icon{
  translate:0 -6px;
  rotate:-4deg;
  color:#cfd5ff;
}

.work-card .work-arrow{
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .35s var(--eo);
}

.work-card:hover .work-arrow{
  transform:translateY(-50%) scale(1.1) rotate(0deg);
}

.work-num{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  transition:color .3s ease, text-shadow .3s ease;
}

.work-card:hover .work-num{
  color:#b9c0ff;
  text-shadow:0 0 24px rgba(76,91,255,.65);
}

/* ---------- производительность при прокрутке ----------
   Каждый backdrop-filter на большой площади пересчитывается
   на каждом кадре скролла. На тёмном фоне его роль почти
   незаметна, поэтому снимаем его с карточек и «шумного» слоя. */

.glass-card{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* герой-карточкам даём плотную подложку вместо блюра */
.hero-visual .preview-card,
.hero-visual .sound-card,
.hero-visual .format-badge{
  background:linear-gradient(180deg, rgba(26,27,47,.94), rgba(10,10,20,.92));
}

/* мягкий свет под курсором без дорогого blend-режима */
.glass-card:not(.contact-form)::after{
  background:
    radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
      rgba(130,142,255,.14),
      rgba(92,225,255,.05) 42%,
      transparent 70%);
}

.glass-card:not(.contact-form):hover::after{opacity:1}

/* фоновая сетка и «шум»: обычный alpha-слой вместо soft-light */
.page-noise{
  mix-blend-mode:normal;
  opacity:.14;
}

/* звёзды: без свечения у обычных точек — их 50+ штук */
.star{box-shadow:none}
.star.blue{box-shadow:0 0 8px rgba(76,91,255,.85)}

/* вращение тонкого кольца — постоянная перерисовка маски */
.visual-ring::before{animation:none}

/* стеклянные кнопки на тёмном фоне читаются и без blur */
.btn-glass{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* ---------- интро-шторка ---------- */

.motion-curtain{
  position:fixed;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%, #0c0c1c, #050507 68%);
  transform:translateY(0);
  transition:
    transform .72s var(--eo),
    opacity .55s ease .12s;
}

.motion-curtain.is-lifting{
  transform:translateY(-100%);
  opacity:.35;
}

.motion-curtain-inner{
  display:grid;
  justify-items:center;
  gap:16px;
}

.motion-curtain-brand{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,4vw,2rem);
  font-weight:700;
  letter-spacing:.32em;
  text-transform:uppercase;
  text-indent:.32em;
  background:linear-gradient(100deg,#fff 0%,#aeb4ff 55%,#8b5cff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:curtain-pop .8s var(--eo) both;
}

.motion-curtain-line{
  display:block;
  width:132px;
  height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}

.motion-curtain-line i{
  display:block;
  width:100%;
  height:100%;
  transform-origin:0 50%;
  transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent-3),var(--accent),var(--accent-2));
  animation:curtain-load .58s var(--eo-soft) .06s forwards;
}

@keyframes curtain-pop{
  from{opacity:0;translate:0 14px;filter:blur(6px)}
  to{opacity:1;translate:none;filter:none}
}

@keyframes curtain-load{
  to{transform:scaleX(1)}
}

/* ---------- reduced motion: всё показываем сразу ---------- */

@media (prefers-reduced-motion:reduce){
  html.motion-ready .reveal,
  html.motion-ready .hero h1,
  html.motion-ready .hero .eyebrow,
  html.motion-ready .hero-lead,
  html.motion-ready .hero-actions,
  html.motion-ready .hero-note,
  html.motion-ready .hero-visual .glass-card{
    opacity:1 !important;
    translate:none !important;
    scale:none !important;
    filter:none !important;
    clip-path:none !important;
  }

  .split-word > span{
    opacity:1 !important;
    translate:none !important;
    rotate:0deg !important;
  }

  html.motion-ready .section-head h2.no-split{
    opacity:1 !important;
    translate:none !important;
  }

  .motion-curtain,
  .type-caret{display:none !important}

  .progress span,
  .visual-glow{animation:none !important}

  .glass-card::after{display:none !important}
}

/* ---------- маленькие экраны ---------- */

@media (max-width:640px){
  .scroll-progress{height:2px}
  body.is-scrolled .nav{padding:7px 10px 7px 16px}
  html.motion-ready .hero h1{min-height:2.95em}
}