/* zipka — движение сайта по спеке «Анимации сайта» (design-system/uploads).
   Ключевые кадры берём из DS (ds/tokens/motion.css), здесь только применение
   к узлам сайта. Правило спеки: коротко, со смыслом, без прыжков —
   подъём, фейд и прочерчивание. Всё гасится prefers-reduced-motion в конце файла. */

/* ============ 01 · лоадер страницы ============ */
/* Оверлей лежит в разметке главной, иначе контент успевает мигнуть.
   Гасится сам через 2.4s (значит, без JS страница не залипнет), JS только
   ускоряет уход по window.load. Второй раз за сессию не показываем. */
#zk-load{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;gap:22px;
  grid-auto-flow:row;background:var(--paper);transition:opacity .4s var(--ease),visibility .4s;
  animation:zk-load-out .5s var(--ease) 2.4s forwards;}
#zk-load.is-done{opacity:0;visibility:hidden;animation:none;}
@keyframes zk-load-out{to{opacity:0;visibility:hidden;}}
html.zk-seen-load #zk-load{display:none;}
#zk-load .zk-load-grid{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 96px,
             linear-gradient(90deg,color-mix(in srgb,var(--line) 30%,transparent) 1px,transparent 1px) 0 0/24px 100%;
  animation:mo-gridin .6s var(--ease) .1s forwards;}
#zk-load .mark{position:relative;}
/* штрих рисуется: длина контура заведомо больше периметра знака */
#zk-load .mark .m-body,#zk-load .mark .m-bar{stroke-dasharray:420;stroke-dashoffset:420;
  animation:mo-draw 1.05s var(--ease) forwards;}
#zk-load .mark .m-bar{animation-delay:.42s;}
#zk-load .zk-load-bar{position:relative;width:180px;height:2px;background:var(--line);}
#zk-load .zk-load-bar i{position:absolute;inset:0;background:var(--accent);transform-origin:left;
  transform:scaleX(0);animation:mo-bar 1.1s var(--ease) forwards;}

/* ============ 02 · появление hero ============ */
.hero .eyebrow.is-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
  border-right:2px solid transparent;animation:mo-type .85s steps(var(--steps,42)) both,mo-caret .75s step-end 4;}
.hero h1 .ln{display:block;animation:mo-rise-lg var(--dur-enter) var(--ease) both;}
.hero h1 .ln:nth-child(2){animation-delay:90ms;}
.hero h1 .ln:nth-child(3){animation-delay:180ms;}
.hero .lead{animation:mo-fade var(--dur-slow) var(--ease) .26s both;}
.hero .cta-row{animation:mo-rise var(--dur-slow) var(--ease) .34s both;}
.hero .trust{animation:mo-fade var(--dur-slow) var(--ease) .44s both;}

/* ============ 03 · меню и шапка ============ */
.nav-in{transition:padding-top var(--dur) var(--ease),padding-bottom var(--dur) var(--ease);}
.nav.is-condensed .nav-in{padding-top:9px;padding-bottom:9px;}
/* подчёркивание вырастает из-под ссылки */
.nav-links a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;transition:background-size var(--dur) var(--ease),color var(--dur-fast);}
.nav-links a:hover,.nav-links a.active{background-size:100% 1px;}
.mobile-menu.open{animation:zk-slidedown var(--dur) var(--ease) both;}
@keyframes zk-slidedown{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:translateY(0);}}

/* ============ 04 · сетка и наведение ============ */
.card,.course,.work,.rev,.teacher,.promo{transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.arw{display:inline-block;transition:transform var(--dur) var(--ease);}
.card:hover .arw,.course:hover .arw,.btn:hover .arw{transform:translateX(6px);}

/* ============ 05 · кнопки, поля, валидация ============ */
.btn:active{transform:translateY(0) scale(.985);}
.input:focus,.modal .input:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
.input.is-bad{border-color:var(--danger);animation:mo-shake .48s var(--ease);}
.zk-check{width:18px;height:18px;flex:none;stroke:var(--success);stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;
  animation:mo-draw .45s var(--ease) forwards;}

/* ============ 06 · маскот Зип (появляется после отправки заявки) ============ */
.zk-zip{display:block;margin:0 auto 10px;width:104px;height:95px;color:var(--ink);}
.zk-zip.is-hop{animation:mo-hop 1.1s var(--ease);}
.zk-zip .z-eye{animation:mo-blink 4.2s steps(1,end) infinite;transform-origin:center;transform-box:fill-box;}
.zk-conf{position:absolute;top:34%;left:50%;width:7px;height:7px;background:var(--accent);
  animation:mo-confetti 1.05s var(--ease) forwards;}
.zk-conf:nth-child(2n){background:var(--accent-2);}

/* ============ 07 · секции и прогресс ============ */
#zk-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--accent);
  transform:scaleX(0);transform-origin:left;will-change:transform;}
section{position:relative;}
/* граница секции прочерчивается, когда секция входит в кадр */
section::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--line-2);
  transform:scaleX(0);transform-origin:left;transition:transform .65s var(--ease);}
section.is-line::before{transform:scaleX(1);}

/* ============ 08 · микро: тост ============ */
.zk-toast{position:fixed;right:18px;bottom:22px;z-index:1200;display:flex;align-items:center;gap:10px;
  max-width:min(360px,calc(100vw - 36px));padding:13px 16px;background:var(--ink);color:var(--paper);
  border-left:3px solid var(--success);font-family:var(--mono);font-size:13px;
  animation:mo-toast 4.2s var(--ease) forwards;}
.zk-toast.is-bad{border-left-color:var(--danger);}

/* ============ 09 · аккордеон, модалка ============ */
.faq-a{transition:max-height .3s var(--ease),opacity .3s var(--ease);opacity:0;}
.faq-item.is-open .faq-a{opacity:1;}
.modal-back{transition:opacity var(--dur) var(--ease);}
.modal{animation:mo-rise var(--dur-slow) var(--ease) both;}

/* ============ переключатель темы (футер) ============ */
.theme-toggle{display:inline-flex;align-items:center;min-height:36px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--mono);font-size:12px;
  color:color-mix(in srgb,var(--inv) 50%,transparent);transition:color var(--dur-fast) var(--ease);}
.theme-toggle:hover{color:var(--inv);}

/* ============ фирменная фактура: точечная сетка из DS ============ */
.hero{position:relative;}
.hero::before{content:"";position:absolute;inset:-10px -20px;z-index:-1;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--text) 12%,transparent) 1.3px,transparent 1.9px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 45%,#000 0,transparent 72%);
  mask-image:radial-gradient(120% 90% at 78% 45%,#000 0,transparent 72%);}

@media (prefers-reduced-motion: reduce){
  #zk-load{display:none;}
  .hero .eyebrow.is-type,.hero h1 .ln,.hero .lead,.hero .cta-row,.hero .trust,
  .modal,.zk-zip.is-hop,.zk-conf,.mobile-menu.open{animation:none;}
  .hero .eyebrow.is-type{border-right:0;width:auto;}
  section::before{display:none;}
  #zk-progress{display:none;}
  .zk-check{stroke-dashoffset:0;animation:none;}
}