/* ==========================================================================
   1. DEFINICE BAREV A TYPOGRAFIE (TOP 09 VIZUÁLNÍ STYL)
   ========================================================================== */
:root {
    --top-dark-blue: #0A2540;   /* Hluboká tmavě modrá pro text a pozadí */
    --top-brand-blue: #00469B;  /* Hlavní modrá pro běžný text vět */
    --top-light-blue: #9EC8E9;  
    --top-red: #D70C0F;         /* Výrazná červená pro poslední větu */
    
    --bg-light: #F4F6F9;        
    --bg-white: #FFFFFF;        
    --text-dark: #1A202C;       
    
    --font-primary: 'Helvetica Neue', Arial, sans-serif;
    --border-radius: 4px;       
}

/* ==========================================================================
   2. GLOBÁLNÍ STYLY A RESET
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-white);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden; /* Pojistka proti horizontálnímu posuvníku */
}

/* ==========================================================================
   3. ANIMACE PRO "COMING SOON" STRÁNKU
   ========================================================================== */
.coming-soon-container {
    max-width: 900px;
    margin: 10rem auto 2rem; /* Odsazení shora, aby to bylo pěkně vycentrované */
    padding: 2rem;
    text-align: center;
}

.main-headline {
    font-size: 2.5rem;
    color: var(--top-dark-blue);
    margin-bottom: 5rem;
    font-weight: 800;
}

.animation-box {
    position: relative;
    min-height: 180px; /* Dostatečná výška, aby text neskákal dolů */
    display: flex;
    align-items: center;
    justify-content: center;
}

.smooth-text {
    position: absolute; /* Všechny věty leží přesně na sobě */
    width: 100%;
    font-size: 1.6rem;
    color: var(--top-brand-blue);
    font-weight: 600;
    line-height: 1.6;
    opacity: 0; /* Výchozí stav je skrytý */
    
    /* Kombinace dvou animací:
       - pureFade (25s celková smyčka) řídí, kdy se která věta zviditelní
       - pureScale (5s krátká smyčka) zajišťuje neustálé, plynulé zvětšování po celou dobu viditelnosti */
    animation: 
        pureFade 25s linear infinite,
        pureScale 5s linear infinite;
}

/* Poslední věta dostane údernou červenou barvu */
.text-5 {
    color: var(--top-red);
}

/* Časové rozestupy (delay) spuštění pro jednotlivé věty.
   Musí být zadané pro obě animace současně (oddělené čárkou). */
.text-1 { animation-delay: 0s, 0s; }
.text-2 { animation-delay: 5s, 5s; }
.text-3 { animation-delay: 10s, 10s; }
.text-4 { animation-delay: 15s, 15s; }
.text-5 { animation-delay: 20s, 20s; }

/* ANIMACE PROLÍNÁNÍ (pureFade):
   Říká, v jaké fázi 25sekundového cyklu se má text ukázat. 
   Každá věta má okno 5 sekund (což je 20 % z celkového času).
*/
@keyframes pureFade {
    0% { opacity: 0; }
    2% { opacity: 1; }  /* Plynulé, rychlé zobrazení na začátku jejího času */
    18% { opacity: 1; } /* Text zůstává plně viditelný */
    20% { opacity: 0; } /* Plynulé zhasnutí těsně před koncem 5. sekundy */
    100% { opacity: 0; }
}

/* ANIMACE KONSTANTNÍHO ZVĚTŠOVÁNÍ (pureScale):
   Trvá přesně 5 sekund. Od okamžiku, kdy věta naskočí, se lineárně
   a naprosto plynule zvětšuje bez jakéhokoliv cuknutí nebo zastavení.
*/
@keyframes pureScale {
    0% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1.05);
    }
}