/* blinGO judesio sluoksnis — iliustracijos, 3D tilt, reveal.
   Naudoja tuos pacius tokenus kaip puslapiai: --accent, --bg, --line.
   Viskas issijungia su prefers-reduced-motion. */

:root{
  --art-ink:#1F1E1D;
  --art-bg:#FDFCFA;
}

/* ---------- Iliustracijos ---------- */
.art{display:block;line-height:0;overflow:hidden}
.art-svg{width:100%;height:auto;max-width:100%;overflow:hidden}
.art-ic{width:40px;height:40px;flex:none}

.art .fillbg{fill:var(--art-bg)}
.art .acc-fill{fill:var(--accent,#D97757);stroke:none}
.art .acc-stroke{stroke:var(--accent,#D97757)}
.art .bot-eye,.art .bot-tip{fill:var(--art-ink);stroke:none}
.art .bot-core{fill:var(--accent,#D97757);stroke:none}
.art .ln-ground{stroke-width:1.6}
.art .flora{opacity:.75}

/* piesiasi, kai iriedа i ekrana */
.art-svg path,.art-svg rect,.art-svg circle,.art-svg ellipse{
  stroke-dasharray:var(--len,600);
  stroke-dashoffset:var(--len,600);
}
/* uzpildai laukia konturu — kitaip nepiestame kadre kabo pliki taskai */
.art .acc-fill,.art .bot-eye,.art .bot-tip,.art .bot-core,.art .fillbg{opacity:0}
.art.drawn .acc-fill,.art.drawn .bot-eye,.art.drawn .bot-tip,
.art.drawn .bot-core,.art.drawn .fillbg{opacity:1;transition:opacity .5s ease .25s}

.art.drawn .art-svg path,
.art.drawn .art-svg rect,
.art.drawn .art-svg circle,
.art.drawn .art-svg ellipse{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 28ms);
}

/* nuolatinis mikro-judesys */
.art.drawn .bot-hover{animation:bot-float 4.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.art.drawn .bot-antenna{animation:bot-nod 3.1s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.art.drawn .bot-eye{animation:bot-blink 6.2s steps(1,end) infinite;transform-box:fill-box;transform-origin:50% 50%}
.art.drawn .bot-core{animation:bot-pulse 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
.art.drawn .drift{animation:drift 5.2s ease-in-out infinite;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:50% 50%}
.art.drawn .spark{animation:spark 3.4s ease-in-out infinite}
.art.drawn .dot{animation:bot-pulse 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}

/* srauto linija — bruksneliai bega */
.art.drawn .ln-flow{
  stroke-dasharray:7 9;
  stroke-dashoffset:0;
  animation:flow 1.6s linear infinite;
  transition:none;
}

@keyframes bot-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bot-nod{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}}
@keyframes bot-blink{0%,95%{transform:scaleY(1)}96%,98%{transform:scaleY(.12)}99%,100%{transform:scaleY(1)}}
@keyframes bot-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.82}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes spark{0%,100%{opacity:.25}45%{opacity:1}}
@keyframes flow{to{stroke-dashoffset:-32}}

/* atrakinimas — spyna atsidaro */
.art .lock-shackle{transition:transform .55s cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;transform-origin:100% 100%}
.art.unlocked .lock-shackle{transform:rotate(-26deg) translateY(-3px)}
.art .key{transition:transform .5s ease,opacity .4s ease}
.art.unlocked .key{transform:translateX(60px);opacity:0}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].in{transition-delay:var(--rd,0s)}

/* ---------- 3D tilt korteles ---------- */
.tilt-scene{perspective:1000px}
.tilt{
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,border-color .25s ease;
  will-change:transform;
}
.tilt.is-tilting{transition:transform .08s linear,box-shadow .35s ease,border-color .25s ease}
.tilt:hover{box-shadow:0 18px 40px rgba(31,30,29,.10)}
.tilt > *{transform:translateZ(18px)}

/* ---------- Detales ---------- */
.shine{position:relative;overflow:hidden}
.shine::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);
}
.shine:hover::after{transform:translateX(120%);transition:transform .85s ease}

.count{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .art-svg path,.art-svg rect,.art-svg circle,.art-svg ellipse{stroke-dasharray:none;stroke-dashoffset:0}
  .art.drawn *{animation:none !important}
  [data-reveal]{opacity:1;transform:none}
  .tilt{transform:none !important}
  .shine::after{display:none}
}