/* Base styles */
body {
    background-color: #000;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
}

/* The main container for the entire animation sequence.
   It starts fullscreen and transitions into the top banner. */
#hero-container {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevents the scaled logo from spilling out */
    background-color: #000;
}

/* A wrapper for the animated text to ensure perfect centering and prevent layout shifts. */
#text-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 1rem; /* Padding for mobile */
}

.intro-text {
    position: absolute; /* Allows for clean fade in/out transitions */
    opacity: 0;
}

/* Styles for the underline animation */
.underline-span {
    position: relative;
    display: inline-block;
}
.underline-anim {
    position: absolute;
    bottom: -4px; /* Position the line slightly below the text */
    left: 0;
    right: 0;
    height: 2px; /* Thickness of the underline */
    background-color: white;
    transform-origin: left; /* Animate from the left */
    transform: scaleX(0); /* Initially hidden */
}

/* Initial state for the SVG path to be "drawn" */
#infinity-path {
    stroke-dasharray: 1450;
    stroke-dashoffset: 1450;
    stroke-width: 2;
}

/* Hide elements that will be animated into view */
#logo-wrapper, #final-text, #case-studies-title {
    opacity: 0;
}
/* The letters are hidden initially */
#cr-c, #cr-r, #cr-v {
    opacity: 0;
}

/* Gradient overlay for the banner */
#gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75%; /* Cover a good portion of the bottom */
    background: linear-gradient(to top, #000 30%, rgba(0,0,0,0));
    opacity: 0; /* Initially hidden, GSAP will activate it */
    z-index: 1; /* Sits on top of the logo but below the title */
}

/* The title needs a higher z-index to be on top of the gradient */
#case-studies-title {
    z-index: 2;
}

/* The page content will initially be hidden to prevent layout shifts */
#page-content {
    color: white;
    text-align: center;
    min-height: 100vh;
    visibility: hidden; /* Hide until animation is ready */
}

/* --- Styles for skipping the intro animation on page 2+ --- */
.skip-intro #hero-container {
    position: relative; /* Take up space in the document flow */
    height: 300px;
    z-index: 1;
}

.skip-intro #page-content {
    visibility: visible; /* Show the content immediately */
}

.skip-intro #banner-spacer {
    display: none !important; /* Ensure the spacer is not used when skipping intro */
}

.skip-intro #text-wrapper,
.skip-intro #final-text,
.skip-intro #cr-c,
.skip-intro #cr-r,
.skip-intro #cr-v {
    display: none; /* Hide all intro text and letter elements */
}

.skip-intro #logo-wrapper,
.skip-intro #case-studies-title,
.skip-intro #gradient-overlay {
    opacity: 1; /* Show final banner elements */
}

.skip-intro #logo-wrapper {
    transform: scale(5); /* Set final logo scale for desktop */
}

.skip-intro #infinity-path {
    stroke-dashoffset: 0; /* Makes the path line visible */
    fill: url(#animated-gradient); /* Fills the path with the gradient */
}

/* Media query for mobile must also be included for the skip state */
@media (max-width: 767px) {
    .skip-intro #logo-wrapper {
        transform: scale(4); /* Adjust logo scale for mobile */
    }
}