/*
 * Styles for the intro animation sequence.
 * This file styles the elements defined in intro.html and prepares them for animation.
 */

/* Main container for the intro content */
#intro-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh; /* Ensures the content is centered vertically */
    gap: 2rem; /* Provides spacing between the words, cards, button, and tagline */
    padding: 2rem;
}

/* Container for the main words: "AI", "Driven", "Data" */
#words-container {
    display: flex;
    justify-content: center;
    gap: 2rem; /* Spacing between words */
    width: 100%;
    max-width: 1000px; /* Constrains the width on larger screens */
    margin-bottom: 1rem;
}

/* Styling for the individual words */
.intro-word {
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 800;
    color: var(--text);
    text-shadow: 0 0 15px rgba(0, 216, 255, 0.3);
    flex: 1; /* Allows words to take up equal space */
    text-align: center;
}

/* NEW: Initial state for each character for the text reveal animation */
.intro-word span {
    display: inline-block; /* Required to apply transforms */
    opacity: 0;
    transform: translateY(30px) scale(0.5);
    transform-origin: bottom center;
}


/* Container for the description cards that appear under the words */
#cards-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    max-width: 1000px;
    perspective: 1000px; /* Enables 3D transformations for child elements if needed */
}

/* Styling for the individual description cards */
.intro-card {
    background: var(--chip-bg);
    border: 1px solid var(--chip-edge);
    border-radius: 16px;
    padding: 1.5rem;
    flex: 1; /* Allows cards to take up equal space */
    text-align: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);

    /* Initial state for animation is now handled by JavaScript for more complex effects */
}

/* Styling for the description text inside the cards */
.intro-card .description {
    color: var(--sub);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    
    /* Initial state for animation: collapsed and transparent */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

/* Styling for the launch button */
#launch-button {
    margin-top: 2rem;
    
    /* Initial state for animation: hidden and scaled down */
    opacity: 0;
    transform: scale(0.8);
}

/* Styling for the final tagline */
#tagline {
    margin-top: 1rem;
    color: var(--sub);
    font-size: 1.1rem;
    font-style: italic;
    
    /* Initial state for animation: hidden and slightly moved down */
    opacity: 0;
    transform: translateY(20px);
}

/* Responsive adjustments for smaller screens (e.g., tablets and phones) */
@media (max-width: 768px) {
    #words-container,
    #cards-container {
        flex-direction: column; /* Stack elements vertically */
        gap: 1.5rem;
        align-items: center;
    }

    .intro-word {
        font-size: 4rem; /* Reduce font size for smaller screens */
    }

    .intro-card {
        width: 100%;
        max-width: 400px; /* Limit card width on mobile to maintain readability */
    }
}