/* Berri Digitalizáló – kézírás → gépelt szöveg görgetésre
   A JS az elem tartalmát két rétegbe másolja: .bd-kez (kézírás) és .bd-gep (gépelt).
   A két réteg egy rácsban, egymáson ül, így a doboz mindig a magasabbikhoz igazodik. */

:root {
  --bd-hand-family: "Caveat", cursive;
  --bd-hand-weight: 700;
  --bd-hand-scale: 1.15;
  --bd-duration: 550ms;
  --bd-scan: #E8467C;
  /* --bd-ink: örökölt, ha nincs megadva */
}

.bd-ready {
  position: relative;
  display: grid;
}
/* inline elemek (span, a, strong) esetén inline-grid, hogy a folyó szövegben maradjanak */
.bd-ready.bd-inline {
  display: inline-grid;
  vertical-align: baseline;
}

.bd-ready > .bd-kez,
.bd-ready > .bd-gep {
  grid-area: 1 / 1;
  display: block;
  transition: opacity var(--bd-duration) ease, filter var(--bd-duration) ease, transform var(--bd-duration) ease;
}

.bd-ready > .bd-kez {
  font-family: var(--bd-hand-family);
  font-weight: var(--bd-hand-weight);
  font-size: calc(1em * var(--bd-hand-scale));
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bd-ink, inherit);
}

.bd-ready > .bd-gep {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(4px);
  visibility: hidden;
  pointer-events: none;
}

/* digitalizált állapot */
.bd-ready.bd-tipp > .bd-kez {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-4px);
  pointer-events: none;
}
.bd-ready.bd-tipp > .bd-gep {
  opacity: 1;
  filter: none;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

/* szkennelő csík */
.bd-ready::after {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -14%;
  width: 14%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bd-scan) 26%, transparent), transparent);
}
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
  .bd-ready::after { background: linear-gradient(90deg, transparent, var(--bd-scan), transparent); opacity: 0; }
  .bd-ready.bd-tipp::after { animation-name: bd-scan-fallback; }
  @keyframes bd-scan-fallback { 0% { left: -14%; opacity: .25; } 100% { left: 100%; opacity: 0; } }
}
.bd-ready.bd-tipp::after {
  animation: bd-scan .7s ease-out;
}
@keyframes bd-scan {
  0%   { left: -14%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* opcionális felirat a digitalizálás után */
.bd-ocr {
  display: block;
  font-family: inherit;
  font-size: .68em;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bd-scan);
  opacity: 0;
  margin-top: .3em;
  transition: opacity .4s ease .3s;
}
.bd-ready.bd-tipp + .bd-ocr { opacity: 1; }

/* csökkentett mozgás: nincs animáció, azonnal gépelt */
@media (prefers-reduced-motion: reduce) {
  .bd-ready > .bd-kez,
  .bd-ready > .bd-gep,
  .bd-ocr { transition: none; }
  .bd-ready.bd-tipp::after { animation: none; }
}