/* =============================================
   SILVARA — Animations
   ============================================= */

/* --- Scroll Reveal --- */
[data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
}

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

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

[data-animate="fade-in"].animated {
    opacity: 1;
}

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

[data-animate="fade-left"].animated {
    opacity: 1;
    transform: translateX(0);
}

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

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

[data-animate="scale-up"] {
    transform: none;
}

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

/* --- Keyframe Animations --- */
@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(30px, -30px);
    }
}

@keyframes scrollLine {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }
    50% {
        transform: scaleY(1);
        transform-origin: top;
    }
    51% {
        transform-origin: bottom;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

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

@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(129, 191, 183, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(129, 191, 183, 0);
    }
}

/* --- Loading Skeleton --- */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-birch-snow) 25%,
        var(--color-birch-cream) 50%,
        var(--color-birch-snow) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--border-radius);
}

/* --- Page Transition --- */
.page-transition {
    position: fixed;
    inset: 0;
    background: var(--color-birch-dark);
    z-index: 10000;
    transform: scaleY(0);
    transform-origin: bottom;
}

/* --- Product Card Stagger --- */
.products-grid .product-card:nth-child(1) [data-animate] { transition-delay: 0ms; }
.products-grid .product-card:nth-child(2) [data-animate] { transition-delay: 100ms; }
.products-grid .product-card:nth-child(3) [data-animate] { transition-delay: 200ms; }
.products-grid .product-card:nth-child(4) [data-animate] { transition-delay: 300ms; }
.products-grid .product-card:nth-child(5) [data-animate] { transition-delay: 400ms; }
.products-grid .product-card:nth-child(6) [data-animate] { transition-delay: 500ms; }

/* --- Hover Shine Effect on Product Images --- */
.product-card__image::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    z-index: 2;
    transition: left 0.6s ease;
}

.product-card:hover .product-card__image::before {
    left: 100%;
}

/* --- Category Card Parallax Tilt --- */
.category-card {
    transition: transform var(--transition);
}

.category-card:hover {
    transform: translateY(-6px);
}

/* --- Button Ripple --- */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s ease;
}

.btn:active::after {
    opacity: 1;
    transform: scale(2);
    transition: 0s;
}

/* --- Smooth Underline Animation for Links --- */
.animated-link {
    position: relative;
    display: inline-block;
}

.animated-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition);
}

.animated-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}