/* Hero Animation Styles - Full Page Background Scrollytelling */

/* 1. Make body transparent to show the text-behind-canvas */
body {
    background-color: transparent !important;
    /* Override styles.css */
}

/* 2. Hide existing static backgrounds from styles.css */
body::before,
body::after {
    display: none !important;
}

/* 3. The canvas sits fixed in the background of the entire page. */
canvas#hero-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    /* Behind everything */
    pointer-events: none;
}

/* 4. Overlay on top of the canvas, also fixed. */
.hero-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
    z-index: -1;
    /* Same level as canvas, effectively (document order controls stacking) */
    pointer-events: none;
}

/* 5. Ensure content containers are relatively positioned so they scroll over the fixed background */
.hero-v2,
.container,
section,
footer {
    position: relative;
    z-index: 2;
}

/* 6. Add spacing for the new hero section since it lacks the original .hero class */
.hero-v2 {
    padding: 120px 0 60px;
    /* More top padding to clear header explicitly if needed */
}

/* 7. Translucent Text Effect */
/* Used for "Nueva Generación" and "Recetario Inteligente" headers/sections to blend with background */
.glass-text-section h2,
.section-title h2 {
    color: rgba(243, 243, 243, 0.9);
    /* Slight transparency on text */
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    /* Shadow for readability */
}

/* Utility to add glass effect to container blocks if needed, similar to calculator */
.glass-panel {
    background: rgba(18, 18, 20, 0.6) !important;
    /* Translucent dark background */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}