* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Times New Roman", serif;
}

/* =========================================
   1. BACKGROUND & LUMIÈRES (OPTIMISÉ)
   ========================================= */

body {
  background-color: #000;
  /* Fond de base simple et performant */
  background: #000;
  overflow: hidden;
}

.stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  perspective: 1200px;
  isolation: isolate;
}

/* ✅ CORRECTION LAG : 
   Au lieu de flouter (blur) de petits éléments et de les agrandir, 
   on dessine directement de grands dégradés transparents.
   Le rendu est identique mais charge GPU = 0.
*/

.ambient-light,
.ambient-light-top-right {
  position: fixed;
  z-index: 0; /* Derrière tout le reste */
  pointer-events: none; /* Ne bloque pas le clic */
  will-change: transform; /* Optimisation compositing */
  border-radius: 50%;
}

/* Lumière Verte/Bleutée (Bas Gauche) */
.ambient-light {
  bottom: -25vh; /* Positionnement large */
  left: -25vw;
  width: 100vw;  /* Grande taille native */
  height: 100vw;
  
  /* Le gradient fait le flou naturellement */
  background: radial-gradient(
    circle,
    rgba(0, 255, 120, 0.18) 0%,   /* Coeur lumineux mais doux */
    rgba(0, 255, 170, 0.05) 40%,  /* Diffusion large */
    transparent 70%               /* Fin invisible */
  );
}

/* Lumière Cyan/Blanche (Haut Droite) */
.ambient-light-top-right {
  top: -30vh;
  right: -30vw;
  width: 110vw;
  height: 110vw;
  
  background: radial-gradient(
    circle,
    rgba(0, 255, 170, 0.15) 0%,
    rgba(120, 255, 210, 0.05) 45%,
    transparent 70%
  );
}

/* Ajustements pour petits écrans (Mobile) */
@media (max-width: 768px) {
  .ambient-light {
    width: 140vw;
    height: 140vw;
    opacity: 0.8;
    bottom: -15vh;
    left: -35vw;
  }
  
  .ambient-light-top-right {
    width: 130vw;
    height: 130vw;
    opacity: 0.8;
    top: -20vh;
    right: -40vw;
  }
}

/* =========================================
   2. GESTION DE LA CARTE (3D)
   ========================================= */

.card-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.2vh, 22px);
  z-index: 2;
  /* Évite que le texte ne force des recalculs de layout */
  transform: translateZ(0);
}

@media (hover: hover) and (pointer: fine) {
  .card-stack {
    gap: clamp(35px, 0.9vh, 12px);
    transform: translateY(clamp(-22px, -2.6vh, -12px)) translateZ(0);
  }
}

.tilt-area {
  padding: clamp(16px, 4vw, 56px);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  touch-action: none;
}

@media (hover: hover) and (pointer: fine) {
  .tilt-area {
    /* Zone de tilt agrandie pour Desktop */
    padding: clamp(40px, 8vw, 160px);
    margin-bottom: -40px; /* Ajustement visuel */
  }
}

.card-container {
  width: clamp(280px, 60vw, 520px);
  aspect-ratio: 520 / 325;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
  z-index: 2;
  /* Ombre : on garde spread faible pour perf */
  box-shadow:
    0 0 12px rgba(255,255,255,0.14),
    0 20px 45px rgba(0,0,0,0.72);
  will-change: transform;
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateZ(0);
  border-radius: 16px;
  background-color: #000;
}

@media (max-width: 480px) {
  .card-container {
    border-radius: 6px;
  }
}

/* Désactive transition sur mobile pour réactivité tactile */
@media (pointer: coarse) {
  .card-container { transition: none; }
}

/* Transition douce au retour de la souris */
@media (hover: hover) and (pointer: fine) {
  .card-container { transition: transform 0.10s ease-out; }
}

.card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: inherit;
}

.card-front {
  background-image: url("../assets/americanexpress.webp");
  background-size: cover;
  background-position: center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  background-color: #1a1a1a; 
}

/* Support WebP natif */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .card-front {
    background-image: image-set(
      url("../assets/americanexpress.webp") type("image/webp")
    );
  }
}

/* =========================================
   3. EFFETS VISUELS (Reflets / Shine)
   ========================================= */

.reflection {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  transform: translateZ(1px);
  
  /* On remplace le gradient dynamique par un gradient statique brillant */
  background: radial-gradient(
    circle at 50% 50%, 
    rgba(255,255,255,0.25) 0%, 
    rgba(255,255,255,0.05) 40%, 
    rgba(255,255,255,0) 70%
  );
  
  /* Le mix-blend-mode overlay est TRÈS gourmand en ressources GPU */
  /* On le remplace par une opacité simple qui est gratuite pour le GPU */
  opacity: 0; 
  transition: opacity 0.3s ease;
}

/* Au survol, on allume simplement la lumière au centre */
@media (hover: hover) and (pointer: fine) {
  .card-container:hover .reflection {
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .reflection {
    opacity: 0.50;
    mix-blend-mode: overlay; 
    background:
      radial-gradient(
        circle at var(--px) var(--py),
        rgba(255,255,255,0.42),
        rgba(255,255,255,0.14) 30%,
        rgba(255,255,255,0) 60%
      ),
      linear-gradient(120deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%);
  }
}

.shine {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.14) 35%, rgba(255,255,255,0) 50%);
  transform: translateX(-120%);
  pointer-events: none;
  opacity: 0.9;
  z-index: 3;
}

@media (prefers-reduced-motion: no-preference) {
  .shine { animation: shine 12s infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .shine { animation: none; opacity: 0.25; }
}

@keyframes shine {
  0% { transform: translateX(-120%) translateZ(2px); }
  30%, 100% { transform: translateX(120%) translateZ(2px); }
}

/* =========================================
   4. TEXTE GLITCH & TYPOGRAPHIE
   ========================================= */

.glitch-text {
  color: #b8fffb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: clamp(16px, 3.2vw, 42px);
  letter-spacing: .22em;
  text-shadow: 0 0 18px rgba(43,255,243,.22);
  user-select: none;
  white-space: nowrap;
  position: relative;
  line-height: 1;
  pointer-events: all;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  cursor: pointer;
  transform: translateZ(0);
}

@media (max-width: 480px) {
  .glitch-text {
    font-size: calc(clamp(14px, 3.2vw, 42px) * 1.3);
  }
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: .75;
  pointer-events: none;
}

.glitch-text::before { color: #2bfff3; transform: translate(2px,0); }
.glitch-text::after { color: #ff2bd6; transform: translate(-2px,0); }

/* Ajustement final de la grille */
@media (hover: hover) and (pointer: fine) {
  .tilt-area {
    --pad: clamp(40px, 8vw, 160px);
    padding: var(--pad);
    margin-bottom: calc(-1 * (var(--pad) - 10px));
  }
  #screen {
    position: relative;
    z-index: 5;
  }
}