/* La scena del marchio SERGIO (l'intro dell'app atleta, #splash; dal 9 ottobre anche il primo ingresso nel portale e
   l'attesa, .sg-scena, con --sg-scena per la misura). Splash animata SERGIO: logo che si accende con la spazzata di luce, wordmark
   disegnato a tratto e acronimo. Il logo e' l'originale trasparente (Ludo, 9 ottobre), un webp da 560px reso a ~150x230px:
   abbastanza pixel da restare nitido su qualunque telefono, pochi kB di peso.
   Il wordmark e' vettoriale, quindi non sgrana mai. */
@property --sp { syntax: '<percentage>'; inherits: false; initial-value: -20%; }
:is(#splash,.sg-scena) .sg-stage { display:flex; flex-direction:column; align-items:center; width:var(--sg-scena,min(78vw,330px)) }
:is(#splash,.sg-scena) .sg-logo {
  position:relative; width:46.5%; aspect-ratio:560/846;
  animation:sgBreathe 6s ease-in-out 1.2s infinite;
}
:is(#splash,.sg-scena) .sg-logo img { position:absolute; inset:0; width:100%; height:100%; display:block }
:is(#splash,.sg-scena) .sg-base {
  -webkit-mask-image:linear-gradient(40deg,#000 var(--sp),transparent calc(var(--sp) + 22%));
  mask-image:linear-gradient(40deg,#000 var(--sp),transparent calc(var(--sp) + 22%));
  filter:blur(5px); transform:scale(.965) translateY(6px);
  animation:sgSweep .8s cubic-bezier(.45,0,.25,1) .05s forwards, sgSharp .7s cubic-bezier(.2,.7,.2,1) .1s forwards;
}
:is(#splash,.sg-scena) .sg-edge {
  mix-blend-mode:screen; filter:brightness(1.9) saturate(1.2); opacity:0;
  -webkit-mask-image:linear-gradient(40deg,transparent calc(var(--sp) - 10%),#000 calc(var(--sp) + 4%),transparent calc(var(--sp) + 12%));
  mask-image:linear-gradient(40deg,transparent calc(var(--sp) - 10%),#000 calc(var(--sp) + 4%),transparent calc(var(--sp) + 12%));
  animation:sgSweep .8s cubic-bezier(.45,0,.25,1) .05s forwards, sgEdge .8s linear .05s forwards;
}
@keyframes sgSweep { to { --sp:130% } }
@keyframes sgSharp { to { filter:blur(0); transform:none } }
@keyframes sgEdge { 0%{opacity:0} 15%{opacity:.8} 75%{opacity:.8} 100%{opacity:0} }
@keyframes sgBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.012)} }

:is(#splash,.sg-scena) .sg-word { width:46%; margin-top:16px }
:is(#splash,.sg-scena) .sg-word svg { display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 0 1.5px rgba(255,255,255,.35)); shape-rendering:geometricPrecision }
:is(#splash,.sg-scena) .sg-word path { stroke-dasharray:1; stroke-dashoffset:1; animation:sgDraw .45s cubic-bezier(.5,0,.2,1) forwards; animation-delay:calc(.2s + var(--j) * .04s) }
@keyframes sgDraw { to { stroke-dashoffset:0 } }
:is(#splash,.sg-scena) .sg-word .wm > g { opacity:0; animation:sgShow .01s linear .2s forwards }
@keyframes sgShow { to { opacity:1 } }
:is(#splash,.sg-scena) .sg-word .wm image { clip-path:inset(0 100% 0 0);animation:sgWordReveal .65s cubic-bezier(.2,.7,.2,1) .2s forwards }
@keyframes sgWordReveal { to { clip-path:inset(0) } }
@media (prefers-reduced-motion:reduce) { :is(#splash,.sg-scena) .sg-word .wm image { animation:none!important;clip-path:none } }

:is(#splash,.sg-scena) .sg-acro { margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:.2em .55em;
  font-size:9px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:#e6eaf2; text-align:center; -webkit-font-smoothing:antialiased }
:is(#splash,.sg-scena) .sg-acro span { opacity:0; transform:translateY(8px); filter:blur(3px); display:inline-block;
  animation:sgIn .4s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(.45s + var(--i) * .04s) }
:is(#splash,.sg-scena) .sg-acro b { font-weight:700; color:var(--c) }
:is(#splash,.sg-scena) .sg-acro .sml { color:#8b93a3 }
:is(#splash,.sg-scena) .sg-acro .br { flex-basis:100%; height:0 }
@keyframes sgIn { to { opacity:1; transform:none; filter:blur(0) } }

:is(#splash,.sg-scena) .sg-line { width:0; height:1px; margin-top:14px; opacity:.8;
  background:linear-gradient(90deg,transparent,#00e5ff,#3d6bff,#ff2bd6,#ff8a1f,transparent);
  animation:sgLine .5s cubic-bezier(.3,0,.2,1) .7s forwards }
@keyframes sgLine { to { width:46% } }

/* Frase sotto il logo, nello stesso carattere dell'acronimo (Ludo, 21/09):
   maiuscolo spaziato, sfumatura dei colori del logo. Entra dopo la linea. */
:is(#splash,.sg-scena) .sg-frase { margin-top:18px; min-height:2.8em; max-width:92%; text-align:center;
  font-size:10px; font-weight:600; letter-spacing:.24em; line-height:1.6; text-transform:uppercase;
  background:linear-gradient(90deg,#00e5ff,#6a5cff,#ff3fa4,#ff8a1f); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; filter:blur(3px); transform:translateY(6px); -webkit-font-smoothing:antialiased }
:is(#splash,.sg-scena) .sg-frase.on { animation:sgIn .7s cubic-bezier(.2,.7,.2,1) forwards }

@media (prefers-reduced-motion: reduce) {
  :is(#splash,.sg-scena) * { animation-duration:.01s !important; animation-delay:0s !important }
}
/* Frasi a rotazione (Ludo, 22/09): una dopo l'altra, tutte diverse, il tempo di leggerle. */
:is(#splash,.sg-scena) .sg-frase.off { opacity:1; filter:none; transform:none; animation:sgOut .45s ease-in forwards }
@keyframes sgOut { to { opacity:0; filter:blur(3px); transform:translateY(-6px) } }

/* Punti 115-116 (24/09). La scena dura circa 800 ms: logo e scritta dai 200 ms, la
   frase non prima dei 600 (sotto quella soglia si legge come un difetto).
   Chiusura: quando l'app e' pronta la scena accelera e sfuma, mai un taglio a meta'. */
:is(#splash,.sg-scena).sg-chiudi * { animation-duration:.15s !important; animation-delay:0s !important }
/* Movimento ridotto: la S compare ferma, completa, e la frase c'e' senza entrata. */
@media (prefers-reduced-motion: reduce) {
  :is(#splash,.sg-scena) .sg-logo, :is(#splash,.sg-scena) .sg-base, :is(#splash,.sg-scena) .sg-edge, :is(#splash,.sg-scena) .sg-word path, :is(#splash,.sg-scena) .sg-word .wm > g,
  :is(#splash,.sg-scena) .sg-acro span, :is(#splash,.sg-scena) .sg-line, :is(#splash,.sg-scena) .sg-frase.on { animation:none !important }
  :is(#splash,.sg-scena) .sg-base { -webkit-mask-image:none; mask-image:none; filter:none; transform:none }
  :is(#splash,.sg-scena) .sg-edge { display:none }
  :is(#splash,.sg-scena) .sg-word path { stroke-dashoffset:0 }
  :is(#splash,.sg-scena) .sg-word .wm > g, :is(#splash,.sg-scena) .sg-acro span { opacity:1; transform:none; filter:none }
  :is(#splash,.sg-scena) .sg-line { width:46% }
  :is(#splash,.sg-scena) .sg-frase.on { opacity:1; transform:none; filter:none }
}