/* home2026 - effetti delle home (Store e .com). Sipario copiato dal tema divesystem2026 (ds2026.css 2026-10-13), classi .h26-sip */
/* =====================================================================
   HOME: SIPARIO RIUTILIZZABILE (.h26-sip) — tecnica PDAY. Nel content box basta il blocco:
   <div class="h26-sip" data-effetto="fulmine|riflesso" data-sfondo="URL" data-sfondo-medio="URL" data-sfondo-m="URL"
        data-pannello="URL" data-pannello-medio="URL" data-pannello-m="URL"> <div class="h26-sip-testo">...</div> </div>
   sfondo = scena per le tende (e, col fulmine, per il riquadro prima del lampo); pannello = immagine del riquadro.
   medio = fino a 1440 px, m = smartphone (ritaglio quadrato/verticale). Scena e livelli li crea /home2026/js/home.js.
   ===================================================================== */
.h26-sip{float:left;position:relative;width:104%;margin:0 -2%;--pwn:44;height:clamp(440px,calc(100vh - 127px - 200px),760px);overflow:hidden;border-radius:8px;background:#0b1015;color:#fff;font-family:'Barlow',Arial,sans-serif;isolation:isolate}
.h26-sip a{color:inherit;text-decoration:none}
@media (min-width:1600px){.h26-sip{height:clamp(440px,calc(100vh - 127px - 120px),880px);--pwn:40}}
.h26-sip-scena{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
.h26-sip-img{position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover;background-position:50% 45%;background-repeat:no-repeat}
/* velo per leggere il testo */
.h26-sip-velo{position:absolute;top:0;left:0;right:0;bottom:0;z-index:6;pointer-events:none;background:linear-gradient(90deg,rgba(5,8,12,.8) 0%,rgba(5,8,12,.4) 26%,rgba(5,8,12,0) 46%),linear-gradient(0deg,rgba(5,8,12,.5) 0%,rgba(5,8,12,0) 30%)}
/* testo */
.h26-sip-testo{position:absolute;z-index:7;left:6%;bottom:10%;width:26%}
.h26-sip-over{display:block;font-family:'Barlow Condensed',Arial,sans-serif;font-weight:700;font-size:clamp(14px,1.25vw,20px);letter-spacing:.2em;text-transform:uppercase;color:#ff3b3b;margin:0 0 10px}
.h26-sip-titolo{display:block;font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;font-size:clamp(46px,5.4vw,96px);line-height:.88;text-transform:uppercase;margin:0 0 20px;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.h26-sip-titolo span{display:block;overflow:hidden;padding-bottom:.04em}
.h26-sip-titolo span i{display:block;font-style:normal}
.h26-sip-righe{list-style:none;margin:0 0 24px;padding:0}
.h26-sip-righe li{font-size:clamp(16px,1.35vw,26px);line-height:1.2;color:#d3d9df;margin:0 0 .55em;white-space:nowrap}
.h26-sip-righe b{position:relative;display:inline-block;font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;font-size:1.7em;letter-spacing:.03em;text-transform:uppercase;color:#fff;margin-right:.3em}
.h26-sip-righe b::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;border-radius:2px;background:#09f;box-shadow:0 0 10px rgba(0,153,255,.6);transform:scaleX(0);transform-origin:left}
.h26-sip-btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 26px;border-radius:4px;background:#09f;color:#fff;font-family:'Barlow Condensed',Arial,sans-serif;font-weight:700;font-size:18px;letter-spacing:.08em;text-transform:uppercase;transition:background .2s}
.h26-sip-btn:hover{background:#06f}
.h26-sip-btn i{font-style:normal;transition:transform .2s}.h26-sip-btn:hover i{transform:translateX(4px)}
/* entrata elegante del testo (classe .via): riga rossa che si scopre, titolo che sale dalla sua riga, parole chiave sottolineate */
.h26-sip-over{clip-path:inset(0 100% 0 0)}
.h26-sip-titolo span i{transform:translateY(105%)}
.h26-sip-righe li,.h26-sip-btn{opacity:0;transform:translateY(14px)}
.h26-sip.via .h26-sip-over{clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.65,0,.35,1)}
.h26-sip.via .h26-sip-titolo span i{transform:none;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.h26-sip.via .h26-sip-titolo span:nth-child(1) i{transition-delay:.25s}.h26-sip.via .h26-sip-titolo span:nth-child(2) i{transition-delay:.4s}
.h26-sip.via .h26-sip-righe li,.h26-sip.via .h26-sip-btn{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.h26-sip.via .h26-sip-righe li:nth-child(1){transition-delay:.8s}.h26-sip.via .h26-sip-righe li:nth-child(2){transition-delay:1s}.h26-sip.via .h26-sip-righe li:nth-child(3){transition-delay:1.2s}
.h26-sip.via .h26-sip-righe b::after{transform:scaleX(1);transition:transform .7s cubic-bezier(.65,0,.35,1)}
.h26-sip.via .h26-sip-righe li:nth-child(1) b::after{transition-delay:1.2s}.h26-sip.via .h26-sip-righe li:nth-child(2) b::after{transition-delay:1.4s}.h26-sip.via .h26-sip-righe li:nth-child(3) b::after{transition-delay:1.6s}
.h26-sip.via .h26-sip-btn{transition-delay:1.6s}

/* sipario (tecnica PDAY): tende = sfondo, riquadro = pannello che sale dal 95% al 100% e passa sopra */
.h26-sip-lampo{display:none}
.h26-sip .h26-sip-tenda{display:block;position:absolute;top:0;bottom:0;width:calc(50% + 1px);z-index:2;overflow:hidden}   /* +1px: le tende si toccano sempre, nessuna fessura */
.h26-sip .h26-sip-tenda .h26-sip-img{width:200%;right:auto}
.h26-sip .h26-sip-tenda.t-sx{left:0}.h26-sip .h26-sip-tenda.t-sx .h26-sip-img{left:0}
.h26-sip .h26-sip-tenda.t-dx{right:0}.h26-sip .h26-sip-tenda.t-dx .h26-sip-img{left:auto;right:0}
/* riquadro centrale col sub, allineato alla scena; invisibile finché non parte l'apertura (niente "si intravede prima") */
.h26-sip .h26-sip-pan{display:block;position:absolute;top:0;bottom:0;left:calc(50% - var(--pwn) * .5%);width:calc(var(--pwn) * 1%);z-index:1;overflow:hidden;visibility:hidden;transform:scale(.95)}
.h26-sip .h26-sip-pan .h26-sip-img{left:calc((100% - 10000% / var(--pwn)) / 2);right:auto;width:calc(10000% / var(--pwn))}
.h26-sip .h26-sip-pan::after{content:"";position:absolute;top:0;left:-60%;width:38%;height:100%;background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);pointer-events:none}
.h26-sip.aperto .h26-sip-pan{visibility:visible;animation:h26-sip-pan 3.8s both}
.h26-sip.aperto .h26-sip-tenda.t-sx{animation:h26-sip-sx 3.8s both;box-shadow:18px 0 26px -10px rgba(0,0,0,.55)}
.h26-sip.aperto .h26-sip-tenda.t-dx{animation:h26-sip-dx 3.8s both;box-shadow:-18px 0 26px -10px rgba(0,0,0,.55)}
.h26-sip.luccica .h26-sip-pan::after{animation:h26-sip-luccica 1.1s ease-in-out 1 forwards}
/* le percentuali di translate sono sulla larghezza della tenda (metà scena): metà riquadro = pwn% della tenda */
@keyframes h26-sip-sx{0%{transform:none;animation-timing-function:cubic-bezier(.72,0,.3,1)}56%{transform:translateX(calc(var(--pwn) * -1% - 22px));animation-timing-function:cubic-bezier(.45,0,.35,1)}100%{transform:translateX(calc(var(--pwn) * -1% + 24px))}}
@keyframes h26-sip-dx{0%{transform:none;animation-timing-function:cubic-bezier(.72,0,.3,1)}56%{transform:translateX(calc(var(--pwn) * 1% + 22px));animation-timing-function:cubic-bezier(.45,0,.35,1)}100%{transform:translateX(calc(var(--pwn) * 1% - 24px))}}
@keyframes h26-sip-pan{0%{transform:scale(.95);z-index:1;box-shadow:0 0 0 0 rgba(0,0,0,0)}38%{transform:scale(.95);z-index:1;animation-timing-function:cubic-bezier(.35,0,.2,1)}55%{z-index:1}57%{z-index:3}100%{transform:none;z-index:3;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 10px 60px rgba(0,0,0,.6)}}
@keyframes h26-sip-luccica{0%{left:-60%}100%{left:130%}}

/* mentre le tende si aprono la scena ai lati si sfoca piano (la nave non si vede doppia) */
.h26-sip .h26-sip-tenda .h26-sip-img{transition:filter 2.3s cubic-bezier(.45,0,.35,1),transform 2.3s cubic-bezier(.45,0,.35,1)}
.h26-sip.sfoca .h26-sip-tenda .h26-sip-img{filter:blur(1.2px) brightness(.93);transform:scale(1.01)}   /* si sfoca mentre si apre, come allontanandosi: a posto è già sfocata (poco) */
/* sotto le tende, quando si aprono, si vede il colore della pagina (non una terza copia della scena) */
.h26-sip{background:transparent}

/* effetto "fulmine": il riquadro sale mostrando lo sfondo; al posto del riflesso un lampo e appare il pannello */
.h26-sip-pan-sub{opacity:1}
.h26-sip.fulmine .h26-sip-pan-sub{opacity:0}
.h26-sip.fulmine.lampo2 .h26-sip-pan-sub{opacity:1;transition:opacity .08s linear;animation:h26-sip-dopo 1.8s ease-out both}
.h26-sip.fulmine .h26-sip-lampo{display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(ellipse 60% 55% at 52% 26%,rgba(240,248,255,.95) 0%,rgba(205,228,255,.55) 40%,rgba(160,200,255,.12) 80%)}
.h26-sip.fulmine.lampo2 .h26-sip-lampo{animation:h26-sip-l3 1.5s ease-out both}
@keyframes h26-sip-l3{0%{opacity:0}6%{opacity:1}30%{opacity:.3}100%{opacity:0}}   /* un solo colpo, deciso, che si spegne piano */
.h26-sip.fulmine.luccica .h26-sip-pan::after{animation:none}

/* tablet: testo sotto la scena (come smartphone), la scena resta larga */
@media (max-width:991px){
  .h26-sip{height:auto;padding-top:min(52vw,460px);--pwn:46}
  .h26-sip-scena,.h26-sip-velo{bottom:auto;height:min(52vw,460px)}
  .h26-sip-velo{background:linear-gradient(0deg,#0b1015 0%,rgba(11,16,21,0) 30%)}
  .h26-sip-testo{position:relative;left:auto;bottom:auto;width:auto;padding:4px 24px 26px}
  .h26-sip-titolo span{display:inline-block;margin-right:.25em}
  .h26-sip-righe li{display:inline-block;margin-right:18px}
}
@media (max-width:991px){.h26-sip .h26-sip-testo{background:#0b1015}}
/* smartphone: scena quadrata centrata sul sub, testo compatto sotto: le promo restano in vista */
@media (max-width:767px){
  .h26-sip{padding-top:100vw;border-radius:0;--pwn:60}
  .h26-sip-scena,.h26-sip-velo{height:100vw}
      .h26-sip-img{background-position:50% 62%}
  .h26-sip-testo{padding:2px 18px 20px}
  .h26-sip-over{font-size:13px;margin-bottom:6px}
  .h26-sip-titolo{font-size:44px;margin-bottom:12px}
  .h26-sip-righe{margin-bottom:16px}
  .h26-sip-righe li{display:block;font-size:15px;margin:0 0 6px}
  .h26-sip-btn{min-height:44px;font-size:16px;padding:0 20px}
}
@media (prefers-reduced-motion:reduce){.h26-sip *{animation:none!important;transition:none!important}.h26-sip-tenda{display:none!important}.h26-sip-pan{visibility:visible!important;transform:none!important}.h26-sip-pan-sub{opacity:1!important}.h26-sip-over{clip-path:none}.h26-sip-titolo span i,.h26-sip-righe li,.h26-sip-btn{opacity:1;transform:none}}