/* =================================================================
   LA NOSTRA - Animations
   Smooth, elegant motion design
   ================================================================= */

/* Fade in up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade-in-up {
    animation: fadeInUp 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.fade-in-up.delay-1 { animation-delay: 100ms; }
.fade-in-up.delay-2 { animation-delay: 200ms; }
.fade-in-up.delay-3 { animation-delay: 300ms; }
.fade-in-up.delay-4 { animation-delay: 400ms; }
.fade-in-up.delay-5 { animation-delay: 500ms; }

/* Fade in down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -24px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade-in-down {
    animation: fadeInDown 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Fade in */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 720ms ease both;
}

/* Scale in */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scale-in {
    animation: scaleIn 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Slide in left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translate3d(-32px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.slide-in-left {
    animation: slideInLeft 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Slide in right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translate3d(32px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.slide-in-right {
    animation: slideInRight 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Pulse */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.pulse {
    animation: pulse 1.6s ease-in-out infinite;
}

/* Pulse glow */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(200, 169, 126, 0.55);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(200, 169, 126, 0);
    }
}

.pulse-glow {
    animation: pulseGlow 2s ease-out infinite;
}

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

.shake {
    animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Bounce in */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.bounce-in {
    animation: bounceIn 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Rotate in */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.6);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

.rotate-in {
    animation: rotateIn 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Float */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.float {
    animation: float 3.6s ease-in-out infinite;
}

/* Shimmer */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    background-size: 1000px 100%;
    animation: shimmer 2s linear infinite;
}

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

.spin {
    animation: spin 1.2s linear infinite;
}

/* Page transitions */
.page-transition-enter {
    opacity: 0;
    transform: translateY(12px);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 360ms ease, transform 360ms ease;
}

/* Smooth scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-accent-deep);
    border: 2px solid var(--color-secondary);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Hover lift */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Image zoom on hover */
.hover-img-zoom {
    overflow: hidden;
}

.hover-img-zoom img {
    transition: transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hover-img-zoom:hover img {
    transform: scale(1.08);
}

/* Reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms ease, transform 800ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }

/* Underline link hover */
.hover-underline {
    position: relative;
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

.hover-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: width var(--transition-base);
}

.hover-underline:hover::after {
    width: 100%;
}

/* Magnetic hover effect helper (used by JS) */
.magnetic {
    transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Tilt effect helper */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* Marquee */
@keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-track {
    display: flex;
    gap: var(--space-12);
    animation: marquee-left 30s linear infinite;
    white-space: nowrap;
    will-change: transform;
}

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

/* Loading dots */
@keyframes loadingDot {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.loading-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin: 0 3px;
    animation: loadingDot 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }