/* ════════════════════════════════════════════════════════════
   A.obd-title.css — Animation séquentielle du titre OBD.@
   Entrée lettre par lettre + bascule "a" → "@" avec pulsation
════════════════════════════════════════════════════════════ */

/* ── Conteneur titre ── */
#obd-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  margin-bottom: 18px;
  min-height: 52px;
}

/* ── Lettres O, B, D — entrée depuis la gauche ── */
.obd-letter {
  font-family: 'Cinzel Decorative', serif;
  font-size: 40px;
  font-weight: 700;
  color: transparent;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(201,168,76,0.4));
  opacity: 0;
  transform: translateX(-20px);
  display: inline-block;
}

/* ── Point de séparation — pop-in rotatif ── */
.obd-dot {
  font-family: 'Cinzel', serif;
  font-size: 40px;
  color: var(--gold);
  opacity: 0;
  transform: scale(0);
  display: inline-block;
  margin: 0 1px;
  filter: drop-shadow(0 0 10px rgba(201,168,76,0.7));
}

/* ── Lettre finale A / @ — entrée depuis la droite ── */
.obd-a {
  font-family: 'Cinzel Decorative', serif;
  font-size: 40px;
  font-weight: 700;
  display: inline-block;
  opacity: 0;
  transform: translateX(20px);
  position: relative;
  min-width: 32px;
  text-align: center;
}

/* Caractère "a" (état initial avant bascule) */
.obd-a .char-a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(201,168,76,0.4));
  transition: opacity 0.4s ease;
}

/* Caractère "@" (état final pulsant) */
.obd-a .char-at {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 36px;
  opacity: 0;
  filter: drop-shadow(0 0 14px rgba(201,168,76,0.8));
  transition: opacity 0.4s ease;
}

/* ── Keyframes ── */

@keyframes obdLetterIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes obdDotIn {
  0%   { opacity: 0; transform: scale(0) rotate(-90deg); }
  60%  { opacity: 1; transform: scale(1.4) rotate(10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes obdAIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Pulsation du "@" en boucle */
@keyframes atPulse {
  0%,100% { filter: drop-shadow(0 0 10px rgba(201,168,76,0.5)); }
  50%     { filter: drop-shadow(0 0 22px rgba(201,168,76,0.95)); }
}