/* ============================================================
   DS-APPLE — Animations
   Micro-interações e transições estilo Apple
   ============================================================ */

/* ──────────────────────────────────────────
   KEYFRAMES BASE
─────────────────────────────────────────── */

/* Fade In */
@keyframes ds-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Fade In Up — entrada de baixo */
@keyframes ds-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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

/* Fade In Down */
@keyframes ds-fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

/* Fade In Left */
@keyframes ds-fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right */
@keyframes ds-fadeInRight {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale In — zoom suave */
@keyframes ds-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Blur In — desfoque para foco (estilo iOS) */
@keyframes ds-blurIn {
    from {
        opacity: 0;
        filter: blur(12px);
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

/* Slide Up — painel subindo */
@keyframes ds-slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Slide Down */
@keyframes ds-slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Pulse suave */
@keyframes ds-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* Shimmer — loading estilo skeleton */
@keyframes ds-shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Float — levitar suavemente */
@keyframes ds-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Rotate continuo */
@keyframes ds-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Bounce suave */
@keyframes ds-bounce {

    0%,
    100% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: translateY(-12px);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* ──────────────────────────────────────────
   CLASSES UTILITÁRIAS DE ANIMAÇÃO
─────────────────────────────────────────── */

.ds-animate-fadeIn {
    animation: ds-fadeIn var(--duration-slow) var(--ease-out) both;
}

.ds-animate-fadeInUp {
    animation: ds-fadeInUp var(--duration-slow) var(--ease-out) both;
}

.ds-animate-fadeInDown {
    animation: ds-fadeInDown var(--duration-slow) var(--ease-out) both;
}

.ds-animate-fadeInLeft {
    animation: ds-fadeInLeft var(--duration-slow) var(--ease-out) both;
}

.ds-animate-fadeInRight {
    animation: ds-fadeInRight var(--duration-slow) var(--ease-out) both;
}

.ds-animate-scaleIn {
    animation: ds-scaleIn var(--duration-slow) var(--ease-out) both;
}

.ds-animate-blurIn {
    animation: ds-blurIn var(--duration-slower) var(--ease-out) both;
}

.ds-animate-float {
    animation: ds-float 3s var(--ease-in-out) infinite;
}

.ds-animate-pulse {
    animation: ds-pulse 1.8s var(--ease-in-out) infinite;
}

.ds-animate-spin {
    animation: ds-spin 1s linear infinite;
}

.ds-animate-bounce {
    animation: ds-bounce 1.2s infinite;
}

/* Delays */
.ds-delay-1 {
    animation-delay: 100ms;
}

.ds-delay-2 {
    animation-delay: 200ms;
}

.ds-delay-3 {
    animation-delay: 300ms;
}

.ds-delay-4 {
    animation-delay: 400ms;
}

.ds-delay-5 {
    animation-delay: 500ms;
}

.ds-delay-6 {
    animation-delay: 600ms;
}

.ds-delay-7 {
    animation-delay: 700ms;
}

.ds-delay-8 {
    animation-delay: 800ms;
}

/* Durations */
.ds-duration-fast {
    animation-duration: var(--duration-fast);
}

.ds-duration-base {
    animation-duration: var(--duration-base);
}

.ds-duration-slow {
    animation-duration: var(--duration-slow);
}

.ds-duration-slower {
    animation-duration: var(--duration-slower);
}

.ds-duration-slowest {
    animation-duration: var(--duration-slowest);
}

/* ──────────────────────────────────────────
   SCROLL REVEAL — data-reveal
   Controlado via JS (IntersectionObserver)
─────────────────────────────────────────── */

[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--duration-slower) var(--ease-out),
        transform var(--duration-slower) var(--ease-out);
}

[data-reveal="fade"] {
    transform: none;
}

[data-reveal="left"] {
    transform: translateX(-24px);
}

[data-reveal="right"] {
    transform: translateX(24px);
}

[data-reveal="scale"] {
    transform: scale(0.95);
}

[data-reveal="blur"] {
    filter: blur(8px);
    transform: scale(0.97);
    transition:
        opacity var(--duration-slower) var(--ease-out),
        transform var(--duration-slower) var(--ease-out),
        filter var(--duration-slower) var(--ease-out);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Delays automáticos para listas */
[data-reveal-group]>*:nth-child(1) {
    transition-delay: 0ms;
}

[data-reveal-group]>*:nth-child(2) {
    transition-delay: 80ms;
}

[data-reveal-group]>*:nth-child(3) {
    transition-delay: 160ms;
}

[data-reveal-group]>*:nth-child(4) {
    transition-delay: 240ms;
}

[data-reveal-group]>*:nth-child(5) {
    transition-delay: 320ms;
}

[data-reveal-group]>*:nth-child(6) {
    transition-delay: 400ms;
}

/* ──────────────────────────────────────────
   SKELETON LOADING
─────────────────────────────────────────── */

.ds-skeleton {
    background: linear-gradient(90deg,
            var(--color-bg-secondary) 25%,
            var(--color-border-light) 50%,
            var(--color-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: ds-shimmer 1.6s ease-in-out infinite;
    border-radius: var(--radius-md);
}

.ds-skeleton--text {
    height: 1em;
    border-radius: var(--radius-pill);
}

.ds-skeleton--circle {
    border-radius: var(--radius-circle);
}

.ds-skeleton--card {
    height: 200px;
    border-radius: var(--radius-xl);
}

/* ──────────────────────────────────────────
   PARALLAX — atributo data-parallax
─────────────────────────────────────────── */

[data-parallax] {
    will-change: transform;
}

/* ──────────────────────────────────────────
   HOVER — Lift Cards
─────────────────────────────────────────── */

.ds-hover-lift {
    transition:
        transform var(--duration-slow) var(--ease-out),
        box-shadow var(--duration-slow) var(--ease-out);
}

.ds-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* ──────────────────────────────────────────
   TRANSITIONS GLOBAIS opcionais
─────────────────────────────────────────── */

.ds-transition {
    transition: all var(--duration-base) var(--ease-default);
}

.ds-transition-colors {
    transition:
        color var(--duration-base) var(--ease-default),
        background-color var(--duration-base) var(--ease-default),
        border-color var(--duration-base) var(--ease-default);
}

.ds-transition-opacity {
    transition: opacity var(--duration-base) var(--ease-default);
}

.ds-transition-transform {
    transition: transform var(--duration-slow) var(--ease-out);
}