/* VHS Effect Layer */ .vhs-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; background: transparent; } .vhs-scanlines { width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2)); background-size: 100% 4px; animation: scanlines 0.2s linear infinite; opacity: 0.6; position: absolute; top: 0; left: 0; } .vhs-noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E"); opacity: 0.15; animation: noise 0.5s steps(5) infinite; } .vhs-tracking { position: absolute; top: 0; left: 0; width: 100%; height: 10px; background: rgba(255, 255, 255, 0.1); animation: tracking 3s linear infinite; } /* Camera UI */ .camera-ui { position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 40px; box-sizing: border-box; pointer-events: none; z-index: 10000; font-family: 'VT323', monospace; color: #fff; text-shadow: 0 0 5px #fff; font-size: 2rem; display: flex; flex-direction: column; justify-content: space-between; } .ui-top { display: flex; justify-content: space-between; align-items: flex-start; } .rec-indicator { display: flex; align-items: center; gap: 10px; } .rec-dot { width: 20px; height: 20px; background: red; border-radius: 50%; animation: blink 1s steps(1) infinite; } .battery { display: flex; align-items: center; gap: 5px; } .battery-icon { width: 40px; height: 20px; border: 2px solid #fff; position: relative; } .battery-icon::after { content: ''; position: absolute; top: 2px; left: 2px; width: 80%; height: 12px; background: #fff; } .ui-bottom { display: flex; justify-content: space-between; align-items: flex-end; } .timestamp { font-size: 1.5rem; } /* Animations */ @keyframes scanlines { 0% { transform: translateY(0); } 100% { transform: translateY(4px); } } @keyframes noise { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, -5%); } 40% { transform: translate(-5%, 5%); } 60% { transform: translate(5%, -5%); } 80% { transform: translate(5%, 5%); } 100% { transform: translate(0, 0); } } @keyframes tracking { 0% { top: -10%; opacity: 0; } 10% { opacity: 0.5; } 50% { opacity: 0.2; } 90% { opacity: 0.5; } 100% { top: 110%; opacity: 0; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Content Styling for VHS pages */ .vhs-content { position: relative; z-index: 1; padding: 100px 20px; max-width: 800px; margin: 0 auto; text-align: center; } .vhs-title { font-family: 'Oswald', sans-serif; font-size: 5rem; margin-bottom: 20px; color: #fff; text-transform: uppercase; mix-blend-mode: overlay; } .vhs-text { font-family: 'VT323', monospace; font-size: 1.5rem; line-height: 1.6; color: #ccc; background: rgba(0, 0, 0, 0.7); padding: 20px; border: 1px solid #333; } /* Mobile Responsive */ @media (max-width: 768px) { .camera-ui { padding: 20px; font-size: 1.5rem; } .vhs-title { font-size: 3rem; } .vhs-text { font-size: 1.2rem; } .rec-dot { width: 15px; height: 15px; } .battery-icon { width: 30px; height: 15px; } }