/**
 * Összeolvasás — a két betű egymáshoz csúszik, miközben a hang folyamatosan
 * átmegy az egyikből a másikba.
 *
 * Ez az alkalmazás legfontosabb vizuális funkciója. Papírkártya nem tud
 * animálni; a képernyő igen — és a gyerek LÁTJA és HALLJA, ahogy a két hang
 * egy egységgé válik. Dokumentáció: docs/02-pedagogia-olvasas.md §4
 *
 * A kartya.css-re épül (betűtípus, színek).
 */

.oo {
  --oo-tavolsag: 96px;      /* a két kártya közti kezdő rés fele */
  --oo-tartam: 960ms;       /* a csúszás ideje — a hanghoz igazítva állítja a JS */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* A két kártya sora */
.oo__par {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--oo-tavolsag) * 2);
  transition: gap var(--oo-tartam) cubic-bezier(.45, 0, .35, 1);
}

/* Csúszás közben a rés nullára záródik — a betűk összeérnek */
.oo--csuszik .oo__par { gap: 4px; }

.oo__kartya { transition: transform var(--oo-tartam) cubic-bezier(.45, 0, .35, 1); }

/* Az épp „szóló” betű enyhén kiemelve — a gyerek látja, honnan hová tart a hang */
.oo__kartya.oo--massal-szol .kartya { transform: scale(1.04); }
.oo__kartya.oo--magan-szol  .kartya { transform: scale(1.06); }

/* ---- csúszó pont (az „ujj”, ami a betűk alatt halad, nem ugrik) ---- */

.oo__sin {
  position: relative;
  width: calc(var(--oo-tavolsag) * 2 + 240px);
  max-width: 90vw;
  height: 30px;
  margin-top: -6px;
}
.oo__sin::before {
  content: '';
  position: absolute;
  inset-inline: 8%;
  top: 50%;
  height: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--k-massal, #2a6fb5) 22%, transparent);
}

.oo__pont {
  position: absolute;
  top: 50%;
  left: 12%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--k-massal, #2a6fb5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  transition: left var(--oo-tartam) cubic-bezier(.45, 0, .35, 1),
              background var(--oo-tartam) linear;
}
/* A pont a mássalhangzótól a magánhangzóig fut, és közben színt vált */
.oo--csuszik .oo__pont {
  left: 88%;
  background: var(--k-magan, #e08217);
}

/* ---- összeolvadt szótag ---- */

.oo__szotag {
  font-family: var(--kartya-betutipus, system-ui);
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s ease, transform .3s ease;
  min-height: 1.2em;
}
.oo--kesz .oo__szotag {
  opacity: 1;
  transform: scale(1);
}

/* A csökkentett mozgás beállításnál a lényeg megmarad (a betűk összeérnek és
   a szótag megjelenik), csak az átmenetek rövidülnek — az összeolvasás
   megmutatása itt funkció, nem dísz, ezért nem kapcsoljuk ki teljesen. */
@media (prefers-reduced-motion: reduce) {
  .oo__par, .oo__pont, .oo__kartya { transition-duration: .12s; }
  .oo__szotag { transition-duration: .12s; }
}