/* Adlook Partners — слой анимаций и мелких фишек.
   Подключается ПОСЛЕ site.css (или главной). Удаляется без последствий: уберите fx.css и fx.js. */
@property --glow{syntax:"<number>";inherits:false;initial-value:0}

/* ---------- карточки: подсветка за курсором + мягкая тень ---------- */
.bento-card{position:relative;--glow-rgb:221,82,53;--mx:50%;--my:50%;--glow:0;transition:box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),--glow .45s ease}
.bento-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx) var(--my),rgba(var(--glow-rgb),calc(var(--glow)*.13)),transparent 65%)}
.platform-note,.connection-action,.referral-card,.cta-card{--glow-rgb:255,255,255}
.connection-action{transition:background-color .16s,box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),--glow .45s ease}
.connection-action span{display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.format-category{transition:background-color .25s,color .25s,border-color .25s}
.faq-card summary:after{transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .2s,color .2s,border-color .2s}
.faq-card[open] summary:after{background:var(--accent-dark);color:#fff;border-color:transparent}
.verification-list li{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.verification-list li:before{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.step-number{transform-origin:left bottom;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.text-link{text-decoration-color:rgba(185,63,38,.35);transition:color .16s,text-decoration-color .2s,text-underline-offset .2s}
.text-link:hover{text-decoration-color:currentColor;text-underline-offset:.4em}

@media (hover:hover){
  .bento-card:hover{--glow:1;box-shadow:0 22px 44px -24px rgba(45,41,38,.32)}
  .verification-list li:hover{box-shadow:0 18px 36px -24px rgba(45,41,38,.30)}
  .format-card:hover .format-category{background:var(--ink);border-color:var(--ink);color:#fff}
  .faq-card summary:hover:after{border-color:var(--accent-dark)}
}

/* ---------- кнопки: блик, «магнит», нажатие ---------- */
.button{position:relative;isolation:isolate;overflow:hidden}
.button::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-120%)}

/* ---------- прогресс чтения, «наверх», бегущая строка ---------- */
.fx-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none}
.fx-top{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:48px;height:48px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .25s,transform .25s,background-color .16s;z-index:40;box-shadow:0 10px 24px -10px rgba(45,41,38,.5)}
.fx-top.show{opacity:1;transform:none;pointer-events:auto}
.fx-top:hover{background:var(--accent-dark)}
.fx-top svg{width:20px;height:20px;transition:transform .25s}
.fx-top:hover svg{transform:translateY(-3px)}
.fx-ticker{margin-top:clamp(88px,12vw,152px);background:var(--ink);color:#fff;overflow:hidden;padding:18px 0;white-space:nowrap;font-family:Montserrat,Segoe UI,system-ui,sans-serif;font-weight:700;letter-spacing:-.04em;font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.2}
.fx-ticker + .site-footer{margin-top:0}
.fx-ticker-track{display:inline-flex;will-change:transform}
.fx-ticker-group{display:inline-flex;align-items:center;gap:28px;padding-right:28px}
.fx-ticker-group b{color:var(--accent);font-weight:400;font-size:.8em}

/* ---------- иконки форматов ---------- */
.format-icon{position:absolute;top:clamp(20px,2.6vw,32px);right:clamp(20px,2.6vw,32px);width:56px;height:56px;color:var(--ink);pointer-events:none}
.format-icon svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.format-icon .fa{fill:var(--accent);stroke:none}
.format-icon .fs{stroke:var(--accent);stroke-width:2.6}
.format-icon [class^="fi-"]{transform-box:fill-box;transform-origin:center}

/* ---------- появление блоков (классы ставит fx.js) ---------- */
html.fx .reveal:not(.in){opacity:0}
html.fx .reveal.in{animation:fx-rise .8s cubic-bezier(.2,.8,.2,1) var(--d,0s) backwards}
html.fx .connection-card.in .step-number{animation:fx-pop .8s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0s) + .2s) backwards}
.fx-w{display:inline-block}
html.fx .fx-split .fx-w{opacity:0}
html.fx .fx-go .fx-w{opacity:1;animation:fx-word .75s cubic-bezier(.2,.8,.2,1) calc(var(--i)*70ms + 120ms) backwards}
@keyframes fx-rise{from{opacity:0;transform:translateY(30px)}}
@keyframes fx-pop{from{opacity:0;transform:scale(.5) rotate(-12deg)}}
@keyframes fx-word{from{opacity:0;transform:translateY(.45em) rotate(3deg)}}
@keyframes fx-open{from{opacity:0;transform:translateY(-8px)}}
@keyframes fx-rec{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.5}}
@keyframes fx-ring{0%{box-shadow:0 0 0 0 rgba(185,63,38,.45)}28%,100%{box-shadow:0 0 0 14px rgba(185,63,38,0)}}
@keyframes fx-marquee{to{transform:translateX(-50%)}}
@keyframes fi-float{50%{transform:translateY(-3px)}}
@keyframes fi-pulse{50%{transform:scale(1.18)}}
@keyframes fi-tilt{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes fi-scan{from{transform:translateY(0)}to{transform:translateY(20px)}}
@keyframes fi-shimmer{50%{opacity:.25}}
@keyframes fi-drop{50%{transform:translateY(-4px)}}

/* ---------- движение — только если пользователь не просил его уменьшить ---------- */
@media (prefers-reduced-motion:no-preference){
  .faq-card[open] .faq-answer{animation:fx-open .4s cubic-bezier(.2,.8,.2,1)}
  .faq-card[open] summary:after{transform:rotate(180deg)}
  .primary-navigation .nav-contact{position:relative}
  .primary-navigation .nav-contact::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:fx-ring 3.6s ease-out 2s infinite}
  .primary-navigation .nav-contact:hover::after{animation:none}
  .fx-ticker-track{animation:fx-marquee 38s linear infinite}
  .fx-ticker:hover .fx-ticker-track{animation-play-state:paused}
  .fi-float{animation:fi-float 3.4s ease-in-out infinite}
  .fi-pulse{animation:fi-pulse 2.6s ease-in-out infinite}
  .fi-tilt{animation:fi-tilt 4s ease-in-out infinite}
  .fi-scan{animation:fi-scan 2.8s ease-in-out infinite alternate}
  .fi-shimmer{animation:fi-shimmer 2.4s ease-in-out infinite}
  .fi-drop{animation:fi-drop 3s ease-in-out infinite}
  .format-card:hover .format-icon [class^="fi-"]{animation-duration:1.2s}
  .button::before{transition:transform 0s}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .offer-card:hover,.connection-card:hover,.format-card:hover,.recommendation-card:hover,.facts-card:hover,.note-card:hover,.faq-card:hover,.connection-action:hover{transform:translateY(-4px)}
  .verification-list li:hover{transform:translateY(-3px)}
  .verification-list li:hover:before{transform:translateX(5px)}
  .connection-card:hover .step-number{transform:translateY(-4px) scale(1.07)}
  .connection-action:hover span{transform:translateX(8px)}
  .button:hover{transform:translate(var(--tx,0px),calc(var(--ty,0px) - 2px))}
  .button:active{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.97)}
  .button:hover::before{transform:translateX(120%);transition:transform .7s ease}
  .footer-group a{display:inline-block;transition:color .16s,transform .2s}
  .footer-group a:hover{transform:translateX(4px)}
}
@media (min-width:721px) and (prefers-reduced-motion:no-preference){
  .primary-navigation a:not(.nav-contact){position:relative}
  .primary-navigation a:not(.nav-contact):not([aria-current])::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .primary-navigation a:not(.nav-contact):hover::after{transform:scaleX(1)}
}
@media print{html.fx .reveal:not(.in){opacity:1}.fx-progress,.fx-top,.fx-ticker{display:none}}