/**
 * SMOOTH TRANSITIONS - Bimmer Modular
 * ====================================
 * Transiciones suaves, efectos de profundidad y perspectiva
 * Micro-interacciones mejoradas y flujos visuales
 */

/* ==================== BASE TRANSITIONS ==================== */

* {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

*:disabled {
    transition-duration: 0s;
}

/* ==================== SMOOTH TRANSFORM TRANSITIONS ==================== */

.smooth-transform {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.smooth-opacity {
    transition: opacity 0.4s ease;
}

.smooth-all {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.smooth-color {
    transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

/* ==================== 3D PERSPECTIVE EFFECTS ==================== */

.perspective {
    perspective: 1200px;
    perspective-origin: center;
}

.flip-card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.flip-card.flipped {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* ==================== DEPTH EFFECTS ==================== */

.depth-1 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateZ(1px);
}

.depth-2 {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    transform: translateZ(2px);
}

.depth-3 {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transform: translateZ(3px);
}

.depth-4 {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    transform: translateZ(4px);
}

.depth-5 {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
    transform: translateZ(5px);
}

/* ==================== HOVER DEPTH INCREASE ==================== */

.depth-on-hover:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    transform: translateZ(6px) translateY(-4px);
}

/* ==================== LAYERED SHADOWS ==================== */

.shadow-soft {
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.08);
}

.shadow-medium {
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.12);
}

.shadow-strong {
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 16px 32px rgba(0, 0, 0, 0.15);
}

.shadow-intense {
    box-shadow: 
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 20px 48px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(0, 0, 0, 0.1);
}

/* ==================== FLOATING SHADOWS ==================== */

.floating {
    animation: floatModern 3s ease-in-out infinite;
}

.floating-sm {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.floating-md {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.floating-lg {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* ==================== SMOOTH STATE TRANSITIONS ==================== */

/* Active state */
.smooth-active {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.smooth-active.active {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Hover state */
.smooth-hover {
    transition: all 0.3s ease;
}

.smooth-hover:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Focus state */
.smooth-focus {
    transition: all 0.2s ease;
}

.smooth-focus:focus,
.smooth-focus:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
    transform: scale(1.02);
}

/* ==================== SMOOTH COLOR TRANSITIONS ==================== */

.color-transition {
    transition: all 0.4s ease;
}

.color-primary { color: var(--color-primary); }
.color-primary:hover { color: var(--color-primary-dark); }

.bg-primary { background: var(--color-primary); }
.bg-primary:hover { background: var(--color-primary-dark); }

.border-primary { border-color: var(--color-primary); }
.border-primary:hover { border-color: var(--color-primary-dark); }

/* ==================== SMOOTH PAGE TRANSITIONS ==================== */

.page-enter {
    animation: pageEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-exit {
    animation: pageExit 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pageExit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ==================== SMOOTH CONTENT SWAP ==================== */

.fade-swap {
    position: relative;
}

.fade-swap-enter {
    animation: fadeIn 0.4s ease forwards;
}

.fade-swap-exit {
    animation: fadeOut 0.3s ease forwards;
}

/* ==================== SMOOTH NAVIGATION ==================== */

nav a, .nav-link {
    position: relative;
    transition: all 0.3s ease;
}

nav a::after, .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

nav a:hover::after, .nav-link:hover::after {
    width: 100%;
}

/* ==================== SMOOTH TOGGLE ANIMATIONS ==================== */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    background-color: #ccc;
    border-radius: 14px;
    cursor: pointer;
    transition: background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle-switch.active {
    background-color: var(--color-primary);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle-switch.active::after {
    transform: translateX(22px);
}

/* ==================== SMOOTH EXPAND/COLLAPSE ==================== */

.expandable {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.expandable.open {
    max-height: 1000px;
    opacity: 1;
}

/* ==================== SMOOTH LOADING STATES ==================== */

.loading-state {
    transition: all 0.3s ease;
}

.loading-state.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

/* ==================== SMOOTH FORM TRANSITIONS ==================== */

.form-group {
    transition: all 0.3s ease;
}

.form-group.error input,
.form-group.error textarea,
.form-group.error select {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.1);
}

.form-group.success input,
.form-group.success textarea,
.form-group.success select {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(0, 208, 132, 0.1);
}

.form-feedback {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    margin-top: 4px;
}

.form-group.error .form-feedback,
.form-group.success .form-feedback {
    max-height: 100px;
    opacity: 1;
    margin-top: 8px;
}

/* ==================== SMOOTH MENU TRANSITIONS ==================== */

.menu-open {
    animation: slideInLeft 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.menu-close {
    animation: slideOutLeft 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ==================== SMOOTH GRID ANIMATIONS ==================== */

.grid-item {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.grid-item:hover {
    transform: translateY(-8px) scale(1.02);
}

/* ==================== CURSOR EFFECTS ==================== */

.cursor-pointer {
    cursor: pointer;
}

.cursor-move {
    cursor: move;
}

.cursor-grab {
    cursor: grab;
}

.cursor-grab:active {
    cursor: grabbing;
}

/* ==================== SMOOTH IMAGE TRANSITIONS ==================== */

img,
.image {
    transition: all 0.4s ease;
}

.image-hover:hover {
    filter: brightness(1.1) saturate(1.2);
    transform: scale(1.05);
}

.image-zoom:hover {
    transform: scale(1.1);
}

/* ==================== BRIGHTNESS TRANSITIONS ==================== */

.brightness-transition {
    transition: filter 0.4s ease;
}

.brightness-transition:hover {
    filter: brightness(1.1);
}

.brightness-transition.dim {
    filter: brightness(0.8);
}

/* ==================== SMOOTH BLUR TRANSITIONS ==================== */

.blur-transition {
    transition: filter 0.4s ease;
}

.blur-transition.blur-sm {
    filter: blur(2px);
}

.blur-transition.blur-md {
    filter: blur(4px);
}

.blur-transition.blur-lg {
    filter: blur(8px);
}

/* ==================== SMOOTH ROTATION TRANSITIONS ==================== */

.rotation-transition {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rotation-90 { transform: rotate(90deg); }
.rotation-180 { transform: rotate(180deg); }
.rotation-270 { transform: rotate(270deg); }

/* ==================== SMOOTH SCALE TRANSITIONS ==================== */

.scale-transition {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scale-75 { transform: scale(0.75); }
.scale-90 { transform: scale(0.9); }
.scale-110 { transform: scale(1.1); }
.scale-125 { transform: scale(1.25); }

/* ==================== GPU ACCELERATION ==================== */

.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ==================== SMOOTH BACKDROP FILTER ==================== */

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: backdrop-filter 0.3s ease;
}

.backdrop-blur-md {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: backdrop-filter 0.3s ease;
}

.backdrop-blur-lg {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: backdrop-filter 0.3s ease;
}

/* ==================== PERFORMANCE OPTIMIZATION ==================== */

/* Only animate when needed */
.animate-on-hover:hover {
    will-change: transform, box-shadow;
}

.animate-on-hover {
    will-change: auto;
}

/* ==================== REDUCED MOTION ==================== */

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

    .flip-card {
        transition: none;
    }

    .page-enter,
    .page-exit {
        animation: none;
    }
}