/* Base Reset & Variables */
:root {
    --bg-image: url('assets/BG1.png');
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* Avoid fixed 100vh height to prevent issues with mobile browser chrome */
    min-height: 100%; 
    scroll-behavior: smooth;
}

/* Hero Section Styles */
.hero-section {
    /* Using svh ensures the layout respects the visible viewport without mobile address bar glitch */
    min-height: 100svh; 
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Keeping scroll attachment to avoid weird parallax issues on iOS unless specifically managed by GSAP */
    background-attachment: scroll; 
}

/* Dark gradient overlay to provide contrast for the logo and CTA */
.overlay {
    background: linear-gradient(
        135deg,
        rgba(10, 10, 10, 0.7) 0%,
        rgba(10, 10, 10, 0.3) 50%,
        rgba(0, 0, 0, 0.8) 100%
    );
    /* Allow interaction with elements beneath the overlay */
    pointer-events: none; 
    mix-blend-mode: multiply;
}

/* Performance optimizations for animated elements */
.hero-logo, .hero-cta {
    will-change: transform, opacity;
}

/* Specific Breakpoint Adjustments to prevent overlapping in extreme aspect ratios */
@media screen and (max-aspect-ratio: 4/5) and (max-height: 700px) {
    /* Adjustments for small landscape devices or very squished browsers */
    .hero-section {
        padding-top: clamp(3rem, 10vh, 5rem);
        padding-bottom: clamp(3rem, 10vh, 5rem);
    }
}