/* ========================================
   ÁLBUM MODERNO - ADVANCED ANIMATIONS
   Complex CSS Animations & Transitions
   ======================================== */

/* ========== LOADING SCREEN ========== */
.loading-screen {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-loading);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-content {
    text-align: center;
    position: relative;
}

.loading-particles {
    position: absolute;
    inset: -100px;
    pointer-events: none;
}

.loading-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    border-radius: var(--radius-full);
    animation: particleFloat 3s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(var(--tx, 20px), var(--ty, -20px)) scale(1.5);
        opacity: 1;
    }
}

.loading-title {
    font-size: var(--fs-3xl);
    font-weight: 800;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-2);
    animation: titlePulse 2s ease-in-out infinite;
}

@keyframes titlePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}

.loading-subtitle {
    font-size: var(--fs-base);
    color: var(--text-tertiary);
    margin-bottom: var(--space-8);
    animation: subtitleFade 1.5s ease-in-out infinite;
}

@keyframes subtitleFade {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.loading-progress-container {
    width: 250px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: 0 auto var(--space-3);
}

.loading-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--primary-gradient);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
    position: relative;
}

.loading-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
    animation: progressShine 1s ease-in-out infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.loading-percentage {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-light);
}

/* ========== SCROLL REVEAL ANIMATIONS ========== */
[data-aos] {
    pointer-events: none;
}

[data-aos].aos-animate {
    pointer-events: auto;
}

/* Custom AOS Animations */
[data-aos="fade-up-custom"] {
    opacity: 0;
    transform: translateY(50px);
    transition-property: opacity, transform;
}

[data-aos="fade-up-custom"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

[data-aos="scale-in"] {
    opacity: 0;
    transform: scale(0.8);
    transition-property: opacity, transform;
}

[data-aos="scale-in"].aos-animate {
    opacity: 1;
    transform: scale(1);
}

[data-aos="slide-right"] {
    opacity: 0;
    transform: translateX(-100px);
    transition-property: opacity, transform;
}

[data-aos="slide-right"].aos-animate {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered Animations */
.stagger-animation > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-animation.animate > * {
    opacity: 1;
    transform: translateY(0);
}

.stagger-animation > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-animation > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-animation > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-animation > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-animation > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-animation > *:nth-child(6) { transition-delay: 0.6s; }

/* ========== TEXT ANIMATIONS ========== */
/* Split Text Animation */
.split-text {
    display: inline-block;
    overflow: hidden;
}

.split-text .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    animation: charReveal 0.6s ease forwards;
}

@keyframes charReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typewriter Effect */
.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--primary-color);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--primary-color); }
}

/* Gradient Text Animation */
.animated-gradient-text {
    background: linear-gradient(
        90deg,
        var(--primary-color) 0%,
        var(--secondary-color) 25%,
        var(--accent-color) 50%,
        var(--secondary-color) 75%,
        var(--primary-color) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientMove 3s linear infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Glow Text */
.glow-text {
    animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
    from {
        text-shadow: 0 0 10px var(--primary-color),
                     0 0 20px var(--primary-color),
                     0 0 30px var(--primary-color);
    }
    to {
        text-shadow: 0 0 20px var(--primary-color),
                     0 0 30px var(--primary-color),
                     0 0 40px var(--primary-color),
                     0 0 50px var(--primary-color);
    }
}

/* ========== BUTTON ANIMATIONS ========== */
/* Magnetic Button Effect */
.magnetic-btn {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.magnetic-btn::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: var(--primary-gradient);
    opacity: 0;
    filter: blur(15px);
    transition: opacity 0.3s ease;
    z-index: -1;
}

.magnetic-btn:hover::before {
    opacity: 0.5;
}

/* Ripple Effect */
.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect .ripple {
    position: absolute;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Button Shine Effect */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    transform: rotate(45deg) translateX(-100%);
    transition: none;
}

.shine-effect:hover::after {
    animation: shine 0.75s ease;
}

@keyframes shine {
    to {
        transform: rotate(45deg) translateX(100%);
    }
}

/* Pulse Button */
.pulse-btn {
    animation: pulseButton 2s ease-in-out infinite;
}

@keyframes pulseButton {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
    }
}

/* ========== CARD ANIMATIONS ========== */
/* Hover Lift */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Card Flip */
.flip-card {
    perspective: 1000px;
}

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

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

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

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

/* Tilt Effect (CSS Fallback) */
.tilt-effect {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.tilt-effect:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
}

/* Border Gradient Animation */
.animated-border {
    position: relative;
    background: var(--bg-glass);
    border-radius: var(--radius-xl);
}

.animated-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--primary-color),
        var(--secondary-color),
        var(--accent-color),
        var(--primary-color)
    );
    background-size: 300% 100%;
    z-index: -1;
    animation: borderMove 4s linear infinite;
}

@keyframes borderMove {
    0% { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
}

/* ========== IMAGE ANIMATIONS ========== */
/* Ken Burns Effect */
.ken-burns {
    overflow: hidden;
}

.ken-burns img {
    animation: kenBurns 20s ease-in-out infinite alternate;
}

@keyframes kenBurns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1) translateX(-2%) translateY(-2%);
    }
}

/* Image Reveal */
.image-reveal {
    position: relative;
    overflow: hidden;
}

.image-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-gradient);
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.image-reveal.revealed::after {
    transform: translateX(100%);
}

/* Parallax Effect */
.parallax-element {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* ========== ICON ANIMATIONS ========== */
/* Spinning Icon */
.spin-icon {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Bounce Icon */
.bounce-icon {
    animation: bounceIcon 1s ease infinite;
}

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

/* Shake Icon */
.shake-icon:hover {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Heartbeat */
.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10%, 30% { transform: scale(0.9); }
    20%, 40%, 60%, 80% { transform: scale(1.1); }
    50%, 70% { transform: scale(1.05); }
}

/* ========== BACKGROUND ANIMATIONS ========== */
/* Gradient Background */
.animated-bg-gradient {
    background: linear-gradient(-45deg, #0f0f1a, #1a1a2e, #16213e, #1f2937);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Stars Background */
.stars-bg {
    position: relative;
    overflow: hidden;
}

.stars-bg::before,
.stars-bg::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: var(--radius-full);
    box-shadow: 
        100px 50px white, 200px 150px white, 300px 75px white,
        400px 200px white, 500px 100px white, 600px 300px white,
        150px 250px white, 250px 350px white, 350px 400px white,
        50px 400px white, 450px 50px white, 550px 150px white;
    animation: twinkle 3s ease-in-out infinite alternate;
}

.stars-bg::after {
    animation-delay: 1.5s;
    box-shadow: 
        80px 100px white, 180px 200px white, 280px 125px white,
        380px 250px white, 480px 150px white, 580px 350px white,
        130px 300px white, 230px 400px white, 330px 450px white,
        30px 450px white, 430px 100px white, 530px 200px white;
}

@keyframes twinkle {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

/* ========== LOADING STATES ========== */
/* Skeleton Loading */
.skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    100% {
        transform: translateX(100%);
    }
}

/* Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary-color);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
}

/* Dots Loading */
.dots-loading {
    display: flex;
    gap: 5px;
}

.dots-loading span {
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: var(--radius-full);
    animation: dotPulse 1.4s ease-in-out infinite;
}

.dots-loading span:nth-child(2) { animation-delay: 0.2s; }
.dots-loading span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* ========== TRANSITION EFFECTS ========== */
/* Page Transition */
.page-transition {
    position: fixed;
    inset: 0;
    background: var(--primary-gradient);
    transform: scaleY(0);
    transform-origin: bottom;
    z-index: 9998;
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.page-transition.active {
    transform: scaleY(1);
    transform-origin: top;
}

/* Section Transition */
.section-transition {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-transition.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========== COUNTER ANIMATION ========== */
.counter-animate {
    display: inline-block;
    transition: transform 0.3s ease;
}

.counter-animate.counting {
    transform: scale(1.1);
}

/* ========== GALLERY ANIMATIONS ========== */
/* Gallery Item Hover */
.gallery-item {
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    z-index: 10;
}

/* Gallery Masonry Animation */
.gallery-grid.loading .gallery-item {
    opacity: 0;
    transform: translateY(30px);
}

.gallery-grid .gallery-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Filter Animation */
.gallery-item.hidden {
    opacity: 0;
    transform: scale(0.8);
    position: absolute;
    pointer-events: none;
}

.gallery-item.visible {
    opacity: 1;
    transform: scale(1);
    position: relative;
    pointer-events: auto;
}

/* ========== FORM ANIMATIONS ========== */
/* Input Focus Animation */
.input-animated {
    position: relative;
}

.input-animated .input-label {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-base);
    color: var(--text-muted);
    transition: all 0.3s ease;
    pointer-events: none;
}

.input-animated input:focus + .input-label,
.input-animated input:not(:placeholder-shown) + .input-label {
    top: 0;
    font-size: var(--fs-xs);
    color: var(--primary-color);
    background: var(--bg-primary);
    padding: 0 var(--space-1);
}

/* Success/Error Animation */
.form-group.success .input-wrapper {
    animation: successPulse 0.5s ease;
}

.form-group.error .input-wrapper {
    animation: errorShake 0.5s ease;
}

@keyframes successPulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 10px var(--success-color); }
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* ========== NOTIFICATION ANIMATIONS ========== */
/* Toast Enter/Exit */
.toast-enter {
    animation: toastEnter 0.3s ease forwards;
}

.toast-exit {
    animation: toastExit 0.3s ease forwards;
}

@keyframes toastEnter {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastExit {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.8);
    }
}

/* ========== MODAL ANIMATIONS ========== */
/* Modal Backdrop */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--z-modal-backdrop);
}

.modal-backdrop.active {
    opacity: 1;
}

/* Modal Content */
.modal-content {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal.active .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ========== REDUCED MOTION ========== */
@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;
    }
    
    .floating-element,
    .loading-particle,
    .hero-floating-card,
    .about-image-float {
        animation: none !important;
    }
}