/* ==========================================
   WEB FACTORY - MASTER TEMPLATE STYLES
   Custom CSS complementario a Tailwind
   ========================================== */

/* ==========================================
   GLASSMORPHISM CARDS
   ========================================== */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* Hover glow effect */
.glass-card:hover {
    box-shadow: 0 8px 32px 0 rgba(var(--color-primary-rgb, 227, 30, 36), 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================
   CUSTOM CURSOR
   ========================================== */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0;
}

.custom-cursor.hover {
    transform: scale(1.5);
    opacity: 0.8;
}

@media (pointer: fine) {
    .custom-cursor {
        opacity: 0.6;
    }
}

/* ==========================================
   GRADIENT BACKGROUNDS
   ========================================== */
.bg-gradient-radial {
    background: radial-gradient(circle at center, var(--tw-gradient-stops));
}

/* ==========================================
   TEXT ANIMATIONS
   ========================================== */
.text-reveal {
    display: inline-block;
}

/* Animated color effect for titles - NO background-clip to avoid clipping */
.hero-title {
    color: #ffffff;
    display: inline-block;
    animation: color-pulse 3s ease-in-out infinite;
}

@keyframes color-pulse {

    0%,
    100% {
        color: #ffffff;
    }

    50% {
        color: var(--color-primary);
    }
}

/* Ambient Blob Animation */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

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

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* ==========================================
   BUTTON STYLES
   ========================================== */
.magnetic-btn,
.magnetic-btn-large {
    position: relative;
    cursor: pointer;
    will-change: transform;
}

.magnetic-btn::before,
.magnetic-btn-large::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.magnetic-btn:hover::before,
.magnetic-btn-large:hover::before {
    opacity: 1;
    animation: shine 1.5s ease-in-out infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* ==========================================
   PRICING CARDS
   ========================================== */
.pricing-card {
    position: relative;
    overflow: hidden;
}

.pricing-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 50%,
            transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.pricing-card:hover::after {
    transform: translateX(100%);
}

/* ==========================================
   SCROLL ANIMATIONS
   ========================================== */
.fade-in {
    /* opacity: 0;  <-- REMOVED: Handled by GSAP to ensure visibility if JS fails */
    transform: translateY(20px);
}

/* ==========================================
   SECTION DIVIDERS
   ========================================== */
section {
    position: relative;
}

section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
}

section:first-of-type::before {
    display: none;
}

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

    /* Reduce animation complexity on mobile */
    .glass-card::before {
        display: none;
    }

    /* Disable custom cursor on touch devices */
    .custom-cursor {
        display: none;
    }

    /* Optimize text sizes */
    .hero-title {
        font-size: clamp(2.5rem, 10vw, 6rem);
    }
}

/* ==========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Force GPU acceleration for smooth animations */
.magnetic-btn,
.magnetic-btn-large,
.glass-card,
.parallax-slow,
.parallax-slower {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */
.text-gradient {
    background: linear-gradient(135deg,
            #ffffff 0%,
            var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-primary {
    box-shadow: 0 20px 60px rgba(var(--color-primary-rgb, 227, 30, 36), 0.3);
}

/* ==========================================
   LOADING STATES (para futura implementación)
   ========================================== */
.skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 25%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

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

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

/* ==========================================
   SCROLLBAR STYLING (Chrome/Safari)
   ========================================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) #0a0a0a;
}