#titolo {
    min-height: 84vh;

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

    text-align: center;

    padding: 70px 32px 48px;
    margin-bottom: 60px;

    position: relative;
    overflow: hidden;

    z-index: 99;

    background:
        radial-gradient(circle at top,
        var(--banner-overlay),
        transparent 55%),

       linear-gradient(to bottom,
        var(--banner-bg-top) 0%,
        var(--banner-bg-bottom) 60%),

        var(--banner-image);

        background-size:
            auto,
            auto,
            cover;

        background-position:
            center,
            center,
            center;

        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat;

        background-blend-mode:
            screen,
            multiply,
            normal;
}

/* Bordo attorno */
#titolo::before {
    content: '';

    position: absolute;

    inset: 40px 40px 64px;

    border: 1px solid var(--shadow);

    pointer-events: none;
}

#titolo::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    background: radial-gradient(
        circle,
        var(--shadow) 0%,
        var(--banner-overlay-soft) 35%,
        transparent 70%
    );

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;
}

#titolo-contenuto {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 20px;

    max-width: 700px;

    animation: fadeUp 1s ease both;
}

.titoletto {
    font-family: var(--font-title);

    font-size: 0.75rem;

    letter-spacing: 0.35em;

    text-transform: uppercase;

    color: var(--primary);
}

#titolo-titolo {
    font-family: var(--font-title);

    font-size: clamp(3rem, 8vw, 6.5rem);

    font-weight: 900;

    letter-spacing: 0.05em;

    line-height: 1.05;

    color: var(--text);

    text-shadow:
        0 0 24px var(--shadow),
        0 0 60px var(--shadow-strong),
        0 4px 12px var(--banner-shadow-dark)
}

.titolo-sottotitolo {
    font-family: var(--font-title);

    font-size: clamp(1rem, 2.5vw, 1.5rem);

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: var(--primary);
}

.titolo-divisore {
    font-size: 0.7rem;

    color: var(--text-muted);

    letter-spacing: 0.6em;
}

.titolo-quote {
    font-size: clamp(1rem, 2vw, 1.2rem);

    font-style: italic;

    line-height: 1.8;

    color: var(--text-muted);

    max-width: 480px;
}

#titolo-scorri {
    position: absolute;

    bottom: 28px;
    left: 50%;

    transform: translateX(-50%);

    font-family: var(--font-title);

    font-size: 0.7rem;

    letter-spacing: 0.3em;

    color: var(--text-muted);

    animation: bounce 2.4s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}