/* ==========================================================================
   Video di lancio della home (Components/HomeLaunchVideo.razor + js/home-launch-video.js).
   Stile V2: player 16:9 a tutta larghezza del contenitore (quasi a pieno schermo, come Planitude)
   con raggio e ombra calda, alone morbido dietro, un solo accento rosso sul bottone play.
   Solo token var(--v2-*), proprieta' logiche (RTL ok).
   Comparsa legata allo scroll (--lp, js/home-launch-video.js): con prefers-reduced-motion e' ferma.
   Versione nel link: HomeLaunchVideo.AssetVersion (aumentarla a ogni modifica).
   ========================================================================== */

.hlv-wrap {
    /* --lp: avanzamento dello scroll (js/home-launch-video.js): 0 quando il bordo alto entra dal
       basso, 1 quando il centro del player arriva al centro della finestra. Fermo (senza JS o con
       prefers-reduced-motion) = 1, stato finale. Come il video di lancio di Planitude. */
    --lp: 1;
    position: relative;
    margin-inline: auto; /* tutta la larghezza del contenitore: quasi a pieno schermo (Stefano 07/10) */
    isolation: isolate;
}

/* alone morbido dietro il player, contenuto nella larghezza della pagina (niente scroll orizzontale) */
.hlv-halo {
    position: absolute;
    inset: 8% 4% -6%;
    z-index: -1;
    border-radius: var(--v2-r-banner);
    background: var(--v2-soft-grad);
    filter: blur(40px);
    opacity: 0.9;
    pointer-events: none;
}

.hlv-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--v2-r-card);
    background: var(--v2-canvas);
    box-shadow:
        var(--v2-shadow-xl),
        0 0 0 1px rgb(var(--v2-shadow-rgb) / 0.08);
    /* entra un po' piu' piccolo e piu' in basso e si assesta con lo scroll (effetto keynote) */
    transform: translateY(calc((1 - var(--lp)) * 48px)) scale(calc(0.84 + 0.16 * var(--lp)));
    transform-origin: 50% 40%;
    will-change: transform;
}

.hlv-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--v2-canvas);
}

/* bottone play al centro: solo con lo script del player (senza, restano i comandi nativi) e fino al primo play */
.hlv-play {
    display: none;
}
.v2-js .hlv-play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: auto; /* centrato senza transform: uguale in LTR e RTL */
    padding: 0;
    border: 0;
    border-radius: var(--v2-r-pill);
    background: var(--v2-accent);
    color: var(--v2-surface);
    box-shadow:
        0 18px 40px -14px rgb(var(--v2-shadow-rgb) / 0.6),
        0 0 0 10px color-mix(in srgb, var(--v2-surface) 35%, transparent);
    cursor: pointer;
    transition:
        transform var(--v2-dur-fast) var(--v2-ease-out),
        background-color var(--v2-dur-fast) var(--v2-ease-out);
}
.hlv-play svg {
    margin-inline-start: 4px; /* il triangolo sembra centrato (il simbolo play non si specchia in RTL) */
}
[dir="rtl"] .hlv-play svg {
    margin-inline-start: 0;
    margin-inline-end: 4px;
}
.v2-js .hlv-play:hover {
    background: var(--v2-accent-hover);
    transform: scale(1.06);
}
.v2-js .hlv-play:active {
    background: var(--v2-accent-active);
}
.hlv-play:focus-visible {
    outline: 3px solid var(--v2-accent);
    outline-offset: 4px;
}
/* finche' js/home-launch-video.js non e' partito (o dopo il primo play) il bottone non c'e' */
.hlv-stage:not(.is-ready) .hlv-play,
.hlv-stage.is-started .hlv-play {
    display: none;
}

@media (max-width: 767px) {
    .hlv-stage {
        border-radius: var(--v2-r-media);
    }
    .v2-js .hlv-play {
        width: 64px;
        height: 64px;
        box-shadow:
            0 14px 30px -12px rgb(var(--v2-shadow-rgb) / 0.6),
            0 0 0 7px color-mix(in srgb, var(--v2-surface) 35%, transparent);
    }
    .hlv-play svg {
        width: 24px;
        height: 24px;
    }
    .hlv-halo {
        filter: blur(28px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hlv-stage {
        transform: none;
        will-change: auto;
    }
    .v2-js .hlv-play {
        transition: none;
    }
    .v2-js .hlv-play:hover {
        transform: none;
    }
}

/* Pulsante "Attiva l'audio": classe comune .v2-vid-unmute (css/site-v2.css), visibile solo
   durante l'autoplay muto (.is-muted-auto sullo stage). */