/* =========================================
   Home Page — Page-Specific Styles
   ========================================= */

/* =========================================
   Profile Image 3D Ring
   ========================================= */

.profile-ring {
    position: relative;
}

.profile-ring::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            #6366f1,
            #a855f7,
            #ec4899,
            #3b82f6,
            #6366f1);
    z-index: -1;
    animation: ring-spin 6s linear infinite;
    opacity: 0.7;
}

.profile-ring::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            #6366f1,
            #a855f7,
            #ec4899,
            #3b82f6,
            #6366f1);
    z-index: -2;
    filter: blur(20px);
    animation: ring-spin 6s linear infinite;
    opacity: 0.4;
}

@keyframes ring-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================
   Scroll Indicator
   ========================================= */

.scroll-indicator {
    animation: scroll-bounce 2s ease-in-out infinite;
}

@keyframes scroll-bounce {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(8px);
        opacity: 1;
    }
}

/* =========================================
   Text Display
   ========================================= */

/* Hero title — responsive sizing, auto-fits container */
#typed-title {
    font-size: clamp(2.5rem, 6vw, 6rem);
    white-space: nowrap;
    overflow: visible;
}

/* Status badge pill — force single line */
[data-bind="status"] {
    white-space: nowrap;
}

/* Hero location pill — keep on single line */
[data-bind="location"] {
    white-space: nowrap;
}

/* ─── Info Card — Desktop: side-by-side, single-line values ─── */
[data-bind="info-location"],
[data-bind="info-education"],
[data-bind="info-tagline"],
[data-bind="info-email"] {
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

/* ─── Mobile Responsive ─── */
@media (max-width: 768px) {
    /* Hero title — allow wrapping on mobile */
    #typed-title {
        white-space: normal;
        overflow: visible;
        font-size: clamp(2rem, 10vw, 3.5rem);
        line-height: 1.15;
    }

    /* Info card rows: stack vertically on mobile */
    .tilt-3d.glass-card .flex.justify-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.15rem;
    }

    /* Value fields: full width, left-aligned, single line on mobile */
    [data-bind="info-location"],
    [data-bind="info-education"],
    [data-bind="info-tagline"],
    [data-bind="info-email"] {
        text-align: left;
        white-space: nowrap;
        overflow: visible;
        text-overflow: unset;
        width: 100%;
        font-size: 0.9rem;
    }
}