/* LAGHI CARPANEA - INTRO ANIMATION OVERLAY
   Pesci che abboccano all'amo e si trasformano nel logo, che poi vola
   alla sua posizione reale in navbar (coordinate calcolate da intro.js
   via custom properties --fly-left/--fly-top/--fly-scale). */

body.intro-active {
    overflow: hidden;
}

#introOverlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #fff;
    animation: introOverlayOut 0.8s ease 5.9s forwards;
}

#stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #dff3ff 0%, #b9e4ff 45%, #4fa8d8 100%);
}

@keyframes introOverlayOut {
    to { opacity: 0; visibility: hidden; }
}

/* ---- acqua ---- */
#water {
    position: absolute;
    left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(180deg, #4fa8d8 0%, #1c6fa8 100%);
    opacity: 0.9;
    animation: waterFade 1.2s ease 4.6s forwards;
}

#water::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 6px;
    background: rgba(255, 255, 255, 0.5);
}

/* ---- lenza ---- */
#line {
    position: absolute;
    top: 0; left: 50%; width: 2px; height: 0%;
    background: #222;
    transform: translateX(-50%);
    animation: dropLine 0.8s ease-out 0.2s forwards,
               lineFade 0.6s ease 4.4s forwards;
}

/* ---- amo ---- */
#hook {
    position: absolute;
    top: 0; left: 50%; width: 46px; height: 90px;
    transform: translate(-50%, 0);
    animation: dropHook 0.8s ease-out 0.2s forwards,
               lineFade 0.6s ease 4.4s forwards;
}

#hook svg { width: 100%; height: 100%; display: block; }

@keyframes dropLine { from { height: 0%; } to { height: 38%; } }
@keyframes dropHook { from { top: 0%; } to { top: 38%; } }
@keyframes lineFade { to { opacity: 0; } }
@keyframes waterFade { to { opacity: 0; } }

/* ---- pesci ---- */
.fish {
    position: absolute;
    width: 70px; height: 34px;
    left: 50%; top: 50%;
    margin-left: -35px;
    margin-top: -17px;
    transform-origin: center;
    opacity: 0;
}

.fish svg { width: 100%; height: 100%; display: block; }

#f-rosso   { animation: swimInRosso   1s ease-out 0.6s forwards, hookRosso   0.8s ease-in 2.0s forwards, toArc 1s ease-in-out 3.0s forwards; }
#f-giallo  { animation: swimInGiallo  1s ease-out 0.9s forwards, hookGiallo  0.8s ease-in 2.3s forwards, toArc 1s ease-in-out 3.0s forwards; }
#f-grigio  { animation: swimInGrigio  1s ease-out 1.2s forwards, hookGrigio  0.8s ease-in 2.6s forwards, toArc 1s ease-in-out 3.0s forwards; }
#f-azzurro { animation: swimInAzzurro 1s ease-out 1.5s forwards, hookAzzurro 0.8s ease-in 2.9s forwards, toArc 1s ease-in-out 3.0s forwards; }

@keyframes swimInRosso {
    0%   { opacity: 0; transform: translate(-260px, 40px) scaleX(1) rotate(-8deg) scale(1.9); }
    100% { opacity: 1; transform: translate(-90px, 10px) scaleX(1) rotate(0deg) scale(1); }
}
@keyframes swimInGiallo {
    0%   { opacity: 0; transform: translate(260px, 60px) scaleX(-1) rotate(8deg) scale(1.9); }
    100% { opacity: 1; transform: translate(90px, 20px) scaleX(-1) rotate(0deg) scale(1); }
}
@keyframes swimInGrigio {
    0%   { opacity: 0; transform: translate(-200px, -70px) scaleX(1) rotate(6deg) scale(1.9); }
    100% { opacity: 1; transform: translate(-40px, -40px) scaleX(1) rotate(0deg) scale(1); }
}
@keyframes swimInAzzurro {
    0%   { opacity: 0; transform: translate(200px, -90px) scaleX(-1) rotate(-6deg) scale(1.9); }
    100% { opacity: 1; transform: translate(40px, -50px) scaleX(-1) rotate(0deg) scale(1); }
}

@keyframes hookRosso {
    0%   { transform: translate(-90px, 10px) scaleX(1) rotate(0deg) scale(1); }
    100% { transform: translate(0px, -15px) scaleX(1) rotate(-15deg) scale(0.9); }
}
@keyframes hookGiallo {
    0%   { transform: translate(90px, 20px) scaleX(-1) rotate(0deg) scale(1); }
    100% { transform: translate(0px, -15px) scaleX(-1) rotate(15deg) scale(0.9); }
}
@keyframes hookGrigio {
    0%   { transform: translate(-40px, -40px) scaleX(1) rotate(0deg) scale(1); }
    100% { transform: translate(0px, -25px) scaleX(1) rotate(-10deg) scale(0.9); }
}
@keyframes hookAzzurro {
    0%   { transform: translate(40px, -50px) scaleX(-1) rotate(0deg) scale(1); }
    100% { transform: translate(0px, -25px) scaleX(-1) rotate(10deg) scale(0.9); }
}

@keyframes toArc {
    0%   { opacity: 1; }
    60%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- logo animato: appare al centro, poi vola alla posizione reale del
   logo in navbar (--fly-left/--fly-top/--fly-scale impostate da intro.js
   via getBoundingClientRect sul logo vero — fallback se JS non è ancora
   passato, coordinate approssimative in alto a sx) ---- */
#logoWrap {
    position: absolute;
    left: 50%; top: calc(50% - 20px);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: logoAppear 1s ease-out 3.2s forwards,
               logoFly 1.1s ease-in-out 4.6s forwards;
}

#logoWrap svg { width: 260px; height: 260px; overflow: visible; }

@keyframes logoAppear {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes logoFly {
    0%   { left: 50%; top: calc(50% - 20px); transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    100% { left: var(--fly-left, 12%); top: var(--fly-top, 8%); transform: translate(-50%, -50%) scale(var(--fly-scale, 0.18)) rotate(360deg); }
}