/* 2.11 (14/10) Sito raceapp.it: l'apertura col nodo, versione corta per il sito (templates/site_apertura.html,
   static/site/nuovo/apertura.js). Stessa R e stessi movimenti dell'app (static/apertura.css, «l'onda»), ma in circa
   2,5 secondi: nodo 0,05–0,95 · arriva «ACE» con «Good things move.» 1,0–1,95 · il blu sale come una tenda 1,95–2,4 e
   arriva il sito. «Great things run.» sul sito sta in fondo alla pagina, come firma.
   La pagina sotto e' gia' disegnata (niente opacity 0): si muove soltanto, cosi' il primo piano resta quello vero. */
.ap { display: none; }
html.is-apertura, html.is-apertura body { overflow: hidden; }
html.is-apertura .ap { display: block; position: fixed; z-index: 2147483000; inset: 0; overflow: hidden; cursor: pointer;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: #0000F6; -webkit-tap-highlight-color: transparent;
  animation: ap-tenda .45s cubic-bezier(.7,0,.3,1) 1.95s forwards; }
.ap-defs { position: absolute; }
.ap-logo { position: absolute; left: 50%; top: 50%; width: 700px; height: 251.2px; margin: -125.6px 0 0 -350px; overflow: visible;
  transform: translate(240.8px, -1.6px);
  animation: ap-settle .5s cubic-bezier(.65,0,.25,1) .97s forwards; }
.ap-thread { fill: none; stroke: #FFFFFF; stroke-linecap: round; stroke-linejoin: round; stroke-width: 9;
  stroke-dasharray: 587.73 3000; stroke-dashoffset: 587.73;
  animation: ap-knot .9s cubic-bezier(.32,.1,.25,1) .05s forwards, ap-bold .4s cubic-bezier(.5,0,.2,1) .6s forwards; }
.ap-off { animation: ap-out .1s linear 1.06s forwards; }
.ap-rfill { fill: #FFFFFF; opacity: 0; animation: ap-in .12s linear .95s forwards; }
.ap-l { fill: #FFFFFF; transform: translateY(125px); }
.ap-l1 { animation: ap-rise .45s cubic-bezier(.16,1,.3,1) 1.05s forwards; }
.ap-l2 { animation: ap-rise .45s cubic-bezier(.16,1,.3,1) 1.09s forwards; }
.ap-l3 { animation: ap-rise .45s cubic-bezier(.16,1,.3,1) 1.13s forwards; }
.ap-move { position: absolute; left: 50%; top: calc(50% + 56px); width: 400px; height: 30px; margin-left: -200px; overflow: visible;
  opacity: 0; transform: translateY(8px); animation: ap-letter .4s cubic-bezier(.16,1,.3,1) 1.18s forwards; }
.ap-move text { fill: rgba(255,255,255,.82); font-size: 16px; font-weight: 500; letter-spacing: .2px; }
/* nella versione corta «Great things run.» e le scie non ci sono: la frase e' la firma in fondo al sito */
.ap-run, .ap-streak { display: none; }
/* il sito sale insieme alla tenda blu (solo movimento: e' gia' disegnato sotto) */
html.is-apertura .gnav, html.is-apertura main { animation: ap-site .55s cubic-bezier(.16,1,.3,1) 2s both; }
/* un tocco, la rotella o un tasto: salta l'apertura */
html.is-apertura.ap-salta .ap { animation: ap-bluego .2s ease forwards; }
html.is-apertura.ap-salta .gnav, html.is-apertura.ap-salta main { animation: none; }

@keyframes ap-knot { to { stroke-dashoffset: -412.27; } }
@keyframes ap-bold { to { stroke-width: 17.5; } }
@keyframes ap-settle { to { transform: scale(.3571); } }
@keyframes ap-in { to { opacity: 1; } }
@keyframes ap-out { to { opacity: 0; } }
@keyframes ap-letter { to { opacity: 1; transform: none; } }
@keyframes ap-rise { to { transform: none; } }
@keyframes ap-tenda { to { transform: translateY(-101%); visibility: hidden; } }
@keyframes ap-bluego { to { opacity: 0; visibility: hidden; } }
@keyframes ap-site { 0% { transform: translateY(70px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { html.is-apertura .ap { display: none; } html.is-apertura .gnav, html.is-apertura main { animation: none; } }