/*---------------- TOUR GUIDATO DEL KOALA (primo accesso) ----------------

   Il koala mascotte (assets/koala-mascotte.png) spunta da un bordo dello
   schermo e PARLA in una vignetta, con un solo bottone che fa avanzare.
   Intanto un velo scuro "spegne" il resto della pagina e lascia in luce
   solo l'elemento di cui il koala sta parlando.
------------------------------------------------------------------------*/

/* Il velo scuro: a schermo intero (nessun elemento da evidenziare) o
   tagliato in 4 "strisce" che coprono tutto tranne il rettangolo
   evidenziato, per spegnere ogni altro pulsante della pagina. */
.tourKoalaMaschera{
    position:fixed;
    z-index:6000;              /* sopra ogni popup dell'app (max 5200) */
    background:rgba(15,22,40,.62);
    pointer-events:auto;
    display:none;
}

#tourKoalaPieno{
    inset:0;
}

/* Bordo luminoso puramente visivo attorno all'elemento evidenziato: non
   intercetta MAI il tocco. */
#tourKoalaFaro{
    position:fixed;
    z-index:6001;
    border-radius:14px;
    border:3px solid var(--blu, #3b6fe0);
    box-shadow:0 0 0 5px rgba(59,111,224,.28), 0 10px 22px rgba(10,20,45,.32);
    pointer-events:none;
    transition:top .25s ease, left .25s ease, width .25s ease, height .25s ease, opacity .2s ease;
    opacity:0;
}

#tourKoalaFaro.tourFaroVisibile{
    opacity:1;
}

/*------------------- Il koala che parla -------------------*/

#tourKoala{
    position:fixed;
    right:0;
    bottom:92px;                 /* sopra la barra di navigazione */
    z-index:6003;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    width:min(340px, calc(100vw - 18px));
    transform:translateX(115%);
    transition:transform .5s cubic-bezier(.22,1.02,.36,1);
    pointer-events:none;
}

#tourKoala.tourKoalaDentro{
    transform:translateX(0);
    pointer-events:auto;
}

/* Variante: il koala si affaccia da SINISTRA (quando l'elemento
   evidenziato sta nella metà destra dello schermo). */
#tourKoala.tourKoalaSinistra{
    right:auto;
    left:0;
    align-items:flex-start;
    transform:translateX(-115%);
}
#tourKoala.tourKoalaSinistra.tourKoalaDentro{
    transform:translateX(0);
}

/*------- Vignetta / fumetto -------*/
.tourKoalaFumetto{
    position:relative;
    align-self:stretch;
    margin:0 16px;
    background:var(--carta, #fff);
    border:2px solid var(--blu-chiaro, #eaf0ff);
    border-radius:18px;
    box-shadow:0 16px 40px rgba(10,20,45,.32);
    padding:15px 17px 15px;
    opacity:0;
    transform:translateY(6px) scale(.97);
    transition:opacity .25s ease, transform .25s ease;
}

#tourKoala.tourKoalaDentro .tourKoalaFumetto{
    opacity:1;
    transform:none;
    transition-delay:.3s;
}

/* Codina del fumetto: punta in basso verso la testa del koala */
.tourKoalaFumetto::after{
    content:"";
    position:absolute;
    right:34px;
    bottom:-9px;
    width:16px;
    height:16px;
    background:var(--carta, #fff);
    border-right:2px solid var(--blu-chiaro, #eaf0ff);
    border-bottom:2px solid var(--blu-chiaro, #eaf0ff);
    transform:rotate(45deg);
}
#tourKoala.tourKoalaSinistra .tourKoalaFumetto::after{
    right:auto;
    left:34px;
}

.tourKoalaTitolo{
    font-size:14.5px;
    font-weight:800;
    color:var(--testo, #1c2b45);
    margin-bottom:5px;
}

.tourKoalaTesto{
    font-size:13.5px;
    line-height:1.5;
    color:var(--testo, #1c2b45);
}

.tourKoalaAzioni{
    display:flex;
    gap:8px;
    margin-top:13px;
}

.tourKoalaAzioni button{
    flex:1;
    border:none;
    border-radius:12px;
    font-size:13px;
    font-weight:800;
    padding:10px 12px;
    cursor:pointer;
}
.tourKoalaAzioni button:active{
    transform:scale(.97);
}

.tourKoalaBtnPrimario{
    background:var(--blu, #3b6fe0);
    color:#fff;
    box-shadow:0 6px 14px rgba(59,111,224,.35);
}

.tourKoalaBtnSecondario{
    flex:0 0 auto;
    background:var(--sfondo, #f2f5fb);
    color:var(--testo-tenue, #66738c);
}

/*------- Il koala (illustrazione, senza pallino attorno) -------*/
.tourKoalaCorpo{
    width:104px;
    margin:0 14px;
    display:flex;
}

.tourKoalaFaccia{
    width:100%;
    height:auto;
    display:block;
    filter:drop-shadow(0 8px 12px rgba(10,20,45,.22));
}

#tourKoala.tourKoalaDentro .tourKoalaFaccia{
    animation:tourKoalaOndeggia 2.6s ease-in-out .8s 2;
    transform-origin:50% 92%;
}

@keyframes tourKoalaOndeggia{
    0%,100%{ transform:rotate(0); }
    30%{ transform:rotate(-2.5deg); }
    65%{ transform:rotate(1.8deg); }
}

@media (prefers-reduced-motion: reduce){
    #tourKoala{ transition-duration:.001s; }
    #tourKoala.tourKoalaDentro .tourKoalaFaccia{ animation:none; }
}

@media (max-width: 380px){
    .tourKoalaTitolo{ font-size:14px; }
    .tourKoalaTesto{ font-size:13px; }
    .tourKoalaCorpo{ width:92px; }
}