/**
 * ============================================================================
 * ANIMATIONS & INTERACTIONS
 * Priya Glam Studio & Academy
 * ============================================================================
 *
 * Purpose:
 * - Shared motion primitives
 * - Reusable reveal helpers
 * - Lightweight interaction feedback
 * - Decorative ambient motion
 *
 * Component-specific visual styling belongs in component/layout/section files.
 * ============================================================================
 */


/* ============================================================================
   REVEAL KEYFRAMES
   ============================================================================ */

@keyframes pg-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pg-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }

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

@keyframes pg-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-1.25rem);
    }

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

@keyframes pg-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-1.5rem);
    }

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

@keyframes pg-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(1.5rem);
    }

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

@keyframes pg-scale-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

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


/* ============================================================================
   REVEAL UTILITIES
   ============================================================================ */

.animate-fade-in {
    animation:
        pg-fade-in
        600ms
        var(--ease-enter)
        both;
}

.animate-fade-in-up {
    animation:
        pg-fade-in-up
        700ms
        var(--ease-enter)
        both;
}

.animate-fade-in-down {
    animation:
        pg-fade-in-down
        700ms
        var(--ease-enter)
        both;
}

.animate-slide-in-left {
    animation:
        pg-slide-in-left
        700ms
        var(--ease-enter)
        both;
}

.animate-slide-in-right {
    animation:
        pg-slide-in-right
        700ms
        var(--ease-enter)
        both;
}

.animate-scale-in {
    animation:
        pg-scale-in
        600ms
        var(--ease-enter)
        both;
}


/* Optional stagger helpers */

.motion-delay-1 {
    animation-delay: 100ms;
}

.motion-delay-2 {
    animation-delay: 200ms;
}

.motion-delay-3 {
    animation-delay: 300ms;
}

.motion-delay-4 {
    animation-delay: 400ms;
}


/* ============================================================================
   GENERIC INTERACTION FEEDBACK
   ============================================================================ */

.motion-lift {
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.motion-lift:hover {
    transform: translateY(-2px);
}

.motion-scale {
    transition: transform var(--transition-fast);
}

.motion-scale:hover {
    transform: scale(1.03);
}


/* Keep existing global button motion without taking ownership of button colors. */

.btn-primary,
.btn-secondary,
.primary-cta,
.primary-cta-explore {
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.btn-primary:hover,
.btn-secondary:hover,
.primary-cta:hover,
.primary-cta-explore:hover {
    transform: translateY(-2px);
}

.btn-primary:active,
.btn-secondary:active,
.primary-cta:active,
.primary-cta-explore:active {
    transform: translateY(0);
}


/* Arrow movement used by CTA-style links */

.primary-cta .cta-arrow,
.primary-cta-explore .cta-arrow {
    display: inline-block;

    transition: transform var(--transition-fast);
}

.primary-cta:hover .cta-arrow,
.primary-cta-explore:hover .cta-arrow {
    transform: translateX(0.375rem);
}


/* ============================================================================
   NAVIGATION INTERACTION COMPATIBILITY
   ============================================================================ */

/**
 * Retained here temporarily so the current header keeps its interaction
 * behavior. Visual header styling can later be consolidated into header.css.
 */

.nav-link {
    position: relative;

    transition: color var(--transition-fast);
}

.nav-link::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -0.375rem;

    width: 0;
    height: 2px;

    background: var(--color-primary-500);

    border-radius: var(--radius-full);

    transition: width var(--transition-base);
}

.nav-link:hover::after,
.nav-link.nav-active::after,
.nav-active::after {
    width: 100%;
}

#mobileMenu {
    transition:
        max-height var(--transition-base),
        opacity var(--transition-base),
        visibility var(--transition-base);
}

#mobileMenu.open {
    opacity: 1;
    visibility: visible;
}

.mobile-link {
    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.mobile-link:hover {
    background: var(--color-surface-soft);
    color: var(--color-primary-600);
}

.mobile-link:active {
    transform: scale(0.98);
}


/* ============================================================================
   HAMBURGER MOTION
   ============================================================================ */

.hamburger span {
    transition:
        transform var(--transition-base),
        opacity var(--transition-fast),
        top var(--transition-base),
        bottom var(--transition-base);
}

.menu-open .hamburger span:nth-child(1) {
    top: 6px;

    transform: rotate(45deg);
}

.menu-open .hamburger span:nth-child(2) {
    opacity: 0;
}

.menu-open .hamburger span:nth-child(3) {
    bottom: 6px;

    transform: rotate(-45deg);
}


/* ============================================================================
   MARQUEE
   ============================================================================ */

@keyframes pg-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.marquee-track {
    display: inline-flex;

    width: max-content;

    animation:
        pg-marquee-scroll
        18s
        linear
        infinite;
}

.marquee-container:hover .marquee-track,
.marquee-container:focus-within .marquee-track {
    animation-play-state: paused;
}


/* ============================================================================
   AMBIENT DECORATIVE MOTION
   ============================================================================ */

@keyframes pg-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(1.25rem, -1.25rem, 0) scale(1.04);
    }
}

@keyframes pg-float-delayed {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-1.25rem, 1.25rem, 0) scale(1.04);
    }
}

@keyframes pg-pulse-slow {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.5;
    }
}

@keyframes pg-pulse-slower {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.2;
    }

    50% {
        transform: scale(1.12) rotate(4deg);
        opacity: 0.4;
    }
}

.animate-float {
    animation:
        pg-float
        20s
        ease-in-out
        infinite;
}

.animate-float-delayed {
    animation:
        pg-float-delayed
        25s
        ease-in-out
        infinite;
}

.animate-pulse-slow {
    animation:
        pg-pulse-slow
        8s
        ease-in-out
        infinite;
}

.animate-pulse-slower {
    animation:
        pg-pulse-slower
        12s
        ease-in-out
        infinite;
}


/* ============================================================================
   SCROLLBAR UTILITY — LEGACY COMPATIBILITY
   ============================================================================ */

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}


/* ============================================================================
   GRADIENT HELPERS
   ============================================================================ */

.bg-gradient-radial {
    background-image:
        radial-gradient(
            circle,
            var(
                --tw-gradient-stops,
                var(--color-primary-100),
                transparent 70%
            )
        );
}

.bg-mesh-gradient {
    background-image:
        radial-gradient(
            at 20% 30%,
            rgba(245, 66, 117, 0.08) 0,
            transparent 50%
        ),
        radial-gradient(
            at 80% 20%,
            rgba(247, 168, 38, 0.07) 0,
            transparent 50%
        ),
        radial-gradient(
            at 40% 70%,
            rgba(255, 201, 212, 0.10) 0,
            transparent 50%
        ),
        radial-gradient(
            at 90% 80%,
            rgba(163, 47, 78, 0.06) 0,
            transparent 50%
        ),
        radial-gradient(
            at 10% 90%,
            rgba(254, 246, 236, 0.16) 0,
            transparent 50%
        );
}


/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-fade-in-up,
    .animate-fade-in-down,
    .animate-slide-in-left,
    .animate-slide-in-right,
    .animate-scale-in,
    .animate-float,
    .animate-float-delayed,
    .animate-pulse-slow,
    .animate-pulse-slower,
    .marquee-track {
        animation: none !important;
    }

    .motion-lift,
    .motion-scale,
    .btn-primary,
    .btn-secondary,
    .primary-cta,
    .primary-cta-explore,
    .primary-cta .cta-arrow,
    .primary-cta-explore .cta-arrow,
    .nav-link,
    .nav-link::after,
    #mobileMenu,
    .mobile-link,
    .hamburger span {
        transition: none !important;
    }

    .motion-lift:hover,
    .motion-scale:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .primary-cta:hover,
    .primary-cta-explore:hover,
    .mobile-link:active {
        transform: none;
    }
}