/* ==========================================================
   index.css — page d'accueil uniquement
   Logo hero anime, grille de projets inclinee, slider colle.
   Tout ce qui est partage avec les autres pages vit dans main.css.
   ========================================================== */

/* ==========================================================
   LOGO DE LA BARRE HAUTE
   `.is-hidden` est posee par le script de la page d'accueil tant que le logo
   hero est encore a l'ecran : les deux ne doivent jamais coexister. Le flou
   accompagne la disparition pour eviter un saut sec.
   ========================================================== */
.logo {
    opacity: 1;
    visibility: visible;
    filter: blur(0px);
    transition: all 0.5s ease;
}

.logo.is-hidden {
    opacity: 0;
    visibility: hidden;
    filter: blur(15px);
}

/* ==========================================================
   LOGO HERO — apparition en trois dimensions
   Le logo est decoupe en six images empilees (.logo-parts). Chacune bascule
   depuis rotateX(90deg) avec un delai indexe sur la variable --i, ce qui donne
   l'effet de lettres qui se redressent une a une.
   
   Les variantes .desktop et .mobile sont permutees par RATIO D'ASPECT dans
   responsive.css, pas par largeur : c'est la forme de l'ecran qui compte. Une
   bascule par largeur afficherait la version verticale sur une tablette en
   paysage, ou elle serait ecrasee.
   ========================================================== */
.logo-hero.desktop {
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
}

.logo-hero.mobile {
    max-height: 70vh;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 10.06;
}

.logo-parts-container {
    perspective: 485px;
    transform-style: preserve-3d;
}

.logo-parts {
    display: block;
    width: auto;
    height: 100%;
    filter: blur(10px);
    opacity: 0;
    transform: rotateX(90deg) scale3d(0.8, 0.8, 0.8);
    transform-origin: 50% 50% 0%;
    animation: reveal-logo 1000ms cubic-bezier(0.3, 0.24, 0.1, 0.92) forwards;
}

.logo-parts-container .logo-parts {
    animation: reveal-logo 2000ms cubic-bezier(0.3, 0.24, 0.1, 0.92) forwards;
    animation-delay: calc((var(--i)) * 100ms);
}

@keyframes reveal-logo {
    from {
        filter: blur(10px);
        opacity: 0;
        transform: rotateX(90deg) scale3d(0.8, 0.8, 0.8);
    }

    to {
        filter: blur(0px);
        opacity: 1;
        transform: rotateX(0deg) scale3d(1, 1, 1);
    }
}

/* ==========================================================
   ETATS D'ATTENTE
   Posees par le loader pour neutraliser un element avant son entree.
   .wait-0 le retire du flux ; .wait-1 et .wait-2 le laissent en place mais
   transparent — utile quand la place doit rester reservee.
   ========================================================== */
.wait-0 {
    display: none;
}

.wait-1,
.wait-2 {
    opacity: 0 !important;
}

/* ==========================================================
   GRILLE DE PROJETS
   Six vignettes video inclinees a 10 degres. Le conteneur est en
   overflow:hidden et la grille deborde volontairement (scale 1.2) pour que la
   rotation ne laisse aucun angle vide.
   
   Chaque .grid-item porte en fond l'image degradee correspondante. Les videos
   .webm ont un canal alpha et se superposent a ce degrade : c'est ce montage
   qui evite le banding sur les degrades. Si la video n'est pas encore chargee,
   le degrade seul reste visible — jamais de trou noir.
   ========================================================== */
.grid-wrapper {
    width: 100vw;
    overflow: hidden;
    position: relative;
    min-height: 100vh;
}

.grid-container {
    transform: translateY(21%) rotate(10deg);
    scale: 1.2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2.5vw;
    width: 100%;
}

.grid-item {
    width: 100%;
    height: 40vw;
    min-width: 275px;
    min-height: 350px;
    overflow:hidden;
    background: url(/img/gradient/film-&-image-03-gradient.jpg) center / cover no-repeat;
}

.grid-item video {
    position: relative;
    width: 125%;
    transform: translate(-50%, -50%) rotate(-10deg);
    left: 50%;
    top: 50%;
}

/* ==========================================================
   SLIDER COLLE
   Bloc de texte centre qui reste fixe pendant le defilement de la sequence
   video. La marge negative le recale sur le centre du viewport ; elle est
   reprise en pixels pour les viewports tres bas dans responsive.css, ou la
   valeur en vh deviendrait plus grande que le bloc lui-meme.
   ========================================================== */
.sticky-slider-01-container {
    z-index: 1;
    position: absolute;
    margin-left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 2 * var(--page-padding));
    margin-top: var(--half-vision-height);
}

/* Ce bloc porte aussi les classes .full.height, qui passent en 100dvh
   dans main.css. On l'epingle ici en vh, volontairement : sa marge
   negative est exprimee en `-50vh`, et melanger les deux unites ferait
   deriver le centrage a chaque mouvement de la barre d'url. La page
   d'accueil se comporte correctement, rien n'a besoin d'y changer.
   Specificite 0-3-0, superieure au 0-2-0 de `.full.height`. */
.sticky-slider-01.full.height {
    height: 100vh;
}

.sticky-slider-01 {
    position: relative;
    width: 550px;
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(-50vh - 1rem);
    text-align: center;
    max-width: 100%;
}