/* ============================================
   LuxeGlow Salon – Animations
   animations.css  |  v2.0.1
   ============================================ */

/* ── Page Reveal ──────────────────────────── */
[data-reveal] {
    opacity: 0;
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

[data-reveal="fade-up"]   { transform: translateY(40px); }
[data-reveal="fade-down"] { transform: translateY(-40px); }
[data-reveal="fade-left"] { transform: translateX(-40px); }
[data-reveal="fade-right"]{ transform: translateX(40px); }
[data-reveal="scale"]     { transform: scale(.92); }
[data-reveal="zoom"]      { transform: scale(.8); }

[data-reveal].revealed {
    opacity: 1;
    transform: none;
}

/* ── Stagger ──────────────────────────────── */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

[data-stagger].revealed > *:nth-child(1)  { transition-delay: 0s; }
[data-stagger].revealed > *:nth-child(2)  { transition-delay: .08s; }
[data-stagger].revealed > *:nth-child(3)  { transition-delay: .16s; }
[data-stagger].revealed > *:nth-child(4)  { transition-delay: .24s; }
[data-stagger].revealed > *:nth-child(5)  { transition-delay: .32s; }
[data-stagger].revealed > *:nth-child(6)  { transition-delay: .40s; }
[data-stagger].revealed > *:nth-child(7)  { transition-delay: .48s; }
[data-stagger].revealed > *:nth-child(8)  { transition-delay: .56s; }
[data-stagger].revealed > *:nth-child(n+9) { transition-delay: .64s; }

[data-stagger].revealed > * {
    opacity: 1;
    transform: none;
}

/* ── Keyframe Animations ──────────────────── */
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes fadeInUp  { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } }
@keyframes fadeInDown{ from { opacity:0; transform:translateY(-40px);} to { opacity:1; transform:none; } }
@keyframes fadeInLeft{ from { opacity:0; transform:translateX(-40px);} to { opacity:1; transform:none; } }
@keyframes slideUp   { from { transform:translateY(100%); } to { transform:none; } }
@keyframes scaleIn   { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } }
@keyframes float     { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px); } }
@keyframes shimmer   { from { background-position: -200% center; } to { background-position: 200% center; } }
@keyframes pulse     { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
@keyframes spin      { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes ripple    { 0%{ transform:scale(0); opacity:1; } 100%{ transform:scale(4); opacity:0; } }
@keyframes marquee   { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes breathe   { 0%,100%{ transform:scale(1); opacity:.6; } 50%{ transform:scale(1.15); opacity:1; } }
@keyframes slideDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
@keyframes countUp   { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }

/* ── Utility Animation Classes ────────────── */
.animate-float      { animation: float 4s ease-in-out infinite; }
.animate-pulse-gold { animation: pulse 3s ease-in-out infinite; }
.animate-spin       { animation: spin 8s linear infinite; }
.animate-fade-in    { animation: fadeIn .6s var(--ease-out) both; }
.animate-fade-up    { animation: fadeInUp .7s var(--ease-out) both; }
.animate-scale-in   { animation: scaleIn .5s var(--ease-spring) both; }

/* ── Shimmer Text ─────────────────────────── */
.shimmer-text {
    background: linear-gradient(90deg, var(--clr-gold) 0%, var(--clr-gold-light) 30%, var(--clr-gold) 60%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

/* ── Glowing Border ───────────────────────── */
.glow-border {
    position: relative;
}
.glow-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: var(--grad-gold);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-smooth);
}
.glow-border:hover::before { opacity: 1; }

/* ── Ripple effect on buttons ─────────────── */
.btn-ripple {
    position: relative;
    overflow: hidden;
}
.btn-ripple .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    pointer-events: none;
    animation: ripple .6s ease-out forwards;
}

/* ── Parallax Container ───────────────────── */
.parallax-container { overflow: hidden; }
.parallax-img       { will-change: transform; }

/* ── Counter Number ───────────────────────── */
.counter-num {
    display: inline-block;
    animation: countUp .8s var(--ease-out) both;
}

/* ── Hover lift ───────────────────────────── */
.hover-lift {
    transition: transform var(--t-base) var(--ease-spring),
                box-shadow var(--t-base) var(--ease-smooth);
}
.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* ── Image Zoom on Hover ──────────────────── */
.img-zoom-wrap { overflow: hidden; }
.img-zoom-wrap img {
    transition: transform var(--t-slow) var(--ease-smooth);
}
.img-zoom-wrap:hover img { transform: scale(1.08); }

/* ── Glassmorphism ────────────────────────── */
.glass {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,.08);
}

.glass-gold {
    background: rgba(201,169,110,.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(201,169,110,.15);
}

/* ── Prefers reduced motion ───────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    [data-reveal], [data-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── GSAP Safety Net ──────────────────────────
   GSAP's gsap.from() sets inline opacity:0 on elements before animating.
   If ScrollTrigger never fires (element already in view at load, or GSAP
   fails to load), the element stays invisible forever.
   This rule ensures critical content cards are ALWAYS visible after 1s,
   overriding any stale inline GSAP style.
   The !important only kicks in after the CSS animation delay has passed.
──────────────────────────────────────────────── */
.service-card,
.why-card,
.blog-card,
.testimonial-card,
.gallery-item,
.product-card {
    animation: gsapSafetyNet 0s 1.5s forwards;
}

@keyframes gsapSafetyNet {
    to {
        opacity: 1;
        transform: none;
    }
}