/* =========================================
   RESET & VARIABLES
   ========================================= */
   :root {
    /* Colors */
    --bg-fallback: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --accent-color: rgba(255, 255, 255, 0.2);
    
    /* Glassmorphism Configuration */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    --glass-blur: 12px;

    /* Spacing & Sizes */
    --container-max-width: 480px; /* Mobile-first optimization */
    --profile-size: 96px;
    --border-radius: 16px;
    --btn-height: 56px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    background: var(--bg-fallback); /* Fallback */
    position: relative;
}

/* =========================================
   BACKGROUND & FLUID EFFECTS
   ========================================= */
.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity 0.5s ease;
}

.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Darkens bg for readability */
    z-index: -2;
    backdrop-filter: blur(20px); /* Heavy Blur on BG for depth */
}

/* Animated Liquid Shapes */
.liquid-shape {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.6;
    animation: drift 10s infinite alternate ease-in-out;
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: rgba(255, 0, 150, 0.4);
    top: -50px;
    left: -50px;
    animation-delay: 0s;
}

.shape-2 {
    width: 400px;
    height: 400px;
    background: rgba(0, 204, 255, 0.4);
    bottom: -100px;
    right: -100px;
    animation-delay: -5s;
}

@keyframes drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 50px) scale(1.1); }
}

/* =========================================
   MAIN GLASS CONTAINER
   ========================================= */
.glass-container {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 24px;
    padding: 3rem 2rem; /* Comfortable padding */
    width: 90%;
    max-width: var(--container-max-width);
    text-align: center;
    position: relative;
    margin: 20px 0;
}

/* =========================================
   PROFILE SECTION
   ========================================= */
.profile-section {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-image-wrapper {
    width: var(--profile-size);
    height: var(--profile-size);
    border-radius: 50%;
    padding: 4px; /* Border space */
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.profile-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.profile-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #ccc, #999);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-weight: bold;
    font-size: 1.5rem;
}

.display-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.bio-text {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 90%;
    margin: 0 auto;
}

/* =========================================
   LINKS SECTION
   ========================================= */
.links-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.link-btn {
    display: flex;
    align-items: center;
    justify-content: center; /* Center content optionally, or left align */
    /* Let's go with classic Linktree style: Icon left, Text Center */
    position: relative;
    text-decoration: none;
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.15); /* Slightly more opaque than container */
    padding: 0 20px;
    height: var(--btn-height);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    cursor: pointer;
}

/* Hover Effects */
.link-btn:hover, .link-btn:focus-visible {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    outline: none;
}

.link-btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* Inner content alignment */
.link-content {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2;
}

.link-icon {
    font-size: 1.2rem;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.link-title {
    flex-grow: 1;
    text-align: center;
    font-weight: 500;
    font-size: 1rem;
    /* Adjust text align if icon takes space to maintain visual center? 
       Actually, strict center looks best. Icon is decorative. 
       Let's absolutely position icon if we want perfect center text, 
       but flex flow is usually more robust for long text. 
       We'll stick to flex. */
    margin-right: 24px; /* Balances the icon width on left */
}

/* =========================================
   ANIMATIONS & UTILS
   ========================================= */
.hidden {
    display: none !important;
}

.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.footer {
    margin-top: 2rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Accessibility Focus Ring */
*:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .liquid-shape, .fade-in-up {
        animation: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
    .link-btn {
        transition: none;
        transform: none !important; /* Override hover transform */
    }
}