/* Kódszabó: nyitó animáció és címek előtűnése (nyito.js).
   Minden itt csak akkor él, ha a nyito.js feltette az osztályokat (html.ki-cimek, html.ki-nyito); JS nélkül, csökkentett
   mozgásnál és ha az oldal nem az elején nyílik, a tartalom simán látszik. Csak transform és opacity mozog
   (kivétel: a kis SVG-jel vonalrajzolása és a feloszlás egyszeri, 4 px-es elmosása). */

/* ---- szavak maszkban (a nagy cím és az állomások címei) ---- */
.ki-maszk {
  display: inline-block; vertical-align: top;
  overflow: hidden;
  /* az ékezetek és az alsó szárak ne vágódjanak le; a negatív margó miatt a sorköz nem változik */
  padding: .16em .05em .18em; margin: -.16em -.05em -.18em;
}
.ki-szo { display: inline-block; }

/* állomások: a cím szavai alulról úsznak fel, amikor az állomás aktív lesz */
html.ki-cimek .allomas .cim .ki-szo {
  transform: translateY(112%);
  opacity: 0;
  transition: transform .35s ease-in, opacity .25s ease-in;
}
html.ki-cimek .allomas.aktiv .cim .ki-szo {
  transform: none;
  opacity: 1;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .6s ease;
  transition-delay: calc(.12s + var(--i, 0) * 60ms);
}

/* ---- nyitó: a cérna kiölti a jelet, aztán a nagy cím ---- */
html.ki-nyito { --ki-cim: 1.28s; --ki-bev: 1.7s; --ki-gomb: 1.8s; --ki-fej: 1.35s; }
html.ki-rovid { --ki-cim: .05s; --ki-bev: .45s; --ki-gomb: .55s; --ki-fej: 0s; }

html.ki-nyito .nagycim .ki-szo {
  animation: ki-fel .95s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--ki-cim) + var(--i, 0) * 85ms);
}
html.ki-nyito .bevezeto { animation: ki-be .7s cubic-bezier(.2, .7, .2, 1) var(--ki-bev) both; }
html.ki-nyito .gorgess { animation: ki-be .7s cubic-bezier(.2, .7, .2, 1) var(--ki-gomb) both; }
html.ki-teljes .fejlec { animation: ki-halvany .8s ease var(--ki-fej) both; }

@keyframes ki-fel {
  0% { transform: translateY(112%); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes ki-be { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ki-halvany { from { opacity: 0; } to { opacity: 1; } }

/* a fátyol a jellel: nem fog meg kattintást, nem kap fókuszt */
.ki-fatyol {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  pointer-events: none;
  animation: ki-oszlik .55s cubic-bezier(.4, 0, .2, 1) 1.2s both;
}
.ki-fatyol.ki-el { animation: ki-el .28s ease both; }
@keyframes ki-oszlik {
  from { opacity: 1; transform: none; filter: blur(0); }
  to { opacity: 0; transform: scale(1.045); filter: blur(4px); }
}
@keyframes ki-el { from { opacity: 1; } to { opacity: 0; } }

.ki-jel {
  display: grid; justify-items: center; gap: 1.1rem;
  padding: 4.5rem 6rem;
  /* sötét udvar a jel körül, hogy elváljon a mögötte kigördülő szövettől */
  background: radial-gradient(closest-side, rgba(7, 6, 15, .78), rgba(7, 6, 15, .4) 60%, rgba(7, 6, 15, 0));
}
.ki-ikon {
  width: clamp(92px, 11vw, 132px); height: auto; overflow: visible;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(139, 92, 246, .95)) drop-shadow(0 0 22px rgba(139, 92, 246, .45));
}
/* a cérna: vékony, izzó vonal, ahogy a tű húzza */
.ki-cerna {
  stroke: #d9ccff; stroke-width: 1.05;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: ki-huz .46s cubic-bezier(.55, .1, .35, 1) var(--k) both, ki-halvanyul .5s ease calc(var(--k) + .5s) both;
}
/* a tű: rövid, fehéren izzó szakasz a cérna elején */
.ki-tu {
  stroke: #fff; stroke-width: 2.1;
  stroke-dasharray: .035 2; stroke-dashoffset: .035;
  animation: ki-tu .46s cubic-bezier(.55, .1, .35, 1) var(--k) both;
}
/* a kész öltések: a jel szaggatott, varrott alakja */
.ki-oltes {
  stroke: #c4b5fd; stroke-width: 2.7;
  stroke-dasharray: 2.1 1.4; stroke-linecap: butt;
  opacity: 0;
  animation: ki-halvany .32s ease calc(var(--k) + .3s) both;
}
@keyframes ki-huz { to { stroke-dashoffset: 0; } }
@keyframes ki-tu { 0% { stroke-dashoffset: .035; opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: -.965; opacity: 0; } }
@keyframes ki-halvanyul { to { opacity: .35; } }

.ki-nev {
  position: relative;
  margin: 0;
  font: 300 clamp(2rem, 3.6vw, 2.9rem)/1 var(--betu-cim);
  font-variation-settings: "opsz" 144;
  letter-spacing: -.015em;
  color: var(--kreta);
  text-shadow: 0 0 24px rgba(139, 92, 246, .55);
}
/* a név balról jobbra „kiöltődik”: a keret jobbra csúszik, a szöveg ugyanannyit vissza, így helyben marad */
.ki-nev-k {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: .25em 0; margin: -.25em -.4em;
  animation: ki-tol-k .75s cubic-bezier(.6, .05, .25, 1) .55s both;
}
.ki-nev-b {
  display: inline-block; padding: 0 .4em;
  animation: ki-tol-b .75s cubic-bezier(.6, .05, .25, 1) .55s both;
}
@keyframes ki-tol-k { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes ki-tol-b { from { transform: translateX(100%); } to { transform: none; } }
/* a varrat a név alatt, balról jobbra öltve */
.ki-nev::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.32em; height: 2px;
  background: repeating-linear-gradient(90deg, #c4b5fd 0 9px, transparent 9px 15px);
  box-shadow: 0 0 10px rgba(139, 92, 246, .8);
  transform: scaleX(0); transform-origin: left center;
  animation: ki-szegely .75s cubic-bezier(.6, .05, .25, 1) .62s both;
}
@keyframes ki-szegely { to { transform: scaleX(1); } }

/* ugrásra (kattintás, billentyű, görgetés) minden azonnal a helyére kerül */
html.ki-ugrik .nagycim .ki-szo,
html.ki-ugrik .bevezeto,
html.ki-ugrik .gorgess,
html.ki-ugrik .fejlec { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html.ki-cimek .allomas .cim .ki-szo { transform: none; opacity: 1; transition: none; }
  .ki-fatyol { display: none; }
}