/* Page-specific styles for index.html */

/* =========================
MAIN IMAGE STYLES (Index page)
========================= */
body {
    background-image: url("../images/index_background.e54fff37efef.png");
    background-size: cover;
    background-position: center;
}

/* Use a page-scoped container for the fade-in so we don't rely on base.html's <main> */
.index-main {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.index-main.show {
    opacity: 1;
    transform: translateY(0);
}

/* Portrait image styles */
#main_image {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#main_image:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Responsive typography and layout tweaks */
/* Large screens (default): comfortable sizes provided by Bootstrap; tweak a bit */
.index-main .display-4 {
    font-size: clamp(2rem, 3.2vw, 3.5rem);
}
.index-main h2 {
    font-size: clamp(1.1rem, 1.6vw, 1.6rem);
}
.index-main p.lead {
    font-size: clamp(1rem, 1.6vw, 1.125rem);
}

/* Breakpoints: tighten spacing and resize image/text on smaller screens */
@media (max-width: 991.98px) {
    #main_image {
        max-width: 360px;
    }
}

@media (max-width: 767.98px) {
    /* Stack layout already handled by Bootstrap; reduce image and text sizes for tablets */
    #main_image {
        max-width: 320px;
    }
    .index-main .display-4 {
        font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    }
    .index-main p.lead {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    /* Mobile: make image and text comfortably small */
    #main_image {
        max-width: 240px;
    }
    .index-main .display-4 {
        font-size: 1.6rem;
    }
    .index-main h2 {
        font-size: 1rem;
    }
    .index-main p.lead {
        font-size: 0.98rem;
    }
    body {
        background-image: url("../images/index_background_2.a84b7ed52c2e.png");
        background-size: cover;
    }
}