/* cosmetics-profile.css
   Effets de post & canvas thème profil
   Chargé par profile.html via <link>
*/

/* ── Base theme canvas ─────────────────────── */
#profile-theme-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#profile-theme-canvas.active { opacity: var(--theme-opacity, 0.35); }

/* ── Post effects ──────────────────────────── */
@keyframes neon-border-pulse {
  0%   { box-shadow: 0 0 6px 1px rgba(0,200,255,0.55), 0 0 22px 4px rgba(0,200,255,0.25), inset 0 0 18px rgba(0,200,255,0.06); border-color: #00c8ff; }
  50%  { box-shadow: 0 0 14px 3px rgba(0,220,255,0.85), 0 0 40px 8px rgba(0,200,255,0.4), inset 0 0 30px rgba(0,200,255,0.12); border-color: #80eeff; }
  100% { box-shadow: 0 0 6px 1px rgba(0,200,255,0.55), 0 0 22px 4px rgba(0,200,255,0.25), inset 0 0 18px rgba(0,200,255,0.06); border-color: #00c8ff; }
}
@keyframes neon-bg-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.post-effect-post-neon-border {
  border: 2px solid #00c8ff !important;
  border-radius: 6px !important;
  background: linear-gradient(270deg, rgba(0,30,60,0.55), rgba(0,55,90,0.45), rgba(0,20,50,0.55)) !important;
  background-size: 300% 300% !important;
  animation: neon-border-pulse 2.4s ease-in-out infinite, neon-bg-shift 5s ease infinite !important;
  position: relative !important;
}
.post-effect-post-neon-border::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  border: 1px solid rgba(0,220,255,0.3);
  pointer-events: none;
  animation: neon-border-pulse 2.4s ease-in-out infinite reverse;
}
@keyframes fire-border-flicker {
  0%   { box-shadow: 0 0 8px 2px rgba(255,80,0,0.55), 0 0 24px 4px rgba(255,60,0,0.22), inset 0 0 18px rgba(255,50,0,0.07); border-color: #ff5818; }
  50%  { box-shadow: 0 0 14px 3px rgba(255,130,0,0.7), 0 0 38px 7px rgba(255,100,0,0.32), inset 0 0 28px rgba(255,80,0,0.11); border-color: #ff8800; }
  100% { box-shadow: 0 0 8px 2px rgba(255,80,0,0.55), 0 0 24px 4px rgba(255,60,0,0.22), inset 0 0 18px rgba(255,50,0,0.07); border-color: #ff5818; }
}
@keyframes fire-bg-burn {
  0%   { background-position: 0% 100%; }
  50%  { background-position: 100% 0%; }
  100% { background-position: 0% 100%; }
}
@keyframes fire-ember-drift {
  0%   { opacity: 0.6; transform: translateY(0) scaleX(1); }
  50%  { opacity: 0.9; transform: translateY(-3px) scaleX(1.04); }
  100% { opacity: 0.6; transform: translateY(0) scaleX(1); }
}
.post-effect-post-fire {
  border: 2px solid #ff5010 !important;
  border-radius: 6px !important;
  background: linear-gradient(200deg, rgba(60,12,0,0.65), rgba(80,20,0,0.55), rgba(40,8,0,0.65), rgba(70,15,0,0.55)) !important;
  background-size: 300% 300% !important;
  animation: fire-border-flicker 3.5s ease-in-out infinite, fire-bg-burn 6s ease infinite !important;
  position: relative !important;
  overflow: hidden;
}
.post-effect-post-fire::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(255,80,0,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 80% 95%, rgba(255,120,0,0.1) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(255,160,0,0.08) 0%, transparent 60%);
  animation: fire-ember-drift 2.2s ease-in-out infinite;
}
.post-effect-post-fire::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 8px;
  border: 1px solid rgba(255,100,20,0.28);
  pointer-events: none;
  animation: fire-border-flicker 1.8s ease-in-out infinite reverse;
}
.post-effect-post-fire > * { position: relative; z-index: 1; }
@keyframes gold-border-shimmer {
  0%   { box-shadow: 0 0 6px 1px rgba(255,200,40,0.5), 0 0 20px 3px rgba(255,180,0,0.22), inset 0 0 18px rgba(255,190,0,0.06); border-color: #ffd040; }
  30%  { box-shadow: 0 0 10px 2px rgba(255,230,80,0.75), 0 0 35px 6px rgba(255,200,40,0.35), inset 0 0 28px rgba(255,200,0,0.12); border-color: #ffe87a; }
  60%  { box-shadow: 0 0 18px 4px rgba(255,160,0,0.8), 0 0 50px 10px rgba(255,140,0,0.3), inset 0 0 35px rgba(255,160,0,0.14); border-color: #ffaa20; }
  100% { box-shadow: 0 0 6px 1px rgba(255,200,40,0.5), 0 0 20px 3px rgba(255,180,0,0.22), inset 0 0 18px rgba(255,190,0,0.06); border-color: #ffd040; }
}
@keyframes gold-bg-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.post-effect-post-gold {
  border: 2px solid #ffd040 !important;
  border-radius: 6px !important;
  background: linear-gradient(270deg, rgba(35,22,0,0.6), rgba(55,38,0,0.5), rgba(28,18,0,0.6)) !important;
  background-size: 300% 300% !important;
  animation: gold-border-shimmer 3s ease-in-out infinite, gold-bg-flow 6s ease infinite !important;
  position: relative !important;
  overflow: hidden;
}
.post-effect-post-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(255,200,40,0.022) 8px,
    rgba(255,200,40,0.022) 9px
  );
}
.post-effect-post-gold::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 8px;
  border: 1px solid rgba(255,220,60,0.25);
  pointer-events: none;
  animation: gold-border-shimmer 3s ease-in-out infinite reverse;
}
.post-effect-post-gold > * { position: relative; z-index: 1; }
/* post-matrix : canvas overlay géré en JS, juste le fond */
.post-effect-post-matrix {
  border-left: 3px solid #00ff88 !important;
  box-shadow: 0 0 24px rgba(0,255,136,0.18), inset 0 0 40px rgba(0,30,10,0.4) !important;
  background: linear-gradient(135deg, rgba(0,15,5,0.7) 0%, var(--bg2) 55%) !important;
  position: relative;
  overflow: hidden;
}
.post-effect-post-matrix::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,255,100,0.018) 3px,
    rgba(0,255,100,0.018) 4px
  );
}
.post-effect-post-matrix > * { position: relative; z-index: 1; }