/* Apertura dei modelli D–H: il logo di Maison si compone pezzo per pezzo come nella home B (furgone, tenda, steli, nastro,
   fiori, lettere, 39), con la stessa sequenza e gli stessi tempi; cambia la scena intorno, adattata a ogni modello.
   La scena la crea il JS: senza JS o col movimento ridotto non esiste e la pagina è già nello stato finale.
   Tutto finisce da solo in meno di 3 s; scroll, un tasto, un tocco o il cambio di scheda la chiudono subito. */

/* Attesa breve (al massimo 4 s, poi via comunque): la pagina non lampeggia prima della scena. */
.intro-pending body::after{content:"";position:fixed;inset:0;z-index:200;background:var(--intro-cover,#fff)}
[data-intro="d"].intro-pending body::after{content:none}
[data-intro="d"].intro-pending .disc img{opacity:0}
[data-intro="e"]{--intro-cover:#075386}
[data-intro="f"]{--intro-cover:#001628}
[data-intro="g"]{--intro-cover:#fff}
[data-intro="h"]{--intro-cover:#fbf0c9}

.intro-stage{position:fixed;inset:0;z-index:200;overflow:hidden;--k:1;--d:0ms}
.intro-bg{position:absolute;inset:0;background:var(--intro-cover)}
.intro-box{position:absolute;left:0;top:0;aspect-ratio:850/920;transform-origin:0 0}
.intro-box svg{width:100%;height:100%;overflow:visible}

/* La composizione, identica alla home B. --d sposta l'inizio dove la scena prepara prima il suo gesto. */
.intro-art path{stroke:none}
.intro-box .iv-truck{animation:iv-truck calc(520ms*var(--k)) var(--ease) var(--d) both}
.intro-box .iv-awning{transform-box:fill-box;transform-origin:center top;animation:iv-awning calc(300ms*var(--k)) var(--ease) calc(var(--d) + 380ms*var(--k)) both}
.intro-box .iv-grow{transform-origin:355px 790px;animation:iv-grow calc(600ms*var(--k)) var(--ease) calc(var(--d) + 250ms*var(--k)) both}
.intro-box .iv-ribbon{transform-box:fill-box;transform-origin:center;animation:iv-ribbon calc(260ms*var(--k)) var(--ease) calc(var(--d) + 520ms*var(--k)) both}
.intro-box .iv-flower{animation:iv-bloom calc(300ms*var(--k)) var(--ease) both;animation-delay:calc(var(--d) + (600ms + var(--i)*45ms)*var(--k))}
.intro-box .iv-letter{transform-box:fill-box;transform-origin:50% 100%;animation:iv-letter calc(340ms*var(--k)) var(--ease) both;animation-delay:calc(var(--d) + (480ms + var(--i)*50ms)*var(--k))}
.intro-box .iv-number{animation:iv-letter calc(300ms*var(--k)) var(--ease) calc(var(--d) + 1120ms*var(--k)) both}
@keyframes iv-truck{0%{transform:translateX(420px);opacity:0}15%{opacity:1}70%{transform:translateX(-10px)}100%{transform:translateX(0)}}
@keyframes iv-awning{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes iv-grow{from{transform:scaleY(.03)}to{transform:scaleY(1)}}
@keyframes iv-ribbon{from{transform:scaleX(.2);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes iv-bloom{from{opacity:0;transform:scale(.04)}to{opacity:1;transform:scale(1)}}
@keyframes iv-letter{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Logo chiaro per i fondi blu: come logo-inv.svg. */
.intro-inv [fill="#054E87" i]{fill:#FCFEF8}
.intro-inv [fill="#FCFEF8" i]{fill:#054E87}

/* D — il logo si compone dentro il timbro, mentre l'anello fa il suo quarto di giro. Nessuna scena sopra la pagina. */
.disc>img,.disc>.intro-box{grid-area:1/1}
.disc>.intro-box{position:relative;width:62%;height:auto}
.disc.composing>img{opacity:0}

/* E — blu pieno come l'eroe: una riga gialla si stende (le loro sottolineature), il logo si compone sopra e vola nel tondo
   della testata. */
.intro-e{--d:250ms}
.intro-e .intro-line{position:absolute;height:3px;border-radius:2px;background:var(--yellow);transform-origin:0 50%;animation:il-sweep .5s var(--ease) both}
@keyframes il-sweep{from{transform:scaleX(0)}}

/* F — come l'inizio di un film: schermo nero, una riga di luce al centro, le bande si aprono a formato cinema,
   il logo si compone e sfuma sulla foto del film. */
.intro-f{--d:450ms}
.intro-f .bar-t,.intro-f .bar-b{position:absolute;left:0;right:0;height:50.5%;background:#000}
.intro-f .bar-t{top:0;animation:f-top .7s cubic-bezier(.65,0,.35,1) .3s both}
.intro-f .bar-b{bottom:0;animation:f-bot .7s cubic-bezier(.65,0,.35,1) .3s both}
@keyframes f-top{to{transform:translateY(-76%)}}
@keyframes f-bot{to{transform:translateY(76%)}}
.intro-f .intro-line{position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:linear-gradient(90deg,transparent,#fff6d0 30%,#fff 50%,#fff6d0 70%,transparent);animation:f-line .3s ease-out both,f-fade .4s ease .35s both}
@keyframes f-line{from{transform:scaleX(0)}}
@keyframes f-fade{to{opacity:0}}
.intro-f.leave .bar-t{animation:f-top-out .5s cubic-bezier(.65,0,.35,1) both}
.intro-f.leave .bar-b{animation:f-bot-out .5s cubic-bezier(.65,0,.35,1) both}
@keyframes f-top-out{from{transform:translateY(-76%)}to{transform:translateY(-101%)}}
@keyframes f-bot-out{from{transform:translateY(76%)}to{transform:translateY(101%)}}

/* G — bianco e aria: una piccola finestra tonda con la foto dell'eroe si allarga, il logo si compone sopra;
   poi la finestra diventa la foto grande e il logo entra nella linguetta. */
.intro-g .intro-win{position:absolute;overflow:hidden;border-radius:40px;background:var(--mist,#eef6f7)}
.intro-g .intro-win img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.08)}
/* Lo zoom lento dell'eroe resta fermo al primo fotogramma mentre il logo arriva e durante l'apertura: quando la finestra si posa, la foto è nello stesso punto.
   Dopo l'apertura dura 1,6 s, così tutto il movimento automatico resta sotto i 5 s (apertura 2,8 s + zoom). */
.intro-pending .hero picture img,.intro-run .hero picture img{animation-play-state:paused}
.intro-ran .hero picture img{animation-duration:1.6s}

/* H — carta burro: si disegna una capsula, si riempie, il logo si compone dentro; la capsula va in alto a sinistra
   e resta lì come logo della testata. */
.intro-h{--d:350ms}
.intro-h .intro-cap{position:absolute;left:0;top:0;transform-origin:0 0}
.intro-h .intro-cap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.intro-h .intro-cap rect{fill:var(--cap1,#fff3b0);fill-opacity:0;stroke:var(--navy);stroke-width:1;stroke-dasharray:100;stroke-dashoffset:100;animation:h-draw .6s cubic-bezier(.65,0,.35,1) both,h-fill .3s ease .4s both}
@keyframes h-draw{to{stroke-dashoffset:0}}
@keyframes h-fill{to{fill-opacity:1}}
.intro-h .intro-cap .intro-box{left:11.4%;width:77.2%;top:50%;translate:0 -50%}

/* Rivedere l'apertura: piccolo pulsante nel piede, solo dove c'è il JS. */
.intro-replay{display:none}
.js[data-intro] .intro-replay{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:10px auto 0;padding:0 16px;border:1px solid currentColor;border-radius:99px;background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:700;cursor:pointer}