/* Panneau « videos en attente » — inochi_city/videos.blade.php
 *
 * Ecureuil qui grignote la pellicule, en trois couches empilees :
 *   1. la main         .ivw-hand    z-index 1
 *   2. la pellicule    .ivw-film    z-index 2
 *   3. le corps        .ivw-sprite  z-index 3   (sprite sheet de 3 frames)
 *   4. les copeaux     .ivw-sparks  z-index 4
 *
 * Geometrie a ne pas casser : tout est en pixels entiers. Une taille
 * fractionnaire ferait vibrer le sprite d'une frame a l'autre.
 * La gueule est a 77px du sommet du sprite (echelle 124x174) ; la bande
 * est centree a 110px, d'ou le sommet de sprite a 110-77 = 33px.
 *
 * Les images sont regenerees par resources/art/ecureuil/build_sprite.py.
 */

.inochi-videos-wait {
    position: relative;
    max-width: 720px;
    margin: 40px auto 60px;
    padding: 30px 32px;
    background-color: #0e0e0e;
    border: 1px solid rgba(195, 151, 74, .16);
}

/* Le texte laisse la colonne de droite libre pour l'ecureuil. */
.inochi-videos-wait .ivw-copy { margin-right: 156px; }
/* Le bloc titre occupe exactement la hauteur au-dessus de la bande,
   pour que le paragraphe tombe juste en dessous. */
.inochi-videos-wait .ivw-head { min-height: 104px; }

.inochi-videos-wait .ivw-badge {
    display: inline-block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #c3974a;
    border: 1px solid rgba(195, 151, 74, .4);
    padding: 4px 10px;
    margin: 0 0 14px;
}
.inochi-videos-wait .ivw-title {
    font-family: 'Marcellus SC', serif;
    font-size: 18px;
    line-height: 1.35;
    color: #fff;
    margin: 0;
}
.inochi-videos-wait .ivw-text {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .55);
    margin: 24px 0 0;   /* degage la bande, qui passe juste au-dessus */
}

/* Tout est en pixels entiers : une largeur fractionnaire ferait vibrer
   le sprite d'une frame a l'autre. */
.inochi-videos-wait .ivw-stage {
    position: absolute;
    right: 32px;
    /* La gueule est a 77px du sommet du sprite (116px a l'echelle 186,
       ramenes a 124). La bande, centree a 104+6=110px, impose donc
       un sommet de sprite a 110-77 = 33px. */
    top: 33px;
    width: 124px;
    height: 174px;
}
.inochi-videos-wait .ivw-hand,
.inochi-videos-wait .ivw-sprite {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
}

/* 1. La main, sous la pellicule. */
.inochi-videos-wait .ivw-hand {
    z-index: 1;
    background-image: var(--ivw-hand);
    background-size: 124px 174px;
}

/* 2. La pellicule : elle traverse la carte et se termine dans la gueule. */
.inochi-videos-wait .ivw-film {
    position: absolute;
    z-index: 2;
    left: 32px;
    right: 121px;       /* soit 35px a l'interieur du sprite, entre les dents */
    top: 104px;
    height: 12px;
    background:
        repeating-linear-gradient(90deg, rgba(195,151,74,.38) 0 4px, rgba(195,151,74,0) 4px 9px) 0 0 / 9px 22% repeat-x,
        repeating-linear-gradient(90deg, rgba(195,151,74,.38) 0 4px, rgba(195,151,74,0) 4px 9px) 0 100% / 9px 22% repeat-x,
        repeating-linear-gradient(90deg, #1d242e 0 13px, #0f1319 13px 18px) 0 50% / 18px 52% repeat-x,
        #0f1319;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.05);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14%);
    animation: ivw-roll 1.1s linear infinite;
}
/* Un motif complet (18px) par cycle : la boucle est invisible. */
@keyframes ivw-roll {
    from { background-position: 0 0,    0 100%,    0 50%,    0 0; }
    to   { background-position: 18px 0, 18px 100%, 18px 50%, 0 0; }
}

/* 3. Le corps, par-dessus tout. */
.inochi-videos-wait .ivw-sprite {
    z-index: 3;
    background-image: var(--ivw-sheet);
    background-size: 372px 174px;   /* 3 frames de 124px, taille fixe */
    background-position: 0 0;
    /* step-end est INDISPENSABLE : sans lui le navigateur interpole entre deux
       keyframes et affiche, l'espace d'une image, une fenetre a cheval sur deux
       frames (une moitie de dos et une moitie de face). Doubler les bornes
       (0%, 24.9%) ne suffit pas : il reste 0,5ms d'interpolation, assez pour
       etre attrape plusieurs fois par minute. step-end supprime l'interpolation
       par construction : chaque palier tient sa valeur jusqu'au suivant. */
    animation: ivw-chew .5s step-end infinite;
}
/* Mastication : fermee -> entrouverte -> ouverte -> entrouverte. */
@keyframes ivw-chew {
    0%  { background-position:      0 0; }
    25% { background-position: -124px 0; }
    50% { background-position: -248px 0; }
    75% { background-position: -124px 0; }
}

/* 4. Les copeaux, projetes depuis la gueule vers le fond sombre. */
.inochi-videos-wait .ivw-sparks {
    position: absolute;
    z-index: 4;
    right: 100px;
    top: 77px;
    width: 0;
    height: 0;
}
.inochi-videos-wait .ivw-sparks i {
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: #f2d191;
    box-shadow: 0 0 4px rgba(224, 185, 109, .6);
    opacity: 0;
    animation: ivw-spark 1.1s ease-out infinite;
}
.inochi-videos-wait .ivw-sparks i:nth-child(1) { --dx: -29px; --dy: 17px; --rot:  200deg; animation-delay: 0s;   }
.inochi-videos-wait .ivw-sparks i:nth-child(2) { --dx: -20px; --dy: 25px; --rot: -160deg; animation-delay: .22s; background: #c3974a; }
.inochi-videos-wait .ivw-sparks i:nth-child(3) { --dx: -39px; --dy: 11px; --rot:  120deg; animation-delay: .44s; width: 3px; height: 3px; }
.inochi-videos-wait .ivw-sparks i:nth-child(4) { --dx: -16px; --dy: 29px; --rot: -240deg; animation-delay: .66s; background: #c3974a; width: 3px; height: 3px; }
.inochi-videos-wait .ivw-sparks i:nth-child(5) { --dx: -33px; --dy:  5px; --rot:   90deg; animation-delay: .88s; width: 3px; height: 3px; }
@keyframes ivw-spark {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    12%  { opacity: .95; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* En dessous de 720px la carte n'a plus deux colonnes : l'ecureuil passe
   au-dessus du texte, la bande se termine toujours dans sa gueule. */
@media (max-width: 719px) {
    .inochi-videos-wait { text-align: center; }
    .inochi-videos-wait .ivw-copy { margin-right: 0; }
    .inochi-videos-wait .ivw-head { min-height: 0; }
    .inochi-videos-wait .ivw-text { margin-top: 14px; }
    .inochi-videos-wait .ivw-stage {
        position: relative;
        right: auto;
        top: auto;
        margin: 0 auto 22px;
    }
    .inochi-videos-wait .ivw-film {
        top: 101px;                       /* 30px de padding + 71px jusqu'a la gueule */
        right: calc(50% + 27px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .inochi-videos-wait .ivw-film,
    .inochi-videos-wait .ivw-sparks i,
    .inochi-videos-wait .ivw-sprite { animation: none; }
    .inochi-videos-wait .ivw-sparks { display: none; }
    .inochi-videos-wait .ivw-sprite { background-position: -124px 0; }
}