/* css/styles.css */
/* ---------- GLOBAL RESET & BASE (matches portfolio dark theme) ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Restore smooth scrolling for desktop mouse/trackpad */
    scroll-behavior: smooth; 
    scroll-snap-type: none !important;
    overflow-x: hidden;
    overflow-y: auto; /* Ensure vertical scroll is explicitly enabled */
}

body {
    background: #03030C;
    font-family: 'Inter', sans-serif;
    color: #EFF1F5;
    overflow-x: hidden;
    overflow-y: auto; /* Ensure vertical scroll is explicitly enabled */
}

/* custom scrollbar (keep portfolio style) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #1A1A24;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #FFDD65;
    border-radius: 10px;
}

.pro-footer {
    background: #03030C;
    border-top: 1px solid rgba(255, 221, 101, 0.15);
    padding: 2rem 2rem;
    text-align: center;
    font-size: 0.85rem;
    color: #8892B0;
}
.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}
.footer-links a {
    color: #CCD6F6;
    text-decoration: none;
    transition: 0.2s;
}
.footer-links a:hover {
    color: #FFDD65;
}

/* ---------- RESPONSIVE LAYOUT ADJUSTMENTS ---------- */
@media (max-width: 768px) {
    .film-card { width: 280px; }
    .marquee-track { gap: 1.2rem; animation: scrollMarquee 30s linear infinite; }
    .expanded-card { padding: 0; }
    .expanded-content-wrapper { padding: 1.5rem; }
    .expanded-title { font-size: 1.7rem; }
    .section-caption { font-size: 2rem; }
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
    .hero-text p { max-width: 100%; }
    .cta-group { justify-content: center; }
    .cube-container { margin: 2rem auto; }
    .navbar { padding: 0.8rem 1.5rem; }
}

@media (max-width: 550px) {
    .cube { width: 180px; height: 180px; }
    .face { width: 180px; height: 180px; }
    .front { transform: translateZ(90px); }
    .back { transform: rotateY(180deg) translateZ(90px); }
    .right { transform: rotateY(90deg) translateZ(90px); }
    .left { transform: rotateY(-90deg) translateZ(90px); }
    .top { transform: rotateX(90deg) translateZ(90px); }
    .bottom { transform: rotateX(-90deg) translateZ(90px); }
}

/* ---------- SCROLL FADE-IN UTILITY ---------- */
.fade-in-on-scroll {
    opacity: 0;
    transition: opacity 0.9s ease-out;
}

.fade-in-on-scroll.visible {
    opacity: 1;
}

/* Desktop: Add transform animation */
@media (min-width: 769px) {
    .fade-in-on-scroll {
        transform: translateY(40px);
        transition: opacity 0.9s ease-out, transform 0.9s ease-out;
    }
    
    .fade-in-on-scroll.visible {
        transform: translateY(0);
    }
    
    /* Optional: staggered children */
    .fade-in-on-scroll.visible > * {
        animation: staggerFade 0.6s ease-out backwards;
    }
    .fade-in-on-scroll.visible > *:nth-child(1) { animation-delay: 0.1s; }
    .fade-in-on-scroll.visible > *:nth-child(2) { animation-delay: 0.25s; }
    .fade-in-on-scroll.visible > *:nth-child(3) { animation-delay: 0.4s; }
    .fade-in-on-scroll.visible > *:nth-child(4) { animation-delay: 0.55s; }
}

@keyframes staggerFade {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fade-in-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------- CRITICAL: PREVENT SCROLL RESET/JUMP ON MOBILE ---------- */
@media (max-width: 768px) {
    /* Disable smooth scroll ONLY on mobile to prevent jumps */
    html {
        scroll-behavior: auto !important; 
        -webkit-overflow-scrolling: touch;
    }
    
    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto !important; /* Changed from 'none' to 'auto' */
        overflow-y: auto !important;
    }

    /* Disable ALL transform-based animations on mobile */
    .fade-in-on-scroll {
        transform: none !important;
        transition: opacity 0.6s ease-out !important;
    }
    
    .fade-in-on-scroll.visible {
        transform: none !important;
        opacity: 1 !important;
    }
    
    /* Ensure sections flow naturally without centering */
    .hero-header,
    .filmstrip-section,
    .pricing1,
    .game-landing,
    .landing,
    .contact-section {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        min-height: auto !important;
        scroll-margin-top: 0 !important;
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
    }
    
    /* Remove any flex centering that causes re-alignment */
    body {
        display: block !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    /* Disable heavy background effects to save CPU */
    .floating-shape {
        display: none !important;
    }
    
    .animated-gradient {
        animation: none !important;
    }
    
    /* Reduce heavy box-shadows on mobile hover */
    .film-card:hover,
    .pricing1 .card:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
    }
}

/* ---------- MOBILE GPU ACCELERATION (SAFE) ---------- */
@media (max-width: 768px) {
    /* Only apply GPU acceleration to fixed/sticky elements */
    .sticky-header,
    .modal-container,
    .expanded-card {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}
/* ---------- FACEBOOK IN-APP BROWSER SCROLL FIX ---------- */

/* Detect Facebook browser and apply fixes */
@media (max-width: 768px) {
    /* Remove overscroll-behavior that breaks FB browser */
    body {
        overscroll-behavior-y: auto !important; /* Changed from 'none' */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    html {
        overflow-y: auto !important;
        scroll-behavior: auto !important;
    }
    
    /* Ensure sticky header doesn't block scroll */
    .sticky-header {
        position: -webkit-sticky !important;
        position: sticky !important;
    }
    
    /* Remove any transform that might lock scroll */
    body, html {
        transform: none !important;
    }
}

/* Explicit fix for Facebook browser detection */
body.fb-browser {
    overscroll-behavior-y: auto !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
}