/* Entrée cinématographique du bloc IMPERO de l'accueil (js/showcase-fx.js).
   Le design ne change pas : seul le mouvement s'ajoute, et l'état final est celui de css/game-showcase.css. */
.game-showcase--impero .sfx-title { position:relative; font-kerning:none; }
.sfx-l { position:relative; display:inline-block; }
/* Reflet : chaque lettre porte le même dégradé, décalé de sa position, pour qu'un seul éclat traverse le mot. */
.sfx-l::after { content:attr(data-c); position:absolute; left:0; top:0; color:transparent; background:linear-gradient(100deg, rgba(255,240,200,0) 32%, rgba(255,236,180,.55) 44%, #fffaf0 50%, rgba(255,236,180,.55) 56%, rgba(255,240,200,0) 68%) no-repeat; background-size:var(--tw, 600px) 100%; background-position:calc(var(--sx, -4000px) - var(--o, 0px)) 0; -webkit-background-clip:text; background-clip:text; pointer-events:none; }

.sfx-line { display:inline-block; overflow:hidden; overflow:clip; vertical-align:top; padding:0 .14em .16em 0; margin:0 -.14em -.16em 0; }
.sfx-in { display:inline-block; }
.game-showcase--impero .gs-rule { transform-origin:0 50%; }

.sfx-edge { position:absolute; top:0; left:50%; z-index:1; width:2px; height:100%; margin-left:-1px; background:linear-gradient(180deg, rgba(216,178,90,0), var(--gold) 14%, #fff3cf 50%, var(--gold) 86%, rgba(216,178,90,0)); box-shadow:0 0 24px rgba(216,178,90,.85), 0 0 60px rgba(216,178,90,.35); opacity:0; pointer-events:none; }
.sfx-dust { position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
.sfx-dust i { position:absolute; left:0; top:0; width:var(--d); height:var(--d); margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius:50%; background:#ffe9ad; box-shadow:0 0 10px 2px rgba(216,178,90,.85); opacity:0; }

/* Armé : l'état de départ, posé par le script seulement, jusqu'au premier passage à l'écran. */
.sfx-armed .gs-media { clip-path:inset(0 50% 0 50%); }
.sfx-armed .sfx-l, .sfx-armed .gs-eyebrow, .sfx-armed .gs-copy p, .sfx-armed .gs-actions > *, .sfx-armed .gs-facts > div, .sfx-armed .gs-top > * { opacity:0; }
.sfx-armed .sfx-in { transform:translateY(112%); }
.sfx-armed .gs-rule { transform:scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  .sfx-edge, .sfx-dust { display:none; }
}