/* ==========================================================================
   INDEX.CSS - SPECIFICKÉ STYLY A ANIMACE PRO index.php
   ========================================================================== */

.main-content {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* --- Animace Hero sekce --- */
.hero {
    text-align: center;
    margin-bottom: 4rem;
}
/* Animace se aplikuje na "děti" .hero elementu */
.hero > * {
    opacity: 0;
    animation: fadeInDown 0.8s ease-out forwards;
}
.hero h2 {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    animation-delay: 0.2s; /* Zobrazí se jako první */
}
.hero p {
    font-size: 1.2rem;
    color: var(--fg-muted);
    max-width: 600px;
    margin: 0 auto;
    animation-delay: 0.4s; /* Zobrazí se hned po nadpisu */
}

/* --- Animace pro sekce na Homepage --- */
.section {
    /* Používáme .card-style, který má hover efekt z basic.css */
    composes: card-style;
    margin-bottom: 2rem;
    /* Každá sekce bude mít startovní animaci */
    opacity: 0;
    animation: fadeInDown 0.8s ease-out forwards;
}

/* "WATERFALL" EFEKT: Postupné načítání sekcí shora dolů */
.section:nth-of-type(1) {
    animation-delay: 0.6s;
}
.section:nth-of-type(2) {
    animation-delay: 0.75s; /* Mírně větší rozestup pro dynamiku */
}
.section:nth-of-type(3) {
    animation-delay: 0.9s;
}

.section h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}
.section p {
    color: var(--fg-muted);
    margin-bottom: 1.5rem;
}

/* --- Responsivita (zůstává stejná) --- */
@media screen and (max-width: 768px) {
    .hero h2 {
        font-size: 2.5rem;
    }
    .section {
        padding: 1.5rem;
    }
}