/* ============================================
   LOGO — Animation d'ouverture interactive
   ============================================ */

/* ===== Conteneur principal ===== */
.logo-container{
  position: relative;
  width: 100%;
  max-width: 460px;
  cursor: pointer;
  margin-bottom: 0.5rem;
  perspective: 1500px;
  transform-style: preserve-3d;
  transition: all 1500ms cubic-bezier(0.19, 1, 0.22, 1);
  animation: wiggle 5s ease-in-out infinite;
}

/* Pseudo-élément pour maintenir ratio carré */
.logo-container::before{
  content: '';
  display: block;
  padding-bottom: 100%;
}

/* Effet tunnel/zoom au centre */
.logo-container::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, 
    rgba(46,196,182,0.4) 0%, 
    rgba(124,58,237,0.3) 50%, 
    rgba(59,130,246,0.2) 100%);
  filter: blur(30px);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  transition: all 1500ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* ===== Les deux moitiés du logo ===== */
.logo-half{
  position: absolute;
  top: 0;
  width: calc(50% + 0.25px);
  height: 100%;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: all 1500ms cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform, opacity;
}

.logo-left{
  left: 0;
  transform-origin: right center;
}

.logo-right{
  right: 0;
  transform-origin: left center;
}

/* Images (2x largeur pour afficher correctement après split) */
.logo-half img{
  position: absolute;
  top: 0;
  width: 200%;
  max-width: none;
  height: auto;
  display: block;
  background: transparent;
  mix-blend-mode: normal;
}

.logo-left img{
  left: 0;
  background: transparent;
}

.logo-right img{
  right: 0;
  background: transparent;
}

/* ===== Animation wiggle (toutes les 5s) ===== */
@keyframes wiggle{
  0%, 20%, 100%{
    transform: rotate(0deg) scale(1);
  }
  4%{
    transform: rotate(-2deg) scale(1.02);
  }
  8%{
    transform: rotate(2deg) scale(1.02);
  }
  12%{
    transform: rotate(-2deg) scale(1.02);
  }
  16%{
    transform: rotate(2deg) scale(1.02);
  }
}

/* ===== État ouvert (portes 3D + zoom) ===== */
.logo-container.open{
  transform: scale(3);
  z-index: 100;
}

.logo-container.open .logo-left{
  transform: translateX(-55%) rotateY(-90deg);
  opacity: 0.2;
}

.logo-container.open .logo-right{
  transform: translateX(55%) rotateY(90deg);
  opacity: 0.2;
}

.logo-container.open::after{
  transform: translate(-50%, -50%) scale(20);
  opacity: 1;
}

/* ===== Fade de la page pendant transition ===== */
body.logo-opening{
  overflow: hidden;
}

body.logo-opening main,
body.logo-opening .header{
  opacity: 0;
  transition: opacity 1000ms ease-out;
}

/* ===== Accessibilité ===== */
@media (prefers-reduced-motion: reduce){
  .logo-container,
  .logo-half{
    transition: none !important;
    animation: none !important;
  }
}