/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #090d16;
}

::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* Glassmorphism helpers */
.glass-panel {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Vibrant portfolio palette */
body.bg-slate-950 {
    background: radial-gradient(ellipse at 0% 35%, rgba(79, 70, 229, .12), transparent 45%), #080e24;
}
.portfolio-hero {
    background: radial-gradient(ellipse at 85% 20%, rgba(139, 92, 246, .28), transparent 50%),
                radial-gradient(ellipse at 5% 80%, rgba(6, 182, 212, .20), transparent 55%), #0b1430;
    border-bottom-color: rgba(56, 189, 248, .25);
}
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 4rem; align-items: center; }
.hero-copy { min-width: 0; }
.hero-copy > .flex { justify-content: flex-start; }
.hero-copy h1 { background: linear-gradient(110deg, #fff 10%, #67e8f9 55%, #c4b5fd); background-clip: text; color: transparent; }
.portrait-frame {
    position: relative; margin: 0 0 1.5rem; padding: 3px; border-radius: 1.75rem;
    background: linear-gradient(145deg, #22d3ee, #818cf8 50%, #e879f9);
    box-shadow: 0 20px 65px rgba(99, 102, 241, .28);
}
.portrait-placeholder, .portrait-image { width: 100%; aspect-ratio: 4 / 5; border-radius: calc(1.75rem - 3px); }
.portrait-image { display: block; height: auto; object-fit: cover; object-position: center top; }
.portrait-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
    background: radial-gradient(circle at 50% 30%, #283d75, #121d43 65%); text-align: center;
}
.portrait-monogram {
    display: grid; place-items: center; width: 7rem; height: 7rem; border-radius: 50%;
    background: linear-gradient(135deg, rgba(34, 211, 238, .20), rgba(192, 132, 252, .24));
    border: 1px solid #818cf8; color: #a5f3fc; font-size: 2.5rem; font-weight: 800;
}
.portrait-label { color: #e0e7ff; font-weight: 600; margin-top: .7rem; }
.portrait-caption { color: #a5b4cf; font-size: .8rem; }
.portrait-badge { position: absolute; bottom: -1.5rem; left: 1rem; right: 1rem; padding: 1rem; background: #17244a; border: 1px solid #6574c4; border-radius: 1rem; text-align: center; color: #f1f5ff; font-weight: 700; box-shadow: 0 8px 24px #080e2466; }
.portrait-badge span { display: block; color: #67e8f9; font-size: .75rem; font-weight: 400; margin-top: .25rem; }
main section[id] { scroll-margin-top: 6rem; }
main section[id] > h2::before { content: ''; display: inline-block; width: .3rem; height: 1.6rem; margin-right: .8rem; border-radius: 1rem; background: linear-gradient(#22d3ee, #a78bfa); vertical-align: middle; }
main article { background: linear-gradient(130deg, #142344, #151b36); border-color: #334979; box-shadow: 0 8px 28px #02061733; }
main article:nth-child(even) { border-color: #51457c; }
main .text-slate-400 { color: #b0bfd6; }
main .text-teal-300, main .text-teal-400 { color: #67e8f9; }
main a.bg-teal-500 { background: linear-gradient(110deg, #22d3ee, #818cf8); color: #09122c; box-shadow: 0 6px 24px #22d3ee25; }
main a.bg-teal-500:hover { background: linear-gradient(110deg, #67e8f9, #a5b4fc); }
a:focus-visible, button:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 4px; }
@media (max-width: 767px) {
    .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
    .portrait-frame { width: min(100%, 300px); justify-self: center; }
}

/* Page entrance: short, staggered reveals with no loading overlay. */
@keyframes portfolio-enter {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
    .site-ready > header { animation: portfolio-enter .55s ease-out both; }
    .site-ready main { animation: portfolio-enter 1s ease-out .08s both; }
    .site-ready .hero-copy > * { animation: portfolio-enter 1s cubic-bezier(.22, 1, .36, 1) both; }
    .site-ready .hero-copy > :nth-child(1) { animation-delay: .12s; }
    .site-ready .hero-copy > :nth-child(2) { animation-delay: .20s; }
    .site-ready .hero-copy > :nth-child(3) { animation-delay: .28s; }
    .site-ready .hero-copy > :nth-child(4) { animation-delay: .36s; }
    .site-ready .hero-copy > :nth-child(5) { animation-delay: .44s; }
    .site-ready .portrait-frame { animation: portfolio-enter 1.2s cubic-bezier(.22, 1, .36, 1) .24s both; }
}

/* Button links and native buttons share a restrained neon highlight. */
:where(button, a.rounded-xl, a.rounded-lg, a.rounded-md) {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease,
                background-color .2s ease, color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
    :where(button, a.rounded-xl, a.rounded-lg, a.rounded-md):not(:disabled):hover {
        transform: translateY(-2px);
        border-color: #67e8f9;
        box-shadow: 0 0 0 1px rgba(103, 232, 249, .65),
                    0 0 18px rgba(34, 211, 238, .28),
                    0 8px 24px rgba(139, 92, 246, .18);
    }
}
:where(button, a.rounded-xl, a.rounded-lg, a.rounded-md):focus-visible {
    box-shadow: 0 0 18px rgba(34, 211, 238, .3);
}
:where(button, a.rounded-xl, a.rounded-lg, a.rounded-md):not(:disabled):active {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    :where(button, a.rounded-xl, a.rounded-lg, a.rounded-md) { transition: none; }
    :where(button, a.rounded-xl, a.rounded-lg, a.rounded-md):hover,
    :where(button, a.rounded-xl, a.rounded-lg, a.rounded-md):active { transform: none; }
}

/* Keep primary-button glow stronger than the base gradient shadow. */
@media (hover: hover) and (pointer: fine) {
    main a.bg-teal-500:hover {
        box-shadow: 0 0 0 1px #67e8f9, 0 0 24px #22d3ee66, 0 8px 30px #8b5cf644;
        transform: translateY(-2px);
    }
}
@media (prefers-reduced-motion: reduce) {
    main a.bg-teal-500:hover { transform: none; }
}

/* Shared shell: personal mark, navigation capsule, and a welcoming footer. */
.site-header::before, .site-footer::before {
    content: ''; display: block; height: 2px;
    background: linear-gradient(90deg, transparent, #22d3ee, #a78bfa, #e879f9, transparent);
}
.brand-monogram {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 14px; font-size: 1.1rem; font-weight: 800;
    color: #e0faff; background: linear-gradient(145deg, #164e63, #312e81);
    border: 1px solid #67e8f966; box-shadow: 0 0 20px #22d3ee18;
}
.brand-monogram span { color: #c4b5fd; }
.desktop-nav { padding: 5px; background: #17213b99; border: 1px solid #394b6c99; border-radius: 16px; }
.nav-link { position: relative; padding: 9px 12px; border-radius: 10px; }
.nav-link:hover, .nav-link[aria-current="page"] { background: #22d3ee12; color: #a5f3fc; }
.nav-link[aria-current="page"]::after { content: ''; position: absolute; bottom: 3px; left: 40%; right: 40%; height: 2px; background: #67e8f9; border-radius: 3px; box-shadow: 0 0 8px #22d3ee; }
.linkedin-button { background: linear-gradient(120deg, #164e63, #312e81); border-color: #818cf866; min-width: 112px; }
#mobile-menu { border-radius: 0 0 20px 20px; }
#mobile-menu a { padding-left: 1rem; border-radius: 10px; }
#mobile-menu a:hover { background: #22d3ee12; }
.site-footer { background: radial-gradient(ellipse at 80% 0%, #5b21b629, transparent 65%), #0d162d; }
.footer-invitation { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 2.5rem; }
.footer-contact { flex-shrink: 0; color: #a5f3fc; border: 1px solid #22d3ee66; background: #164e6333; }
@media (max-width: 639px) {
    .footer-invitation { flex-direction: column; align-items: flex-start; }
}