/* ============================================
   ANIMATIONS CSS
   ============================================ */
.text-gradient { background-size: 200% auto; animation: gradientShift 4s ease infinite; }
@keyframes gradientShift { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }

.section-line { animation: linePulse 2s ease-in-out infinite; }
@keyframes linePulse { 0%,100% { width: 60px; opacity: 0.8; } 50% { width: 100px; opacity: 1; } }

/* Avatar Rings */
.avatar-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(99,102,241,0.2); }
.avatar-ring { width: 340px; height: 340px; animation: ringRotate 25s linear infinite; }
.avatar-ring-2 { width: 370px; height: 370px; border-color: rgba(6,182,212,0.15); animation: ringRotate 30s linear infinite reverse; }
.avatar-ring-3 { width: 400px; height: 400px; border-style: dashed; border-color: rgba(129,140,248,0.1); animation: ringRotate 20s linear infinite; }
@keyframes ringRotate { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

.avatar-main { animation: avatarFloat 6s ease-in-out infinite; }
@keyframes avatarFloat { 0%,100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-15px); } }

/* Floating Badges */
.floating-badge { position: absolute; width: 50px; height: 50px; background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 3; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: var(--transition); }
.floating-badge:hover { transform: scale(1.15); border-color: var(--primary-light); }
.floating-badge i { color: var(--primary-light); font-size: 1.1rem; }
.badge-1 { top: 5px; left: 40px; animation: floatB1 8s ease-in-out infinite; }
.badge-2 { top: 10px; right: 35px; animation: floatB2 10s ease-in-out infinite; }
.badge-3 { bottom: 20px; left: 30px; animation: floatB3 9s ease-in-out infinite; }
.badge-4 { bottom: 15px; right: 40px; animation: floatB4 7s ease-in-out infinite; }
@keyframes floatB1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(12px,-12px)} }
@keyframes floatB2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-10px,-15px)} }
@keyframes floatB3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(15px,10px)} }
@keyframes floatB4 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-12px,12px)} }

/* Skill bar glow */
.skill-bar::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: #fff; border-radius: 50%; box-shadow: 0 0 15px rgba(129,140,248,0.8); animation: glowPulse 2s infinite; }
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 10px rgba(129,140,248,0.6); } 50% { box-shadow: 0 0 25px rgba(129,140,248,1); } }

/* ============================================
   WARP SPEED PRELOADER
   ============================================ */
.stars-canvas { position: absolute; inset: 0; }

.speed-lines { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.speed-line { position: absolute; width: 2px; height: 80px; background: linear-gradient(to bottom, transparent, #818cf8, #fff, transparent); top: 50%; left: 50%; transform-origin: center center; animation: warpLine 0.8s linear infinite; border-radius: 2px; }
.speed-line:nth-child(1) { transform: translate(-50%,-50%) rotate(0deg) translateY(-120px); animation-delay: 0s; }
.speed-line:nth-child(2) { transform: translate(-50%,-50%) rotate(18deg) translateY(-120px); animation-delay: 0.04s; }
.speed-line:nth-child(3) { transform: translate(-50%,-50%) rotate(36deg) translateY(-120px); animation-delay: 0.08s; }
.speed-line:nth-child(4) { transform: translate(-50%,-50%) rotate(54deg) translateY(-120px); animation-delay: 0.12s; }
.speed-line:nth-child(5) { transform: translate(-50%,-50%) rotate(72deg) translateY(-120px); animation-delay: 0.16s; }
.speed-line:nth-child(6) { transform: translate(-50%,-50%) rotate(90deg) translateY(-120px); animation-delay: 0.2s; }
.speed-line:nth-child(7) { transform: translate(-50%,-50%) rotate(108deg) translateY(-120px); animation-delay: 0.24s; }
.speed-line:nth-child(8) { transform: translate(-50%,-50%) rotate(126deg) translateY(-120px); animation-delay: 0.28s; }
.speed-line:nth-child(9) { transform: translate(-50%,-50%) rotate(144deg) translateY(-120px); animation-delay: 0.32s; }
.speed-line:nth-child(10) { transform: translate(-50%,-50%) rotate(162deg) translateY(-120px); animation-delay: 0.36s; }
.speed-line:nth-child(11) { transform: translate(-50%,-50%) rotate(180deg) translateY(-120px); animation-delay: 0.4s; }
.speed-line:nth-child(12) { transform: translate(-50%,-50%) rotate(198deg) translateY(-120px); animation-delay: 0.44s; }
.speed-line:nth-child(13) { transform: translate(-50%,-50%) rotate(216deg) translateY(-120px); animation-delay: 0.48s; }
.speed-line:nth-child(14) { transform: translate(-50%,-50%) rotate(234deg) translateY(-120px); animation-delay: 0.52s; }
.speed-line:nth-child(15) { transform: translate(-50%,-50%) rotate(252deg) translateY(-120px); animation-delay: 0.56s; }
.speed-line:nth-child(16) { transform: translate(-50%,-50%) rotate(270deg) translateY(-120px); animation-delay: 0.6s; }
.speed-line:nth-child(17) { transform: translate(-50%,-50%) rotate(288deg) translateY(-120px); animation-delay: 0.64s; }
.speed-line:nth-child(18) { transform: translate(-50%,-50%) rotate(306deg) translateY(-120px); animation-delay: 0.68s; }
.speed-line:nth-child(19) { transform: translate(-50%,-50%) rotate(324deg) translateY(-120px); animation-delay: 0.72s; }
.speed-line:nth-child(20) { transform: translate(-50%,-50%) rotate(342deg) translateY(-120px); animation-delay: 0.76s; }

@keyframes warpLine {
    0% { opacity: 0; height: 40px; transform: translate(-50%,-50%) rotate(var(--r, 0deg)) translateY(-80px); }
    50% { opacity: 1; height: 120px; }
    100% { opacity: 0; height: 40px; transform: translate(-50%,-50%) rotate(var(--r, 0deg)) translateY(-250px); }
}

/* Warp Core */
.warp-core { position: relative; z-index: 5; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
.core-glow { position: absolute; inset: -30px; background: radial-gradient(circle, rgba(99,102,241,0.4) 0%, transparent 70%); animation: glowPulse 1.5s ease-in-out infinite; border-radius: 50%; }
@keyframes glowPulse { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.3); opacity: 1; } }

.core-ship { width: 70px; height: 70px; border-radius: 50%; background: var(--gradient-2); display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 0 50px rgba(99,102,241,0.8), 0 0 100px rgba(6,182,212,0.4); animation: shipFloat 2s ease-in-out infinite; position: relative; }
.ship-text { font-size: 1.3rem; font-weight: 800; color: #fff; }
@keyframes shipFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.05); } }

.core-ring { position: absolute; border-radius: 50%; border: 2px solid rgba(99,102,241,0.5); animation: coreRingExpand 1.5s ease-out infinite; }
.core-ring-1 { width: 100px; height: 100px; }
.core-ring-2 { width: 100px; height: 100px; animation-delay: 0.3s; border-color: rgba(6,182,212,0.5); }
.core-ring-3 { width: 100px; height: 100px; animation-delay: 0.6s; border-color: rgba(129,140,248,0.5); }
@keyframes coreRingExpand { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }

/* Warp Info */
.warp-info { position: absolute; bottom: 12%; text-align: center; z-index: 5; }
.warp-status { display: block; font-size: 1rem; font-weight: 700; color: var(--primary-light); letter-spacing: 0.5em; margin-bottom: 1rem; animation: textPulse 1s ease-in-out infinite; }
@keyframes textPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.warp-progress { width: 200px; height: 3px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin: 0 auto 0.5rem; }
.warp-progress-bar { height: 100%; width: 0%; background: var(--gradient-2); border-radius: 3px; transition: width 0.3s; }
.warp-subtitle { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.2em; }