/* 
    Scroll Animations System for LK Salon
    Premium, smooth, and dynamic.
*/

/* Base Hidden States */
[data-reveal] {
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.2, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* Specific Animations Types */
[data-reveal="fade-up"] {
    transform: translateY(60px);
}

[data-reveal="fade-down"] {
    transform: translateY(-60px);
}

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

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

[data-reveal="zoom-in"] {
    transform: scale(0.85);
}

[data-reveal="zoom-out"] {
    transform: scale(1.15);
}

/* Revealed State */
.reveal-visible[data-reveal] {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Stagger Effects */
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.reveal-visible[data-reveal-stagger] > * {
    opacity: 1;
    transform: translateY(0);
}

/* Generate Stagger Delays (up to 12 items) */
.reveal-visible[data-reveal-stagger] > *:nth-child(1) { transition-delay: 0.1s; }
.reveal-visible[data-reveal-stagger] > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-visible[data-reveal-stagger] > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-visible[data-reveal-stagger] > *:nth-child(4) { transition-delay: 0.4s; }
.reveal-visible[data-reveal-stagger] > *:nth-child(5) { transition-delay: 0.5s; }
.reveal-visible[data-reveal-stagger] > *:nth-child(6) { transition-delay: 0.6s; }
.reveal-visible[data-reveal-stagger] > *:nth-child(7) { transition-delay: 0.7s; }
.reveal-visible[data-reveal-stagger] > *:nth-child(8) { transition-delay: 0.8s; }
.reveal-visible[data-reveal-stagger] > *:nth-child(9) { transition-delay: 0.9s; }
.reveal-visible[data-reveal-stagger] > *:nth-child(10) { transition-delay: 1.0s; }
.reveal-visible[data-reveal-stagger] > *:nth-child(11) { transition-delay: 1.1s; }
.reveal-visible[data-reveal-stagger] > *:nth-child(12) { transition-delay: 1.2s; }

/* Special Hero Effect */
.hero-reveal-text {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal-visible .hero-reveal-text {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}