/* PROFI-DESIGN · Moscow / motion.css v0.1.0
   Движок сайта: пресеты fx-* на нативных CSS scroll-driven animations (2026):
   animation-timeline: view()/scroll() + animation-range. Анимируем ТОЛЬКО
   opacity/transform (композитор, 60fps).
   Фолбэк: html.no-sda (ставит motion.js, если браузер не поддерживает) —
   IntersectionObserver + CSS-переменные прогресса.
   prefers-reduced-motion: reduce — всё видимо, без движения. */

/* ── keyframes ── */
@keyframes pd-reveal{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes pd-line{from{transform:translateY(112%)}to{transform:none}}
@keyframes pd-par{from{transform:translateY(-9%) scale(1.06)}to{transform:translateY(9%) scale(1.06)}}
@keyframes pd-scale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes pd-hs{from{transform:translateX(0)}to{transform:translateX(calc(-100% + 100vw))}}
@keyframes pd-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pd-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── глобальная линия прогресса скролла ── */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    .pd-progress{animation:pd-progress linear both;animation-timeline:scroll(root)}
  }
}
@media (prefers-reduced-motion: reduce){ .pd-progress{display:none} }

/* ── scroll-driven пресеты (современные браузеры) ── */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .fx-reveal{animation:pd-reveal linear both;animation-timeline:view();animation-range:entry 6% entry 40%}
    .fx-scale-in{animation:pd-scale linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .fx-reveal-lines .ln{display:block;overflow:hidden}
    .fx-reveal-lines .ln>i{display:block;font-style:inherit;animation:pd-line linear both;
      animation-timeline:view();animation-range:entry 8% entry 44%}
    .fx-reveal-lines .ln:nth-child(2)>i{animation-range:entry 13% entry 49%}
    .fx-reveal-lines .ln:nth-child(3)>i{animation-range:entry 18% entry 54%}
    .fx-reveal-lines .ln:nth-child(4)>i{animation-range:entry 23% entry 59%}
    .fx-reveal-lines .ln:nth-child(5)>i{animation-range:entry 28% entry 64%}
    .fx-reveal-lines .ln:nth-child(6)>i{animation-range:entry 33% entry 69%}
    .fx-parallax{animation:pd-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%;will-change:transform}
    .fx-hscroll{view-timeline-name:--pd-hs;view-timeline-axis:block}
    .fx-hscroll__track{animation:pd-hs linear both;animation-timeline:--pd-hs;animation-range:contain 0% contain 100%;will-change:transform}
  }
}

/* ── разметка пресетов (работает в обоих режимах и БЕЗ js) ── */
.fx-reveal-lines .ln{display:block;overflow:hidden}
.fx-reveal-lines .ln>i{display:block;font-style:inherit}
.fx-hscroll{height:320vh;position:relative}
.fx-hscroll__stick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.fx-hscroll__track{display:flex;gap:clamp(16px,2vw,28px);width:max-content;
  padding-inline:clamp(20px,4.2vw,64px)}
.fx-marquee{overflow:hidden}
.fx-marquee__row{display:flex;gap:clamp(28px,4vw,64px);width:max-content;
  animation:pd-marq 30s linear infinite}
.fx-marquee:hover .fx-marquee__row{animation-play-state:paused}
.fx-pin__col{position:sticky;top:calc(var(--pd-header-h) + 28px)}
.fx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .25s var(--pd-ease),border-color .3s,box-shadow .3s;position:relative}
.fx-tilt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--gx,50%) 30%,rgba(255,255,255,.14),transparent 60%)}
.fx-tilt:hover::after{opacity:1}

/* hero: кинетический вход по загрузке (time-based, не scroll) */
[data-pd-hero] .ln>i{transform:translateY(112%);transition:transform .9s var(--pd-ease)}
[data-pd-hero].is-ready .ln>i{transform:none}
[data-pd-hero] .ln:nth-child(2)>i{transition-delay:.09s}
[data-pd-hero] .ln:nth-child(3)>i{transition-delay:.18s}
[data-pd-hero] .ln>i{display:block;font-style:inherit}
[data-pd-hero] .ln{display:block;overflow:hidden}
[data-pd-hero] .pd-hero__img{transform:scale(1.12);opacity:0;transition:transform 1.4s var(--pd-ease),opacity 1s ease}
[data-pd-hero].is-ready .pd-hero__img{transform:scale(1);opacity:1}

/* ── фолбэк html.no-sda (IntersectionObserver + прогресс-переменные из motion.js) ── */
html.no-sda .fx-reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--pd-ease),transform .7s var(--pd-ease)}
html.no-sda .fx-reveal.fx-in{opacity:1;transform:none}
html.no-sda .fx-scale-in{opacity:0;transform:scale(.94);transition:opacity .7s var(--pd-ease),transform .7s var(--pd-ease)}
html.no-sda .fx-scale-in.fx-in{opacity:1;transform:scale(1)}
html.no-sda .fx-reveal-lines .ln{display:block;overflow:hidden}
html.no-sda .fx-reveal-lines .ln>i{display:block;font-style:inherit;transform:translateY(112%);transition:transform .85s var(--pd-ease)}
html.no-sda .fx-reveal-lines .ln:nth-child(2)>i{transition-delay:.08s}
html.no-sda .fx-reveal-lines .ln:nth-child(3)>i{transition-delay:.16s}
html.no-sda .fx-reveal-lines .ln:nth-child(4)>i{transition-delay:.24s}
html.no-sda .fx-reveal-lines.fx-in .ln>i{transform:none}
html.no-sda .fx-parallax{transform:translateY(calc((var(--pd-p,.5) - .5) * 18%)) scale(1.06)}
html.no-sda .fx-hscroll__track{transform:translateX(calc(var(--pd-p,0) * (-100% + 100vw)))}
html.no-sda .pd-progress{transform:scaleX(var(--pd-scroll,0))}

/* ── мобильный: горизонтальная лента становится вертикальной ── */
@media (max-width:760px){
  .fx-hscroll{height:auto}
  .fx-hscroll__stick{position:static;height:auto;overflow:visible;padding-block:8px}
  .fx-hscroll__track{flex-direction:column;width:auto;transform:none!important;animation:none!important}
}

/* ── reduced motion: всё видно, ничего не движется ── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .fx-marquee__row{animation:none;transform:none}
  .fx-hscroll{height:auto}
  .fx-hscroll__stick{position:static;height:auto;overflow:visible}
  .fx-hscroll__track{flex-direction:column;width:auto;transform:none!important;animation:none!important}
  .fx-parallax{transform:none!important;animation:none!important}
  .fx-tilt{transform:none!important}
  .fx-tilt::after{display:none}
  [data-pd-hero] .ln>i,[data-pd-hero] .pd-hero__img{transform:none!important;opacity:1!important;transition:none!important}
  html.no-sda [class*="fx-"]{opacity:1!important;transform:none!important;transition:none!important}
  .pd-btn,.pd-nav a,.pd-header{transition:none}
}