/* 
// ============================================================
// Title: Welcome Animation Styles (Advanced Fly-to-Header)
// Component: #intro-overlay & #intro-logo-container
// ============================================================
*/

:root {
    /* PARAMETRI FINE-TUNING ATTERRAGGIO LOGO */
    --fly-dest-x: calc(-45vw + 20px);
    /* Distanza da sinistra (asse X) */
    --fly-dest-y: calc(-60vh + 5px);
    /* Distanza dall'alto (asse Y) */
    --fly-dest-scale: 0.25;
    /* Dimensione finale (scala) */

    /* TEMPISTICHE (Delay) */
    --fly-start-delay: 3.5s;
    /* Quando inizia il volo */
    --header-logo-fade-delay: 4.2s;
    /* Quando appare il logo reale */
}

#intro-overlay {
    position: fixed;
    inset: 0;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    /* Reveal del sito */
    animation: revealSite 1.0s ease-in-out 3.5s forwards;
}

#intro-logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    /* Base size */
    height: auto;
    transform: translate(-50%, -50%) scale(1);
    z-index: 10000;
}

#intro-logo-container svg {
    width: 100%;
    height: auto;
}

/* Proprietà base dei tracciati */
#intro-logo-container path {
    fill-opacity: 0;
    stroke: #004B93;
    stroke-width: 1.2px;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
}

/* ------------------------------------------------------------
   PHASE 1: STAGGERED OLA (0s - 3.0s)
----------------------------------------------------------- */

/* 1. SCAFO */
#scafo path {
    animation: drawLogo 1.5s ease-in-out 0s forwards,
        fillLogo 0.8s ease-in-out 1.5s forwards;
}

/* 2. VELA */
#vela path {
    animation: drawLogo 1.5s ease-in-out 0.3s forwards,
        fillLogo 0.8s ease-in-out 1.8s forwards;
}

/* 3. SOLE */
#sole path {
    animation: drawLogo 1.5s ease-in-out 0.6s forwards,
        fillLogo 0.8s ease-in-out 2.1s forwards;
}

/* 4. SCRITTA-LE */
#scritta-le path {
    animation: drawLogo 1.5s ease-in-out 0.9s forwards,
        fillLogo 0.8s ease-in-out 2.4s forwards;
}

/* 5. SCRITTA-PETIT */
#scritta-petit path {
    animation: drawLogo 1.5s ease-in-out 1.2s forwards,
        fillLogo 0.8s ease-in-out 2.7s forwards;
}

/* 6. SCRITTA-PORT */
#scritta-port path {
    animation: drawLogo 1.5s ease-in-out 1.5s forwards,
        fillLogo 0.8s ease-in-out 3.0s forwards;
}

/* ------------------------------------------------------------
   PHASE 2: FLY TO HEADER (3.5s - 4.5s)
----------------------------------------------------------- */

#intro-logo-container {
    animation: flyToHeader 1.0s cubic-bezier(0.85, 0, 0.15, 1) var(--fly-start-delay) forwards;
}

/* ------------------------------------------------------------
   KEYFRAMES
----------------------------------------------------------- */

@keyframes drawLogo {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fillLogo {
    to {
        fill-opacity: 1;
        stroke: transparent;
    }
}

@keyframes revealSite {
    to {
        background-color: transparent;
        backdrop-filter: blur(0px);
        pointer-events: none;
    }
}

@keyframes flyToHeader {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        /* Utilizzo delle variabili definite in :root per il fine-tuning */
        transform: translate(var(--fly-dest-x), var(--fly-dest-y)) scale(var(--fly-dest-scale));
        opacity: 0;
    }
}

/* ------------------------------------------------------------
   HEADER LOGO TRANSITION
----------------------------------------------------------- */

/* Nascondiamo il logo reale dell'header all'inizio */
header .logo img {
    opacity: 0;
}

/* Facciamo apparire il logo reale quando quello dell'intro arriva (4.0s - 4.5s) */
@keyframes fadeInHeaderLogo {
    to {
        opacity: 1;
    }
}

header .logo img {
    animation: fadeInHeaderLogo 0.6s ease-in-out var(--header-logo-fade-delay) forwards;
}