/**
 * Reveal on scroll.
 * Gli stati iniziali valgono solo con html.js-reveal (progressive enhancement).
 * Le entrate usano animation + individual transform properties (translate/scale)
 * per non sovrascrivere transition e transform dei componenti.
 * Opzioni per elemento: data-reveal="up|right|line|none".
 */

:root {
    --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --reveal-duration: .7s;
}

/* Stati iniziali */
.js-reveal .rv:not(.is-in) {
    opacity: 0;
}
.js-reveal .rv-line:not(.is-in) {
    scale: 0 1;
    transform-origin: left;
}

/* Entrate */
.rv.is-in {
    animation: rv-fade-up var(--reveal-duration) var(--reveal-ease) both;
    animation-delay: var(--rv-delay, 0ms);
}
.rv[data-reveal="right"].is-in {
    animation-name: rv-fade-right;
}
.rv-line.is-in {
    transform-origin: left;
    animation: rv-line var(--reveal-duration) var(--reveal-ease) both;
    animation-delay: var(--rv-delay, 0ms);
}

/* Righe dei form: il bordo diventa una linea che si disegna da sinistra
   quando entra il blocco che la contiene */
.js-reveal .wpcf7-form-control-wrap:has(> .inputField, > .wpcf7-select) {
    display: block;
    position: relative;
}
.js-reveal .wpcf7-form-control-wrap > .inputField,
.js-reveal .wpcf7-form-control-wrap > .wpcf7-select {
    border-bottom-color: transparent;
}
.js-reveal .wpcf7-form-control-wrap:has(> .inputField, > .wpcf7-select)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: #D2D2D2;
    transform-origin: left;
    scale: 0 1;
    pointer-events: none;
}
.js-reveal .is-in .wpcf7-form-control-wrap:has(> .inputField, > .wpcf7-select)::after {
    animation: rv-line 1s var(--reveal-ease) both;
    animation-delay: calc(var(--rv-delay, 0ms) + 150ms);
}

/* Link sottolineati: la linea si disegna da sinistra */
.js-reveal :is(.cta4, .productCompany) {
    position: relative;
    border-bottom-color: transparent !important;
}
.js-reveal :is(.cta4, .productCompany)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background-color: currentColor;
    transform-origin: left;
    scale: 0 1;
    pointer-events: none;
}
.js-reveal .is-in:is(.cta4, .productCompany)::after,
.js-reveal .is-in :is(.cta4, .productCompany)::after {
    animation: rv-line 1s var(--reveal-ease) both;
    animation-delay: calc(var(--rv-delay, 0ms) + 150ms);
}

/* Application notes: le linee tra le righe si disegnano da sinistra, riga per riga */
.js-reveal .applicationNotes ul li {
    position: relative;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
.js-reveal .applicationNotes ul li::before,
.js-reveal .applicationNotes ul li:last-of-type::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background-color: #ccc;
    transform-origin: left;
    scale: 0 1;
    pointer-events: none;
}
.js-reveal .applicationNotes ul li:last-of-type::after {
    top: auto;
    bottom: -1px;
}
.js-reveal .applicationNotes ul li.is-in::before,
.js-reveal .applicationNotes ul li.is-in:last-of-type::after {
    animation: rv-line 1s var(--reveal-ease) both;
    animation-delay: var(--rv-delay, 0ms);
}

@keyframes rv-fade-up {
    from { opacity: 0; translate: 0 2.5rem; }
    to   { opacity: 1; translate: 0 0; }
}
@keyframes rv-fade-right {
    from { opacity: 0; translate: 3rem 0; }
    to   { opacity: 1; translate: 0 0; }
}
@keyframes rv-line {
    from { scale: 0 1; }
    to   { scale: 1 1; }
}

/* Intro hero home: titolo, poi testi e CTA dal basso, infine la header dall'alto */
.js-reveal .hero-intro .header-sl1 h1 {
    animation: rv-fade-in .8s var(--reveal-ease) 0.1s both;
}
.js-reveal .hero-intro .header-sl2-box1 p,
.js-reveal .hero-intro .header-sl2-box2 p,
.js-reveal .hero-intro .p1-sl2-box-link a {
    animation: rv-fade-up var(--reveal-duration) var(--reveal-ease) both;
}
.js-reveal .hero-intro .header-sl2-box1 p { animation-delay: .25s; }
.js-reveal .hero-intro .header-sl2-box2 p { animation-delay: .32s; }
.js-reveal .hero-intro .p1-sl2-box-link a:nth-child(1) { animation-delay: .4s; }
.js-reveal .hero-intro .p1-sl2-box-link a:nth-child(2) { animation-delay: .47s; }
.js-reveal body:has(.hero-intro) :is(.navigationDesk, .navMob, .menu-toggle) {
    animation: rv-drop var(--reveal-duration) var(--reveal-ease) .65s both;
}

@keyframes rv-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes rv-drop {
    from { opacity: 0; translate: 0 -100%; }
    to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal .hero-intro *,
    .js-reveal body:has(.hero-intro) :is(.navigationDesk, .navMob, .menu-toggle),
    .js-reveal .rv,
    .js-reveal .rv-line,
    .js-reveal .wpcf7-form-control-wrap::after,
    .js-reveal :is(.cta4, .productCompany)::after,
    .js-reveal .applicationNotes ul li::before,
    .js-reveal .applicationNotes ul li::after {
        opacity: 1 !important;
        scale: none !important;
        translate: none !important;
        animation: none !important;
    }
}

/* Pre-init: evita il flash del contenuto finché reveal.js non ha marcato gli elementi */
.js-reveal:not(.rv-ready) #page :is(.splide, img, picture, figure, h1, h2, h3, h4, h5, h6, .discontinued, p, blockquote, figcaption, ul, ol, li, a, button, label, input, textarea, select, table, span, svg, iframe, video, div:not(:has(*))):not(:is(.navigationDesk, .navMob, .mobile-menu, .hero-intro, [data-reveal="none"]) *),
.js-reveal:not(.rv-ready) [data-reveal-seq] * {
    opacity: 0;
}