/* Custom Font Declaration */
@font-face {
    font-family: 'Bethany Elingston';
    src: url('assets/fonts/Bethany Elingston.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Font setup: Inter Light for body, Bethany Elingston for titles */
html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* Light weight */
    margin: 0;
    overflow: hidden; /* Initially hidden during loading */
    background-color: #ffffff; /* Default background */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Apply Bethany Elingston to all titles */
.single-line-text,
.content-heading,
.skills-title,
.category-label,
.page-title,
.panel-title,
.contact-title,
.contact-link {
    font-family: 'Bethany Elingston', serif;
}

/* Disable text selection across entire website */
* {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Standard */
}

/* Hide scrollbar for all states (webkit browsers) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

html {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Enable scrolling after loading */
body.scroll-enabled {
    overflow-x: hidden;
    overflow-y: auto;
}

/* ---------------------------------- */
/* 1. Loading Screen Container */
/* ---------------------------------- */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transform: translateY(0);
    transition: transform 1.2s cubic-bezier(0.8, 0, 0.2, 1);
}

/* Reveal Animation: Slides down out of view */
.slide-down-exit {
    transform: translateY(100vh) !important;
    box-shadow: 0 50px 50px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------- */
/* 2. Dot Loader Styling (Unchanged) */
/* ---------------------------------- */
.dots-container {
    display: flex;
    gap: 16px;
}

.dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ffffff;
    animation: dot-jump 0.8s infinite alternate-reverse;
    transform: translateY(0);
}

/* Keyframes for the dot jumping movement */
@keyframes dot-jump {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

/* Sequential Animation Delay for dots */
.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.1s; }
.dot:nth-child(3) { animation-delay: 0.2s; }
.dot:nth-child(4) { animation-delay: 0.3s; }
.dot:nth-child(5) { animation-delay: 0.4s; }

/* ---------------------------------- */
/* 3. Main Content Setup (SCROLLABLE HERO CONTAINER) */
/* ---------------------------------- */
#main-content {
    position: relative; 
    height: 100vh; 
    display: block; 
    z-index: 10;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.content-visible {
    display: block !important;
}

/* Layer 1: Centers the entire text block horizontally and vertically */
.reveal-text-container {
    color: #000000;
    line-height: 1.1; 
    padding: 2rem;
    
    position: sticky; 
    top: 0; 
    height: 100vh;
    
    display: flex;
    justify-content: center; 
    align-items: center; 
    
    /* Add transition for the opacity change */
    transition: opacity 0.1s linear; 
}

/* Layer 2: The wrapper that controls the left-alignment of the lines */
.text-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Single-Line Text Styling */
.single-line-text {
    font-size: 12vw; 
    font-weight: 400; 
    margin: 0;
    white-space: nowrap; 
    text-align: left; 
}

/* Individual Character Span Styling */
.char-span {
    display: inline-block;
    line-height: 1em;
    min-width: 0.5ch;
    white-space: pre; 
}

/* Prevent words from splitting in hero text */
.single-line-text {
    word-break: keep-all;
    overflow-wrap: normal;
}

/* Scroll Indicator Style */
.scroll-indicator {
    width: 30px;
    height: 30px;
    margin-top: 1.5rem; 
    animation: bob-up-down 1.5s ease-in-out infinite alternate;
    align-self: center;
    position: relative;
}

.scroll-indicator::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-right: 2.5px solid #000000;
    border-bottom: 2.5px solid #000000;
    transform: rotate(45deg) translateY(-50%);
    top: 50%;
    left: 50%;
    margin-left: -7.5px;
}

/* Keyframes for the slow bobbing arrow */
@keyframes bob-up-down {
    0% { transform: translateY(0); }
    100% { transform: translateY(10px); }
}

/* ---------------------------------- */
/* 4. Content Section (Targeted Styling) */
/* ---------------------------------- */
.content-section {
    background-color: #ffffff;
    min-height: 100vh;
    height: 100vh;
    /* NEW: Use a percentage width for responsiveness and a max-width for large screens */
    width: 90%; 
    max-width: 1200px; 
    margin: 0 auto; /* CENTERED */
    /* Padding applies inside the centered block */
    padding: 6rem 4rem; 
    
    text-align: left; 
    position: relative;
    z-index: 5; 
    transition: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Styles for the Animated letters */
.letter {
    display: inline-block;
    line-height: 1em;
    /* CRITICAL: Start hidden for staggered animation */
    opacity: 0; 
}

/* Prevent words from splitting in content section */
.content-heading,
.description-paragraph {
    word-break: keep-all;
    overflow-wrap: normal;
}

#highlight-box, #description-text {
    transition: none; 
}

.content-heading {
    /* This applies to the H2 (I'm a...) */
    font-size: 6vw; 
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 1.5rem;
    display: block; 
    white-space: nowrap; 
}

/* Style for the 'I'm a' part to ensure it wraps correctly with the highlight box */
#static-intro {
    display: inline-block;
    margin-right: 0; 
    /* Ensure the static text is always fully visible */
    opacity: 1 !important; 
}

.description-paragraph {
    /* Smaller text size */
    font-size: 2.5vw;
    line-height: 1.3;
    /* Using a character-based width for optimal readability within the centered container */
    max-width: 70ch; 
    font-weight: 400;
}

/* Highlighted Box Style */
.highlight-box {
    background-color: #000000;
    color: #ffffff;
    padding: 0.3em 0.5em 0.1em 0.5em; 
    margin-left: 0; 
    display: inline-block;
    white-space: nowrap;
    cursor: pointer; 
    transition: background-color 0.3s ease;
    animation: pulse 2s infinite ease-in-out;
    vertical-align: baseline;
    line-height: inherit;
}
.highlight-box:hover {
    background-color: #333333; /* Darken slightly on hover */
}

/* Keyframes for the highlight box pulse */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* ---------------------------------- */
/* 5. Technical Skills Section Styles */
/* ---------------------------------- */
.skills-section {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: #ffffff;
    padding: 0;
}

.skills-title {
    padding: 48px 48px 32px 48px;
    font-size: 51px;
    font-weight: 400;
    color: #000;
    line-height: 1;
    margin: 0;
    word-break: keep-all;
    overflow-wrap: normal;
}

.skills-category {
    border-top: 1.5px solid #000;
    padding: 20px 0;
    font-size: 28px;
    font-weight: 400;
    color: #000;
    cursor: pointer;
    position: relative;
    overflow: visible;
    line-height: 1.2;
    width: 100%;
    text-align: center;
    background-color: #ffffff;
    transition: color 0.4s ease;
    transform: translateX(-100%);
    pointer-events: none;
}

.skills-category::before {
    content: '';
    position: absolute;
    top: -1.5px;
    left: 0;
    width: 100%;
    height: calc(100% + 1.5px);
    background-color: #000000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
    z-index: 0;
}

.skills-category:hover::before {
    transform: scaleX(1);
}

.skills-category:hover {
    color: #ffffff;
}

.skills-category:last-child {
    border-bottom: 1.5px solid #000;
}

.category-label {
    display: inline-block;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 1;
}

.skills-category:hover .category-label {
    opacity: 0;
}

.skills-marquee {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    white-space: nowrap;
    opacity: 0;
    display: flex;
    gap: 60px;
    color: #ffffff;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.skills-category:hover .skills-marquee {
    opacity: 1;
}

.skill-item {
    display: inline-block;
    margin-right: 60px;
}

/* ---------------------------------- */
/* 6. Projects Section & Parallax Carousel Styles */
/* ---------------------------------- */
.projects-section {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: #ffffff;
    position: relative;
}

.carousel-container *,
.page-title {
    box-sizing: border-box;
}

.page-title {
    padding: 48px 48px 32px 48px;
    font-size: 51px;
    font-weight: 400;
    color: #000;
    line-height: 1;
    word-break: keep-all;
    overflow-wrap: normal;
}

.carousel-container {
    width: 100%;
    overflow: hidden;
    padding: 0px 0 0px 0;
}

.track-wrapper {
    width: 100%;
    overflow: visible;
}

.track-flex {
    display: flex;
    gap: 16px;
    will-change: transform;
}

.panel-wide {
    position: relative;
    width: 360px;
    flex: 0 0 360px;
    transform: translateY(-100%);
    opacity: 0;
}

.image-container {
    width: 100%;
    height: 360px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.panel-wide img {
    height: 100%;   /* lock the height to the container */
    width: auto;    /* let width grow based on aspect ratio */
    max-width: none; /* override Tailwind's max-width: 100% */
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    /* transform: translateX(-50%); */
}

.panel-content {
    padding: 16px 0;
    background: transparent;
}

.panel-title {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 6px;
    color: #000;
    line-height: 1.2;
}

.panel-subtitle {
    font-size: 15px;
    color: #666;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.5;
}

/* Load Playfair Display font for carousel */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap');

/* ---------------------------------- */
/* 7. Contact Section Styles */
/* ---------------------------------- */
.contact-section {
    min-height: 100vh;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contact-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
}

.contact-title {
    font-size: 12vw;
    font-weight: 400;
    color: #000000;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.contact-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.contact-link {
    font-size: 2.5vw;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
    position: relative;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
    opacity: 0;
}

.contact-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.contact-link:hover {
    color: #333333;
}

.contact-link:hover::after {
    transform: scaleX(1);
}

.contact-char {
    display: inline-block;
    line-height: 1em;
    min-width: 0.5ch;
    white-space: pre;
    opacity: 0;
}

/* Prevent words from splitting in contact section */
.contact-title,
.contact-link {
    word-break: keep-all;
    overflow-wrap: normal;
}

/* Word container to keep words together */
.word-container {
    display: inline-block;
    white-space: nowrap;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .single-line-text { font-size: 15vw; }
    .content-heading { font-size: 8vw; }
    .description-paragraph { font-size: 4vw; max-width: 80ch; }
}
@media (max-width: 640px) {
    .single-line-text { font-size: 18vw; }
    .reveal-text-container { padding: 1rem; }
    .dot { width: 16px; height: 16px; gap: 8px; }
    .scroll-indicator { margin-top: 1rem; }
    
    /* Allow wrapping on mobile and make text larger to be readable */
    .content-heading { 
        font-size: 8.5vw; 
        white-space: normal;
    }
    
    /* Make "I'm a" and role appear on separate lines for mobile */
    #static-intro, #highlight-box {
        display: block;
        width: fit-content;
        max-width: 100%;
    }
    
    .description-paragraph { 
        font-size: 5vw; 
        max-width: 100%; /* Use full width on small screens */
    }
    /* On small screens, remove max-width/width and use full width with padding */
    .content-section { 
        width: 100%; /* Force full width on mobile */
        max-width: none; 
        padding: 4rem 1.5rem;
        height: auto; /* Allow natural height on mobile */
        min-height: 100vh;
    }
    /* Adjusted responsive styles for static intro */
    #static-intro { display: inline; margin: 0; padding: 0; opacity: 1 !important; } 
    .highlight-box { display: inline; margin: 0; padding: 0.3em 0.5em 0.1em 0.5em; }
    
    /* Adjust projects section for mobile */
    .projects-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    /* Adjust page title for mobile */
    .page-title { 
        padding: 40px 30px 30px 30px;
        font-size: 48px; 
    }
    
    /* Adjust skills section for mobile */
    .skills-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .skills-title {
        padding: 40px 30px 30px 30px;
        font-size: 48px;
    }
    
    .skills-category {
        padding: 16px 0;
        font-size: 20px;
        background-color: #ffffff;
        border-top: 1.5px solid #000000;
        color: #000000;
        pointer-events: none; /* Disable hover on mobile */
    }
    
    .skills-category:last-child {
        border-bottom: 1.5px solid #000000;
    }
    
    .skills-category::before {
        display: none; /* Disable hover background effect on mobile */
    }
    
    .skills-category .category-label {
        display: none;
    }
    
    .skills-category .skills-marquee {
        opacity: 0; /* Start hidden for fade-in animation */
        color: #000000;
    }
    
    .skill-item {
        margin-right: 40px;
        font-size: 18px;
    }
    
    /* Adjust contact section for mobile */
    .contact-title {
        font-size: 18vw;
        white-space: normal;
    }
    
    .contact-link {
        font-size: 5vw;
    }
    
    .contact-link::after {
        transform: scaleX(1);
    }
    
    .contact-section {
        padding: 1rem;
    }
}