/**
 * Navigazione: barra fissa in basso al centro e menu che si apre sopra di lei.
 * Figma, definitivo: 2728:9253 (chiusa) e 2729:205 (aperta). Markup in
 * inc/site-nav.php, movimento in assets/js/site-nav.js.
 *
 * Il movimento parte da quello dell'header di fluid.glass (curve e hover delle
 * voci). Il pannello invece si srotola dalla barra verso l'alto, fondo e testo
 * ritagliati insieme, e le voci entrano in dissolvenza con una breve salita.
 *
 * Gli stati li scrive il JS su .sn: is-open (menu aperto), is-settled (entrata
 * finita: da li' in poi le sottovoci di un gruppo entrano senza attesa).
 *
 * In apertura prima si allarga la barra, poi insieme l'hamburger diventa croce
 * e si apre il pannello. In chiusura l'inverso: pannello e croce insieme, poi
 * la barra si stringe. I tempi sono le variabili --sn-t-*: le regole dello
 * stato aperto portano i ritardi dell'apertura, quelle dello stato chiuso i
 * ritardi della chiusura.
 */

/* La curva dell'etichetta che scorre serve anche ai bottoni, fuori dalla nav. */
:root {
  --sn-ease-rise: cubic-bezier(.19, 1, .22, 1);
}

.sn {
  --sn-ink: var(--color-base);
  --sn-bar-bg: rgba(255, 255, 255, .89);
  --sn-sheet-bg: color-mix(in srgb, var(--color-primary-500) 90%, transparent);
  --sn-blur: 7px;
  --sn-radius: 8px;
  --sn-pad: 24px;
  --sn-bar-h: 51px;
  --sn-bar-gap: 24px;
  --sn-logo-w: 155px;
  --sn-bottom: 15px;
  --sn-w: min(427px, calc(100vw - 32px));

  /* power3.inOut, power4.inOut, power3.out, e la curva a scatto dei filetti
     (expo.out, --sn-ease-rise, sta su :root) */
  --sn-ease: cubic-bezier(.645, .045, .355, 1);
  --sn-ease-sheet: cubic-bezier(.76, 0, .24, 1);
  --sn-ease-drop: cubic-bezier(.215, .61, .355, 1);
  --sn-ease-line: cubic-bezier(1, 0, 0, 1);
  --sn-t-bar: .45s;
  --sn-t-swap: .35s;
  --sn-t-panel: .5s;
  --sn-t-out: .35s;

  --focus-outline: 2px solid var(--sn-ink);

  position: fixed;
  left: 50%;
  bottom: var(--sn-bottom);
  z-index: 9999;
  width: var(--sn-w);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--sn-ink);
  font-family: var(--wp--preset--font-family--parabole-text);
  pointer-events: none;
}

.sn a,
.sn button {
  color: inherit;
  text-decoration: none;
}

.sn button {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.sn ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La barra */

/* La larghezza da chiusa la misura il JS (--sn-bar-closed) perche' da `auto`
   non si transiziona; senza JS resta `auto`, cioe' la stessa misura. Aperta e'
   larga quanto il menu e gli elementi si distribuiscono ai lati. */
.sn-bar {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--sn-bar-gap);
  width: var(--sn-bar-closed, auto);
  max-width: 100%;
  height: var(--sn-bar-h);
  padding: 8px var(--sn-pad);
  border-radius: var(--sn-radius);
  background: var(--sn-bar-bg);
  -webkit-backdrop-filter: blur(var(--sn-blur));
  backdrop-filter: blur(var(--sn-blur));
  pointer-events: auto;
  transition: width var(--sn-t-bar) var(--sn-ease) var(--sn-t-out);
}

.sn.is-open .sn-bar {
  width: 100%;
  transition-delay: 0s;
}

.sn-bar > * {
  flex: none;
}

.sn-logo {
  display: block;
  line-height: 0;
}

.sn-logo .sn-wordmark {
  display: block;
  width: var(--sn-logo-w);
  height: auto;
  overflow: visible;
}

/* La O di REPLATFORMING gira su se stessa al passaggio del mouse (mezzo
   giro: la O e' simmetrica, a fine giro e' identica) e uscendo torna
   indietro girando. */
.sn-o {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.sn-logo:hover .sn-o,
.sn-logo:focus-visible .sn-o {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .sn-o {
    transition: none;
  }
}

.sn-cta {
  display: flex;
  align-items: center;
  height: 35px;
  padding: 0 16px;
  border-radius: var(--sn-radius);
  background: var(--sn-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: capitalize;
}

.sn .sn-cta {
  color: var(--color-primary-500);
  transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* In hover la CTA si riempie della luce che il cursore lascia sul fondo
   (liquid-bg.js: riflesso 0.78/0.72/0.88, colorante 0.55/0.34/0.74): un disco
   lilla nasce dal punto in cui entra il puntatore e si allarga fino ai bordi,
   un riflesso piu' chiaro segue il puntatore dentro il bottone, il testo passa
   allo scuro. Uscendo il disco si richiude verso il punto d'uscita.
   --mx / --my li scrive site-nav.js; senza JS partono dal centro. */
.sn .sn-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.sn .sn-cta::before,
.sn .sn-cta::after {
  content: "";
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

/* La luce entra dai bordi verso il centro: un'ombra interna lilla che si
   allarga fino a chiudersi. A meta' corsa i bordi brillano e il centro e'
   ancora scuro; solo il riflesso (::after) segue il puntatore. */
.sn .sn-cta::before {
  inset: 0;
  left: 0;
  top: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 0 rgba(168, 139, 210, 0.9),
    inset 0 0 0 0 #d3c4ea;
  transition: box-shadow 0.5s cubic-bezier(0.55, 0, 0.45, 1);
}

.sn .sn-cta::after {
  width: 90px;
  height: 90px;
  translate: -50% -50%;
  opacity: 0;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  mix-blend-mode: soft-light;
  transition: opacity 0.4s ease;
}

@media (hover: hover) {
  .sn .sn-cta:hover,
  .sn .sn-cta:focus-visible {
    color: var(--sn-ink);
    /* il testo scurisce quando la luce dai bordi arriva alle lettere */
    transition-delay: 0.3s;
  }

  .sn .sn-cta:hover::before,
  .sn .sn-cta:focus-visible::before {
    box-shadow:
      inset 0 0 6px 2px rgba(168, 139, 210, 0.9),
      inset 0 0 18px 60px #d3c4ea;
    transition: box-shadow 1s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .sn .sn-cta:hover::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn .sn-cta::before {
    transition: none;
  }
}

/* Il bottone e' largo quanto l'hamburger (21,5 nel Figma) anche a menu aperto:
   la croce (28, la diagonale del segno) sborda di 3 px per lato, ma hamburger
   e croce restano sullo stesso centro e al cambio niente si sposta. Alto quanto
   la CTA: la sua altezza e' la maschera in cui si danno il cambio salendo. */
.sn-toggle {
  position: relative;
  width: 21.54px;
  height: 35px;
  overflow-x: visible;
  overflow-y: clip;
}

.sn-toggle::after {
  content: "";
  position: absolute;
  inset: 0 -12px;
}

.sn-burger,
.sn-toggle .sn-sign {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  transition: transform var(--sn-t-swap) var(--sn-ease);
}

.sn.is-open .sn-burger,
.sn.is-open .sn-toggle .sn-sign {
  transition-delay: var(--sn-t-bar);
}

.sn.is-settled .sn-toggle .sn-sign {
  transition-delay: 0s;
}

.sn.is-open .sn-burger {
  transform: translateY(-35px);
}

.sn-toggle .sn-sign {
  transform: translateY(35px) rotate(45deg);
}

.sn.is-open .sn-toggle .sn-sign {
  transform: translateY(0) rotate(45deg);
}

/* Tre tratti da 2px a 5,87 l'uno dall'altro: la geometria del gruppo 169. */
.sn-burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 21.54px;
  height: 13.75px;
}

.sn-burger > span {
  display: block;
  height: 2px;
  background: currentColor;
}

/* Il segno: tratto orizzontale e verticale, ognuno spezzato al centro. */
.sn-sign {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}

.sn-sign__h,
.sn-sign__v {
  position: absolute;
  background: currentColor;
  -webkit-mask: var(--sn-mask) center / 100% 100% no-repeat;
  mask: var(--sn-mask) center / 100% 100% no-repeat;
}

.sn-sign__h {
  --sn-mask: url(../img/nav/sign-h.svg);
  left: 0;
  top: 8.98px;
  width: 20px;
  height: 2.06px;
}

.sn-sign__v {
  --sn-mask: url(../img/nav/sign-v.svg);
  left: 8.98px;
  top: 0;
  width: 2.04px;
  height: 20px;
  transition: scale .5s var(--sn-ease);
}

/* Il menu */

.sn-menu {
  position: relative;
  order: -1;
  width: 100%;
  visibility: hidden;
  transition: visibility 0s linear var(--sn-t-out);
}

.sn.is-open .sn-menu {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Il pannello esce dalla barra verso l'alto e ci rientra: fondo e testo sono
   ritagliati con lo stesso inset, cosi' il testo non sta mai fuori dal fondo.
   Il ritaglio sta su ciascuno dei due e non sul menu: sull'antenato isolerebbe
   il backdrop-filter del fondo. */
.sn-sheet {
  position: absolute;
  inset: 0;
  border-radius: var(--sn-radius);
  background: var(--sn-sheet-bg);
  -webkit-backdrop-filter: blur(var(--sn-blur));
  backdrop-filter: blur(var(--sn-blur));
}

.sn-sheet,
.sn-nav {
  clip-path: inset(100% 0 0 0 round var(--sn-radius));
  transition: clip-path var(--sn-t-out) var(--sn-ease-sheet);
}

.sn.is-open .sn-sheet,
.sn.is-open .sn-nav {
  clip-path: inset(0 0 0 0 round var(--sn-radius));
  transition: clip-path var(--sn-t-panel) var(--sn-ease-sheet) var(--sn-t-bar);
}

.sn-nav {
  position: relative;
  box-sizing: border-box;
  max-height: calc(100svh - var(--sn-bottom) - var(--sn-bar-h) - 24px);
  padding: var(--sn-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.sn-list {
  display: flex;
  flex-direction: column;
}

/* 42 fra una voce e l'altra (era 32), ma come padding: le aree di hover si
   toccano e passando da una voce all'altra la lista non si riaccende tutta. */
.sn-item {
  padding: 21px 0;
}

.sn-item:first-child {
  padding-top: 0;
}

.sn-item:last-child {
  padding-bottom: 0;
}

.sn-mask {
  display: block;
}

/* Interlinea stretta, sotto l'altezza delle lettere: la maschera dell'etichetta
   che scorre si allarga di --sn-roll-pad sopra e sotto, o taglierebbe
   discendenti e accenti, e fra le due copie serve altrettanta aria in piu'. */
.sn-link,
.sn-row {
  --sn-roll-pad: .15em;
  --sn-roll-gap: .5em;
  font-size: 24px;
  font-weight: 400;
  line-height: .968;
  text-transform: capitalize;
  text-align: left;
}

.sn-link {
  display: block;
  width: fit-content;
}

.sn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  transition: color .5s var(--sn-ease), opacity .5s var(--sn-ease);
}

.sn-item > .sn-mask {
  width: fit-content;
  transition: opacity .5s var(--sn-ease);
}

.sn-mask--sign {
  flex: none;
}

/* Entrata: le voci compaiono salendo di poco, una dopo l'altra dal basso
   (--n voci, --i dall'alto), nell'ordine in cui il pannello le scopre.
   Uscita: svaniscono tutte insieme, in fretta. */
.sn-mask > * {
  opacity: 0;
  translate: 0 .5em;
  transition: opacity .15s linear, translate .3s var(--sn-ease);
}

.sn.is-open .sn-item > .sn-mask > *,
.sn.is-open .sn-row .sn-mask > * {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity .45s var(--sn-ease-drop) calc(var(--sn-t-bar) + .1s + (var(--n, 5) - 1 - var(--i, 0)) * .04s),
    translate .55s var(--sn-ease-drop) calc(var(--sn-t-bar) + .1s + (var(--n, 5) - 1 - var(--i, 0)) * .04s);
}

/* L'etichetta doppia: la seconda copia sta sotto la prima e all'hover salgono
   insieme di una riga. Va a capo come la prima, perche' ne ha la larghezza.
   Fra le due c'e' .2em d'aria: mentre scorrono, le discendenti della prima non
   sfiorano le maiuscole della seconda. */
.sn-roll {
  position: relative;
  display: block;
  overflow: clip;
  padding-block: var(--sn-roll-pad, 0px);
  margin-block: calc(var(--sn-roll-pad, 0px) * -1);
}

.sn-roll__line {
  display: block;
  transition: translate .6s var(--sn-ease-rise);
}

.sn-roll__line + .sn-roll__line {
  position: absolute;
  top: calc(100% + var(--sn-roll-gap, .2em) - var(--sn-roll-pad, 0px));
  left: 0;
  width: 100%;
}

@media (hover: hover) {
  .sn-link:hover .sn-roll__line,
  .sn-row:hover .sn-roll__line,
  .sn-cta:hover .sn-roll__line,
  .ens-btn:hover .sn-roll__line,
  .gform_footer button:hover .sn-roll__line {
    translate: 0 calc(-100% - var(--sn-roll-gap, .2em));
  }

  /* Con hover-roll.js lo scorrimento lo guida una molla (--roll sull'elemento
     puntato): passando avanti e indietro la transizione qui sopra scattava. */
  html.roll-js .sn-roll .sn-roll__line {
    transition: none;
    translate: 0 calc(var(--roll, 0) * (-100% - var(--sn-roll-gap, .2em)));
  }

  /* Col puntatore sulla lista, le voci che non si stanno puntando cedono al 40%. */
  .sn-list:hover > .sn-item:not(:hover) > * {
    opacity: .4;
  }

  /* La croce gira solo a menu aperto e fermo. */
  .sn.is-settled .sn-toggle:hover .sn-sign {
    transform: translateY(0) rotate(135deg);
    transition: transform .6s var(--sn-ease-rise);
  }
}


/* I gruppi a fisarmonica */

/* Aperto, il segno perde il tratto verticale: il + diventa il - del Figma,
   nello stesso posto. Il titolo resta pieno: con un gruppo aperto sono i
   titoli degli altri a cedere, cosi' in primo piano restano il gruppo aperto
   e le sue voci. Puntati, tornano pieni. */
.sn-list:has(> .sn-group.is-expanded) > .sn-group:not(.is-expanded):not(:hover) > .sn-row {
  opacity: .4;
}

.sn-group.is-expanded .sn-sign--toggle .sn-sign__v {
  scale: 1 0;
}

/* L'altezza si apre con la riga della griglia da 0fr a 1fr: nessuna misura da
   JS, e il fondo del menu (che segue il box) cresce insieme. */
.sn-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--sn-ease), opacity .5s var(--sn-ease);
}

.sn-group.is-expanded > .sn-sub {
  grid-template-rows: 1fr;
}

.sn-sub__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.sn-sub__list::before {
  content: "";
  flex: none;
  height: 8px;
}

.sn-sublink {
  position: relative;
  display: block;
  width: fit-content;
  font-size: 18px;
  line-height: 1.22;
  text-transform: capitalize;
}

/* Entrano quando il gruppo si apre, come le voci; all'apertura del menu
   insieme alla voce del loro gruppo (--sn-sub-in), dopo subito. La variabile
   sta sul gruppo, dove --n e --i hanno un valore. */
.sn-group {
  --sn-sub-in: calc(var(--sn-t-bar) + .1s + (var(--n, 5) - 1 - var(--i, 0)) * .04s);
}

.sn.is-settled .sn-group {
  --sn-sub-in: .1s;
}

.sn.is-open .sn-group.is-expanded .sn-subitem > .sn-mask > * {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity .45s var(--sn-ease-drop) calc(var(--sn-sub-in) + var(--j, 0) * .04s),
    translate .55s var(--sn-ease-drop) calc(var(--sn-sub-in) + var(--j, 0) * .04s);
}

/* Il filetto sotto la sottovoce: si stende da sinistra e si ritira a destra.
   Resta steso sulla pagina corrente. I due estremi si muovono ognuno per conto
   suo (hover-roll.js scrive --ul-l e --ul-r, i tratti tolti a sinistra e a
   destra, da 0 a 1): con un solo scale e il punto d'ancoraggio che cambiava
   fra entrata e uscita, uscendo a meta' corsa la riga saltava dall'altra parte.
   Si anima solo transform (posizione dell'estremo sinistro e larghezza), che
   con la stessa curva muove i due estremi come facevano left e right: left e
   right rifacevano il layout a ogni fotogramma, e sotto il fondo sfocato del
   menu Firefox su Linux non ci stava dietro (righe ferme a meta' su piu' voci). */
.sn-sublink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  transform: translateX(calc(var(--ul-l, 0) * 100%)) scaleX(calc(1 - var(--ul-l, 0) - var(--ul-r, 1)));
  transition: transform .5s var(--sn-ease-line);
  /* sempre sul suo livello: mentre si muove il compositor la disegna a mezzo
     pixel (piena), ferma tornava dipinta sul pixel intero e a fine corsa si
     assottigliava di colpo */
  will-change: transform;
}

.sn-sublink.ul-snap::after {
  transition: none;
}

.sn-sublink[aria-current="page"]::after {
  transform: none;
}

/* Fuoco. Le maschere tagliano l'anello di un link che sta dentro: l'anello va
   sulla maschera. Dopo un'interazione col puntatore non compare mai (la
   modalita' la scrive nav-tweaks.js su <html>). */
.sn :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

.sn .sn-mask > :focus-visible {
  outline: none;
}

.sn .sn-mask:has(> :focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: -2px;
  border-radius: 4px;
}

:root[data-nav-input="pointer"] .sn :focus,
:root[data-nav-input="pointer"] .sn :focus-visible,
:root[data-nav-input="pointer"] .sn .sn-mask:has(> :focus-visible) {
  outline: none;
}

/* Sotto i 480 logo e spazi cedono quanto basta a tenere la barra chiusa
   dentro lo schermo; le voci perdono un paio di pixel e vanno a capo se
   serve (la maschera segue l'altezza). */
@media (max-width: 480px) {
  .sn {
    --sn-pad: 20px;
    --sn-bar-gap: 16px;
    --sn-logo-w: 132px;
  }

  .sn-link,
  .sn-row {
    font-size: 22px;
  }

  .sn-sublink {
    font-size: 17px;
  }
}

@media (max-width: 359px) {
  .sn {
    --sn-bar-gap: 12px;
    --sn-logo-w: 110px;
  }

  .sn-cta {
    padding: 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn *,
  .sn *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}

/* Barra fissa in cima: logo Ensoul e lingue (Figma 3013:1769, markup in
   inc/top-bar.php). Larga quanto la pagina con --edge ai lati, come il
   contenuto; non intercetta i click fuori da logo e lingue. Il menu aperto
   (.sn, z-index 9999) le passa sopra. */
.tb {
  --tb-u: var(--u, 1px);
  --tb-h: calc(29 * var(--tb-u));

  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(27 * var(--tb-u)) var(--edge) 0;
  pointer-events: none;
  color: var(--color-white, #fff);
}

.tb-logo,
.tb-lang {
  pointer-events: auto;
}

.tb-logo {
  display: block;
  width: calc(80 * var(--tb-u));
  line-height: 0;
}

.tb-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.tb-lang {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--tb-u));
  font-family: var(--wp--preset--font-family--parabole-text);
  font-size: max(12px, calc(14 * var(--tb-u)));
  line-height: 1;
}

/* Ogni voce e' una lingua in cui passare, dentro il suo cerchio. */
.tb-lang__item {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tb-h);
  height: var(--tb-h);
  color: inherit;
  text-decoration: none;
}

.tb-lang__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.5px solid currentColor;
  border-radius: 50%;
  transition: scale .45s var(--sn-ease-rise);
}

.tb-lang__item.is-off {
  opacity: .4;
  cursor: default;
}

.tb-lang a.tb-lang__item:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
  border-radius: 50%;
}

@media (hover: hover) {
  .tb-lang a.tb-lang__item:hover::before {
    scale: 1.12;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tb-lang__item::before {
    transition: none;
  }
}

/* Le O del logo che escono dalla CTA in hover (site-nav.js); la classe
   si chiama ancora sn-heart perche' all'inizio erano cuoricini. Il movimento a zigzag
   e' nelle keyframe di ogni cuore: fra un vertice e l'altro la curva
   ease-in-out li fa ondeggiare invece di cambiare direzione di colpo. */
.sn-heart {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  color: #8c57bd;
  filter: drop-shadow(0 0 4px rgba(140, 87, 189, 0.45));
}

.sn-heart svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Preloader della prima visita (assets/js/preloader.js). Il colore del fondo,
   una riga crema che si disegna da sinistra a destra con la percentuale
   accanto alla punta, la O del logo al centro che gira. All'apertura la riga
   sale fino in cima portandosi dietro la parte di sopra. */
.rp-splash-cover {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  overflow: hidden;
  pointer-events: none;
  color: #e5d3ce;
}
.rp-splash-half {
  position: absolute;
  left: 0;
  width: 100%;
  background: #16121d;
}
.rp-splash-half.is-upper {
  top: 0;
}
.rp-splash-thread {
  position: absolute;
  left: 0;
  width: 0;
  height: 1px;
  margin-top: -0.5px;
  background: currentColor;
}
.rp-splash-pct {
  position: absolute;
  left: 0;
  padding: 0 4px 8px 0;
  font-size: 14px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  translate: -100% -100%;   /* angolo in alto a destra della riga, sulla punta */
  white-space: nowrap;
  transition: opacity 0.2s linear;
}
.rp-splash-o {
  position: absolute;
  transform-origin: 50% 50%;
}
.rp-splash-o svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rp-splash-o path {
  fill: #e5d3ce;
}
/* replatforming.it e powered by Ensoul, in basso: ognuna nella sua maschera */
.rp-splash-foot {
  position: absolute;
  bottom: 24px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rp-splash-foot span {
  display: block;
}
.rp-splash-foot.is-left {
  left: var(--spacing-content-padding, 40px);
}
.rp-splash-foot.is-right {
  right: var(--spacing-content-padding, 40px);
}
.rp-splash-o svg.is-spinning {
  animation: rp-o-spin 1.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes rp-o-spin {
  to {
    transform: rotate(360deg);
  }
}