/* ==========================================================================
   LA TESSERA DI TESTO DELLE STORIE - perche' non sia "un rettangolo del cavolo".
   --------------------------------------------------------------------------
   Richiesta del titolare (13/09/2026): "creiamo uno stile figo per i testi ..
   ora e' un rettangolo del cavolo".

   Com'e' fatta adesso: `.text-tile` (profile.css) = fondo piatto
   (`--mood-bg-card`), padding 10px, font 0.8rem, centrato. Roba da griglia, non
   da storia.

   Qui invece la tessera diventa una PAGINA: gradiente su tre strati, carattere
   di display del progetto (Downlink Bold), testo grande che si adatta allo
   schermo, virgolette come elemento grafico, ombra profonda.

   DUE ATTENZIONI:
   1. si tocca SOLO `.lightbox-stage .mood-stage-text` - cioe' la tessera dentro
      il visore delle storie. La stessa `.text-tile` usata nella GRIGLIA del
      profilo resta com'era (le regole sono piu' specifiche, ma solo per quella
      combinazione di classi).
   2. i colori vengono dalle variabili del tema (chiaro/scuro): la tessera resta
      satura in tutti e due, perche' una storia deve staccare dal fondo.
   ========================================================================== */

.lightbox-stage .text-tile.mood-stage-text {
    position: relative;
    width: min(100%, 46rem);
    max-width: 100%;
    min-height: min(70vh, 34rem);
    max-height: 78vh;
    overflow: auto;
    padding: clamp(1.6rem, 4.5vw, 3.2rem);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* carattere di display del progetto, con ripieghi sensati */
    font-family: 'Downlink Bold', var(--mood-font, system-ui, -apple-system, sans-serif);
    font-size: clamp(1.35rem, 4.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;                 /* righe di lunghezza simile, non un blocco */
    hyphens: auto;
    overflow-wrap: anywhere;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .38), 0 1px 0 rgba(0, 0, 0, .22);

    /* il fondo: luce in alto a sinistra, accento in basso a destra, colore del marchio */
    background:
        radial-gradient(120% 80% at 12% 8%, rgba(255, 255, 255, .20), transparent 58%),
        radial-gradient(95% 75% at 88% 96%, rgba(0, 206, 201, .38), transparent 62%),
        linear-gradient(150deg,
            var(--mood-primary, #6C5CE7) 0%,
            var(--mood-primary-dark, #5A4BD1) 52%,
            #241f52 100%);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .14);
    animation: storyTextEntra .35s ease-out;
}

/* La luce che passa sopra il testo (velo) */
.lightbox-stage .text-tile.mood-stage-text::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 38%);
}

/* Le virgolette: elemento grafico, non testo (non si copiano, non si leggono) */
.lightbox-stage .text-tile.mood-stage-text::after {
    content: '”';
    position: absolute;
    top: -0.06em;
    left: clamp(.5rem, 2vw, 1.5rem);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(5rem, 16vw, 11rem);
    line-height: 1;
    color: rgba(255, 255, 255, .15);
    pointer-events: none;
}

@keyframes storyTextEntra {
    from { opacity: 0; transform: translateY(10px) scale(.992); }
    to   { opacity: 1; transform: none; }
}

/* Schermi bassi (telefono in orizzontale, portatile piccolo): un filo piu' stretto */
@media (max-height: 760px) {
    .lightbox-stage .text-tile.mood-stage-text {
        min-height: min(62vh, 24rem);
        font-size: clamp(1.2rem, 3.4vw, 2.2rem);
    }
}

/* Su telefono la tessera prende tutta la larghezza utile */
@media (max-width: 720px) {
    .lightbox-stage .text-tile.mood-stage-text {
        border-radius: 18px;
        padding: 1.4rem 1.1rem;
        font-size: clamp(1.3rem, 6.4vw, 2.1rem);
    }
}

/* Chi ha chiesto meno animazioni: niente entrata */
@media (prefers-reduced-motion: reduce) {
    .lightbox-stage .text-tile.mood-stage-text { animation: none; }
}