/* =====================================================
   PARTICELLE
   ===================================================== */
.particellaTarot{

    position:absolute;

    animation:particellaTarot linear infinite;

    border-radius:50%;
    
    /* TRUCCO UX: Un'ombra scura netta e finissima sul fondo stacca la particella */
    /* dalla nebbia colorata, rendendola visibilissima anche se lo sfondo è chiaro */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
    

}

/* ---------------- ORO METALLICO ---------------- */

.particellaTarot.oro{

    background:radial-gradient(circle at 30% 30%,

        rgba(255,255,255,.98) 0%,
        rgba(255,248,220,.96) 10%,
        rgba(255,230,140,.92) 28%,
        rgba(240,185,55,.82) 58%, /* Leggermente più saturo al centro */
        rgba(145,95,12,.35) 100%

    );

    /* ATTENUATO: Ridotta l'espansione e l'opacità delle luci esterne */
    box-shadow:
        0 0 2px rgba(255,255,255,.9),
        0 0 4px rgba(255,225,120,.65),
        0 0 6px rgba(255,190,70,.20);

}

/* ---------------- VERDE SMERALDO ---------------- */

.particellaTarot.verde{

    background:radial-gradient(circle at 30% 30%,

        rgba(255,255,255,.98) 0%,
        rgba(240,255,250,.96) 10%,
        rgba(140,245,210,.90) 28%,
        rgba(45,190,145,.80) 58%, /* Leggermente più saturo al centro */
        rgba(10,90,70,.35) 100%

    );

    /* ATTENUATO: Ridotta l'espansione e l'opacità delle luci esterne */
    box-shadow:
        0 0 2px rgba(255,255,255,.9),
        0 0 4px rgba(90,230,180,.60),
        0 0 6px rgba(45,190,145,.20);

}

/* ---------------- VIOLA AMETISTA ---------------- */

.particellaTarot.viola{

    background:radial-gradient(circle at 30% 30%,

        rgba(255,255,255,.98) 0%,
        rgba(248,243,255,.96) 10%,
        rgba(205,175,255,.90) 28%,
        rgba(135,95,230,.80) 58%, /* Leggermente più saturo al centro */
        rgba(55,25,120,.35) 100%

    );

    /* ATTENUATO: Ridotta l'espansione e l'opacità delle luci esterne */
    box-shadow:
        0 0 2px rgba(255,255,255,.9),
        0 0 4px rgba(185,145,255,.60),
        0 0 6px rgba(135,95,230,.20);

}

@keyframes particellaTarot{

    0%{
        transform: translate(0,0) scale(.45);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    25%{
        transform: translate(-4px,-40px) scale(.75);
    }

    50%{
        transform: translate(5px,-90px) scale(1);
    }

    75%{
        transform: translate(-3px,-140px) scale(.9);
        opacity:.8;
    }

    100%{
        transform: translate(6px,-200px) scale(.45);
        opacity:0;
    }

}

/* =====================================================
   LUCCICHII
   ===================================================== */
#luccichiiTarot{

    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:6;

}

.luccichio{

    position:absolute;

    opacity:0;

    transform-origin:center;

    animation:luccichio 3s linear infinite;
    
    /* Fonde perfettamente la luce del testo con la nebulosa sottostante */
    mix-blend-mode: screen; 

}

.luccichio::before{

    content:"✦";

}

/* ---------------- ORO ---------------- */

.luccichio.oro{

    color:#ffe08a;

    text-shadow:
        0 0 1px #ffffff,
        0 0 3px #fff2bf,
        0 0 6px #ffd76d,
        /* Ridotta leggermente l'espansione per non impastare lo schermo */
        0 0 8px rgba(255,215,109,.45);

}

/* ---------------- VERDE SMERALDO ---------------- */

.luccichio.verde{

    color:#8ef7d4;

    text-shadow:
        0 0 1px #ffffff,
        0 0 3px #d9fff5,
        0 0 6px #5ce8b8,
        0 0 8px rgba(92,232,184,.45);

}

/* ---------------- VIOLA ---------------- */

.luccichio.viola{

    color:#d9c3ff;

    text-shadow:
        0 0 1px #ffffff,
        0 0 3px #f2e9ff,
        0 0 6px #b58cff,
        0 0 8px rgba(181,140,255,.45);

}

@keyframes luccichio{

    0%{
        opacity:0;
        transform: scale(.2) rotate(0deg);
    }

    20%{
        opacity:1;
        transform: scale(1);
    }

    70%{
        opacity:.85;
    }

    100%{
        opacity:0;
        transform: scale(.2) rotate(35deg);
    }

}

/*---------------------------------
BAGLIORI
----------------------*/
#baglioriTarot{

    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:5;

}

.bagliore{

    position:absolute;

    opacity:0;

    transform:translate(-50%,-50%) scale(.85);

    animation:baglioreTarot ease-in-out infinite;
    
    /* RIMOSSO mix-blend-mode: screen che cancellava i pixel sfocati */

}

.bagliore::before,
.bagliore::after,
.bagliore span{

    content:"";

    position:absolute;

    border-radius:50%;

    /* Riportato a 35px: i pixel rimangono più uniti e visibili */
    filter:blur(35px); 

}

/* -------------------- ORO -------------------- */

.bagliore.oro::before{
    width:170px;
    height:120px;
    left:0;
    top:10px;
    background:rgba(255,220,110,.14); /* Leggermente aumentata la densità */
}

.bagliore.oro::after{
    width:120px;
    height:160px;
    left:30px;
    top:-10px;
    background:rgba(255,245,210,.10);
}

.bagliore.oro span{
    width:150px;
    height:140px;
    left:12px;
    top:18px;
    background:rgba(255,230,150,.08);
}

/* -------------------- VERDE -------------------- */

.bagliore.verde::before{
    width:170px;
    height:120px;
    left:0;
    top:10px;
    background:rgba(75,220,175,.14);
}

.bagliore.verde::after{
    width:120px;
    height:160px;
    left:30px;
    top:-10px;
    background:rgba(220,255,245,.10);
}

.bagliore.verde span{
    width:150px;
    height:140px;
    left:12px;
    top:18px;
    background:rgba(120,235,195,.08);
}

/* -------------------- VIOLA -------------------- */

.bagliore.viola::before{
    width:170px;
    height:120px;
    left:0;
    top:10px;
    background:rgba(180,145,255,.14);
}

.bagliore.viola::after{
    width:120px;
    height:160px;
    left:30px;
    top:-10px;
    background:rgba(245,238,255,.10);
}

.bagliore.viola span{
    width:150px;
    height:140px;
    left:12px;
    top:18px;
    background:rgba(205,175,255,.08);
}

@keyframes baglioreTarot{

    0%{
        opacity:0;
        transform: translate(-50%, -50%) rotate(var(--rotation, 0deg)) scale(.85);
    }

    35%{
        /* IL GIUSTO COMPROMESSO: Un 35% nitido, magico ma non invasivo */
        opacity:.35; 
        transform: translate(-50%, -50%) rotate(var(--rotation, 0deg)) scale(1);
    }

    70%{
        /* Fase di stasi calibrata al 30% per accompagnare la dissolvenza */
        opacity:.30; 
    }

    100%{
        opacity:0;
        transform: translate(-50%, -50%) rotate(var(--rotation, 0deg)) scale(1.08);
    }

}


/*---------------------
PULVISCOLO
----------------------*/
#stelleOro { 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  overflow: hidden; 
  z-index: 3; 
}

.stellaOro { 
  position: absolute; 
  animation: respiroStella 3s infinite ease-in-out; 
  
  /* Luci ridotte in pixel (da 2px a 6px) per adattarsi a stelle di 5-12px */
  filter: drop-shadow(0 0 2px rgba(255, 231, 160, 0.9)) 
          drop-shadow(0 0 5px rgba(212, 175, 55, 0.6));
}

.stellaOro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, #ffe7a0 0%, #d4af37 55%, #9a6b1f 100%); 
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}

@keyframes respiroStella { 
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(0.7); 
  } 
  50% { 
    opacity: 1; 
    transform: scale(1.3); 
  } 
}


.nebbia-cosmica-sx, .nebbia-cosmica-dx {
  position: absolute;
  top: -10%;
  bottom: -10%;
  width: 35%; /* Copre bene la fascia laterale vuota */
  pointer-events: none;
  z-index: 1; /* Sta dietro a tutto il resto, si fonde con la foto */
  filter: blur(60px); /* Fondamentale: trasforma i cerchi in fumo soffice */
  mix-blend-mode: screen; /* Fa passare i dettagli scuri della foto sotto */
  animation: movimentoFumo 12s infinite ease-in-out;
}

.nebbia-cosmica-sx {
  left: -5%;
  /* Genera tre sfere gassose sovrapposte di colore viola e blu notte */
  background: 
    radial-gradient(circle at 20% 30%, rgba(147, 51, 234, 0.25) 0%, transparent 60%),
    radial-gradient(circle at 40% 70%, rgba(79, 70, 229, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 10% 50%, rgba(147, 51, 234, 0.15) 0%, transparent 70%);
}

.nebbia-cosmica-dx {
  right: -5%;
  /* Genera sfere gassose verdi e azzurre per ricalcare il lato destro della foto */
  background: 
    radial-gradient(circle at 80% 20%, rgba(20, 184, 166, 0.25) 0%, transparent 60%),
    radial-gradient(circle at 60% 60%, rgba(13, 148, 136, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
  animation-delay: -6s; /* Alterna il movimento rispetto alla sinistra */
}

/* Fa deformare e spostare lentamente il fumo per renderlo vivo */
@keyframes movimentoFumo {
  0%, 100% {
    transform: scale(1) translate(0, 0) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.15) translate(2%, 3%) rotate(5deg);
    opacity: 0.8;
  }
}