@font-face {
    font-family: 'Syne';
    src: url('assets/fonts/Syne-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syne';
    src: url('assets/fonts/Syne-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/Satoshi-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Satoshi', sans-serif;
    background: #ffffff;
    overflow-x: hidden;
    cursor: default;
}

/* Loading Screen - Inverted Hyperspace */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.loading-screen canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.loading-screen.fade-out {
    animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        pointer-events: none;
    }
}

/* Main Container - Full Page Scroll Snap */
.main-container {
    position: relative;
    z-index: 2;
    height: 100vh;
    overflow-y: scroll;
    /* Note: scroll-behavior: smooth removed - it conflicts with scroll-snap causing jitter */
    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media (min-width: 769px) {
    .main-container {
        scroll-snap-type: y mandatory;
    }
}

.main-container::-webkit-scrollbar {
    display: none;
}

/* OCR A font removed */

/* Hero Section */
.hero {
    height: 100vh;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    pointer-events: none;
    /* Allow interaction with canvas below */
    perspective: 1000px;
}

@media (min-width: 769px) {
    .hero {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

.hero-content {
    text-align: center;
    pointer-events: auto;
    /* Re-enable pointer events for content */
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
    transition: filter 0.1s linear;
    /* Smooth blur transition */
}

.hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 6.5vw, 5.5rem);
    font-weight: 800;
    /* Syne Bold */
    line-height: 1.1;
    word-spacing: 0.2em;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
    opacity: 0;
    /* Hidden initially for scramble animation */
}

.hero .title {
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(1rem, 2vw, 1.7rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    color: #666;
    opacity: 0.9;
    /* Hidden initially for scramble animation */
    transform-style: preserve-3d;
}

/* Scroll Down Button - Apple-inspired design */
.scroll-button {
    margin-top: 80px;
    padding: 12px 30px;
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    color: #333;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    opacity: 0;
    z-index: 10;
    display: inline-block;
}

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

.scroll-button:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.18);
}

/* About Section - NEW INTERACTIVE VERSION */
.about {
    min-height: 100vh;
    padding: 90px 20px 25px 20px;
    background: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: hidden;
}

@media (min-width: 769px) {
    .about {
        height: 100vh;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

.about-container {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
}

.about h2 {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 700;
    /* Syne Bold */
    text-align: center;
    margin-bottom: 45px;
    color: #000000;
    letter-spacing: -0.02em;
    font-family: 'Syne', sans-serif;
    /* Changed to Syne */
    position: relative;
}

/* Interactive Bio Section */
.bio-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 100px;
}

.bio-text {
    position: relative;
    text-align: center;
}

.bio-paragraph {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
    font-family: 'Satoshi', sans-serif;
    /* Changed to Satoshi */
}

.bio-paragraph:nth-child(2) {
    animation-delay: 0.2s;
}

.bio-paragraph:nth-child(3) {
    animation-delay: 0.4s;
}

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

/* Interactive Keyword Highlights */
/* Interactive Keyword Highlights - Modified: No Hover Underline */
.highlight-word {
    font-weight: 700;
    /* Keeping it bold as requested */
    color: #000;
    cursor: default;
    /* Changed cursor since interaction is removed */
}

/* Removed ::after and :hover effects */

/* Education Section */
.education-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    margin-top: 15px;
}

.education-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-radius: 14px;
    border: 1px solid #e5e5e5;
    background: #fafafa;
    transition: all 0.3s ease;
}

.education-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border-color: #ccc;
}

.education-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.education-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.education-degree {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.01em;
}

.education-school {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.95rem;
    color: #555;
    font-weight: 500;
}

.education-dates {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.85rem;
    color: #888;
    font-weight: 400;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.education-current {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1464ff;
    background: rgba(20, 100, 255, 0.08);
    padding: 3px 10px;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .education-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .education-card {
        padding: 20px;
    }
}

/* Projects Section - Modern Art Gallery */
.projects {
    min-height: 100vh;
    padding: 0;
    background: #ffffff;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

@media (min-width: 769px) {
    .projects {
        height: 100vh;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

/* Projects heading - styled like About Me */
/* Portfolio Signpost (Bottom of About Section) */
.portfolio-signpost-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

/* Override .about h2 margin for this specific instance */
.portfolio-signpost-container h2 {
    margin-bottom: 0;
}

.scroll-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    animation: bounceSignpost 2s infinite;
}

@keyframes bounceSignpost {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* View Controls - Hidden (snap view is default) */
.view-controls {
    display: none;
}

.view-btn {
    background: transparent;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    color: #999;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-btn:hover {
    color: #666;
    border-color: #ccc;
    background: #f8f8f8;
}

.view-btn.active {
    color: #000;
    border-color: #000;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Gallery - Base styling (scroll-snap-view class adds snap behavior) */
.gallery {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 45px;
    position: relative;
    z-index: 2;
    grid-auto-rows: 1fr;
    transition: all 0.3s ease;
}

.gallery.list-view {
    grid-template-columns: 1fr;
    max-width: 1000px;
    /* Limit width in list view for readability */
    gap: 125px;
}

/* In List View: Hide image, show video */
.gallery.list-view .project-image {
    display: none;
}

.gallery.list-view .project-video {
    opacity: 1;
}

/* Hide controls on mobile */
@media (max-width: 768px) {
    .view-controls {
        display: none;
    }
}

/* SPOTLIGHT EFFECT - Consolidated with main hover rule below */

.gallery-item {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    animation: gentleCardPulse 4s infinite ease-in-out;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gallery-item:nth-child(1) {
    animation-delay: 0s;
}

.gallery-item:nth-child(2) {
    animation-delay: 0.5s;
}

.gallery-item:nth-child(3) {
    animation-delay: 1s;
}

.gallery-item:nth-child(4) {
    animation-delay: 1.5s;
}

.gallery-item:nth-child(5) {
    animation-delay: 2s;
}

.gallery-item:nth-child(6) {
    animation-delay: 2.5s;
}

@keyframes gentleCardPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.015);
    }
}

.gallery-item::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from var(--angle),
            transparent 0deg,
            transparent 70deg,
            rgba(100, 180, 255, 0.2) 80deg,
            rgba(80, 160, 255, 0.4) 85deg,
            rgba(60, 140, 255, 0.6) 90deg,
            rgba(40, 120, 255, 0.9) 95deg,
            rgba(20, 100, 255, 1) 100deg,
            rgba(40, 120, 255, 0.9) 105deg,
            rgba(60, 140, 255, 0.6) 110deg,
            rgba(80, 160, 255, 0.4) 115deg,
            rgba(100, 180, 255, 0.2) 120deg,
            transparent 130deg,
            transparent 360deg);
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: borderRotate 3s linear infinite paused;
    pointer-events: none;
    filter: blur(0.5px);
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes borderRotate {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #ffffff;
    border-radius: 10px;
    z-index: 0;
    pointer-events: none;
}

.project-frame,
.project-info {
    position: relative;
    z-index: 1;
}

.gallery-item:hover::before,
.gallery-item.in-view::before {
    opacity: 1;
    animation-play-state: running;
}

@media (max-width: 768px),
(hover: none) {


    .gallery-item.in-view {
        transform: translateY(-6px) scale(1.02);
        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.1),
            0 10px 20px rgba(0, 0, 0, 0.08),
            0 0 30px rgba(20, 100, 255, 0.2);
        border-color: transparent;
        animation-play-state: paused;
    }

    .gallery-item.in-view .project-placeholder {
        transform: scale(1.1);
        color: #d0d0d0;
    }

    .gallery-item.in-view .project-info {
        background: #fafafa;
    }

    .gallery-item.in-view .project-description {
        color: #444;
    }
}

.gallery-item:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.08),
        0 0 30px rgba(20, 100, 255, 0.2);
    border-color: transparent;
    animation-play-state: paused;
}

.gallery-item.active-focus {
    transform: translateY(-6px) scale(1.08);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.12),
        0 10px 20px rgba(0, 0, 0, 0.1),
        0 0 30px rgba(20, 100, 255, 0.25);
    border-color: transparent;
    z-index: 5;
}

.project-frame {
    width: 100%;
    /* height: 300px; - Removed fixed height */
    aspect-ratio: 1512 / 775;
    /* Matches 1512x775 video ratio */
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    border-radius: 11px 11px 0 0;
    flex-shrink: 0;
}

.project-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.03) 100%);
}

/* Project Media Container */
.project-media {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Project Image */
.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
}

.project-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show video on hover */
.gallery-item:hover .project-video {
    opacity: 1;
}

.gallery-item:hover .project-image {
    opacity: 0;
}

/* Mobile: Show video when in view */
@media (max-width: 768px),
(hover: none) {
    .gallery-item.in-view .project-video {
        opacity: 1;
    }

    .gallery-item.in-view .project-image {
        opacity: 0;
    }
}

.project-placeholder {
    font-size: 4rem;
    color: #e0e0e0;
    font-weight: 100;
    letter-spacing: 0.2em;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.gallery-item:hover .project-placeholder {
    transform: scale(1.1);
    color: #d0d0d0;
}

.project-info {
    padding: 15px 15px 20px;
    /* Adjusted: 20px top, 15px horizontal, 30px bottom */
    border-top: 1px solid #f0f0f0;
    border-radius: 0 0 11px 11px;
    transition: all 0.3s ease;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.gallery-item:hover .project-info {
    background: #fafafa;
}

.project-title {
    font-size: 1.3rem;
    color: #000;
    font-size: 1.2rem;
    color: #000;
    margin-bottom: 12px;
    font-weight: 700;
    /* Syne Bold (was 600 SemiBold) */
    letter-spacing: -0.01em;
    font-family: 'Syne', sans-serif;
    transition: all 0.3s ease;
}

/* Link wrapping the image frame */
.project-wrap-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.project-wrap-link:hover+.project-info .project-link {
    color: #000;
}

.project-link {
    display: inline-block;
    width: fit-content;
    color: #1464ff;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'Satoshi', sans-serif;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 5px;
}

.project-link:hover {
    color: #000;
    text-decoration: underline;
}

.gallery-item:hover .project-description {
    color: #444;
}

.project-disclaimer {
    text-align: center;
    margin-top: 40px;
    font-size: 0.85rem;
    color: #999;
    font-style: italic;
}

/* Contact Section */
.contact {
    min-height: auto;
    /* Reduced from 100vh for mobile */
    padding: 80px 20px;
    background: #fafafa;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: hidden;
}

@media (min-width: 769px) {
    .contact {
        height: 100vh;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

.contact::before,
.contact::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: float 20s infinite ease-in-out;
    pointer-events: none;
}

.contact::before {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(130, 140, 255, 0.4) 0%, transparent 70%);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.contact::after {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 130, 170, 0.3) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation-delay: 10s;
    animation-direction: reverse;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    25% {
        transform: translate(100px, -30px) scale(1.1) rotate(90deg);
    }

    50% {
        transform: translate(-20px, 60px) scale(0.95) rotate(180deg);
    }

    75% {
        transform: translate(50px, 30px) scale(1.05) rotate(270deg);
    }
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: -100%;
    width: 300%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.03),
            transparent);
    animation: shimmerOverlay 8s infinite linear;
    pointer-events: none;
}

@keyframes shimmerOverlay {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(33.33%);
    }
}

.contact h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    /* Syne Bold */
    text-align: center;
    margin-bottom: 50px;
    color: #000000;
    letter-spacing: -0.02em;
    font-family: 'Syne', sans-serif;
    position: relative;
    z-index: 2;
    animation: fadeInUp 0.8s ease-out;
}

.contact-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.email-link {
    display: inline-block;
    font-size: 1.4rem;
    color: #000;
    text-decoration: none;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    margin-bottom: 40px;
    padding: 15px 35px;
    border: 2px solid #000;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: gentlePulse 4s infinite ease-in-out, fadeInUp 0.8s ease-out 0.2s both;
}

@keyframes gentlePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

.email-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    transform: translate(-50%, -50%);
    /* Exit transition: Fade out opacity over 0.3s, then reset width/height after opacity is done found */
    opacity: 0;
    transition: opacity 0.3s ease-out, width 0s 0.3s, height 0s 0.3s;
}

.email-link:hover::before {
    width: 300px;
    height: 300px;
    opacity: 1;
    /* Enter transition: Grow width/height immediately */
    transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0s;
}

.email-link:hover {
    background: #000;
    color: #fff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.rewind-btn {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    /* Removed backdrop-filter to prevent ghosting artifacts */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #333;
    z-index: 10;
    margin: 0;
    padding: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.rewind-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.rewind-btn:hover {
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    opacity: 1;
}

.rewind-btn:active {
    transform: scale(0.95);
}

.rewind-btn svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.5s ease;
}

.rewind-btn:hover svg {
    transform: rotate(360deg);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

.social-links {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    color: #333;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    animation: socialFloat 6s infinite ease-in-out;
}

.social-link:nth-child(1) {
    animation-delay: 0s;
}

.social-link:nth-child(2) {
    animation-delay: 0.5s;
}

@keyframes socialFloat {

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

    50% {
        transform: translateY(-5px);
    }
}

.social-link:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-color: #000;
    color: #000;
    background: linear-gradient(145deg, #ffffff, #f5f5f5);
}

.social-link svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: particleFloat 15s infinite linear;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) translateX(100px) scale(1.5);
        opacity: 0;
    }
}

/* =============================================
/* =============================================
   SCROLL-SNAP PORTFOLIO SYSTEM (DESKTOP ONLY)
   ============================================= */

@media (min-width: 769px) {

    /* 
       Scroll-Snap Wrapper
       - WIDTH: 100% to catch mouse events everywhere
       - PADDING: Added to prevent shadow clipping
       - GRID: Layout mechanism
    */
    .gallery.scroll-snap-view {
        /* Full screen width for scroll interaction */
        max-width: 100%;
        width: 100%;

        /* Force single column */
        grid-template-columns: 100%;

        /* Scroll properties */
        height: 100vh;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;

        /* Layout */
        display: grid;
        grid-auto-rows: 100vh;
        align-items: center;
        justify-items: center;
        /* Centers horizontally */

        /* Remove gap */
        gap: 0;

        /* Hide scrollbar */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Hide webkit scrollbar */
    .gallery.scroll-snap-view::-webkit-scrollbar {
        display: none;
    }

    /* 
       The Container Item
       - Width: Restored to 1000px to match list-view exactly
       - Margin: Added for extra shadow safety 
    */
    .gallery.scroll-snap-view .gallery-item {
        scroll-snap-align: center;
        scroll-snap-stop: always;

        /* Constrain the card width */
        width: 100%;
        max-width: 1000px;
        /* Restored to match list-view */

        /* Safe margin for shadows */
        margin: 0 40px;

        /* Reset height constraints */
        max-height: 80vh;
        /* Safety cap */

        /* Ensure content displays */
        display: block;
        /* Revert to block to ensure content flows normally */
    }

    /* 
       Project Frame
       - Revert to simple sizing
       - Aspect ratio handles the height
    */
    .gallery.scroll-snap-view .project-frame {
        width: 100%;
        height: auto;
        aspect-ratio: 1512 / 775;
    }

    /* Ensure info matches frame width */
    .gallery.scroll-snap-view .project-info {
        width: 100%;
    }

    /* Ensure video is visible */
    .gallery.scroll-snap-view .project-image {
        display: none;
    }

    .gallery.scroll-snap-view .project-video {
        opacity: 1;
    }

    /* Navigation Arrows */
    /* Navigation Arrows */
    .scroll-snap-nav {
        position: fixed;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 1000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .scroll-snap-nav.visible {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Default state for mobile (hidden) - specificity fix */
@media (max-width: 768px) {
    .scroll-snap-nav {
        display: none;
    }
}

.scroll-snap-nav button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #333;
}

.scroll-snap-nav button:hover {
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.scroll-snap-nav button:active {
    transform: scale(0.95);
}

.scroll-snap-nav button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.scroll-snap-nav button:disabled:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.scroll-snap-nav button svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Project counter indicator */
.scroll-snap-counter {
    position: fixed;
    right: 30px;
    bottom: 30px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    color: #666;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.scroll-snap-counter.visible {
    opacity: 1;
}

/* Add scroll-snap toggle button to view controls */
.view-btn.snap-view svg {
    width: 24px;
    height: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .scroll-snap-nav {
        right: 15px;
        gap: 10px;
    }

    .scroll-snap-nav button {
        width: 40px;
        height: 40px;
    }

    .scroll-snap-nav button svg {
        width: 20px;
        height: 20px;
    }



    .scroll-snap-counter {
        display: none;
    }
}

/* Responsive */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
    }

    .bio-section {
        gap: 0px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .skill-category.active {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery,
    .gallery.list-view {
        grid-template-columns: 1fr;
        gap: 90px;
        padding: 25px 15px 25px;
    }

    /* Mobile subtle scale animation */
    .gallery-item {
        transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
    }

    .gallery-item.mobile-scale-active {
        transform: scale(1.05);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    /* Smaller View Now button on mobile */
    .scroll-button {
        padding: 14px 35px;
        font-size: 0.75rem;
        margin-top: 60px;
    }

    /* Left-align About Me section */
    .about h2 {
        text-align: left;
        font-size: clamp(2.5rem, 5vw, 4rem);
    }

    .bio-text {
        text-align: left;
    }

    .bio-paragraph {
        font-size: 1.1rem;
    }

    .project-title {
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .skill-category.active {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Modest increase for small mobile */
    .scroll-button {
        padding: 13px 38px;
        font-size: 0.80rem;
    }
}