/* ── Motifs visuels du redesign (identité landing comunicato.fr) ──────────
   Glass panels, glow, gradients, animations d'entrée — additions pures, ne
   redéfinissent aucun sélecteur déjà présent dans index.css. */

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
}

.icon-chip-gradient {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-cyan) 25%, transparent) 0%,
    color-mix(in srgb, var(--accent-purple) 20%, transparent) 50%,
    color-mix(in srgb, var(--accent-magenta) 20%, transparent) 100%);
}

.text-gradient {
  background: linear-gradient(135deg, var(--text) 15%, var(--accent-cyan) 50%, var(--accent-magenta-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Apparition douce des cartes/sections au premier rendu de chaque écran — délai décalé
   via nth-child pour un effet "staggered" sans JS (index.css garde .screen { display:none }
   par défaut, donc l'animation se rejoue naturellement à chaque activation d'onglet). */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.screen.active > .section,
.screen.active > .brief-bar,
.screen.active > #network-stats-cards,
.screen.active .card {
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.screen.active > .section:nth-child(2) { animation-delay: 0.05s; }
.screen.active > .section:nth-child(3) { animation-delay: 0.1s; }
.screen.active > .section:nth-child(4) { animation-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
  .screen.active > .section,
  .screen.active > .brief-bar,
  .screen.active > #network-stats-cards,
  .screen.active .card {
    animation: none;
  }
}