/* =========================
   HERO — versione statica
   ========================= */

.hero--static {
    position: relative;
    background: url('../images/hero_background.svg') center/cover no-repeat;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding-top: clamp(110px, 13vh, 140px); /* spazio sotto l’header fisso */
    padding-bottom: clamp(32px, 6vh, 56px);
    overflow: hidden;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); /* testo un po’ più largo */
    align-items: center;
    gap: clamp(20px, 3vw, 40px); /* meno gap → più vicini */
}

.hero__content {
    max-width: 640px;
    padding-left: 0;
}

.hero__title {
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.15;
    margin: 0 0 .25em;
    color: var(--primary-dark);
}

.hero__subtitle {
    color: var(--ink-700);
    margin: 0 0 1.2em;
    font-size: clamp(16px, 1.3vw, 18px);
}

/* bullets */
.hero__bullets {
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    color: var(--ink-700);
}

.hero__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.hero__bullets span {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--ink-900);
    font-weight: 700;
    line-height: 1;
    font-size: 13px;
    margin-top: 2px;
}

/* ==== Illustrazione destra ==== */

.hero__image {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
}

/* SVG più grande e un po’ più vicino al testo */
.hero__image .hero-illu {
    width: clamp(520px, 50vw, 900px); /* più grande */
    max-width: 100%;
    height: auto;
    display: inline-block;
    transform-origin: center;
}

/* ===== Animazioni cerchi + foglia + puntini ===== */

/* Cerchi: movimento orbitale + respiro più grande */
.illu-circles {
    transform-box: fill-box;
    transform-origin: center;
    animation: illu-orbit 16s ease-in-out infinite alternate,
    illu-circles-breathe 7s ease-in-out infinite;
}

/* Leaf (ovale azzurro) molto più vivo: espansione morbida */
.illu-leaf {
    transform-box: fill-box;
    transform-origin: center;
    animation: illu-float 6s ease-in-out infinite,
    illu-leaf-breathe 8s ease-in-out infinite alternate;
}

/* Puntini: ancora più grandi e “soft” */
.illu-dots .dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: illu-pulse 4s ease-in-out infinite;
}

/* Delays diversi per movimento naturale */
.illu-dots .dot--b {
    animation-delay: .6s;
}

.illu-dots .dot--c {
    animation-delay: 1.2s;
}

.illu-dots .dot--d {
    animation-delay: 1.8s;
}

/* === Keyframes === */

/* cerchi: orbita più ampia */
@keyframes illu-orbit {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(-24px, 14px);
    }
    100% {
        transform: translate(18px, -20px);
    }
}

/* cerchi: respiro */
@keyframes illu-circles-breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

/* leaf: respiro forte */
@keyframes illu-leaf-breathe {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.16);
    }
    100% {
        transform: scale(1);
    }
}

/* leaf: galleggia leggermente */
@keyframes illu-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* puntini più grandi */
@keyframes illu-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: .75;
    }
    50% {
        transform: scale(2.2); /* molto più evidente */
        opacity: 1;
    }
}

/* riduzione animazioni */
@media (prefers-reduced-motion: reduce) {
    .illu-circles,
    .illu-leaf,
    .illu-dots .dot {
        animation: none !important;
    }
}

/* ===== ANIMAZIONI BARRETTE ===== */
.illu-bars rect {
    transform-origin: left center;
    animation: bar-move 5.5s ease-in-out infinite alternate;
}

/* Delay leggero sulle due barrette per movimento più naturale */
.illu-bars rect:nth-child(1) {
    animation-delay: .3s;
}

.illu-bars rect:nth-child(2) {
    animation-delay: .6s;
}

/* Keyframes */
@keyframes bar-move {
    0% {
        transform: translateX(0) scaleX(1);
        opacity: 0.9;
    }
    50% {
        transform: translateX(-18px) scaleX(1.15); /* si allunga e si sposta */
        opacity: 1;
    }
    100% {
        transform: translateX(-32px) scaleX(1); /* ritorno lieve */
        opacity: 0.85;
    }
}

/* Mobile: illustrazione centrata e ridimensionata */
@media (max-width: 900px) {
    .hero__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero__image {
        justify-content: center;
        margin-top: 10px;
    }

    .hero__image .hero-illu {
        width: min(520px, 80vw);
    }
}