/* ==========================================================================
   Axioma · анимации логотипа
   Ключевые кадры и базовые стили. Ничего, кроме .ax-* классов, не задаёт.
   Порядок подключения: этот файл → axioma-logo.js.
   ========================================================================== */

/* --- геометрия и палитры ------------------------------------------------- */
:root{
  --ax-honey:#F0B429;
  --ax-emerald-deep:#123B2E;
  --ax-emerald:#1F7A5A;
  --ax-sand:#F6F3EA;
  --ax-cream:#FFFDF7;
  --ax-ink:#0A2620;
  --ax-paper:#F1F6EC;
}

.ax-mark{position:relative;display:block;flex:none}
.ax-mark *{box-sizing:border-box}
.ax-mark__stage{position:absolute;left:0;top:0;width:92px;height:108px;transform-origin:0 0}
.ax-face{position:absolute;inset:0}
.ax-face--top{clip-path:polygon(50% 1.8%,100% 25.9%,50% 50%,0% 25.9%)}
.ax-face--left{clip-path:polygon(0% 25.9%,50% 50%,50% 98.1%,0% 74.1%)}
.ax-face--right{clip-path:polygon(100% 25.9%,50% 50%,50% 98.1%,100% 74.1%)}
.ax-hex{clip-path:polygon(50% 1.8%,100% 25.9%,100% 74.1%,50% 98.1%,0% 74.1%,0% 25.9%)}

.ax-lockup{display:inline-flex;align-items:center;gap:.34em;font-family:'Onest',system-ui,-apple-system,sans-serif}
.ax-lockup--stacked{flex-direction:column;gap:.28em}
.ax-word{display:flex;align-items:baseline;font-weight:800;letter-spacing:-.04em;line-height:1;white-space:nowrap}
.ax-word span{display:inline-block}
.ax-word__dot{color:var(--ax-honey)}

/* --- знак: механики ------------------------------------------------------ */
@keyframes ax-fTop{from{opacity:0;transform:translateY(-54px)}to{opacity:1;transform:translateY(0)}}
@keyframes ax-fLeft{from{opacity:0;transform:translate(-46px,26px)}to{opacity:1;transform:translate(0,0)}}
@keyframes ax-fRight{from{opacity:0;transform:translate(46px,26px)}to{opacity:1;transform:translate(0,0)}}
@keyframes ax-sheen{0%,100%{filter:brightness(1)}18%{filter:brightness(1.45)}}
@keyframes ax-stripDown{0%{opacity:0;transform:translateY(-170px)}5%{opacity:1}17%{transform:translateY(7px)}23%{transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes ax-stripUp{0%{opacity:0;transform:translateY(170px)}5%{opacity:1}17%{transform:translateY(-7px)}23%{transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes ax-edgeDraw{0%,22%{opacity:0;stroke-dashoffset:120}26%{opacity:.9}44%{stroke-dashoffset:0}68%{opacity:.9}80%{opacity:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes ax-dotIn{0%{opacity:0;transform:scale(0)}5%{opacity:1;transform:scale(1.7)}11%{transform:scale(1)}66%{opacity:1;transform:scale(1)}78%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes ax-inkTop{0%,46%{clip-path:inset(0 100% 0 0)}60%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes ax-inkLeft{0%,54%{clip-path:inset(100% 0 0 0)}68%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes ax-inkRight{0%,62%{clip-path:inset(0 0 0 100%)}76%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes ax-axisTop{0%{opacity:0;transform:translateY(-104px)}12%{opacity:1}34%{transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes ax-axisLeft{0%{opacity:0;transform:translate(-92px,52px)}16%{opacity:1}42%{transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes ax-axisRight{0%{opacity:0;transform:translate(92px,52px)}20%{opacity:1}50%{transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes ax-phA{0%,27%{opacity:1}33%,94%{opacity:0}100%{opacity:1}}
@keyframes ax-phB{0%,27%{opacity:0}33%,60%{opacity:1}66%,100%{opacity:0}}
@keyframes ax-phC{0%,60%{opacity:0}66%,94%{opacity:1}100%{opacity:0}}
@keyframes ax-fBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes ax-netDot{0%{opacity:0;transform:scale(.2)}6%{opacity:1;transform:scale(1.7)}12%{transform:scale(1)}52%{opacity:1;transform:scale(1)}64%{opacity:0;transform:scale(.6)}100%{opacity:0;transform:scale(.6)}}
@keyframes ax-netLine{0%{opacity:0;stroke-dashoffset:60}8%{opacity:.85}30%{stroke-dashoffset:0}52%{opacity:.85}64%{opacity:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes ax-netFace{0%,44%{opacity:0;transform:scale(.7)}54%{opacity:1;transform:scale(1.05)}60%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes ax-n3A{0%,100%{transform:translateX(0)}50%{transform:translateX(11px)}}
@keyframes ax-n3B{0%,100%{transform:translateX(0)}50%{transform:translateX(-11px)}}
@keyframes ax-m4Ring{0%{transform:scale(.62);opacity:0}14%{opacity:.5}100%{transform:scale(2.05);opacity:0}}
@keyframes ax-m5Spin{0%,8%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes ax-m6Band{0%{transform:translateY(-48px)}100%{transform:translateY(114px)}}
@keyframes ax-p1RollA{0%,14%{transform:translateY(0)}86%,100%{transform:translateY(-108px)}}
@keyframes ax-p1RollB{0%,14%{transform:translateY(0)}86%,100%{transform:translateY(-216px)}}
@keyframes ax-p1RollC{0%,14%{transform:translateY(0)}86%,100%{transform:translateY(-324px)}}
@keyframes ax-p2Move{0%{transform:rotate(30deg) translateY(0)}100%{transform:rotate(30deg) translateY(60px)}}
@keyframes ax-p2Fade{0%,10%{opacity:0}22%,78%{opacity:1}90%,100%{opacity:0}}
@keyframes ax-p3cw{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ax-p3ccw{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes ax-p5Roll{0%{transform:translateY(0)}100%{transform:translateY(-324px)}}

/* --- название: механики -------------------------------------------------- */
@keyframes ax-wipeIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ax-dotDrop{0%{opacity:0;transform:translateY(-64px) scale(.4)}58%{opacity:1;transform:translateY(0) scale(1.3)}76%{transform:translateY(-7px) scale(.94)}100%{transform:translateY(0) scale(1)}}
@keyframes ax-a2Dot{0%,100%{color:#F0B429}25%{color:#F1F6EC}50%{color:#1F7A5A}75%{color:#F1F6EC}}
@keyframes ax-ltrDown{0%{opacity:0;transform:translateY(-20px)}6%{opacity:1}14%{transform:translateY(2px)}18%,100%{opacity:1;transform:translateY(0)}}
@keyframes ax-ltrUp{0%{opacity:0;transform:translateY(20px)}6%{opacity:1}14%{transform:translateY(-2px)}18%,100%{opacity:1;transform:translateY(0)}}
@keyframes ax-a4Ltr{0%,46%{opacity:0}58%,100%{opacity:1}}
@keyframes ax-barDraw{0%{opacity:0;transform:scaleX(0)}6%{opacity:1}26%{transform:scaleX(1)}42%{opacity:1;transform:scaleX(1)}52%,100%{opacity:0;transform:scaleX(1)}}
@keyframes ax-maskUp2{0%,52%{opacity:0;clip-path:inset(100% 0 0 0)}68%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes ax-c2Dot{0%,55%{opacity:0;transform:translateY(-12px) scale(.6)}68%{opacity:1;transform:translateY(2px) scale(1.08)}76%,100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ax-n3Wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ax-m4Dot{0%,100%{transform:scale(1)}10%{transform:scale(1.4)}24%{transform:scale(1)}}
@keyframes ax-m4Ltr{0%,30%,100%{transform:translateY(0)}10%{transform:translateY(-5px)}}
@keyframes ax-m5Ltr{0%,7%,22%,100%{color:currentColor;transform:translateY(0)}13%{color:#F0B429;transform:translateY(-3px)}}
@keyframes ax-m6Ltr{0%,44%,60%,100%{color:currentColor}52%{color:#F0B429}}
@keyframes ax-m6Dot{0%,44%,60%,100%{color:#F0B429}52%{color:#1F7A5A}}
@keyframes ax-p1Ltr{0%,80%{transform:translateY(0)}92%,100%{transform:translateY(-50%)}}
@keyframes ax-p1Dot{0%,10%,100%{transform:translateY(0)}4%{transform:translateY(-7px)}}
@keyframes ax-p2Ltr{0%,45%,59%,100%{color:currentColor}52%{color:#1F7A5A}}
@keyframes ax-p3Ltr{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes ax-p5Dot{0%,30%{color:#F0B429}38%,63%{color:#F1F6EC}71%,95%{color:#1F7A5A}100%{color:#F0B429}}
@keyframes ax-fDotCyc{0%,27%{color:#F0B429}33%,60%{color:#1F7A5A}66%,94%{color:#123B2E}100%{color:#F0B429}}
@keyframes ax-netWord{0%,58%{opacity:0;transform:scale(.9)}68%,100%{opacity:1;transform:scale(1)}}

/* Complete geometry stays intact when motion is disabled. */
@keyframes ax-calm-light{0%,100%{opacity:1}50%{opacity:.84}}
.ax-mark[data-ax-mark="Calm"] .ax-face{animation:ax-calm-light 1.6s ease-in-out 1}
.ax-mark[data-ax-mark="Calm"] .ax-face--left{animation-delay:.12s}
.ax-mark[data-ax-mark="Calm"] .ax-face--right{animation-delay:.24s}
@media(prefers-reduced-motion:reduce){.ax-mark *,.ax-word *{animation:none!important;transition:none!important}}
.ax-static .ax-mark *,.ax-static .ax-word *{animation:none!important;transition:none!important}