/* Home hero — Three.js esagoni + copy sincronizzato all'onda */

.hero--video {
    position: relative;
    overflow: hidden;
}

.hero--video .hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #010203;
}

.hero--video .hero-video-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(1, 2, 3, 0.75));
}

/* Sfondo esagoni offline: vignetta come hero-ig-consulting-offline.html */
.hero--ig-three .hero-video-wrap::after {
    background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(1, 2, 3, 0.8));
}

#hero-ig-three-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.hero--video.hero--video-static .hero-video-wrap {
    background:
        url("../images/video/hero-ig-consulting-poster.jpg") 58% center / cover no-repeat,
        #010203;
}

.hero--ig-three.hero--video-static .hero-video-wrap,
.hero--ig-three.hero--video.hero--video-static .hero-video-wrap {
    background: #010203;
}

.hero--video.hero--video-static #hero-ig-three-canvas {
    display: none;
}

.hero--video.hero--video-static .hero-image-container {
    display: none;
}

.hero--video .hero-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
    display: block;
}

.hero--video .hero-overlay {
    background:
        linear-gradient(90deg, rgba(1, 2, 3, 0.82) 0%, rgba(1, 8, 7, 0.45) 42%, rgba(44, 158, 142, 0.06) 62%, transparent 78%),
        linear-gradient(180deg, rgba(1, 2, 3, 0.5) 0%, transparent 42%, rgba(1, 2, 3, 0.35) 100%);
    z-index: 1;
}

.hero--video.hero--ig-three .hero-overlay {
    background: transparent;
}

.hero--video .hero-content {
    position: relative;
    z-index: 2;
}

.hero--video .hero-image-container {
    display: none;
}

/* Copy nascosto fino al passaggio dell'onda */
.hero--video.hero--await-wave .hero-content {
    pointer-events: none;
}

.hero--video.hero--await-wave .hero-content .animate-on-scroll,
.hero--video.hero--await-wave .hero-content .hero-subtitle,
.hero--video.hero--await-wave .hero-content .hero-buttons {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
    filter: blur(10px);
}

.hero--video.hero--copy-visible .hero-content {
    pointer-events: auto;
}

.hero--video .hero-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    margin: 0 0 1.15rem;
    padding: 0;
    list-style: none;
}

.hero--video .hero-kicker__pill {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(220, 248, 242, 0.95);
    background: rgba(44, 158, 142, 0.18);
    border: 1px solid rgba(44, 158, 142, 0.45);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.hero--video.hero--await-wave .hero-content .hero-kicker {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
    filter: blur(10px);
}

.hero--video.hero--copy-visible .hero-content .hero-kicker.animate-on-scroll,
.hero--video.hero--copy-visible .hero-content .hero-kicker {
    opacity: 1;
    transform: none;
    filter: none;
    transition:
        opacity 1.05s ease,
        transform 1.05s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 1.05s ease;
    transition-delay: 0ms;
}

.hero--video.hero--copy-visible .hero-content h1.animate-on-scroll {
    opacity: 1;
    transform: none;
    filter: none;
    transition:
        opacity 1.05s ease,
        transform 1.05s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 1.05s ease;
    transition-delay: 120ms;
}

.hero--video.hero--copy-visible .hero-content .hero-subtitle.animate-on-scroll,
.hero--video.hero--copy-visible .hero-content p.hero-subtitle {
    opacity: 1;
    transform: none;
    filter: none;
    transition:
        opacity 1.05s ease,
        transform 1.05s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 1.05s ease;
    transition-delay: 400ms;
}

.hero--video.hero--copy-visible .hero-content .hero-buttons.animate-on-scroll,
.hero--video.hero--copy-visible .hero-content .hero-buttons {
    opacity: 1;
    transform: none;
    filter: none;
    transition:
        opacity 1.05s ease,
        transform 1.05s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 1.05s ease;
    transition-delay: 680ms;
}

/* Seconda visita nella sessione: copy subito; onda Three.js resta visibile */
html.ig-hero-wave-seen .hero--video.hero--await-wave .hero-content {
    pointer-events: auto;
}

html.ig-hero-wave-seen .hero--video.hero--await-wave .hero-content .hero-kicker,
html.ig-hero-wave-seen .hero--video.hero--await-wave .hero-content .animate-on-scroll,
html.ig-hero-wave-seen .hero--video.hero--await-wave .hero-content .hero-subtitle,
html.ig-hero-wave-seen .hero--video.hero--await-wave .hero-content .hero-buttons {
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
    transition-delay: 0ms;
}

/* Ponte visivo hero → prima sezione */
.intro-section--after-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f7f9f9 8%, #ffffff 20%);
    padding-top: clamp(4rem, 8vw, 6rem);
}

.intro-section--after-hero .intro-title,
.intro-section--after-hero .intro-text {
    transition-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
    .hero--video .hero-video-wrap video {
        display: none;
    }

    .hero--video .hero-video-wrap {
        background:
            url("../images/video/hero-ig-consulting-poster.jpg") 58% center / cover no-repeat,
            #010203;
    }

    .hero--ig-three .hero-video-wrap {
        background: #010203;
    }

    .hero--video #hero-ig-three-canvas {
        display: none;
    }

    .hero--video.hero--await-wave .hero-content,
    .hero--video.hero--copy-visible .hero-content {
        pointer-events: auto;
    }

    .hero--video .hero-content .hero-kicker,
    .hero--video .hero-content .animate-on-scroll,
    .hero--video .hero-content .hero-subtitle,
    .hero--video .hero-content .hero-buttons {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

@media (max-width: 768px) {
    .hero--video .hero-video-wrap video {
        object-position: 65% center;
    }

    .hero--video:not(.hero--ig-three) .hero-overlay {
        background:
            linear-gradient(180deg, rgba(1, 2, 3, 0.75) 0%, rgba(1, 2, 3, 0.35) 45%, rgba(1, 2, 3, 0.65) 100%);
    }
}
/* Hero: titoli e copy sempre visibili nel viewport (tutte le pagine) */

:root {
    --ig-hero-header: 4.75rem;
}

.hero {
    min-height: min(40rem, 100svh);
    max-height: none;
    padding: max(5.25rem, calc(var(--ig-hero-header) + 0.75rem)) clamp(1.25rem, 4vw, 2rem)
        clamp(1.25rem, 4.5vh, 2.75rem);
    box-sizing: border-box;
    overflow: hidden;
}

.hero-content {
    width: 100%;
    max-width: min(1000px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.hero h1 {
    font-size: var(--ig-hero-title);
    line-height: 1.15;
    margin-bottom: clamp(0.5rem, 1.5vh, 1.25rem);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}

.hero-subtitle {
    font-size: var(--ig-hero-lead);
    line-height: 1.5;
    margin-bottom: clamp(0.85rem, 2.5vh, 2rem);
    text-wrap: pretty;
}

.hero-buttons {
    margin-top: clamp(0.65rem, 2vh, 1.75rem);
    gap: clamp(0.65rem, 1.5vw, 1.25rem);
}

/* Landing BI / ProTrack / gestionale */
.hero.hero--bi {
    min-height: min(36rem, 100svh);
    align-items: flex-start;
    justify-content: center;
}

.hero.hero--bi .hero-content {
    padding: clamp(4.25rem, 8.5vh, 5.25rem) 0 clamp(0.85rem, 2.5vh, 1.5rem);
}

.hero--bi-copy {
    max-width: min(34rem, 58vw);
}

.hero.hero--bi h1 {
    font-size: var(--ig-hero-title);
    max-width: 22em;
}

.hero.hero--bi .hero-subtitle {
    font-size: var(--ig-hero-lead);
    max-width: 36em;
}

.hero.hero--pt h1 {
    font-size: var(--ig-hero-title);
    max-width: 19em;
}

.hero.hero--pt .hero--bi-copy {
    max-width: min(32rem, 56vw);
}

/* Grafica hero a destra, testo a sinistra */
.hero.hero--bi .hero-image[src*="hero-v2"],
.hero.hero--bi .hero-image[src*="hero%20servizi"],
.hero.hero--bi .hero-image[src*="hero servizi"] {
    object-fit: cover;
    object-position: right center;
    transform: none !important;
}

.hero.hero--bi:hover .hero-image[src*="hero-v2"],
.hero.hero--bi:hover .hero-image[src*="hero%20servizi"],
.hero.hero--bi:hover .hero-image[src*="hero servizi"] {
    transform: none !important;
}

.hero.hero--bi .hero-overlay {
    background: linear-gradient(
        102deg,
        rgba(0, 18, 16, 0.9) 0%,
        rgba(0, 22, 20, 0.78) 36%,
        rgba(0, 35, 32, 0.42) 56%,
        rgba(0, 55, 49, 0.14) 78%,
        transparent 100%
    );
}

/* Home video / Three.js */
.hero--video {
    height: var(--ig-hero-height);
    min-height: var(--ig-hero-height);
    max-height: var(--ig-hero-height);
    padding-top: max(5rem, var(--ig-hero-header));
    padding-bottom: clamp(1.25rem, 4vh, 2.5rem);
}

.hero--video .hero-content {
    max-width: min(40rem, 92vw);
}

.hero--video h1 {
    font-size: var(--ig-hero-title);
    text-wrap: balance;
}

/* Chi siamo */
.hero--ig-chi-siamo {
    min-height: min(36rem, 100svh);
    max-height: 100svh;
    overflow: hidden;
}

.hero--ig-chi-siamo .hero-content {
    padding: clamp(4.25rem, 8.5vh, 5.5rem) clamp(1.25rem, 4vw, 2rem) clamp(1rem, 3vh, 1.75rem);
}

.hero--ig-chi-siamo h1 {
    font-size: var(--ig-hero-title);
    text-wrap: balance;
    max-width: 18em;
}

.hero-ig-chi-siamo-subtitle {
    font-size: var(--ig-hero-lead);
}

/* Servizi hub */
body.servizi-page .mk-hero.sv-page-hero {
    min-height: min(34rem, 100svh);
    max-height: 100svh;
    overflow: hidden;
}

body.servizi-page .sv-page-hero__grid {
    padding: max(5rem, calc(var(--ig-hero-header) + 0.5rem)) 0 clamp(1.25rem, 3.5vh, 2.5rem);
    min-height: 0;
    align-items: center;
}

body.servizi-page .sv-page-hero__copy h1.mk-display {
    max-width: none;
    font-size: clamp(1.45rem, 3.8vw + 0.35rem, 3.35rem) !important;
    line-height: 1.12;
    text-wrap: balance;
}

body.servizi-page .sv-page-hero__copy > p {
    font-size: clamp(0.9rem, 1.4vw + 0.3rem, 1.1rem);
    max-width: 42em;
    text-wrap: pretty;
}

@media (max-height: 820px) {
    .hero {
        min-height: auto;
        padding-top: max(4.5rem, var(--ig-hero-header));
        padding-bottom: 1rem;
    }

    .hero h1 {
        font-size: var(--ig-hero-title);
    }

    .hero-subtitle {
        font-size: var(--ig-hero-lead);
        margin-bottom: 0.65rem;
    }

    .hero-buttons {
        margin-top: 0.5rem;
    }

    .hero.hero--bi .hero-content {
        padding-top: 4.25rem;
        padding-bottom: 0.75rem;
    }

    .hero.hero--bi h1,
    .hero.hero--pt h1 {
        font-size: var(--ig-hero-title);
    }

    body.servizi-page .sv-page-hero__grid {
        padding-top: 4.5rem;
        padding-bottom: 1rem;
    }

    body.servizi-page .sv-page-hero__copy h1.mk-display {
        font-size: clamp(1.25rem, 5vw, 1.65rem) !important;
    }
}

@media (max-width: 768px) {
    .hero--bi-copy,
    .hero.hero--pt .hero--bi-copy {
        max-width: 100%;
    }

    .hero.hero--bi h1,
    .hero.hero--pt h1 {
        max-width: none;
    }

    .hero.hero--bi .hero-image[src*="hero-v2"],
    .hero.hero--bi .hero-image[src*="hero%20servizi"],
    .hero.hero--bi .hero-image[src*="hero servizi"] {
        object-fit: cover;
        object-position: 80% center;
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero.hero--bi .hero-image {
        transform: none !important;
    }
}