/** Core theme variables */
:root {
    --color-deep-space:#05060A;
    --color-indigo-core:#10162B;
    --color-violet-soft:#7754FF;
    --color-cyan-mist:#3FD6FF;
    --color-magenta-bloom:#FF4FA3;
    --color-starlight-edge:#E9F7FF;

    --text-primary:#F5F8FD;
    --text-secondary:#C9D4E4;

    --focus-ring:0 0 0 2px #E9F7FF,0 0 0 4px rgba(119,84,255,0.55),0 0 0 6px rgba(63,214,255,0.4);
    --transition-fast:160ms cubic-bezier(.4,.2,.2,1);
    --easing-smooth:cubic-bezier(.4,.2,.2,1);

    --grid-line:rgba(120,160,255,0.08);
    --grid-glow:rgba(120,160,255,0.22);
    --font-sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Ubuntu','Cantarell',sans-serif;
}

* { box-sizing:border-box; -webkit-font-smoothing:antialiased; }

html,body {
    height:100%;
    margin:0;
    overflow: hidden; /* Disable all scrolling */
}

body {
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Ubuntu','Cantarell',sans-serif;
    background:
            radial-gradient(circle at 35% 20%,#141b2a 0%,#0a0e15 55%,#05060A 100%);
    color:var(--text-primary);
    overflow:hidden; /* Disable scrolling */
    height:100vh; /* Ensure full viewport height */
    position:relative;
}

body::after {
    content:"";
    position:fixed;
    inset:0;
    background:
            repeating-linear-gradient(60deg,rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, transparent 2px, transparent 180px),
            repeating-linear-gradient(-60deg,rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 2px, transparent 2px, transparent 160px);
    mix-blend-mode:overlay;
    pointer-events:none;
    opacity:.22;
    mask:radial-gradient(circle at 50% 50%,#fff 0 35%,transparent 70%);
}

.main {
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh; /* Use viewport height instead of min-height */
    padding:clamp(1.2rem,2vw,2.4rem);
    overflow:hidden; /* Prevent any overflow */
}

/* New cosmic grid / wireframe layer */
.cosmic-grid {
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/100% 42px,
        linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/42px 100%,
        radial-gradient(circle at 70% 30%,rgba(119,84,255,0.12),transparent 60%),
        radial-gradient(circle at 25% 75%,rgba(63,214,255,0.12),transparent 65%);
    mix-blend-mode:plus-lighter;
    mask:linear-gradient(to top,transparent 10%,#000 40%,#000 75%,transparent 95%);
    animation:gridPan 38s linear infinite;
    opacity:.55;
    transform:perspective(900px) rotateX(55deg) translateY(-12%);
    filter:drop-shadow(0 0 12px var(--grid-glow));
}

@keyframes gridPan {
    0% { background-position:0 0,0 0,0 0,0 0; }
    100% { background-position:0 420px,420px 0,0 0,0 0; }
}

.ambient-nebula {
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
            radial-gradient(circle at 20% 75%,rgba(119,84,255,0.12),transparent 55%),
            radial-gradient(circle at 82% 25%,rgba(63,214,255,0.10),transparent 60%),
            radial-gradient(circle at 60% 82%,rgba(255,79,163,0.10),transparent 65%);
    mix-blend-mode:screen;
    filter:blur(44px) saturate(135%);
    opacity:.65;
    animation:nebulaDrift 60s linear infinite;
}

@keyframes nebulaDrift {
    0% { transform:translate3d(0,0,0) scale(1);}
    50% { transform:translate3d(2%, -2%,0) scale(1.05);}
    100% { transform:translate3d(0,0,0) scale(1);}
}

/* Profile Card */
.profile-card {
    position:relative;
    width:min(560px,100%);
    padding:2.75rem clamp(2rem,5vw,3rem) 2.9rem;
    border-radius:32px;
    background:rgba(10,12,18,0.55);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
    overflow:hidden;
    box-shadow:
            0 4px 18px -4px rgba(0,0,0,0.6),
            0 0 0 1px rgba(255,255,255,0.03),
            0 0 42px -10px rgba(119,84,255,0.35),
            0 0 60px -18px rgba(63,214,255,0.25);
    isolation:isolate;
    animation:cardEnter .9s var(--easing-smooth) forwards;
    opacity:0;
    transform:translateY(18px) scale(.985);
}

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

.profile-card::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
            repeating-conic-gradient(from 0deg, rgba(255,255,255,0.07) 0deg 3deg, transparent 3deg 10deg);
    mix-blend-mode:overlay;
    opacity:.04;
    filter:blur(1px);
}

/* Transparent variant */
.profile-card--glassless { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; padding:0; border-radius:0; width:100%; max-width:none; }
.profile-card--glassless .card-frame, .profile-card--glassless::after { display:none !important; }
.profile-card--glassless .profile-header { margin-bottom:1.8rem; }
.profile-card--glassless .links { margin-top:1.5rem; }

/* Frame layering */
.card-frame { position:absolute; inset:0; pointer-events:none; border-radius:inherit; }
.card-frame::before,
.card-frame::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }

.card-frame::before {
    padding:1px;
    background:
            conic-gradient(
                    from 0deg,
                    rgba(63,214,255,0.55),
                    rgba(119,84,255,0.55),
                    rgba(255,79,163,0.55),
                    rgba(63,214,255,0.55)
            );
    -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    animation:frameRotate 24s linear infinite;
    opacity:.65;
}

.card-frame::after {
    inset:-6px;
    background:
            radial-gradient(circle at 30% 20%,rgba(63,214,255,0.35),transparent 60%),
            radial-gradient(circle at 70% 70%,rgba(255,79,163,0.30),transparent 65%),
            radial-gradient(circle at 60% 35%,rgba(119,84,255,0.35),transparent 55%);
    filter:blur(38px);
    opacity:.60;
    mix-blend-mode:screen;
    animation:glowPulse 12s ease-in-out infinite;
}

@keyframes frameRotate { to { transform:rotate(360deg); } }
@keyframes glowPulse { 0%,100% { opacity:.55; } 50% { opacity:.75; } }

/* Header */
.profile-header { text-align:center; margin-bottom:2rem; }

.avatar-wrapper { width:124px; height:124px; margin:0 auto 1.25rem; position:relative; border-radius:50%; display:grid; place-items:center; overflow:visible; }
.avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; position:relative; z-index:2; box-shadow:0 4px 18px -4px rgba(0,0,0,0.6); }
.avatar-wrapper::before,
.avatar-wrapper::after { content:""; position:absolute; inset:-6px; border-radius:50%; background:conic-gradient(from 0deg, rgba(63,214,255,.55), rgba(119,84,255,.45), rgba(255,79,163,.55), rgba(63,214,255,.55)); filter:blur(8px); opacity:.55; animation:haloSpin 20s linear infinite; z-index:1; mix-blend-mode:screen; }
.avatar-wrapper::after { inset:-12px; filter:blur(20px) saturate(140%); opacity:.35; animation-direction:reverse; }
@keyframes haloSpin { to { transform:rotate(360deg); } }

.name {
    font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
    font-size:clamp(2.05rem,3.4vw,2.75rem);
    background:linear-gradient(90deg,#ffffff 0%,#c6e9ff 40%,#ffe1f0 65%,#ffffff 90%);
    -webkit-background-clip:text;
    color:transparent;
    margin:0 0 .5rem;
    letter-spacing:.5px;
}

.tagline { margin:0; font-size:clamp(.95rem,1.2vw,1.05rem); line-height:1.5; color:var(--text-secondary); max-width:34ch; margin-inline:auto; }

/* CTA */
.links { margin:2.2rem 0 2.4rem; display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

.cta-portfolio {
    --cta-h:56px;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    min-width:190px;
    height:var(--cta-h);
    padding:0 2.2rem;
    font-weight:600;
    font-size:1.05rem;
    letter-spacing:.5px;
    color:#f2f8ff;
    text-decoration:none;
    font-family:var(--font-sans, 'Inter', system-ui, sans-serif);
    background:linear-gradient(135deg,#0A0D14 0%,#141C2C 100%);
    border-radius:16px;
    overflow:hidden;
    isolation:isolate;
    line-height:1;
    transition:
            background var(--transition-fast),
            color var(--transition-fast),
            transform 260ms var(--easing-smooth);
    will-change:transform;
}

.cta-portfolio .cta-bg-stars,
.cta-portfolio .cta-aurora,
.cta-portfolio .cta-outline { position:absolute; inset:0; pointer-events:none; }

.cta-portfolio .cta-bg-stars {
    background:
            radial-gradient(circle at 10% 15%,rgba(255,255,255,0.9) 0 1px,transparent 1px),
            radial-gradient(circle at 50% 45%,rgba(255,255,255,0.85) 0 1px,transparent 1px),
            radial-gradient(circle at 75% 75%,rgba(255,255,255,0.75) 0 1px,transparent 1px);
    background-size:40px 40px,60px 60px,80px 80px;
    mix-blend-mode:screen;
    opacity:.4;
    animation:starDrift 22s linear infinite;
}
@keyframes starDrift { 0% { transform:translate3d(0,0,0); } 50% { transform:translate3d(-12px,-8px,0); } 100% { transform:translate3d(0,0,0); } }

.cta-portfolio .cta-aurora {
    background:conic-gradient(from 180deg, rgba(63,214,255,.15), rgba(119,84,255,.18), rgba(255,79,163,.16), rgba(63,214,255,.15));
    mix-blend-mode:screen;
    filter:blur(24px) saturate(140%);
    opacity:.55;
    transform:scale(1.25);
    /* Removed spinning per request */
    animation:none;
}

.cta-portfolio .cta-outline {
    inset:0;
    background:linear-gradient(120deg,rgba(63,214,255,.8),rgba(119,84,255,.8),rgba(255,79,163,.8));
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
    padding:1px; border-radius:inherit; opacity:.85; filter:saturate(140%);
    /* Removed spinning */
    animation:none;
}

.cta-label { position:relative; z-index:2; }

.cta-portfolio:hover,
.cta-portfolio:focus-visible { transform:translateY(-3px); }
.cta-portfolio:active { transform:translateY(-1px) scale(.985); transition:transform 90ms ease; }
.cta-portfolio:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.cta-portfolio::after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 60% 35%,rgba(255,255,255,0.12),transparent 60%); opacity:0; transition:opacity var(--transition-fast); }
.cta-portfolio:hover::after,
.cta-portfolio:focus-visible::after { opacity:1; }

/* Wireframe variant */
.cta-portfolio--wireframe { background:linear-gradient(135deg,rgba(10,13,20,.3),rgba(20,28,44,.3)); border:1px solid rgba(140,170,220,0.4); box-shadow:0 0 0 1px rgba(160,200,255,0.15),0 2px 10px -2px rgba(0,0,0,0.55); backdrop-filter:blur(10px) saturate(150%); }
.cta-portfolio--wireframe .cta-outline, .cta-portfolio--wireframe .cta-bg-stars, .cta-portfolio--wireframe .cta-aurora { display:none; }
.cta-portfolio--wireframe::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 10px); opacity:.4; mix-blend-mode:overlay; }
.cta-portfolio--wireframe:hover { border-color:rgba(170,210,255,0.75); }

/* Social links */
.socials { display:flex; justify-content:center; gap:1.1rem; flex-wrap:wrap; }
.social-link {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#98aac4;
    background:rgba(255,255,255,0.035);
    backdrop-filter:blur(6px) saturate(140%);
    -webkit-backdrop-filter:blur(6px) saturate(140%);
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:color var(--transition-fast),background var(--transition-fast), transform var(--transition-fast);
    opacity:0;
    transform:translateY(20px);
    animation:socialFadeIn 0.6s ease-out forwards;
    animation-delay:var(--stagger-delay, 0s);
}

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

.social-link svg {
    width:20px;
    height:20px;
}

.social-link::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.4),transparent 70%); opacity:0; transition:opacity var(--transition-fast); }
.social-link:hover, .social-link:focus-visible { color:#fff; background:linear-gradient(145deg,rgba(63,214,255,0.25),rgba(119,84,255,0.25),rgba(255,79,163,0.25)); transform:translateY(-4px); }
.social-link:hover::before, .social-link:focus-visible::before { opacity:.35; }
.social-link:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.social-link:active { transform:translateY(-1px); transition:transform 90ms ease; }

/* Starfield stars (injected) */
.star { position:absolute; background:radial-gradient(circle,#fff 0 34%,rgba(255,255,255,0) 70%); border-radius:50%; opacity:.55; width:2px; height:2px; pointer-events:none; will-change:opacity, transform; }
.star.twinkle { animation:twinkle var(--twinkle-duration,5s) ease-in-out infinite; animation-delay:var(--twinkle-delay,0s); }
@keyframes twinkle { 0%,100% { opacity:.15; transform:scale(.95); } 45% { opacity:.85; transform:scale(1.15); } 55% { opacity:.75; } }

.shooting-star { position:fixed; width:140px; height:2px; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 45%, rgba(200,230,255,.85) 60%, rgba(255,255,255,0) 100%); top:0; left:0; opacity:0; filter:drop-shadow(0 0 6px rgba(255,255,255,.8)) brightness(1.15); pointer-events:none; will-change:transform, opacity; }

/* Geometric shapes layer */
.bg-shapes { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.shape { position:absolute; top:50%; left:50%; translate:-50% -50%; mix-blend-mode:screen; filter:blur(.5px) drop-shadow(0 0 18px rgba(119,84,255,0.25)); opacity:.23; animation:spinShape 48s linear infinite; }
.shape::after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.5),transparent 65%); mix-blend-mode:overlay; opacity:.45; }
.shape-square { --size:620px; width:var(--size); height:var(--size); border:2px solid rgba(119,84,255,0.55); border-radius:42px; animation-duration:80s; }
.shape-triangle { --size:760px; width:var(--size); height:var(--size); clip-path:polygon(50% 0%,100% 90%,0% 90%); border:2px solid rgba(63,214,255,0.45); animation-direction:reverse; animation-duration:95s; }
.shape-hexagon { --size:880px; width:var(--size); height:var(--size); clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); border:2px solid rgba(255,79,163,0.45); animation-duration:110s; }
.shape-square, .shape-triangle, .shape-hexagon { background:linear-gradient(135deg,rgba(119,84,255,0.12),rgba(63,214,255,0.10),rgba(255,79,163,0.12)); backdrop-filter:blur(4px) saturate(140%); }
@keyframes spinShape { to { rotate:360deg; } }

/* Layer ordering adjustments */
.ambient-nebula { z-index:0; }
.cosmic-grid { z-index:0; }
.starfield { position:fixed; inset:0; z-index:1; }
.main { position:relative; z-index:10; }

/* Mobile optimization - disable heavy animations on small screens and mobile devices */
@media (max-width: 768px) {
    /* Disable heavy animations on mobile */
    .cosmic-grid {
        animation: none !important;
        transform: none !important;
        opacity: 0.3;
    }

    .ambient-nebula {
        animation: none !important;
        transform: none !important;
        opacity: 0.4;
    }

    .shape {
        animation: none !important;
        transform: translate(-50%, -50%) !important;
        opacity: 0.15;
    }

    .card-frame::before {
        animation: none !important;
    }

    .card-frame::after {
        animation: none !important;
    }

    .avatar-wrapper::before,
    .avatar-wrapper::after {
        animation: none !important;
    }

    .cta-portfolio .cta-bg-stars {
        animation: none !important;
    }

    .star.twinkle {
        animation: none !important;
    }

    /* Reduce blur effects that are expensive on mobile */
    .ambient-nebula {
        filter: blur(20px) saturate(120%);
    }

    .card-frame::after {
        filter: blur(20px);
    }

    .cta-portfolio .cta-aurora {
        filter: blur(12px) saturate(120%);
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .cosmic-grid,
    .ambient-nebula,
    .shape,
    .card-frame::before,
    .card-frame::after,
    .avatar-wrapper::before,
    .avatar-wrapper::after,
    .cta-portfolio .cta-bg-stars,
    .star.twinkle {
        animation: none !important;
    }
}

/* Utilities & small screens */
@media (max-width:560px) {
    .profile-card { padding:2.2rem 1.7rem 2.4rem; border-radius:28px; }
    .avatar-wrapper { width:108px; height:108px; }
    .links { margin:2rem 0 2.15rem; }
    .cta-portfolio { min-width:170px; height:52px; }
    .social-link { width:36px; height:36px; }
    .social-link svg { width:18px; height:18px; }
}