/* =====================================================
   iPhone & iOS Safari Optimization Stylesheet
   =====================================================
   ALL rules are scoped to iPhone/iOS conditions only.
   Desktop layout is 100% untouched.

   Targeting methods used:
   - @supports (-webkit-touch-callout: none) — iOS Safari only
   - @media (max-width: 430px) — iPhone screen widths
   - @media (max-width: 768px) — mobile screens (combined with iOS checks)
   - @media (hover: none) and (pointer: coarse) — touch devices
   ===================================================== */

/* =====================================================
   1. iOS SAFE AREA — NOTCH & DYNAMIC ISLAND SUPPORT
   ===================================================== */

/* iPhone X, XS, 11 Pro, 12 mini, 13 mini — notch devices */
/* iPhone 14 Pro, 15 Pro, 15 Pro Max — Dynamic Island devices */
@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 430px) {
        /* Ensure nav clears the Dynamic Island / notch */
        nav {
            padding-top: max(3vw, env(safe-area-inset-top)) !important;
        }

        /* Hero section respects top safe area */
        .page1 .page1-slide-wrapper {
            padding-top: env(safe-area-inset-top);
        }

        /* Loader respects safe areas */
        .loader {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }

        /* Bottom nav gets proper safe area padding */
        .mobile-bottom-nav {
            padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
        }

        /* Floating Let's Talk button clears the notch/island */
        .mobile-lets-talk-btn {
            top: calc(12px + env(safe-area-inset-top));
            right: calc(12px + env(safe-area-inset-right));
        }

        /* Footer clears bottom nav + safe area */
        footer {
            padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        }

        /* Menu overlay respects safe areas */
        .menu.active {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

        /* Showreel controls avoid bottom safe area */
        .showreel-controls .controls-bottom {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* Landscape safe areas for iPhones with notch/island */
@supports (padding: env(safe-area-inset-left)) {
    @media (max-width: 896px) and (orientation: landscape) {
        body {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

        .mobile-bottom-nav {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

        nav {
            padding-left: max(5vw, env(safe-area-inset-left));
            padding-right: max(5vw, env(safe-area-inset-right));
        }
    }
}


/* =====================================================
   2. iOS SAFARI RENDERING FIXES
   ===================================================== */

/* Target iOS Safari specifically */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 430px) {
        /* Fix: iOS Safari flexbox min-height bug in column direction */
        .page2, .page4, .page5, .page7, .page9 {
            min-height: 0;
            -webkit-min-logical-height: 0;
        }

        /* Fix: iOS sticky positioning inside overflow containers */
        nav {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Fix: iOS Safari overflow clipping on border-radius elements */
        .page4 .page4-video .item {
            -webkit-mask-image: -webkit-radial-gradient(white, black);
            isolation: isolate;
        }

        /* Fix: iOS Safari backdrop-filter with border-radius */
        .mobile-bottom-nav {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        /* Fix: Prevent iOS Safari from auto-darkening text in dark mode */
        .page2 .page2-bottom .btm-text h2 span,
        .page5 .page5-bottom .btm-text h2 span,
        .page4 .page4-text h2,
        .page9 .page9-text h4,
        footer .footer-top h2,
        footer .footer-top h4 {
            -webkit-text-fill-color: currentColor;
        }

        /* Fix: iOS Safari line-height collapsing on inline spans */
        .page2 .page2-bottom .btm-text h2 .up span,
        .page5 .page5-bottom .btm-text h2 .up span {
            display: inline;
            -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
        }
    }
}


/* =====================================================
   3. FONT RENDERING — iOS SPECIFIC
   ===================================================== */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 430px) {
        /* Optimized font rendering for iOS retina screens */
        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        /* Prevent iOS auto text-size-adjust on orientation change */
        html {
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        /* Prevent iOS Safari from enlarging small text */
        p, span, h1, h2, h3, h4, h5, h6, a, li, label {
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }
    }
}


/* =====================================================
   4. TOUCH INTERACTION OPTIMIZATION
   ===================================================== */

/* Apply only on touch devices (all iPhones) */
@media (hover: none) and (pointer: coarse) and (max-width: 430px) {
    /* Ensure 44px minimum tap targets (Apple HIG) */
    a, button, [role="button"], input[type="submit"],
    .nav-cta, .mobile-nav-item, .showreel-trigger,
    .play-pause-btn, .volume-btn, .fullscreen-btn,
    .showreel-close, .scroll-down, .work-button-wrapper,
    .philosophy-cta a, .emotions-cta a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover-dependent visual effects — use active states instead */
    .hover-text .text-hover {
        display: none !important;
    }
    .hover-text .text-default {
        display: inline !important;
    }

    /* Active/pressed state for touch feedback */
    a:active, button:active, [role="button"]:active {
        opacity: 0.7;
        transition: opacity 0.1s ease;
    }

    .work-button-wrapper:active,
    .philosophy-cta a:active,
    .emotions-cta a:active,
    .showreel-trigger:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }

    /* Prevent accidental double-tap zoom on buttons */
    button, a, [role="button"], .mobile-nav-item {
        touch-action: manipulation;
    }

    /* Remove 300ms tap delay on all interactive elements */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Increase footer link tap areas */
    footer .footer-top .second .span span a {
        padding: 8px 4px;
        display: inline-block;
        min-height: 44px;
        line-height: 28px;
    }

    /* Improve mobile nav item spacing for easier tapping */
    .mobile-bottom-nav .mobile-nav-item {
        padding: 6px 2px;
    }
}


/* =====================================================
   5. PREVENT HORIZONTAL SCROLLING ON iPHONES
   ===================================================== */

@media (max-width: 430px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }

    /* Prevent any element from causing horizontal overflow */
    .main, .page1, .page2, .page3, .page4, .page5,
    .page7, .page8, .page9, footer {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Constrain images and videos to viewport */
    img, video {
        max-width: 100%;
    }

    /* Constrain the photo slider */
    .photo-slider {
        max-width: 100vw;
        overflow: hidden;
    }
}


/* =====================================================
   6. DARK MODE PROTECTION — iPHONE
   ===================================================== */

/* Prevent iOS forced dark mode from breaking visual elements */
@supports (-webkit-touch-callout: none) {
    @media (prefers-color-scheme: dark) and (max-width: 430px) {
        /* Protect images from unwanted dark mode filters */
        img:not([src*=".svg"]) {
            filter: none !important;
        }

        /* Protect videos */
        video {
            filter: none !important;
        }

        /* Ensure logo visibility in dark mode */
        .footer-logo-mobile,
        .footer-logo-pc,
        nav img, nav svg {
            filter: none !important;
            opacity: 1 !important;
        }

        /* Ensure nav text remains visible */
        nav a, nav h2 a {
            color: #fff;
            -webkit-text-fill-color: #fff;
        }

        /* Mobile bottom nav dark mode visibility */
        .mobile-bottom-nav {
            background: rgba(10, 10, 10, 0.95) !important;
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            backdrop-filter: blur(24px) saturate(180%);
            border-top: 0.5px solid rgba(255, 255, 255, 0.1);
        }

        .mobile-bottom-nav .mobile-nav-item {
            color: rgba(255, 255, 255, 0.6);
        }

        .mobile-bottom-nav .mobile-nav-item.active {
            color: #f53607;
        }

        .mobile-bottom-nav .mobile-nav-item.active i {
            color: #f53607;
        }

        /* Floating button dark mode */
        .mobile-lets-talk-btn {
            background: linear-gradient(135deg, #f53607, #ff6b35) !important;
            color: #fff !important;
        }

        /* Loader text visibility in dark mode */
        .loader h2 span {
            color: #fff;
            -webkit-text-fill-color: #fff;
        }

        /* Showreel controls dark mode */
        .showreel-controls {
            color: #fff;
        }
    }

    /* Light mode protection — ensure elements stay readable */
    @media (prefers-color-scheme: light) and (max-width: 430px) {
        /* Ensure dark-background pages still render correctly */
        .page1, .page3 {
            color: #fff;
        }

        /* Services/About page text readability */
        body.services .svc-item,
        body.services .intro-line,
        body.about .about-hero .about-sub,
        body.about .about-intro-inner p {
            -webkit-text-fill-color: currentColor;
        }
    }
}


/* =====================================================
   7. SAFARI SMOOTH SCROLLING FIXES
   ===================================================== */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 430px) {
        /* Enable momentum scrolling for iOS Safari */
        .main {
            -webkit-overflow-scrolling: touch;
            overflow-y: auto;
        }

        /* Fix iOS Safari rubber-band overscroll on body */
        html {
            overscroll-behavior-y: none;
        }

        body {
            overscroll-behavior-y: none;
        }

        /* Smooth scroll-snap for swiper/slider sections */
        .photo-slider .slider-track {
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
        }

        .photo-slider .slider-track .slide {
            scroll-snap-align: center;
        }

        /* Fix iOS scroll position restoration on back navigation */
        html {
            scroll-behavior: auto;
        }
    }
}


/* =====================================================
   8. GPU & ANIMATION OPTIMIZATION FOR MOBILE
   ===================================================== */

@media (max-width: 430px) {
    /* Promote only critical elements to GPU layers */
    nav,
    .mobile-bottom-nav,
    .mobile-lets-talk-btn,
    .showreel-experience {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }

    /* Remove will-change from non-animated elements to save GPU memory */
    .page1 img,
    .page2,
    .page5,
    .page7,
    .page8,
    .page9,
    footer {
        will-change: auto;
    }

    /* Reduce composite layers for better performance */
    .page4 .page4-video .item video,
    .page4 .page4-video .item img {
        will-change: auto;
        -webkit-transform: none;
        transform: none;
    }

    /* Optimize animation performance */
    .loader h2 span,
    .page-transition {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}


/* =====================================================
   9. RETINA DISPLAY OPTIMIZATION
   ===================================================== */

/* 2x Retina (iPhone 8, SE, XR, 11) */
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 430px) {
    /* Crisp text rendering on retina */
    body {
        -webkit-font-smoothing: subpixel-antialiased;
    }

    /* Thin hairline borders for retina (0.5px) */
    .mobile-bottom-nav {
        border-top-width: 0.5px;
    }

    .page5 .page5-top-border,
    .page8 .page8-top-border {
        height: 0.5px;
    }
}

/* 3x Retina (iPhone X+, 12, 13, 14, 15 series) */
@media (-webkit-min-device-pixel-ratio: 3) and (max-width: 430px) {
    /* High-quality image rendering for 3x displays */
    .footer-logo-mobile,
    .footer-logo-pc {
        image-rendering: auto;
        image-rendering: -webkit-optimize-contrast;
    }

    /* Ensure hero image is crisp on 3x */
    .page1 img {
        image-rendering: auto;
    }

    /* Ultra-thin borders for 3x density */
    .mobile-bottom-nav {
        border-top-width: 0.333px;
    }
}


/* =====================================================
   10. iPHONE MODEL-SPECIFIC BREAKPOINTS
   ===================================================== */

/* iPhone SE (3rd gen) — 375x667 @2x */
@media (max-width: 375px) and (max-height: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    /* Smaller hero text for SE's compact screen */
    .page1 .inner-content h1 {
        font-size: 13vw;
    }

    .agency-text p {
        font-size: clamp(13px, 3.2vw, 16px);
    }

    /* Compact spacing for SE */
    .page2 .page2-bottom {
        padding: 2vw 4vw;
    }

    .page5 .page5-bottom {
        padding: 2vw 4vw;
    }

    /* Smaller showreel play icon */
    .showreel-play-icon {
        width: 50px;
        height: 50px;
    }

    .page3 .page3-text h1 {
        font-size: clamp(24px, 7vw, 36px);
    }

    /* Compact footer for SE */
    footer .footer-top {
        padding: 6vw 4vw;
    }

    footer .footer-top .first .first-top h2 {
        font-size: clamp(16px, 7vw, 24px);
    }
}

/* iPhone 12 / 13 / 14 — 390x844 @3x */
@media (min-width: 385px) and (max-width: 395px) and (-webkit-min-device-pixel-ratio: 3) {
    .page1 .inner-content h1 {
        font-size: 13.5vw;
    }

    .page3 {
        min-height: 45vh;
    }

    .page4 .page4-video .item {
        height: 52vw;
    }
}

/* iPhone 14 Pro / 15 / 15 Pro — 393x852 @3x */
@media (min-width: 390px) and (max-width: 400px) and (min-height: 840px) and (-webkit-min-device-pixel-ratio: 3) {
    /* Slightly larger hero for Pro screens */
    .page1 {
        min-height: 100dvh;
    }

    /* Take advantage of the taller screen */
    .page3 {
        min-height: 48vh;
    }
}

/* iPhone 14 Pro Max / 15 Plus / 15 Pro Max — 430x932 @3x */
@media (min-width: 425px) and (max-width: 435px) and (-webkit-min-device-pixel-ratio: 3) {
    .page1 .inner-content h1 {
        font-size: 12.5vw;
    }

    .page2 .page2-bottom .btm-text h2 span {
        font-size: clamp(21px, 6vw, 36px);
    }

    /* Larger tap targets for bigger screen */
    .showreel-play-icon {
        width: 70px;
        height: 70px;
    }

    .showreel-play-icon i {
        font-size: 26px;
    }

    .page4 .page4-video .item {
        height: 50vw;
    }

    /* Optimize footer layout for wider screen */
    footer .footer-top .second {
        flex-direction: row;
    }
}

/* iPhone Mini models (12 mini / 13 mini) — 360x780 @3x */
@media (max-width: 365px) and (-webkit-min-device-pixel-ratio: 3) {
    .page1 .inner-content h1 {
        font-size: 13vw;
    }

    /* Compact menu for mini screens */
    .menu .menu-sec .links h3 {
        font-size: clamp(24px, 7vw, 40px);
    }

    /* Smaller video section */
    .page3 {
        min-height: 40vh;
    }

    .page4 .page4-video .item {
        height: 58vw;
    }
}


/* =====================================================
   11. iOS LANDSCAPE MODE FIXES
   ===================================================== */

@supports (-webkit-touch-callout: none) {
    @media (max-height: 430px) and (orientation: landscape) {
        /* Compact hero in landscape */
        .page1 {
            min-height: 100dvh;
        }

        .page1 .inner-content h1 {
            font-size: 8vw;
        }

        /* Hide bottom nav in landscape to maximize content area */
        .mobile-bottom-nav {
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }

        /* Reduce showreel height */
        .page3 {
            min-height: 100dvh;
            height: 100dvh;
        }

        /* Compact nav in landscape */
        nav {
            padding: 1.5vw 3vw;
        }

        /* Landscape-specific safe areas */
        .main {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
    }
}


/* =====================================================
   12. iOS PWA / STANDALONE MODE
   ===================================================== */

/* When added to Home Screen as PWA */
@media (display-mode: standalone) and (max-width: 430px) {
    /* Remove Safari chrome-specific adjustments */
    nav {
        padding-top: env(safe-area-inset-top) !important;
    }

    /* Full height without browser chrome */
    .page1 {
        min-height: 100vh;
    }

    /* No bottom nav duplication needed in PWA */
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }
}


/* =====================================================
   13. LAZY LOADING IMAGE PLACEHOLDERS — iPHONE
   ===================================================== */

@media (max-width: 430px) {
    /* Smooth fade-in for lazy-loaded images */
    img[loading="lazy"] {
        opacity: 0;
        transition: opacity 0.4s ease-in;
    }

    img[loading="lazy"].loaded,
    img[loading="lazy"][complete] {
        opacity: 1;
    }

    /* Placeholder background while images load */
    .page4 .page4-video .item {
        background-color: #1a1a1a;
    }
}


/* =====================================================
   14. iOS FORM INPUT FIXES
   ===================================================== */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 430px) {
        /* Prevent zoom on input focus (requires >=16px font) */
        input, select, textarea {
            font-size: 16px !important;
        }

        /* Fix iOS quirky input styling */
        input, textarea {
            -webkit-appearance: none;
            -webkit-border-radius: 0;
            border-radius: 0;
        }

        /* Fix iOS date picker overlap issues */
        input[type="date"],
        input[type="time"] {
            -webkit-appearance: none;
            min-height: 44px;
        }

        /* Prevent iOS keyboard from pushing fixed elements */
        .mobile-bottom-nav {
            position: fixed;
            bottom: 0;
        }
    }
}


/* =====================================================
   15. UNIVERSAL PHONE SCROLL RECOVERY
   =====================================================
   Ensures vertical scrolling remains available across
   mobile browsers while preserving intentional locks.
   ===================================================== */

@media (max-width: 900px) and (hover: none) and (pointer: coarse) {
    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100%;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.loader-active):not(.modal-open):not(.showreel-open) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100%;
        position: relative !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior-y: auto !important;
    }

    .main {
        height: auto !important;
        min-height: 100%;
        overflow: visible !important;
        transform: none !important;
    }
}

/* =====================================================
   MOBILE SCROLL FIX - FORCE ENABLE ON ALL MOBILES
   This overrides any blocking styles after page load
   ===================================================== */
@media (max-width: 768px) {
    /* Always allow scroll on html regardless of state */
    html {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Allow body scroll after loader completes - using broad targeting */
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100% !important;
        position: relative !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
    
    /* Lock scroll ONLY when these overlays are explicitly active */
    body.loader-active,
    body.modal-open,
    body.showreel-open,
    body.menu-active {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        touch-action: none !important;
    }
    
    /* Main container must be scrollable */
    .main {
        overflow: visible !important;
        height: auto !important;
        min-height: 100% !important;
        transform: none !important;
        position: relative !important;
    }
}