/**
 * Feuille de style principale
 * Projet : Effet Parallax sur Hero
 * Auteur : Stéphane ARRAMI
 * Date de création : 2024-03-13
 * Description : Feuille de styles optimisée avec variables CSS, meilleure accessibilité et lisibilité
 */

/* === VARIABLES GLOBALES === */
:root {
    /* Couleurs */
    --color-text-primary: #333333;

    /* Tailles de police */
    --font-size-base: 1.2rem;
    --font-size-large: 3rem;
    --font-size-xl: 4rem;

    /* Hauteur de ligne */
    --line-height-normal: 1.8;
}

/* === RÉINITIALISATION & BASE === */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* === HERO SECTION === */
.hero {
    width: 100%;
    height: 120vh; /* Ajusté pour éviter les coupures */
    position: relative;
    overflow: hidden;
}

/* Image de fond */
.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180vh; /* Évite la coupure */
    background: url("/assets/img/bridge.jpg") no-repeat center center;
    background-size: cover;
    z-index: 1;
}

/* Nuages */
.clouds {
    position: absolute;
    top: -10vh; /* Évite la coupure en haut */
    left: 0;
    width: 100%;
    height: 200vh;
    background: url("/assets/img/clouds.png") no-repeat center center;
    background-size: cover;
    opacity: 0.7;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
}

/* Personnage */
.person {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 25vw;
    max-width: 250px;
    height: auto;
    background-size: contain;
    z-index: 3;
}

/* === TEXTE PRINCIPAL === */



.txt {
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-large);
    font-weight: bold;
    color: var(--color-text-primary);
    text-transform: uppercase;
    text-align: center;
    z-index: 4;
}

.txt::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    width: 110%;
    height: 120%;
    background: var(--background-overlay);
    z-index: -1;
    border-radius: var(--border-radius-small);
}


/* Inclinaison et animation de "Lyon" */
.txt span {
    font-size: var(--font-size-xl);
    display: inline-block;
    transform: rotate(-5deg);
    animation: fadeSlide 1s ease-out forwards;
}

/* === ANIMATION === */
@keyframes fadeSlide {
    0% {
        opacity: 0;
        transform: translateY(50px) rotate(-8deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(-5deg);
    }
}

/* === CONTENU APRÈS LE HERO === */
.content {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    padding: 2rem 1rem;
    text-align: center;
}

/* CENTRAGE DES TITRES */
.content h1 {
    font-size: var(--font-size-large);
    font-weight: bold;
    margin-bottom: 1rem;
    text-align: center;
}

/* === TEST GSAP === */
.title-animation {
    opacity: 0;
    transform: translateY(50px);
}

/* === RESPONSIVE DESIGN === */
@media screen and (min-width: 768px) {
    .txt {
        bottom: 30%;
        font-size: min(6vw, 10rem);
        letter-spacing: 5px;
    }

    .txt span {
        font-size: min(20vw, 20rem);
    }

    .person {
        width: 15vw;
        max-width: 300px;
    }
}