/* ===== FSO Guard — Motion layer v1 (21.09.2026) =====
   Лёгкие анимации поверх skin-d: только transform/opacity (без сдвигов макета, без влияния на LCP/CLS),
   без библиотек. Отключается при prefers-reduced-motion. Hover-эффекты — только на устройствах с мышью. */
:root{--m-dur:640ms;--m-ease:cubic-bezier(.16,1,.3,1);--m-lift:-4px}

/* 1. Появление блоков при прокрутке: чуть заметнее, чем базовое (18px, 640ms), ступенчато */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease)}
html.js .reveal.is-in{opacity:1;transform:none}
html.js .reveal[data-d="1"]{transition-delay:90ms}
html.js .reveal[data-d="2"]{transition-delay:180ms}
html.js .reveal[data-d="3"]{transition-delay:270ms}
html.js .reveal[data-d="4"]{transition-delay:360ms}
html.js .reveal[data-d="5"]{transition-delay:450ms}
/* линия у надзаголовка «рисуется» после появления блока */
html.js .reveal .eyebrow::before,html.js .reveal .eyebrow::after{transform:scaleX(0);transform-origin:left center;transition:transform 520ms var(--m-ease) 220ms}
html.js .reveal.is-in .eyebrow::before,html.js .reveal.is-in .eyebrow::after{transform:scaleX(1)}
/* шаги процесса: вертикальная линия слева проявляется золотом */
html.js .step.reveal{border-left-color:transparent}
html.js .step.reveal.is-in{border-left-color:rgba(196,165,90,.55);transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease),border-color 900ms var(--m-ease) 300ms}
/* фигуры в тексте: лёгкое «раскрытие» */
html.js .prose figure.reveal{transform:translateY(14px) scale(.985)}
html.js .prose figure.reveal.is-in{transform:none}

/* 2. Главный экран: медленное «дыхание» фона (24 с), заголовки как раньше — мгновенно */
@media (min-width:768px){
  html.js .hero-media img{animation:fso-kenburns 24s var(--m-ease) both;transform-origin:50% 35%}
}
@keyframes fso-kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
/* стрелка-подсказка вниз под первым экраном главной — не добавляем (лишний элемент) */

/* 3. Карточки и кнопки — только для мыши */
@media (hover:hover) and (pointer:fine){
  .card{transition:transform 320ms var(--m-ease),border-color 320ms var(--m-ease),box-shadow 320ms var(--m-ease)}
  .card:hover{transform:translateY(var(--m-lift));border-top-color:var(--gold);box-shadow:0 22px 40px -24px rgba(8,10,14,.35)}
  .section--dark .card:hover{border-top-color:var(--gold);box-shadow:0 22px 40px -24px rgba(0,0,0,.7)}
  .card-media img{transition:transform 900ms var(--m-ease)}
  .card:hover .card-media img{transform:scale(1.045)}
  .card-link{position:relative;display:inline-block;transition:color 200ms,letter-spacing 320ms var(--m-ease),transform 320ms var(--m-ease)}
  .card:hover .card-link{transform:translateX(4px)}
  .btn{transition:background-color 160ms,border-color 160ms,color 160ms,transform 220ms var(--m-ease),box-shadow 220ms var(--m-ease)}
  .btn:hover{transform:translateY(-1px)}
  .btn-gold:hover{box-shadow:0 10px 24px -12px rgba(196,165,90,.6)}
  .btn:active{transform:translateY(0) scale(.985)}
  .feature{transition:transform 320ms var(--m-ease)}
  .feature-icon{transition:border-color 320ms var(--m-ease),background-color 320ms var(--m-ease),color 320ms var(--m-ease),transform 420ms var(--m-ease)}
  .feature:hover .feature-icon{border-color:var(--gold);background:rgba(196,165,90,.08);transform:translateY(-2px)}
  .chip{transition:border-color 200ms,background-color 200ms,transform 200ms var(--m-ease)}
  .chip:hover{transform:translateY(-1px)}
  .side-card{transition:border-color 320ms var(--m-ease)}
  .side-card:hover{border-color:rgba(196,165,90,.5)}
  /* 4. Меню: золотая линия рисуется слева направо вместо обычного подчёркивания */
  @media (min-width:961px){
    .main-nav>ul>li>a{position:relative;text-decoration:none!important}
    /* 22.09.2026: линия — через ::before, т.к. ::after у пунктов с подменю занят стрелкой (иначе стрелка получала золотую заливку и меняла форму при наведении) */
    .main-nav>ul>li>a::before{content:'';position:absolute;left:9px;right:9px;bottom:5px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform 320ms var(--m-ease)}
    .main-nav>ul>li>a:hover::before,.main-nav>ul>li.is-open>a::before,.main-nav>ul>li.current-menu-item>a::before,.main-nav>ul>li.current-menu-ancestor>a::before{transform:scaleX(1)}
    .main-nav .sub-menu{transition:opacity 220ms var(--m-ease),transform 260ms var(--m-ease)}
  }
}
/* курсор-«рука» на карточках уже есть; на тач-устройствах нажатие даёт лёгкий отклик */
@media (hover:none){
  .card:active{transform:scale(.99)}
  .card{transition:transform 120ms var(--m-ease)}
}

/* 5. Цифры блока доверия: счётчик (JS меняет текст), плюс лёгкое появление */
.stat b{font-variant-numeric:tabular-nums}
html.js .stat.reveal b{opacity:0;transform:translateY(8px);transition:opacity 500ms var(--m-ease) 200ms,transform 500ms var(--m-ease) 200ms}
html.js .stat.reveal.is-in b{opacity:1;transform:none}

/* 6. FAQ: ответ мягко появляется */
.faq details .faq-a{animation:none}
.faq details[open] .faq-a{animation:fso-fade-down 320ms var(--m-ease) both}
@keyframes fso-fade-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 7. Декор: тонкий золотой контур-щит в тёмных секциях и CTA (SVG в CSS, ~600 байт, без картинок) */
.cta-band,.section--dark{position:relative;overflow:hidden}
.cta-band::before,.section--dark::before{content:'';position:absolute;right:-6%;top:50%;width:min(52vw,560px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23c4a55a' stroke-width='.9'%3E%3Cpath d='M50 6 L86 18 V50 C86 70 70 86 50 95 C30 86 14 70 14 50 V18 Z'/%3E%3Cpath d='M50 16 L78 25 V50 C78 65 66 77 50 84 C34 77 22 65 22 50 V25 Z'/%3E%3Cpath d='M36 44 L50 58 L64 44'/%3E%3C/svg%3E") center/contain no-repeat}
.cta-band>*,.section--dark>*{position:relative}
html.js .cta-band::before,html.js .section--dark::before{animation:fso-drift 18s ease-in-out infinite alternate}
@keyframes fso-drift{from{transform:translateY(-52%) rotate(-1.5deg)}to{transform:translateY(-48%) rotate(1.5deg)}}
@media (max-width:767px){.cta-band::before,.section--dark::before{width:70vw;right:-25%;opacity:.045}}

/* 8. Шапка: при прокрутке чуть компактнее (уже есть фон), логотип чуть меньше */
.brand img{transition:transform 320ms var(--m-ease)}
body.is-scrolled .brand img{transform:scale(.94)}

/* Доступность: без движения — всё статично и видно сразу */
@media (prefers-reduced-motion:reduce){
  html.js .reveal,html.js .reveal .eyebrow::before,html.js .reveal .eyebrow::after,html.js .stat.reveal b{opacity:1;transform:none;transition:none}
  html.js .hero-media img,html.js .cta-band::before,html.js .section--dark::before,.faq details[open] .faq-a{animation:none}
  html.js .step.reveal{border-left-color:rgba(255,255,255,.16)}
}