/* Intrarea pe site. Marca se deseneaza singura, numele se aseaza sub ea, apoi
   marca zboara in coltul din stanga sus, exact peste logo-ul din header.

   Perdeaua e facuta din JS, nu din HTML: daca scriptul nu porneste, nu exista
   nimic peste pagina. Invers ar fi fost o pagina acoperita definitiv. */
.vs-intro {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  background: #f4f3f1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 26px;
  /* Perdeaua se ridica; `transform` si nu `height`, ca sa nu reaseze pagina. */
  transition: transform .9s cubic-bezier(.76,0,.24,1), opacity .5s ease;
}
.vs-intro.is-gone { transform: translateY(-101%); }

.vs-intro__mark {
  width: 130px; height: 130px;
  overflow: visible;
  /* Punctul de origine sta in coltul din stanga sus, ca sa putem duce marca
     peste logo-ul din header printr-o singura mutare plus o scalare — cu
     originea in centru ar trebui corectat si decalajul dat de scalare. */
  transform-origin: 0 0;
  transition: transform .8s cubic-bezier(.76,0,.24,1);
}
.vs-intro__mark.is-out { opacity: 0; transition: opacity .3s ease; }
.vs-intro__mark path {
  fill: none;
  stroke: #121212;
  stroke-width: 4;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  /* Lungimea traseului si decalajul se scriu din JS, cu getTotalLength():
     scrise de mana ar fi gresite la orice schimbare a marcii. */
  stroke-dashoffset: var(--vs-len, 200);
  stroke-dasharray: var(--vs-len, 200);
  transition: stroke-dashoffset .85s cubic-bezier(.65,0,.35,1);
}
.vs-intro.is-draw .vs-intro__v { stroke-dashoffset: 0; }
.vs-intro.is-draw .vs-intro__b { stroke-dashoffset: 0; transition-delay: .55s; transition-duration: .35s; }

.vs-intro__word { display: flex; overflow: hidden; padding-bottom: 2px; }
.vs-intro__word span {
  display: block;
  font: 400 15px/1.4 Poppins, system-ui, sans-serif;
  letter-spacing: .3em;
  color: #121212;
  transform: translateY(115%);
  opacity: 0;
  transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  transition-delay: calc(var(--vs-i) * 28ms);
}
.vs-intro.is-word .vs-intro__word span { transform: none; opacity: 1; }
.vs-intro.is-fly .vs-intro__word { opacity: 0; transition: opacity .3s ease; }

/* Cat tine intrarea, pagina de dedesubt nu se deruleaza. */
html.vs-intro-on, html.vs-intro-on body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .vs-intro { display: none; } }

/* Perdeaua in tema intunecata: aceleasi miscari, culorile schimbate intre ele. */
html.vs-dark .vs-intro { background: #0a0a0a; }
html.vs-dark .vs-intro__mark path { stroke: #ededed; }
html.vs-dark .vs-intro__word span { color: #ededed; }