/* * RadarMeet Premium Profile Effects * Final animation layer. * * IMPORTANT: * - Effects stay OUTSIDE the profile image. * - The profile image always remains above the effects. * - This file intentionally overrides older animation rules. */ /* ========================================================= AVATAR LAYER SAFETY ========================================================= */ .profile-customization-avatar-frame { position: relative !important; isolation: isolate !important; overflow: visible !important; } .profile-customization-avatar-frame > .profile-customization-avatar-ring { position: absolute !important; z-index: 1 !important; inset: -6px !important; display: block !important; border-radius: 50% !important; pointer-events: none !important; transform-origin: center center !important; /* * Keep every animated gradient hollow. * Nothing from this layer can cover the photo. */ -webkit-mask-image: radial-gradient( farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px) ) !important; mask-image: radial-gradient( farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px) ) !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important; will-change: transform, opacity, filter; } .profile-customization-avatar-frame > .profile-customization-avatar-image-shell { position: relative !important; z-index: 4 !important; display: block !important; overflow: hidden !important; border-radius: 50% !important; } .profile-customization-avatar-frame > .profile-customization-avatar-image-shell > #panelPhoto { position: relative !important; z-index: 1 !important; display: block !important; width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; } .profile-customization-avatar-frame > .online-dot, .profile-customization-avatar-frame > #panelOnlineDot { z-index: 8 !important; } /* ========================================================= DEFAULT / GLOW ========================================================= */ .profile-customization-avatar-frame[data-customization-border="default-glow"] > .profile-customization-avatar-ring { background: linear-gradient( 135deg, var(--profile-customization-ring-accent, #ff54b8), var(--profile-customization-ring-secondary, #45d7ff) ) !important; filter: drop-shadow( 0 0 4px color-mix( in srgb, var(--profile-customization-ring-accent, #ff54b8) 70%, transparent ) ) !important; animation: none !important; } /* ========================================================= PULSE ========================================================= */ .profile-customization-avatar-frame[data-customization-border="pulse"] > .profile-customization-avatar-ring { background: linear-gradient( 135deg, var(--profile-customization-ring-accent, #ff54b8), var(--profile-customization-ring-secondary, #45d7ff) ) !important; animation: radarPremiumPulse 1.55s ease-in-out infinite alternate !important; } @keyframes radarPremiumPulse { 0% { opacity: .60; transform: scale(.97); filter: drop-shadow( 0 0 3px var(--profile-customization-ring-accent, #ff54b8) ); } 100% { opacity: 1; transform: scale(1.07); filter: drop-shadow( 0 0 9px var(--profile-customization-ring-accent, #ff54b8) ) drop-shadow( 0 0 15px var(--profile-customization-ring-secondary, #45d7ff) ); } } /* ========================================================= NEON WAVE ========================================================= */ .profile-customization-avatar-frame[data-customization-border="neon-wave"] > .profile-customization-avatar-ring { background: conic-gradient( transparent 0deg 165deg, rgba(69, 215, 255, .18) 180deg, #45d7ff 198deg, #ffffff 208deg, #ff54b8 225deg, rgba(255, 84, 184, .70) 245deg, transparent 270deg 360deg ) !important; filter: drop-shadow(0 0 5px rgba(69, 215, 255, .75)) drop-shadow(0 0 7px rgba(255, 84, 184, .65)); animation: radarPremiumNeonWave 2.25s linear infinite !important; } @keyframes radarPremiumNeonWave { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= FIRE ========================================================= */ .profile-customization-avatar-frame[data-customization-border="fire"] > .profile-customization-avatar-ring { inset: -7px !important; background: conic-gradient( #fff4b0 0deg 5deg, #ffc33b 7deg 12deg, #ff7622 15deg 23deg, #d92320 26deg 34deg, #ff4a1c 39deg 46deg, #ffb62e 49deg 54deg, #fff0a2 57deg 60deg, #ff641e 64deg 76deg, #c91b22 80deg 91deg, #ff8622 95deg 102deg, #ffd34c 106deg 111deg, #ff381b 116deg 128deg, #e52b1b 132deg 142deg, #ffae29 146deg 151deg, #fff2a8 154deg 158deg, #ff5d1c 163deg 174deg, #c91d24 178deg 187deg, #ff7a20 191deg 198deg, #ffc73a 202deg 207deg, #fff2a4 210deg 214deg, #ff481b 220deg 232deg, #d51e22 236deg 247deg, #ff8d23 251deg 258deg, #ffcc43 262deg 267deg, #fff3aa 270deg 274deg, #ff5b1d 280deg 292deg, #c91c22 296deg 306deg, #ff7d21 310deg 318deg, #ffd34a 321deg 327deg, #fff3aa 330deg 334deg, #ff481d 338deg 349deg, #d92320 353deg 360deg ) !important; filter: drop-shadow(0 0 4px rgba(255, 62, 25, .95)) drop-shadow(0 0 9px rgba(255, 128, 26, .75)) drop-shadow(0 0 14px rgba(255, 183, 48, .42)); animation: radarPremiumFireSpin 2.6s linear infinite, radarPremiumFireFlicker .62s ease-in-out infinite alternate !important; } /* * Flame/ember layer. * This is OUTSIDE the image rather than painted across it. */ .profile-customization-avatar-frame > .profile-customization-avatar-embers { position: absolute !important; z-index: 2 !important; inset: -12px !important; display: block !important; border-radius: 50% !important; opacity: 0; pointer-events: none !important; transform-origin: center center !important; } .profile-customization-avatar-frame[data-customization-border="fire"] > .profile-customization-avatar-embers { opacity: 1 !important; animation: radarPremiumEmberOrbit 4.2s linear infinite !important; } /* outer flame halo */ .profile-customization-avatar-frame[data-customization-border="fire"] > .profile-customization-avatar-embers::before { position: absolute; inset: 0; display: block; border-radius: 50%; background: conic-gradient( from -9deg, transparent 0deg 4deg, rgba(196, 27, 29, .92) 5deg 7deg, rgba(255, 72, 24, .98) 8deg 10deg, rgba(255, 157, 34, .98) 11deg 12deg, rgba(255, 219, 75, .96) 13deg 14deg, rgba(255, 248, 190, .95) 15deg 16deg, transparent 17deg 24deg, transparent 25deg 29deg, rgba(209, 28, 27, .9) 30deg 33deg, rgba(255, 82, 22, .98) 34deg 36deg, rgba(255, 177, 39, .98) 37deg 38deg, rgba(255, 237, 145, .96) 39deg 41deg, transparent 42deg 54deg, transparent 55deg 59deg, rgba(185, 24, 31, .94) 60deg 62deg, rgba(255, 59, 21, .98) 63deg 66deg, rgba(255, 136, 27, .98) 67deg 69deg, rgba(255, 211, 67, .98) 70deg 71deg, rgba(255, 249, 198, .96) 72deg 73deg, transparent 74deg 88deg, transparent 89deg 94deg, rgba(204, 25, 30, .92) 95deg 98deg, rgba(255, 78, 22, .98) 99deg 101deg, rgba(255, 160, 31, .98) 102deg 104deg, rgba(255, 227, 93, .96) 105deg 107deg, transparent 108deg 121deg, transparent 122deg 126deg, rgba(184, 22, 30, .94) 127deg 129deg, rgba(255, 58, 20, .98) 130deg 133deg, rgba(255, 130, 24, .98) 134deg 136deg, rgba(255, 197, 53, .96) 137deg 139deg, rgba(255, 246, 179, .95) 140deg 141deg, transparent 142deg 157deg, transparent 158deg 162deg, rgba(207, 27, 27, .92) 163deg 166deg, rgba(255, 73, 20, .98) 167deg 169deg, rgba(255, 153, 29, .98) 170deg 172deg, rgba(255, 222, 77, .96) 173deg 175deg, transparent 176deg 190deg, transparent 191deg 195deg, rgba(187, 22, 31, .92) 196deg 199deg, rgba(255, 57, 22, .98) 200deg 202deg, rgba(255, 128, 23, .98) 203deg 205deg, rgba(255, 206, 61, .96) 206deg 208deg, rgba(255, 246, 183, .95) 209deg 210deg, transparent 211deg 226deg, transparent 227deg 231deg, rgba(195, 24, 31, .94) 232deg 235deg, rgba(255, 68, 21, .98) 236deg 238deg, rgba(255, 148, 27, .98) 239deg 241deg, rgba(255, 215, 69, .96) 242deg 244deg, transparent 245deg 260deg, transparent 261deg 265deg, rgba(201, 24, 29, .92) 266deg 269deg, rgba(255, 62, 21, .98) 270deg 272deg, rgba(255, 137, 25, .98) 273deg 275deg, rgba(255, 206, 58, .96) 276deg 278deg, rgba(255, 247, 187, .95) 279deg 280deg, transparent 281deg 298deg, transparent 299deg 303deg, rgba(185, 23, 31, .94) 304deg 307deg, rgba(255, 63, 21, .98) 308deg 310deg, rgba(255, 138, 24, .98) 311deg 313deg, rgba(255, 215, 69, .96) 314deg 316deg, transparent 317deg 332deg, transparent 333deg 337deg, rgba(201, 25, 29, .92) 338deg 341deg, rgba(255, 70, 21, .98) 342deg 344deg, rgba(255, 151, 29, .98) 345deg 347deg, rgba(255, 224, 89, .96) 348deg 350deg, rgba(255, 249, 194, .95) 351deg 352deg, transparent 353deg 360deg ), radial-gradient( circle, transparent 69%, rgba(255, 251, 202, .98) 74%, rgba(255, 218, 83, .96) 79%, rgba(255, 133, 34, .88) 87%, rgba(205, 31, 29, .42) 100% ); content: ""; filter: blur(1.2px) drop-shadow(0 0 5px rgba(255, 74, 25, .8)); -webkit-mask-image: radial-gradient( farthest-side, transparent calc(100% - 12px), #000 calc(100% - 10px), #000 calc(100% - 3px), transparent calc(100% - 1px) ); mask-image: radial-gradient( farthest-side, transparent calc(100% - 12px), #000 calc(100% - 10px), #000 calc(100% - 3px), transparent calc(100% - 1px) ); animation: radarPremiumFlameFlicker .62s ease-in-out infinite alternate; } /* second moving flame halo */ .profile-customization-avatar-frame[data-customization-border="fire"] > .profile-customization-avatar-embers::after { position: absolute; inset: -4px; display: block; border-radius: 50%; background: conic-gradient( from 14deg, transparent 0deg 8deg, rgba(255, 63, 22, .36) 9deg 14deg, rgba(255, 149, 34, .58) 15deg 20deg, rgba(255, 218, 89, .72) 21deg 23deg, transparent 24deg 42deg, rgba(205, 29, 29, .32) 43deg 49deg, rgba(255, 88, 23, .54) 50deg 55deg, rgba(255, 183, 49, .68) 56deg 59deg, transparent 60deg 82deg, rgba(255, 58, 22, .4) 83deg 90deg, rgba(255, 158, 36, .58) 91deg 96deg, rgba(255, 225, 102, .7) 97deg 99deg, transparent 100deg 123deg, rgba(197, 25, 31, .34) 124deg 130deg, rgba(255, 72, 22, .56) 131deg 137deg, rgba(255, 183, 46, .7) 138deg 141deg, transparent 142deg 165deg, rgba(255, 66, 23, .38) 166deg 172deg, rgba(255, 151, 34, .58) 173deg 178deg, rgba(255, 221, 92, .7) 179deg 181deg, transparent 182deg 207deg, rgba(194, 27, 31, .34) 208deg 214deg, rgba(255, 67, 21, .56) 215deg 221deg, rgba(255, 171, 41, .7) 222deg 225deg, transparent 226deg 248deg, rgba(255, 57, 22, .4) 249deg 256deg, rgba(255, 140, 31, .58) 257deg 262deg, rgba(255, 211, 77, .7) 263deg 265deg, transparent 266deg 290deg, rgba(198, 26, 30, .34) 291deg 297deg, rgba(255, 71, 21, .56) 298deg 304deg, rgba(255, 178, 45, .68) 305deg 308deg, transparent 309deg 332deg, rgba(255, 61, 22, .4) 333deg 340deg, rgba(255, 157, 36, .58) 341deg 346deg, rgba(255, 220, 89, .7) 347deg 349deg, transparent 350deg 360deg ), radial-gradient( circle, transparent 70%, rgba(255, 250, 197, .78) 75%, rgba(255, 195, 61, .66) 81%, rgba(255, 104, 29, .44) 91%, transparent 100% ); content: ""; opacity: .62; filter: blur(4px); -webkit-mask-image: radial-gradient( farthest-side, transparent calc(100% - 13px), #000 calc(100% - 10px), #000 calc(100% - 3px), transparent calc(100% - 1px) ); mask-image: radial-gradient( farthest-side, transparent calc(100% - 13px), #000 calc(100% - 10px), #000 calc(100% - 3px), transparent calc(100% - 1px) ); animation: radarPremiumFireSpin 3.3s linear infinite, radarPremiumFlameHaloFlicker .86s ease-in-out infinite alternate; } /* actual ember dots already created by JS */ .profile-customization-avatar-frame > .profile-customization-avatar-embers > i { position: absolute !important; display: none; width: 4px !important; height: 4px !important; border-radius: 50% !important; background: #fff2a4 !important; box-shadow: 0 0 4px #fff2a4, 0 0 9px #ff7a24 !important; } .profile-customization-avatar-frame[data-customization-border="fire"] > .profile-customization-avatar-embers > i { display: block !important; } .profile-customization-avatar-frame[data-customization-border="fire"] > .profile-customization-avatar-embers > i:first-child { top: 0 !important; left: 47% !important; animation: radarPremiumSparkOne 1.05s ease-out infinite !important; } .profile-customization-avatar-frame[data-customization-border="fire"] > .profile-customization-avatar-embers > i:last-child { right: 4% !important; bottom: 22% !important; width: 3px !important; height: 3px !important; background: #ff6b35 !important; animation: radarPremiumSparkTwo 1.35s ease-out .35s infinite !important; } @keyframes radarPremiumFireSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes radarPremiumFireFlicker { 0% { opacity: .72; filter: drop-shadow(0 0 3px rgba(255, 58, 23, .85)) drop-shadow(0 0 7px rgba(255, 122, 28, .62)); } 100% { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 72, 20, 1)) drop-shadow(0 0 12px rgba(255, 174, 39, .85)) drop-shadow(0 0 18px rgba(255, 205, 78, .45)); } } @keyframes radarPremiumFlameFlicker { from { opacity: .68; transform: scale(.99); } to { opacity: .94; transform: scale(1.025); } } @keyframes radarPremiumFlameHaloFlicker { from { opacity: .44; } to { opacity: .72; } } @keyframes radarPremiumEmberOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes radarPremiumSparkOne { 0% { opacity: 0; transform: translateY(2px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px) scale(.2); } } @keyframes radarPremiumSparkTwo { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(7px, -10px) scale(.2); } } /* ========================================================= ICE ========================================================= */ .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-ring { background: conic-gradient( #59c9ff, #dffaff 18%, #ffffff 27%, #79e5ff 42%, #438ef2 62%, #dffaff 78%, #59c9ff ) !important; filter: drop-shadow(0 0 5px rgba(125, 220, 255, .7)) drop-shadow(0 0 10px rgba(217, 249, 255, .45)); animation: radarPremiumIceSpin 4s linear infinite, radarPremiumIceGlow 1.5s ease-in-out infinite alternate !important; } @keyframes radarPremiumIceSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes radarPremiumIceGlow { from { opacity: .68; } to { opacity: 1; } } /* ========================================================= RAINBOW ========================================================= */ .profile-customization-avatar-frame[data-customization-border="rainbow"] > .profile-customization-avatar-ring { background: conic-gradient( #ff3d68, #ff9f3d, #ffe45b, #4ce0b5, #45d7ff, #736dff, #c75cff, #ff54b8, #ff3d68 ) !important; filter: drop-shadow(0 0 5px rgba(255, 84, 184, .58)) drop-shadow(0 0 8px rgba(69, 215, 255, .42)); animation: radarPremiumRainbow 3.5s linear infinite !important; } @keyframes radarPremiumRainbow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= SAFETY FALLBACK Browsers without CSS masking get a normal border. Never a giant gradient disk over the photo. ========================================================= */ @supports not ( (mask-image: radial-gradient(circle, transparent 60%, #000 61%)) or (-webkit-mask-image: radial-gradient(circle, transparent 60%, #000 61%)) ) { .profile-customization-avatar-frame > .profile-customization-avatar-ring { inset: -5px !important; background: transparent !important; border: 5px solid var(--profile-customization-ring-accent, #ff54b8) !important; -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; transform: none !important; } .profile-customization-avatar-frame > .profile-customization-avatar-embers { display: none !important; } } /* ========================================================= ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .profile-customization-avatar-frame > .profile-customization-avatar-ring, .profile-customization-avatar-frame > .profile-customization-avatar-embers, .profile-customization-avatar-frame > .profile-customization-avatar-embers::before, .profile-customization-avatar-frame > .profile-customization-avatar-embers::after, .profile-customization-avatar-frame > .profile-customization-avatar-embers > i { animation: none !important; } } /* ========================================================= AVATAR PHOTO VISIBILITY FIX Keep the real profile photo above every Premium effect. ========================================================= */ .profile-customization-avatar-frame > .profile-customization-avatar-image-shell { position: absolute !important; z-index: 5 !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; border-radius: 50% !important; overflow: hidden !important; pointer-events: none !important; } .profile-customization-avatar-frame > .profile-customization-avatar-image-shell > #panelPhoto { position: absolute !important; z-index: 6 !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; border-radius: 50% !important; object-fit: cover !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } .profile-customization-avatar-frame > .profile-customization-avatar-ring { z-index: 1 !important; } .profile-customization-avatar-frame > .profile-customization-avatar-embers { z-index: 2 !important; } .profile-customization-avatar-frame > .online-dot, .profile-customization-avatar-frame > #panelOnlineDot { z-index: 10 !important; } /* ========================================================= RADARMEET — REAL FIRE AVATAR EFFECT Fire border only. Does NOT alter avatar/photo positioning. ========================================================= */ .profile-customization-avatar-frame[data-customization-border="fire"] { overflow: visible !important; } /* Main hot ring */ .profile-customization-avatar-frame[data-customization-border="fire"] > .profile-customization-avatar-ring { position: absolute !important; inset: -7px !important; border-radius: 50% !important; z-index: 1 !important; pointer-events: none !important; background: conic-gradient( from 0deg, #ff2400 0deg, #ff8a00 18deg, #fff06a 28deg, #ff5a00 42deg, #d91e00 58deg, #ff9d00 78deg, #fff3a0 91deg, #ff4d00 110deg, #b91400 128deg, #ff7600 148deg, #ffe56b 165deg, #ff3b00 187deg, #c91b00 205deg, #ff8b00 226deg, #fff09a 242deg, #ff4b00 260deg, #b80e00 280deg, #ff8d00 301deg, #ffe873 320deg, #ff3500 340deg, #ff2400 360deg ) !important; box-shadow: 0 0 6px rgba(255, 225, 80, 0.95), 0 0 13px rgba(255, 110, 0, 0.9), 0 0 24px rgba(255, 45, 0, 0.65) !important; animation: radarRealFireSpin 2.2s linear infinite, radarRealFireFlicker 0.16s ease-in-out infinite alternate !important; } /* Outer moving flame layer */ .profile-customization-avatar-frame[data-customization-border="fire"] > .profile-customization-avatar-embers { position: absolute !important; inset: -15px !important; border-radius: 50% !important; z-index: 2 !important; pointer-events: none !important; background: conic-gradient( from 15deg, transparent 0deg 8deg, rgba(255, 55, 0, 0.95) 9deg 13deg, rgba(255, 180, 0, 0.85) 14deg 17deg, transparent 18deg 38deg, rgba(255, 115, 0, 0.9) 39deg 44deg, rgba(255, 230, 80, 0.9) 45deg 47deg, transparent 48deg 73deg, rgba(255, 45, 0, 0.95) 74deg 80deg, rgba(255, 145, 0, 0.85) 81deg 85deg, transparent 86deg 112deg, rgba(255, 200, 20, 0.9) 113deg 118deg, rgba(255, 60, 0, 0.9) 119deg 124deg, transparent 125deg 151deg, rgba(255, 90, 0, 0.95) 152deg 158deg, rgba(255, 235, 100, 0.85) 159deg 162deg, transparent 163deg 191deg, rgba(255, 45, 0, 0.95) 192deg 198deg, rgba(255, 160, 0, 0.9) 199deg 203deg, transparent 204deg 232deg, rgba(255, 210, 50, 0.9) 233deg 237deg, rgba(255, 55, 0, 0.95) 238deg 244deg, transparent 245deg 271deg, rgba(255, 90, 0, 0.95) 272deg 278deg, rgba(255, 220, 70, 0.85) 279deg 283deg, transparent 284deg 311deg, rgba(255, 40, 0, 0.95) 312deg 318deg, rgba(255, 150, 0, 0.9) 319deg 324deg, transparent 325deg 360deg ) !important; filter: blur(1.2px) drop-shadow(0 0 5px rgba(255, 80, 0, 0.95)) drop-shadow(0 0 9px rgba(255, 30, 0, 0.65)) !important; animation: radarFlamesOrbit 1.65s linear infinite, radarFlamesDance 0.22s ease-in-out infinite alternate !important; } /* Keep the actual picture ABOVE all fire */ .profile-customization-avatar-frame > .profile-customization-avatar-image-shell { z-index: 5 !important; } .profile-customization-avatar-frame > .online-dot, .profile-customization-avatar-frame > #panelOnlineDot { z-index: 10 !important; } /* ---------- FIRE MOTION ---------- */ @keyframes radarRealFireSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes radarRealFireFlicker { 0% { filter: brightness(0.92) saturate(1.2); } 35% { filter: brightness(1.18) saturate(1.35); } 70% { filter: brightness(0.98) saturate(1.45); } 100% { filter: brightness(1.28) saturate(1.25); } } @keyframes radarFlamesOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes radarFlamesDance { 0% { opacity: 0.72; scale: 0.98; } 30% { opacity: 1; scale: 1.05; } 60% { opacity: 0.82; scale: 1.01; } 100% { opacity: 1; scale: 1.08; } } /* Accessibility — stop motion when user requests reduced motion */ @media (prefers-reduced-motion: reduce) { .profile-customization-avatar-frame[data-customization-border="fire"] > .profile-customization-avatar-ring { animation: radarRealFireSpin 6s linear infinite, radarRealFireFlicker 1.2s ease-in-out infinite alternate !important; } .profile-customization-avatar-frame[data-customization-border="fire"] > .profile-customization-avatar-embers { animation: radarFlamesOrbit 5s linear infinite, radarFlamesDance 1.4s ease-in-out infinite alternate !important; } } /* ========================================================= RADARMEET PREMIUM PROFILE THEMES Theme atmosphere only. Does NOT modify avatar-border effects. ========================================================= */ /* Shared theme foundation */ .profile-customization-preview-card { position: relative; isolation: isolate; overflow: hidden; } /* Keep actual profile content above theme atmosphere */ .profile-customization-preview-card > * { position: relative; z-index: 3; } /* ========================================================= 1. RADAR NEON Pink/red RadarMeet glow + moving radar sweep ========================================================= */ .profile-customization-preview-card[data-customization-theme="radar-neon"] { border-color: rgba(255, 49, 91, 0.85) !important; box-shadow: inset 0 0 28px rgba(255, 49, 91, 0.12), 0 0 12px rgba(255, 49, 91, 0.38), 0 0 30px rgba(255, 49, 91, 0.18) !important; } .profile-customization-preview-card[data-customization-theme="radar-neon"]::before { content: ""; position: absolute; z-index: 1; inset: -45%; pointer-events: none; background: conic-gradient( from 0deg, transparent 0deg 320deg, rgba(255, 49, 91, 0.02) 326deg, rgba(255, 80, 130, 0.34) 348deg, rgba(255, 49, 91, 0.08) 357deg, transparent 360deg ); animation: radarThemeSweep 7s linear infinite; } .profile-customization-preview-card[data-customization-theme="radar-neon"]::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: radial-gradient( circle at 50% 40%, transparent 0 25%, rgba(255, 49, 91, 0.025) 26% 27%, transparent 28% 40%, rgba(255, 49, 91, 0.02) 41% 42%, transparent 43% ); } /* ========================================================= 2. ELECTRIC BLUE Moving blue electrical energy ========================================================= */ .profile-customization-preview-card[data-customization-theme="electric-blue"] { border-color: rgba(50, 190, 255, 0.9) !important; box-shadow: inset 0 0 32px rgba(20, 140, 255, 0.12), 0 0 14px rgba(35, 185, 255, 0.5), 0 0 32px rgba(0, 110, 255, 0.22) !important; } .profile-customization-preview-card[data-customization-theme="electric-blue"]::before { content: ""; position: absolute; z-index: 1; inset: -20%; pointer-events: none; background: linear-gradient( 115deg, transparent 0%, transparent 38%, rgba(80, 220, 255, 0.03) 42%, rgba(110, 230, 255, 0.22) 46%, rgba(20, 120, 255, 0.07) 49%, transparent 53%, transparent 100% ); animation: electricThemeMove 4.5s ease-in-out infinite; } .profile-customization-preview-card[data-customization-theme="electric-blue"]::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: radial-gradient( ellipse at 50% 0%, rgba(30, 170, 255, 0.18), transparent 55% ); animation: electricThemePulse 1.8s ease-in-out infinite alternate; } /* ========================================================= 3. HOT PINK Magenta/pink neon haze ========================================================= */ .profile-customization-preview-card[data-customization-theme="hot-pink"] { border-color: rgba(255, 60, 190, 0.92) !important; box-shadow: inset 0 0 35px rgba(255, 35, 160, 0.12), 0 0 15px rgba(255, 50, 185, 0.52), 0 0 36px rgba(255, 30, 155, 0.22) !important; } .profile-customization-preview-card[data-customization-theme="hot-pink"]::before { content: ""; position: absolute; z-index: 1; inset: -25%; pointer-events: none; background: radial-gradient( circle at 25% 25%, rgba(255, 70, 190, 0.22), transparent 34% ), radial-gradient( circle at 75% 75%, rgba(210, 30, 255, 0.16), transparent 36% ); animation: hotPinkFloat 6s ease-in-out infinite alternate; } .profile-customization-preview-card[data-customization-theme="hot-pink"]::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; box-shadow: inset 0 0 45px rgba(255, 45, 180, 0.12); animation: hotPinkPulse 2.4s ease-in-out infinite alternate; } /* ========================================================= 4. PURPLE PULSE Deep purple energy pulse ========================================================= */ .profile-customization-preview-card[data-customization-theme="purple-pulse"] { border-color: rgba(170, 80, 255, 0.92) !important; box-shadow: inset 0 0 32px rgba(145, 55, 255, 0.13), 0 0 14px rgba(165, 70, 255, 0.5), 0 0 36px rgba(110, 30, 255, 0.24) !important; } .profile-customization-preview-card[data-customization-theme="purple-pulse"]::before { content: ""; position: absolute; z-index: 1; inset: -10%; pointer-events: none; background: radial-gradient( circle at 50% 45%, rgba(175, 75, 255, 0.20) 0%, rgba(115, 40, 220, 0.08) 32%, transparent 65% ); animation: purpleThemePulse 2.6s ease-in-out infinite alternate; } .profile-customization-preview-card[data-customization-theme="purple-pulse"]::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(160, 70, 255, 0.06), transparent 30%, transparent 70%, rgba(120, 35, 255, 0.06) ); } /* ========================================================= 5. MIDNIGHT Deep navy / subtle night shimmer ========================================================= */ .profile-customization-preview-card[data-customization-theme="midnight"] { border-color: rgba(85, 105, 180, 0.68) !important; box-shadow: inset 0 0 45px rgba(10, 20, 65, 0.25), 0 0 15px rgba(50, 70, 150, 0.24) !important; } .profile-customization-preview-card[data-customization-theme="midnight"]::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 18%, rgba(255,255,255,.48) 0 1px, transparent 2px), radial-gradient(circle at 72% 14%, rgba(150,190,255,.38) 0 1px, transparent 2px), radial-gradient(circle at 87% 36%, rgba(255,255,255,.32) 0 1px, transparent 2px), radial-gradient(circle at 32% 52%, rgba(160,190,255,.30) 0 1px, transparent 2px), radial-gradient(circle at 65% 70%, rgba(255,255,255,.35) 0 1px, transparent 2px), radial-gradient(circle at 20% 82%, rgba(130,170,255,.28) 0 1px, transparent 2px); animation: midnightShimmer 4s ease-in-out infinite alternate; } .profile-customization-preview-card[data-customization-theme="midnight"]::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: radial-gradient( ellipse at 50% 0%, rgba(40, 65, 145, 0.14), transparent 60% ); } /* ========================================================= 6. FIRE THEME Animated fire around the OUTER profile edge only. Does NOT touch the Fire avatar border. ========================================================= */ [data-preview][data-theme="fire"] { position: relative !important; overflow: hidden !important; /* Hot fire-colored outer frame */ border-style: solid !important; border-width: 5px !important; border-color: #ffb000 #ff3b00 #b91400 #ff7200 !important; /* Jagged flame-like perimeter */ border-radius: 14px !important; box-shadow: inset 0 0 0 1px rgba(255, 238, 120, 0.75), inset 0 0 10px rgba(255, 80, 0, 0.28), 0 0 3px #ffe36b, 0 0 7px #ff9d00, 0 0 13px #ff4d00, 0 0 22px rgba(210, 25, 0, 0.75) !important; outline: 2px solid rgba(255, 55, 0, 0.72) !important; outline-offset: 2px !important; } /* FIRE THEME — KILL ALL LEGACY PREVIEW OVERLAYS */ [data-preview][data-theme="fire"]::before, [data-preview][data-theme="fire"]::after { content: none !important; display: none !important; background: none !important; background-image: none !important; animation: none !important; transform: none !important; filter: none !important; box-shadow: none !important; } /* ========================================================= FIRE PROFILE THEME — DEDICATED OUTER FLAME LAYER ========================================================= */ .profile-theme-fire-flames { display: none; } [data-preview][data-theme="fire"] > .profile-theme-fire-flames { position: absolute !important; z-index: 4 !important; inset: 0 !important; display: block !important; overflow: visible !important; border-radius: inherit !important; pointer-events: none !important; } /* Every piece stays on the perimeter */ [data-preview][data-theme="fire"] > .profile-theme-fire-flames > i { position: absolute !important; display: block !important; pointer-events: none !important; opacity: .9; filter: drop-shadow(0 0 4px #ffd84a) drop-shadow(0 0 8px #ff7a00) drop-shadow(0 0 13px rgba(255, 45, 0, .8)) !important; animation: radarOuterFireFlicker .55s ease-in-out infinite alternate !important; } /* TOP */ [data-preview][data-theme="fire"] > .profile-theme-fire-flames > i:nth-child(1) { top: -7px; left: 8px; right: 8px; height: 17px; background: repeating-linear-gradient( 115deg, transparent 0 14px, rgba(255, 55, 0, .95) 15px 20px, rgba(255, 145, 0, .98) 21px 25px, rgba(255, 235, 90, .98) 26px 28px, transparent 29px 42px ); clip-path: polygon( 0 100%, 3% 55%, 5% 100%, 8% 30%, 11% 100%, 15% 48%, 18% 100%, 22% 18%, 26% 100%, 31% 42%, 35% 100%, 40% 22%, 45% 100%, 50% 38%, 55% 100%, 60% 15%, 65% 100%, 70% 45%, 75% 100%, 80% 24%, 85% 100%, 90% 40%, 94% 100%, 97% 52%, 100% 100% ); } /* BOTTOM */ [data-preview][data-theme="fire"] > .profile-theme-fire-flames > i:nth-child(2) { bottom: -7px; left: 8px; right: 8px; height: 17px; background: repeating-linear-gradient( 65deg, transparent 0 13px, rgba(255, 45, 0, .95) 14px 19px, rgba(255, 135, 0, .98) 20px 24px, rgba(255, 230, 80, .98) 25px 27px, transparent 28px 41px ); clip-path: polygon( 0 0, 4% 45%, 7% 0, 11% 70%, 15% 0, 20% 50%, 24% 0, 29% 82%, 34% 0, 39% 58%, 44% 0, 50% 76%, 55% 0, 61% 48%, 66% 0, 72% 84%, 77% 0, 82% 56%, 87% 0, 92% 70%, 96% 0, 100% 0 ); } /* LEFT */ [data-preview][data-theme="fire"] > .profile-theme-fire-flames > i:nth-child(3) { top: 8px; bottom: 8px; left: -7px; width: 17px; background: repeating-linear-gradient( 25deg, transparent 0 13px, rgba(255, 55, 0, .95) 14px 19px, rgba(255, 150, 0, .98) 20px 24px, rgba(255, 235, 90, .98) 25px 27px, transparent 28px 41px ); clip-path: polygon( 100% 0, 48% 4%, 100% 8%, 25% 13%, 100% 18%, 50% 23%, 100% 28%, 18% 34%, 100% 40%, 45% 46%, 100% 52%, 20% 59%, 100% 65%, 52% 71%, 100% 77%, 24% 84%, 100% 90%, 48% 95%, 100% 100% ); } /* RIGHT */ [data-preview][data-theme="fire"] > .profile-theme-fire-flames > i:nth-child(4) { top: 8px; bottom: 8px; right: -7px; width: 17px; background: repeating-linear-gradient( -25deg, transparent 0 13px, rgba(255, 55, 0, .95) 14px 19px, rgba(255, 150, 0, .98) 20px 24px, rgba(255, 235, 90, .98) 25px 27px, transparent 28px 41px ); clip-path: polygon( 0 0, 52% 4%, 0 8%, 75% 13%, 0 18%, 50% 23%, 0 28%, 82% 34%, 0 40%, 55% 46%, 0 52%, 80% 59%, 0 65%, 48% 71%, 0 77%, 76% 84%, 0 90%, 52% 95%, 0 100% ); } @keyframes radarOuterFireFlicker { 0% { opacity: .68; filter: brightness(.9) drop-shadow(0 0 3px #ff6a00) drop-shadow(0 0 7px rgba(255, 35, 0, .7)); } 100% { opacity: 1; filter: brightness(1.35) drop-shadow(0 0 5px #ffe66b) drop-shadow(0 0 10px #ff7900) drop-shadow(0 0 16px rgba(255, 35, 0, .85)); } } @media (prefers-reduced-motion: reduce) { [data-preview][data-theme="fire"] > .profile-theme-fire-flames > i { animation: radarOuterFireFlicker 1.4s ease-in-out infinite alternate !important; } } /* ========================================================= THEME ANIMATIONS ========================================================= */ @keyframes radarThemeSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes electricThemeMove { 0% { transform: translate(-12%, -5%) rotate(-3deg); opacity: 0.55; } 50% { transform: translate(8%, 4%) rotate(2deg); opacity: 1; } 100% { transform: translate(-5%, 8%) rotate(-1deg); opacity: 0.7; } } @keyframes electricThemePulse { from { opacity: 0.55; } to { opacity: 1; } } @keyframes hotPinkFloat { from { transform: translate(-4%, -2%) scale(1); } to { transform: translate(5%, 4%) scale(1.08); } } @keyframes hotPinkPulse { from { opacity: 0.55; } to { opacity: 1; } } @keyframes purpleThemePulse { from { transform: scale(0.94); opacity: 0.45; } to { transform: scale(1.08); opacity: 1; } } @keyframes midnightShimmer { from { opacity: 0.35; } to { opacity: 0.85; } } @keyframes fireThemeFlicker { 0% { opacity: 0.55; } 35% { opacity: 0.85; } 70% { opacity: 0.65; } 100% { opacity: 1; } } /* ========================================================= REDUCED MOTION Keep atmosphere alive, just substantially slower. ========================================================= */ @media (prefers-reduced-motion: reduce) { [data-preview][data-theme="radar-neon"]::before { animation-duration: 18s !important; } [data-preview][data-theme="electric-blue"]::before { animation-duration: 12s !important; } [data-preview][data-theme="electric-blue"]::after { animation-duration: 5s !important; } [data-preview][data-theme="hot-pink"]::before { animation-duration: 14s !important; } [data-preview][data-theme="hot-pink"]::after { animation-duration: 6s !important; } [data-preview][data-theme="purple-pulse"]::before { animation-duration: 7s !important; } [data-preview][data-theme="midnight"]::before { animation-duration: 9s !important; } [data-preview][data-theme="fire"]::before { animation-duration: 6s !important; } [data-preview][data-theme="fire"]::after { animation-duration: 3s !important; } } /* ========================================================= RADARMEET — MULTICOLOR PULSE BORDER Pulse border ONLY ========================================================= */ .profile-customization-avatar-frame[data-customization-border="pulse"] > .profile-customization-avatar-ring { position: absolute !important; inset: -7px !important; border-radius: 50% !important; z-index: 1 !important; pointer-events: none !important; background: conic-gradient( from 0deg, #ff3cac, #b84cff, #4d7cff, #27dfff, #37f5b0, #ffe45c, #ff8a35, #ff3cac ) !important; box-shadow: 0 0 7px #ff3cac, 0 0 16px #b84cff, 0 0 28px rgba(80, 150, 255, 0.65) !important; animation: radarPulseColorCycle 4s linear infinite, radarPulseBreath 1.25s ease-in-out infinite alternate !important; } /* Second glow outside the ring */ .profile-customization-avatar-frame[data-customization-border="pulse"] > .profile-customization-avatar-embers { display: block !important; position: absolute !important; inset: -12px !important; border-radius: 50% !important; z-index: 2 !important; pointer-events: none !important; background: conic-gradient( from 180deg, transparent, rgba(255, 60, 172, .8), transparent, rgba(39, 223, 255, .8), transparent, rgba(55, 245, 176, .75), transparent, rgba(255, 228, 92, .8), transparent ) !important; filter: blur(5px); opacity: .65; animation: radarPulseOrbit 5s linear infinite, radarPulseOuterBreath 1.25s ease-in-out infinite alternate !important; } /* COLOR CHANGES */ @keyframes radarPulseColorCycle { 0% { transform: rotate(0deg); filter: hue-rotate(0deg) brightness(1); } 25% { filter: hue-rotate(80deg) brightness(1.2); } 50% { filter: hue-rotate(170deg) brightness(1.05); } 75% { filter: hue-rotate(260deg) brightness(1.25); } 100% { transform: rotate(360deg); filter: hue-rotate(360deg) brightness(1); } } /* ACTUAL PULSE */ @keyframes radarPulseBreath { 0% { scale: .96; opacity: .72; box-shadow: 0 0 5px #ff3cac, 0 0 10px rgba(255, 60, 172, .5); } 50% { scale: 1.02; opacity: .9; } 100% { scale: 1.08; opacity: 1; box-shadow: 0 0 10px #35ddff, 0 0 23px rgba(100, 75, 255, .9), 0 0 38px rgba(255, 60, 190, .55); } } /* OUTER COLOR ENERGY */ @keyframes radarPulseOrbit { from { transform: rotate(0deg); filter: hue-rotate(0deg) blur(5px); } to { transform: rotate(-360deg); filter: hue-rotate(360deg) blur(5px); } } @keyframes radarPulseOuterBreath { from { scale: .92; opacity: .25; } to { scale: 1.12; opacity: .85; } } /* KEEP PROFILE PICTURE ABOVE EFFECT */ .profile-customization-avatar-frame > .profile-customization-avatar-image-shell { z-index: 5 !important; } .profile-customization-avatar-frame > .online-dot, .profile-customization-avatar-frame > #panelOnlineDot { z-index: 10 !important; } /* Your device currently has Reduced Motion enabled. Let Pulse still animate, just slower. */ @media (prefers-reduced-motion: reduce) { .profile-customization-avatar-frame[data-customization-border="pulse"] > .profile-customization-avatar-ring { animation: radarPulseColorCycle 8s linear infinite, radarPulseBreath 2.5s ease-in-out infinite alternate !important; } .profile-customization-avatar-frame[data-customization-border="pulse"] > .profile-customization-avatar-embers { animation: radarPulseOrbit 10s linear infinite, radarPulseOuterBreath 2.5s ease-in-out infinite alternate !important; } } /* ========================================================= PULSE — LOCK RING TO PROFILE PHOTO ========================================================= */ .profile-customization-avatar-frame[data-customization-border="pulse"] > .profile-customization-avatar-ring { inset: -6px !important; width: auto !important; height: auto !important; margin: 0 !important; transform-origin: center center !important; } .profile-customization-avatar-frame[data-customization-border="pulse"] > .profile-customization-avatar-embers { inset: -11px !important; width: auto !important; height: auto !important; margin: 0 !important; transform-origin: center center !important; } /* ========================================================= RADARMEET — BORDER ALIGNMENT FIX Default / Neon Wave / Ice / Rainbow Match the working Fire + Pulse geometry ========================================================= */ /* MAIN RING — lock directly around profile picture */ .profile-customization-avatar-frame[data-customization-border="default-glow"] > .profile-customization-avatar-ring, .profile-customization-avatar-frame[data-customization-border="neon-wave"] > .profile-customization-avatar-ring, .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-ring, .profile-customization-avatar-frame[data-customization-border="rainbow"] > .profile-customization-avatar-ring { position: absolute !important; inset: -6px !important; width: auto !important; height: auto !important; margin: 0 !important; border-radius: 50% !important; transform-origin: center center !important; z-index: 1 !important; pointer-events: none !important; } /* OUTER EFFECT LAYER */ .profile-customization-avatar-frame[data-customization-border="default-glow"] > .profile-customization-avatar-embers, .profile-customization-avatar-frame[data-customization-border="neon-wave"] > .profile-customization-avatar-embers, .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-embers, .profile-customization-avatar-frame[data-customization-border="rainbow"] > .profile-customization-avatar-embers { position: absolute !important; inset: -11px !important; width: auto !important; height: auto !important; margin: 0 !important; border-radius: 50% !important; transform-origin: center center !important; z-index: 2 !important; pointer-events: none !important; } /* PROFILE PHOTO ALWAYS ABOVE BORDER EFFECTS */ .profile-customization-avatar-frame > .profile-customization-avatar-image-shell { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 50% !important; overflow: hidden !important; z-index: 5 !important; } /* ONLINE DOT ALWAYS ON TOP */ .profile-customization-avatar-frame > .online-dot, .profile-customization-avatar-frame > #panelOnlineDot { z-index: 10 !important; } /* ========================================================= RADARMEET — FINAL BORDER VISUALS Fire is intentionally NOT included. ========================================================= */ /* ================= DEFAULT ================= Simple RadarMeet red/pink neon ring =========================================== */ .profile-customization-avatar-frame[data-customization-border="default-glow"] > .profile-customization-avatar-ring { background: #ff315b !important; box-shadow: 0 0 5px #ff315b, 0 0 11px rgba(255, 49, 91, .85), 0 0 20px rgba(255, 49, 91, .45) !important; animation: none !important; } .profile-customization-avatar-frame[data-customization-border="default-glow"] > .profile-customization-avatar-embers { display: none !important; } /* ================= NEON WAVE ================= MUCH brighter neon. We'll connect selectable colors next. ============================================= */ .profile-customization-avatar-frame[data-customization-border="neon-wave"] > .profile-customization-avatar-ring { background: conic-gradient( from 0deg, #ff00e6, #ff00e6 12%, #00f7ff 27%, #00f7ff 40%, #8c3cff 55%, #ff00e6 72%, #00f7ff 88%, #ff00e6 ) !important; box-shadow: 0 0 6px #ff00e6, 0 0 13px #00f7ff, 0 0 25px rgba(255, 0, 230, .75), 0 0 38px rgba(0, 247, 255, .40) !important; filter: brightness(1.45) saturate(1.55) !important; animation: radarNeonWaveSpin 2.4s linear infinite, radarNeonWaveGlow .8s ease-in-out infinite alternate !important; } .profile-customization-avatar-frame[data-customization-border="neon-wave"] > .profile-customization-avatar-embers { display: block !important; background: conic-gradient( from 90deg, transparent 0 10%, rgba(255,0,230,.95) 14%, transparent 20% 35%, rgba(0,247,255,.95) 40%, transparent 46% 61%, rgba(140,60,255,.9) 66%, transparent 72% 86%, rgba(255,0,230,.9) 91%, transparent ) !important; filter: blur(5px) brightness(1.6) saturate(1.5) !important; opacity: .9; animation: radarNeonWaveOuter 3.2s linear infinite !important; } /* ================= ICE ================= Frost / crystal / frozen-energy ring ======================================= */ .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-ring { background: conic-gradient( from 0deg, #ffffff 0deg, #a8f3ff 18deg, #43dfff 34deg, #ffffff 48deg, #73bfff 66deg, #d9fbff 82deg, #2ecfff 102deg, #ffffff 122deg, #8beaff 144deg, #469cff 164deg, #ffffff 184deg, #a4f5ff 204deg, #32caff 226deg, #eaffff 248deg, #67b8ff 270deg, #ffffff 292deg, #62e8ff 315deg, #baf8ff 338deg, #ffffff 360deg ) !important; box-shadow: 0 0 5px rgba(255,255,255,.95), 0 0 11px rgba(100,225,255,.95), 0 0 22px rgba(50,160,255,.70), 0 0 34px rgba(100,220,255,.32) !important; filter: brightness(1.2) saturate(1.15) !important; animation: radarIceTurn 8s linear infinite, radarIceShimmer 1.4s ease-in-out infinite alternate !important; } /* Frozen shards around outside */ .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-embers { display: block !important; background: conic-gradient( from 5deg, transparent 0deg 12deg, rgba(220,252,255,.95) 13deg 17deg, transparent 18deg 43deg, rgba(90,220,255,.85) 44deg 49deg, transparent 50deg 78deg, rgba(255,255,255,.95) 79deg 83deg, transparent 84deg 111deg, rgba(80,185,255,.9) 112deg 118deg, transparent 119deg 149deg, rgba(220,250,255,.95) 150deg 155deg, transparent 156deg 185deg, rgba(70,210,255,.9) 186deg 192deg, transparent 193deg 223deg, rgba(255,255,255,.9) 224deg 229deg, transparent 230deg 258deg, rgba(90,190,255,.9) 259deg 265deg, transparent 266deg 296deg, rgba(225,252,255,.95) 297deg 302deg, transparent 303deg 333deg, rgba(70,220,255,.9) 334deg 340deg, transparent 341deg 360deg ) !important; filter: drop-shadow(0 0 3px rgba(220,250,255,.95)) drop-shadow(0 0 7px rgba(50,190,255,.8)) !important; opacity: .9; animation: radarIceShardTurn 12s linear infinite, radarIceShardFlash 1.8s ease-in-out infinite alternate !important; } /* ================= ANIMATIONS ================= */ @keyframes radarNeonWaveSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes radarNeonWaveGlow { from { opacity: .72; filter: brightness(1.25) saturate(1.4); } to { opacity: 1; filter: brightness(1.75) saturate(1.8); } } @keyframes radarNeonWaveOuter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes radarIceTurn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes radarIceShimmer { from { opacity: .78; filter: brightness(1.05); } to { opacity: 1; filter: brightness(1.55); } } @keyframes radarIceShardTurn { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes radarIceShardFlash { from { opacity: .48; scale: .97; } to { opacity: 1; scale: 1.05; } } /* Your system currently reports Reduced Motion. Keep these alive, but slower. */ @media (prefers-reduced-motion: reduce) { .profile-customization-avatar-frame[data-customization-border="neon-wave"] > .profile-customization-avatar-ring { animation: radarNeonWaveSpin 7s linear infinite, radarNeonWaveGlow 2.5s ease-in-out infinite alternate !important; } .profile-customization-avatar-frame[data-customization-border="neon-wave"] > .profile-customization-avatar-embers { animation: radarNeonWaveOuter 9s linear infinite !important; } .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-ring { animation: radarIceTurn 14s linear infinite, radarIceShimmer 3s ease-in-out infinite alternate !important; } .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-embers { animation: radarIceShardTurn 18s linear infinite, radarIceShardFlash 3.5s ease-in-out infinite alternate !important; } } /* ========================================================= RADARMEET — FROZEN CRYSTAL / ICE BORDER V2 ICE ONLY ========================================================= */ .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-ring { inset: -7px !important; background: conic-gradient( from 0deg, #ffffff 0deg 5deg, #79efff 6deg 15deg, #168cff 16deg 23deg, #dfffff 24deg 31deg, #48d9ff 32deg 43deg, #ffffff 44deg 49deg, #238fff 50deg 62deg, #aaf8ff 63deg 74deg, #ffffff 75deg 81deg, #36cfff 82deg 96deg, #1377e8 97deg 105deg, #eaffff 106deg 114deg, #65e8ff 115deg 129deg, #ffffff 130deg 137deg, #209dff 138deg 151deg, #b9fbff 152deg 163deg, #ffffff 164deg 171deg, #48dfff 172deg 187deg, #1684ef 188deg 198deg, #eaffff 199deg 207deg, #59e4ff 208deg 221deg, #ffffff 222deg 229deg, #2298ff 230deg 244deg, #a7f7ff 245deg 256deg, #ffffff 257deg 265deg, #46dfff 266deg 281deg, #147bea 282deg 292deg, #eaffff 293deg 301deg, #5ce8ff 302deg 316deg, #ffffff 317deg 324deg, #249cff 325deg 339deg, #aefaff 340deg 350deg, #ffffff 351deg 360deg ) !important; box-shadow: 0 0 4px #ffffff, 0 0 9px #8ff5ff, 0 0 18px rgba(40, 190, 255, .95), 0 0 30px rgba(30, 110, 255, .55) !important; animation: radarFrozenCrystalTurn 9s linear infinite, radarFrozenCrystalGlow 1.5s ease-in-out infinite alternate !important; } /* JAGGED CRYSTAL SHARDS */ .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-embers { display: block !important; inset: -15px !important; background: repeating-conic-gradient( from 3deg, transparent 0deg 7deg, rgba(255,255,255,.98) 8deg 10deg, rgba(120,235,255,.92) 11deg 14deg, transparent 15deg 25deg, rgba(60,185,255,.92) 26deg 29deg, rgba(230,255,255,.98) 30deg 32deg, transparent 33deg 45deg ) !important; clip-path: polygon( 50% 0%, 55% 12%, 63% 3%, 66% 16%, 77% 7%, 76% 21%, 90% 16%, 84% 29%, 100% 30%, 88% 40%, 100% 50%, 87% 56%, 98% 69%, 82% 69%, 90% 85%, 75% 79%, 75% 96%, 62% 85%, 55% 100%, 49% 87%, 38% 100%, 35% 84%, 21% 94%, 24% 78%, 7% 83%, 16% 68%, 0% 65%, 13% 53%, 0% 44%, 15% 38%, 3% 25%, 19% 25%, 12% 10%, 29% 17%, 31% 2%, 43% 14% ) !important; filter: drop-shadow(0 0 3px rgba(255,255,255,1)) drop-shadow(0 0 7px rgba(80,220,255,.95)) drop-shadow(0 0 12px rgba(30,130,255,.7)) !important; opacity: .95; animation: radarIceShardSparkle 1.6s ease-in-out infinite alternate !important; } /* Frost halo */ .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-embers::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid rgba(215, 252, 255, .85); box-shadow: inset 0 0 7px rgba(255,255,255,.9), 0 0 9px rgba(85,220,255,.8); pointer-events: none; } /* Crystal sparkle */ .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-embers::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: radial-gradient(circle at 16% 24%, #fff 0 2px, transparent 3px), radial-gradient(circle at 81% 31%, #fff 0 1.5px, transparent 3px), radial-gradient(circle at 71% 83%, #baf8ff 0 2px, transparent 3px), radial-gradient(circle at 24% 73%, #fff 0 1.5px, transparent 3px); animation: radarIceSparkle 1.1s ease-in-out infinite alternate; pointer-events: none; } @keyframes radarFrozenCrystalTurn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes radarFrozenCrystalGlow { from { filter: brightness(1.05) saturate(1.1); } to { filter: brightness(1.55) saturate(1.35); } } @keyframes radarIceShardSparkle { 0% { opacity: .68; scale: .97; } 45% { opacity: 1; scale: 1.04; } 100% { opacity: .82; scale: 1.01; } } @keyframes radarIceSparkle { from { opacity: .25; transform: rotate(-4deg); } to { opacity: 1; transform: rotate(4deg); } } /* Reduced-motion device: still animate slowly */ @media (prefers-reduced-motion: reduce) { .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-ring { animation: radarFrozenCrystalTurn 18s linear infinite, radarFrozenCrystalGlow 3.5s ease-in-out infinite alternate !important; } .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-embers { animation: radarIceShardSparkle 3.5s ease-in-out infinite alternate !important; } .profile-customization-avatar-frame[data-customization-border="ice"] > .profile-customization-avatar-embers::after { animation: radarIceSparkle 3s ease-in-out infinite alternate !important; } } /* Respect reduced-motion settings for every moving avatar border layer. */ @media (prefers-reduced-motion: reduce) { .profile-customization-avatar-frame[data-customization-border] > .profile-customization-avatar-ring, .profile-customization-avatar-frame[data-customization-border] > .profile-customization-avatar-embers, .profile-customization-avatar-frame[data-customization-border] > .profile-customization-avatar-embers::before, .profile-customization-avatar-frame[data-customization-border] > .profile-customization-avatar-embers::after, .profile-customization-avatar-frame[data-customization-border] > .profile-customization-avatar-embers > i { animation: none !important; } }