/* Photo de profil : grilles par thème et effets animés. Chargé sur toutes les pages (base.html). */

/* ----- Choix de l'avatar (Paramètres, Général) ----- */
.avatar-grid-scroll { max-height: 360px; overflow-y: auto; padding: 4px; }
.avatar-grid[hidden], .avatar-substyles .chip-button[hidden] { display: none; }
.chip-count { margin-left: 4px; font-size: 11px; opacity: .65; }
.chip-small { padding: 4px 10px; font-size: 12px; }
.avatar-substyles { margin-top: -4px; }
.avatar-effects { border: 0; margin: 0; padding: 0; }
.avatar-effects legend { padding: 0; font-weight: 600; margin-bottom: 8px; }
.avatar-choice img { object-fit: cover; }

/* ----- Effets animés sur l'avatar du compte connecté ----- */
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@keyframes fx-spin { to { --fx-angle: 360deg; } }
@keyframes fx-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fx-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft), 0 0 4px 0 var(--accent); }
  50% { box-shadow: 0 0 0 5px var(--accent-soft), 0 0 14px 2px var(--accent); }
}

html[data-avatar-effect="ring"] :is(.topbar .user-menu > summary.avatar, .user-menu-head .avatar, .avatar-heading .avatar) {
  overflow: visible; position: relative; isolation: isolate;
}
html[data-avatar-effect="ring"] :is(.topbar .user-menu > summary.avatar, .user-menu-head .avatar, .avatar-heading .avatar) img {
  border-radius: 50%;
}
html[data-avatar-effect="ring"] :is(.topbar .user-menu > summary.avatar, .user-menu-head .avatar, .avatar-heading .avatar)::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 50%;
  background: conic-gradient(from var(--fx-angle), #ff5f6d, #ffc371, #47e0a0, #38b6ff, #a855f7, #ff5f6d);
  animation: fx-spin 3s linear infinite;
}
html[data-avatar-effect="pulse"] :is(.topbar .user-menu > summary.avatar, .user-menu-head .avatar, .avatar-heading .avatar) {
  animation: fx-pulse 2.2s ease-in-out infinite;
}
html[data-avatar-effect="float"] :is(.topbar .user-menu > summary.avatar, .user-menu-head .avatar, .avatar-heading .avatar) {
  animation: fx-float 2.4s ease-in-out infinite;
}
html[data-avatar-effect="glow"] :is(.topbar .user-menu > summary.avatar, .user-menu-head .avatar, .avatar-heading .avatar) {
  animation: fx-glow 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html[data-avatar-effect] :is(.topbar .user-menu > summary.avatar, .user-menu-head .avatar, .avatar-heading .avatar),
  html[data-avatar-effect] :is(.topbar .user-menu > summary.avatar, .user-menu-head .avatar, .avatar-heading .avatar)::before {
    animation: none;
  }
}