/* ==========================================================================
   LUNARIO - lo sfogliatore
   ==========================================================================

   Un solo impianto per tutti gli schermi. Il libro e' sempre largo due pagine;
   quello che cambia e' la finestra da cui lo si guarda:

     - schermo grande: la finestra e' larga due pagine, si vede la doppia;
     - telefono: la finestra e' larga una pagina e scorre fra la meta' sinistra
       e la meta' destra.

   Cosi' anche sul telefono la pagina gira davvero, invece di scivolare di
   lato: e' lo stesso foglio che ruota, visto da piu' vicino. Tenere due
   meccanismi diversi voleva dire farne funzionare bene uno solo.
   ========================================================================== */

.ceb-lunario {
    --lun-pagina: 0.666;      /* larghezza/altezza, la corregge il JavaScript */
    --lun-giro: 620ms;
    --lun-molla: cubic-bezier(.32, .06, .22, 1);
    --lun-scorri: -25%;
    margin-block: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .ceb-lunario { --lun-giro: 1ms; }
}

/* --- il tavolo ---------------------------------------------------------- */

.ceb-lunario__scena {
    position: relative;
    margin-inline: auto;
    perspective: 2400px;
    /* L'altezza la comanda la larghezza disponibile, ma senza superare lo
       schermo: un lunario alto due schermi si sfoglia guardando i piedi. */
    width: min(100%, calc((100svh - 13rem) * var(--lun-pagina) * 2));
    aspect-ratio: calc(var(--lun-pagina) * 2);
    overflow: hidden;
    touch-action: pan-y;         /* il trascinamento di lato e' nostro, quello in giu' resta alla pagina */
    user-select: none;
    -webkit-user-select: none;
}

.ceb-lunario__libro {
    position: absolute;
    inset: 0;
    transform: translateX(var(--lun-scorri));
    transform-style: preserve-3d;
    transition: transform var(--lun-giro) var(--lun-molla);
}

.ceb-lunario.e-in-mano .ceb-lunario__libro { transition: none; }

/* L'ombra della piega, al centro. Sparisce quando si vede una pagina sola:
   li' il centro del libro non c'e'. */
.ceb-lunario__piega {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 46px;
    margin-left: -23px;
    z-index: 60;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.19) 50%,
        rgba(0,0,0,.05) 70%, rgba(0,0,0,0) 100%);
    transition: opacity var(--lun-giro) ease;
}

.ceb-lunario--bordo .ceb-lunario__piega { opacity: 0; }

/* --- i fogli ------------------------------------------------------------ */

.ceb-lunario__foglio {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform var(--lun-giro) var(--lun-molla);
    will-change: transform;
}

.ceb-lunario.e-in-mano .ceb-lunario__foglio { transition: none; }

.ceb-lunario__foglio.e-girato { transform: rotateY(-180deg); }

/* Solo i fogli attorno a quello aperto restano disegnati. Con 69 fogli tutti
   in scena il browser tiene in piedi 138 superfici in tre dimensioni e sul
   telefono il giro diventa a scatti. */
.ceb-lunario__foglio[hidden] { display: none; }

.ceb-lunario__faccia {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: #fff;
    overflow: hidden;
}

.ceb-lunario__faccia--retro { transform: rotateY(180deg); }

.ceb-lunario__faccia img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    pointer-events: none;       /* il trascinamento deve prendere il foglio, non l'immagine */
}

/* Il velo verso la piega: e' quello che fa sembrare la pagina incurvata
   invece che un cartoncino piatto. */
.ceb-lunario__faccia::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ceb-lunario__faccia--fronte::after {
    background: linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.02) 14%, rgba(0,0,0,0) 30%);
}

.ceb-lunario__faccia--retro::after {
    background: linear-gradient(270deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.02) 14%, rgba(0,0,0,0) 30%);
}

/* L'ombra che il foglio in movimento getta sotto di se'. Il JavaScript le
   cambia l'opacita' mentre si gira: massima a meta' strada, come nella carta. */
.ceb-lunario__foglio.e-in-volo { z-index: 80; }

.ceb-lunario__foglio.e-in-volo .ceb-lunario__faccia {
    box-shadow: 0 0 34px rgba(13, 39, 64, .34);
}

/* --- una pagina alla volta ---------------------------------------------- */

.ceb-lunario--singola .ceb-lunario__scena {
    width: min(100%, calc((100svh - 12rem) * var(--lun-pagina)));
    aspect-ratio: var(--lun-pagina);
}

.ceb-lunario--singola .ceb-lunario__libro { width: 200%; }

/* --- comandi ------------------------------------------------------------ */

.ceb-lunario__comandi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.ceb-lunario__freccia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--ceb-line);
    border-radius: 50%;
    background: var(--ceb-white);
    color: var(--ceb-navy);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ceb-lunario__freccia:hover:not(:disabled),
.ceb-lunario__freccia:focus-visible:not(:disabled) {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
}

.ceb-lunario__freccia:disabled { opacity: .3; cursor: default; }

.ceb-lunario__freccia svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
}

.ceb-lunario__conta {
    min-width: 8.5rem;
    text-align: center;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    color: #55606d;
}

.ceb-lunario__azione {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius);
    background: var(--ceb-white);
    color: var(--ceb-navy);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ceb-lunario__azione:hover,
.ceb-lunario__azione:focus-visible {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
}

/* --- indice -------------------------------------------------------------- */

/* Con 137 pagine tutte uguali una striscia di miniature non serve a niente:
   quello che si cerca e' un mese. */
.ceb-lunario__indice {
    margin-top: 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ceb-line);
}

.ceb-lunario__gruppo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: .7rem;
}

.ceb-lunario__gruppo-nome {
    flex: 0 0 auto;
    min-width: 5.5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ceb-gold);
}

.ceb-lunario__salto {
    padding: .3rem .6rem;
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius);
    background: var(--ceb-white);
    color: var(--ceb-navy);
    font-size: .84rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ceb-lunario__salto:hover,
.ceb-lunario__salto:focus-visible {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
}

.ceb-lunario__salto.e-qui {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
}

.ceb-lunario__salto small { opacity: .65; font-size: .78em; }

/* --- ingrandimento -------------------------------------------------------- */

.ceb-lunario__lente {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100svh;
    padding: 0;
    border: 0;
    background: rgba(13, 39, 64, .95);
}

.ceb-lunario__lente::backdrop { background: rgba(13, 39, 64, .95); }

.ceb-lunario__lente-corpo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.ceb-lunario__lente img {
    max-width: 96vw;
    max-height: 92svh;
    object-fit: contain;
    background: #fff;
}

.ceb-lunario__lente-chiudi {
    position: fixed;
    top: .8rem;
    right: .8rem;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

/* --- senza JavaScript ------------------------------------------------------ */

/* Le pagine restano una sotto l'altra: si legge tutto lo stesso. Serve anche
   a Google e alla ricerca del sito, che qui trovano il testo del lunario. */
.ceb-lunario__semplice { margin: 0; padding: 0; list-style: none; }
.ceb-lunario__semplice img { max-width: 340px; height: auto; }
.ceb-lunario__semplice li { margin-bottom: 1.5rem; }

.ceb-lunario[data-pronto] .ceb-lunario__semplice { display: none; }

.ceb-lunario:not([data-pronto]) .ceb-lunario__scena,
.ceb-lunario:not([data-pronto]) .ceb-lunario__comandi,
.ceb-lunario:not([data-pronto]) .ceb-lunario__indice { display: none; }

/* Il testo della pagina aperta, per chi non vede lo schermo. Non e'
   "display:none": quello i lettori per non vedenti lo saltano. */
.ceb-lunario__voce {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}