/* Landing-only styles (index.html). Design System: "Matte Frost" (The User's Choice). */

/* --- CORE LANDING OVERRIDES --- */
body.page-landing {
    background-color: #030303;
    -webkit-font-smoothing: antialiased;
}

/* --- HERO TYPOGRAPHY: Liquid Metal --- */
body.page-landing #hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 0.95;
    text-shadow: 0 20px 60px rgba(0,0,0,1);
    transform: translateZ(0);
}

body.page-landing #hero .text-gold-gradient {
    background: linear-gradient(
        135deg, 
        #bf953f 0%, 
        #fcf6ba 25%, 
        #b38728 50%, 
        #fbf5b7 75%, 
        #aa771c 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldLiquidFlow 8s linear infinite;
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.2));
}

@keyframes goldLiquidFlow {
    to { background-position: 300% center; }
}

body.page-landing #hero p.text-gray-200 {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 1.125rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 4px 12px rgba(0,0,0,0.9);
    mix-blend-mode: plus-lighter;
}

/* --- BUTTONS: "Matte Frost" --- */

/* Reset & Geometry */
body.page-landing .btn-glass-base,
body.page-landing .btn-glass-strong-gold,
body.page-landing .btn-glass-strong-obsidian,
body.page-landing .nav-cta {
    border-radius: 0 !important; /* Sharp */
    position: relative;
    isolation: isolate;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    transition: all 0.3s ease;
    
    /* THE STYLE: High Blur, Matte Finish */
    /* Much stronger blur to match the "strip" feel */
    backdrop-filter: blur(40px); 
    -webkit-backdrop-filter: blur(40px);
    
    /* Darker, flatter background to create the "surface" */
    background: rgba(15, 15, 15, 0.75); 
    
    /* Very subtle border */
    border: 1px solid rgba(255, 255, 255, 0.1); 
    
    color: #fff;
    box-shadow: 0 4px 30px rgba(0,0,0,0.5); /* Soft ambient shadow */
}

/* Hover Physics */
body.page-landing .btn-glass-base:hover {
    background: rgba(30, 30, 30, 0.85); /* Slightly lighter/more solid on hover */
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}

/* PRIMARY (Gold) - "Matte Gold" */
body.page-landing .btn-glass-strong-gold {
    /* Subtle gold tint in the matte surface */
    background: rgba(30, 25, 10, 0.75); 
    border-color: rgba(212, 175, 55, 0.2);
    color: #FDE68A;
}

body.page-landing .btn-glass-strong-gold:hover {
    background: rgba(50, 40, 10, 0.9); /* Richer matte gold on hover */
    border-color: #D4AF37;
    color: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9), 0 0 30px rgba(212, 175, 55, 0.1);
}

/* SECONDARY (Obsidian) - "Matte Black" */
body.page-landing .btn-glass-strong-obsidian {
    background: rgba(10, 10, 10, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

body.page-landing .btn-glass-strong-obsidian:hover {
    background: rgba(20, 20, 20, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* --- SUPPORT FAB (fixed bottom-right, independent from Tailwind generated classes) --- */
#support-fab.support-fab {
    position: fixed;
    right: 16px;
    bottom: 96px;
    z-index: 120;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(11, 11, 11, 0.92);
    color: #d4af37;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

#support-fab.support-fab:hover {
    transform: translateY(-2px) scale(1.03);
    background: rgba(17, 17, 17, 0.98);
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.32);
}

#support-fab.support-fab svg {
    width: 24px;
    height: 24px;
}

@media (min-width: 768px) {
    #support-fab.support-fab {
        right: 24px;
        bottom: 24px;
    }
}


/* --- NAV CTA (Ensure precise match & FIX DOUBLE LABELS) --- */
body.page-landing nav .nav-cta {
    font-size: 0.65rem;
    padding: 12px 24px;
    background: rgba(15, 15, 15, 0.75);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
}
body.page-landing nav .nav-cta:hover {
    background: rgba(30, 30, 30, 0.85);
    border-color: rgba(255,255,255,0.3);
}

/* FIXED: Ensure only one label shows based on screen size */
.nav-cta__short {
    display: none;
}
.nav-cta__full {
    display: inline;
}

@media (max-width: 768px) {
    .nav-cta {
        padding: 10px 16px; /* Slightly tighter on mobile */
    }
    .nav-cta__full {
        display: none;
    }
    .nav-cta__short {
        display: inline;
    }
}

/* --- COMPARISON SECTION: Side-by-Side Layout & Styling --- */

/* 1. Atmospheric Glow Background */
#portfolio {
    position: relative;
    /* Dark base with a very subtle radial gold glow */
    background: radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.03) 0%, #0a0a0a 60%);
}

/* 2. Typography Enhancements */
#portfolio .max-w-2xl h2 {
    /* Dramatic, high-contrast serif */
    font-weight: 300;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
    position: relative;
    display: inline-block;
}

/* Subtle accent line under the title */
#portfolio .max-w-2xl h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.8), transparent);
    margin-top: 1rem;
}

#portfolio .max-w-2xl p {
    /* Editorial body text */
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
    border-left: 1px solid rgba(255, 255, 255, 0.1); /* Minimalist border accent */
    padding-left: 1.5rem; /* Space for the border */
    margin-left: -1px; /* Align visually */
}

/* 3. Micro-animation: Breathing Light */
#portfolio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.02), transparent 50%);
    animation: atmosphericPulse 10s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes atmosphericPulse {
    0% { opacity: 0.5; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.1); }
}

/* Override default stacked layout for #portfolio section */
#portfolio .flex-col {
    flex-direction: column;
}

@media (min-width: 1024px) {
    /* Create a grid-like layout for the portfolio container */
    #portfolio .max-w-7xl {
        display: grid;
        grid-template-columns: 1fr 1.2fr; /* Text left (smaller), Widget right (larger) */
        gap: 4rem;
        align-items: center;
    }

    /* Reset the inner flex container used for the header */
    #portfolio .max-w-7xl > .flex {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0 !important; /* Remove bottom margin */
        gap: 2rem;
    }

    /* Ensure text container takes full width of its grid cell */
    #portfolio .max-w-2xl {
        max-width: 100%; 
    }

    /* Adjust the comparison container wrapper */
    #portfolio .comparison-container {
        width: 100%;
        max-width: 800px; /* Limit max width so it's not huge */
        margin-left: auto; /* Push to right */
        /* Make it slightly smaller/more contained */
        aspect-ratio: 4/3; 
    }
    
    /* Hide the mobile hint text "Pull slider..." since layout explains itself better */
    #portfolio .mb-3.text-xs {
        display: none;
    }
}

/* --- ENHANCED COMPARISON CONTAINER STYLE --- */
#portfolio .comparison-container {
    /* Premium "Museum Glass" Frame - CLEAN, NO CORNERS */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Base subtle border */
    box-shadow: 
        0 0 0 1px rgba(0,0,0,0.5), /* Inner black line for separation */
        0 20px 50px -10px rgba(0,0,0,0.7); /* Deep float shadow */
    position: relative;
    overflow: hidden;
}

/* Gold corners REMOVED per user request */
#portfolio .comparison-container::before,
#portfolio .comparison-container::after {
    display: none;
}

/* --- SERVICES CARD HOVER EFFECTS & BLUR FIX --- */

/* 1. Enhanced Background for the Section */
#services {
    position: relative;
    /* Deep, layered dark background with a very subtle radial spotlight */
    background: radial-gradient(circle at 50% 0%, rgba(20, 20, 25, 1) 0%, #030303 80%);
}

#services::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.03) 0%, transparent 60%);
    filter: blur(80px);
    pointer-events: none;
    animation: servicesGlow 15s ease-in-out infinite alternate;
}

@keyframes servicesGlow {
    0% { transform: translateX(-10%) scale(1); opacity: 0.5; }
    100% { transform: translateX(10%) scale(1.1); opacity: 0.8; }
}

/* 2. Card Styling & Blur Fix */
#services .glass-card {
    /* FIX: Force hardware acceleration to prevent blur during scale */
    transform: translate3d(0, 0, 0); 
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform, box-shadow;
    
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden; /* For the inner shine */
    border: 1px solid rgba(255, 255, 255, 0.05); /* Softer initial border */
}

/* 3. "Fishechka" - The Spotlight Hover */
#services .glass-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 255, 255, 0.05) 0%, 
        transparent 50%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

#services .glass-card:hover {
    /* Use translate3d instead of translateY for crisp text */
    transform: translate3d(0, -8px, 0); 
    border-color: rgba(212, 175, 55, 0.3); /* Gold border reveal */
    box-shadow: 
        0 20px 40px -10px rgba(0,0,0,0.8),
        0 0 20px rgba(212, 175, 55, 0.05); /* Subtle gold glow */
}

#services .glass-card:hover::after {
    opacity: 1; /* Turn on spotlight */
}

/* Icon pulse */
#services .glass-card:hover i[data-lucide] {
    transform: scale(1.1);
    transition: transform 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
}

/* --- AI SECTION STYLING --- */
#about .glass-panel-ai {
    background: rgba(10, 10, 12, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 20px 60px -20px rgba(0,0,0,0.8),
        inset 0 0 0 1px rgba(255,255,255,0.05); /* Inner rim */
}

/* Subtle glow interaction */
#about .glass-panel-ai:hover {
    border-color: rgba(212, 175, 55, 0.15);
    box-shadow: 
        0 30px 80px -20px rgba(0,0,0,0.9),
        0 0 40px rgba(212, 175, 55, 0.05);
}

.animate-pulse-slow {
    animation: pulseSlow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseSlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .8; transform: scale(0.95); }
}


/* --- ANIMATION: None or Very Subtle --- */
/* User disliked gloss, so we keep it static or purely atmospheric */
.btn-shimmer::after {
    display: none; /* Removed shimmer entirely for pure matte look */
}

/* --- HERO BACKGROUND --- */
.hero-bg {
    background-image: url("images/hero.jpg");
    filter: brightness(0.6) contrast(1.1);
}

@media (max-width: 768px) {
    .hero-bg {
        background-image: url("images/hero-960.jpg");
        background-position: center top;
    }
}

@keyframes deepBreathe {
    0% { transform: scale(1.0); filter: brightness(0.6) contrast(1.1); }
    100% { transform: scale(1.04); filter: brightness(0.7) contrast(1.05); }
}

.animate-restore-pulse {
    animation: deepBreathe 24s ease-in-out infinite alternate;
    will-change: transform, filter;
}

/* --- FIXED ANIMATIONS (GPU Accelerated) --- */

/* 1. Smoother Float */
@keyframes floatGentle3D {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -10px, 0); }
}

.animate-float-gentle {
    animation: floatGentle3D 6s ease-in-out infinite;
    will-change: transform; /* Hint to browser */
}

/* 2. Smooth Light Travel (Arrow) */
@keyframes travelLight {
    0% { transform: translateX(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(100px); opacity: 0; }
}

.animate-travel-light {
    animation: travelLight 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform, opacity;
}