/* ==========================================================================
   Sloop Auto Direct — Kenteken input component
   Golden reference: referentie afbeeldingen/Nieuwe referenties/
   hf_20260702_193706 (4-states sheet) is de enige visuele waarheid.
   Plaat = image asset (plate-base). Letters = glyph image overlays.
   Geen CSS-getekende plaat, geen browsertekst voor kentekenletters.
   ========================================================================== */

.kenteken {
  /* -------- tuning targets (afgeleid uit golden reference metingen) ------
     Gemeten op golden reference: letter-kern = 69% van plaathoogte,
     dash-kern = 15% van plaathoogte, gap tussen kernen ≈ 1.8% plaatbreedte
     (de glyph-PNG's hebben ±7.5% eigen padding voor de contactschaduw,
     daarom liggen de img-waarden hoger dan de kern-waarden). */
  --glyph-height: 81.3%;   /* img-hoogte letters (kern => 70.7% plaathoogte) */
  --dash-height: 25.8%;    /* img-hoogte dash    (kern => 15% plaathoogte) */
  --glyph-gap: 0.12cqi;    /* extra ruimte bovenop de asset-padding        */
  --glyph-drop: 1.9%;      /* letters iets onder optisch midden (golden)   */
  --dash-rise: -6.6%;      /* dash iets boven optisch midden (golden)      */
  --caret-w: 0.45cqi;
  --text-left: 11.4%;      /* start geel tekstvak (rechts van NL-strip)    */
  --text-right: 2.4%;

  position: relative;
  display: block;
  width: 100%;
  max-width: 640px;
  container-type: inline-size;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* -------- plaat ---------------------------------------------------------- */

.kenteken__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2800 / 520;   /* exact canvas van plate-base asset */
  cursor: text;
}

.kenteken__plate {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 1.1cqi 1.5cqi rgba(60, 45, 10, 0.30));
  transition: filter 180ms ease;
  will-change: filter;
}

.kenteken__base,
.kenteken__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* -------- empty state (embossed placeholder, zelfde canvas als base) ----- */

.kenteken__placeholder {
  opacity: 0;
  transition: opacity 160ms ease;
}

.kenteken.is-empty .kenteken__placeholder { opacity: 1; }
.kenteken.is-empty.is-focus .kenteken__placeholder { opacity: 0.45; }

/* -------- glyph overlay --------------------------------------------------- */

.kenteken__glyphs {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--text-left);
  right: var(--text-right);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--glyph-gap);
  pointer-events: none;
}

.kenteken.is-empty .kenteken__glyphs {
  justify-content: flex-start;
  padding-left: 7%;
}

.kenteken__glyphs img {
  display: block;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.kenteken__glyphs img.g-char {
  height: var(--glyph-height);
  transform: translateY(var(--glyph-drop));
}

.kenteken__glyphs img.g-dash {
  height: var(--dash-height);
  transform: translateY(var(--dash-rise));
}

/* -------- caret ----------------------------------------------------------- */

.kenteken__caret {
  display: none;
  width: var(--caret-w);
  height: 69%;
  margin-left: 0.5cqi;
  background: #15130f;
  border-radius: 0.08cqi;
  transform: translateY(1.5%);
}

.kenteken.is-focus .kenteken__caret {
  display: block;
  animation: kenteken-caret 1.1s steps(1) infinite;
}

@keyframes kenteken-caret {
  0%, 55%   { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* -------- hidden real input ---------------------------------------------- */

.kenteken__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;             /* voorkomt iOS zoom */
  outline: none;
  cursor: text;
  -webkit-tap-highlight-color: transparent;
}

.kenteken__input::selection { background: transparent; }
.kenteken__input::-moz-selection { background: transparent; }

/* -------- focus state (warme gouden glow, golden reference) --------------- */

.kenteken.is-focus .kenteken__plate {
  filter: drop-shadow(0 1.1cqi 1.5cqi rgba(60, 45, 10, 0.22))
          drop-shadow(0 0 1.1cqi rgba(255, 199, 110, 0.85))
          drop-shadow(0 0 3.4cqi rgba(255, 188, 88, 0.50));
}

/* -------- error state (subtiele rode rand + glow, golden reference) ------- */

.kenteken.is-error .kenteken__plate {
  filter: drop-shadow(0 1.1cqi 1.5cqi rgba(60, 45, 10, 0.22))
          drop-shadow(0 0 0.14cqi rgba(196, 58, 44, 0.95))
          drop-shadow(0 0 0.55cqi rgba(205, 68, 50, 0.55))
          drop-shadow(0 0 1.5cqi rgba(212, 82, 62, 0.22));
}

.kenteken__error {
  display: none;
  margin: 1.7cqi 0 0 1.5cqi;
  font-size: max(2.3cqi, 12px);
  font-weight: 500;
  letter-spacing: 0.015em;
  color: #962f27;
}

.kenteken.is-error .kenteken__error { display: block; }

/* -------- shake bij validatiefout ----------------------------------------- */

.kenteken.is-shake .kenteken__frame {
  animation: kenteken-shake 320ms ease;
}

@keyframes kenteken-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-1.1%); }
  45%      { transform: translateX(0.9%); }
  70%      { transform: translateX(-0.6%); }
  85%      { transform: translateX(0.35%); }
}

/* -------- statische demo-instanties --------------------------------------- */

.kenteken.is-static .kenteken__input { display: none; }
.kenteken.is-static { pointer-events: none; }
.kenteken.is-static.is-focus .kenteken__caret { animation: none; opacity: 1; }