Animaciones y Transiciones

/* ============================================
   TRANSICIONES CSS: sintaxis completa
   ============================================ */

/* Sintaxis shorthand (la más usada) */
.btn {
    /* transition: property duration timing-function delay */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Sintaxis expandida (más legible cuando hay muchas) */
.btn {
    transition-property: background-color, transform, box-shadow;
    transition-duration: 0.3s, 0.2s, 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

/* ============================================
   TRANSICION COMÚN: hover effects
   ============================================ */

.btn {
    background-color: #3b82f6;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.2);
}

/* ============================================
   TRANSICIONES con cambio de clase (JS)
   ============================================ */

/* Elemento con estado "abierto" / "cerrado" */
.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s ease;
    padding: 0 1rem;
}

.panel.open {
    max-height: 500px;    /* Valor suficiente para el contenido */
    padding: 1rem;
}

/* ============================================
   TRANSICIONES: múltiples propiedades
   con distintas duraciones
   ============================================ */

.card {
    background: var(--surface);
    border-radius: 1rem;
    padding: 1.5rem;
    /* Cada propiedad tiene su propia duracion */
    transition:
        transform 0.2s ease,
        box-shadow 0.3s ease,
        background-color 0.5s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    background-color: var(--surface-hover);
}

/* ============================================
   TRANSICIONES: shorthand con valores mixtos
   ============================================ */

.link {
    color: var(--accent-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    /* Transicion simple de una propiedad */
    transition: color 0.2s ease;
}

.link:hover {
    color: var(--accent-cyan);
}

/* ============================================
   @KEYFRAMES: sintaxis básica
   ============================================ */

/* Con from/to (solo inicio y fin) */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Con porcentajes (múltiples puntos de control) */
@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    50% {
        opacity: 0.7;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   APLICAR la animación con la propiedad animation
   ============================================ */

.elemento {
    /* animation: name duration timing-function delay
                  iteration-count direction fill-mode play-state; */
    animation: fade-in 0.6s ease-out forwards;
}

/* Sintaxis expandida (más legible) */
.elemento {
    animation-name: slide-up;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay: 0.2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

/* ============================================
   EJEMPLOS PRACTICOS de @keyframes
   ============================================ */

/* --- Fade in + slide up (muy usado para on-scroll) --- */
@keyframes fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    opacity: 0;              /* Estado inicial invisible */
    animation: fade-slide-in 0.6s ease-out forwards;
}

/* --- Stagger: cards que entran una detrás de otra --- */
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }
.card:nth-child(4) { animation-delay: 0.3s; }

/* --- Pulse (feedback visual para notificaciones) --- */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
}

.notification {
    animation: pulse 2s infinite;
}

/* --- Spin (loader) --- */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* --- Bounce --- */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    50% {
        transform: translateY(-20px);
        animation-timing-function: ease-in;
    }
}

.bounce-icon {
    animation: bounce 1s infinite;
}

/* --- Typing effect para el cursor --- */
@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.cursor::after {
    content: '|';
    animation: blink-cursor 1s step-end infinite;
}

/* --- Shake (error de formulario) --- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.input-error {
    animation: shake 0.5s ease-in-out;
    border-color: var(--accent-red);
}

/* ============================================
   ANIMATION-FILL-MODE: qué pasa antes/después
   ============================================ */

/* forwards: mantiene el ESTADO FINAL de la animación */
.fade-element {
    opacity: 0;
    animation: fade-in 1s ease forwards;
    /* Después de la animación, opacity queda en 1
       (no vuelve al valor original de 0) */
}

/* backwards: aplica el ESTADO INICIAL antes del delay */
.fade-element-delay {
    opacity: 0;
    animation: fade-in 1s ease 0.5s backwards;
    /* Durante los 0.5s de delay, el elemento tiene
       los estilos del 0% del keyframe (opacity: 0)
       en lugar de su valor por defecto */
}

/* both: combina forwards + backwards */
.fade-element-both {
    opacity: 0;
    animation: fade-in 1s ease 0.5s both;
}

/* ============================================
   ANIMATION-DIRECTION: alternate para loops
   ============================================ */

@keyframes float {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

.floating-icon {
    animation: float 3s ease-in-out infinite alternate;
    /* Va de arriba a abajo y viceversa suavemente.
       alternate + infinite = ida y vuelta infinito */
}

/* ============================================
   ANIMATION-PLAY-STATE: pausar en hover
   ============================================ */

.marquee {
    animation: scroll-left 10s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
}

/* ============================================
   MÚLTIPLES ANIMACIONES en un solo elemento
   ============================================ */

.card-enter {
    animation:
        fade-in 0.5s ease forwards,
        slide-up 0.5s ease forwards;
}

/* Con delays diferentes para stagger */
.card-enter:nth-child(1) { animation-delay: 0s; }
.card-enter:nth-child(2) { animation-delay: 0.1s, 0.1s; }
.card-enter:nth-child(3) { animation-delay: 0.2s, 0.2s; }

/* ============================================
   ANIMACIONES EN cascade con custom properties
   ============================================ */

/* Cada card calcula su delay automáticamente */
.card {
    --index: 0;
    animation: fade-slide-in 0.5s ease both;
    animation-delay: calc(var(--index) * 0.1s);
}

.card:nth-child(1) { --index: 0; }
.card:nth-child(2) { --index: 1; }
.card:nth-child(3) { --index: 2; }
.card:nth-child(4) { --index: 3; }

/* ============================================
   TRANSFORM: funciones principales
   ============================================ */

/* --- TRANSLATE: mover el elemento --- */
.move-right  { transform: translateX(50px); }    /* 50px a la derecha */
.move-up     { transform: translateY(-20px); }   /* 20px hacia arriba */
.move-both   { transform: translate(50px, -20px); } /* X e Y */
.move-center { transform: translate(-50%, -50%); } /* Centrar con position: absolute */

/* translate() vs top/left:
   translate NO causa reflow (más rápido)
   top/left SÍ causa reflow (más lento)
   SIEMPRE preferí translate para animaciones */

/* --- ROTATE: girar el elemento --- */
.rotate-45  { transform: rotate(45deg); }
.rotate-90  { transform: rotate(0.5turn); }  /* Media vuelta */
.rotate-neg { transform: rotate(-15deg); }  /* 15 grados antihorario */
.rotate-x   { transform: rotateX(45deg); }  /* Rotar en eje X (3D) */
.rotate-y   { transform: rotateY(180deg); } /* Flip horizontal (3D) */

/* --- SCALE: escalar el elemento --- */
.scale-up   { transform: scale(1.2); }   /* 20% más grande */
.scale-down { transform: scale(0.8); }   /* 20% más chico */
.scale-x    { transform: scaleX(2); }    /* Solo ancho */
.scale-y    { transform: scaleY(0.5); }  /* Solo alto */

/* --- SKEW: sesgar el elemento --- */
.skew-x     { transform: skewX(15deg); }
.skew-y     { transform: skewY(-10deg); }
.skew-both  { transform: skew(15deg, -10deg); }

/* ============================================
   TRANSFORM: combinar funciones
   ============================================ */

/* El orden importa! Se aplican de derecha a izquierda */
.card:hover {
    transform: translateY(-4px) scale(1.02);
    /* Primero escala, luego mueve */
}

.btn:active {
    transform: scale(0.95);
    /* Efecto de "apretar" el botón */
}

/* 3D perspective flip */
.card-3d {
    perspective: 1000px; /* Se aplica al PADRE */
}

.card-3d-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d; /* Los hijos mantienen 3D */
}

.card-3d:hover .card-3d-inner {
    transform: rotateY(180deg);
}

/* ============================================
   TRANSFORM-ORIGIN: punto de origen
   ============================================ */

/* Por defecto, el origen es el centro del elemento (50% 50%) */
.rotate-corner {
    transform-origin: top left; /* Rota desde la esquina superior izquierda */
    transform: rotate(45deg);
}

.scale-bottom {
    transform-origin: bottom center; /* Escala desde abajo */
    transform: scaleX(0);
}

/* ============================================
   TRANSFORM: patrones comunes animados
   ============================================ */

/* --- Hover lift (el más usado en la web) --- */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- Expand on click --- */
.accordion-content {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}

.accordion-content.open {
    transform: scaleY(1);
}

/* --- Icon rotation on hover --- */
.icon-spin:hover {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

/* --- Tilt effect (3D en hover) --- */
.tilt-card {
    transition: transform 0.3s ease;
}

.tilt-card:hover {
    transform: perspective(600px) rotateY(-5deg) rotateX(5deg);
}

/* ============================================
   EASING FUNCTIONS: curvas de movimiento
   ============================================ */

/* --- Keywords predefinidos --- */

/* linear: velocidad constante (sin aceleracion/desaceleracion)
   Usar para: spinners, barras de progreso, marquee */
animation: spin 1s linear infinite;

/* ease: arranca lento, acelera, desacelera al final
   Es el default para animation y transition.
   Usar para: animaciones generales */
transition: opacity 0.3s ease;

/* ease-in: arranca lento, termina rápido
   Usar para: elementos que salen (fade-out, slide-out) */
transition: opacity 0.3s ease-in;

/* ease-out: arranca rápido, termina lento
   Usar para: elementos que entran (fade-in, slide-in, hover)
   RECOMENDADO para la mayoría de interacciones */
transition: transform 0.2s ease-out;

/* ease-in-out: lento al inicio y al final, rápido en el medio
   Usar para: toggle states, elementos que van y vienen */
transition: max-height 0.5s ease-in-out;

/* ============================================
   CUBIC-BEZIER: curvas totalmente custom
   ============================================ */
/* cubic-bezier(x1, y1, x2, y2)
   - x1, x2: puntos de control en el eje X (tiempo, 0 a 1)
   - y1, y2: puntos de control en el eje Y (progreso, puede ser negativo)
   Los valores x DEBEN estar entre 0 y 1 */

/* Material Design standard (muy popular) */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Material Design decelerate (para elementos que entran) */
transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);

/* Material Design accelerate (para elementos que salen) */
transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);

/* Bounce-like (rebote suave sin @keyframes) */
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

/* Snap (empieza lento, da un "salto" al final) */
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

/* Smooth ease-out extra suave */
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);

/* ============================================
   STEPS(): pasos discretos (no interpolacion)
   ============================================ */
/* steps(numero, jump-start | jump-end | jump-none | jump-both)
   Divide la animación en N pasos discretos,
   sin interpolación entre ellos */

/* Blinking cursor: 2 pasos, en cada paso cambia de estado */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.cursor {
    animation: blink 1s step-end infinite;
    /* step-end = jump-end: aplica cada paso AL FINAL de cada intervalo */
}

/* Sprite sheet animation: 8 frames */
@keyframes sprite-walk {
    from { background-position: 0; }
    to   { background-position: -800px; } /* 8 frames * 100px */
}

.character {
    width: 100px;
    height: 100px;
    background: url('sprite-sheet.png');
    animation: sprite-walk 0.8s steps(8) infinite;
    /* Cada frame dura 0.1s (0.8s / 8 steps) */
}

/* ============================================
   EASING recomendaciones prácticas
   ============================================ */

/* Hover effects: ease-out (entrada rápida, salida suave) */
.btn {
    transition: background-color 0.2s ease-out,
                transform 0.15s ease-out;
}

/* Modals / Overlays: cubic-bezier suave */
.modal-overlay {
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Layout changes: ease-in-out (symétrico) */
.sidebar {
    transition: width 0.3s ease-in-out;
}

/* Loading / spinners: linear (velocidad constante) */
.loader {
    animation: spin 1s linear infinite;
}

/* ============================================
   PIXEL PIPELINE: del trigger al frame
   ============================================ */
/*
   JS  →  Style  →  Layout  →  Paint  →  Composite
                          (reflow)  (repaint) (compositing)

   Las propiedades más rápidas para animar son:
   1. transform  (solo Composite)     <<< MEJOR
   2. opacity    (solo Composite)     <<< MEJOR

   Propiedades que causan Layout (EVITAR animar):
   - width, height
   - top, right, bottom, left
   - margin, padding
   - font-size, line-height

   Propiedades que causan Paint (aceptable si no hay Layout):
   - color, background-color
   - box-shadow
   - border-radius, border-color
*/

/* ============================================
   MAL vs BIEN: propiedades de animación
   ============================================ */

/* MAL: animar width/height (causa Layout en cada frame) */
.expand-bad {
    width: 100px;
    transition: width 0.3s ease;
}
.expand-bad:hover {
    width: 300px; /* Layout thrashing! */
}

/* BIEN: animar transform (solo Composite) */
.expand-good {
    transform: scaleX(0.33); /* 100/300 = 0.33 */
    transform-origin: left;
    transition: transform 0.3s ease;
}
.expand-good:hover {
    transform: scaleX(1);
}

/* MAL: animar top/left para mover elementos */
.move-bad {
    position: relative;
    top: 0;
    transition: top 0.3s ease;
}
.move-bad:hover {
    top: -20px; /* Layout en cada frame! */
}

/* BIEN: usar transform: translate */
.move-good {
    transition: transform 0.3s ease;
}
.move-good:hover {
    transform: translateY(-20px); /* Solo Composite! */
}

/* ============================================
   WILL-CHANGE: hint para el navegador
   ============================================ */

/* Le dice al navegador que esta propiedad va a cambiar,
   para que haga optimizaciones anticipadas (crear capa GPU).
   USAR CON MODERACION: no lo pongas en todo. */

/* Buen uso: en un elemento que sí va a animarse */
.animated-card {
    will-change: transform, opacity;
}

/* Bad: no lo pongas en todo por defecto */
/* * { will-change: transform; }  -- MAL!
   Crea una capa GPU por cada elemento,
   consume memoria y puede EMPEORAR la performance */

/* ============================================
   CONTAINMENT: aislar repaints
   ============================================ */

/* contain: aísla los efectos de renderizado de un elemento
   Si un hijo cambia, no fuerza repaint de elementos fuera
   del contenedor */

.card-container {
    contain: layout style paint;
    /* layout: el layout del container no afecta afuera
       style: los estilos no se filtran hacia afuera
       paint: los cambios visuales se limitan al container */
}

/* ============================================
   LAYER PROMOTION para animaciones complejas
   ============================================ */

/* Forzar una capa GPU con translateZ o will-change */
.gpu-layer {
    /* Opcion 1: will-change (recomendado) */
    will-change: transform;

    /* Opcion 2: translateZ hack (legacy) */
    /* transform: translateZ(0); */

    /* Opcion 3: translate3d hack (legacy) */
    /* transform: translate3d(0, 0, 0); */
}

/* ============================================
   PROMESAS DE PERFORMANCE para animaciones
   ============================================ */

/* 1. Solo anima transform y opacity */
.card {
    transition: transform 0.2s ease, opacity 0.3s ease;
}

/* 2. Usa will-change solo en lo que va a animarse */
.hero-image {
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3. Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 4. Remueve will-change después de la animacion */
/* En JS:
   element.style.willChange = 'transform';
   element.addEventListener('transitionend', () => {
       element.style.willChange = 'auto';
   });
*/

// ============================================
// View Transitions API: transiciones entre paginas
// ============================================

// --- MPA (Multi-Page App): la forma más simple ---
// En cada página donde querés transición al navegar:

// Detectar un link click y hacer la transición
document.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', async (e) => {
        e.preventDefault();
        const href = link.href;

        // Si el navegador soporta View Transitions
        if (document.startViewTransition) {
            document.startViewTransition(() => {
                // Actualizar el DOM (navegar)
                document.location.href = href;
            });
        } else {
            // Fallback: navegación normal
            document.location.href = href;
        }
    });
});

// --- CSS: animar la transición ---
// El navegador crea pseudo-elementos automáticamente:
// ::view-transition-old(root) = snapshot VIEJO
// ::view-transition-new(root) = snapshot NUEVO

/*
::view-transition-old(root) {
    animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
    animation: fade-in 0.3s ease-out;
}

@keyframes fade-out {
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
}
*/

// --- Transición de slide (página vieja sale, nueva entra) ---
/*
::view-transition-old(root) {
    animation: slide-out 0.3s ease-in;
}

::view-transition-new(root) {
    animation: slide-in 0.3s ease-out;
}

@keyframes slide-out {
    to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide-in {
    from { transform: translateX(100%); opacity: 0; }
}
*/

// --- Transición NAMED: animar elementos específicos ---
// HTML viejo:
// <img src="foto.jpg" view-transition-name="hero-img">
// HTML nuevo:
// <img src="foto-otra.jpg" view-transition-name="hero-img">

// CSS: el navegador detecta que ambos tienen el mismo
// view-transition-name y hace un morphing entre ellos
/*
::view-transition-old(hero-img) {
    animation: scale-down 0.3s ease;
}

::view-transition-new(hero-img) {
    animation: scale-up 0.3s ease;
}
*/

/* ============================================
   BUENAS PRACTICAS PARA ANIMACIONES
   ============================================ */

/* --- 1. RESPETA prefers-reduced-motion --- */
/* OBLIGATORIO. Si el usuario prefiere menos movimiento,
   desactivá todas las animaciones. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* También podés definir una custom property
   y usarla en tus animaciones */
:root {
    --animation-duration: 0.6s;
    --transition-duration: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --animation-duration: 0.01ms;
        --transition-duration: 0.01ms;
    }
}

.card {
    animation: fade-in var(--animation-duration) ease forwards;
}

/* --- 2. Duraciones cortas y consistentes --- */
/* Las micro-interacciones: 150-300ms
   Las transiciones de contenido: 300-500ms
   Las animaciones de entrada: 500-800ms
   Nada debería durar más de 1s */

/* Duraciones recomendadas (en Custom Properties) */
:root {
    --duration-instant: 100ms;   /* Click feedback */
    --duration-fast:    150ms;   /* Hover, focus */
    --duration-normal:  300ms;   /* Transiciones generales */
    --duration-slow:    500ms;   /* Modales, page transitions */
    --duration-slower:  800ms;   /* Animaciones de entrada */
}

/* --- 3. Usa ease-out para entradas, ease-in para salidas --- */
.element-enter {
    animation: fade-in 0.3s ease-out;
}

.element-exit {
    animation: fade-out 0.3s ease-in;
}

/* --- 4. Evita animar propiedades que causan reflow --- */
/* BIEN: transform + opacity */
.btn {
    transition: transform 0.15s ease-out, opacity 0.2s ease;
}
.btn:hover {
    transform: translateY(-1px);
}

/* MAL: width, height, margin, padding, top, left */
/* Estas fuerzan Layout en cada frame del navegador */

/* --- 5. No hagas animaciones redundantes --- */
/* Si el usuario hizo click en algo, NO necesitas
   una animación de 3 segundos. El feedback debe
   ser inmediato y corto (100-300ms) */

/* --- 6. Evita loops infinitos visibles --- */
/* Los loops infinitos son aceptables SOLO para:
   - Spinners / loaders (mientras carga algo)
   - Indicadores sutiles (cursor blink)
   - Elementos periféricos (no el contenido principal)

   MAL: un hero text con typewriter loop infinito
   BIEN: un spinner mientras carga un formulario */

/* --- 7. Usa animation-fill-mode: forwards --- */
/* Para animaciones de entrada que deberían
   mantener su estado final */
.fade-in {
    opacity: 0;
    animation: fade-in 0.5s ease forwards;
    /* forwards: mantiene opacity: 1 al finalizar */
}