/* Animation d'arrivée — traversée du Warp (Warhammer 40 000) — 5s */

:root {
  --warp-dur: 5s;
}

body.page-connexion.warp-active {
  overflow: hidden !important;
}

body.page-connexion.warp-active .warp-intro-content {
  opacity: 0;
  pointer-events: none;
}

body.page-connexion.warp-intro-done .warp-intro-content {
  animation: warpConnexionReveal 1.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.55s forwards;
}

body.page-connexion.warp-intro-done .warp-intro-content .container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@keyframes warpConnexionReveal {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* —— Overlay principal —— */
.warp-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  background: #020006;
  pointer-events: all;
  animation:
    warpIntroExit var(--warp-dur) cubic-bezier(0.4, 0, 0.2, 1) forwards,
    warpShake var(--warp-dur) ease-in-out forwards;
}

.warp-intro--skip {
  display: none;
}

@keyframes warpIntroExit {
  0%,
  90% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* Vide immaterium */
.warp-intro__void {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(
      ellipse 35% 30% at 50% 50%,
      rgba(140, 30, 200, 0.6) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 90% 70% at 50% 50%,
      rgba(30, 0, 50, 0.95) 0%,
      #020006 72%
    );
  animation: warpVoidPulse var(--warp-dur) ease-in-out forwards;
}

@keyframes warpVoidPulse {
  0% {
    transform: scale(1.6);
    filter: brightness(0.2) saturate(0.8);
  }
  18% {
    transform: scale(1.1);
    filter: brightness(0.7) saturate(1.3);
  }
  42% {
    transform: scale(1);
    filter: brightness(1.5) saturate(1.8);
  }
  68% {
    transform: scale(0.96);
    filter: brightness(1.1) saturate(1.4);
  }
  82% {
    transform: scale(1);
    filter: brightness(0.85) saturate(1.1);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Nébuleuse chaotique */
.warp-intro__nebula {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(
      ellipse 50% 40% at 20% 30%,
      rgba(255, 0, 100, 0.18) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 45% 35% at 80% 70%,
      rgba(80, 0, 255, 0.2) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 60% 50% at 60% 20%,
      rgba(0, 200, 120, 0.08) 0%,
      transparent 45%
    );
  mix-blend-mode: screen;
  animation: warpNebula var(--warp-dur) ease-in-out forwards;
  filter: blur(20px);
}

@keyframes warpNebula {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.8);
  }
  25% {
    opacity: 0.9;
    transform: rotate(45deg) scale(1.1);
  }
  55% {
    opacity: 1;
    transform: rotate(120deg) scale(1.25);
  }
  78% {
    opacity: 0.5;
    transform: rotate(180deg) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: rotate(220deg) scale(1);
  }
}

/* Champ d'étoiles filantes */
.warp-intro__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      1px 1px at 10% 20%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 51%
    ),
    radial-gradient(
      1px 1px at 30% 65%,
      rgba(200, 180, 255, 0.8) 50%,
      transparent 51%
    ),
    radial-gradient(
      1.5px 1.5px at 70% 30%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 51%
    ),
    radial-gradient(
      1px 1px at 85% 75%,
      rgba(180, 120, 255, 0.7) 50%,
      transparent 51%
    ),
    radial-gradient(
      1px 1px at 50% 10%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 51%
    ),
    radial-gradient(
      1px 1px at 15% 85%,
      rgba(255, 200, 255, 0.7) 50%,
      transparent 51%
    );
  background-size: 100% 100%;
  animation: warpStars var(--warp-dur) linear forwards;
  opacity: 0.6;
}

.warp-intro__stars--layer2 {
  background-image:
    radial-gradient(
      1.5px 1.5px at 22% 42%,
      rgba(255, 100, 200, 0.85) 50%,
      transparent 51%
    ),
    radial-gradient(
      1px 1px at 55% 78%,
      rgba(255, 255, 255, 0.7) 50%,
      transparent 51%
    ),
    radial-gradient(
      2px 2px at 88% 18%,
      rgba(180, 80, 255, 0.9) 50%,
      transparent 51%
    ),
    radial-gradient(
      1px 1px at 40% 55%,
      rgba(255, 255, 255, 0.5) 50%,
      transparent 51%
    );
  animation: warpStarsLayer2 var(--warp-dur) linear forwards;
  opacity: 0;
}

@keyframes warpStars {
  0% {
    transform: scale(0.15) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  50% {
    transform: scale(3.2) rotate(15deg);
    opacity: 0.95;
  }
  100% {
    transform: scale(5) rotate(22deg);
    opacity: 0;
  }
}

@keyframes warpStarsLayer2 {
  0%,
  8% {
    opacity: 0;
    transform: scale(0.1);
  }
  20% {
    opacity: 0.8;
    transform: scale(1.5) rotate(-5deg);
  }
  60% {
    transform: scale(4) rotate(8deg);
    opacity: 0.7;
  }
  100% {
    transform: scale(6) rotate(12deg);
    opacity: 0;
  }
}

/* Vortex du Warp */
.warp-intro__vortex {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: warpVortexSpin var(--warp-dur) ease-in-out forwards;
}

.warp-intro__ring {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.warp-intro__ring:nth-child(1) {
  width: 150vmax;
  height: 150vmax;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(180, 40, 220, 0.55) 45deg,
    rgba(255, 60, 120, 0.45) 90deg,
    transparent 135deg,
    rgba(60, 255, 140, 0.2) 180deg,
    rgba(80, 20, 200, 0.5) 240deg,
    rgba(255, 100, 180, 0.4) 300deg,
    transparent 360deg
  );
  mask: radial-gradient(
    circle,
    transparent 34%,
    black 35%,
    black 47%,
    transparent 48%
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 34%,
    black 35%,
    black 47%,
    transparent 48%
  );
  animation: warpRing1 0.9s linear infinite;
}

.warp-intro__ring:nth-child(2) {
  width: 110vmax;
  height: 110vmax;
  background: conic-gradient(
    from 180deg,
    transparent,
    rgba(255, 0, 80, 0.4),
    rgba(120, 0, 200, 0.45),
    rgba(0, 255, 150, 0.15),
    transparent
  );
  mask: radial-gradient(
    circle,
    transparent 40%,
    black 41%,
    black 53%,
    transparent 54%
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 40%,
    black 41%,
    black 53%,
    transparent 54%
  );
  animation: warpRing2 0.65s linear infinite reverse;
}

.warp-intro__ring:nth-child(3) {
  width: 75vmax;
  height: 75vmax;
  background: radial-gradient(
    circle,
    rgba(255, 50, 150, 0.3) 0%,
    transparent 65%
  );
  box-shadow:
    0 0 100px rgba(200, 50, 255, 0.55),
    inset 0 0 80px rgba(100, 0, 180, 0.45);
  animation: warpRing3 1.6s ease-in-out infinite;
}

.warp-intro__ring:nth-child(4) {
  width: 55vmax;
  height: 55vmax;
  border: 1px solid rgba(255, 80, 200, 0.25);
  background: conic-gradient(
    from 90deg,
    transparent,
    rgba(255, 0, 180, 0.35),
    transparent
  );
  animation: warpRing4 1.1s linear infinite;
}

.warp-intro__ring:nth-child(5) {
  width: 35vmax;
  height: 35vmax;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(200, 0, 255, 0.2) 40%,
    transparent 70%
  );
  animation: warpRing5 2.5s ease-in-out infinite;
}

@keyframes warpVortexSpin {
  0% {
    transform: scale(0.2) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  55% {
    transform: scale(1.08) rotate(900deg);
    opacity: 1;
  }
  78% {
    transform: scale(1.15) rotate(1260deg);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.25) rotate(1440deg);
    opacity: 0;
  }
}

@keyframes warpRing1 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes warpRing2 {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes warpRing3 {
  0%,
  100% {
    transform: scale(0.92);
    filter: hue-rotate(0deg);
  }
  50% {
    transform: scale(1.12);
    filter: hue-rotate(60deg);
  }
}

@keyframes warpRing4 {
  to {
    transform: rotate(360deg) scale(1.05);
  }
}

@keyframes warpRing5 {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Ondes de choc warp */
.warp-intro__pulse {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.warp-intro__pulse::before,
.warp-intro__pulse::after {
  content: "";
  position: absolute;
  width: 20vmax;
  height: 20vmax;
  border-radius: 50%;
  border: 2px solid rgba(200, 60, 255, 0.5);
  animation: warpPulseRing 1.4s ease-out infinite;
}

.warp-intro__pulse::after {
  animation-delay: 0.7s;
  border-color: rgba(255, 80, 150, 0.4);
}

@keyframes warpPulseRing {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(8);
    opacity: 0;
  }
}

/* Tentacules immaterium */
.warp-intro__tentacles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.warp-intro__tentacle {
  position: absolute;
  width: 45vmax;
  height: 80vmax;
  border-radius: 45% 55% 60% 40%;
  background: linear-gradient(
    160deg,
    transparent 30%,
    rgba(120, 0, 180, 0.35) 55%,
    rgba(255, 40, 120, 0.25) 75%,
    transparent 95%
  );
  filter: blur(12px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: warpTentacle var(--warp-dur) ease-in-out forwards;
}

.warp-intro__tentacle:nth-child(1) {
  top: -20%;
  left: -15%;
  transform-origin: bottom right;
  animation-delay: 0.3s;
}

.warp-intro__tentacle:nth-child(2) {
  top: -10%;
  right: -20%;
  animation-name: warpTentacleMirrored;
  animation-delay: 0.6s;
}

.warp-intro__tentacle:nth-child(3) {
  bottom: -25%;
  left: 5%;
  animation-delay: 0.9s;
}

.warp-intro__tentacle:nth-child(4) {
  bottom: -20%;
  right: -10%;
  animation-name: warpTentacleMirrored;
  animation-delay: 1.2s;
}

@keyframes warpTentacle {
  0%,
  12% {
    opacity: 0;
    transform: translateY(30%) scale(0.6) rotate(-15deg);
  }
  28% {
    opacity: 0.85;
    transform: translateY(0) scale(1) rotate(5deg);
  }
  48% {
    opacity: 1;
    transform: translateY(-5%) scale(1.08) rotate(-8deg);
  }
  65% {
    opacity: 0.7;
    transform: translateY(10%) scale(0.95) rotate(12deg);
  }
  82% {
    opacity: 0.2;
    transform: translateY(40%) scale(0.7) rotate(20deg);
  }
  100% {
    opacity: 0;
    transform: translateY(60%) scale(0.5);
  }
}

@keyframes warpTentacleMirrored {
  0%,
  12% {
    opacity: 0;
    transform: scaleX(-1) translateY(30%) scale(0.6) rotate(-15deg);
  }
  28% {
    opacity: 0.85;
    transform: scaleX(-1) translateY(0) scale(1) rotate(5deg);
  }
  48% {
    opacity: 1;
    transform: scaleX(-1) translateY(-5%) scale(1.08) rotate(-8deg);
  }
  65% {
    opacity: 0.7;
    transform: scaleX(-1) translateY(10%) scale(0.95) rotate(12deg);
  }
  82% {
    opacity: 0.2;
    transform: scaleX(-1) translateY(40%) scale(0.7) rotate(20deg);
  }
  100% {
    opacity: 0;
    transform: scaleX(-1) translateY(60%) scale(0.5);
  }
}

/* Œil du Warp */
.warp-intro__eye {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28vmax;
  height: 28vmax;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 0, 80, 0.9) 0%,
      rgba(120, 0, 160, 0.6) 18%,
      transparent 22%
    ),
    radial-gradient(
      circle at 50% 50%,
      transparent 28%,
      rgba(200, 50, 255, 0.15) 32%,
      transparent 38%
    ),
    radial-gradient(
      ellipse 100% 60% at 50% 50%,
      rgba(80, 0, 120, 0.4) 0%,
      transparent 70%
    );
  opacity: 0;
  mix-blend-mode: screen;
  animation: warpEye var(--warp-dur) ease-in-out forwards;
  filter: blur(1px);
}

.warp-intro__eye::before {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  width: 18%;
  height: 18%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: rgba(255, 40, 100, 0.95);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 30px rgba(255, 0, 100, 0.8);
}

.warp-intro__eye::after {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 1px solid rgba(255, 100, 200, 0.3);
  animation: warpEyePulse 0.8s ease-in-out infinite;
}

@keyframes warpEye {
  0%,
  22% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  35% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  62% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.15);
  }
  75% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
}

@keyframes warpEyePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* Failles dimensionnelles */
.warp-intro__rifts {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      118deg,
      transparent 48.5%,
      rgba(255, 60, 200, 0.7) 49.2%,
      rgba(180, 0, 255, 0.5) 49.8%,
      transparent 50.5%
    ),
    linear-gradient(
      62deg,
      transparent 62%,
      rgba(0, 255, 180, 0.35) 62.5%,
      transparent 63%
    );
  opacity: 0;
  mix-blend-mode: screen;
  animation: warpRifts var(--warp-dur) steps(1) forwards;
}

@keyframes warpRifts {
  0%,
  30%,
  34%,
  48%,
  52%,
  58%,
  100% {
    opacity: 0;
    transform: none;
  }
  31%,
  49% {
    opacity: 0.7;
    transform: skewX(-3deg) scale(1.02);
  }
  32%,
  50% {
    opacity: 0.35;
  }
  59% {
    opacity: 0.5;
    transform: skewX(2deg);
  }
}

/* Éclairs du Warp */
.warp-intro__lightning {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      transparent 44%,
      rgba(255, 80, 200, 0.75) 49.5%,
      transparent 50%
    ),
    linear-gradient(
      75deg,
      transparent 58%,
      rgba(180, 60, 255, 0.65) 59%,
      transparent 59.5%
    ),
    linear-gradient(
      160deg,
      transparent 35%,
      rgba(255, 255, 255, 0.4) 35.3%,
      transparent 35.6%
    );
  opacity: 0;
  mix-blend-mode: screen;
  animation: warpLightning var(--warp-dur) steps(1) forwards;
}

.warp-intro__lightning--alt {
  background:
    linear-gradient(
      88deg,
      transparent 28%,
      rgba(0, 255, 200, 0.45) 28.4%,
      transparent 28.8%
    ),
    linear-gradient(
      132deg,
      transparent 72%,
      rgba(255, 0, 120, 0.6) 72.3%,
      transparent 72.7%
    ),
    linear-gradient(
      45deg,
      transparent 55%,
      rgba(200, 100, 255, 0.55) 55.2%,
      transparent 55.5%
    );
  animation: warpLightningAlt var(--warp-dur) steps(1) forwards;
}

@keyframes warpLightning {
  0%,
  14%,
  18%,
  28%,
  32%,
  44%,
  48%,
  58%,
  62%,
  100% {
    opacity: 0;
  }
  15%,
  29%,
  45%,
  59% {
    opacity: 0.9;
    transform: scale(1.03) skewX(-3deg);
  }
  16%,
  30%,
  46%,
  60% {
    opacity: 0.35;
  }
}

@keyframes warpLightningAlt {
  0%,
  20%,
  24%,
  38%,
  42%,
  52%,
  56%,
  66%,
  70%,
  100% {
    opacity: 0;
  }
  21%,
  39%,
  53%,
  67% {
    opacity: 0.85;
    transform: scale(1.02) skewX(2deg);
  }
  22%,
  40%,
  54%,
  68% {
    opacity: 0.25;
  }
}

/* Orbes chaotiques */
.warp-intro__orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.warp-intro__orbs span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 150, 255, 0.95) 0%,
    rgba(180, 0, 255, 0.4) 60%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(255, 80, 200, 0.8);
  opacity: 0;
  animation: warpOrb var(--warp-dur) ease-out forwards;
}

.warp-intro__orbs span:nth-child(1) {
  top: 20%;
  left: 15%;
  animation-delay: 0.4s;
}
.warp-intro__orbs span:nth-child(2) {
  top: 35%;
  left: 78%;
  animation-delay: 0.7s;
  width: 12px;
  height: 12px;
}
.warp-intro__orbs span:nth-child(3) {
  top: 62%;
  left: 25%;
  animation-delay: 1s;
}
.warp-intro__orbs span:nth-child(4) {
  top: 70%;
  left: 82%;
  animation-delay: 0.55s;
  width: 6px;
  height: 6px;
}
.warp-intro__orbs span:nth-child(5) {
  top: 48%;
  left: 8%;
  animation-delay: 1.3s;
  width: 10px;
  height: 10px;
}
.warp-intro__orbs span:nth-child(6) {
  top: 15%;
  left: 55%;
  animation-delay: 0.85s;
}

@keyframes warpOrb {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  15% {
    opacity: 1;
    transform: translate(20px, -30px) scale(1.5);
  }
  40% {
    opacity: 0.9;
    transform: translate(-40px, 50px) scale(2);
  }
  65% {
    opacity: 0.5;
    transform: translate(60px, -20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-80px, 80px) scale(0);
  }
}

/* Aberration chromatique */
.warp-intro__chromatic {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  animation: warpChromatic var(--warp-dur) ease-in-out forwards;
}

.warp-intro__chromatic--red {
  background: radial-gradient(
    ellipse 60% 50% at 50% 50%,
    rgba(255, 0, 60, 0.12) 0%,
    transparent 70%
  );
  animation-name: warpChromaticRed;
}

.warp-intro__chromatic--cyan {
  background: radial-gradient(
    ellipse 60% 50% at 50% 50%,
    rgba(0, 255, 220, 0.1) 0%,
    transparent 70%
  );
  animation-name: warpChromaticCyan;
}

@keyframes warpChromaticRed {
  0%,
  20%,
  78%,
  100% {
    opacity: 0;
    transform: translate(0);
  }
  35%,
  55% {
    opacity: 0.7;
    transform: translate(-8px, 3px);
  }
  45% {
    opacity: 0.9;
    transform: translate(-12px, -2px);
  }
}

@keyframes warpChromaticCyan {
  0%,
  20%,
  78%,
  100% {
    opacity: 0;
    transform: translate(0);
  }
  35%,
  55% {
    opacity: 0.7;
    transform: translate(8px, -3px);
  }
  45% {
    opacity: 0.9;
    transform: translate(12px, 2px);
  }
}

/* Distorsion + scanlines */
.warp-intro__distortion {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 0, 120, 0.04) 2px,
      rgba(255, 0, 120, 0.04) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 80px,
      rgba(0, 255, 200, 0.02) 80px,
      rgba(0, 255, 200, 0.02) 81px
    );
  animation: warpDistort var(--warp-dur) ease-in-out forwards;
  pointer-events: none;
}

@keyframes warpDistort {
  0%,
  100% {
    transform: none;
    filter: none;
  }
  20% {
    transform: translateX(-6px) skewX(1.5deg);
    filter: hue-rotate(25deg) saturate(1.6);
  }
  38% {
    transform: translateX(8px) skewX(-2deg) scaleY(1.02);
    filter: hue-rotate(-20deg) saturate(2);
  }
  52% {
    transform: translateX(-5px) skewX(1deg);
    filter: hue-rotate(40deg) saturate(1.8);
  }
  68% {
    transform: translateX(4px) skewX(-0.5deg);
    filter: hue-rotate(-10deg);
  }
}

/* Bruit immaterium */
.warp-intro__noise {
  position: absolute;
  inset: -50%;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  animation: warpNoise var(--warp-dur) steps(6) forwards;
  pointer-events: none;
}

@keyframes warpNoise {
  0%,
  15% {
    opacity: 0;
  }
  25%,
  70% {
    opacity: 0.18;
    transform: translate(0, 0);
  }
  30% {
    transform: translate(-2%, 1%);
  }
  40% {
    transform: translate(1%, -2%);
  }
  50% {
    transform: translate(-1%, 2%);
  }
  60% {
    transform: translate(2%, -1%);
  }
  100% {
    opacity: 0;
  }
}

/* Déchirure d'écran */
.warp-intro__tear {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    transparent 0%,
    transparent 46%,
    rgba(255, 0, 180, 0.15) 46.2%,
    rgba(0, 255, 200, 0.1) 46.5%,
    transparent 46.8%,
    transparent 100%
  );
  opacity: 0;
  animation: warpTear var(--warp-dur) steps(1) forwards;
  pointer-events: none;
}

@keyframes warpTear {
  0%,
  40%,
  44%,
  54%,
  58%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
  41%,
  55% {
    opacity: 0.8;
    transform: translateY(-8px);
  }
  42%,
  56% {
    opacity: 0.4;
    transform: translateY(12px);
  }
  43%,
  57% {
    opacity: 0.6;
    transform: translateY(-4px);
  }
}

/* Champ de Gellar — stabilisation */
.warp-intro__field {
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  box-shadow: inset 0 0 0 0 rgba(201, 162, 39, 0);
  animation: warpGellarField var(--warp-dur) ease-out forwards;
  pointer-events: none;
}

.warp-intro__gellar-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 162, 39, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 39, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask: radial-gradient(ellipse 70% 65% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask: radial-gradient(
    ellipse 70% 65% at 50% 50%,
    black 20%,
    transparent 75%
  );
  opacity: 0;
  animation: warpGellarGrid var(--warp-dur) ease-out forwards;
  pointer-events: none;
}

@keyframes warpGellarField {
  0%,
  68% {
    box-shadow: inset 0 0 0 0 rgba(201, 162, 39, 0);
    border-color: transparent;
  }
  74% {
    box-shadow:
      inset 0 0 100px rgba(201, 162, 39, 0.3),
      inset 0 0 160px rgba(80, 120, 200, 0.2),
      0 0 40px rgba(201, 162, 39, 0.15);
    border-color: rgba(201, 162, 39, 0.55);
  }
  82% {
    box-shadow:
      inset 0 0 50px rgba(201, 162, 39, 0.18),
      inset 0 0 80px rgba(80, 120, 200, 0.12);
    border-color: rgba(201, 162, 39, 0.25);
  }
  92% {
    box-shadow:
      inset 0 0 30px rgba(201, 162, 39, 0.1),
      inset 0 0 50px rgba(80, 120, 200, 0.08);
    border-color: rgba(201, 162, 39, 0.12);
  }
  100% {
    box-shadow: inset 0 0 0 0 transparent;
    border-color: transparent;
  }
}

@keyframes warpGellarGrid {
  0%,
  70% {
    opacity: 0;
    transform: scale(1.2);
  }
  76% {
    opacity: 0.7;
    transform: scale(1);
  }
  86% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Texte impérial + glitch */
.warp-intro__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  z-index: 2;
  animation: warpTextSequence var(--warp-dur) ease-out forwards;
}

.warp-intro__line1 {
  position: relative;
  display: block;
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow:
    0 0 20px rgba(200, 50, 255, 0.8),
    0 0 40px rgba(120, 0, 180, 0.5);
  font-size: clamp(0.75rem, 3.5vw, 1.35rem);
  color: rgba(220, 160, 255, 0.95);
  animation: warpTextGlitch var(--warp-dur) steps(1) forwards;
}

.warp-intro__line1::before,
.warp-intro__line1::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.warp-intro__line1::before {
  color: rgba(255, 0, 100, 0.7);
  clip-path: inset(0 50% 0 0);
  animation: warpTextGhostRed var(--warp-dur) steps(1) forwards;
}

.warp-intro__line1::after {
  color: rgba(0, 255, 200, 0.6);
  clip-path: inset(0 0 0 50%);
  animation: warpTextGhostCyan var(--warp-dur) steps(1) forwards;
}

@keyframes warpTextSequence {
  0%,
  10% {
    opacity: 0;
    transform: scale(1.4) translateY(24px);
    filter: blur(10px);
  }
  18% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
  62% {
    opacity: 1;
    transform: scale(1);
  }
  74% {
    opacity: 1;
    transform: scale(1.03);
    filter: brightness(1.4);
  }
  88%,
  100% {
    opacity: 0;
    transform: scale(0.96) translateY(-12px);
    filter: blur(6px);
  }
}

@keyframes warpTextGlitch {
  0%,
  17%,
  63%,
  100% {
    transform: translate(0);
    text-shadow:
      0 0 20px rgba(200, 50, 255, 0.8),
      0 0 40px rgba(120, 0, 180, 0.5);
  }
  20% {
    transform: translate(-3px, 1px);
    text-shadow:
      -2px 0 rgba(255, 0, 100, 0.8),
      2px 0 rgba(0, 255, 200, 0.6);
  }
  24% {
    transform: translate(2px, -2px);
  }
  28% {
    transform: translate(-2px, 0);
  }
  32% {
    transform: translate(3px, 2px);
    text-shadow:
      3px 0 rgba(255, 0, 100, 0.7),
      -3px 0 rgba(0, 255, 200, 0.5);
  }
  36%,
  58% {
    transform: translate(0);
  }
  42% {
    transform: translate(-4px, 1px);
  }
  48% {
    transform: translate(3px, -1px);
  }
  54% {
    transform: translate(-2px, 2px);
  }
}

@keyframes warpTextGhostRed {
  0%,
  30%,
  100% {
    opacity: 0;
    transform: translate(0);
  }
  38%,
  58% {
    opacity: 0.6;
    transform: translate(-4px, 0);
  }
  42%,
  52% {
    opacity: 0.3;
    transform: translate(3px, 2px);
  }
}

@keyframes warpTextGhostCyan {
  0%,
  30%,
  100% {
    opacity: 0;
    transform: translate(0);
  }
  38%,
  58% {
    opacity: 0.5;
    transform: translate(4px, 0);
  }
  42%,
  52% {
    opacity: 0.25;
    transform: translate(-3px, -2px);
  }
}

/* Flash de matérialisation */
.warp-intro__flash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 240, 200, 0.95) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(201, 162, 39, 0.3) 0%,
      transparent 65%
    );
  opacity: 0;
  mix-blend-mode: screen;
  animation: warpFlash var(--warp-dur) ease-out forwards;
  pointer-events: none;
}

@keyframes warpFlash {
  0%,
  86% {
    opacity: 0;
  }
  92% {
    opacity: 0.85;
  }
  96% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

@keyframes warpShake {
  0%,
  12%,
  88%,
  100% {
    transform: none;
  }
  22% {
    transform: translate(4px, -3px) rotate(0.4deg);
  }
  26% {
    transform: translate(-5px, 4px) rotate(-0.5deg);
  }
  30% {
    transform: translate(3px, 5px);
  }
  34% {
    transform: translate(-4px, -3px) rotate(0.3deg);
  }
  38% {
    transform: translate(5px, 2px);
  }
  44% {
    transform: translate(-3px, 4px) rotate(-0.3deg);
  }
  50% {
    transform: translate(6px, -2px);
  }
  56% {
    transform: translate(-5px, 3px) rotate(0.4deg);
  }
  62% {
    transform: translate(4px, -4px);
  }
  68% {
    transform: translate(-2px, 2px);
  }
}

/* Pause dépliage connexion pendant le Warp */
body.warp-active.page-connexion .login-card-fold-top,
body.warp-active.page-connexion .login-card-fold-bottom {
  animation-play-state: paused;
}

body.warp-intro-done.page-connexion .login-card-fold-top,
body.warp-intro-done.page-connexion .login-card-fold-bottom {
  animation-play-state: running;
}

body.warp-intro-done.page-connexion .login-card-fold-top {
  animation-delay: 0.55s;
}

body.warp-intro-done.page-connexion .login-card-fold-bottom {
  animation-delay: 0.61s;
}

@media (prefers-reduced-motion: reduce) {
  .warp-intro {
    display: none !important;
  }

  body.page-connexion.warp-active .warp-intro-content {
    opacity: 1;
    pointer-events: auto;
  }
}