/* ==========================================
   SAHIL SHARMA PORTFOLIO — animations.css
   Extra enhanced animations v4.0
   ========================================== */

/* ==========================================
   1. PROFILE CONIC BORDER + BREATHING GLOW
   ========================================== */
.profile-core {
    position: relative;
    /* Overwrite the simple border with conic */
    border: none !important;
    box-shadow:
        0 0 0 3px rgba(0,242,255,0.5),
        0 0 40px rgba(0,242,255,0.5),
        0 0 80px rgba(0,242,255,0.2),
        0 0 120px rgba(124,58,237,0.15) !important;
    animation: coreBreath 4s ease-in-out infinite !important;
}
@keyframes coreBreath {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(0,242,255,0.4),
            0 0 40px rgba(0,242,255,0.4),
            0 0 80px rgba(0,242,255,0.15);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(0,242,255,0.7),
            0 0 70px rgba(0,242,255,0.8),
            0 0 120px rgba(0,242,255,0.4),
            0 0 170px rgba(124,58,237,0.3);
    }
}

/* Spinning conic border behind profile */
.profile-core::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #00f2ff,
        #7c3aed,
        #ff00ea,
        #00f2ff
    );
    animation: spinBorder 3s linear infinite;
    z-index: -1;
    filter: blur(4px);
}
@keyframes spinBorder {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Outer halo layer */
.profile-core::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: conic-gradient(
        from 180deg,
        rgba(0,242,255,0.15),
        rgba(124,58,237,0.15),
        rgba(255,0,234,0.1),
        rgba(0,242,255,0.15)
    );
    animation: spinBorder 6s linear infinite reverse;
    z-index: -2;
    filter: blur(10px);
}

/* Scan line sweep over avatar */
.profile-core .scan-line {
    position: absolute;
    left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--cyan) 50%, transparent 100%);
    animation: scanLine 3s ease-in-out infinite;
    z-index: 10;
    pointer-events: none;
    mix-blend-mode: screen;
    border-radius: 2px;
}
@keyframes scanLine {
    0%   { top: 5%; opacity: 0; }
    8%   { opacity: 0.9; }
    92%  { opacity: 0.9; }
    100% { top: 95%; opacity: 0; }
}

/* HUD corner brackets on atomic wrapper */
.atomic-wrapper .hud-tl,
.atomic-wrapper .hud-br {
    position: absolute;
    width: 28px; height: 28px;
    border-color: var(--cyan);
    border-style: solid;
    z-index: 6;
    animation: hudPulse 2.5s ease-in-out infinite;
    pointer-events: none;
}
.atomic-wrapper .hud-tl {
    top: 12px; left: 12px;
    border-width: 2px 0 0 2px;
}
.atomic-wrapper .hud-br {
    bottom: 12px; right: 12px;
    border-width: 0 2px 2px 0;
    animation-delay: 1.25s;
}
@keyframes hudPulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 10px var(--cyan); }
}


/* ==========================================
   2. HERO TEXT STAGGER ENTRANCE
   ========================================== */
.hero-text .sys-badge {
    animation: bounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}
.hero-text h1 {
    animation: slideFromLeft 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.7s both;
}
.hero-text .role-wrapper {
    animation: slideFromLeft 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.9s both;
}
.hero-text .bio {
    animation: slideFromLeft 0.9s ease 1.1s both;
}
.hero-text .hero-btns {
    animation: slideFromLeft 0.9s ease 1.3s both;
}
.hero-text .hero-socials {
    animation: slideFromLeft 0.9s ease 1.5s both;
}
.hero-visual {
    animation: slideFromRight 1s cubic-bezier(0.25, 1, 0.5, 1) 0.6s both;
}

@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.4) translateY(-20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slideFromLeft {
    0%   { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes slideFromRight {
    0%   { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0); }
}


/* ==========================================
   3. ATOM RING COLORED GLOW HALOS
   ========================================== */
.ring-1 {
    filter: drop-shadow(0 0 8px var(--cyan));
    border-top-color: var(--cyan) !important;
}
.ring-2 {
    filter: drop-shadow(0 0 6px #7c3aed);
    border-bottom-color: #7c3aed !important;
}
.ring-3 {
    filter: drop-shadow(0 0 5px #ff00ea);
    border-left-color: rgba(255,0,234,0.7) !important;
}

/* Tech planet pulse */
.tech-planet {
    animation: counterSpin 20s linear infinite, planetPulse 3s ease-in-out infinite !important;
}
.p-1 { animation-delay: 0s, 0s !important; }
.p-2 { animation-delay: 0s, 0.75s !important; }
.p-3 { animation-delay: 0s, 1.5s !important; }
.p-4 { animation-delay: 0s, 2.25s !important; }
@keyframes planetPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(0,242,255,0.4); }
    50%       { box-shadow: 0 0 28px rgba(0,242,255,0.9), 0 0 55px rgba(0,242,255,0.3); }
}


/* ==========================================
   4. SHIMMER ON SECTION LABELS
   ========================================== */
.section-label {
    background: linear-gradient(
        90deg,
        var(--cyan) 0%,
        rgba(255,255,255,0.95) 45%,
        var(--cyan) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: labelShimmer 4s linear infinite;
}
@keyframes labelShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Underline glow on highlight text in section titles */
.section-title .highlight {
    position: relative;
    display: inline-block;
}
.section-title .highlight::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    animation: underlineGlow 3s ease-in-out infinite;
}
@keyframes underlineGlow {
    0%, 100% { opacity: 0.3; transform: scaleX(0.6); }
    50%       { opacity: 1;   transform: scaleX(1); }
}


/* ==========================================
   5. CARD SHINE SWEEP
   ========================================== */
.project-card {
    position: relative;
    overflow: hidden;
}
.project-card::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 242, 255, 0.07),
        transparent
    );
    transform: skewX(-20deg);
    animation: cardShine 7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cardShine {
    0%, 100% { left: -80%; opacity: 0; }
    5%        { opacity: 1; }
    50%       { left: 140%; opacity: 1; }
    55%       { left: 140%; opacity: 0; }
}
.project-card:nth-child(2)::after { animation-delay: 1.1s; }
.project-card:nth-child(3)::after { animation-delay: 2.2s; }
.project-card:nth-child(4)::after { animation-delay: 3.3s; }
.project-card:nth-child(5)::after { animation-delay: 4.4s; }
.project-card:nth-child(6)::after { animation-delay: 5.5s; }


/* ==========================================
   6. SKILL FILL GLOW AFTER ANIMATION
   ========================================== */
.skill-fill.animated {
    animation: barGlowPulse 3s ease-in-out infinite;
}
@keyframes barGlowPulse {
    0%, 100% { filter: brightness(1) saturate(1); }
    50%       { filter: brightness(1.4) saturate(1.2); }
}


/* ==========================================
   7. ICON CARD ENHANCED HOVER
   ========================================== */
.icon-card:hover {
    box-shadow: 0 10px 30px rgba(0,242,255,0.2), inset 0 0 20px rgba(0,242,255,0.04) !important;
}
.icon-card:hover i {
    filter: drop-shadow(0 0 10px var(--cyan));
    animation: iconBounce 0.4s ease;
}
@keyframes iconBounce {
    0%, 100% { transform: translateY(-2px) scale(1.1); }
    50%       { transform: translateY(-5px) scale(1.15); }
}


/* ==========================================
   8. RESUME BUTTON RIPPLE + GLOW
   ========================================== */
.btn-download {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.btn-download:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 15px 40px rgba(0,242,255,0.5), 0 5px 15px rgba(124,58,237,0.4) !important;
}


/* ==========================================
   9. ANIMATED FOOTER TOP BORDER
   ========================================== */
.main-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
    opacity: 0.6;
    animation: footerLine 5s ease-in-out infinite;
}
@keyframes footerLine {
    0%, 100% { opacity: 0.3; left: 20%; right: 20%; }
    50%       { opacity: 0.8; left: 5%;  right: 5%; }
}


/* ==========================================
   10. SCROLL PROGRESS BAR
   ========================================== */
#scroll-progress {
    position: fixed;
    top: 0; left: 0; right: auto;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--cyan), var(--purple), #ff00ea);
    z-index: 99999;
    box-shadow: 0 0 10px var(--cyan), 0 0 20px rgba(0,242,255,0.4);
    pointer-events: none;
    transition: width 0.1s linear;
}


/* ==========================================
   11. FLOATING ORBS IN BACKGROUND
   ========================================== */
.orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
    opacity: 0;
    animation: orbFloat 20s ease-in-out infinite;
}
.orb-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(0,242,255,0.08), transparent);
    top: 10%; left: -10%;
    animation-delay: 0s;
}
.orb-2 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(124,58,237,0.08), transparent);
    top: 50%; right: -10%;
    animation-delay: 8s;
}
.orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,0,234,0.05), transparent);
    bottom: 10%; left: 30%;
    animation-delay: 15s;
}
@keyframes orbFloat {
    0%, 100% { opacity: 0; transform: translateY(0) scale(1); }
    20%       { opacity: 1; }
    80%       { opacity: 1; }
    50%       { transform: translateY(-60px) scale(1.1); }
}


/* ==========================================
   12. NAV ACTIVE DOT INDICATOR
   ========================================== */
.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    background: var(--cyan);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--cyan);
    display: block;
}
.nav-links a { position: relative; display: inline-block; }


/* ==========================================
   13. TIMELINE DOT PULSE
   ========================================== */
.timeline-dot {
    animation: dotPulse 2s ease-in-out infinite;
}
.timeline-item:nth-child(2) .timeline-dot { animation-delay: 0.7s; }
.timeline-item:nth-child(3) .timeline-dot { animation-delay: 1.4s; }
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(0,242,255,0.3); }
    50%       { box-shadow: 0 0 25px rgba(0,242,255,0.8), 0 0 50px rgba(0,242,255,0.3); }
}


/* ==========================================
   14. CONTACT TERMINAL CURSOR BLINK
   ========================================== */
input:focus, textarea:focus {
    border-bottom-color: var(--cyan) !important;
    caret-color: var(--cyan);
}
.input-line:focus-within {
    border-bottom-color: var(--cyan) !important;
}
.input-line:focus-within .user {
    animation: userBlink 1s step-end infinite;
}
@keyframes userBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}