/* =========================================================
   INTRO AMORFINI GARDEN
   File: /assets/css/intro.css

   Struttura:
   - overlay full screen
   - simbolo grafico
   - naming "AMORFINI"
   - naming "GARDEN"
   - claim

   Gli stati iniziali dell'animazione vengono definiti
   direttamente nel CSS per evitare flash prima che GSAP
   venga eseguito.
   ========================================================= */


/* =========================================================
   VISIBILITÀ INTRO NELLA SESSIONE
   ========================================================= */

/*
 * Se l'intro è già stata visualizzata nella sessione
 * corrente, viene nascosta immediatamente.
 *
 * La classe "agriflora-intro-seen" viene aggiunta
 * all'elemento <html> tramite lo script caricato nel <head>.
 */
html.agriflora-intro-seen .agriflora-intro {
    display: none !important;
}


/* =========================================================
   OVERLAY PRINCIPALE
   ========================================================= */

.agriflora-intro {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    background: #1d2327;
    overflow: hidden;
}


/* =========================================================
   CONTENITORE CENTRALE
   ========================================================= */

/*
 * Contiene simbolo, naming e claim.
 * La larghezza resta fluida sui dispositivi più piccoli.
 */
.agriflora-intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(92vw, 1100px);

    text-align: center;
}


/* =========================================================
   SIMBOLO GRAFICO
   ========================================================= */

.agriflora-intro-logo {
    display: block;

    width: clamp(120px, 10vw, 190px);
    height: auto;

    margin: 0;

    /*
     * Stato iniziale dell'animazione.
     * Il simbolo è immediatamente visibile ma parte
     * più in basso rispetto alla posizione definitiva.
     *
     * GSAP lo porterà successivamente a translateY(0).
     */
    transform: translateY(95px);
}


/* =========================================================
   BLOCCO NAMING
   ========================================================= */

.agriflora-intro-brand {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: clamp(22px, 2.5vw, 36px);
}


/* =========================================================
   NAMING - AMORFINI
   ========================================================= */

.agriflora-intro-name {
    font-family: "Baskerville", serif;
    font-size: clamp(42px, 5vw, 78px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.01em;

    color: #fff;

    /*
     * Stato iniziale.
     * Il testo rimane completamente invisibile prima
     * dell'avvio della timeline GSAP.
     */
    opacity: 0;
    visibility: hidden;

    /*
     * Movimento verticale iniziale.
     * GSAP porterà il valore a translateY(0).
     */
    transform: translateY(34px);
}


/* =========================================================
   NAMING - GARDEN
   ========================================================= */

.agriflora-intro-subname {
    margin-top: clamp(7px, 1vw, 12px);

    font-family: "Poppins", sans-serif;
    font-size: clamp(16px, 1.9vw, 26px);
    font-weight: 400;
    line-height: 1;

    color: #fff;

    /*
     * Tracking ampio per riprendere la costruzione
     * tipografica del logo originale.
     */
    letter-spacing: 0.55em;

    /*
     * Compensa otticamente lo spazio aggiunto
     * dopo l'ultima lettera dal letter-spacing.
     */
    padding-left: 0.55em;

    /*
     * Stato iniziale dell'animazione.
     */
    opacity: 0;
    visibility: hidden;
    transform: translateY(28px);
}


/* =========================================================
   CLAIM
   ========================================================= */

.agriflora-intro-claim {
    max-width: 900px;

    margin-top: clamp(28px, 3.5vw, 48px);

    font-family: "Poppins", sans-serif;
    font-size: clamp(16px, 1.8vw, 26px);
    font-weight: 300;
    line-height: 1.5;

    color: #fff;

    /*
     * Stato iniziale dell'animazione.
     */
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
}


/* =========================================================
   DESKTOP LARGE
   Da 1200px in su aumentiamo volutamente:
   - dimensioni
   - presenza visiva
   - ampiezza dei movimenti

   Tablet e mobile mantengono invece i valori definiti sopra.
   ========================================================= */

@media (min-width: 1200px) {

    /* Contenitore centrale più ampio */
    .agriflora-intro-content {
        width: min(94vw, 1300px);
    }


    /* -----------------------------------------------------
       SIMBOLO
       ----------------------------------------------------- */

    .agriflora-intro-logo {
        width: clamp(180px, 11vw, 240px);

        /*
         * Movimento iniziale più ampio rispetto
         * a tablet e mobile.
         */
        transform: translateY(130px);
    }


    /* -----------------------------------------------------
       AMORFINI
       ----------------------------------------------------- */

    .agriflora-intro-name {
        font-size: clamp(64px, 5.8vw, 96px);

        /*
         * Entrata più ampia sul desktop.
         */
        transform: translateY(48px);
    }


    /* -----------------------------------------------------
       GARDEN
       ----------------------------------------------------- */

    .agriflora-intro-subname {
        font-size: clamp(22px, 2vw, 32px);

        /*
         * Movimento verticale più marcato.
         */
        transform: translateY(38px);
    }


    /* -----------------------------------------------------
       CLAIM
       ----------------------------------------------------- */

    .agriflora-intro-claim {
        max-width: 1100px;

        font-size: clamp(22px, 1.7vw, 30px);

        /*
         * Movimento più ampio per rendere
         * l'ingresso percepibile anche su monitor grandi.
         */
        transform: translateY(34px);
    }
}