/* ------------------- */
/* --- HOMEPAGE STYLES --- */
/* ------------------- */

/* This file contains styles that are specific to the homepage (index.html). */

/* --- HERO SECTION --- */
/* Styles for the main hero section container. */
.hero {
    /* Sets the width to 100% of the viewport width. */
    width: 100%;
    /* Sets a maximum height for the hero section relative to the viewport height. */
    max-height: 80vh;
    /* Hides any part of the image that might overflow the container's boundaries. */
    overflow: hidden;
    /* Positions the hero section relative to its normal position, which is necessary for absolutely positioning child elements if needed. */
    position: relative;
}

/* Styles for the link that wraps the hero image. */
.hero-image-link {
    /* Ensures the link takes up the full space of its container. */
    display: block;
}

/* Styles for the image within the hero section. */
.hero img {
    /* Ensures the image spans the full width of its container. */
    width: 100%;
    /* Ensures the image's height adjusts proportionally to its width. */
    height: auto;
    /* Aligns the image vertically to the middle, which can prevent unwanted space below the image. */
    vertical-align: middle;
}

/* --- HERO TITLE --- */
/* Styles for the container holding the hero title. */
.hero-title-container {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    pointer-events: none;
    padding-left: 6vw;
}

/* Styles for the hero title text. */
.hero-title {
    font-family: 'Bodoni Moda', serif;
    font-weight: 500;
    color: #fff;
    font-size: 3rem;
    letter-spacing: 0.05em;
    text-align: center;
    opacity: 0;
    animation: fadeInHeroTitle 1.5s ease-in forwards;
}

/* Keyframes for fading in the hero title. */
@keyframes fadeInHeroTitle {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (min-width: 1200px) {
    .hero-title-container {
        justify-content: flex-start;
        padding-left: 12vw;
        width: 60vw;
    }
}

/* --- INTRODUCTION SECTION --- */
/* Styles for the section containing the brief introduction text. */
.intro-section {
    /* Adds padding to the top and bottom for spacing. */
    padding: 4rem 0;
    /* Centers the text within this section. */
    text-align: center;
}

/* Styles for the container that holds the introduction content. */
.intro-container {
    /* Sets a maximum width to keep the content from becoming too wide on large screens. */
    max-width: 800px;
    /* Centers the container horizontally within the section. */
    margin: 0 auto;
    /* Adds padding to the sides to prevent text from touching the screen edges. */
    padding: 0 2rem;
}

/* Styles for the main heading in the introduction. */
.intro-heading {
    /* Sets the font size for the heading. */
    font-size: 2.5rem;
    /* Removes the default top margin of the h1 element. */
    margin-top: 0;
    /* Adds a bottom margin for spacing. */
    margin-bottom: 1rem;
    /* Uses a bolder font weight for emphasis. */
    font-weight: 700;
}

/* Styles for the introductory paragraph text. */
.intro-text {
    /* Sets the font size for the text. */
    font-size: 1.2rem;
    /* Sets the color to a slightly lighter shade for a softer look. */
    color: #555;
    /* Removes the default bottom margin of the paragraph. */
    margin-bottom: 0;
}


/* --- ARTIST STATEMENT SECTION --- */
/* Styles for the section containing the artist's statement. */
.artist-statement {
    /* Adds padding for vertical spacing. */
    padding: 2rem 0 4rem;
    /* Sets the background color to a very light gray to visually separate it from other sections. */
    background-color: #f8f9fa;
}

/* Styles for the container holding the artist statement content. */
.statement-container {
    /* Sets a maximum width for readability. */
    max-width: 800px;
    /* Centers the container horizontally. */
    margin: 0 auto;
    /* Adds side padding. */
    padding: 0 2rem;
    /* Centers the text within the container. */
    text-align: center;
}

/* Styles for the heading of the artist statement section. */
.statement-title {
    /* Sets the font size for the title. */
    font-size: 2rem;
    /* Adds space below the title. */
    margin-bottom: 1.5rem;
    /* Uses the primary accent color for the title to draw attention. */
    color: var(--primary-accent);
}

/* Styles for the artist statement paragraph itself. */
.artist-statement p {
    /* Sets the font size for better readability. */
    font-size: 1.1rem;
    /* Sets the line height to improve readability of the text block. */
    line-height: 1.6;
}

/* --- SHIPS LOG SECTION --- */
/* Styles for the section containing the ship's log. */
.ships-log-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-top: 2rem;
}

/* Styles for the container holding the ship's log content. */
.ships-log-container {
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Styles for the title of the ship's log section. */
.ships-log-title {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 1.2rem;
    color: #222;
}

/* Styles for the text within the ship's log. */
.ships-log-text {
    font-size: 1rem;
    color: #222;
    line-height: 1.7;
    text-align: left;
}

/* --- RESPONSIVE STYLES FOR HOMEPAGE --- */
/* Media query for screens smaller than 768px (tablets and mobile). */
@media (max-width: 768px) {
    /* Adjusts heading font size for smaller screens. */
    .intro-heading {
        font-size: 2rem;
    }

    /* Adjusts text font size for smaller screens. */
    .intro-text {
        font-size: 1.1rem;
    }

    /* Adjusts artist statement title font size. */
    .statement-title {
        font-size: 1.8rem;
    }
}

/* Import Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@16..96,500&display=swap');