/* ── Taf — loader / splash animation ─────────────────────────────
   Identity (charte graphique v1.0 — 2026) :
     bg     : #F3ECE1  (crème)
     ink    : #17140F  (encre)
     accent : #F26A33  (orange taf)
     font   : Hanken Grotesk, weight 900 (Black)
   Wordmark "taf" en bas-de-casse + point orange, jamais retiré.
   Motion  : respiration douce de l'ensemble + pulse du point.
   ───────────────────────────────────────────────────────────── */

.taf-loader,
.taf-loader * { box-sizing: border-box; }

.taf-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

.taf-cluster {
  animation: taf-in 0.5s cubic-bezier(.2,.85,.25,1) both;
}

/* ── wordmark ─────────────────────────────────────────────────── */
.taf-word {
  display: inline-flex;
  align-items: flex-end;
  font-weight: 900;
  font-size: 96px;
  letter-spacing: -0.05em;
  line-height: 0.7;
  color: #17140F;
  animation: taf-breathe 3.2s ease-in-out infinite;
}

.taf-dot {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #F26A33;
  margin-left: 5px;
  margin-bottom: 11px;
  animation: taf-dot-glow 1.6s ease-in-out infinite;
}

/* ── keyframes ────────────────────────────────────────────────── */
@keyframes taf-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes taf-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
@keyframes taf-dot-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ── exit (app ready) ─────────────────────────────────────────── */
.taf-host { transition: opacity 0.5s ease, transform 0.5s ease; }
.taf-host.taf-hide { opacity: 0; transform: scale(1.04); pointer-events: none; }

/* ── static first-frame (iOS native splash) ───────────────────── */
.taf-loader.is-static .taf-cluster,
.taf-loader.is-static .taf-word,
.taf-loader.is-static .taf-dot { animation: none !important; }

/* ── reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .taf-cluster,
  .taf-word,
  .taf-dot { animation: none !important; opacity: 1; transform: none; }
}