/* ============================================================
   BADGE DR STRANGE — CSS animé pur
   Utilisé uniquement dans avatar-block (user-profile + auteur)
   Le cadre PNG statique est utilisé pour cf-grid et nav.
   ============================================================ */

/* ── Keyframes rotation ── */
@keyframes bds-cw  { to { transform: rotate( 360deg); } }
@keyframes bds-ccw { to { transform: rotate(-360deg); } }

/* ── Keyframes respirations internes ── */
@keyframes bds-breathe-slow { 0%,100%{opacity:.95} 50%{opacity:.68} }
@keyframes bds-breathe-fast { 0%,100%{opacity:.92} 50%{opacity:.58} }
@keyframes bds-glyph-flicker {
  0%,100%{opacity:.85} 14%{opacity:1} 19%{opacity:.52}
  37%{opacity:.9} 54%{opacity:.7} 69%{opacity:1} 81%{opacity:.48}
}
@keyframes bds-star-pulse-a { 0%,100%{opacity:.55} 50%{opacity:.9}  }
@keyframes bds-star-pulse-b { 0%,100%{opacity:.5}  50%{opacity:.85} }
@keyframes bds-fractal-pulse {
  0%,100%{ opacity:.72; }
  40%    { opacity:1;   }
  70%    { opacity:.82; }
}
@keyframes bds-time-ripple {
  from { stroke-dashoffset: 0;  }
  to   { stroke-dashoffset: 60; }
}

/* ── Keyframes sparks internes ── */
@keyframes bds-spark-fly-1  { 0%{transform:translate(0,0) scale(1);opacity:.9}  100%{transform:translate(28px,-52px) scale(.1);opacity:0} }
@keyframes bds-spark-fly-2  { 0%{transform:translate(0,0) scale(1);opacity:.85} 100%{transform:translate(-22px,-58px) scale(.1);opacity:0} }
@keyframes bds-spark-fly-3  { 0%{transform:translate(0,0) scale(1);opacity:.9}  100%{transform:translate(55px,-8px) scale(.1);opacity:0} }
@keyframes bds-spark-fly-4  { 0%{transform:translate(0,0) scale(1);opacity:.8}  100%{transform:translate(-50px,20px) scale(.1);opacity:0} }
@keyframes bds-spark-fly-5  { 0%{transform:translate(0,0) scale(1);opacity:.88} 100%{transform:translate(18px,55px) scale(.1);opacity:0} }
@keyframes bds-spark-fly-6  { 0%{transform:translate(0,0) scale(1);opacity:.75} 100%{transform:translate(-30px,-45px) scale(.08);opacity:0} }
@keyframes bds-spark-fly-7  { 0%{transform:translate(0,0) scale(1);opacity:.9}  100%{transform:translate(42px,35px) scale(.12);opacity:0} }
@keyframes bds-spark-fly-8  { 0%{transform:translate(0,0) scale(1);opacity:.7}  100%{transform:translate(-10px,60px) scale(.08);opacity:0} }
@keyframes bds-spark-spawn  { 0%,8%{opacity:1} 80%,100%{opacity:0} }

/* ── Keyframes fumée interne ── */
@keyframes bds-smoke-1 { 0%{transform:translate(-12px,0) scale(.6);opacity:.22}  100%{transform:translate(-18px,-45px) scale(1.4);opacity:0} }
@keyframes bds-smoke-2 { 0%{transform:translate(8px,0) scale(.5);opacity:.18}    100%{transform:translate(14px,-50px) scale(1.6);opacity:0} }
@keyframes bds-smoke-3 { 0%{transform:translate(-4px,0) scale(.7);opacity:.25}   100%{transform:translate(4px,-42px) scale(1.3);opacity:0} }
@keyframes bds-smoke-4 { 0%{transform:translate(16px,0) scale(.55);opacity:.2}   100%{transform:translate(22px,-48px) scale(1.5);opacity:0} }
@keyframes bds-smoke-5 { 0%{transform:translate(-20px,0) scale(.6);opacity:.16}  100%{transform:translate(-26px,-44px) scale(1.2);opacity:0} }
@keyframes bds-smoke-6 { 0%{transform:translate(2px,0) scale(.65);opacity:.22}   100%{transform:translate(-6px,-52px) scale(1.4);opacity:0} }

/* ── Keyframes braises externes (drift radial hors cercle) ──
   Positionnées sur le pourtour du cercle 260px (r=130, centre=130,130)
   Chaque keyframe = direction radiale unique + légère dérive ──  */
@keyframes bds-ef1  { 0%{transform:translate(0,0) scale(1.4);opacity:.85} 100%{transform:translate(3px,-26px)  scale(.12);opacity:0} }
@keyframes bds-ef2  { 0%{transform:translate(0,0) scale(1.3);opacity:.78} 100%{transform:translate(14px,-20px) scale(.10);opacity:0} }
@keyframes bds-ef3  { 0%{transform:translate(0,0) scale(1.4);opacity:.88} 100%{transform:translate(22px,-7px)  scale(.12);opacity:0} }
@keyframes bds-ef4  { 0%{transform:translate(0,0) scale(1.3);opacity:.80} 100%{transform:translate(26px,4px)   scale(.10);opacity:0} }
@keyframes bds-ef5  { 0%{transform:translate(0,0) scale(1.4);opacity:.82} 100%{transform:translate(20px,17px)  scale(.12);opacity:0} }
@keyframes bds-ef6  { 0%{transform:translate(0,0) scale(1.3);opacity:.86} 100%{transform:translate(-2px,26px)  scale(.10);opacity:0} }
@keyframes bds-ef7  { 0%{transform:translate(0,0) scale(1.4);opacity:.75} 100%{transform:translate(-18px,20px) scale(.12);opacity:0} }
@keyframes bds-ef8  { 0%{transform:translate(0,0) scale(1.3);opacity:.83} 100%{transform:translate(-26px,-3px) scale(.10);opacity:0} }
@keyframes bds-ef9  { 0%{transform:translate(0,0) scale(1.4);opacity:.79} 100%{transform:translate(-18px,-18px)scale(.12);opacity:0} }
@keyframes bds-ef10 { 0%{transform:translate(0,0) scale(1.3);opacity:.87} 100%{transform:translate(-7px,-24px) scale(.10);opacity:0} }
@keyframes bds-ef11 { 0%{transform:translate(0,0) scale(1.4);opacity:.76} 100%{transform:translate(6px,-25px)  scale(.12);opacity:0} }
@keyframes bds-ef12 { 0%{transform:translate(0,0) scale(1.3);opacity:.84} 100%{transform:translate(24px,-10px) scale(.10);opacity:0} }

/* ── Keyframe glow du badge (subtil, respire) ── */
@keyframes bds-badge-glow {
  0%,100% { filter: drop-shadow(0 0 5px rgba(0,255,158,.60)); }
  50%     { filter: drop-shadow(0 0 8px rgba(0,255,158,.85)); }
}
@keyframes bds-badge-glow-hover {
  0%,100% { filter: drop-shadow(0 0 9px rgba(253,107,4,.78)) drop-shadow(0 0 22px rgba(253,107,4,.42)) drop-shadow(0 0 48px rgba(253,107,4,.18)); }
  50%     { filter: drop-shadow(0 0 14px rgba(253,107,4,.95)) drop-shadow(0 0 34px rgba(253,107,4,.58)) drop-shadow(0 0 70px rgba(253,107,4,.26)); }
}

/* ════════════════════════════════════════════════
   WRAPPER AURA
════════════════════════════════════════════════ */
.bds-badge-aura {
  position: relative;
  width: 260px;
  height: 260px;
  flex-shrink: 0;
  /* Couleurs braises — changent au hover */
  --bds-ember1: rgba(0,255,158,.98);
  --bds-ember2: rgba(0,200,130,.92);
}

/* Glow vivant sur le badge (drop-shadow traverse overflow:hidden) */
.bds-badge-aura .bds-badge {
  position: relative;
  z-index: 1;
  animation: bds-badge-glow 5s ease-in-out infinite;
}

/* ── HOVER aura ── */
.bds-badge-aura:hover {
  --bds-ember1: rgba(253,190,80,.95);
  --bds-ember2: rgba(253,107,4,.82);
}
.bds-badge-aura:hover .bds-badge {
  animation: bds-badge-glow-hover 2s ease-in-out infinite;
}

/* ════════════════════════════════════════════════
   BRAISES EXTERNES
   Positionnées hors de .bds-badge (pas de overflow:hidden)
   sur le pourtour du cercle : r=130, centre=(130,130)
════════════════════════════════════════════════ */
.bds-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.bds-ember {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--bds-ember1);
  box-shadow: 0 0 3px var(--bds-ember2), 0 0 6px var(--bds-ember2);
  opacity: 0;
}

/* Positions sur le bord du cercle (px, badge 260px) + animation radiale */
/* Angle  0° top         */ .bds-ember:nth-child(1)  { left:129px; top:-1px;   animation: bds-ef1  3.2s 0.0s infinite ease-out; }
/* Angle 30°              */ .bds-ember:nth-child(2)  { left:194px; top:16px;   animation: bds-ef2  2.9s 0.5s infinite ease-out; }
/* Angle 60°              */ .bds-ember:nth-child(3)  { left:242px; top:64px;   animation: bds-ef3  3.5s 1.2s infinite ease-out; }
/* Angle 90° right        */ .bds-ember:nth-child(4)  { left:259px; top:129px;  animation: bds-ef4  2.7s 0.8s infinite ease-out; }
/* Angle 120°             */ .bds-ember:nth-child(5)  { left:242px; top:194px;  animation: bds-ef5  3.1s 1.7s infinite ease-out; }
/* Angle 150°             */ .bds-ember:nth-child(6)  { left:194px; top:242px;  animation: bds-ef6  3.0s 0.3s infinite ease-out; }
/* Angle 180° bottom      */ .bds-ember:nth-child(7)  { left:129px; top:259px;  animation: bds-ef7  3.4s 1.0s infinite ease-out; }
/* Angle 210°             */ .bds-ember:nth-child(8)  { left:64px;  top:242px;  animation: bds-ef8  2.8s 1.9s infinite ease-out; }
/* Angle 240°             */ .bds-ember:nth-child(9)  { left:16px;  top:194px;  animation: bds-ef9  3.3s 0.6s infinite ease-out; }
/* Angle 270° left        */ .bds-ember:nth-child(10) { left:-1px;  top:129px;  animation: bds-ef10 2.6s 1.4s infinite ease-out; }
/* Angle 315° top-left    */ .bds-ember:nth-child(11) { left:38px;  top:38px;   animation: bds-ef11 3.6s 0.9s infinite ease-out; }
/* Angle 345° near top    */ .bds-ember:nth-child(12) { left:96px;  top:3px;    animation: bds-ef12 3.0s 2.1s infinite ease-out; }

/* Braises supplémentaires — visibles uniquement au hover (intercalées à 15°) */
/* Angle  15° */ .bds-ember--hover:nth-child(13) { left:163px; top:3px;   animation: bds-ef1  1.3s 0.2s infinite ease-out; animation-play-state:paused; }
/* Angle  45° */ .bds-ember--hover:nth-child(14) { left:221px; top:37px;  animation: bds-ef3  1.1s 0.7s infinite ease-out; animation-play-state:paused; }
/* Angle  75° */ .bds-ember--hover:nth-child(15) { left:255px; top:95px;  animation: bds-ef4  1.4s 0.1s infinite ease-out; animation-play-state:paused; }
/* Angle 105° */ .bds-ember--hover:nth-child(16) { left:255px; top:163px; animation: bds-ef5  1.2s 0.9s infinite ease-out; animation-play-state:paused; }
/* Angle 135° */ .bds-ember--hover:nth-child(17) { left:221px; top:221px; animation: bds-ef6  1.3s 0.4s infinite ease-out; animation-play-state:paused; }
/* Angle 165° */ .bds-ember--hover:nth-child(18) { left:163px; top:255px; animation: bds-ef7  1.1s 0.6s infinite ease-out; animation-play-state:paused; }
/* Angle 195° */ .bds-ember--hover:nth-child(19) { left:95px;  top:255px; animation: bds-ef8  1.4s 0.3s infinite ease-out; animation-play-state:paused; }
/* Angle 225° */ .bds-ember--hover:nth-child(20) { left:37px;  top:221px; animation: bds-ef9  1.2s 1.1s infinite ease-out; animation-play-state:paused; }
/* Angle 255° */ .bds-ember--hover:nth-child(21) { left:3px;   top:163px; animation: bds-ef10 1.3s 0.5s infinite ease-out; animation-play-state:paused; }
/* Angle 285° */ .bds-ember--hover:nth-child(22) { left:3px;   top:95px;  animation: bds-ef11 1.1s 0.8s infinite ease-out; animation-play-state:paused; }
/* Angle 315° */ .bds-ember--hover:nth-child(23) { left:37px;  top:37px;  animation: bds-ef2  1.4s 0.2s infinite ease-out; animation-play-state:paused; }
/* Angle 345° */ .bds-ember--hover:nth-child(24) { left:95px;  top:3px;   animation: bds-ef12 1.2s 1.3s infinite ease-out; animation-play-state:paused; }

/* ── Hover braises : plus grandes, plus lumineuses, plus rapides ── */
.bds-badge-aura:hover .bds-ember {
  width: 3px;
  height: 3px;
  box-shadow: 0 0 5px var(--bds-ember2), 0 0 10px var(--bds-ember2), 0 0 18px var(--bds-ember1);
  animation-duration: 1.4s !important;
}
.bds-badge-aura:hover .bds-ember--hover {
  animation-play-state: running !important;
  width: 3px;
  height: 3px;
}

/* ════════════════════════════════════════════════
   CONTENEUR BADGE
════════════════════════════════════════════════ */
.bds-badge {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  cursor: default;
  flex-shrink: 0;

  --bds-ring:      #00ff9e;
  --bds-ring-dim:  #00cc7a;
  --bds-glyph:     #00ff9e;
  --bds-star:      #00ff9e;
  --bds-photo-bdr: rgba(0,255,158,.85);
  --bds-halo:      rgba(0,255,158,.20);
  --bds-smoke:     rgba(0,255,158,.08);
  --bds-spark1:    rgba(160,255,220,.98);
  --bds-spark2:    rgba(0,255,158,.95);
  --bds-dur-r1:  23s;
  --bds-dur-r2:  13s;
  --bds-dur-rb:  42s;
  --bds-dur-r3:  17s;
  --bds-dur-r4:  31s;
  --bds-dur-sqa: 15s;
  --bds-dur-sqb: 21s;
}

/* Taille pour l'avatar-block profil/auteur */
.bds-badge--profile {
  width: 260px;
  height: 260px;
}

/* ── Hover : bascule vers palette orange Strange ── */
.bds-badge:hover,
.bds-badge-aura:hover .bds-badge {
  cursor: pointer;
  --bds-ring:      #fd6b04;
  --bds-ring-dim:  #d94e00;
  --bds-glyph:     #fda04a;
  --bds-star:      #fd6b04;
  --bds-photo-bdr: rgba(253,107,4,.7);
  --bds-halo:      rgba(253,107,4,.18);
  --bds-smoke:     rgba(253,107,4,.22);
  --bds-spark1:    rgba(253,190,80,.95);
  --bds-spark2:    rgba(253,107,4,.8);
  --bds-dur-r1:  9s;
  --bds-dur-r2:  6s;
  --bds-dur-rb: 18s;
  --bds-dur-r3:  8s;
  --bds-dur-r4: 14s;
  --bds-dur-sqa: 7s;
  --bds-dur-sqb: 10s;
}

/* ── Photo centrale ── */
.bds-badge__photo {
  position: absolute;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 10%;
  z-index: 20;
  border: 2px solid var(--bds-photo-bdr);
  box-shadow: inset 0 0 10px var(--bds-halo);
  transition: border-color .5s ease, box-shadow .5s ease;
  width: 132px;
  height: 132px;
  top: 64px;
  left: 64px;
}
.bds-badge:hover .bds-badge__photo,
.bds-badge-aura:hover .bds-badge__photo {
  box-shadow: inset 0 0 18px var(--bds-halo), inset 0 0 6px rgba(255,255,255,.08);
}

/* ── Couches SVG ── */
.bds-badge__svg-base,
.bds-badge__svg-over {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  overflow: hidden;
}
.bds-badge__svg-base { z-index: 5;  }
.bds-badge__svg-over { z-index: 25; }

/* ── Sparks internes ── */
.bds-badge__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}
.bds-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bds-spark1);
  box-shadow: 0 0 2px var(--bds-spark2);
  opacity: 0;
}
.bds-spark:nth-child(1) { top:8.75%;  left:50%;    animation: bds-spark-spawn 2.1s 0s    infinite, bds-spark-fly-1 2.1s 0s    infinite; }
.bds-spark:nth-child(2) { top:50%;    left:91.25%; animation: bds-spark-spawn 2.4s .3s   infinite, bds-spark-fly-2 2.4s .3s   infinite; }
.bds-spark:nth-child(3) { top:91.25%; left:50%;    animation: bds-spark-spawn 1.9s .7s   infinite, bds-spark-fly-3 1.9s .7s   infinite; }
.bds-spark:nth-child(4) { top:50%;    left:8.75%;  animation: bds-spark-spawn 2.6s 1.1s  infinite, bds-spark-fly-4 2.6s 1.1s  infinite; }
.bds-spark:nth-child(5) { top:17%;    left:77%;    animation: bds-spark-spawn 2.2s .5s   infinite, bds-spark-fly-5 2.2s .5s   infinite; }
.bds-spark:nth-child(6) { top:83%;    left:23%;    animation: bds-spark-spawn 2.8s .9s   infinite, bds-spark-fly-6 2.8s .9s   infinite; }
.bds-spark:nth-child(7) { top:17%;    left:23%;    animation: bds-spark-spawn 2.0s 1.5s  infinite, bds-spark-fly-7 2.0s 1.5s  infinite; }
.bds-spark:nth-child(8) { top:83%;    left:77%;    animation: bds-spark-spawn 2.5s .2s   infinite, bds-spark-fly-8 2.5s .2s   infinite; }

/* ── Fumée interne ── */
.bds-badge__smoke {
  position: absolute;
  pointer-events: none;
  z-index: 9;
  bottom: 55%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 1px;
}
.bds-smoke-p {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, var(--bds-smoke) 0%, transparent 70%);
}
.bds-smoke-p:nth-child(1) { width:14px; height:14px; margin:-7px;   animation: bds-smoke-1 4.2s 0s   infinite ease-out; }
.bds-smoke-p:nth-child(2) { width:12px; height:12px; margin:-6px;   animation: bds-smoke-2 3.8s .8s  infinite ease-out; }
.bds-smoke-p:nth-child(3) { width:16px; height:16px; margin:-8px;   animation: bds-smoke-3 4.6s 1.5s infinite ease-out; }
.bds-smoke-p:nth-child(4) { width:10px; height:10px; margin:-5px;   animation: bds-smoke-4 3.5s 2.2s infinite ease-out; }
.bds-smoke-p:nth-child(5) { width:13px; height:13px; margin:-6.5px; animation: bds-smoke-5 4.9s .4s  infinite ease-out; }
.bds-smoke-p:nth-child(6) { width:11px; height:11px; margin:-5.5px; animation: bds-smoke-6 4.1s 3.0s infinite ease-out; }

/* ── Hover sparks internes ── */
.bds-badge:hover .bds-spark,
.bds-badge-aura:hover .bds-spark {
  width: 4px; height: 4px;
  box-shadow: 0 0 4px var(--bds-spark2), 0 0 8px rgba(255,200,80,.3);
  animation-duration: .9s !important;
}

/* ── Hover fumée interne accélérée ── */
.bds-badge:hover .bds-smoke-p,
.bds-badge-aura:hover .bds-smoke-p               { animation-duration: 2.2s !important; }
.bds-badge:hover .bds-smoke-p:nth-child(1),
.bds-badge-aura:hover .bds-smoke-p:nth-child(1)  { animation-duration: 2.0s !important; }
.bds-badge:hover .bds-smoke-p:nth-child(2),
.bds-badge-aura:hover .bds-smoke-p:nth-child(2)  { animation-duration: 1.8s !important; }
.bds-badge:hover .bds-smoke-p:nth-child(3),
.bds-badge-aura:hover .bds-smoke-p:nth-child(3)  { animation-duration: 2.3s !important; }
.bds-badge:hover .bds-smoke-p:nth-child(4),
.bds-badge-aura:hover .bds-smoke-p:nth-child(4)  { animation-duration: 1.7s !important; }
.bds-badge:hover .bds-smoke-p:nth-child(5),
.bds-badge-aura:hover .bds-smoke-p:nth-child(5)  { animation-duration: 2.1s !important; }
.bds-badge:hover .bds-smoke-p:nth-child(6),
.bds-badge-aura:hover .bds-smoke-p:nth-child(6)  { animation-duration: 1.9s !important; }