/* ====================================
   Hero Animation System Styles - UPDATED
   ==================================== */

/* Remove the old gradient background - we don't need it anymore */
.hero-gradient-background {
    display: none !important;
}

/* Animated Background - Full width at all times, behind hero */
/* Cycles through idremi brand colors: red, orange, yellow, teal, blue, purple */
.hero-animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: linear-gradient(45deg, #e00a51, #ff7517, #ffaa2e, #0cc4b6, #04a5dc, #b259a2);
    background-size: 600% 600%;
    animation: gradientShift 20s ease infinite;
    pointer-events: none;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    16.66% { background-position: 20% 50%; }
    33.33% { background-position: 40% 50%; }
    50% { background-position: 60% 50%; }
    66.66% { background-position: 80% 50%; }
    83.33% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hero section - starts smaller with rounded corners, grows to full width */
.hero {
    box-sizing: border-box !important;
    margin: 0 auto !important;
    width: 96vw !important;
    max-width: none !important;
    height: calc(87vh) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative;
    background: linear-gradient(0deg, #c7c7c7 0%, #e8eae8 100%);
    border-radius: 20px;
    transition: none;
    will-change: width, height, border-radius, top;
    padding: 35px !important;
    top: 10vh;
}

/* Hero content - make sure it's visible */
.hero-content {
    position: relative !important;
    z-index: 10 !important;
    text-align: center;
    max-width: 1000px;
    width: 100%;
}

/* Logo and Title - Fade in on page load, using style-modern.css animations */
/* Logo starts at opacity 0, fades in at page load */
.hero-logo {
    /* Inherits fadeInUp animation from style-modern.css */
    /* This element will fade in BEFORE hero-subtitle (which starts at 0.8s) */
    margin-bottom: 0px;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.hero-logo .logo-large {
    width: 230px;
    height: auto;
    margin: 0 auto;
}

.hero-title {
    /* Title-line children inherit fadeInUp animation from style-modern.css */
    /* Each line has staggered delays already defined in style-modern.css */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Individual title lines should animate on load from style-modern.css */
.title-line {
    /* Remove !important to allow style-modern.css animations to work */
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: color var(--transition-base, 0.3s ease);
    margin: 0 12px;
}

@keyframes fadeInSequential {
    /* REMOVED - Using fadeInUp from style-modern.css instead */
}

/* Subtitle and CTA - keep their original animations */
.hero-subtitle {
    opacity: 0;
    transition: opacity 0.5s ease-out 0.8s;
}

.cta-button {
    opacity: 0;
    transition: opacity 0.5s ease-out 1s;
}

/* Hero scroll indicator - fades out on scroll */
.hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--gray-900);
    font-size: 14px;
    transition: opacity 0.5s ease-out;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: var(--gray-600);
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0%, 100% {
        transform: scaleY(1);
        transform-origin: top;
    }
    50% {
        transform: scaleY(0.5);
        transform-origin: bottom;
    }
}

/* CRITICAL: Ensure sections below hero are visible with proper backgrounds */
.work,
.about,
.contact,
footer {
    position: relative !important;
    z-index: 100 !important;
    background: var(--white, #e8eae8) !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Ensure work section has padding */
.work {
    padding: 80px 0 !important;
    position: relative;
    top: calc(13vh);
    transition: none;
    will-change: top;
}

/* Ensure about section styling */
.about {
    padding: 80px 0 !important;
    background: linear-gradient(0deg, #c7c7c7 0%, #e8eae8 100%) !important;
}

/* Ensure contact section styling */
.contact {
    padding: 80px 0 !important;
}

/* Make sure footer is visible */
footer {
    padding: 40px 0 !important;
}

/* Override any fixed positioning that might hide content */
body {
    position: relative !important;
}

/* Google reCAPTCHA Badge - Stay at bottom of page (absolute, not fixed) */
.grecaptcha-badge {
    position: absolute !important;
    bottom: 14px !important;
    z-index: 9999 !important;
}

/* Ensure body/html allow absolute positioning */
body {
    position: relative !important;
    min-height: 100vh;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .hero {
        width: calc(92vw) !important;
        min-height: calc(92vh) !important;
        padding: 80px 20px 100px !important;
    }
    
    .hero-logo .logo-large {
        width: 180px;
    }
}