/* Cinematic Hero Section Styles */

/* Enhanced background gradients */
.hero-gradient-bg {
    background: linear-gradient(135deg, 
        rgba(217, 221, 230, 0.9) 0%, 
        rgba(166, 169, 182, 0.8) 25%,
        rgba(74, 111, 165, 0.7) 50%,
        rgba(44, 44, 46, 0.6) 75%,
        rgba(180, 120, 87, 0.8) 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* Realistic Film Strip Animation */
@keyframes filmStripEndless {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.film-strip-container {
    opacity: 0.6;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.film-strip-endless {
    will-change: transform;
    width: 200%; /* Double width for seamless loop */
}

.film-negative-frame {
    min-width: 90px;
    width: 90px;
    height: 70px;
    background: #2a2a2a;
    border: none;
    margin-right: 2px;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    
}

/* Authentic 35mm sprocket holes */
.film-negative-frame::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 6px;
    width: 4px;
    height: 6px;
    background: #000;
    
    box-shadow: 
        0 10px 0 #000, 
        0 20px 0 #000, 
        0 30px 0 #000,
        0 40px 0 #000,
        0 50px 0 #000;
}

.film-negative-frame::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 6px;
    width: 4px;
    height: 6px;
    background: #000;
    
    box-shadow: 
        0 10px 0 #000, 
        0 20px 0 #000, 
        0 30px 0 #000,
        0 40px 0 #000,
        0 50px 0 #000;
}

.film-negative-content {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #333 0%, #111 100%);
}

/* Realistic UFO/Alien B&W Movie Stills */
.film-negative-frame[data-scene="portrait"] .film-negative-content {
    background: 
        /* Classic UFO hovering scene - main saucer */
        radial-gradient(ellipse 45px 15px at 50% 35%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 30%, rgba(255,255,255,0.4) 60%, transparent 80%),
        /* UFO dome top */
        radial-gradient(ellipse 25px 8px at 50% 30%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 50%, transparent 70%),
        /* Light beam underneath */
        linear-gradient(180deg, transparent 50%, rgba(255,255,255,0.3) 55%, rgba(255,255,255,0.6) 65%, rgba(255,255,255,0.2) 80%, transparent 90%),
        /* Ground/horizon line */
        linear-gradient(180deg, transparent 75%, rgba(255,255,255,0.3) 80%, transparent 85%),
        /* Sky with dramatic lighting */
        radial-gradient(ellipse 60px 30px at 30% 20%, rgba(255,255,255,0.2) 0%, transparent 70%),
        /* Film grain texture */
        linear-gradient(180deg, #1e1e1e 0%, #2a2a2a 50%, #1a1a1a 100%);
}

.film-negative-frame[data-scene="cityscape"] .film-negative-content {
    background: 
        /* UFO approaching from distance - smaller saucer */
        radial-gradient(ellipse 35px 12px at 60% 30%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 40%, transparent 70%),
        /* UFO dome */
        radial-gradient(ellipse 20px 6px at 60% 27%, rgba(255,255,255,0.7) 0%, transparent 60%),
        /* City buildings in silhouette */
        linear-gradient(180deg, transparent 55%, rgba(255,255,255,0.4) 60%, rgba(255,255,255,0.6) 70%, transparent 80%),
        linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.3) 15%, transparent 25%),
        linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.4) 35%, transparent 45%),
        linear-gradient(90deg, transparent 70%, rgba(255,255,255,0.3) 75%, transparent 85%),
        /* Dramatic sky with clouds */
        radial-gradient(ellipse 50px 20px at 20% 20%, rgba(255,255,255,0.2) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 40%),
        linear-gradient(180deg, #1e1e1e 0%, #2a2a2a 100%);
}

.film-negative-frame[data-scene="close-up"] .film-negative-content {
    background: 
        /* Alien face close-up - large eyes */
        radial-gradient(ellipse 15px 20px at 35% 40%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 50%, transparent 70%),
        radial-gradient(ellipse 15px 20px at 65% 40%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 50%, transparent 70%),
        /* Eye pupils/centers */
        radial-gradient(ellipse 6px 8px at 35% 42%, rgba(0,0,0,0.9) 0%, transparent 60%),
        radial-gradient(ellipse 6px 8px at 65% 42%, rgba(0,0,0,0.9) 0%, transparent 60%),
        /* Elongated head shape */
        radial-gradient(ellipse 35px 45px at 50% 45%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 50%, transparent 70%),
        /* Dramatic side lighting */
        linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 40%),
        linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
}

.film-negative-frame[data-scene="landscape"] .film-negative-content {
    background: 
        /* Crashed UFO in desert/field */
        radial-gradient(ellipse 40px 12px at 45% 60%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 40%, transparent 70%),
        /* Damage/smoke from crash */
        radial-gradient(ellipse 20px 25px at 45% 50%, rgba(255,255,255,0.3) 0%, transparent 60%),
        /* Military figures investigating */
        radial-gradient(ellipse 6px 15px at 25% 65%, rgba(255,255,255,0.5) 0%, transparent 70%),
        radial-gradient(ellipse 5px 12px at 70% 67%, rgba(255,255,255,0.4) 0%, transparent 70%),
        /* Horizon line with hills */
        linear-gradient(180deg, transparent 70%, rgba(255,255,255,0.2) 75%, transparent 85%),
        /* Desert/field texture */
        linear-gradient(90deg, transparent 80%, rgba(255,255,255,0.1) 85%, transparent 95%),
        /* Dramatic sky */
        radial-gradient(ellipse 50px 20px at 60% 25%, rgba(255,255,255,0.15) 0%, transparent 60%),
        linear-gradient(180deg, #1e1e1e 0%, #2a2a2a 100%);
}

.film-negative-frame[data-scene="action"] .film-negative-content {
    background: 
        /* People running from UFO attack */
        radial-gradient(ellipse 8px 18px at 30% 70%, rgba(255,255,255,0.6) 0%, transparent 70%),
        radial-gradient(ellipse 6px 15px at 50% 72%, rgba(255,255,255,0.5) 0%, transparent 70%),
        radial-gradient(ellipse 7px 16px at 70% 68%, rgba(255,255,255,0.55) 0%, transparent 70%),
        /* Motion blur/panic effect */
        linear-gradient(45deg, rgba(255,255,255,0.2) 0%, transparent 30%),
        linear-gradient(-45deg, rgba(255,255,255,0.15) 20%, transparent 40%),
        /* UFO energy beam/attack */
        linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.7) 15%, rgba(255,255,255,0.3) 30%, transparent 50%),
        /* Building/structure damage */
        linear-gradient(90deg, transparent 75%, rgba(255,255,255,0.3) 80%, transparent 90%),
        linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
}

.film-negative-frame[data-scene="dialogue"] .film-negative-content {
    background: 
        /* Scientists/officials discussing UFO */
        radial-gradient(ellipse 18px 28px at 25% 50%, rgba(255,255,255,0.5) 0%, transparent 70%),
        radial-gradient(ellipse 16px 26px at 70% 48%, rgba(255,255,255,0.45) 0%, transparent 70%),
        /* Laboratory/office setting */
        linear-gradient(180deg, transparent 65%, rgba(255,255,255,0.2) 70%, transparent 80%),
        linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.15) 10%, transparent 20%),
        /* Charts/papers on wall (UFO evidence) */
        linear-gradient(90deg, transparent 80%, rgba(255,255,255,0.25) 85%, transparent 95%),
        /* Desk/table surface */
        linear-gradient(180deg, transparent 70%, rgba(255,255,255,0.1) 75%, transparent 85%),
        /* Interior lighting */
        radial-gradient(ellipse 45px 25px at 50% 25%, rgba(255,255,255,0.15) 0%, transparent 60%),
        linear-gradient(180deg, #1e1e1e 0%, #2a2a2a 100%);
}

.film-negative-frame[data-scene="dramatic"] .film-negative-content {
    background: 
        /* Alien emerging from UFO - silhouette */
        radial-gradient(ellipse 20px 35px at 50% 55%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 40%, transparent 70%),
        /* UFO hatch/doorway light */
        radial-gradient(ellipse 30px 15px at 50% 30%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 50%, transparent 80%),
        /* Dramatic lighting from UFO */
        linear-gradient(180deg, rgba(255,255,255,0.6) 25%, rgba(255,255,255,0.3) 40%, transparent 60%),
        /* Ground reflection/shadow */
        linear-gradient(180deg, transparent 75%, rgba(0,0,0,0.3) 80%, transparent 90%),
        /* Atmospheric fog/mist */
        radial-gradient(ellipse 60px 20px at 30% 70%, rgba(255,255,255,0.1) 0%, transparent 60%),
        /* Dark mysterious background */
        linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 60%, #2a2a2a 100%);
}

.film-negative-frame[data-scene="wide-shot"] .film-negative-content {
    background: 
        /* Multiple UFOs in formation - mass invasion */
        radial-gradient(ellipse 25px 8px at 20% 30%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 50%, transparent 70%),
        radial-gradient(ellipse 20px 6px at 50% 25%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 50%, transparent 70%),
        radial-gradient(ellipse 22px 7px at 75% 35%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.35) 50%, transparent 70%),
        /* Crowd of people watching */
        radial-gradient(ellipse 6px 12px at 15% 70%, rgba(255,255,255,0.4) 0%, transparent 70%),
        radial-gradient(ellipse 5px 10px at 30% 72%, rgba(255,255,255,0.35) 0%, transparent 70%),
        radial-gradient(ellipse 4px 9px at 45% 71%, rgba(255,255,255,0.3) 0%, transparent 70%),
        radial-gradient(ellipse 5px 11px at 60% 69%, rgba(255,255,255,0.4) 0%, transparent 70%),
        /* Buildings/cityscape silhouette */
        linear-gradient(180deg, transparent 55%, rgba(255,255,255,0.2) 60%, transparent 75%),
        linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.15) 10%, transparent 20%),
        linear-gradient(90deg, transparent 80%, rgba(255,255,255,0.15) 85%, transparent 95%),
        linear-gradient(180deg, #1e1e1e 0%, #2a2a2a 100%);
}

.film-negative-frame[data-scene="interior"] .film-negative-content {
    background: 
        /* Inside UFO - alien technology */
        radial-gradient(ellipse 35px 20px at 50% 30%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 50%, transparent 70%),
        /* Control panels/instruments */
        linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.4) 15%, transparent 25%),
        linear-gradient(90deg, transparent 75%, rgba(255,255,255,0.35) 80%, transparent 90%),
        /* Curved UFO interior walls */
        radial-gradient(ellipse 60px 35px at 50% 100%, rgba(255,255,255,0.2) 0%, transparent 60%),
        /* Alien figure at controls */
        radial-gradient(ellipse 12px 20px at 65% 55%, rgba(255,255,255,0.5) 0%, transparent 70%),
        /* Mysterious interior lighting */
        radial-gradient(ellipse 40px 25px at 30% 40%, rgba(255,255,255,0.25) 0%, transparent 60%),
        /* High-tech surface reflections */
        linear-gradient(180deg, transparent 70%, rgba(255,255,255,0.15) 75%, transparent 85%),
        linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
}

.film-negative-frame[data-scene="exterior"] .film-negative-content {
    background: 
        /* Military response - tanks/vehicles */
        linear-gradient(180deg, transparent 60%, rgba(255,255,255,0.4) 65%, rgba(255,255,255,0.2) 75%, transparent 80%),
        /* Tank/vehicle silhouettes */
        radial-gradient(ellipse 25px 8px at 30% 68%, rgba(255,255,255,0.5) 0%, transparent 70%),
        radial-gradient(ellipse 20px 6px at 70% 70%, rgba(255,255,255,0.45) 0%, transparent 70%),
        /* Soldiers/military personnel */
        radial-gradient(ellipse 6px 15px at 20% 65%, rgba(255,255,255,0.4) 0%, transparent 70%),
        radial-gradient(ellipse 5px 14px at 45% 67%, rgba(255,255,255,0.35) 0%, transparent 70%),
        radial-gradient(ellipse 6px 16px at 80% 64%, rgba(255,255,255,0.4) 0%, transparent 70%),
        /* UFO in sky being tracked */
        radial-gradient(ellipse 30px 10px at 60% 25%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.3) 50%, transparent 70%),
        /* Searchlights/beams */
        linear-gradient(45deg, rgba(255,255,255,0.3) 0%, transparent 40%),
        linear-gradient(180deg, #1e1e1e 0%, #2a2a2a 100%);
}

.film-negative-frame[data-scene="night"] .film-negative-content {
    background: 
        /* Night UFO sighting - glowing craft */
        radial-gradient(ellipse 35px 12px at 50% 30%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0.2) 70%, transparent 90%),
        /* Bright UFO lights */
        radial-gradient(circle 8px at 45% 32%, rgba(255,255,255,0.9) 0%, transparent 50%),
        radial-gradient(circle 6px at 55% 30%, rgba(255,255,255,0.8) 0%, transparent 50%),
        /* Witness silhouette */
        radial-gradient(ellipse 15px 25px at 25% 65%, rgba(255,255,255,0.3) 0%, transparent 80%),
        /* Street/environment in darkness */
        linear-gradient(180deg, transparent 70%, rgba(255,255,255,0.1) 75%, transparent 85%),
        /* Night sky atmosphere */
        radial-gradient(ellipse 40px 20px at 70% 20%, rgba(255,255,255,0.1) 0%, transparent 70%),
        /* Very dark night base */
        linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 40%, #0a0a0a 100%);
}

.film-negative-frame[data-scene="day"] .film-negative-content {
    background: 
        /* Daytime UFO over city - final evacuation */
        radial-gradient(ellipse 50px 18px at 45% 25%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 40%, transparent 70%),
        /* UFO casting shadow */
        linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.2) 40%, transparent 50%),
        /* Crowds of people evacuating */
        radial-gradient(ellipse 8px 16px at 15% 70%, rgba(255,255,255,0.5) 0%, transparent 70%),
        radial-gradient(ellipse 7px 15px at 35% 72%, rgba(255,255,255,0.45) 0%, transparent 70%),
        radial-gradient(ellipse 6px 14px at 55% 71%, rgba(255,255,255,0.4) 0%, transparent 70%),
        radial-gradient(ellipse 8px 17px at 75% 69%, rgba(255,255,255,0.5) 0%, transparent 70%),
        /* City buildings in daylight */
        linear-gradient(180deg, transparent 50%, rgba(255,255,255,0.3) 55%, rgba(255,255,255,0.4) 65%, transparent 75%),
        /* Bright daylight sky */
        linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 40%),
        /* Strong daylight contrasts */
        linear-gradient(45deg, transparent 60%, rgba(0,0,0,0.1) 70%, transparent 80%),
        linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Film strip animations */
.film-strip-overlay {
    position: absolute;
    top: 0;
    left: -100px;
    width: calc(100% + 200px);
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 20px,
        rgba(44, 44, 46, 0.1) 20px,
        rgba(44, 44, 46, 0.1) 30px
    );
    animation: filmStripMove 20s linear infinite;
    pointer-events: none;
}

@keyframes filmStripMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

/* Floating camera elements */
.floating-camera {
    position: absolute;
    animation: cameraFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
}

@keyframes cameraFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

/* Spotlight effects */
.spotlight-effect {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 200%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 30%,
        transparent 70%
    );
    animation: spotlightPulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes spotlightPulse {
    0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.6; transform: translateX(-50%) scale(1.1); }
}

/* Lens flare effects */
.lens-flare {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(74, 111, 165, 0.3) 0%,
        rgba(74, 111, 165, 0.1) 30%,
        transparent 70%
    );
    
    animation: lensFlareMove 12s linear infinite;
    pointer-events: none;
}

@keyframes lensFlareMove {
    0% { 
        top: 10%; 
        left: -20%; 
        opacity: 0; 
        transform: scale(0.5);
    }
    25% { 
        opacity: 0.8; 
        transform: scale(1);
    }
    75% { 
        opacity: 0.8; 
        transform: scale(1.2);
    }
    100% { 
        top: 80%; 
        left: 120%; 
        opacity: 0; 
        transform: scale(0.5);
    }
}

/* Typewriter text cursor */
.typewriter-cursor {
    display: inline-block;
    background-color: #4A6FA5;
    margin-left: 3px;
    width: 3px;
    animation: typewriterCursor 1s infinite;
}

@keyframes typewriterCursor {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* 3D transformation effects for workflow cards */
.workflow-3d-container {
    perspective: 1000px;
    perspective-origin: center center;
}

.workflow-3d-card {
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.workflow-3d-card:hover {
    transform: rotateY(10deg) rotateX(-5deg) translateZ(50px);
    box-shadow: 
        0 25px 50px rgba(0,0,0,0.2),
        0 0 0 1px rgba(255,255,255,0.1);
}

.workflow-3d-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.workflow-3d-card:hover::before {
    opacity: 1;
}

/* Professional stat cards */
.stat-card-animated {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.stat-card-animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.stat-card-animated:hover::before {
    left: 100%;
}

.stat-card-animated:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Particle animation containers */
.particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Network visualization styles */
.network-node {
    cursor: pointer;
    transition: all 0.3s ease;
}

.network-node:hover {
    filter: brightness(1.3);
}

.network-link {
    opacity: 0.6;
    transition: all 0.3s ease;
}

.network-link.highlighted {
    opacity: 1;
    stroke-width: 3px;
}

/* Audio waveform visualization */
.audio-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 40px;
}

.audio-bar {
    width: 3px;
    background: linear-gradient(to top, #4A6FA5, #B47857);
    
    animation: audioWave 1.5s ease-in-out infinite;
}

.audio-bar:nth-child(2) { animation-delay: 0.1s; }
.audio-bar:nth-child(3) { animation-delay: 0.2s; }
.audio-bar:nth-child(4) { animation-delay: 0.3s; }
.audio-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes audioWave {
    0%, 100% { height: 5px; }
    50% { height: 30px; }
}

/* Timeline scrubber */
.timeline-scrubber {
    position: relative;
    background: #2C2C2E;
    height: 6px;
    
    overflow: hidden;
}

.timeline-progress {
    height: 100%;
    background: linear-gradient(90deg, #4A6FA5, #B47857);
    
    transition: width 0.3s ease;
    position: relative;
}

.timeline-progress::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: white;
    
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Cinematic depth layers */
.depth-layer-1 { z-index: 1; opacity: 0.3; }
.depth-layer-2 { z-index: 2; opacity: 0.5; }
.depth-layer-3 { z-index: 3; opacity: 0.7; }
.depth-layer-4 { z-index: 4; opacity: 0.9; }
.depth-layer-5 { z-index: 5; opacity: 1; }

/* Professional glow effects */
.professional-glow {
    position: relative;
}

.professional-glow::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #4A6FA5, #B47857, #4A6FA5);
    
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(10px);
}

.professional-glow:hover::before {
    opacity: 0.7;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .lens-flare {
        width: 200px;
        height: 200px;
    }
    
    .workflow-3d-card:hover {
        transform: none;
    }
    
    .spotlight-effect {
        width: 150%;
        height: 150%;
    }
    
    .film-strip-overlay {
        display: none;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .network-node, .network-link {
        shape-rendering: geometricPrecision;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .floating-camera,
    .lens-flare,
    .film-strip-overlay,
    .spotlight-effect,
    .typewriter-cursor,
    .audio-bar {
        animation: none;
    }
    
    .workflow-3d-card:hover {
        transform: translateY(-5px);
    }
}