/* ==========================================================================
   Анімації сайту. Окремий файл — щоб легко послабити або вимкнути.
   Усе вимикається автоматично, якщо у системі увімкнено
   «зменшити рух» (prefers-reduced-motion) та у версії для слабозорих.
   ========================================================================== */

/* ---------- Базові keyframes ---------- */
@keyframes fadeUp      {from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none}}
@keyframes fadeIn      {from{opacity:0} to{opacity:1}}
@keyframes fadeRight   {from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:none}}
@keyframes scaleIn     {from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)}}
@keyframes lineGrow    {from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes drift       {from{background-position:0 0} to{background-position:84px 96px}}
@keyframes floaty      {0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)}}
@keyframes bubble      {0%{transform:translateY(0) scale(.6);opacity:0} 20%{opacity:.9} 100%{transform:translateY(-46px) scale(1.1);opacity:0}}
@keyframes sweep       {from{transform:translateX(-120%)} to{transform:translateX(220%)}}
@keyframes ring        {0%{transform:scale(.8);opacity:.7} 100%{transform:scale(2.1);opacity:0}}
@keyframes wordIn      {0%{opacity:0;transform:translateY(14px)} 12%,88%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-14px)}}

/* ---------- Поява під час прокручування ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .62s ease,transform .62s cubic-bezier(.22,.7,.3,1)}
.reveal.is-visible{opacity:1;transform:none;transition-delay:var(--d,0ms)}
.reveal--left{transform:translateX(-28px)}
.reveal--scale{transform:scale(.95)}

/* Золота риска під заголовком секції — «малюється» */
.section__head h2::after{transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,.7,.3,1) .15s}
.section__head.is-visible h2::after{transform:scaleX(1)}

/* ---------- Смужка прогресу прокручування ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--gold),var(--green-500));z-index:200;pointer-events:none;will-change:transform}

/* ---------- Шапка: стискається при прокручуванні ---------- */
.masthead{transition:padding .3s ease,box-shadow .3s ease}
.masthead .wrap{transition:padding .3s ease}
body.is-stuck .masthead{position:sticky;top:0;z-index:90;box-shadow:0 6px 20px rgba(15,58,38,.12)}
body.is-stuck .masthead .wrap{padding-top:7px;padding-bottom:7px}
body.is-stuck .masthead__logo img{width:44px;height:44px;transition:width .3s ease,height .3s ease}
.masthead__logo img{transition:width .3s ease,height .3s ease,transform .5s ease}
.masthead__logo:hover img{transform:rotate(-6deg) scale(1.06)}

/* ---------- Меню ---------- */
.mainnav>.wrap>ul>li>a{position:relative;overflow:hidden}
.mainnav>.wrap>ul>li>a::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);
  transform:translateY(4px);opacity:0;transition:transform .28s ease,opacity .28s ease}
.mainnav>.wrap>ul>li>a:hover::before{transform:none;opacity:1}
.mainnav .has-sub>ul{
  display:block;visibility:hidden;opacity:0;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.mainnav .has-sub:hover>ul,.mainnav .has-sub:focus-within>ul{visibility:visible;opacity:1;transform:none}
.mainnav .has-sub>ul a{transition:background .2s ease,padding-left .2s ease}
.mainnav .has-sub>ul a:hover{padding-left:24px}

/* ---------- Головний банер ---------- */
.hero{overflow:hidden}
.hero::after{animation:drift 26s linear infinite}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:center}
.hero__text>*{opacity:0;animation:fadeUp .8s cubic-bezier(.22,.7,.3,1) forwards}
.hero__text h1{animation-delay:.12s}
.hero__lead{animation-delay:.26s}
.hero__rotator{animation-delay:.38s}
.hero__actions{animation-delay:.5s}

/* Рядок зі змінними словами */
.hero__rotator{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:1.05rem;color:#C7DACE;margin:0 0 4px}
.hero__words{position:relative;display:inline-block;min-width:26ch;height:1.7em;overflow:hidden;vertical-align:bottom}
.hero__words span{position:absolute;left:0;top:0;white-space:nowrap;color:var(--gold);font-family:var(--font-head);font-weight:600;opacity:0;animation:wordIn 12s infinite}
.hero__words span:nth-child(1){animation-delay:0s}
.hero__words span:nth-child(2){animation-delay:2.4s}
.hero__words span:nth-child(3){animation-delay:4.8s}
.hero__words span:nth-child(4){animation-delay:7.2s}
.hero__words span:nth-child(5){animation-delay:9.6s}

/* Ілюстрація в банері */
.hero__art{opacity:0;animation:scaleIn .9s cubic-bezier(.22,.7,.3,1) .35s forwards}
.hero__art svg{width:100%;height:auto;overflow:visible}
.hero__art .flask-liquid{animation:floaty 6s ease-in-out infinite}
.hero__art .bub{animation:bubble 3.2s ease-in infinite}
.hero__art .bub:nth-of-type(2){animation-delay:.9s}
.hero__art .bub:nth-of-type(3){animation-delay:1.8s}
.hero__art .orbit{transform-origin:150px 150px;animation:spin 34s linear infinite}
.hero__art .orbit--rev{animation-duration:46s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__art .pulse{animation:ring 3s ease-out infinite;transform-origin:center}

/* ---------- Кнопки ---------- */
.btn{position:relative;overflow:hidden;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(15,58,38,.22)}
.btn:active{transform:translateY(0)}
.btn::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-120%);opacity:0}
.btn:hover::after{opacity:1;animation:sweep .7s ease}

/* ---------- Смуга контактів ---------- */
.contactstrip__item{transition:background .25s ease,transform .25s ease}
.contactstrip__item:hover{background:var(--white);transform:translateY(-2px)}

/* ---------- Картки ---------- */
.card,.newscard{transition:transform .3s cubic-bezier(.22,.7,.3,1),box-shadow .3s ease,border-color .3s ease}
a.card:hover,.newscard:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(15,58,38,.13)}
.card{position:relative}
.card::before{content:'';position:absolute;left:-4px;top:0;bottom:0;width:4px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.22,.7,.3,1)}
a.card:hover::before{transform:scaleY(1)}
.newscard__img{transition:transform .5s ease}
.newscard{overflow:hidden}
.newscard:hover .newscard__img{transform:scale(1.05)}
.newscard__title a{background-image:linear-gradient(var(--green-500),var(--green-500));
  background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s ease}
.newscard__title a:hover{background-size:100% 2px;text-decoration:none}

/* ---------- Документи та посилання ---------- */
.doclist a,.linkgrid a{transition:transform .22s ease,border-color .22s ease,background .22s ease}
.doclist a:hover,.linkgrid a:hover{transform:translateX(4px)}
.doclist a::before{transition:transform .3s ease}
.doclist a:hover::before{transform:translateY(-2px)}

/* ---------- Цифри ---------- */
.stats{position:relative;overflow:hidden}
.stats::before{content:'';position:absolute;inset:0;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cg fill='none' stroke='%23ffffff'%3E%3Cpath d='M42 4 L74 22 L74 58 L42 76 L10 58 L10 22 Z'/%3E%3C/g%3E%3C/svg%3E");
  animation:drift 40s linear infinite reverse}
.stats .wrap{position:relative;z-index:1}
.stats b{font-variant-numeric:tabular-nums}

/* ---------- Бічна колонка та врізки ---------- */
.callout{transition:box-shadow .3s ease}
.callout:hover{box-shadow:0 8px 20px rgba(15,58,38,.10)}
.sidebar a{transition:padding-left .22s ease,color .22s ease}
.sidebar a:hover{padding-left:6px}

/* ---------- Кнопка «нагору» ---------- */
.totop{display:block;transform:scale(0) translateY(10px);opacity:0;
  transition:transform .3s cubic-bezier(.22,.9,.3,1.3),opacity .3s ease,background .2s ease}
.totop.is-visible{transform:none;opacity:1}

/* ---------- Мобільне меню ---------- */
@media (max-width:760px){
  .mainnav{display:block;max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,.7,.3,1)}
  .mainnav.is-open{max-height:760px}
  .mainnav>.wrap>ul>li{opacity:0;transform:translateX(-14px);transition:opacity .3s ease,transform .3s ease}
  .mainnav.is-open>.wrap>ul>li{opacity:1;transform:none}
  .mainnav.is-open>.wrap>ul>li:nth-child(1){transition-delay:.06s}
  .mainnav.is-open>.wrap>ul>li:nth-child(2){transition-delay:.12s}
  .mainnav.is-open>.wrap>ul>li:nth-child(3){transition-delay:.18s}
  .mainnav.is-open>.wrap>ul>li:nth-child(4){transition-delay:.24s}
  .mainnav.is-open>.wrap>ul>li:nth-child(5){transition-delay:.30s}
  .mainnav.is-open>.wrap>ul>li:nth-child(6){transition-delay:.36s}
  .mainnav .has-sub>ul{display:none;visibility:visible;opacity:1;transform:none}
  .mainnav .has-sub.is-open>ul{display:block;animation:fadeIn .3s ease}
  .hero .wrap{grid-template-columns:1fr}
  .hero__art{max-width:280px;margin:8px auto 0}
}
@media (max-width:960px){
  .hero .wrap{grid-template-columns:minmax(0,1fr) 280px}
}

/* ---------- Плавний вхід сторінки ---------- */
body{animation:fadeIn .35s ease}
body.is-leaving{opacity:0;transition:opacity .22s ease}

/* ==========================================================================
   Повне вимкнення руху
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .section__head h2::after{transform:scaleX(1)!important}
  .mainnav .has-sub>ul{visibility:visible}
  .totop{transform:none;opacity:1}
  .hero__text>*,.hero__art{opacity:1}
  .hero__words span{opacity:1;position:static;display:none}
  .hero__words span:first-child{display:inline}
  .progress{display:none}
}
body.eyeview *,body.eyeview *::before,body.eyeview *::after{animation:none!important;transition:none!important}
body.eyeview .reveal{opacity:1!important;transform:none!important}
body.eyeview .hero__text>*,body.eyeview .hero__art{opacity:1}
body.eyeview .hero__words span{opacity:1;position:static;display:none}
body.eyeview .hero__words span:first-child{display:inline}
body.eyeview .progress{display:none}
body.no-anim *,body.no-anim *::before,body.no-anim *::after{animation:none!important;transition:none!important}
body.no-anim .reveal{opacity:1!important;transform:none!important}