/*
 * Palydovai.
 *
 * Failas sąmoningai mažas. Padėtį skaičiuoja JS (companion-placement.js) ir rašo
 * inline, nes ji priklauso nuo anchor'o vietos viewport'e — CSS to nežino.
 * Čia lieka tik tai, kas nekinta: sluoksnis, saugumas ir judesio ribos.
 *
 * KODĖL position: fixed IR z-index: 2. Fixed — kad veikėjas nebūtų kortelės
 * srauto dalis ir niekaip negalėtų pakeisti jos aukščio (CLS). z-index 2 — kad
 * liktų virš puslapio fono, bet po viskuo, kas gali jį uždengti: antraštė 100,
 * stalčiai 200, sutikimas 300, toast'ai 400.
 *
 * @package zaisludeze
 */

.zd-companion {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  contain: layout paint;
  will-change: transform, opacity;
}

/* Lottie įdeda savo svg — jis turi užimti visą hostą ir nieko negaudyti. */
.zd-companion svg,
.zd-companion canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Mikroefektai. Ne daugiau trijų dalelių vienu metu — riba manifeste. */
.zd-companion__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.zd-companion__fx img {
  position: absolute;
  width: 22%;
  height: auto;
  opacity: 0;
  animation: zd-companion-fx 620ms var(--ease-ui, ease-out) forwards;
}
.zd-companion__fx img:nth-child(2) { animation-delay: 90ms; }
.zd-companion__fx img:nth-child(3) { animation-delay: 180ms; }

@keyframes zd-companion-fx {
  0%   { opacity: 0; transform: translateY(4px) scale(.72); }
  40%  { opacity: 1; transform: translateY(-2px) scale(1.04); }
  100% { opacity: 0; transform: translateY(-10px) scale(.94); }
}

/*
 * Sumažinto judesio režimu sistema išjungiama visiškai — statinio posterio
 * nerodom, nes turinys dekoratyvinis ir be jo nieko neprarandama.
 * Tai antra apsauga: pirmoji yra JS pusėje, ši veikia net jei JS suklystų.
 */
@media (prefers-reduced-motion: reduce) {
  .zd-companion { display: none !important; }
}