/* 
   JK Jewellers Chirawa - Animations Stylesheet
   Author: Senior UI/UX Designer & Frontend Developer
   Theme: Elegant & Smooth Luxury Transitions
*/

/* --- Entrance Reveal Animations (Scroll-triggered via JS IntersectionObserver) --- */

.reveal {
    opacity: 0;
    transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

.reveal.active {
    opacity: 1;
    transform: none !important;
}

/* Fade Up */
.fade-up {
    transform: translateY(40px);
}

/* Fade Down */
.fade-down {
    transform: translateY(-40px);
}

/* Fade Left */
.fade-left {
    transform: translateX(40px);
}

/* Fade Right */
.fade-right {
    transform: translateX(-40px);
}

/* Zoom In */
.zoom-in {
    transform: scale(0.9);
}

/* Scale Up */
.scale-up {
    transform: scale(0.95);
}

/* Delays for children elements */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* Speed Overrides */
.duration-fast { transition-duration: 0.5s; }
.duration-slow { transition-duration: 1.5s; }

/* --- Special Luxury Effects --- */

/* Luxury Image Reveal on Scroll (slide mask) */
.image-reveal-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
}

.image-reveal-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    transform-origin: right;
    z-index: 2;
}

.image-reveal-wrapper.active::after {
    transform: scaleX(0);
}

.image-reveal-wrapper img {
    opacity: 0;
    transform: scale(1.15);
    transition: opacity 0.5s ease 0.6s, transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
}

.image-reveal-wrapper.active img {
    opacity: 1;
    transform: scale(1);
}

/* Button Hover Ripple Effect */
.ripple {
    position: absolute;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

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

/* Gold Gradient Animation */
.gradient-bg-animate {
    background: linear-gradient(135deg, #4B0F1A 0%, #1B1B1B 50%, #4B0F1A 100%);
    background-size: 200% 200%;
    animation: gradientShift 10s ease infinite;
}

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

/* Subtle Shimmer for Text / Headings */
.text-shimmer {
    background: linear-gradient(to right, #C9A227 20%, #FAF7F2 40%, #E7C86A 60%, #C9A227 80%);
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: textShimmer 4s linear infinite;
}

@keyframes textShimmer {
    to {
        background-position: 200% center;
    }
}

/* Floating Animation for Icons & Ornaments */
.floating-icon {
    animation: float 4s ease-in-out infinite;
}

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

/* Soft Hover Glow */
.hover-glow {
    transition: var(--transition-smooth);
}

.hover-glow:hover {
    box-shadow: 0 0 25px rgba(201, 162, 39, 0.35);
    border-color: var(--color-secondary);
}

/* Magnetic Button Motion Class (added dynamically via JS) */
.magnetic-wrap {
    display: inline-block;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Typing Cursor Effect */
.typing-cursor {
    display: inline-block;
    width: 2px;
    background-color: var(--color-secondary);
    margin-left: 4px;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to { background-color: transparent; }
    50% { background-color: var(--color-secondary); }
}