/* Met4 Pro — фон, анимации и переходы. Подключается после site.css на всех страницах. */
:root{
  --band:color-mix(in srgb,var(--side) 74%,transparent);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

/* ================= ФОН САЙТА ================= */
body{position:relative;isolation:isolate;overflow-x:clip}
html{overflow-x:clip}
/* Мягкое «северное сияние» в цветах бренда */
body::before{
  content:"";position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(32vmax 32vmax at 12% 18%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),
    radial-gradient(28vmax 28vmax at 88% 30%,color-mix(in srgb,var(--up) 12%,transparent),transparent 70%),
    radial-gradient(36vmax 36vmax at 60% 92%,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent 70%);
  animation:aurora 28s var(--ease-in-out) infinite alternate;
  will-change:transform;
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(3vmax,-2vmax,0) rotate(8deg) scale(1.06)}
  100%{transform:translate3d(-2vmax,2vmax,0) rotate(-6deg) scale(1)}
}
/* Логотип-водяной знак + тонкая сетка */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    url("met4-watermark.svg") no-repeat right -6vw top 16vh/min(72vw,860px) auto,
    linear-gradient(color-mix(in srgb,var(--line) 40%,transparent) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,color-mix(in srgb,var(--line) 40%,transparent) 1px,transparent 1px) 0 0/56px 56px;
  opacity:.7;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 85%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 85%);
  animation:watermark 40s var(--ease-in-out) infinite alternate;
}
@keyframes watermark{from{background-position:right -6vw top 16vh,0 0,0 0}to{background-position:right -3vw top 12vh,0 56px,56px 0}}
/* Водяной знак светлее: он только угадывается */
@supports (mix-blend-mode:normal){ body::after{filter:saturate(.9)} }

/* Полупрозрачные полосы, чтобы фон просвечивал */
.header{background:color-mix(in srgb,var(--bg) 70%,transparent)}
.card,.msg,.contact,.faq details,.compare,.calc,.price,.stats,.ai-box,.trouble,.term,.steps-list>li,.rel-card,.dl-card{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ================= ПОЛОСА ПРОГРЕССА И ШАПКА ================= */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--up));box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent)}
.header{transition:background .4s var(--ease),box-shadow .4s var(--ease),height .4s var(--ease)}
.header .container{transition:height .4s var(--ease)}
.header.scrolled{box-shadow:0 10px 40px -20px rgba(0,0,0,.7);background:color-mix(in srgb,var(--bg) 86%,transparent)}
.header.scrolled .container{height:58px}
.brand img{transition:transform .6s var(--ease)}
.brand:hover img{transform:rotate(-8deg) scale(1.08)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent-2),var(--up));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}

/* ================= ПЕРВЫЙ ЭКРАН ================= */
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-grid-lines{position:absolute;inset:0;background:
  linear-gradient(color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px) 0 0/80px 80px,
  linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px) 0 0/80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 70% 40%,#000,transparent 75%);opacity:.5}
.hero-chart{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%;opacity:.55}
.hc-path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s .4s var(--ease) forwards;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 70%,transparent))}
.hc-area{opacity:0;animation:fadeIn 1.6s 1.6s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}

/* Заголовок по словам */
.words .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(8px);animation:wordIn .9s var(--ease) forwards;animation-delay:calc(.15s + var(--i) * .07s)}
@keyframes wordIn{to{opacity:1;transform:none;filter:blur(0)}}
.hero h1 .hl{background-size:200% 100%;animation:hlShift 6s linear infinite}
@keyframes hlShift{0%{background-position:0 0}100%{background-position:200% 0}}
.hero h1 .hl{background-image:linear-gradient(90deg,var(--accent-2),var(--up),var(--accent-2))}
.hero .words .hl .w{background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;background-image:linear-gradient(90deg,var(--accent-2),var(--up),var(--accent-2));background-size:200% 100%;animation:wordIn .9s var(--ease) forwards,hlShift 6s linear infinite;animation-delay:calc(.15s + var(--i) * .07s),0s}

/* Остальные элементы первого экрана выезжают по очереди */
.hero .chips,.hero .lead,.hero .hero-cta,.hero .hero-facts{opacity:0;transform:translateY(16px);animation:rise .9s var(--ease) forwards}
.hero .chips{animation-delay:.05s}
.hero .lead{animation-delay:.75s}
.hero .hero-cta{animation-delay:.9s}
.hero .hero-facts{animation-delay:1.05s}
@keyframes rise{to{opacity:1;transform:none}}
/* Страховка: если браузер не проиграл вступление (вкладка в фоне), всё равно показываем */
.intro-done .hero .chips,.intro-done .hero .lead,.intro-done .hero .hero-cta,.intro-done .hero .hero-facts,.intro-done .hero-visual,.intro-done .words .w{opacity:1;transform:none;filter:none}
.hero-visual{perspective:1400px;opacity:0;animation:rise 1.2s .45s var(--ease) forwards}
.hero-visual .window{transform-style:preserve-3d;transition:transform .6s var(--ease);transform:rotateY(var(--ry,-8deg)) rotateX(calc(var(--rx,4deg) + var(--sr,0deg)))}
.hero-visual .window .shot img{animation:screenScroll 18s 2s var(--ease-in-out) infinite alternate}
@keyframes screenScroll{0%,15%{transform:translateY(0)}85%,100%{transform:translateY(calc(-100% + 440px))}}
.float-card{animation:bob 6s var(--ease-in-out) infinite;transition:transform .6s var(--ease)}
.float-2{animation-delay:-3s}
@keyframes bob{50%{translate:0 -10px}}
.float-card .up::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--up);margin-right:6px;vertical-align:2px;box-shadow:0 0 0 0 var(--up);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 70%,transparent)}80%,100%{box-shadow:0 0 0 8px transparent}}

/* ================= БЕГУЩАЯ СТРОКА ================= */
.marquee{overflow:hidden;margin:48px 0 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--band);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;align-items:center;gap:28px;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--muted);white-space:nowrap;transition:color .3s}
.marquee span:hover{color:var(--text)}
.marquee i{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--accent-2),var(--up));flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ================= ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ================= */
.reveal{opacity:0;transform:translateY(34px) scale(.985);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal[data-anim="left"]{transform:translateX(-40px)}
.reveal[data-anim="right"]{transform:translateX(40px)}
.reveal[data-anim="zoom"]{transform:scale(.92)}
.reveal.in[data-anim]{transform:none}

/* Надзаголовок с растущей линией */
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent-2),var(--up));transform-origin:left;transform:scaleX(0);transition:transform .8s .2s var(--ease)}
.in .eyebrow::before,.reveal.in.eyebrow::before,.docs-hero .eyebrow::before,.hero .eyebrow::before{transform:scaleX(1)}

/* ================= КАРТОЧКИ: ПОДСВЕТКА ЗА КУРСОРОМ ================= */
.spot{position:relative;transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.spot::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 16%,transparent),transparent 45%)}
.spot:hover::after{opacity:1}
.spot:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 24px 60px -30px color-mix(in srgb,var(--accent) 60%,transparent)}
.lift:hover{transform:translateY(-4px)}
.card .icon{transition:transform .6s var(--ease),background .4s}
.card:hover .icon{transform:translateY(-3px) rotate(-6deg) scale(1.06)}

/* ================= КНОПКИ ================= */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .8s var(--ease)}
.btn-primary:hover::after{left:130%}
.btn-primary{background-image:linear-gradient(135deg,var(--accent),var(--accent-2));transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s}
.btn-primary:hover{box-shadow:0 16px 40px -12px var(--accent);filter:brightness(1.08)}
.btn .arrow{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ================= ВКЛАДКИ ================= */
.tab{transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease)}
.tab:hover{transform:translateY(-1px)}
.tab-panel.active > div:first-child{animation:panelText .7s var(--ease) both}
.tab-panel.active .window{animation:panelShot .9s var(--ease) both}
@keyframes panelText{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes panelShot{from{opacity:0;transform:translateY(24px) scale(.97) rotateX(6deg)}to{opacity:1;transform:none}}
.tab-panel .checks li{opacity:0;animation:rise .6s var(--ease) forwards;animation-delay:calc(.15s + var(--i,0) * .07s)}
.window .shot{position:relative}
.window .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,var(--side));pointer-events:none}

/* ================= «НЕДЕЛЯ» — ЛИНИЯ РИСУЕТСЯ ================= */
.week::before{transform:scaleX(0);transform-origin:left;transition:transform 1.8s .2s var(--ease)}
.week.drawn::before{transform:scaleX(1)}
.day .when{transition:box-shadow .6s var(--ease)}
.day.in .when{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 16%,transparent)}

/* ================= ПРИМЕР ОТЧЁТА ================= */
.sheet{transition:transform 1.2s var(--ease),box-shadow 1.2s var(--ease)}
.reveal:not(.in) .sheet{transform:rotate(-6deg) translateY(30px)}
.sheet:hover{transform:rotate(0) translateY(-6px)}
.sheet-bars i{transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease);transition-delay:calc(.5s + var(--i,0) * .06s)}
.in .sheet-bars i{transform:scaleY(1)}
.sheet-stamp{transform:rotate(3deg) scale(0);transition:transform .6s 1.4s cubic-bezier(.34,1.56,.64,1)}
.in .sheet-stamp{transform:rotate(3deg) scale(1)}

/* ================= ДИРЕКТ: СООБЩЕНИЯ ВЫЕЗЖАЮТ ================= */
.direct-feed .msg{opacity:0;transform:translateX(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.direct-feed.in .msg{opacity:1;transform:none}
.direct-feed.in .msg:nth-child(2){transition-delay:.25s}
.direct-feed.in .msg:nth-child(3){transition-delay:.5s}
.tag{transition:transform .3s var(--ease)}
.msg:hover .tag{transform:translateY(-2px)}

/* ================= ИИ: ПЕЧАТЬ ================= */
.ai-box h4,.ai-box p,.ai-box ol{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ai-box.in h4,.ai-box.in p,.ai-box.in ol{opacity:1;transform:none}
.ai-box.in > :nth-child(2){transition-delay:.15s}.ai-box.in > :nth-child(3){transition-delay:.35s}.ai-box.in > :nth-child(4){transition-delay:.5s}.ai-box.in > :nth-child(5){transition-delay:.7s}.ai-box.in > :nth-child(6){transition-delay:.85s}

/* ================= ПРОЧЕЕ ================= */
.stat b{transition:color .4s}
.stat:hover b{color:var(--accent-2)}
.compare tbody tr{transition:background .3s}
.compare tbody tr:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.faq details{transition:border-color .3s,background .3s}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.faq details[open] p{animation:rise .5s var(--ease) both}
.price{position:relative;overflow:hidden}
.price::before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0 70%,color-mix(in srgb,var(--accent) 30%,transparent) 80%,transparent 90%);animation:spin 12s linear infinite;pointer-events:none;opacity:.6}
.price > *{position:relative}
@keyframes spin{to{transform:rotate(1turn)}}
.cta-band{background-size:200% 200%;animation:bandShift 10s var(--ease-in-out) infinite alternate}
@keyframes bandShift{from{background-position:0 50%}to{background-position:100% 50%}}
.cta-band{background-image:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--up)),var(--accent-2))}
.tg-float{animation:tgIn .8s 2s cubic-bezier(.34,1.56,.64,1) both}
.tg-float:hover{scale:1.08}
@keyframes tgIn{from{transform:scale(0) rotate(-30deg)}to{transform:none}}
.tg-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #2AABEE;animation:tgRing 2.6s 3s infinite}
@keyframes tgRing{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.theme-btn{transition:border-color .3s,transform .3s var(--ease)}
.theme-btn:hover{transform:translateY(-2px)}
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)!important}

/* Курсор-подсветка в первом экране */
.hero-glow{position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;left:0;top:0;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%);opacity:0;transition:opacity .6s}
.hero:hover .hero-glow{opacity:1}

/* Переходы между страницами */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .35s var(--ease) both}
::view-transition-new(root){animation:vtIn .55s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-12px);filter:blur(4px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(16px);filter:blur(4px)}}
main,.docs-hero,.docs{animation:pageIn .7s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}}

/* Страница инструкций: шаги выезжают */
.steps-list>li{transition:transform .4s var(--ease),border-color .3s}
.steps-list>li:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.shot-doc img{transition:transform .8s var(--ease)}
.shot-doc:hover img{transform:scale(1.015)}

/* ================= ПЛАВНАЯ ПРОКРУТКА ================= */
html.smooth-on{scroll-behavior:auto!important}

/* ================= ЗАГОЛОВКИ ИЗ-ПОД МАСКИ ================= */
.mask-words .mw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em}
.mask-words .w{display:inline-block;transform:translateY(110%) rotate(4deg);transform-origin:0 100%;transition:transform 1.1s var(--ease);transition-delay:calc(.12s + var(--i) * .055s)}
.in .mask-words .w,.mask-words.in .w,.intro-done .docs-hero .mask-words .w{transform:none}
.docs-hero .mask-words .w{animation:maskUp 1.1s var(--ease) forwards;animation-delay:calc(.1s + var(--i) * .06s)}
@keyframes maskUp{to{transform:none}}
/* В разделённых заголовках с градиентом слова наследуют цвет */
.section-head .reveal .w{color:inherit}

/* ================= СТОПКА «БЫЛО → СТАЛО» ================= */
@media (min-width:821px){
  .pain-stack{padding-bottom:40px}
  .pain-stack .pain{position:sticky;top:calc(96px + var(--k,0) * 16px);transform-origin:50% 0;box-shadow:0 -20px 50px -30px rgba(0,0,0,.8);will-change:scale}
  .pain-stack .pain + .pain{margin-top:28px}
  .pain-stack .pain{background:var(--card)}
  .pain-stack .pain .after{background:color-mix(in srgb,var(--up) 6%,var(--card))}
}

/* Блоки со «шторкой» плавно сглаживаются */
.tab-panel .window,.sheet,.direct-feed,.ai-box,.calc,.compare{will-change:clip-path}

/* ================= ТЕЛЕФОН И БЕРЕЖНЫЙ РЕЖИМ ================= */
@media (max-width:820px){
  .hero-visual .window{transform:none}
  .hero-chart{height:55%;opacity:.4}
  .marquee span{font-size:16px}
  body::after{background-size:120vw auto,56px 56px,56px 56px;background-position:right -40vw top 30vh,0 0,0 0}
  .header.scrolled .container{height:62px}
}
@media (max-width:640px){
  .hero-visual .window .shot img{animation:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;animation-delay:0s!important}
  .reveal,.words .w,.hero .chips,.hero .lead,.hero .hero-cta,.hero .hero-facts,.hero-visual,.direct-feed .msg,.ai-box *{opacity:1!important;transform:none!important;filter:none!important}
}