:root {
    /* -- DREAMY PASTEL PALETTE -- */
    --bg-color: #f8f5fa;
    /* Cool White/Lavender */
    --text-color: #5e505b;
    /* Warm Grey/Brown */
    --accent-color: #ffb7b2;
    /* Soft Peach */

    /* Gradients */
    --bg-gradient: radial-gradient(circle at 50% 0%, #F8F5FA 0%, #e8e5ea 100%);
    /* Cream -> Dusty Rose */
    --text-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #a18cd1 100%);
    /* Peach -> Pink -> Lavender */

    --card-bg: rgba(255, 255, 255, 0.6);
    --card-border: rgba(255, 240, 245, 0.4);
    --card-shadow: 0 8px 32px rgba(255, 180, 190, 0.15);
    /* Warm colored shadow */
    --sidebar-width: 100px;
    --font-main: 'Outfit', sans-serif;

    /* New Pearl Grey Palette */
    --pearl-bg: #ececf0;
    /* Cool Pearl Grey */
    --pearl-text: #2d3436;
    --ribbon-color: #E0BBE4;
    /* Pastel Violet Rose */
}

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

body {
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    background: var(--bg-color);
    background-image: var(--bg-gradient);
    color: var(--text-color);
    overflow-x: hidden;
}

/* --- INTRO WRAPPER (First Page - FIXED) --- */
#intro-container {
    position: fixed;
    /* Fixes content in place */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    /* Below Dark Block */
}

/* Three.js Background Canvas */
#canvas-container {
    position: absolute;
    /* Was fixed, now absolute to move with wrapper */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(135deg, #F8F5FA 0%, #e8e5ea 100%);
}

/* --- ABSOLUTE LAYOUT ELEMENTS (Pinned to Intro Wrapper) --- */

/* Social Sidebar (Bottom Left) */
.fixed-socials {
    position: absolute;
    /* Was fixed, now absolute */
    bottom: 40px;
    left: 40px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 100;
}

.fixed-socials a {
    color: var(--text-color);
    font-size: 1.4rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.fixed-socials a:hover {
    color: var(--accent-color);
    transform: translateX(5px);
}

/* --- NAVIGATION (Minimal Top) --- */
.top-nav {
    position: absolute;
    /* Was fixed, now absolute */
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    pointer-events: auto;
}

.logo {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
}

/* Scroll Indicator (Bottom Center) */
.fixed-scroll {
    position: absolute;
    /* Was fixed, now absolute */
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 100;
}

.fixed-scroll span {
    font-size: 0.9rem;
    text-transform: lowercase;
    opacity: 0.7;
    letter-spacing: 0.05em;
}

.line {
    width: 1px;
    height: 50px;
    background: var(--text-color);
    opacity: 0.5;
}

/* --- TYPOGRAPHY (Studio / Clean) --- */
/* Matches "Aziz Khaldi" Reference */

/* 1. Small Intro Label */
.hero-intro {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 100;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    display: block;
}

/* 2. Main Title (Job) */
h1 {
    font-family: 'Outfit', sans-serif;
    /* Geometric Sans */
    font-size: 7.5rem;
    /* Larger Headline */
    font-weight: 100;
    /* Ultra-Thin */
    line-height: 1.1;
    color: #2d3436;
    /* Dark bold grey */
    margin: 0;
    text-transform: none;
    /* Sentence case like reference */
    letter-spacing: -0.02em;
}

/* No Highlight Special Class for now, simplifying */
.highlight {
    color: inherit;
    font-style: normal;
    font-family: inherit;
    font-weight: inherit;
    background: none;
    -webkit-text-fill-color: initial;
}

/* Nav is Top Right (Layout Standard) -> NOW LEFT */
/* Navigation Links (Top Right) */
.nav-links {
    display: flex;
    flex-direction: row;
    /* Horizontal */
    align-items: center;
    list-style: none;
    /* Remove dots */
    gap: 3rem;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin: 0;
    padding: 0;
}

.nav-links li a {
    text-decoration: none;
    color: var(--text-color);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.nav-links li a:hover {
    opacity: 1;
}

/* Hero Section Alignment */
section#home {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    padding-bottom: 50px;
    /* Offset for visual balance due to heavy title */
}

.hero-content {
    width: 100%;
    z-index: 2;
    position: relative;
    /* Ensure text is above canvas but looks integrated */
}

/* Hide Sidebar styles (Cleanup) */
#sidebar {
    display: none;
}

#content {
    margin: 0;
    width: 100%;
}

/* Links & Buttons */
a,
button {
    cursor: pointer;
    text-decoration: none;
    color: var(--text-color);
}

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    /* Full pill */
    font-weight: 400;
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 15px rgba(255, 180, 190, 0.1);
}

.btn:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(255, 180, 190, 0.3);
    /* Glowing lift */
    letter-spacing: 0.05em;
    /* Subtle expansion */
}

/* Custom Cursor Styles */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: width 0.2s, height 0.2s, background-color 0.2s;
    mix-blend-mode: difference;
}

.custom-cursor.active {
    width: 30px;
    height: 30px;
    background-color: rgba(0, 242, 255, 0.3);
}

/* Scroll Animation Styles */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

    #sidebar {
        width: 100%;
        height: auto;
        position: relative;
        flex-direction: row;
        padding: 1rem 2rem;
        border-right: none;
        border-bottom: 1px solid #1a1a1a;
    }

    #content {
        margin-left: 0;
        width: 100%;
    }

    .nav-links {
        flex-direction: row;
        gap: 1rem;
    }

    .nav-links li a span {
        display: none;
        /* Hide tooltips on mobile */
    }

    .social-links {
        display: none;
        /* Hide social links on mobile for space */
    }

    section#home {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 50px;
    }

    .hero-content {
        margin-bottom: 3rem;
    }

    .hero-visual {
        position: relative;
        width: 100%;
        height: 300px;
        right: auto;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    section#about,
    section#projects,
    section#contact {
        padding: 60px 5%;
    }
}


/* --- MAIN SCROLL FLOW (The part that moves) --- */
#main-scroll-flow {
    position: relative;
    z-index: 50;
    /* Above fixed Dark Block (20) and Intro (1) */
    width: 100%;
    /* No margin top - it flows after the spacer naturally in DOM? 
       No, spacer is empty. We need to push this down so it starts appearing 
       AFTER the dark block animation finishes. 
       The spacer height is 150vh. We want this to overlap slightly or start right after.
    */
    background-color: transparent;
    /* Let sections handle bg */
    overflow: hidden;
    /* For ribbon clipping */
}

/* --- PEARL SECTIONS (Skills & Projects) --- */
.pearl-section {
    background-color: var(--pearl-bg);
    color: var(--pearl-text);
    padding: 150px 5%;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Typography for Light Sections */
.dark-label {
    color: var(--pearl-text);
    opacity: 0.6;
    margin-bottom: 3rem;
    /* Spacing for ribbon breathing */
}

.dark-title {
    font-family: 'Outfit', sans-serif;
    font-size: 5rem;
    font-weight: 100;
    line-height: 0.9;
    color: var(--pearl-text);
    margin-bottom: 4rem;
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    /* Above ribbon */
}

.skill-category h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    font-style: italic;
    margin-bottom: 2rem;
    color: var(--pearl-text);
}

.skill-list {
    list-style: none;
}

.skill-list li {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Projects Gallery */
/* --- PROJECTS GRID (2x2) --- */
.projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    /* Generous spacing */
    margin-top: 4rem;
    position: relative;
    z-index: 10;
}

.project-card-square {
    /* Square aspect ratio trick if needed, or just fixed height */
    position: relative;
    cursor: pointer;
    /* Tailwind concept removed */
}

.p-sq-image {
    width: 100%;
    height: 400px;
    /* Square-ish */
    background-color: #d1d1d6;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease;

    /* Image Placeholders */
    background-size: cover;
    background-position: center;
}

.img-1 {
    background-color: #A3C4BC;
}

.img-2 {
    background-color: #BFD7EA;
}

.img-3 {
    background-color: #E2C2C6;
}

/* Pastel Red/Pink */
.img-4 {
    background-color: #E8D5B5;
}

/* Pastel Orange/Beige */

.project-card-square:hover .p-sq-image {
    transform: scale(0.98) translateY(-5px);
    filter: brightness(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.p-sq-info h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
    color: var(--pearl-text);
}

.p-sq-info p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    opacity: 0.6;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* --- THE RIBBON --- */
.ribbon-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Spans full flow wrapper */
    pointer-events: none;
    z-index: 1;
    /* Under projects and footer impact */
    /* Raised to be visible over footer */
    /* Below text */
    overflow: hidden;
}

.ribbon-svg {
    width: 100%;
    height: 100%;
    /* Will scale */
    opacity: 0.6;
}

#ribbon-path {
    stroke-width: 30px;
    /* Much thicker */
    stroke: var(--ribbon-color);
    fill: none;
    stroke-linecap: round;
    /* Optional: Add a subtle glow/shadow to make it pop */
    filter: drop-shadow(0 4px 6px rgba(224, 187, 228, 0.4));
}

#dark-block {
    background-color: #1b1b1b;
    /* Deep Black */
    color: #f0f0f0;

    /* Fixed Overlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 20;

    /* Initial State: Hidden via Clip Path (Small circle at bottom) */
    clip-path: circle(0% at 50% 100%);
    -webkit-clip-path: circle(0% at 50% 100%);

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 5%;
    margin-top: 0;
    /* Reset margin */
}

/* No more pseudo-element drips */

#dark-block .content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* About Grid Layout */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Image Side */
.about-image {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    /* Slight softening */

    /* Initial Animation State */
    opacity: 0;
    transform: translateY(100px);
}

.image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #2F3136;
    /* Discord Dark Grey */
    /* Remove image and filter */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Text Side */
.about-text {
    text-align: left;
    color: #f0f0f0;

    /* Initial Animation State */
    opacity: 0;
    transform: translateY(100px);
}

.section-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
    opacity: 0.6;
}

#dark-block h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 5rem;
    font-weight: 100;
    /* Ultra Thin */
    line-height: 0.9;
    margin-bottom: 2rem;
    color: #fff;
    /* Gradient text removed for cleaner solid white/grey look or strictly managed */
}

#dark-block p {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.6;
    opacity: 0.8;
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.btn-link {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 5px;
    transition: all 0.3s ease;
}

.btn-link:hover {
    border-bottom-color: #fff;
    padding-bottom: 8px;
    /* Lift effect */
}

/* Responsiveness */
@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-image {
        height: 300px;
    }

    #dark-block h2 {
        font-size: 3.5rem;
    }
}

/* --- FOOTER (Contact) --- */
#contact {
    /* Background is handled by the ripple now */
    background-color: var(--pearl-bg);
    /* Match Works section to hide About Me layer */
    color: #f0f0f0;
    padding: 150px 5% 50px;
    position: relative;
    /* z-index: 2; Removed to allow ribbon layering */
    overflow: hidden;
}

.ribbon-impact {
    position: absolute;
    top: 150px;
    left: 50%;
    width: 20px;
    height: 20px;
    background-color: #1b1b1b;
    /* Start black immediately, or ribbon color then black? Let's use black ink */
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    /* Organic Blob */
    transform: translate(-50%, -50%);
    z-index: 50;
    /* High enough to cover ribbon (1) */
    /* Above ribbon so expansion covers it */
    /* Removed box-shadow trick, we will scale the div */
}

/* .footer-bg removed */

.content-wrapper {
    position: relative;
    z-index: 20;
    /* Above bg */
}

#contact .content-wrapper {
    z-index: 51;
    /* Above expanding black blob (50) */
}

#contact h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 5rem;
    font-weight: 100;
    line-height: 0.9;
    margin-bottom: 4rem;
    color: #fff;
}

.contact-links {
    margin-bottom: 4rem;
}

.contact-email {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 5px;
    transition: border-color 0.3s ease;
}

.contact-email:hover {
    border-color: #fff;
}

.footer-socials {
    display: flex;
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-socials a {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.footer-socials a:hover {
    color: #fff;
}

.copyright {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
}

@media (max-width: 768px) {
    #contact h2 {
        font-size: 3rem;
    }

    .contact-email {
        font-size: 1.5rem;
    }

    .footer-socials {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* --- FORM STYLES --- */
.contact-form {
    max-width: 800px;
    /* Wider for better layout */
    margin-bottom: 4rem;
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.form-group {
    position: relative;
    width: 100%;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    /* Brighter border */
    padding: 1rem 0;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    transition: border-color 0.3s ease;
    border-radius: 0;
    resize: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.8);
    /* Brighter and clearer placeholder */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-bottom-color: #fff;
}

.btn-submit {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.8);
    /* Stronger border */
    color: #fff;
    padding: 1rem 3rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50px;
    margin-top: 1rem;
}

.footer-socials a {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    /* Slightly larger */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.95);
    /* Nearly white */
    transition: color 0.3s ease;
}

.copyright {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    /* Readable grey */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 2rem;
}




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

/* --- ANTI-BOT HONEYPOT --- */
.hp-field {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
    overflow: hidden;
}

/* --- KINETIC GRID STATES --- */

/* Expanded State for Project Card */
.project-card-square.expanded {
    grid-column: 1 / -1;
    /* Specific span */
    width: 100%;
    height: auto;
    min-height: 80vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    z-index: 100;
    cursor: default;
    background-color: transparent;
    margin-bottom: 2rem;
    /* Rise up to cover header space */
    margin-top: -150px;
}

/* Expanded Image Layout */
.project-card-square.expanded .p-sq-image {
    height: 100%;
    /* Fill the column */
    min-height: 500px;
    margin-bottom: 0;
}

/* Hide original summary in expanded state */
.project-card-square.expanded .p-sq-info {
    display: none;
}

/* Expanded Content Area */
.p-expanded-content {
    display: none;
    /* Hidden by default */
    opacity: 0;
    padding-top: 2rem;
    position: relative;
}

.project-card-square.expanded .p-expanded-content {
    display: block;
    /* Opacity will be animated by GSAP */
}

.close-expanded-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--pearl-text);
}

.p-exp-text h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 200;
    margin-bottom: 1rem;
    color: var(--pearl-text);
}

.p-role {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    opacity: 0.5;
    margin-bottom: 3rem;
}

.p-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 500px;
}

.p-exp-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.exp-img {
    height: 150px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

@media (max-width: 768px) {
    .project-card-square.expanded {
        grid-template-columns: 1fr;
    }
}

/* --- PROJECT CAROUSEL (SCROLL-DRIVEN) --- */
/* --- PROJECT CAROUSEL (LEFT COLUMN) --- */
.project-carousel {
    /* 
       UNIFIED ELEMENT: 
       Matches original .p-sq-image EXACTLY to ensure smooth connection via GSAP Flip.
    */
    display: block;
    position: relative;
    width: 100%;

    /* ORIGIN STATE (Collapsed) */
    height: 400px;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    overflow: hidden;


    transition: transform 0.5s ease;
}

/* Expanded State: Transform into Full Column */
.project-card-square.expanded .project-carousel {
    display: flex;
    height: 100%;
    min-height: 80vh;
    margin-bottom: 0;
    margin-top: 0;
    border-radius: 4px;
    /* Optional softening */
    pointer-events: all;
    opacity: 1;
}



.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    /* Transformation handled by GSAP */
}

.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    /* Stacked and hidden by default */
    background-size: cover;
    background-position: center;
}

/* Demo Colors/Styles for Items */
.carousel-item.item-1 {
    background-color: #1a1a1a;
    color: #fff;
}

.carousel-item.item-2 {
    background-color: #2b2b2b;
    color: #eee;
}

.carousel-item.item-3 {
    background-color: #3c3c3c;
    color: #ddd;
}

.carousel-item.item-4 {
    background-color: #4d4d4d;
    color: #ccc;
}

.carousel-item h3 {
    font-size: 4rem;
    font-weight: 300;
    margin-bottom: 1rem;
    font-family: 'Outfit', sans-serif;
}

.carousel-item p {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    /* Match container radius just in case */
}

/* Close button positioning fix for carousel */
.project-card-square.expanded .close-expanded-btn {
    z-index: 200;
    /* Above carousel */
    mix-blend-mode: difference;
    /* Visible on dark/light */
}

/* --- CAROUSEL VISUAL INDICATORS --- */

.carousel-ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through */
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease 0.5s;
    /* Fade in delay on expand */
}

.project-card-square.expanded .carousel-ui-layer {
    opacity: 1;
}

/* Pagination Dots (Vertical Right) */
.carousel-indicators {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto;
    /* Enable interaction within the layer */
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    mix-blend-mode: difference;
    /* Ensure visibility on any image color */
}

.indicator-dot.active {
    background: #fff;
    border-color: #fff;
    transform: scale(1.2);
}

/* Scroll Hint (Bottom Center) */
.scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
}

.scroll-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
}

.scroll-mouse {
    width: 20px;
    height: 32px;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    position: relative;
}

.scroll-wheel {
    width: 2px;
    height: 6px;
    background: #fff;
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 1.5s infinite;
}

@keyframes scrollWheel {
    0% {
        top: 6px;
        opacity: 1;
    }

    100% {
        top: 18px;
        opacity: 0;
    }
}

/* --- SCROLL TO TOP BUTTON --- */
#scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-color);
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 1;
    transform: translateY(0);
}

#scroll-to-top:hover {
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

#scroll-to-top.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}