/* =====================================================================
   TeamApp-Flow · aspetto e animazione del marchio

   Una sola copia del logo per tutti i temi: i colori arrivano da variabili,
   quindi sul fondo scuro non serve un secondo file e non c'e' lo sfarfallio
   del cambio immagine.

   L'animazione parte UNA VOLTA SOLA all'apertura della pagina e si ferma
   ("forwards": resta nello stato finale, non torna indietro).
   ===================================================================== */

.taflogo {
  --taf-scuro:  #131A52;   /* "TeamApp-" */
  --taf-viola:  #8B4CF0;   /* "Flow" */
  --taf-grigio: #41414A;   /* "di InMente Psicologia Smart" */
  height: var(--h, 44px);
  width: auto;
  max-width: 100%;
  display: block;
  flex: none;
}
/* Su fondo scuro la scritta diventa bianca. La freccia no: la sua sfumatura
   ciano-magenta e' la firma del marchio e si vede bene su entrambi i fondi. */
.taflogo-chiaro,
[data-skin='dark'] .taflogo,
.su-scuro .taflogo { --taf-scuro: #FFFFFF; --taf-grigio: #C9CEDD; --taf-viola: #B98CFF; }

.taflogo .taf-tit  { fill: var(--taf-scuro); }
.taflogo .taf-flow { fill: var(--taf-viola); }
.taflogo .taf-sub  { fill: var(--taf-grigio); }

/* Su schermo stretto si rimpicciolisce mantenendo le proporzioni invece di
   sbordare: il logo e' largo cinque volte quanto e' alto. */
@media (max-width: 560px) {
  .taflogo { height: auto; max-height: var(--h, 44px); }
}

/* --- L'animazione d'ingresso -------------------------------------------
   La freccia entra in corsa mentre il marchio si disegna a tratto sottile,
   poi i pieni si accendono, quindi la scritta viene tracciata; alla fine una
   luce attraversa il logo, come sigillo. Dura 3 secondi. */
.taflogo-anima path {
  stroke-width: 2.5;
  fill-opacity: 0;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.taflogo-anima .taf-sim {
  stroke: #7CB4FD;
  animation: tafTraccia 3s ease-in-out forwards,
             tafRiempi  3s ease-in-out forwards,
             tafCorsa   3s cubic-bezier(.2, .8, .25, 1) forwards;
}
.taflogo-anima .taf-tit  { stroke: var(--taf-scuro);
  animation: tafTraccia2 3s ease-in-out forwards, tafRiempi2 3s ease-in-out forwards; }
.taflogo-anima .taf-flow { stroke: var(--taf-viola);
  animation: tafTraccia2 3s ease-in-out .1s forwards, tafRiempi2 3s ease-in-out .1s forwards; }
.taflogo-anima .taf-sub  { stroke: var(--taf-grigio);
  animation: tafTraccia2 3s ease-in-out .2s forwards, tafRiempi2 3s ease-in-out .2s forwards; }

/* Il bagliore parte quando la scritta e' finita: e' il sigillo, non un
   effetto in mezzo al disegno. */
.taflogo-anima .taf-luce { animation: tafLuce 3s ease-in-out forwards; }
.taflogo .taf-luce { opacity: 0; }
.taflogo-anima .taf-luce { opacity: 1; }

@keyframes tafTraccia  { 0% { stroke-dashoffset: var(--len) } 34%, 100% { stroke-dashoffset: 0 } }
@keyframes tafRiempi   { 0%, 36% { fill-opacity: 0; stroke-opacity: 1 }
                         52%, 100% { fill-opacity: 1; stroke-opacity: 0 } }
@keyframes tafCorsa    { 0% { transform: translateX(-200px) } 45%, 100% { transform: none } }
@keyframes tafTraccia2 { 0%, 30% { stroke-dashoffset: var(--len) } 66%, 100% { stroke-dashoffset: 0 } }
@keyframes tafRiempi2  { 0%, 68% { fill-opacity: 0; stroke-opacity: 1 }
                         82%, 100% { fill-opacity: 1; stroke-opacity: 0 } }
@keyframes tafLuce     { 0%, 72% { transform: translateX(-400px) } 100% { transform: translateX(1500px) } }

/* Chi ha chiesto meno movimento vede il logo gia' fatto, senza animazione. */
@media (prefers-reduced-motion: reduce) {
  .taflogo-anima path { animation: none !important;
    stroke-width: 0; fill-opacity: 1; stroke-dashoffset: 0; }
  .taflogo-anima .taf-luce { display: none; }
}