/* ========================================
   Clickprint Photobooth - Motion Design System
   ========================================
   
   Design Principles:
   - Smooth ease-in-out curves (cubic-bezier)
   - 200-400ms durations for micro-interactions
   - Staggered entrances for groups
   - Subtle, brand-aligned animations
   - Mobile-first, accessible (prefers-reduced-motion)
   - Performance-optimized (GPU acceleration)
   ======================================== */

/* ========================================
   CSS Custom Properties - Motion Tokens
   ======================================== */
:root {
    /* Timing Functions - Smooth ease-in-out curves */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-snap: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Duration Tokens - 200-400ms range */
    --duration-fast: 200ms;
    --duration-normal: 300ms;
    --duration-slow: 400ms;
    --duration-reveal: 600ms;
    --duration-hero: 800ms;

    /* Animation Delays - Stagger increments */
    --stagger-sm: 50ms;
    --stagger-md: 100ms;
    --stagger-lg: 150ms;
}

/* ========================================
   GPU Acceleration Layer
   ======================================== */
.anim-gpu {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Apply to animatable elements */
.btn,
.package-card,
.product-card,
.feature-card,
.gallery-item,
.info-card,
.blog-card,
.lookbook-item,
.team-card,
.hero-gallery-item,
.why-feature,
.brand-logo,
.faq-item {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* ========================================
   ANNOUNCEMENT BAR - Animated Marquee
   ======================================== */
.announcement-bar {
    position: relative;
    overflow: hidden;
}

/* Gentle pulse effect on announcement icons */
.announcement-bar .announcement-item.active {
    animation: announcementFade 0.5s var(--ease-smooth) forwards;
}

@keyframes announcementFade {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* Subtle shimmer effect on announcement bar */
.announcement-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 100%);
    animation: shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 100%;
    }
}

/* ========================================
   BUTTON MICRO-INTERACTIONS
   ======================================== */

/* Primary Button - Elevated hover */
.btn-primary {
    transition:
        transform var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        background var(--duration-normal) var(--ease-smooth);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(214, 12, 12, 0.35);
}

.btn-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(214, 12, 12, 0.25);
    transition-duration: var(--duration-fast);
}

/* Outline Button - Border fill effect */
.btn-outline {
    position: relative;
    overflow: hidden;
    transition:
        color var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth);
    z-index: 1;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--primary-color);
    transition: width var(--duration-slow) var(--ease-smooth);
    z-index: -1;
}

.btn-outline:hover::before {
    width: 100%;
}

/* Book/Quote Buttons - Subtle scale */
.btn-book,
.btn-quote {
    transition:
        transform var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        background var(--duration-normal) var(--ease-smooth);
}

.btn-book:hover,
.btn-quote:hover {
    transform: translateY(-2px) scale(1.02);
}

.btn-book:active,
.btn-quote:active {
    transform: translateY(0) scale(0.98);
    transition-duration: var(--duration-fast);
}

/* CTA Emphasis - Attention pulse */
.cta-pulse {
    animation: ctaPulse 2.5s var(--ease-gentle) infinite;
}

@keyframes ctaPulse {

    0%,
    100% {
        box-shadow: 0 4px 15px rgba(214, 12, 12, 0.3);
    }

    50% {
        box-shadow: 0 4px 25px rgba(214, 12, 12, 0.5), 0 0 0 4px rgba(214, 12, 12, 0.1);
    }
}

/* Hero CTA - Extra emphasis */
.hero-buttons .btn-primary {
    animation: heroCTAPulse 3s var(--ease-gentle) infinite;
    animation-delay: 1s;
}

@keyframes heroCTAPulse {

    0%,
    100% {
        box-shadow: 0 4px 15px rgba(214, 12, 12, 0.3);
        transform: translateY(0);
    }

    50% {
        box-shadow: 0 8px 30px rgba(214, 12, 12, 0.4), 0 0 0 6px rgba(214, 12, 12, 0.08);
        transform: translateY(-2px);
    }
}

/* ========================================
   CARD HOVER MICRO-INTERACTIONS
   ======================================== */

/* Package Cards */
.package-card {
    transition:
        transform var(--duration-slow) var(--ease-smooth),
        box-shadow var(--duration-slow) var(--ease-smooth),
        border-color var(--duration-slow) var(--ease-smooth),
        background var(--duration-slow) var(--ease-smooth);
}

.package-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

/* Popular badge bounce on card hover */
.package-card.popular-plan:hover .popular-badge {
    animation: badgeBounce 0.5s var(--ease-bounce);
}

@keyframes badgeBounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Product Cards */
.product-card {
    transition:
        transform var(--duration-slow) var(--ease-smooth),
        box-shadow var(--duration-slow) var(--ease-smooth),
        border-color var(--duration-slow) var(--ease-smooth);
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

/* Product image zoom on hover */
.product-card .product-image img {
    transition: transform var(--duration-slow) var(--ease-smooth);
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

/* Feature Cards */
.feature-card {
    transition:
        transform var(--duration-slow) var(--ease-smooth),
        box-shadow var(--duration-slow) var(--ease-smooth);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Feature icon animation on hover */
.feature-card .feature-icon {
    transition: transform var(--duration-slow) var(--ease-bounce);
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

.feature-card .feature-icon i {
    transition: transform var(--duration-slow) var(--ease-smooth);
}

.feature-card:hover .feature-icon i {
    transform: scale(1.1);
}

/* Info Cards (Contact page) */
.info-card {
    transition:
        transform var(--duration-slow) var(--ease-smooth),
        box-shadow var(--duration-slow) var(--ease-smooth);
}

.info-card:hover {
    transform: translateY(-5px);
}

.info-card .info-icon {
    transition: transform var(--duration-slow) var(--ease-bounce);
}

.info-card:hover .info-icon {
    transform: scale(1.1);
}

/* Blog Cards */
.blog-card {
    transition:
        transform var(--duration-slow) var(--ease-smooth),
        box-shadow var(--duration-slow) var(--ease-smooth);
}

.blog-card:hover {
    transform: translateY(-10px);
}

/* Blog image zoom */
.blog-card .blog-image img {
    transition: transform var(--duration-slow) var(--ease-smooth);
}

.blog-card:hover .blog-image img {
    transform: scale(1.08);
}

/* Team Cards */
.team-card {
    transition:
        transform var(--duration-slow) var(--ease-smooth),
        box-shadow var(--duration-slow) var(--ease-smooth);
}

.team-card:hover {
    transform: translateY(-10px);
}

.team-card .team-image img {
    transition: transform var(--duration-slow) var(--ease-smooth);
}

.team-card:hover .team-image img {
    transform: scale(1.08);
}

/* Why Feature Cards */
.why-feature {
    transition: transform var(--duration-normal) var(--ease-smooth);
}

.why-feature:hover {
    transform: translateX(5px);
}

.why-feature-icon {
    transition:
        transform var(--duration-normal) var(--ease-bounce),
        box-shadow var(--duration-normal) var(--ease-smooth);
}

.why-feature:hover .why-feature-icon {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(214, 12, 12, 0.4);
}

/* ========================================
   IMAGE HOVER EFFECTS
   ======================================== */

/* Gallery Items */
.gallery-item {
    transition: transform var(--duration-slow) var(--ease-smooth);
}

.gallery-item:hover {
    transform: scale(1.02);
}

.gallery-item img {
    transition: transform var(--duration-slow) var(--ease-smooth);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Gallery overlay slide up */
.gallery-item::before {
    transition: opacity var(--duration-normal) var(--ease-smooth);
}

/* Lookbook Items */
.lookbook-item img {
    transition: transform var(--duration-slow) var(--ease-smooth);
}

.lookbook-item:hover img {
    transform: scale(1.08);
}

.lookbook-overlay {
    transition: transform var(--duration-slow) var(--ease-smooth);
}

/* Hero Gallery Items */
.hero-gallery-item {
    transition:
        transform var(--duration-slow) var(--ease-smooth),
        box-shadow var(--duration-slow) var(--ease-smooth);
}

.hero-gallery-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

/* Brand logos */
.brand-logo {
    transition:
        filter var(--duration-normal) var(--ease-smooth),
        opacity var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
}

.brand-logo:hover {
    transform: scale(1.05);
}

/* ========================================
   SCROLL-BASED REVEAL ANIMATIONS
   ======================================== */

/* Fade Up - Default reveal */
[data-anim="fade-up"],
.anim-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity var(--duration-reveal) var(--ease-smooth),
        transform var(--duration-reveal) var(--ease-smooth);
}

[data-anim="fade-up"].anim-visible,
.anim-fade-up.anim-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Left */
[data-anim="fade-left"],
.anim-fade-left {
    opacity: 0;
    transform: translateX(-30px);
    transition:
        opacity var(--duration-reveal) var(--ease-smooth),
        transform var(--duration-reveal) var(--ease-smooth);
}

[data-anim="fade-left"].anim-visible,
.anim-fade-left.anim-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade Right */
[data-anim="fade-right"],
.anim-fade-right {
    opacity: 0;
    transform: translateX(30px);
    transition:
        opacity var(--duration-reveal) var(--ease-smooth),
        transform var(--duration-reveal) var(--ease-smooth);
}

[data-anim="fade-right"].anim-visible,
.anim-fade-right.anim-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale Up */
[data-anim="scale-up"],
.anim-scale-up {
    opacity: 0;
    transform: scale(0.95);
    transition:
        opacity var(--duration-reveal) var(--ease-smooth),
        transform var(--duration-reveal) var(--ease-smooth);
}

[data-anim="scale-up"].anim-visible,
.anim-scale-up.anim-visible {
    opacity: 1;
    transform: scale(1);
}

/* Flip In */
[data-anim="flip-up"],
.anim-flip-up {
    opacity: 0;
    transform: perspective(600px) rotateX(10deg) translateY(20px);
    transition:
        opacity var(--duration-reveal) var(--ease-smooth),
        transform var(--duration-reveal) var(--ease-smooth);
}

[data-anim="flip-up"].anim-visible,
.anim-flip-up.anim-visible {
    opacity: 1;
    transform: perspective(600px) rotateX(0) translateY(0);
}

/* ========================================
   STAGGERED ENTRANCE ANIMATIONS
   ======================================== */

/* Container for staggered children */
.stagger-container>* {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--duration-reveal) var(--ease-smooth),
        transform var(--duration-reveal) var(--ease-smooth);
}

.stagger-container.anim-visible>*:nth-child(1) {
    transition-delay: calc(var(--stagger-md) * 0);
}

.stagger-container.anim-visible>*:nth-child(2) {
    transition-delay: calc(var(--stagger-md) * 1);
}

.stagger-container.anim-visible>*:nth-child(3) {
    transition-delay: calc(var(--stagger-md) * 2);
}

.stagger-container.anim-visible>*:nth-child(4) {
    transition-delay: calc(var(--stagger-md) * 3);
}

.stagger-container.anim-visible>*:nth-child(5) {
    transition-delay: calc(var(--stagger-md) * 4);
}

.stagger-container.anim-visible>*:nth-child(6) {
    transition-delay: calc(var(--stagger-md) * 5);
}

.stagger-container.anim-visible>*:nth-child(7) {
    transition-delay: calc(var(--stagger-md) * 6);
}

.stagger-container.anim-visible>*:nth-child(8) {
    transition-delay: calc(var(--stagger-md) * 7);
}

.stagger-container.anim-visible>*:nth-child(9) {
    transition-delay: calc(var(--stagger-md) * 8);
}

.stagger-container.anim-visible>*:nth-child(10) {
    transition-delay: calc(var(--stagger-md) * 9);
}

.stagger-container.anim-visible>* {
    opacity: 1;
    transform: translateY(0);
}

/* Fast stagger for nav items etc */
.stagger-fast>* {
    transition-delay: 0ms;
}

.stagger-fast.anim-visible>*:nth-child(1) {
    transition-delay: calc(var(--stagger-sm) * 0);
}

.stagger-fast.anim-visible>*:nth-child(2) {
    transition-delay: calc(var(--stagger-sm) * 1);
}

.stagger-fast.anim-visible>*:nth-child(3) {
    transition-delay: calc(var(--stagger-sm) * 2);
}

.stagger-fast.anim-visible>*:nth-child(4) {
    transition-delay: calc(var(--stagger-sm) * 3);
}

.stagger-fast.anim-visible>*:nth-child(5) {
    transition-delay: calc(var(--stagger-sm) * 4);
}

/* ========================================
   HERO SECTION PARALLAX & ANIMATIONS
   ======================================== */

/* Hero content entrance */
.hero-content {
    opacity: 0;
    transform: translateY(40px);
    animation: heroContentEnter var(--duration-hero) var(--ease-smooth) forwards;
    animation-delay: 0.2s;
}

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

/* Hero title word animation */
.hero-title {
    opacity: 0;
    animation: heroTitleEnter 0.8s var(--ease-smooth) forwards;
    animation-delay: 0.3s;
}

@keyframes heroTitleEnter {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Hero subtitle */
.hero-subtitle {
    opacity: 0;
    animation: fadeInUp 0.6s var(--ease-smooth) forwards;
    animation-delay: 0.5s;
}

/* Hero gallery staggered entrance */
.hero-gallery-item {
    opacity: 0;
    transform: translateY(50px);
    animation: heroGalleryEnter 0.7s var(--ease-smooth) forwards;
}

.hero-gallery-item:nth-child(1) {
    animation-delay: 0.6s;
}

.hero-gallery-item:nth-child(2) {
    animation-delay: 0.75s;
}

.hero-gallery-item:nth-child(3) {
    animation-delay: 0.9s;
}

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

/* Hero buttons entrance */
.hero-buttons {
    opacity: 0;
    animation: fadeInUp 0.6s var(--ease-smooth) forwards;
    animation-delay: 0.7s;
}

/* Soft parallax for hero - handled via JS */
.hero {
    position: relative;
}

.hero-parallax-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* ========================================
   SECTION TITLE ANIMATIONS
   ======================================== */

.section-title {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--duration-reveal) var(--ease-smooth),
        transform var(--duration-reveal) var(--ease-smooth);
}

.section-title.anim-visible,
.section-title.revealed,
.section-title.active {
    opacity: 1;
    transform: translateY(0);
}

/* Underline animation for section titles */
.section-title-animated::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: var(--gradient-primary);
    margin: 15px auto 0;
    transition: width 0.6s var(--ease-smooth);
    transition-delay: 0.3s;
}

.section-title-animated.anim-visible::after {
    width: 80px;
}

/* ========================================
   FAQ ACCORDION ANIMATION
   ======================================== */

.faq-item {
    transition:
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
}

.faq-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.faq-question {
    transition: background var(--duration-normal) var(--ease-smooth);
}

.faq-question:hover {
    background: rgba(214, 12, 12, 0.02);
}

.faq-question i {
    transition: transform var(--duration-normal) var(--ease-smooth);
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    transition: max-height var(--duration-slow) var(--ease-smooth);
}

/* ========================================
   NAVIGATION ANIMATIONS
   ======================================== */

/* Nav links hover underline */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--duration-normal) var(--ease-smooth);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

/* Dropdown menu animation */
.dropdown-menu {
    transition:
        opacity var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth),
        visibility var(--duration-normal);
}

/* Dropdown items stagger */
.dropdown-menu li {
    opacity: 0;
    transform: translateX(-10px);
    transition:
        opacity var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
}

.nav-item:hover .dropdown-menu li:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0ms;
}

.nav-item:hover .dropdown-menu li:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 50ms;
}

.nav-item:hover .dropdown-menu li:nth-child(3) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 100ms;
}

.nav-item:hover .dropdown-menu li:nth-child(4) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 150ms;
}

.nav-item:hover .dropdown-menu li:nth-child(5) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 200ms;
}

/* Mobile menu animation */
@media (max-width: 768px) {
    .nav-menu {
        transition:
            opacity var(--duration-normal) var(--ease-smooth),
            transform var(--duration-normal) var(--ease-smooth),
            visibility var(--duration-normal);
    }

    .nav-menu.active {
        animation: mobileMenuEnter var(--duration-slow) var(--ease-smooth);
    }

    @keyframes mobileMenuEnter {
        from {
            opacity: 0;
            transform: translateY(-15px);
        }

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

/* ========================================
   FOOTER ANIMATIONS
   ======================================== */

.footer-col {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--duration-reveal) var(--ease-smooth),
        transform var(--duration-reveal) var(--ease-smooth);
}

.footer.anim-visible .footer-col:nth-child(1) {
    transition-delay: 0ms;
    opacity: 1;
    transform: translateY(0);
}

.footer.anim-visible .footer-col:nth-child(2) {
    transition-delay: 100ms;
    opacity: 1;
    transform: translateY(0);
}

.footer.anim-visible .footer-col:nth-child(3) {
    transition-delay: 150ms;
    opacity: 1;
    transform: translateY(0);
}

.footer.anim-visible .footer-col:nth-child(4) {
    transition-delay: 200ms;
    opacity: 1;
    transform: translateY(0);
}

.footer.anim-visible .footer-col:nth-child(5) {
    transition-delay: 250ms;
    opacity: 1;
    transform: translateY(0);
}

.footer.anim-visible .footer-col:nth-child(6) {
    transition-delay: 300ms;
    opacity: 1;
    transform: translateY(0);
}

/* Social icon hover */
.footer-social .social-icon {
    transition:
        transform var(--duration-normal) var(--ease-bounce),
        background var(--duration-normal) var(--ease-smooth);
}

.footer-social .social-icon:hover {
    transform: translateY(-4px);
}

/* Footer links hover */
.footer-col ul li a {
    transition:
        color var(--duration-fast) var(--ease-smooth),
        padding-left var(--duration-normal) var(--ease-smooth);
}

/* ========================================
   BACK TO TOP BUTTON ANIMATION
   ======================================== */

.back-to-top {
    transition:
        opacity var(--duration-normal) var(--ease-smooth),
        visibility var(--duration-normal),
        transform var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
}

.back-to-top.visible {
    animation: backToTopEnter 0.5s var(--ease-bounce);
}

@keyframes backToTopEnter {
    0% {
        transform: translateY(20px) scale(0.8);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(214, 12, 12, 0.4);
}

/* ========================================
   FORM FOCUS ANIMATIONS
   ======================================== */

.form-group input,
.form-group select,
.form-group textarea {
    transition:
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        background var(--duration-normal) var(--ease-smooth);
}

/* Label animation on focus */
.form-group label {
    transition: color var(--duration-normal) var(--ease-smooth);
}

.form-group input:focus~label,
.form-group select:focus~label,
.form-group textarea:focus~label {
    color: var(--primary-color);
}

/* ========================================
   LOADING & SKELETON ANIMATIONS
   ======================================== */

@keyframes skeleton-loading {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.1) 25%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.1) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

/* ========================================
   SPECIAL EFFECTS
   ======================================== */

/* Glow effect on hover */
.glow-hover {
    transition: box-shadow var(--duration-normal) var(--ease-smooth);
}

.glow-hover:hover {
    box-shadow: 0 0 30px rgba(214, 12, 12, 0.3);
}

/* Magnetic button effect - subtle pull towards cursor */
.magnetic-btn {
    transition: transform var(--duration-fast) var(--ease-smooth);
}

/* Text gradient animation */
.text-gradient-animate {
    background: linear-gradient(90deg,
            var(--primary-color),
            var(--secondary-color),
            var(--primary-color));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientMove 3s linear infinite;
}

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

/* ========================================
   PAGE TRANSITION
   ======================================== */

.page-transition {
    opacity: 0;
    animation: pageEnter 0.5s var(--ease-smooth) forwards;
}

@keyframes pageEnter {
    to {
        opacity: 1;
    }
}

/* ========================================
   ACCESSIBILITY - REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {

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

    .hero-content,
    .hero-title,
    .hero-subtitle,
    .hero-gallery-item,
    .hero-buttons {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    [data-anim],
    .anim-fade-up,
    .anim-fade-left,
    .anim-fade-right,
    .anim-scale-up,
    .anim-flip-up,
    .stagger-container>*,
    .footer-col,
    .section-title {
        opacity: 1 !important;
        transform: none !important;
    }

    .announcement-bar::after {
        animation: none !important;
    }

    .cta-pulse,
    .hero-buttons .btn-primary {
        animation: none !important;
    }
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */
@media (max-width: 768px) {

    /* Reduce animation intensity on mobile */
    :root {
        --duration-fast: 150ms;
        --duration-normal: 250ms;
        --duration-slow: 350ms;
    }

    /* Disable parallax on mobile for performance */
    .hero-gallery-item,
    .parallax-slow,
    .parallax-medium,
    .parallax-fast {
        transform: none !important;
    }

    /* Simpler hover effects on touch devices */
    .package-card:hover,
    .product-card:hover,
    .feature-card:hover {
        transform: translateY(-5px);
    }

    /* Hero animations - simplified */
    .hero-content,
    .hero-title,
    .hero-subtitle,
    .hero-buttons {
        animation-duration: 0.5s;
    }
}

/* ========================================
   PRINT STYLES - Disable animations
   ======================================== */
@media print {
    * {
        animation: none !important;
        transition: none !important;
    }

    [data-anim],
    .anim-fade-up,
    .anim-fade-left,
    .anim-fade-right,
    .section-title,
    .footer-col {
        opacity: 1 !important;
        transform: none !important;
    }
}