/* ==========================================================
   Intro: sott'acqua, il logo 3D affonda lentamente dall'alto fino al centro.
   html.intro-pending → tutto nascosto finché la pagina non è pronta
   html.intro-run     → il velo si apre, il logo affonda (main.js)
   html.intro-splash  → il logo si avvicina al centro: il resto emerge con calma
   ========================================================== */

:root {
    --intro-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Velo scuro che si apre rapidamente per mostrare la caduta */
.intro-veil {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    background: #000;
    opacity: 0;
}

html.intro-pending .intro-veil,
html.intro-run .intro-veil {
    opacity: 1;
}

html.intro-run .intro-veil {
    animation: intro-veil 1.6s ease-out forwards;
}

@keyframes intro-veil {
    to { opacity: 0; }
}

/* Finché il logo scende non si interagisce con la hero; il menu è cliccabile appena compare */
html.intro-pending .layer[data-section="hero"],
html.intro-run:not(.intro-splash) .layer[data-section="hero"] {
    pointer-events: none;
}

/* ---------- Prima dell'impatto: solo acqua e logo in caduta ---------- */
html.intro-pending .circle-border,
html.intro-pending .emanuele-logo img,
html.intro-pending .nav-link,
html.intro-pending .lance-left img,
html.intro-pending .lance-right img,
html.intro-pending .depth-hud,
html.intro-pending .ascend,
html.intro-run:not(.intro-splash) .circle-border,
html.intro-run:not(.intro-splash) .emanuele-logo img,
html.intro-run:not(.intro-splash) .nav-link,
html.intro-run:not(.intro-splash) .lance-left img,
html.intro-run:not(.intro-splash) .lance-right img,
html.intro-run:not(.intro-splash) .depth-hud,
html.intro-run:not(.intro-splash) .ascend {
    opacity: 0;
}

/* ---------- Arrivo: il cerchio si rivela attorno al logo che rallenta ---------- */
html.intro-splash .circle-border {
    animation: intro-surface 2.4s cubic-bezier(0.25, 0.8, 0.3, 1) both;
}

/* La scala si somma al translate(-50%, -50%) che centra il cerchio: il translate
   compensa lo spostamento, così il centro (e il logo che lo segue) resta fermo */
@keyframes intro-surface {
    0% { opacity: 0; scale: 1.25; translate: 12.5% 12.5%; filter: blur(6px); }
    100% { opacity: 1; scale: 1; translate: 0 0; filter: none; }
}

/* ---------- Gli altri elementi emergono lentamente dall'acqua ---------- */
html.intro-splash .emanuele-logo img {
    animation: intro-surface-up 2.2s var(--intro-ease) 0.9s both;
}

@keyframes intro-surface-up {
    0% { opacity: 0; filter: blur(10px); translate: 0 26px; }
    100% { opacity: 0.8; filter: none; translate: 0 0; }
}

html.intro-splash .nav-link {
    animation: intro-float 2.4s var(--intro-ease) both;
}

html.intro-splash .corner-tl .nav-link { animation-delay: 1.5s; }
html.intro-splash .corner-tr .nav-link { animation-delay: 1.7s; }
html.intro-splash .corner-bl .nav-link { animation-delay: 1.9s; }
html.intro-splash .corner-br .nav-link { animation-delay: 2.1s; }

/* Risalita con un piccolo ondeggiamento, come oggetti che tornano a galla */
@keyframes intro-float {
    /* Il filtro finisce con lo stesso alone delle voci del menu (depth.css), così non scatta a fine intro */
    0% { opacity: 0; filter: blur(8px) drop-shadow(0 0 6px rgba(255, 255, 255, 0)) drop-shadow(0 0 18px rgba(255, 255, 255, 0)); translate: 0 34px; rotate: -4deg; }
    55% { opacity: 1; filter: blur(0) drop-shadow(0 0 6px rgba(255, 255, 255, 0.28)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.16)); translate: 0 -5px; rotate: 1.5deg; }
    80% { translate: 0 2px; rotate: -0.5deg; }
    100% { opacity: 1; filter: blur(0) drop-shadow(0 0 6px rgba(255, 255, 255, 0.28)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.16)); translate: 0 0; rotate: 0deg; }
}

/* Le lance affiorano accanto al cerchio */
html.intro-splash .lance-left img {
    animation: intro-wave-left 2.4s var(--intro-ease) 1.2s both;
}

html.intro-splash .lance-right img {
    animation: intro-wave-right 2.4s var(--intro-ease) 1.2s both;
}

@keyframes intro-wave-left {
    0% { opacity: 0; translate: 0 50px; }
    100% { opacity: 0.7; translate: 0 0; }
}

@keyframes intro-wave-right {
    0% { opacity: 0; translate: 0 50px; }
    100% { opacity: 0.7; translate: 0 0; }
}

/* HUD per ultimo */
/* Il pulsante "Ascend" non si anima: in superficie deve restare nascosto */
html.intro-splash .depth-hud {
    animation: intro-fade 1.6s ease-out 2.6s both;
}

@keyframes intro-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Movimento ridotto: tutto appare subito */
@media (prefers-reduced-motion: reduce) {
    html.intro-splash *,
    html.intro-splash *::before,
    html.intro-splash *::after {
        animation-duration: 0.01s !important;
        animation-delay: 0s !important;
    }
}

/* Intro velocizzata con un clic: le animazioni d'ingresso si concludono prima, ma sempre in sequenza */
html.intro-fast .intro-veil {
    animation: intro-veil 0.7s ease-out forwards !important;
}

html.intro-fast.intro-splash .circle-border {
    animation-duration: 1s !important;
    animation-delay: 0s !important;
}

html.intro-fast.intro-splash .emanuele-logo img {
    animation-duration: 1s !important;
    animation-delay: 0.1s !important;
}

html.intro-fast.intro-splash .lance-left img,
html.intro-fast.intro-splash .lance-right img {
    animation-duration: 1.1s !important;
    animation-delay: 0.2s !important;
}

html.intro-fast.intro-splash .nav-link {
    animation-duration: 1.1s !important;
}

html.intro-fast.intro-splash .corner-tl .nav-link { animation-delay: 0.2s !important; }
html.intro-fast.intro-splash .corner-tr .nav-link { animation-delay: 0.28s !important; }
html.intro-fast.intro-splash .corner-bl .nav-link { animation-delay: 0.36s !important; }
html.intro-fast.intro-splash .corner-br .nav-link { animation-delay: 0.44s !important; }

html.intro-fast.intro-splash .depth-hud {
    animation-duration: 0.9s !important;
    animation-delay: 0.5s !important;
}