/* Professional Backgrounds & Scroll Animations for Public Pages */
/* Images: professional, modern, organized - office desks, workspaces (no faces) */

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */

.reveal-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-fade-in {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.reveal-fade-in.active {
    opacity: 1;
}

.reveal-scale-up {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-scale-up.active {
    opacity: 1;
    transform: scale(1);
}

.reveal-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-slide-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-slide-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* ============================================
   PROFESSIONAL BACKGROUND IMAGES
   Office, workspace, modern business (no faces)
   ============================================ */

/* Hero Backgrounds - Modern office/workspace scenes */
.bg-hero-office-modern {
    background-image: 
        linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.75) 100%),
        url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bg-hero-workspace-clean {
    background-image: 
        linear-gradient(135deg, rgba(251, 146, 60, 0.9) 0%, rgba(255, 183, 3, 0.85) 100%),
        url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bg-hero-desk-minimal {
    background-image: 
        linear-gradient(135deg, rgba(13, 148, 136, 0.88) 0%, rgba(20, 184, 166, 0.8) 100%),
        url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bg-hero-laptop-work {
    background-image: 
        linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.75) 100%),
        url('https://images.unsplash.com/photo-1531297461136-82lw9z2l5b?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bg-hero-coffee-desk {
    background-image: 
        linear-gradient(135deg, rgba(251, 146, 60, 0.87) 0%, rgba(250, 204, 21, 0.8) 100%),
        url('https://images.unsplash.com/photo-1556761175-b413da4baf72?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Section Backgrounds - Subtle professional patterns */
.bg-section-meeting-room {
    background-image: 
        linear-gradient(rgba(248, 250, 252, 0.97), rgba(248, 250, 252, 0.95)),
        url('https://images.unsplash.com/photo-1517502884422-41e157d4ed43?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bg-section-office-light {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94)),
        url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bg-section-workspace-bg {
    background-image: 
        linear-gradient(rgba(250, 250, 250, 0.96), rgba(248, 250, 252, 0.93)),
        url('https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bg-section-plans-office {
    background-image: 
        linear-gradient(rgba(248, 250, 252, 0.96), rgba(250, 250, 250, 0.94)),
        url('https://images.unsplash.com/photo-1573164713988-8665fc963095?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bg-section-plans-desk {
    background-image: 
        linear-gradient(rgba(240, 253, 244, 0.96), rgba(248, 250, 252, 0.94)),
        url('https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* CTA Section Backgrounds */
.bg-cta-office-warm {
    background-image: 
        linear-gradient(135deg, rgba(251, 146, 60, 0.92) 0%, rgba(255, 183, 3, 0.88) 100%),
        url('https://images.unsplash.com/photo-1556761175-b413da4baf72?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

.bg-cta-workspace-cool {
    background-image: 
        linear-gradient(135deg, rgba(13, 148, 136, 0.92) 0%, rgba(20, 184, 166, 0.88) 100%),
        url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

.bg-cta-modern-office {
    background-image: 
        linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%),
        url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* ============================================
   SUBTLE BACKGROUND PATTERNS (fallback/overlay)
   ============================================ */

.bg-pattern-dots {
    background-image: radial-gradient(circle, rgba(251, 146, 60, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
}

.bg-pattern-grid {
    background-image: 
        linear-gradient(rgba(251, 146, 60, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(251, 146, 60, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
}

.bg-pattern-blobs {
    background-image: 
        radial-gradient(ellipse at center top, rgba(251, 146, 60, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(255, 183, 3, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at top right, rgba(251, 146, 60, 0.06) 0%, transparent 50%);
}

.bg-pattern-squares {
    background-image: 
        linear-gradient(45deg, rgba(251, 146, 60, 0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(251, 146, 60, 0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(251, 146, 60, 0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(251, 146, 60, 0.04) 75%);
    background-size: 60px 60px;
    background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
}

.bg-pattern-circles {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(251, 146, 60, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255, 183, 3, 0.05) 0%, transparent 50%);
    background-size: 200px 200px;
}

/* Teal variant patterns for servicos pages */
.bg-pattern-dots-teal {
    background-image: radial-gradient(circle, rgba(20, 184, 166, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
}

.bg-pattern-grid-teal {
    background-image: 
        linear-gradient(rgba(20, 184, 166, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 184, 166, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
}

.bg-pattern-blobs-teal {
    background-image: 
        radial-gradient(ellipse at center top, rgba(20, 184, 166, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(45, 212, 191, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at top right, rgba(20, 184, 166, 0.06) 0%, transparent 50%);
}

.bg-pattern-squares-teal {
    background-image: 
        linear-gradient(45deg, rgba(20, 184, 166, 0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(20, 184, 166, 0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(20, 184, 166, 0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(20, 184, 166, 0.04) 75%);
    background-size: 60px 60px;
    background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
}

.bg-pattern-circles-teal {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(20, 184, 166, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(45, 212, 191, 0.05) 0%, transparent 50%);
    background-size: 200px 200px;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .bg-hero-office-modern,
    .bg-hero-workspace-clean,
    .bg-hero-desk-minimal,
    .bg-hero-laptop-work,
    .bg-hero-coffee-desk,
    .bg-section-meeting-room,
    .bg-section-office-light,
    .bg-section-workspace-bg,
    .bg-section-plans-office,
    .bg-section-plans-desk,
    .bg-cta-office-warm,
    .bg-cta-workspace-cool,
    .bg-cta-modern-office {
        background-attachment: scroll;
        background-position: center top;
    }
}

/* ============================================
   SCROLL PROGRESS BAR
   ============================================ */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #ffb703, #fb923c);
    z-index: 1000;
    transition: width 0.1s ease-out;
}

.scroll-progress-teal {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #2dd4bf, #14b8a6);
    z-index: 1000;
    transition: width 0.1s ease-out;
}

/* ============================================
   GLASSMORPHISM OVERLAYS
   ============================================ */

.glass-overlay {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}