/* perfil-effects.css — Discord-style donor effects for profile */

/* ── Avatar ring animation por nivel ────────────────────────────────── */
@keyframes ring-spin-leyenda {
    from { filter: hue-rotate(0deg) brightness(1.1); }
    to   { filter: hue-rotate(360deg) brightness(1.1); }
}
@keyframes ring-pulse-maestro {
    0%,100% { box-shadow: 0 0 0 3px #ec4899, 0 0 20px rgba(236,72,153,.55), 0 0 40px rgba(236,72,153,.2); }
    50%     { box-shadow: 0 0 0 3px #f9a8d4, 0 0 28px rgba(236,72,153,.7),  0 0 56px rgba(236,72,153,.3); }
}
@keyframes ring-pulse-diamante {
    0%,100% { box-shadow: 0 0 0 3px #06b6d4, 0 0 20px rgba(6,182,212,.5),  0 0 40px rgba(6,182,212,.2); }
    50%     { box-shadow: 0 0 0 3px #67e8f9, 0 0 28px rgba(6,182,212,.65), 0 0 56px rgba(6,182,212,.28); }
}
@keyframes ring-pulse-oro {
    0%,100% { box-shadow: 0 0 0 3px #f59e0b, 0 0 14px rgba(245,158,11,.45), 0 0 28px rgba(245,158,11,.18); }
    50%     { box-shadow: 0 0 0 3px #fcd34d, 0 0 20px rgba(245,158,11,.6),  0 0 40px rgba(245,158,11,.25); }
}

/* Avatar wrapper effects */
.avatar-wrap.donor-leyenda .profile-avatar-ring {
    position: relative;
    animation: ring-spin-leyenda 4s linear infinite;
    box-shadow: 0 0 0 3px transparent;
}
.avatar-wrap.donor-leyenda .profile-avatar-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(#8b5cf6, #ec4899, #f59e0b, #06b6d4, #8b5cf6);
    animation: ring-spin-leyenda 3s linear infinite;
    z-index: -1;
    opacity: .85;
}
.avatar-wrap.donor-maestro  .profile-avatar-ring { animation: ring-pulse-maestro  2.5s ease-in-out infinite; }
.avatar-wrap.donor-diamante .profile-avatar-ring { animation: ring-pulse-diamante 2.5s ease-in-out infinite; }
.avatar-wrap.donor-oro      .profile-avatar-ring { animation: ring-pulse-oro      3s   ease-in-out infinite; }
.avatar-wrap.donor-plata    .profile-avatar-ring { box-shadow: 0 0 0 3px #9ca3af, 0 0 10px rgba(156,163,175,.3); }
.avatar-wrap.donor-bronce   .profile-avatar-ring { box-shadow: 0 0 0 3px #cd7f32, 0 0 8px  rgba(205,127,50,.25); }

/* ── Banner overlay glow por nivel ──────────────────────────────────── */
@keyframes banner-glow-leyenda {
    0%,100% { opacity: .55; filter: hue-rotate(0deg); }
    50%     { opacity: .8;  filter: hue-rotate(60deg); }
}
@keyframes banner-glow-maestro {
    0%,100% { opacity: .4; }
    50%     { opacity: .65; }
}
@keyframes banner-glow-diamante {
    0%,100% { opacity: .35; }
    50%     { opacity: .55; }
}

.profile-banner.donor-banner-leyenda::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(139,92,246,.18) 0%,
        rgba(236,72,153,.12) 40%,
        rgba(245,158,11,.08) 70%,
        rgba(6,182,212,.06) 100%
    );
    pointer-events: none;
    animation: banner-glow-leyenda 4s ease-in-out infinite;
    z-index: 1;
}
.profile-banner.donor-banner-maestro::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(236,72,153,.16) 0%, rgba(236,72,153,.06) 100%);
    pointer-events: none;
    animation: banner-glow-maestro 3s ease-in-out infinite;
    z-index: 1;
}
.profile-banner.donor-banner-diamante::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6,182,212,.16) 0%, rgba(99,102,241,.08) 100%);
    pointer-events: none;
    animation: banner-glow-diamante 3s ease-in-out infinite;
    z-index: 1;
}
.profile-banner.donor-banner-oro::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(245,158,11,.13) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}
.profile-banner { position: relative; overflow: hidden; }

/* ── Card border glow ─────────────────────────────────────────────── */
@keyframes card-border-leyenda {
    0%,100% { box-shadow: 0 0 0 1.5px rgba(139,92,246,.5), 0 0 24px rgba(139,92,246,.15), 0 0 48px rgba(236,72,153,.08); }
    33%     { box-shadow: 0 0 0 1.5px rgba(236,72,153,.5), 0 0 24px rgba(236,72,153,.15), 0 0 48px rgba(245,158,11,.08); }
    66%     { box-shadow: 0 0 0 1.5px rgba(6,182,212,.5),  0 0 24px rgba(6,182,212,.15),  0 0 48px rgba(139,92,246,.08); }
}
@keyframes card-border-maestro {
    0%,100% { box-shadow: 0 0 0 1.5px rgba(236,72,153,.4), 0 0 20px rgba(236,72,153,.12); }
    50%     { box-shadow: 0 0 0 1.5px rgba(236,72,153,.65),0 0 28px rgba(236,72,153,.2); }
}
@keyframes card-border-diamante {
    0%,100% { box-shadow: 0 0 0 1.5px rgba(6,182,212,.4), 0 0 20px rgba(6,182,212,.12); }
    50%     { box-shadow: 0 0 0 1.5px rgba(6,182,212,.65), 0 0 28px rgba(6,182,212,.2); }
}

.profile-card-donor-leyenda  { animation: card-border-leyenda  4s ease-in-out infinite !important; }
.profile-card-donor-maestro  { animation: card-border-maestro  2.8s ease-in-out infinite !important; }
.profile-card-donor-diamante { animation: card-border-diamante 2.8s ease-in-out infinite !important; }
.profile-card-donor-oro      { box-shadow: 0 0 0 1.5px rgba(245,158,11,.35), 0 0 16px rgba(245,158,11,.1) !important; }
.profile-card-donor-plata    { box-shadow: 0 0 0 1.5px rgba(156,163,175,.3) !important; }
.profile-card-donor-bronce   { box-shadow: 0 0 0 1.5px rgba(205,127,50,.28) !important; }

/* ── Username glow por nivel ─────────────────────────────────────── */
@keyframes name-glow-leyenda {
    0%,100% { text-shadow: 0 0 12px rgba(139,92,246,.35); }
    50%     { text-shadow: 0 0 20px rgba(236,72,153,.45), 0 0 40px rgba(139,92,246,.2); }
}
.profile-username-donor-leyenda  { animation: name-glow-leyenda 3s ease-in-out infinite; }
.profile-username-donor-maestro  { text-shadow: 0 0 12px rgba(236,72,153,.3); }
.profile-username-donor-diamante { text-shadow: 0 0 12px rgba(6,182,212,.3); }
.profile-username-donor-oro      { text-shadow: 0 0 8px  rgba(245,158,11,.25); }

/* ── Donor badge on profile — larger, richer ─────────────────────── */
.donor-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    border-radius: 100px;
    border: 1px solid transparent;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: default;
    user-select: none;
}
.donor-badge .db-icon { width: 13px; height: 13px; flex-shrink: 0; }
.donor-badge .db-label {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200%;
    font-weight: 800;
}
/* Bronce */
.donor-badge.db-bronce { background: rgba(120,60,10,.14); border-color: rgba(205,127,50,.35); }
.donor-badge.db-bronce .db-icon { color: #cd7f32; }
.donor-badge.db-bronce .db-label { background-image: linear-gradient(90deg,#cd7f32,#e8a87c,#cd7f32); }
/* Plata */
.donor-badge.db-plata { background: rgba(120,120,140,.12); border-color: rgba(156,163,175,.4); }
.donor-badge.db-plata .db-icon { color: #9ca3af; }
.donor-badge.db-plata .db-label { background-image: linear-gradient(90deg,#9ca3af,#e5e7eb,#9ca3af); }
/* Oro */
.donor-badge.db-oro { background: rgba(180,120,0,.12); border-color: rgba(245,158,11,.42); box-shadow: 0 0 12px rgba(245,158,11,.2); }
.donor-badge.db-oro .db-icon { color: #f59e0b; }
.donor-badge.db-oro .db-label { background-image: linear-gradient(90deg,#d97706,#fcd34d,#f59e0b,#fcd34d,#d97706); background-size: 200%; animation: db-shine 2.5s linear infinite; }
/* Diamante */
.donor-badge.db-diamante { background: rgba(6,182,212,.1); border-color: rgba(6,182,212,.42); box-shadow: 0 0 14px rgba(6,182,212,.22); animation: db-glow-cyan 2.5s ease-in-out infinite; }
.donor-badge.db-diamante .db-icon { color: #06b6d4; }
.donor-badge.db-diamante .db-label { background-image: linear-gradient(90deg,#0891b2,#67e8f9,#818cf8,#67e8f9,#0891b2); background-size: 200%; animation: db-shine 2s linear infinite; }
/* Maestro */
.donor-badge.db-maestro { background: rgba(236,72,153,.1); border-color: rgba(236,72,153,.44); box-shadow: 0 0 14px rgba(236,72,153,.24); animation: db-glow-pink 2.5s ease-in-out infinite; }
.donor-badge.db-maestro .db-icon { color: #ec4899; }
.donor-badge.db-maestro .db-label { background-image: linear-gradient(90deg,#db2777,#f9a8d4,#ec4899,#f9a8d4,#db2777); background-size: 200%; animation: db-shine 2s linear infinite; }
/* Leyenda */
.donor-badge.db-leyenda { background: linear-gradient(135deg,rgba(139,92,246,.14),rgba(236,72,153,.1),rgba(245,158,11,.07)); border-color: rgba(139,92,246,.48); box-shadow: 0 0 18px rgba(139,92,246,.3), 0 0 36px rgba(236,72,153,.12); animation: db-glow-legend 3s ease-in-out infinite; }
.donor-badge.db-leyenda .db-icon { color: #a78bfa; }
.donor-badge.db-leyenda .db-label { background-image: linear-gradient(90deg,#8b5cf6,#ec4899,#f59e0b,#06b6d4,#8b5cf6); background-size: 300%; animation: db-shine-legend 2.5s linear infinite; }

/* Keyframes */
@keyframes db-shine { 0%{background-position:100%} 100%{background-position:-100%} }
@keyframes db-shine-legend { 0%{background-position:100%} 100%{background-position:-100%} }
@keyframes db-glow-cyan {
    0%,100% { box-shadow: 0 0 10px rgba(6,182,212,.2),  0 0 20px rgba(6,182,212,.08); }
    50%     { box-shadow: 0 0 18px rgba(6,182,212,.35), 0 0 36px rgba(6,182,212,.15); }
}
@keyframes db-glow-pink {
    0%,100% { box-shadow: 0 0 10px rgba(236,72,153,.22), 0 0 20px rgba(236,72,153,.1); }
    50%     { box-shadow: 0 0 18px rgba(236,72,153,.38), 0 0 36px rgba(236,72,153,.18); }
}
@keyframes db-glow-legend {
    0%,100% { box-shadow: 0 0 16px rgba(139,92,246,.28), 0 0 32px rgba(236,72,153,.12); filter: hue-rotate(0deg); }
    33%     { box-shadow: 0 0 20px rgba(236,72,153,.32), 0 0 40px rgba(245,158,11,.12); filter: hue-rotate(30deg); }
    66%     { box-shadow: 0 0 18px rgba(6,182,212,.28),  0 0 36px rgba(139,92,246,.12); filter: hue-rotate(60deg); }
}
@keyframes db-avatar-legend {
    0%,100% { box-shadow: 0 0 0 3px #8b5cf6, 0 0 18px rgba(139,92,246,.5),  0 0 36px rgba(236,72,153,.2); }
    33%     { box-shadow: 0 0 0 3px #ec4899, 0 0 18px rgba(236,72,153,.5),  0 0 36px rgba(245,158,11,.2); }
    66%     { box-shadow: 0 0 0 3px #06b6d4, 0 0 18px rgba(6,182,212,.5),   0 0 36px rgba(139,92,246,.2); }
}


/* ── Profile header card — full card glow by donor level ── */
/* These target the .profile-header when its parent has a donor class */

/* We add the donor class to .profile-header itself via JS */
.profile-header.donor-card-bronce {
    border: 1px solid rgba(205,127,50,.4) !important;
    border-top: none !important;
    box-shadow: 0 0 0 1px rgba(205,127,50,.2), 0 4px 24px rgba(205,127,50,.1) !important;
}
.profile-header.donor-card-plata {
    border: 1px solid rgba(156,163,175,.45) !important;
    border-top: none !important;
    box-shadow: 0 0 0 1px rgba(156,163,175,.22), 0 4px 24px rgba(156,163,175,.12) !important;
}
.profile-header.donor-card-oro {
    border: 1px solid rgba(245,158,11,.45) !important;
    border-top: none !important;
    box-shadow: 0 0 0 1px rgba(245,158,11,.22), 0 4px 28px rgba(245,158,11,.15), 0 8px 48px rgba(245,158,11,.06) !important;
}
@keyframes ph-diamante-pulse {
    0%,100% { box-shadow: 0 0 0 1px rgba(6,182,212,.3), 0 4px 28px rgba(6,182,212,.2), 0 8px 48px rgba(6,182,212,.08); }
    50%     { box-shadow: 0 0 0 1px rgba(6,182,212,.5), 0 4px 36px rgba(6,182,212,.3), 0 8px 64px rgba(6,182,212,.12); }
}
.profile-header.donor-card-diamante {
    border: 1px solid rgba(6,182,212,.45) !important;
    border-top: none !important;
    animation: ph-diamante-pulse 2.5s ease-in-out infinite;
}
@keyframes ph-maestro-pulse {
    0%,100% { box-shadow: 0 0 0 1px rgba(236,72,153,.32), 0 4px 28px rgba(236,72,153,.2), 0 8px 48px rgba(236,72,153,.08); }
    50%     { box-shadow: 0 0 0 1px rgba(236,72,153,.52), 0 4px 36px rgba(236,72,153,.3), 0 8px 64px rgba(236,72,153,.14); }
}
.profile-header.donor-card-maestro {
    border: 1px solid rgba(236,72,153,.48) !important;
    border-top: none !important;
    animation: ph-maestro-pulse 2.5s ease-in-out infinite;
}
@keyframes ph-leyenda-pulse {
    0%,100% { border-color: rgba(139,92,246,.5); box-shadow: 0 0 0 1px rgba(139,92,246,.25), 0 4px 32px rgba(139,92,246,.2), 0 12px 60px rgba(236,72,153,.08); }
    33%     { border-color: rgba(236,72,153,.5); box-shadow: 0 0 0 1px rgba(236,72,153,.25), 0 4px 32px rgba(236,72,153,.2), 0 12px 60px rgba(245,158,11,.08); }
    66%     { border-color: rgba(6,182,212,.5);  box-shadow: 0 0 0 1px rgba(6,182,212,.25),  0 4px 32px rgba(6,182,212,.2),  0 12px 60px rgba(139,92,246,.08); }
}
.profile-header.donor-card-leyenda {
    border-top: none !important;
    animation: ph-leyenda-pulse 4s ease-in-out infinite;
}

/* ── Banner top border glow ── */
.profile-banner.donor-banner-bronce   { border-bottom: 2px solid rgba(205,127,50,.5) !important; }
.profile-banner.donor-banner-plata    { border-bottom: 2px solid rgba(156,163,175,.5) !important; }
.profile-banner.donor-banner-oro      { border-bottom: 2px solid rgba(245,158,11,.6) !important; box-shadow: 0 2px 16px rgba(245,158,11,.2) !important; }
.profile-banner.donor-banner-diamante { border-bottom: 2px solid rgba(6,182,212,.6) !important;  box-shadow: 0 2px 20px rgba(6,182,212,.25) !important; }
.profile-banner.donor-banner-maestro  { border-bottom: 2px solid rgba(236,72,153,.6) !important; box-shadow: 0 2px 20px rgba(236,72,153,.25) !important; }
.profile-banner.donor-banner-leyenda  { border-bottom: 2px solid transparent !important; background-clip: padding-box !important; box-shadow: 0 2px 24px rgba(139,92,246,.3) !important; }