/* =============================================================================
   INTRO.CSS
   Écran d'accueil (splash) : photo d'une balle de baseball en fond plein écran,
   vignette sombre par-dessus pour la lisibilité, puis "BaseBook" se révèle.
   Disparaît automatiquement (piloté par intro.js) ou au clic/tap.

   Fond volontairement fixe (esprit "nuit de match"), indépendant du thème
   clair/sombre de l'appli : un splash reste dramatique dans les deux cas.
   ============================================================================= */

/* Anti-flash (voir le script inline juste avant #intro dans index.php) :
   masque l'intro d'emblée si elle a déjà été vue dans cet onglet, avant même
   le premier rendu — sinon un bref flash apparaît le temps qu'intro.js
   (chargé en bas de page) s'exécute et la retire du DOM. */
html.intro-deja-vue #intro {
    display: none;
}

#intro {
    position: fixed;
    inset: 0;                     /* couvre tout l'écran */
    z-index: 9999;                /* au-dessus de tout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: -15vh;   /* pousse le contenu centré vers le haut */
    gap: 22px;
    /* Photo en fond, cadrée pour couvrir tout l'écran. Le gant/la balle sont
       décalés vers la droite dans la photo source (~72% de la largeur) ;
       en portrait (recadrage plus serré en largeur), on resserre le cadrage
       sur ce point via la media query ci-dessous. */
    background-image: url('assets/img/baseball-intro.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;              /* signale qu'on peut cliquer pour passer */
    -webkit-tap-highlight-color: transparent;
    opacity: 1;
    transition: opacity 0.6s ease;
}
@media (orientation: portrait) {
    #intro {
        background-position: 72% center;
    }
}

/* Dégradé BLANC continu, déjà présent au centre et de plus en plus marqué
   vers les bords gauche/droite (symétrique : mêmes valeurs à 0% et 100%).
   Les rgba sont à alpha plein (1) : SEULE la propriété opacity ci-dessous
   contrôle l'intensité globale (0 = invisible, 1 = complètement opaque). */
#intro::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.95;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 1) 100%);
}

/* Classe posée par intro.js pour la disparition en fondu. */
#intro.intro-sortie {
    opacity: 0;
    pointer-events: none;
}

/* Traitement du nom "BaseBook", PARTAGÉ entre l'intro et l'écran de connexion
   (connexion.css) : une seule règle à modifier pour que le texte reste
   identique aux deux endroits, plutôt que deux copies qui peuvent diverger.
   "Base" et "Book" en deux nuances pour un léger relief de marque. */
.titre-basebook {
    font-family: 'Outfield Glory', 'Barlow Condensed', 'Plus Jakarta Sans', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #000000;
}
.titre-basebook .intro-nom-2 {
    color: #660000;
}

/* Nom de l'appli dans l'intro : caché au départ, révélé par GSAP. Placé
   au-dessus de la vignette. Remontée gérée par le padding-bottom de #intro
   (pas de margin ici, qui entrerait en conflit avec le y animé par GSAP). */
#intro-nom {
    position: relative;           /* passe au-dessus du ::before */
    z-index: 1;
    margin: 0;
    font-size: clamp(2.8rem, 24vw, 5.2rem);
    opacity: 0;                   /* GSAP prend le relais */
}

/* Petit indice discret "toucher pour continuer" (fondu par GSAP). */
#intro-passer {
    position: absolute;
    bottom: 28px;
    z-index: 1;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
    opacity: 0;
}

/* Si JS indisponible : on n'emprisonne jamais l'utilisateur derrière l'intro. */
.no-js #intro {
    display: none;
}