/* ============================================================
   MACHINE A SOUS
   Masque : img/ouvertures_roulettes.svg (661.49 x 478.98, 3 fenetres)
   Levier : Lottie 405 x 1300
   ============================================================ */

.slot{
    margin: 8% 0 2%;
}

/* cadre + levier sur une ligne, meme hauteur.
   largeurs proportionnelles aux ratios : 661.49/478.98 = 1.381 et 405/1300 = .3115 */
.slot-machine{
    width: 90%;              /* meme largeur que les autres blocs (norm, banniere) */
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.381fr) minmax(0, .3115fr);
    align-items: center;
}
.slot-box  { grid-column: 1; grid-row: 1; }
.slot-lever{
    grid-column: 2;
    grid-row: 1;
    /* bas du socle du levier (91.85% de sa hauteur) aligne sur le bas
       des cadres noirs (80.4%) : meme hauteur totale, donc -11.45% */
    transform: translateY(-11.45%);
}


/* --- le cadre --- */
.slot-box{
    position: relative;
    aspect-ratio: 661.49 / 478.98;
}
.slot-mask{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;              /* au-dessus des rouleaux */
    pointer-events: none;
    display: block;
}

/* --- les 3 rouleaux, calés sur les fenetres du masque
       (en % du viewBox, +1% de debord cache sous le cadre) --- */
.slot-reel{
    position: absolute;
    z-index: 1;
    overflow: hidden;
    background: ivory;
}
.slot-reel:nth-child(1){ left: 6.3%;  width: 23.3%; top: 20.8%; height: 59.1%; }
.slot-reel:nth-child(2){ left: 37.7%; width: 23.7%; top: 20.3%; height: 59.7%; }
.slot-reel:nth-child(3){ left: 70%;   width: 23.2%; top: 21.3%; height: 58%;   }

.slot-strip{
    will-change: transform;
}
.slot-strip img{
    display: block;
    width: 100%;
    aspect-ratio: var(--cell-ratio, 1);
    box-sizing: border-box;
    padding: 12% 10%;
    object-fit: contain;
}

/* --- le levier --- */
.slot-lever{
    position: relative;
    aspect-ratio: 405 / 1300;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.slot-lever:disabled{ cursor: default; }
.slot-lever:focus-visible{ outline: 2px solid #000; outline-offset: 4px; }

.slot-lever-anim{
    position: absolute;
    inset: 0;
    display: block;
}
/* la boule doit pouvoir sortir du cadre (illusion de perspective) */
.slot-lever-anim svg{
    overflow: visible;
}

/* --- CURSEUR : une main clique sur la boule du levier, en boucle.
       Toujours visible ; retire pour la session des qu'on tire le levier (JS). --- */
.slot-curseur{
    position: absolute;
    z-index: 2;
    width: 62%;                        /* par rapport a la largeur du levier */
    left: 30.9%;                       /* pointe du doigt sur la boule */
    top: 11.5%;
    pointer-events: none;              /* le clic passe au levier */
}
.slot-curseur img{
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 47.4% 1%;        /* pivote autour de la pointe du doigt */
    transform: rotate(-35deg);
    animation: curseur-clic 1.6s ease-in-out infinite;
}
/* deux clics, puis une pause */
@keyframes curseur-clic{
      0%, 55%, 100% { transform: rotate(-35deg) scale(1); }
     12%            { transform: rotate(-35deg) scale(.86); }
     24%            { transform: rotate(-35deg) scale(1); }
     36%            { transform: rotate(-35deg) scale(.86); }
}

/* --- TITRE "TRY UR LUCK" et JACKPOT : meme emplacement au-dessus des fenetres.
       Le titre est la par defaut ; le jackpot le remplace 5 s et pulse. --- */
.slot-titre,
.slot-retente,
.slot-jackpot{
    position: absolute;
    z-index: 9;                        /* premier plan */
    left: -5%;                         /* plus grand que le cadre : deborde volontairement */
    top: -6%;
    width: 110%;
    height: auto;
    pointer-events: none;
    transform-origin: 50% 60%;
}

/* titre : visible, s'efface quand le jackpot arrive, revient apres */
.slot-titre{
    transition: opacity .45s ease .25s,
                transform .45s ease .25s,
                visibility 0s linear 0s;
}
.slot.is-jackpot .slot-titre,
.slot.is-perdu .slot-titre{
    opacity: 0;
    visibility: hidden;
    transform: scale(.85);
    transition: opacity .3s ease,
                transform .3s ease,
                visibility 0s linear .3s;
}

/* "TRY AGAIN" : remplace le titre des qu'un tirage ne donne rien,
   et reste jusqu'a la fin de la session (masque seulement pendant un jackpot) */
.slot-retente{
    opacity: 0;
    visibility: hidden;
    transform: scale(.85);
    transition: opacity .3s ease,
                transform .3s ease,
                visibility 0s linear .3s;
}
.slot.is-perdu:not(.is-jackpot) .slot-retente{
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity .45s ease .25s,
                transform .5s cubic-bezier(.34, 1.56, .64, 1) .25s,
                visibility 0s;
}

.slot-jackpot{
    opacity: 0;
    visibility: hidden;
    transform: scale(.75);
    transition: opacity .3s ease,
                transform .3s ease,
                visibility 0s linear .3s;
}
.slot.is-jackpot .slot-jackpot{
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity .4s ease .2s,
                transform .6s cubic-bezier(.34, 1.56, .64, 1) .2s,
                visibility 0s;
    animation: jackpot-pulse .5s ease-in-out .8s infinite;
}
@keyframes jackpot-pulse{
    0%, 100% { scale: 1; }
    50%      { scale: 1.1; }
}