/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Performance-optimized base */
body {
    font-family: 'Poppins', sans-serif;
    background: #333333;
    color: #FFFFFF;
    overflow-x: hidden;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 90px; /* Header height for desktop */
}

body.loaded {
    opacity: 1;
}

/* ========== IMPROVED THEATER HEADER ========== */
.theater-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(180deg, #000000 0%, #0A0A0A 40%, #000000 100%);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-100%);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 20px rgba(200, 83, 0, 0.3), 
                0 8px 40px rgba(200, 83, 0, 0.15);
    will-change: transform, opacity;
}

.theater-header.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Brighter curtain effect */
.curtain-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(90deg, 
        #2A2A2A 0%, 
        #3D3D3F 15%, 
        #5A5A5C 25%, 
        #7B7B7D 35%, 
        #9B9B9D 45%, 
        #EEEEEE 50%, 
        #9B9B9D 55%, 
        #7B7B7D 65%, 
        #5A5A5C 75%, 
        #3D3D3F 85%, 
        #2A2A2A 100%);
    background-image: 
        repeating-linear-gradient(90deg, 
            rgba(0,0,0,0.2) 0px, 
            rgba(0,0,0,0.2) 3px, 
            transparent 3px, 
            transparent 6px),
        linear-gradient(90deg,
            transparent 0%,
            transparent 25%,
            rgba(200,83,0,0.15) 45%,
            rgba(200,83,0,0.2) 50%,
            rgba(200,83,0,0.15) 55%,
            transparent 75%,
            transparent 100%);
    background-size: 12px 100%, 100% 100%;
    animation: curtainScroll 2.5s linear infinite;
    box-shadow: inset 0 -1px 2px rgba(0,0,0,0.15);
    will-change: background-position;
}

@keyframes curtainScroll {
    0% { background-position: 0 0; }
    100% { background-position: 18px 0; }
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    height: calc(100% - 12px);
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    position: relative;
    z-index: 10;
}

.logo-section {
    display: flex;
    align-items: center;
}

.logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.logo-text:hover {
    color: #D46E25;
    text-shadow: 0 0 8px rgba(212, 110, 37, 0.5);
}

.atmospheric-nav {
    position: relative;
}

.nav-container {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(61, 61, 63, 0.3);
    border-radius: 25px;
    padding: 5px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(200, 83, 0, 0.2);
}

.nav-link {
    display: block;
    padding: 12px 20px;
    color: #CCCCCC;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Active state */
.nav-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(200, 83, 0, 0.8), 
        rgba(212, 110, 37, 0.8));
    border-radius: 20px;
    z-index: -1;
}

.nav-link.active {
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Fixed hover effect - text moves up more */
.nav-link:not(.active) span {
    display: block;
    transition: transform 0.3s ease;
    will-change: transform;
}

.nav-link:not(.active)::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D46E25;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    will-change: transform;
}

/* Increased movement to -150% so original text completely disappears */
.nav-link:not(.active):hover span {
    transform: translateY(-150%);
}

.nav-link:not(.active):hover::after {
    transform: translateY(0);
}

/* Smaller rectangular mobile trigger */
.mobile-trigger {
    display: none;
    width: 38px;
    height: 30px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(20, 20, 20, 0.7));
    border: 1.5px solid rgba(200, 83, 0, 0.4);
    border-radius: 8px; /* Changed from circle to rectangle */
    cursor: pointer;
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(200, 83, 0, 0.2);
}

.mobile-trigger:hover {
    border-color: #C85300;
    background: linear-gradient(135deg, rgba(200, 83, 0, 0.15), rgba(212, 110, 37, 0.15));
    box-shadow: 0 4px 16px rgba(200, 83, 0, 0.4);
    transform: translateY(-1px);
}

.trigger-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.trigger-line {
    width: 16px; /* Reduced from 20px */
    height: 2px;
    background: #FFFFFF;
    margin: 3px 0; /* Reduced margin */
    transition: all 0.3s ease;
    border-radius: 1px;
    will-change: transform, opacity;
}

.mobile-trigger:hover .trigger-line {
    background: #D46E25;
}

.mobile-trigger.active .trigger-line {
    background: #D46E25;
}

.mobile-trigger.active .trigger-line:nth-child(1) {
    transform: rotate(45deg) translate(3px, 3px);
}

.mobile-trigger.active .trigger-line:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.mobile-trigger.active .trigger-line:nth-child(3) {
    transform: rotate(-45deg) translate(3px, -3px);
}

.cinema-mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #000000 0%, #0A0A0A 50%, #000000 100%);
    z-index: 999;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    will-change: transform;
}

.cinema-mobile-nav.active {
    transform: translateY(0);
}

.cinema-mobile-nav::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background-image: none;
    opacity: 0;
}

.mobile-nav-content {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: 50px 0 0 0;
    margin: 0;
}

.mobile-nav-list {
    list-style: none;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease 0.1s;
    padding: 0;
    margin: 0;
}

.cinema-mobile-nav.active .mobile-nav-list {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-item {
    margin-bottom: 20px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
}

.cinema-mobile-nav.active .mobile-nav-item {
    transform: translateY(0);
    opacity: 1;
}

.mobile-nav-item:nth-child(1) { transition-delay: 0.1s; }
.mobile-nav-item:nth-child(2) { transition-delay: 0.2s; }
.mobile-nav-item:nth-child(3) { transition-delay: 0.3s; }
.mobile-nav-item:nth-child(4) { transition-delay: 0.4s; }

.mobile-nav-link {
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 18px 40px;
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

/* New mobile hover effect - different from active state */
.mobile-nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(200, 83, 0, 0.1), 
        rgba(212, 110, 37, 0.15));
    transition: width 0.4s ease;
    border-radius: 12px;
    z-index: -1;
}

.mobile-nav-link:hover::before {
    width: 100%;
}

/* Active state for mobile - maintains the bottom line */
.mobile-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80%;
    height: 3px;
    background: linear-gradient(90deg, #C85300, #D46E25);
    transform: translateX(-50%);
    border-radius: 2px;
}

.mobile-nav-link.active {
    color: #D46E25;
    border-color: rgba(200, 83, 0, 0.5);
    background: linear-gradient(135deg, rgba(200, 83, 0, 0.08), rgba(212, 110, 37, 0.08));
}

/* Hover effect - only changes text color and adds subtle background */
.mobile-nav-link:not(.active):hover {
    color: #D46E25;
    transform: translateY(-2px);
}

/* ========== FILM LOADING ANIMATION ========== */
.film-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 1s ease-out, visibility 1s ease-out;
    will-change: opacity;
}

.film-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.film-reel-loader {
    width: 120px;
    height: 120px;
    border: 8px solid #333;
    border-radius: 50%;
    position: relative;
    animation: reelSpin 2s linear infinite;
    will-change: transform;
}

.film-reel-loader::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: #8B4513;
    border-radius: 50%;
}

.film-reel-loader::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #D2691E;
    border-radius: 50%;
    animation: filmHole 2s linear infinite;
    will-change: opacity;
}

@keyframes reelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes filmHole {
    0%, 12.5% { opacity: 1; }
    12.51%, 24.99% { opacity: 0.3; }
    25%, 37.5% { opacity: 1; }
    37.51%, 49.99% { opacity: 0.3; }
    50%, 62.5% { opacity: 1; }
    62.51%, 74.99% { opacity: 0.3; }
    75%, 87.5% { opacity: 1; }
    87.51%, 100% { opacity: 0.3; }
}

.loading-text {
    margin-top: 30px;
    font-size: 1rem;
    color: #8B4513;
    animation: pulse 2s ease-in-out infinite;
    will-change: opacity;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ========== SECTION STYLES ========== */
.section {
    padding: 80px 0;
    border-bottom: 1px solid #333;
}

.section-title {
    font-family: 'Bebas Neue', sans-serif;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 60px;
    position: relative;
    color: #FFFFFF;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, #C85300, #D46E25);
}

/* ========== FILM REEL SECTION - DESIGN PORTFOLIO ========== */
.reel-section {
    background: #1F1F1F;
    position: relative;
    padding-top: 100px;
}

.reel-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.film-reel {
    position: relative;
    width: 550px;
    height: 550px;
    border: 6px solid #3f3f3f;
    border-radius: 50%;
    background: #323233;
    flex-shrink: 0;
}

.reel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at center, #2A2A2A 0%, #1A1A1A 70%, #0A0A0A 100%);
    border-radius: 50%;
    border: 2px solid #C85300;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #D46E25;
    text-align: center;
    line-height: 1.1;
    z-index: 11;
    box-shadow: 
        inset 0 0 20px rgba(0,0,0,0.8),
        0 0 30px rgba(200, 83, 0, 0.3);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.reel-center span {
    position: relative;
    z-index: 12;
}

.reel-center::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(212, 110, 37, 0.1) 0%, transparent 50%),
        conic-gradient(from 0deg, transparent 0deg, rgba(200, 83, 0, 0.05) 45deg, transparent 90deg, rgba(200, 83, 0, 0.05) 135deg, transparent 180deg, rgba(200, 83, 0, 0.05) 225deg, transparent 270deg, rgba(200, 83, 0, 0.05) 315deg, transparent 360deg);
    animation: filmReelRotate 8s linear infinite;
    pointer-events: none;
}

@keyframes filmReelRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.reel-center::after {
    display: none;
}

/* Optimized reel projects - unified behavior */
.reel-project {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 3px solid #3f3f3f;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    background: #29292b;
    will-change: transform, border-color;
    outline: none;
}

.reel-project img {
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.reel-project img.loaded {
    opacity: 1;
    animation: darkroomDevelop 1.2s ease-out;
}

@keyframes darkroomDevelop {
    from { 
        opacity: 0;
        transform: scale(0.95);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

/* Mathematically equal distribution for 7 projects around circle */
.reel-project:nth-child(1) { 
    top: 5%; 
    left: 50%; 
    transform: translateX(-50%);
}

.reel-project:nth-child(2) { 
    top: 15%; 
    right: 15%;
}

.reel-project:nth-child(3) { 
    top: 45%; 
    right: 5%;
}

.reel-project:nth-child(4) { 
    bottom: 10%; 
    right: 25%;
}

.reel-project:nth-child(5) { 
    bottom: 10%; 
    left: 25%;
}

.reel-project:nth-child(6) { 
    top: 45%; 
    left: 5%;
}

.reel-project:nth-child(7) { 
    top: 15%; 
    left: 15%;
}

/* Unified hover effects - identical timing */
.reel-project:nth-child(1):hover { 
    transform: translateX(-50%) scale(1.25) rotate(8deg);
}

.reel-project:nth-child(2):hover,
.reel-project:nth-child(3):hover,
.reel-project:nth-child(4):hover,
.reel-project:nth-child(5):hover,
.reel-project:nth-child(6):hover,
.reel-project:nth-child(7):hover { 
    transform: scale(1.25) rotate(8deg);
}

/* Unified active states */
.reel-project:nth-child(1).active { 
    transform: translateX(-50%) scale(1.2) rotate(5deg);
}

.reel-project:nth-child(2).active,
.reel-project:nth-child(3).active,
.reel-project:nth-child(4).active,
.reel-project:nth-child(5).active,
.reel-project:nth-child(6).active,
.reel-project:nth-child(7).active { 
    transform: scale(1.2) rotate(5deg);
}

/* Camera info panel */
.camera-info-panel {
    flex: 1;
    max-width: 450px;
    position: relative;
}

.camera-body {
    background: #323233;
    border: 3px solid #3f3f3f;
    border-radius: 15px;
    padding: 30px;
    min-height: 380px;
    position: relative;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.camera-body::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 20px;
    width: 60px;
    height: 25px;
    background: #3f3f3f;
    border-radius: 5px 5px 0 0;
}

.camera-body::after {
    content: '';
    position: absolute;
    top: -20px;
    right: 25px;
    width: 30px;
    height: 30px;
    background: #C85300;
    border-radius: 50%;
    border: 3px solid #3f3f3f;
}

.recording-light {
    position: absolute;
    top: -25px;
    left: 50px;
    width: 12px;
    height: 12px;
    background: #ff0000;
    border-radius: 50%;
    animation: recordingBlink 2s infinite;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
    will-change: opacity;
}

@keyframes recordingBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.camera-lens {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    background: #333;
    border-radius: 50%;
    border: 3px solid #8B4513;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.aperture {
    width: 24px;
    height: 24px;
    background: #1A1A1A;
    border-radius: 50%;
    position: relative;
    transition: all 0.5s ease;
    will-change: transform;
}

.aperture::before {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg, #D2691E 0deg 45deg, transparent 45deg 90deg, #D2691E 90deg 135deg, transparent 135deg 180deg, #D2691E 180deg 225deg, transparent 225deg 270deg, #D2691E 270deg 315deg, transparent 315deg 360deg);
    border-radius: 50%;
    opacity: 0.6;
    animation: apertureRotate 4s linear infinite;
    will-change: transform;
}

@keyframes apertureRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.camera-lens:hover .aperture {
    transform: scale(1.5);
    background: #333;
}

.viewfinder {
    width: 100%;
    height: 300px;
    background: #000;
    border: 3px solid #444;
    border-radius: 8px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.viewfinder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, transparent 85%, rgba(68, 68, 68, 0.5) 90%, rgba(68, 68, 68, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
}

.viewfinder.focusing::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 2px solid #D2691E;
    border-radius: 4px;
    animation: cameraFocus 1s ease-in-out;
    z-index: 2;
    will-change: transform, opacity;
}

@keyframes cameraFocus {
    0% { 
        width: 80px; 
        height: 80px; 
        opacity: 0; 
    }
    50% { 
        width: 60px; 
        height: 60px; 
        opacity: 1; 
    }
    100% { 
        width: 40px; 
        height: 40px; 
        opacity: 0; 
    }
}

.info-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #666;
    font-style: italic;
    flex-direction: column;
    gap: 10px;
}

.project-details {
    display: none;
    height: 100%;
    padding: 0;
}

.project-details.active {
    display: flex;
    flex-direction: column;
    animation: fadeInScale 0.5s ease;
    height: 100%;
    padding: 0;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.project-thumbnail {
    width: 100%;
    height: 165px;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 0;
    flex-shrink: 0;
}

.project-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-thumbnail img.loaded {
    opacity: 1;
    animation: darkroomDevelop 1.2s ease-out;
}

.project-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 5px;
    color: #C85300;
    flex-shrink: 0;
    padding: 12px 20px 0 20px;
}

.project-category {
    font-size: 0.8rem;
    color: #d46e25;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    flex-shrink: 0;
    padding: 0 20px;
}

.project-description {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #CCCCCC;
    flex: 1;
    overflow: hidden;
    padding: 0 20px 15px 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.explore-instruction {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: #D46E25;
    text-align: center;
    opacity: 0.85;
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(200, 83, 0, 0.3);
    backdrop-filter: blur(5px);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    white-space: nowrap;
    width: auto;
    max-width: 90%;
}

.explore-instruction:hover {
    opacity: 1;
    background: rgba(200, 83, 0, 0.1);
    border-color: rgba(200, 83, 0, 0.5);
    transform: translateX(-50%) translateY(-2px);
}

/* ========== MOBILE DESIGN STRIP ========== */
.mobile-design-strip {
    display: none;
    background: #1F1F1F;
    padding: 40px 0;
}

/* Enhanced film strip for mobile */
.film-strip-enhanced {
    position: relative;
    background: #222;
    padding: 40px 0;
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 12px;
    border: 3px solid #333;
}

.film-strip-enhanced::before,
.film-strip-enhanced::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    background-image: repeating-linear-gradient(0deg, 
        #0A0A0A 0px, #0A0A0A 18px, 
        #888888 18px, #888888 30px);
    z-index: 2;
    will-change: background-position;
    opacity: 1;
}

.film-strip-enhanced::before { 
    left: 0; 
    animation: perforationMove 4.5s linear infinite;
}

.film-strip-enhanced::after { 
    right: 0; 
    animation: perforationMove 4.5s linear infinite reverse;
}

@keyframes perforationMove {
    from { background-position: 0 0; }
    to { background-position: 0 50px; }
}

.enhanced-frames-container {
    overflow: visible;
    position: relative;
    cursor: grab;
}

.enhanced-frames-container:active {
    cursor: grabbing;
}

.enhanced-frames {
    display: flex;
    gap: 30px;
    padding: 0 70px;
    transition: transform 0.5s ease;
    will-change: transform;
}

.enhanced-frame {
    flex: 0 0 350px;
    height: 340px;
    background: #29292b;
    border: 3px solid #3f3f3f;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease;
    overflow: hidden;
    will-change: transform;
}

.enhanced-frame:hover {
    transform: scale(1.03);
    border-color: #C85300;
    box-shadow: 0 15px 30px rgba(0,0,0,0.6), 0 0 40px rgba(200, 83, 0, 0.3);
}

.enhanced-frame-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
}

.enhanced-frame-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.8s ease-in-out;
    opacity: 0;
    will-change: transform;
}

.enhanced-frame-image img.loaded {
    opacity: 1;
    animation: darkroomDevelop 1.2s ease-out;
}

.enhanced-frame:hover .enhanced-frame-image img {
    transform: scale(1.08);
}

.frame-overlay {
    position: absolute;
    inset: 0;
    background: rgba(139, 69, 19, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex-direction: column;
    gap: 15px;
    will-change: opacity;
}

.enhanced-frame:hover .frame-overlay {
    opacity: 1;
}

.overlay-btn {
    padding: 10px 20px;
    background: #FFFFFF;
    color: #8B4513;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    will-change: transform;
}

.overlay-btn:hover {
    background: #D2691E;
    color: #FFFFFF;
    transform: scale(1.05);
}

.enhanced-frame-info {
    padding: 15px 15px 8px 15px;
    height: 145px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.enhanced-frame-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 2px;
    color: #FFFFFF;
}

.enhanced-frame-category {
    font-size: 0.8rem;
    color: #C85300;
    font-weight: 500;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.enhanced-frame-description {
    font-size: 0.85rem;
    color: #CCCCCC;
    line-height: 1.4;
    overflow: visible;
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 768px) {
    /* Header adjustments */
    .atmospheric-nav {
        display: none;
    }

    .mobile-trigger {
        display: block;
    }

    .header-content {
        padding: 0 25px;
    }

    .logo-text {
        font-size: 1.2rem;
    }

    .theater-header {
        height: 75px;
        box-shadow: 0 3px 15px rgba(200, 83, 0, 0.25), 
                    0 6px 30px rgba(200, 83, 0, 0.12);
    }

    body {
        padding-top: 75px;
    }

   .cinema-mobile-nav {
        top: 0;
    }

    .mobile-nav-link {
        font-size: 1.6rem;
        letter-spacing: 2px;
        padding: 16px 35px;
    }

    /* Section adjustments */
    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    
    .reel-section {
        padding-top: 60px;
    }

    /* Mobile trigger adjustments */
    .mobile-trigger {
        width: 36px;
        height: 28px;
    }

    .trigger-line {
        width: 14px;
    }
}

@media (max-width: 480px) {
    .theater-header {
        height: 65px;
        box-shadow: 0 2px 12px rgba(200, 83, 0, 0.2), 
                    0 4px 25px rgba(200, 83, 0, 0.1);
    }

    body {
        padding-top: 65px;
    }

    .cinema-mobile-nav {
        top: 0;
    }

    .header-content {
        padding: 0 20px;
    }

    .section-title {
        font-size: 1.8rem;
    }
    
    .reel-section {
        padding-top: 40px;
    }

    /* Smaller mobile trigger for small screens */
    .mobile-trigger {
        width: 34px;
        height: 26px;
    }

    .trigger-line {
        width: 12px;
        margin: 2.5px 0;
    }

    .mobile-nav-link {
        font-size: 1.4rem;
        letter-spacing: 2px;
        padding: 14px 30px;
    }
}

/* Tablet and mobile reel optimization */
@media (max-width: 1024px) {
    .reel-container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .film-reel {
        width: 450px;
        height: 450px;
    }

    .reel-project {
        width: 80px;
        height: 80px;
    }

    .reel-center {
        width: 80px;
        height: 80px;
        font-size: 0.7rem;
    }

    .camera-info-panel {
        max-width: 100%;
    }
}

/* Mobile strip display optimization */
@media (max-width: 480px), (max-width: 768px), (max-width: 834px), (max-width: 1024px) and (orientation: portrait) {
    .reel-section .reel-container {
        display: none;
    }

    .mobile-design-strip {
        display: block;
        height: 90vh;
        overflow: hidden;
        margin-bottom: -40px;
    }

    .mobile-design-strip .film-strip-enhanced {
        margin: 0 20px;
        max-width: calc(100% - 40px);
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .mobile-design-strip .enhanced-frames-container {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mobile-design-strip .enhanced-frames-container::-webkit-scrollbar {
        display: none;
    }

    .mobile-design-strip .enhanced-frames {
        flex-direction: column;
        padding: 20px 30px;
        gap: 20px;
        min-height: 100%;
        transform: none !important;
    }

    .mobile-design-strip .enhanced-frame {
        flex: none;
        width: calc(100% - 60px);
        max-width: 300px;
        margin: 0 auto;
        height: 310px;
        scroll-snap-align: start;
    }

    .mobile-design-strip .enhanced-frame-image {
        height: 180px;
    }

    .mobile-design-strip .enhanced-frame-info {
        height: 120px;
        padding: 12px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 4px;
    }

    .mobile-design-strip .enhanced-frame-title {
        font-size: 1rem;
        margin-bottom: 2px;
    }

    .mobile-design-strip .enhanced-frame-category {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }

    .mobile-design-strip .enhanced-frame-description {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    /* Enhanced mobile touch feedback */
    .mobile-design-strip .enhanced-frame:active {
        transform: scale(1.03) !important;
        border-color: #8B4513 !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.6), 0 0 40px rgba(255, 140, 0, 0.3) !important;
        transition: all 0.2s ease !important;
    }
}

/* Performance optimizations for low-end devices */
@media (max-width: 768px) {
    * {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .film-strip-enhanced::before,
    .film-strip-enhanced::after {
        animation: perforationMove 4.5s linear infinite;
    }
    
    .film-strip-enhanced::after {
        animation: perforationMove 4.5s linear infinite reverse;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .film-loader {
        animation: none;
    }
    
    .recording-light {
        animation: none;
        opacity: 1;
    }
    
    .curtain-top {
        animation: none;
    }
    
    .aperture::before {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .reel-project {
        border-width: 4px;
    }
    
    .nav-link {
        border: 1px solid transparent;
    }
    
    .nav-link:hover,
    .nav-link:focus {
        border-color: #D46E25;
    }
}

/* Focus styles for accessibility */
.reel-project:focus,
.nav-link:focus,
.mobile-nav-link:focus,
.enhanced-frame:focus {
    outline: none;
}

.mobile-trigger:focus {
    outline: none;
}

/* Print styles */
@media print {
    .theater-header,
    .cinema-mobile-nav,
    .film-loader {
        display: none;
    }
    
    body {
        padding-top: 0;
        background: white;
        color: black;
    }
    
    .section {
        page-break-inside: avoid;
    }
}

/* ========== CINEMATIC TRANSITION ========== */
.cinematic-transition {
    height: 60px;
    background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 25%, #2D1B10 50%, #1A1A1A 75%, #0A0A0A 100%);
    position: relative;
    overflow: hidden;
    border-top: 2px solid rgba(200, 83, 0, 0.3);
    border-bottom: 2px solid rgba(200, 83, 0, 0.3);
}

.transition-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.film-strip-decorative {
    display: flex;
    gap: 20px;
    opacity: 0.6;
    animation: filmStripFloat 4s ease-in-out infinite;
    will-change: transform;
}

/* ADD THIS MOBILE FIX */
@media (max-width: 768px) {
    .transition-content {
        padding: 0 20px; /* Add padding to ensure centering */
    }
    
    .film-strip-decorative {
        gap: 15px; /* Reduce gap slightly on mobile */
        justify-content: center;
        width: 100%;
    }
}

.strip-perforation {
    width: 8px;
    height: 8px;
    background: rgba(200, 83, 0, 0.5);
    border-radius: 50%;
    border: 1px solid rgba(200, 83, 0, 0.8);
}

.spotlight-sweep {
    position: absolute;
    top: 0;
    left: -100px;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(200, 83, 0, 0.1) 50%, 
        transparent 100%);
    animation: sweepAcross 6s ease-in-out infinite;
    will-change: transform;
}

@keyframes filmStripFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

@keyframes sweepAcross {
    0% { left: -100px; }
    50% { left: calc(100% + 100px); }
    100% { left: -100px; }
}

/* ========== DEVELOPMENT PORTFOLIO SECTION ========== */
.strip-section {
    background: #1F1F1F;
    padding: 80px 0;
}

.strip-section .film-strip-enhanced {
    position: relative;
    background: #222;
    padding: 40px 0;
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 12px;
    border: 3px solid #333;
}

.strip-section .film-strip-enhanced::before,
.strip-section .film-strip-enhanced::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    background-image: repeating-linear-gradient(0deg, 
        #0A0A0A 0px, #0A0A0A 18px, 
        #888888 18px, #888888 30px);
    z-index: 2;
    will-change: background-position;
    opacity: 1;
}

.strip-section .film-strip-enhanced::before { 
    left: 0; 
    animation: perforationMove 4.5s linear infinite;
}

.strip-section .film-strip-enhanced::after { 
    right: 0; 
    animation: perforationMove 4.5s linear infinite reverse;
}

@keyframes perforationMove {
    from { background-position: 0 0; }
    to { background-position: 0 50px; }
}

.strip-section .enhanced-frames-container {
    overflow: visible;
    position: relative;
    cursor: grab;
}

.strip-section .enhanced-frames-container:active {
    cursor: grabbing;
}

.strip-section .enhanced-frames {
    display: flex;
    gap: 30px;
    padding: 0 70px;
    transition: transform 0.5s ease;
    will-change: transform;
}

.strip-section .enhanced-frame {
    flex: 0 0 350px;
    height: 340px;
    background: #29292b;
    border: 3px solid #3f3f3f;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease;
    overflow: hidden;
    will-change: transform;
}

.strip-section .enhanced-frame:hover {
    transform: scale(1.03);
    border-color: #C85300;
    box-shadow: 0 15px 30px rgba(0,0,0,0.6), 0 0 40px rgba(200, 83, 0, 0.3);
}

.strip-section .enhanced-frame-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
}

.strip-section .enhanced-frame-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.8s ease-in-out;
    opacity: 0;
    will-change: transform;
}

.strip-section .enhanced-frame-image img.loaded {
    opacity: 1;
    animation: darkroomDevelop 1.2s ease-out;
}

.strip-section .enhanced-frame:hover .enhanced-frame-image img {
    transform: scale(1.08);
}

.strip-section .frame-overlay {
    position: absolute;
    inset: 0;
    background: rgba(139, 69, 19, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex-direction: column;
    gap: 15px;
    will-change: opacity;
}

.strip-section .enhanced-frame:hover .frame-overlay {
    opacity: 1;
}

.strip-section .overlay-btn {
    padding: 10px 20px;
    background: #FFFFFF;
    color: #8B4513;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    will-change: transform;
}

.strip-section .overlay-btn:hover {
    background: #D2691E;
    color: #FFFFFF;
    transform: scale(1.05);
}

.strip-section .enhanced-frame-info {
    padding: 15px 15px 8px 15px;
    height: 145px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.strip-section .enhanced-frame-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 2px;
    color: #FFFFFF;
}

.strip-section .enhanced-frame-category {
    font-size: 0.8rem;
    color: #C85300;
    font-weight: 500;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.strip-section .enhanced-frame-description {
    font-size: 0.85rem;
    color: #CCCCCC;
    line-height: 1.4;
    overflow: visible;
}

/* ========== ENHANCED FOOTER WITH SUBTLE ENTRY ========== */
.footer {
    background: linear-gradient(180deg, #070707 0%, #000000 100%);
    padding: 80px 0 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(200, 83, 0, 0.3);
    box-shadow: 0 -4px 20px rgba(200, 83, 0, 0.1);
}

.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.02) 1px, transparent 1px), 
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.01) 1px, transparent 1px);
    background-size: 50px 50px, 80px 80px;
    animation: filmGrain 6s infinite;
    pointer-events: none;
    opacity: 0.3;
    will-change: background-position;
}

/* Subtle top glow effect */
.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(200, 83, 0, 0.4) 25%,
        rgba(212, 110, 37, 0.6) 50%, 
        rgba(200, 83, 0, 0.4) 75%,
        transparent 100%);
    animation: subtleGlow 8s ease-in-out infinite;
}

@keyframes subtleGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

@keyframes filmGrain {
    0%, 100% { background-position: 0 0, 20px 30px; }
    50% { background-position: 25px 0, 45px 30px; }
}

.footer-content {
    position: relative;
    z-index: 2;
}

.cta-section {
    margin-bottom: 60px;
}

.cta-section h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 20px;
    color: #FFFFFF;
}

.cta-section p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: #CCCCCC;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    display: inline-block;
    transition: transform 0.3s ease;
    will-change: transform;
}

.cta-button:hover {
    transform: translateY(-3px);
}

.cta-button img {
    height: 50px;
    width: auto;
    transition: transform 0.3s ease;
}

.footer-divider {
    width: calc(100% - 40px);
    max-width: 1160px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #333, transparent);
    margin: 0 auto 40px auto;
}

.copyright {
    text-align: center;
}

.copyright-frame {
    display: inline-block;
    position: relative;
    padding: 12px 30px;
    background: #29292b;
    border: 1px solid #3f3f3f;
    border-radius: 6px;
}

.film-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background-image: repeating-linear-gradient(0deg, 
        #3f3f3f 0px, #3f3f3f 6px, 
        #1D1D1F 6px, #1D1D1F 8px);
}

.film-edge.left {
    left: 0;
    border-radius: 6px 0 0 6px;
}

.film-edge.right {
    right: 0;
    border-radius: 0 6px 6px 0;
}

.copyright-text {
    font-size: 0.9rem;
    color: #C85300;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* ========== RESPONSIVE UPDATES FOR NEW SECTIONS ========== */

@media (max-width: 768px) {
    .strip-section {
        padding: 60px 0;
    }

    .cta-section h2 {
        font-size: 2rem;
    }

    .cta-section p {
        font-size: 1rem;
    }

    .cinematic-transition {
        height: 40px;
    }
}

@media (max-width: 480px) {
    .cta-section h2 {
        font-size: 1.8rem;
    }

    .strip-section {
        padding: 40px 0;
    }

    .cinematic-transition {
        height: 30px;
    }
}

/* Mobile strip display for development section */
@media (max-width: 480px), (max-width: 768px), (max-width: 834px), (max-width: 1024px) and (orientation: portrait) {
    .strip-section .film-strip-enhanced {
        margin: 0 20px;
        max-width: calc(100% - 40px);
        display: flex;
        flex-direction: column;
        height: auto;
        max-height: 80vh;
    }

    .strip-section .enhanced-frames-container {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .strip-section .enhanced-frames-container::-webkit-scrollbar {
        display: none;
    }

    .strip-section .enhanced-frames {
        flex-direction: column;
        padding: 20px 30px;
        gap: 20px;
        min-height: 100%;
        transform: none !important;
    }

    .strip-section .enhanced-frame {
        flex: none;
        width: calc(100% - 60px);
        max-width: 300px;
        margin: 0 auto;
        height: 310px;
        scroll-snap-align: start;
    }

    .strip-section .enhanced-frame-image {
        height: 180px;
    }

    .strip-section .enhanced-frame-info {
        height: 120px;
        padding: 12px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 4px;
    }

    .strip-section .enhanced-frame-title {
        font-size: 1rem;
        margin-bottom: 2px;
    }

    .strip-section .enhanced-frame-category {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }

    .strip-section .enhanced-frame-description {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .strip-section .enhanced-frame:active {
        transform: scale(1.03) !important;
        border-color: #8B4513 !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.6), 0 0 40px rgba(255, 140, 0, 0.3) !important;
        transition: all 0.2s ease !important;
    }
}

/* ========== CUSTOM SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #0A0A0A;
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #C85300 0%, #D46E25 50%, #FF8C00 100%);
    border-radius: 10px;
    border: 2px solid #0A0A0A;
    box-shadow: 0 0 10px rgba(200, 83, 0, 0.5);
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #D46E25 0%, #FF8C00 50%, #FFA500 100%);
    box-shadow: 0 0 15px rgba(200, 83, 0, 0.8);
    transform: scale(1.1);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(45deg, #B8460F 0%, #C85300 50%, #D46E25 100%);
}

::-webkit-scrollbar-corner {
    background: #0A0A0A;
}

/* Firefox scrollbar support */
html {
    scrollbar-width: thin;
    scrollbar-color: #C85300 #0A0A0A;
    scroll-behavior: smooth;
}