/* ==========================================================================
   ABK Gaming — surcouche animations & glitch
   Chargé APRÈS style.css. N'écrase que le nécessaire.
   Palette : rouge #e50914 / #bd0000, glitch RGB split rouge/cyan.
   ========================================================================== */

:root {
    --abk-red: #e50914;
    --abk-red-dark: #bd0000;
    --abk-cyan: #00e5ff;
    --abk-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   1. Ambiance : scanlines CRT + vignette + grain animé
   -------------------------------------------------------------------------- */

.nmtitle-wrapper {
    position: relative;
}

.nmtitle-wrapper::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.18) 3px,
        transparent 4px
    );
    opacity: 0.35;
    mix-blend-mode: multiply;
    animation: scan-roll 12s linear infinite;
}

.nmtitle-wrapper::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 41;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        transparent 55%,
        rgba(0, 0, 0, 0.35) 100%);
    animation: crt-flicker 8s steps(1) infinite;
}

@keyframes scan-roll {
    0%   { background-position: 0 0; }
    100% { background-position: 0 120px; }
}

@keyframes crt-flicker {
    0%, 100% { opacity: 1; }
    92.0%    { opacity: 1; }
    92.5%    { opacity: 0.82; }
    93.0%    { opacity: 1; }
    96.5%    { opacity: 0.9; }
    97.0%    { opacity: 1; }
}

/* --------------------------------------------------------------------------
   2. Entrée de page : héros en cascade fluide
   -------------------------------------------------------------------------- */

.section-hero .logo-container {
    animation: hero-in 1s var(--abk-ease) both;
}

.section-hero .title-title {
    animation: hero-in 1s 0.15s var(--abk-ease) both;
}

.section-hero .title-info-metadata-wrapper {
    animation: hero-in 1s 0.3s var(--abk-ease) both;
}

.section-hero .title-info-synopsis {
    animation: hero-in 1s 0.45s var(--abk-ease) both;
}

.section-hero .play-btn {
    animation: hero-in 1s 0.6s var(--abk-ease) both;
}

@keyframes hero-in {
    from {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Ken Burns très lent sur l'image de fond du héros */
img.backhero {
    animation: hero-zoom 24s var(--abk-ease) both;
    transform-origin: 70% 30%;
}

@keyframes hero-zoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

/* Le logo-titre du jeu glitche par intermittence */
.logo-container .logo {
    animation: logo-glitch 7s steps(1) infinite;
}

@keyframes logo-glitch {
    0%, 100% { transform: none; filter: none; clip-path: none; }
    41.0% { transform: translate(-3px, 0) skewX(2deg);  filter: drop-shadow(3px 0 0 rgba(229, 9, 20, 0.8)) drop-shadow(-3px 0 0 rgba(0, 229, 255, 0.8)); clip-path: inset(12% 0 55% 0); }
    41.4% { transform: translate(3px, 1px);             filter: drop-shadow(-3px 0 0 rgba(229, 9, 20, 0.8)) drop-shadow(3px 0 0 rgba(0, 229, 255, 0.8)); clip-path: inset(60% 0 8% 0); }
    41.8% { transform: none; filter: none; clip-path: none; }
    73.0% { transform: translate(2px, -1px) skewX(-3deg); filter: drop-shadow(-4px 0 0 rgba(229, 9, 20, 0.7)) drop-shadow(4px 0 0 rgba(0, 229, 255, 0.7)); clip-path: inset(30% 0 30% 0); }
    73.5% { transform: none; filter: none; clip-path: none; }
}

/* --------------------------------------------------------------------------
   3. Glitch texte (h1 + titres de sections)
   Nécessite class="glitch" + data-text="…" (dupliqué par gaming.js si absent)
   -------------------------------------------------------------------------- */

.glitch {
    position: relative;
}

.glitch > .glitch-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    overflow: hidden;
    white-space: inherit;
}

.glitch > .glitch-layer:first-of-type {
    color: var(--abk-red);
    animation: glitch-a 5.2s steps(1) infinite;
}

.glitch > .glitch-layer:last-of-type {
    color: var(--abk-cyan);
    animation: glitch-b 5.2s 0.05s steps(1) infinite;
}

@keyframes glitch-a {
    0%, 100% { opacity: 0; }
    37.0% { opacity: 0.9; transform: translate(-4px, 0);  clip-path: inset(8% 0 62% 0); }
    37.6% { opacity: 0.9; transform: translate(3px, 1px); clip-path: inset(55% 0 18% 0); }
    38.2% { opacity: 0; }
    81.0% { opacity: 0.8; transform: translate(-5px, 1px); clip-path: inset(35% 0 42% 0); }
    81.6% { opacity: 0; }
}

@keyframes glitch-b {
    0%, 100% { opacity: 0; }
    37.2% { opacity: 0.9; transform: translate(4px, 0);    clip-path: inset(62% 0 10% 0); }
    37.8% { opacity: 0.9; transform: translate(-3px, -1px); clip-path: inset(15% 0 70% 0); }
    38.4% { opacity: 0; }
    81.2% { opacity: 0.8; transform: translate(5px, -1px);  clip-path: inset(48% 0 28% 0); }
    81.8% { opacity: 0; }
}

/* Secousse du texte de base pendant les bursts */
.glitch > .glitch-base {
    display: inline-block;
    animation: glitch-shake 5.2s steps(1) infinite;
}

@keyframes glitch-shake {
    0%, 100% { transform: none; }
    37.0% { transform: translateX(-2px) skewX(3deg); }
    37.8% { transform: translateX(2px); }
    38.4% { transform: none; }
    81.0% { transform: translateX(-2px) skewX(-2deg); }
    81.8% { transform: none; }
}

/* Titres de sections : soulignement néon balayé + glitch plus discret */
h2.section-header-text {
    position: relative;
    padding-bottom: 0.4em;
}

h2.section-header-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--abk-red) 15%,
        #ff6b6b 50%,
        var(--abk-red) 85%,
        transparent 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.7);
    animation: neon-sweep 3.5s linear infinite;
}

@keyframes neon-sweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   4. Cartes de jeux : reveal au scroll + hover 3D + glitch image
   -------------------------------------------------------------------------- */

.game-card {
    transition:
        transform 0.5s var(--abk-ease),
        box-shadow 0.5s var(--abk-ease),
        border-color 0.5s var(--abk-ease),
        background-color 0.5s var(--abk-ease);
    will-change: transform;
    overflow: hidden;
    position: relative;
}

.game-card:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: rgba(229, 9, 20, 0.85);
    background-color: rgba(113, 10, 10, 0.35);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.6),
        0 0 24px rgba(229, 9, 20, 0.35),
        0 0 60px rgba(229, 9, 20, 0.15);
}

/* liseré balayé au survol */
.game-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(0, 229, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.9s var(--abk-ease);
}

.game-card:hover::after {
    transform: translateX(120%);
}

div.game-card img {
    transition: transform 0.6s var(--abk-ease), filter 0.6s var(--abk-ease);
}

.game-card:hover img {
    transform: scale(1.045);
    animation: img-glitch 0.55s steps(1) 1;
}

@keyframes img-glitch {
    0%  { clip-path: none; transform: scale(1.045); filter: none; }
    12% { clip-path: inset(10% 0 70% 0); transform: scale(1.045) translateX(-6px); filter: hue-rotate(-40deg) saturate(2.5); }
    24% { clip-path: inset(65% 0 12% 0); transform: scale(1.045) translateX(6px);  filter: hue-rotate(35deg) saturate(2); }
    36% { clip-path: inset(40% 0 40% 0); transform: scale(1.045) translateX(-4px); filter: none; }
    48% { clip-path: none; transform: scale(1.045); filter: none; }
}

/* Reveal au scroll (gaming.js pose .in-view ; sans JS rien n'est masqué) */
.js .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.8s var(--abk-ease),
        transform 0.8s var(--abk-ease);
}

.js .reveal.in-view {
    opacity: 1;
    transform: none;
}

.js .games-list .game-card.reveal:nth-child(2) {
    transition-delay: 0.15s;
}

/* --------------------------------------------------------------------------
   5. Boutons Jouer / Réserver : shine + pulse néon + jitter au survol
   -------------------------------------------------------------------------- */

a.play-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.4s var(--abk-ease),
        transform 0.3s var(--abk-ease);
    animation: btn-pulse 3s ease-in-out infinite;
}

@keyframes btn-pulse {
    0%, 100% { box-shadow: 4px 4px 1px #000, 0 0 0 rgba(229, 9, 20, 0); }
    50%      { box-shadow: 4px 4px 1px #000, 0 0 18px rgba(229, 9, 20, 0.55); }
}

a.play-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 65%);
    transform: translateX(-130%);
    animation: btn-shine 4s var(--abk-ease) infinite;
}

@keyframes btn-shine {
    0%, 55% { transform: translateX(-130%); }
    75%, 100% { transform: translateX(130%); }
}

a.play-btn:hover {
    background-color: #7a0308;
    color: #fff;
    border-color: var(--abk-red);
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(229, 9, 20, 0.8);
    animation: btn-pulse 3s ease-in-out infinite, btn-jitter 0.3s steps(1) 1;
    text-shadow:
        1.5px 0 0 rgba(0, 229, 255, 0.8),
        -1.5px 0 0 rgba(255, 80, 80, 0.9);
}

@keyframes btn-jitter {
    0%  { transform: translate(-2px, -2px) scale(1.04); }
    33% { transform: translate(2px, -1px) scale(1.04); }
    66% { transform: translate(-1px, 1px) scale(1.04); }
}

/* --------------------------------------------------------------------------
   6. Accessibilité : on coupe tout si l'utilisateur le demande
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }

    .glitch > .glitch-layer {
        display: none;
    }

    .nmtitle-wrapper::before,
    .nmtitle-wrapper::after {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   7. Petites retouches mobiles
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 599px) {
    .game-card:hover {
        transform: none;
    }

    .glitch > .glitch-layer:first-of-type,
    .glitch > .glitch-layer:last-of-type {
        animation-duration: 7s;
    }
}