/* ====================================
   INTRO GATE (Ingresso sito)
   ==================================== */

#welcome-intro {
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow: hidden;
    background:
        radial-gradient(1200px 520px at 52% -12%, rgba(255, 242, 167, 0.55), transparent 62%),
        linear-gradient(180deg, #70c4ff 0%, #89d0ff 48%, #b8e4ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: skyPulse 9s ease-in-out infinite;
}

#welcome-intro::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.35) 0 90px, transparent 92px),
        radial-gradient(circle at 82% 24%, rgba(255, 255, 255, 0.28) 0 110px, transparent 112px),
        radial-gradient(circle at 74% 72%, rgba(255, 255, 255, 0.25) 0 130px, transparent 132px);
    opacity: 0.45;
    filter: blur(16px);
    z-index: 1;
    pointer-events: none;
    animation: hazeDrift 22s linear infinite;
}

body.intro-active #ui-overlay {
    opacity: 0;
    pointer-events: none;
}

.intro-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 8;
}

/* Disattiva i vecchi layer rumorosi */
.intro-cloud-layer {
    display: none;
}

.cloud-curtain {
    position: absolute;
    top: -6%;
    bottom: -6%;
    pointer-events: none;
    opacity: 1;
    z-index: 10;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: transform 1650ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1200ms ease;
    filter: drop-shadow(0 14px 24px rgba(92, 146, 190, 0.28));
}

.cloud-curtain-left,
.cloud-curtain-right {
    width: 58vw;
    background-image:
        radial-gradient(ellipse 44% 15% at 15% 7%, rgba(255,255,255,1) 0 74%, rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 42% 15% at 20% 22%, rgba(255,255,255,1) 0 74%, rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 46% 16% at 16% 39%, rgba(255,255,255,1) 0 74%, rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 42% 15% at 22% 56%, rgba(255,255,255,1) 0 74%, rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 47% 16% at 18% 74%, rgba(255,255,255,1) 0 74%, rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 42% 15% at 22% 90%, rgba(255,255,255,1) 0 74%, rgba(255,255,255,0) 76%),
        linear-gradient(180deg, rgba(242,250,255,0.98), rgba(242,250,255,0.98));
    clip-path: polygon(0 0, 72% 0, 83% 8%, 73% 17%, 86% 28%, 72% 40%, 85% 52%, 71% 64%, 85% 77%, 72% 89%, 80% 100%, 0 100%);
}

.cloud-curtain-left {
    left: -6vw;
    animation: curtainFloatLeft 8s ease-in-out infinite;
}

.cloud-curtain-right {
    right: -6vw;
    transform: scaleX(-1);
    animation: curtainFloatRight 8.5s ease-in-out infinite;
}

.cloud-curtain-center {
    left: 50%;
    top: -8%;
    width: 36vw;
    height: 116%;
    transform: translateX(-50%);
    background-image:
        radial-gradient(ellipse 40% 16% at 28% 8%, rgba(255,255,255,1) 0 74%, rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 42% 17% at 70% 12%, rgba(255,255,255,1) 0 74%, rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 46% 18% at 50% 34%, rgba(255,255,255,1) 0 74%, rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 48% 19% at 50% 58%, rgba(255,255,255,1) 0 74%, rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 45% 18% at 50% 80%, rgba(255,255,255,1) 0 74%, rgba(255,255,255,0) 76%),
        linear-gradient(180deg, rgba(240,250,255,0.99), rgba(240,250,255,0.99));
    clip-path: polygon(13% 0, 87% 0, 95% 8%, 84% 18%, 96% 29%, 82% 41%, 95% 53%, 81% 65%, 95% 78%, 82% 90%, 90% 100%, 10% 100%, 18% 90%, 5% 78%, 19% 65%, 5% 53%, 18% 41%, 4% 29%, 16% 18%, 5% 8%);
    animation: curtainFloatCenter 7.2s ease-in-out infinite;
}

#welcome-intro.is-leaving .cloud-curtain-left {
    transform: translateX(-75vw);
    opacity: 0;
}

#welcome-intro.is-leaving .cloud-curtain-right {
    transform: scaleX(-1) translateX(-75vw);
    opacity: 0;
}

#welcome-intro.is-leaving .cloud-curtain-center {
    transform: translateX(-50%) scale(0.16);
    opacity: 0;
}

.floating-cloud {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    filter: blur(2px);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    pointer-events: none;
}

.intro-card {
    position: relative;
    z-index: 30;
    width: min(760px, 92vw);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(23, 73, 113, 0.22);
    backdrop-filter: blur(10px);
    padding: 30px 30px 24px;
    text-align: center;
    transition: transform 700ms ease, opacity 700ms ease;
}

#welcome-intro.is-leaving .intro-card {
    opacity: 0;
    transform: translateY(-26px) scale(0.95);
}

.intro-mascot {
    width: 88px;
    height: 88px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffdea7, #f9bf69);
    position: relative;
    box-shadow: 0 10px 24px rgba(240, 160, 65, 0.35);
    animation: introBounce 2.1s ease-in-out infinite;
}

.intro-mascot::before,
.intro-mascot::after {
    content: "";
    position: absolute;
    top: 34px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #2d3748;
}

.intro-mascot::before { left: 24px; }
.intro-mascot::after { right: 24px; }

.intro-mascot-smile {
    width: 30px;
    height: 15px;
    border: 3px solid #2d3748;
    border-top: 0;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin: -6px auto 0;
}

.intro-title {
    font-size: clamp(28px, 4.2vw, 46px);
    line-height: 1.08;
    margin: 0 0 10px;
    color: #123f64;
    letter-spacing: 0.01em;
}

.intro-copy {
    margin: 0 auto 18px;
    max-width: 58ch;
    color: #2f5f80;
    font-size: clamp(16px, 2.1vw, 20px);
    line-height: 1.48;
}

#intro-enter-btn {
    border: none;
    border-radius: 999px;
    padding: 13px 26px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(120deg, #0b93df 0%, #0d69ad 100%);
    box-shadow: 0 12px 24px rgba(17, 120, 186, 0.32);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

#intro-enter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(14, 131, 204, 0.42);
}

#intro-enter-btn:active {
    transform: translateY(0);
}

@keyframes skyPulse {
    0%, 100% { filter: saturate(1); }
    50% { filter: saturate(1.05); }
}

@keyframes hazeDrift {
    from { transform: translateX(0); }
    to { transform: translateX(-90px); }
}

@keyframes introBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes curtainFloatLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(1.3vw); }
}

@keyframes curtainFloatRight {
    0%, 100% { transform: scaleX(-1) translateX(0); }
    50% { transform: scaleX(-1) translateX(-1.3vw); }
}

@keyframes curtainFloatCenter {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(1vh); }
}

@media (prefers-reduced-motion: reduce) {
    .intro-mascot,
    .cloud-curtain,
    #welcome-intro,
    #welcome-intro::before,
    .floating-cloud {
        animation: none;
    }

    #welcome-intro.is-leaving .cloud-curtain-left,
    #welcome-intro.is-leaving .cloud-curtain-right,
    #welcome-intro.is-leaving .cloud-curtain-center,
    #welcome-intro.is-leaving .intro-card {
        transition-duration: 1ms;
    }
}

@media (max-width: 900px) {
    .cloud-curtain-left,
    .cloud-curtain-right {
        width: 66vw;
    }

    .cloud-curtain-center {
        width: 48vw;
    }

    .intro-card {
        padding: 24px 20px 20px;
    }
}