/* Kurykla logotipas „Konstravimas“ (brand/logo-anim/v3, ženklas pasirinktas 2026-10-09). Spalvos — brand/BRAND.md.
   Numatytai ženklas ima puslapio --ink / --accent (Įmonė, viešas SF); `.logo--fixed` — fiksuotos tamsios prekės ženklo spalvos (įvadas, kur
   tokenai keičiasi su pasauliu). Judesys tik transform/opacity; įėjimas ≤ 2,25 s, po to retkarčiais vienas blokas vos pasislenka ir grįžta.
   `.logo--static` — be judesio (PDF, viešas SF, spausdinimas). Dėžutės matmenys fiksuoti (aspect-ratio), judesys jos nekeičia: CLS 0. */
.logo {
  --logo-ink: var(--ink, #ECEEE4);
  --logo-accent: var(--accent, #A8B36A);
  --logo-glow: var(--accent-strong, #C5D07E);
  --logo-glow-a: .6;
  --logo-spark: #F2F7D6;
  display: block;
  overflow: visible;
  color: var(--logo-ink);
}
.logo--fixed { --logo-ink: #ECEEE4; --logo-accent: #A8B36A; --logo-glow: #C5D07E; }
.logo--sm { height: 28px; width: auto; aspect-ratio: 2796 / 1012; }
.logo--lg { width: min(100%, 663px); height: auto; aspect-ratio: 2796 / 1012; }
.logo--static .h-in, .logo--static .sweep { display: none; }

.k-stem, .k-arm { fill: var(--logo-ink); }
.k-leg, .umac { fill: var(--logo-accent); }   /* .umac — brūkšnelis virš ū, haki blokelis K peties kampu */
.word path { fill: var(--logo-ink); stroke: var(--logo-ink); stroke-width: 12; stroke-linejoin: round; }
.h { opacity: 1; }
.h-in { opacity: .3; }
.s0 { stop-color: var(--logo-glow); stop-opacity: var(--logo-glow-a); }
.s1 { stop-color: var(--logo-glow); stop-opacity: 0; }
.w0 { stop-color: var(--logo-spark); stop-opacity: 0; }
.w1 { stop-color: var(--logo-spark); stop-opacity: .7; }
.sweep { opacity: 0; }

/* 1. Blokai atslenka ir susijungia: kamienas iš apačios, petys iš dešinės viršaus, koja iš dešinės apačios (kiekvienas savo įstrižainės kryptimi) */
.b-stem { animation: k-in-stem .8s cubic-bezier(.3, 1.2, .5, 1) .1s both; }
.b-arm  { animation: k-in-arm  .8s cubic-bezier(.3, 1.2, .5, 1) .32s both; }
.b-leg  { animation: k-in-leg  .8s cubic-bezier(.3, 1.2, .5, 1) .54s both; }
@keyframes k-in-stem { 0% { transform: translate(0, 46px); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes k-in-arm  { 0% { transform: translate(34px, -48px); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes k-in-leg  { 0% { transform: translate(34px, 48px); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } }

/* 2. Kai paskutinis blokas užsifiksuoja: šviesos praslinkimas per K ir švelnus haki švytėjimas */
.sweep { animation: k-sweep .9s cubic-bezier(.4, 0, .2, 1) 1.25s both; }
@keyframes k-sweep { 0% { transform: translateX(0) skewX(-18deg); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(150px) skewX(-18deg); opacity: 0; } }
.h-in { animation: k-glow 1.3s ease-out 1.15s both; }
@keyframes k-glow { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .3; } }

/* 3. Raidės įslenka iš apačios */
.l { animation: k-rise .75s cubic-bezier(.2, .8, .2, 1) both; }
.l0 { animation-delay: 1.1s; } .l1 { animation-delay: 1.18s; } .l2 { animation-delay: 1.26s; }
.l3 { animation-delay: 1.34s; } .l4 { animation-delay: 1.42s; } .l5 { animation-delay: 1.5s; }
@keyframes k-rise { 0% { transform: translateY(90px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.logo:not(.logo--static) .umac { animation: k-rise .75s cubic-bezier(.2, .8, .2, 1) 1.1s both; }   /* brūkšnelis kyla kartu su u */

/* Ramybė: kas 8 s vienas blokas (petys, koja, kamienas paeiliui) vos pasislenka ir grįžta; švytėjimas alsuoja */
.i-arm  { animation: k-nudge-arm  24s ease-in-out 3s  infinite; }
.i-leg  { animation: k-nudge-leg  24s ease-in-out 11s infinite; }
.i-stem { animation: k-nudge-stem 24s ease-in-out 19s infinite; }
.h      { animation: k-breathe 9s ease-in-out 3s infinite; }
@keyframes k-nudge-arm  { 0%, 13%, 100% { transform: none; } 5%, 8% { transform: translate(1.4px, -2px); } }
@keyframes k-nudge-leg  { 0%, 13%, 100% { transform: none; } 5%, 8% { transform: translate(1.4px, 2px); } }
@keyframes k-nudge-stem { 0%, 13%, 100% { transform: none; } 5%, 8% { transform: translate(0, -2px); } }
@keyframes k-breathe    { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }

@media (prefers-reduced-motion: reduce) {
  .logo *, .logo { animation: none !important; }
}