/* ==============================================
   ENHANCED HERO SECTION WITH MODERN CSS
   Using CSS Container Queries & Custom Properties
   ============================================== */

/* Hero Section - Modern CSS Grid Layout */
.hero-section {
    /* CSS Container for responsive design */
    container-type: inline-size;
    container-name: hero;
    
    /* CSS Custom Properties for dynamic sizing */
    --hero-video-width: 30%;
    --hero-content-width: 70%;
    --hero-padding: var(--space-4);
    --hero-gap: var(--space-6);
    
    position: relative;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    isolation: isolate; /* Create stacking context */
    padding: 0; /* Override any global padding */
}

/* Performance optimizations */
.hero-section * {
    will-change: transform;
    backface-visibility: hidden;
}

/* Mobile: Original full-screen video layout */
@container hero (max-width: 767px) {
    #hero-video-container {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    
    #hero-video-container .hero-mobile-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        
        /* Modern video optimizations */
        image-rendering: crisp-edges;
        transform: translateZ(0); /* Force GPU acceleration */
    }

    /* Mobile sliding images - positioned as background elements */
    .section:first-child .order-2 {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        overflow: hidden;
    }

    /* Individual sliding images for mobile */
    .section:first-child .order-2 img:first-child {
        position: absolute;
        left: -60%;
        top: 60%;
        transform: translateY(-50%) translateX(-120%);
        height: 50%;
        width: auto;
        object-fit: contain;
        opacity: 0;
        transition: all 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .section:first-child .order-2 img:last-child {
        position: absolute;
        right: -60%;
        top: 40%;
        transform: translateY(-50%) translateX(120%);
        height: 40%;
        width: auto;
        object-fit: contain;
        opacity: 0;
        transition: all 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        transition-delay: 0.3s;
    }

    /* Mobile active animations */
    .section:first-child.active .order-2 img:first-child {
        transform: translateY(-50%) translateX(10%);
        opacity: 0.4;
    }

    .section:first-child.active .order-2 img:last-child {
        transform: translateY(-50%) translateX(-10%);
        opacity: 0.3;
    }

    /* Mobile scroll-out animations */
    .section:first-child.scroll-out .order-2 img:first-child {
        transform: translateY(-50%) translateX(-150%);
        opacity: 0;
    }

    .section:first-child.scroll-out .order-2 img:last-child {
        transform: translateY(-50%) translateX(150%);
        opacity: 0;
    }

    /* Mobile content wrapper */
    .hero {
        padding: 1rem;
        position: relative;
        min-height: 100vh;
        justify-content: center;
        z-index: 10;
    }
}

/* Desktop: Split layout (768px and above) */
@media (min-width: 768px) {
    .hero-section {
        overflow: hidden;
    }

    /* Desktop video container positioning */
    #hero-video-container {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .hero-desktop-layout {
        width: 100%;
        height: 100vh;
        display: flex;
    }

    /* Left side: 9:16 video container - optimized for 9:16 aspect ratio */
    .hero-video-container {
        width: 30%;
        height: 100%;
        position: relative;
        overflow: hidden;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-video-container .hero-desktop-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Right side: Background image with content - takes more space */
    .hero-content-container {
        width: 70%;
        height: 100%;
        position: relative;
        background-image: url('../assets/herobg.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        text-align: center;
        position: relative;
        z-index: 10;
    }

    /* Desktop sliding images - positioned within the right side content area */
    .hero-content .order-2 {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        overflow: hidden;
    }

    /* Desktop sliding images positioning */
    .hero-content .order-2 img:first-child {
        position: absolute;
        left: -20%;
        bottom: 0;
        transform: translateX(-100%);
        height: 85%;
        width: auto;
        object-fit: contain;
        opacity: 0;
        transition: all 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .hero-content .order-2 img:last-child {
        position: absolute;
        right: -10%;
        bottom: 0;
        transform: translateX(100%);
        height: 85%;
        width: auto;
        object-fit: contain;
        opacity: 0;
        transition: all 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        transition-delay: 0.3s;
    }

    /* Desktop active animations */
    .section:first-child.active .hero-content .order-2 img:first-child {
        transform: translateX(20%);
        opacity: 1;
    }

    .section:first-child.active .hero-content .order-2 img:last-child {
        transform: translateX(-20%);
        opacity: 1;
    }

    /* Desktop scroll-out animations */
    .section:first-child.scroll-out .hero-content .order-2 img:first-child {
        transform: translateX(-150%);
        opacity: 0;
    }

    .section:first-child.scroll-out .hero-content .order-2 img:last-child {
        transform: translateX(150%);
        opacity: 0;
    }
}

@media (min-width: 1468px) {
    .hero-video-container {
        width: 30%;
        height: 100%;
        position: relative;
        overflow: hidden;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-video-container .hero-desktop-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Right side: Background image with content - takes more space */
    .hero-content-container {
        width: 70%;
        height: 100%;
        position: relative;
        background-image: url('../assets/herobg.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        text-align: center;
        position: relative;
        z-index: var(--z-30);
        padding: 2rem;
    }

    /* Desktop sliding images - positioned within the right side content area */
    .hero-content .order-2 {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        overflow: hidden;
    }

    /* Desktop sliding images positioning */
    .hero-content .order-2 img:first-child {
        position: absolute;
        left: -20%;
        bottom: 0;
        transform: translateX(-100%);
        height: 85%;
        width: auto;
        object-fit: contain;
        opacity: 0;
        transition: all 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .hero-content .order-2 img:last-child {
        position: absolute;
        right: 50%;
        bottom: 0;
        transform: translateX(100%);
        height: 85%;
        width: auto;
        object-fit: contain;
        opacity: 0;
        transition: all 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        transition-delay: 0.3s;
    }

    /* Desktop active animations */
    .section:first-child.active .hero-content .order-2 img:first-child {
        transform: translateX(12%);
        opacity: 1;
    }

    .section:first-child.active .hero-content .order-2 img:last-child {
        transform: translateX(-12%);
        opacity: 1;
    }

    /* Desktop scroll-out animations */
    .section:first-child.scroll-out .hero-content .order-2 img:first-child {
        transform: translateX(-150%);
        opacity: 0;
    }

    .section:first-child.scroll-out .hero-content .order-2 img:last-child {
        transform: translateX(150%);
        opacity: 0;
    }
}



/* Text styling for all screen sizes */
.hero-content h1,
.hero h1 {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 1px 1px 4px rgba(0, 0, 0, 0.7);
    z-index: var(--z-30);
    position: relative;
}

.hero-content p,
.hero p {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 1px 1px 4px rgba(0, 0, 0, 0.7);
    z-index: var(--z-30);
    position: relative;
}

.hero-content a,
.hero a {
    z-index: var(--z-30);
    position: relative;
}

/* Logo Container */
.hero-logo {
    position: relative;
    z-index: var(--z-30);
    filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
    animation: logoFloat 3s ease-in-out infinite;
    width: 8rem;
    height: 8rem;
    margin-bottom: 1.5rem;
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}
/* Macbook Air landscape layout optimization */
@media (min-width: 769px) and (orientation: landscape) {

    .hero-video-container {
        width: 30%;
        height: 100%;
        position: relative;
        overflow: hidden;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-video-container .hero-desktop-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Right side: Background image with content - takes more space */
    .hero-content-container {
        width: 70%;
        height: 100%;
        position: relative;
        background-image: url('../assets/herobg.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        text-align: center;
        position: relative;
        z-index: var(--z-30);
        padding: 2rem;
    }

    /* Desktop sliding images - positioned within the right side content area */
    .hero-content .order-2 {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        overflow: hidden;
    }

    /* Desktop sliding images positioning */
    .hero-content .order-2 img:first-child {
        position: absolute;
        left: -20%;
        bottom: 0;
        transform: translateX(-100%);
        height: 85%;
        width: auto;
        object-fit: contain;
        opacity: 0;
        transition: all 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .hero-content .order-2 img:last-child {
        position: absolute;
        right: 50%;
        bottom: 0;
        transform: translateX(100%);
        height: 85%;
        width: auto;
        object-fit: contain;
        opacity: 0;
        transition: all 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        transition-delay: 0.3s;
    }

    /* Desktop active animations */
    .section:first-child.active .hero-content .order-2 img:first-child {
        transform: translateX(12%);
        opacity: 1;
    }

    .section:first-child.active .hero-content .order-2 img:last-child {
        transform: translateX(-12%);
        opacity: 1;
    }

    /* Desktop scroll-out animations */
    .section:first-child.scroll-out .hero-content .order-2 img:first-child {
        transform: translateX(-150%);
        opacity: 0;
    }

    .section:first-child.scroll-out .hero-content .order-2 img:last-child {
        transform: translateX(150%);
        opacity: 0;
    }
}



/* Text styling for all screen sizes */
.hero-content h1,
.hero h1 {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 1px 1px 4px rgba(0, 0, 0, 0.7);
    z-index: var(--z-30);
    position: relative;
}

.hero-content p,
.hero p {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 1px 1px 4px rgba(0, 0, 0, 0.7);
    z-index: var(--z-30);
    position: relative;
}

.hero-content a,
.hero a {
    z-index: var(--z-30);
    position: relative;
}

/* Logo Container */
.hero-logo {
    position: relative;
    z-index: var(--z-30);
    filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
    animation: logoFloat 3s ease-in-out infinite;
    width: 8rem;
    height: 8rem;
    margin-bottom: 1.5rem;
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Mobile responsive logo sizing */
@media (max-width: 768px) and (orientation: portrait) {
    .hero-logo {
        width: clamp(4rem, 15vw, 8rem);
        height: clamp(4rem, 15vw, 8rem);
    }
}

/* Desktop landscape layout optimization */
@media (min-width: 768px) and (orientation: landscape) {
    .hero-desktop-layout {
        display: flex;
        width: 100%;
        height: 100vh;
    }
    
    .hero-video-container {
        width: var(--hero-video-width);
    }
    
    .hero-content-container {
        width: var(--hero-content-width);
    }
}

/* Extra small mobile adjustments */
@media (max-width: 480px) {
    .section:first-child .order-2 img:first-child {
        left: -70%;
        top: 70%;
        height: 35%;
        transform: translateY(-50%) translateX(-140%);
    }

    .section:first-child .order-2 img:last-child {
        right: -70%;
        top: 30%;
        height: 30%;
        transform: translateY(-50%) translateX(140%);
    }

    .section:first-child.active .order-2 img:first-child {
        transform: translateY(-50%) translateX(5%);
        opacity: 0.3;
    }

    .section:first-child.active .order-2 img:last-child {
        transform: translateY(-50%) translateX(-5%);
        opacity: 0.2;
    }
}

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .order-2 img,
    .hero-logo {
        animation: none;
        transition: none;
    }
}