/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── TRANSITIONS GLOBALES ───────────────────────────────── */
.card, .mobile-card { animation: fadeIn .4s cubic-bezier(.4,0,.2,1); }

/* ══════════════════════════════════════════════════════════
   ÉCRAN D'INTRODUCTION
══════════════════════════════════════════════════════════ */

/* ─── Keyframes intro ─────────────────────────────────────── */
@keyframes introLogoIn {
  0%   { opacity: 0; transform: scale(.7) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes introTitleIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes introTaglineIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes introLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ─── Ouverture : l'écran intro remonte et disparaît ────── */
@keyframes introSlideUp {
  0%   { transform: translateY(0);     opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}

/* ─── L'app apparaît depuis le bas ──────────────────────── */
@keyframes appReveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Fond dégradé animé de l'intro ──────────────────────── */
@keyframes introBgShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ═══════════════════════════════════════════════════════════
   OVERLAY INTRO
═══════════════════════════════════════════════════════════ */
#intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  /* Fond dégradé animé tons de l'app */
  background: linear-gradient(135deg,
    #c8e4ff 0%,
    #ddeeff 30%,
    #e8f5ff 60%,
    #c8e4ff 100%);
  background-size: 300% 300%;
  animation: introBgShift 6s ease infinite;
  /* Overlays décoratifs identiques à body::before */
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

/* Pseudo-décor bulles comme la page principale */
#intro-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(74,144,217,.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(123,191,234,.16) 0%, transparent 50%);
  pointer-events: none;
}

/* ─── Logo 440×440 ────────────────────────────────────────── */
#intro-logo {
  width: 440px;
  height: 440px;
  object-fit: contain;
  border-radius: 48px;
  /* Légère ombre bleue signature de l'app */
  filter: drop-shadow(0 12px 40px rgba(74,144,217,.35));
  /* Apparition */
  opacity: 0;
  animation:
    introLogoIn  .7s cubic-bezier(.34,1.56,.64,1) .2s  forwards,
    introLogoFloat 3.5s ease-in-out              1.2s  infinite;
}

/* ─── Bloc titre + tagline ───────────────────────────────── */
#intro-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
}

#intro-title {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(2.8rem, 8vw, 4.4rem);
  letter-spacing: -.04em;
  color: var(--text);
  line-height: 1;
  opacity: 0;
  animation: introTitleIn .6s cubic-bezier(.4,0,.2,1) .85s forwards;
}

#intro-title span {
  color: var(--accent);
}

#intro-tagline {
  font-family: var(--mono);
  font-size: clamp(.75rem, 2.5vw, 1rem);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  animation: introTaglineIn .5s ease 1.2s forwards;
}

/* ─── État "en train de s'ouvrir" ────────────────────────── */
#intro-screen.is-opening {
  animation:
    introBgShift 6s ease infinite,
    introSlideUp .72s cubic-bezier(.55,.05,.68,.19) forwards;
  pointer-events: none;
}

/* ─── Pas de scrollbar tant que l'intro masque le contenu,
   ni pendant l'animation de révélation qui suit ──────────────
   Le contenu réel (.app, en .loading) peut transitoirement avoir
   une hauteur différente de son état final pendant l'init JS /
   le chargement des fonts. Comme l'intro recouvre tout l'écran,
   on bloque le scroll pendant ce laps de temps pour ne jamais
   laisser apparaître/disparaître une scrollbar fantôme.
   On couvre aussi .intro-done : appReveal anime un translateY(28px)
   → 0, et tant que l'élément est décalé, son contenu dépasse
   temporairement du viewport (Chrome compte les transforms dans
   la zone scrollable), ce qui ferait flasher la scrollbar pendant
   les .55s de l'animation si on ne la couvrait pas aussi. ───── */
body.intro-active,
body.intro-done {
  overflow-y: hidden;
}

/* ─── L'app est cachée jusqu'à la fin de l'intro ────────── */
body.intro-active #app-header,
body.intro-active #view-receiver-cloud,
body.intro-active #view-sender-cloud,
body.intro-active #view-mobile-receiver,
body.intro-active footer {
  opacity: 0;
  pointer-events: none;
}

/* ─── Quand l'intro se ferme → l'app apparaît ───────────── */
body.intro-done #app-header,
body.intro-done #view-receiver-cloud,
body.intro-done #view-sender-cloud,
body.intro-done #view-mobile-receiver,
body.intro-done footer {
  animation: appReveal .55s cubic-bezier(.4,0,.2,1) forwards;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 520px) {
  #intro-logo {
    width: min(80vw, 320px);
    height: min(80vw, 320px);
  }
}
@media (max-height: 600px) {
  #intro-logo {
    width: 200px;
    height: 200px;
  }
  #intro-screen { gap: .8rem; }
}

/* ─── Carrousel vertical idle-subtitle ──────────────────── */
/* Cycle 12s : chaque item visible ~2.5s sur 12s, puis pause 9.5s
   3 items × 4s de décalage = séquence parfaite sans chevauchement */
@keyframes subtitleScroll {
  0%    { transform: translateY(110%);  opacity: 0; }  /* caché en bas   */
  5%    { transform: translateY(0);     opacity: 1; }  /* entrée rapide  */
  28%   { transform: translateY(0);     opacity: 1; }  /* affiché        */
  33%   { transform: translateY(-110%); opacity: 0; }  /* sortie vers haut */
  34%   { transform: translateY(110%);  opacity: 0; }  /* reset en bas   */
  100%  { transform: translateY(110%);  opacity: 0; }  /* pause          */
}