/* Page Transition - Wipe Effect avec ligne inclinée */

/* Empêcher tout débordement horizontal qui pourrait causer un décalage */
body {
  overflow-x: hidden;
}

/* Isoler les éléments principaux pour éviter les glitches de layout pendant l'animation */
.article-header,
.article-content,
.navbar {
  contain: layout style;
}

.page-transition {
  position: fixed;
  /* Étendre verticalement pour compenser le skew qui relève le coin supérieur gauche */
  top: -20vh;
  left: -30%;
  width: 160%;
  height: 140vh;
  background-color: #e5e5e5;
  z-index: 99999;
  pointer-events: none;
  transform: translateX(-110%) skewX(-10deg);
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Forcer l'accélération GPU et isoler le contexte */
  will-change: transform;
  contain: strict;
  isolation: isolate;
}

/* Logo au centre du rideau */
.transition-logo {
  width: 96px;
  height: 96px;
  transform: skewX(10deg); /* Compenser le skew du parent (desktop) */
  animation: thinking 1.5s ease-in-out forwards;
}

@keyframes thinking {
  0% {
    filter: invert(0.7);
  }
  30% {
    filter: invert(0);
  }
  60% {
    filter: invert(0.5);
  }
  100% {
    filter: invert(0);
  }
}

/* Phase 1: Wipe in (couvre l'écran de gauche à droite) */
.page-transition.wipe-in {
  animation: wipeIn 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Phase 2: Wipe out (révèle la nouvelle page) */
.page-transition.wipe-out {
  transform: translateX(0%) skewX(-10deg);
  animation: wipeOut 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes wipeIn {
  0% {
    transform: translateX(-110%) skewX(-10deg);
  }
  100% {
    transform: translateX(0%) skewX(-10deg);
  }
}

@keyframes wipeOut {
  0% {
    transform: translateX(0%) skewX(-10deg);
  }
  100% {
    transform: translateX(110%) skewX(-10deg);
  }
}

/* Reverse transitions (for back button) */
@keyframes wipeInReverse {
  0% {
    transform: translateX(110%) skewX(-10deg);
  }
  100% {
    transform: translateX(0%) skewX(-10deg);
  }
}

@keyframes wipeOutReverse {
  0% {
    transform: translateX(0%) skewX(-10deg);
  }
  100% {
    transform: translateX(-110%) skewX(-10deg);
  }
}

.page-transition.wipe-in-reverse {
  animation: wipeInReverse 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.page-transition.wipe-out-reverse {
  transform: translateX(0%) skewX(-10deg);
  animation: wipeOutReverse 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Pendant la transition, geler toutes les animations pour éviter les glitches */
body.transitioning {
  overflow: hidden;
  /* IMPORTANT: Désactiver la transition sur le body lui-même (articles.css a transition: opacity) */
  transition: none !important;
}

body.transitioning *:not(.page-transition, .transition-logo) {
  animation-play-state: paused !important;
  transition: none !important;
}

/* MOBILE: Pendant la transition, geler le contenu mais le garder visible pour wipe-in */
@media (max-width: 768px) {
  body.transitioning {
    /* Empecher tout recalcul de layout */
    contain: layout style paint;
  }

  body.transitioning > *:not(.page-transition) {
    /* Geler le contenu mais le garder visible (pour voir le rideau arriver) */
    pointer-events: none !important;
    /* Desactiver toute animation/transition restante */
    animation: none !important;
    transition: none !important;
  }
}

/* Mobile: animation SIMPLIFIEE sans skew pour performance maximale */
@media (max-width: 768px) {
  .page-transition {
    /* Sans skew, on peut utiliser des dimensions plus simples */
    /* Couvrir tout le viewport sans décalage */
    left: 0;
    right: 0;
    width: auto;
    top: 0;
    height: 100vh;
    /* Supprimer le skew de base */
    transform: translateX(-105%) translateZ(0);
    /* Laisser le browser gérer la composition au lieu de forcer un layer permanent */
    will-change: auto;
  }

  /* Animations mobile SANS SKEW - ease-out pour masquer tout micro-stutter en fin d'animation */
  .page-transition.wipe-in {
    animation: wipeInMobile 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  .page-transition.wipe-out {
    animation: wipeOutMobile 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  .page-transition.wipe-in-reverse {
    animation: wipeInReverseMobile 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  .page-transition.wipe-out-reverse {
    animation: wipeOutReverseMobile 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  @keyframes wipeInMobile {
    0% { transform: translateX(-105%) translateZ(0); }
    100% { transform: translateX(0%) translateZ(0); }
  }

  @keyframes wipeOutMobile {
    0% { transform: translateX(0%) translateZ(0); }
    100% { transform: translateX(105%) translateZ(0); }
  }

  @keyframes wipeInReverseMobile {
    0% { transform: translateX(105%) translateZ(0); }
    100% { transform: translateX(0%) translateZ(0); }
  }

  @keyframes wipeOutReverseMobile {
    0% { transform: translateX(0%) translateZ(0); }
    100% { transform: translateX(-105%) translateZ(0); }
  }

  /* Logo mobile : animation légère (opacity au lieu de filter qui est coûteux) */
  .transition-logo {
    filter: none;
    transform: none; /* Pas de skew a compenser sur mobile */
    animation: thinkingMobile 1s ease-in-out forwards;
  }

  @keyframes thinkingMobile {
    0% {
      opacity: 0.3;
    }
    30% {
      opacity: 1;
    }
    60% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
}