/* =========================================================
   HAIR BY LISA - ANIMATIONS CSS
   File: assets/css/animations.css
========================================================= */


/* -------------------------
   GLOBAL SMOOTHNESS
------------------------- */

.site-header,
.site-logo img,
.nav-menu a,
.btn,
.header-book-btn,
.service-card,
.gallery-preview-item img,
.gallery-item img,
.package-card,
.value-card,
.reason-card,
.addon-card,
.contact-info-card,
.team-card,
.booking-category-card,
.booking-service-card,
.stylist-card,
.policy-card,
.footer-socials a {
    transition:
        transform 0.35s ease,
        opacity 0.35s ease,
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* -------------------------
   KEYFRAMES
------------------------- */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(34px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

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

@keyframes luxuryGlow {
    0% {
        box-shadow: 0 0 0 rgba(212, 166, 72, 0);
    }

    50% {
        box-shadow: 0 0 32px rgba(212, 166, 72, 0.26);
    }

    100% {
        box-shadow: 0 0 0 rgba(212, 166, 72, 0);
    }
}

@keyframes goldLineGrow {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 78px;
        opacity: 1;
    }
}

@keyframes floatSoft {
    0% {
        transform: translateY(0);
    }

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

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

@keyframes shineSweep {
    0% {
        left: -90%;
    }

    100% {
        left: 130%;
    }
}

@keyframes pulseGold {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(212, 166, 72, 0.4);
    }

    70% {
        transform: scale(1.04);
        box-shadow: 0 0 0 16px rgba(212, 166, 72, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(212, 166, 72, 0);
    }
}

@keyframes scrollBounce {
    0%,
    100% {
        transform: translate(-50%, 0);
    }

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


/* -------------------------
   HERO ANIMATIONS
------------------------- */

.home-hero-content,
.page-hero-content {
    animation: fadeUp 0.9s ease both;
}

.home-hero-logo,
.page-hero-logo {
    animation: scaleIn 1s ease 0.2s both, floatSoft 5.5s ease-in-out 1.4s infinite;
}

.home-hero-bg img,
.page-hero-bg img {
    animation: fadeIn 1.2s ease both;
}

.gold-line {
    animation: goldLineGrow 0.9s ease 0.25s both;
}

.scroll-down {
    animation: scrollBounce 1.8s ease-in-out infinite;
}


/* -------------------------
   BUTTON SHINE
------------------------- */

.btn-gold,
.header-book-btn {
    position: relative;
    overflow: hidden;
}

.btn-gold::before,
.header-book-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -90%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );
    transform: skewX(-22deg);
    opacity: 0;
}

.btn-gold:hover::before,
.header-book-btn:hover::before {
    opacity: 1;
    animation: shineSweep 0.85s ease;
}


/* -------------------------
   CARD HOVER EFFECTS
------------------------- */

.service-card,
.value-card,
.reason-card,
.addon-card,
.contact-info-card,
.package-card,
.team-card,
.policy-card,
.sidebar-card {
    position: relative;
    overflow: hidden;
}

.service-card::before,
.value-card::before,
.reason-card::before,
.addon-card::before,
.contact-info-card::before,
.package-card::before,
.team-card::before,
.policy-card::before,
.sidebar-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        circle at top,
        rgba(212, 166, 72, 0.12),
        transparent 42%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
}

.service-card:hover::before,
.value-card:hover::before,
.reason-card:hover::before,
.addon-card:hover::before,
.contact-info-card:hover::before,
.package-card:hover::before,
.team-card:hover::before,
.policy-card:hover::before,
.sidebar-card:hover::before {
    opacity: 1;
}

.service-card:hover .service-icon,
.value-card:hover .value-icon,
.reason-card:hover .reason-icon,
.addon-card:hover .addon-icon,
.contact-info-card:hover .contact-info-icon {
    transform: translateY(-5px) scale(1.05);
    color: var(--gold-light);
}

.service-icon,
.value-icon,
.reason-icon,
.addon-icon,
.contact-info-icon {
    transition: transform 0.35s ease, color 0.35s ease;
}


/* -------------------------
   IMAGE HOVER EFFECTS
------------------------- */

.gallery-preview-item,
.gallery-item,
.social-video-card,
.feature-gallery-card,
.package-image,
.team-card,
.about-story-image,
.why-choose-image {
    overflow: hidden;
}

.gallery-preview-item img,
.gallery-item img,
.social-video-card img,
.feature-gallery-card img,
.package-image img,
.team-card img,
.about-story-image img,
.why-choose-image img {
    transition: transform 0.65s ease, filter 0.4s ease, opacity 0.4s ease;
}

.gallery-preview-item:hover img,
.gallery-item:hover img,
.social-video-card:hover img,
.feature-gallery-card:hover img,
.package-card:hover .package-image img,
.team-card:hover img,
.about-story-image:hover img,
.why-choose-image:hover img {
    transform: scale(1.07);
    filter: brightness(1.08) contrast(1.04);
}


/* -------------------------
   NAVIGATION ANIMATION
------------------------- */

.nav-menu a {
    transition: color 0.3s ease, opacity 0.3s ease;
}

.nav-menu a::after {
    transition: width 0.3s ease;
}

.mobile-menu-toggle span {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.main-navigation.is-open {
    animation: fadeIn 0.28s ease both;
}


/* -------------------------
   BOOKING UI ANIMATIONS
------------------------- */

.booking-category-card.active,
.booking-service-card.active,
.stylist-card.active,
.time-slot-grid button.active,
.calendar-days button.active {
    animation: luxuryGlow 1.6s ease;
}

.booking-category-card:hover,
.booking-service-card:hover,
.stylist-card:hover {
    transform: translateY(-4px);
}

.time-slot-grid button:hover,
.calendar-days button:hover {
    transform: translateY(-2px);
}

.booking-step.active span {
    animation: pulseGold 1.8s ease infinite;
}


/* -------------------------
   FORM ANIMATIONS
------------------------- */

input,
textarea,
select {
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(212, 166, 72, 0.08);
}


/* -------------------------
   GALLERY FILTER ANIMATION
------------------------- */

.gallery-filter {
    position: relative;
    overflow: hidden;
}

.gallery-filter::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.gallery-filter:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

.gallery-filter span,
.gallery-filter {
    z-index: 1;
}

.gallery-item {
    animation: fadeIn 0.35s ease both;
}

.gallery-item.is-hidden {
    opacity: 0;
    transform: scale(0.95);
}


/* -------------------------
   CTA ANIMATION
------------------------- */

.cta-box,
.wide-cta-box {
    position: relative;
}

.cta-box::before,
.wide-cta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(212, 166, 72, 0.12);
    opacity: 0.7;
}

.cta-box:hover,
.wide-cta-box:hover {
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.65);
}

.cta-box:hover .cta-image img,
.wide-cta-box:hover .wide-cta-image img {
    transform: scale(1.04);
}


/* -------------------------
   FOOTER ANIMATIONS
------------------------- */

.footer-socials a:hover {
    transform: translateY(-4px);
}

.scroll-top-btn {
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.scroll-top-btn:hover {
    transform: translateY(-5px);
    background: var(--gold);
    color: #111;
    border-color: var(--gold);
}


/* -------------------------
   OPTIONAL SCROLL REVEAL CLASSES
   These work with JS later.
------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}


/* -------------------------
   REDUCED MOTION
------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}