/**
 * Tooltip Transition Keyframes
 *
 * Sistema de animaciones CSS para transiciones de tooltip con:
 * - Items staggered enter/exit
 * - Grid-based height transitions
 * - 3D title rotations
 *
 * Performance: GPU-accelerated (transform + opacity only)
 */

/* ============================================================================
   ITEMS ANIMATIONS - Staggered Enter/Exit
   ============================================================================ */

@keyframes tooltip-item-enter {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes tooltip-item-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-4px);
  }
}

/**
 * Item States con CSS Custom Properties
 *
 * Uso: <div style="--animation-order: 0" data-state="entering">
 */
.sidebar-sublink[data-state="entering"] {
  animation: tooltip-item-enter 150ms cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: calc(var(--animation-order, 0) * 30ms + 150ms);
  animation-fill-mode: both;
}

.sidebar-sublink[data-state="leaving"] {
  animation: tooltip-item-exit 100ms cubic-bezier(0.4, 0, 0.6, 1);
  animation-delay: calc(var(--animation-order, 0) * 20ms);
  animation-fill-mode: both;
}

/* ============================================================================
   TITLE 3D ROTATIONS
   ============================================================================ */

/**
 * Title Rotate Up (direction-aware)
 * Usado cuando navegamos hacia arriba en el sidebar
 */
@keyframes tooltip-title-rotate-up {
  from {
    transform: rotateX(0deg);
    opacity: 1;
  }
  to {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}

@keyframes tooltip-title-enter-from-below {
  from {
    transform: rotateX(90deg);
    opacity: 0;
  }
  to {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

/**
 * Title Rotate Down (direction-aware)
 * Usado cuando navegamos hacia abajo en el sidebar
 */
@keyframes tooltip-title-rotate-down {
  from {
    transform: rotateX(0deg);
    opacity: 1;
  }
  to {
    transform: rotateX(90deg);
    opacity: 0;
  }
}

@keyframes tooltip-title-enter-from-above {
  from {
    transform: rotateX(-90deg);
    opacity: 0;
  }
  to {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

/**
 * Title States
 */
.tooltip-title[data-direction="up"][data-state="leaving"] {
  animation: tooltip-title-rotate-up 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tooltip-title[data-direction="up"][data-state="entering"] {
  animation: tooltip-title-enter-from-below 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tooltip-title[data-direction="down"][data-state="leaving"] {
  animation: tooltip-title-rotate-down 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tooltip-title[data-direction="down"][data-state="entering"] {
  animation: tooltip-title-enter-from-above 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ============================================================================
   3D CUBE FACES (Enfoque A: Multi-cara)
   ============================================================================ */

/**
 * Cubo 3D con 6 caras para títulos
 *
 * Estructura:
 * .title-scene (perspective)
 *   └─ .title-cube (preserve-3d)
 *       ├─ .title-face--front
 *       ├─ .title-face--back
 *       ├─ .title-face--top
 *       ├─ .title-face--bottom
 *       ├─ .title-face--left
 *       └─ .title-face--right
 */

.title-scene {
  perspective: 600px;
  position: relative;
  width: 100%;
  height: 2rem;
}

.title-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Empujar hacia atrás para evitar blur en texto */
  transform: translateZ(-1rem);
}

.title-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 1rem;
  font-weight: 500;
}

/* Posicionamiento de caras - Vertical rotation (rotateX) */
.title-face--front {
  transform: rotateX(0deg) translateZ(1rem);
}

.title-face--top {
  transform: rotateX(90deg) translateZ(1rem);
}

.title-face--bottom {
  transform: rotateX(-90deg) translateZ(1rem);
}

.title-face--back {
  transform: rotateX(180deg) translateZ(1rem);
}

/* Estados del cubo - Direction-aware */
.title-cube[data-face="front"] {
  transform: translateZ(-1rem) rotateX(0deg);
}

.title-cube[data-face="top"] {
  transform: translateZ(-1rem) rotateX(-90deg);
}

.title-cube[data-face="bottom"] {
  transform: translateZ(-1rem) rotateX(90deg);
}

.title-cube[data-face="back"] {
  transform: translateZ(-1rem) rotateX(180deg);
}

/* ============================================================================
   GRID HEIGHT TRANSITION (Grid Trick)
   ============================================================================ */

/**
 * Grid trick para height: auto transitions
 *
 * Técnica: grid-template-rows: 0fr → 1fr
 * Browser support: Chrome 107+, Firefox 117+, Safari 16.4+
 */

.tooltip-content-grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 50ms; /* Empieza después del fade-out de items */
}

.tooltip-content-grid[data-state="open"] {
  grid-template-rows: 1fr;
}

.tooltip-content-inner {
  overflow: hidden;
  min-height: 0; /* Crítico para que grid trick funcione */
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/**
 * Contenedor con perspective para títulos crossfade
 */
.tooltip-title-perspective {
  perspective: 600px;
  position: relative;
  width: 100%;
  height: 2rem;
  overflow: hidden;
}

/**
 * Disable animations durante hover rápido (opcional)
 * Usar con cuidado: puede causar flickering
 */
.tooltip-no-animations * {
  animation: none !important;
  transition: none !important;
}

/* ============================================================================
   DEBUG HELPERS
   ============================================================================ */

/**
 * Visualización de estados en debug mode
 */
[data-tooltip-debug="true"] .sidebar-sublink[data-state]::before {
  content: attr(data-state);
  position: absolute;
  top: 0;
  right: 0;
  font-size: 8px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1000;
}

[data-tooltip-debug="true"] .tooltip-title[data-direction]::after {
  content: "dir:" attr(data-direction);
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 8px;
  background: rgba(0, 0, 255, 0.8);
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1000;
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/**
 * GPU acceleration hints
 */
.sidebar-sublink[data-state],
.tooltip-title[data-state],
.title-cube {
  will-change: transform, opacity;
}

/**
 * Contain layout/paint/style para mejor performance
 */
.tooltip-content-grid {
  contain: layout style paint;
}

/**
 * Reduce motion para accesibilidad
 */
@media (prefers-reduced-motion: reduce) {
  .sidebar-sublink[data-state],
  .tooltip-title[data-state],
  .title-cube,
  .tooltip-content-grid {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}