/* ============================== THEME 2: RESIDENT EVIL Sequence: Umbrella-Corp emblem unfolds like an opening umbrella -> glitchy mainframe terminal readout -> lower-third movie title card with chromatic aberration. Own layout end-to-end — nothing here is shared with theme1's centered letter-puzzle. Total runtime matches holdMs (7s) set in theme.js. ============================== */ /* --- Site-wide skin (overrides light/dark vars while active) --- */ [data-app-theme="theme2-resident-evil"] { --bg-color: #0a0202; --bg-alt: #150505; --bg-soft: #1c0707; --text-color: #e8dcc8; --text-muted: #a89482; --border-color: rgba(139, 0, 0, 0.4); --accent-color: #b90000; --shadow-soft: 0 2px 10px rgba(139, 0, 0, 0.35); --shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.85); } [data-app-theme="theme2-resident-evil"] body { font-family: 'Special Elite', 'Poppins', serif; } [data-app-theme="theme2-resident-evil"] h1 { font-family: 'Bebas Neue', 'Oswald', sans-serif; letter-spacing: 2px; text-shadow: 0 0 8px rgba(185, 0, 0, 0.55); } [data-app-theme="theme2-resident-evil"] h2, [data-app-theme="theme2-resident-evil"] h3 { font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 1px; text-shadow: 0 0 8px rgba(185, 0, 0, 0.4); } /* Ambient neon-sign flicker on section headings — subtle, irregular, never fully cuts the text so it stays readable. */ [data-app-theme="theme2-resident-evil"] .section h2, [data-app-theme="theme2-resident-evil"] .horizontal-section h2 { animation: re-neonFlicker 6s ease-in-out infinite; } /* --- Background atmosphere: film grain + vignette over the whole page --- */ [data-app-theme="theme2-resident-evil"] body { position: relative; } [data-app-theme="theme2-resident-evil"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9985; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: 0.5; } [data-app-theme="theme2-resident-evil"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9986; box-shadow: inset 0 0 220px rgba(0, 0, 0, 0.75); } /* brief CCTV-style interference flash, triggered occasionally by activateSite() adding/removing .re-live on */ [data-app-theme="theme2-resident-evil"] body.re-live::before { animation: re-interference 0.35s steps(2, end); } /* --- Preloader shell --- */ #preloader.re-mode { background: #000; justify-content: flex-start; align-items: stretch; overflow: hidden; } /* film-grain scanlines over the whole card */ #preloader.re-mode::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0px, transparent 1px, transparent 3px); pointer-events: none; animation: re-scanlines 8s linear infinite; z-index: 1; } /* vignette */ #preloader.re-mode::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.95); pointer-events: none; z-index: 1; } .re-titlecard { position: relative; width: 100%; height: 100%; } /* emergency-alarm red wash, pulses twice while the emblem locks in */ .re-alarm { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(185, 0, 0, 0.35), transparent 70%); opacity: 0; animation: re-alarmPulse 2.2s ease-in-out 1.6s 2, re-fadeOut 0.8s ease 4.15s forwards; z-index: 1; } /* thin red bar that sweeps down once, like a scan/decrypt effect */ .re-scanbar { position: absolute; left: 0; right: 0; height: 3px; top: -3px; background: linear-gradient(90deg, transparent, #b90000, transparent); box-shadow: 0 0 12px 2px rgba(185, 0, 0, 0.8); animation: re-scanSweep 6.4s ease-in-out forwards; z-index: 2; } /* dripping blood pinned to the very top edge */ .re-blood-drip { position: absolute; top: 0; left: 12%; width: 3px; height: 0; background: linear-gradient(180deg, #7a0000, #3a0000); border-radius: 0 0 3px 3px; animation: re-drip 6.7s ease-in forwards; animation-delay: 0.3s; z-index: 2; } .re-blood-drip::after { content: ''; position: absolute; left: -3px; bottom: -6px; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(45deg); background: #5a0000; opacity: 0; animation: re-dripFall 6.7s ease-in forwards; animation-delay: 0.3s; } /* --- Umbrella-Corp emblem: 6 petals unfold from the centre like an umbrella opening, then a white core locks the flower shape in --- */ .re-logo { position: absolute; left: 50%; top: 34%; width: 130px; height: 130px; transform: translate(-50%, -50%); z-index: 2; animation: re-fadeOut 0.65s ease 3.85s forwards; } .re-petal { position: absolute; inset: 0; clip-path: polygon(50% 50%, 42% 2%, 58% 2%); background: #b90000; opacity: 0; transform: rotate(calc(var(--n) * 60deg)) scale(0.15); transform-origin: 50% 50%; animation: re-petalOpen 0.8s cubic-bezier(0.2, 0.8, 0.3, 1.1) forwards; animation-delay: calc(var(--n) * 0.13s); } .re-petal:nth-child(odd) { background: #e8dcc8; } .re-logo-core { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; border-radius: 50%; background: #e8dcc8; box-shadow: 0 0 14px rgba(185, 0, 0, 0.7); opacity: 0; transform: translate(-50%, -50%) scale(0.4); animation: re-coreIn 0.55s ease 1.45s forwards; } /* --- Mainframe terminal readout --- */ .re-terminal { position: absolute; left: 50%; top: 52%; transform: translateX(-50%); width: 90%; max-width: 480px; text-align: center; z-index: 2; } .re-terminal-line { margin: 0.3em 0 0; font-family: 'Special Elite', monospace; font-size: clamp(0.7rem, 2vw, 0.95rem); letter-spacing: 1px; color: #6ee06e; text-shadow: 0 0 6px rgba(110, 224, 110, 0.6); white-space: nowrap; overflow: hidden; width: 0; border-right: 2px solid rgba(110, 224, 110, 0.8); opacity: 0; } .re-terminal-line--1 { animation: re-typeLine 0.8s steps(28, end) 2.4s forwards, re-fadeOut 0.5s ease 3.85s forwards; } .re-terminal-line--2 { color: #b90000; text-shadow: 0 0 6px rgba(185, 0, 0, 0.7); animation: re-typeLine 0.8s steps(22, end) 3.2s forwards, re-glitchTwitch 0.65s steps(2, end) 4.1s 2, re-fadeOut 0.5s ease 3.85s forwards; } /* --- Lower-third movie title card with chromatic aberration --- */ .re-title { position: absolute; left: 8%; right: 8%; bottom: 22%; margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.4rem, 8vw, 5.5rem); color: #b90000; text-shadow: 0 0 10px rgba(185, 0, 0, 0.8), 0 0 24px rgba(185, 0, 0, 0.5); opacity: 0; transform: scale(1.4); animation: re-titleFlicker 1.3s ease 4.5s forwards; } .re-title::before, .re-title::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; opacity: 0; animation: re-chromaShift 1.3s steps(6, end) 4.5s forwards; } .re-title::before { color: #00e5ff; mix-blend-mode: screen; transform: translate(-3px, 0); } .re-title::after { color: #ff003c; mix-blend-mode: screen; transform: translate(3px, 0); animation-direction: reverse; } .re-subtitle { position: absolute; left: 8%; bottom: 16%; font-family: 'Special Elite', serif; color: #8b0000; letter-spacing: 4px; font-size: clamp(0.65rem, 2vw, 0.85rem); opacity: 0; animation: re-subtitleFade 0.8s ease 5.75s forwards; z-index: 2; } /* small "recording" indicator, top-right */ .re-rec { position: absolute; top: 24px; right: 28px; font-family: 'Special Elite', serif; font-size: 0.75rem; letter-spacing: 2px; color: #b90000; opacity: 0; animation: re-recBlink 1s steps(1) 1.6s infinite, re-subtitleFade 0.4s ease 1.6s forwards; z-index: 2; } @keyframes re-petalOpen { 0% { opacity: 0; transform: rotate(calc(var(--n) * 60deg)) scale(0.15); } 60% { opacity: 1; transform: rotate(calc(var(--n) * 60deg)) scale(1.08); } 100% { opacity: 1; transform: rotate(calc(var(--n) * 60deg)) scale(1); } } @keyframes re-coreIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes re-alarmPulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes re-typeLine { 0% { width: 0; opacity: 1; } 100% { width: 100%; opacity: 1; } } @keyframes re-glitchTwitch { 0% { transform: translateX(0); } 50% { transform: translateX(2px); } 100% { transform: translateX(0); } } @keyframes re-chromaShift { 0% { opacity: 0; } 16% { opacity: 0.8; transform: translate(-4px, 1px); } 33% { opacity: 0.5; transform: translate(2px, -1px); } 50% { opacity: 0.8; transform: translate(-2px, 0); } 100% { opacity: 0; transform: translate(0, 0); } } @keyframes re-titleFlicker { 0% { opacity: 0; transform: scale(1.4); } 10% { opacity: 1; } 12% { opacity: 0.2; } 14% { opacity: 1; } 20% { opacity: 0.25; } 22% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } @keyframes re-subtitleFade { to { opacity: 1; } } @keyframes re-recBlink { 50% { opacity: 0.3; } } @keyframes re-fadeOut { to { opacity: 0; } } @keyframes re-scanSweep { 0% { top: -3px; opacity: 0; } 5% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } @keyframes re-drip { 0% { height: 0; } 100% { height: 90px; } } @keyframes re-dripFall { 0%, 55% { opacity: 0; bottom: -6px; } 65% { opacity: 1; } 100% { opacity: 0; bottom: -260px; } } @keyframes re-scanlines { from { background-position: 0 0; } to { background-position: 0 100px; } } /* ============================== SITE-WIDE SURVEILLANCE HUD Injected by theme.js's activateSite() once the preloader is gone. Cyan/teal reads as "camera HUD", separate from the red movie-title palette above, matching real biohazard-monitor footage. ============================== */ /* --- Hero photo: face-scan camera overlay --- */ [data-app-theme="theme2-resident-evil"] .re-scan-wrap { position: relative; display: inline-block; } [data-app-theme="theme2-resident-evil"] .re-hud { position: absolute; inset: 0; pointer-events: none; font-family: 'Special Elite', monospace; color: #37e6ff; } [data-app-theme="theme2-resident-evil"] .re-hud-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(55, 230, 255, 0.15) 0px, transparent 1px, transparent 28px), repeating-linear-gradient(90deg, rgba(55, 230, 255, 0.15) 0px, transparent 1px, transparent 28px); opacity: 0; animation: re-fadeIn 0.5s ease 0.2s forwards; } [data-app-theme="theme2-resident-evil"] .re-hud-corner { position: absolute; width: 22px; height: 22px; border: 2px solid #37e6ff; opacity: 0; animation: re-fadeIn 0.4s ease 0.1s forwards; } [data-app-theme="theme2-resident-evil"] .re-hud-corner--tl { top: 8px; left: 8px; border-right: none; border-bottom: none; } [data-app-theme="theme2-resident-evil"] .re-hud-corner--tr { top: 8px; right: 8px; border-left: none; border-bottom: none; } [data-app-theme="theme2-resident-evil"] .re-hud-corner--bl { bottom: 8px; left: 8px; border-right: none; border-top: none; } [data-app-theme="theme2-resident-evil"] .re-hud-corner--br { bottom: 8px; right: 8px; border-left: none; border-top: none; } [data-app-theme="theme2-resident-evil"] .re-hud-label { position: absolute; top: 14px; left: 38px; font-size: 0.7rem; letter-spacing: 2px; text-shadow: 0 0 6px rgba(55, 230, 255, 0.8); opacity: 0; animation: re-fadeIn 0.4s ease 0.3s forwards; } [data-app-theme="theme2-resident-evil"] .re-hud-rec { color: #ff2d2d; animation: re-recBlink 1s steps(1) infinite; } [data-app-theme="theme2-resident-evil"] .re-hud-scanbox { position: absolute; left: 20%; right: 20%; height: 34%; top: -40%; border: 2px solid #ffd23f; box-shadow: 0 0 12px rgba(255, 210, 63, 0.6); animation: re-scanboxSweep 2.4s ease-in-out 0.5s 2; } [data-app-theme="theme2-resident-evil"] .re-hud-id { position: absolute; left: 8px; right: 8px; bottom: 34px; background: rgba(4, 14, 16, 0.65); border: 1px solid rgba(55, 230, 255, 0.5); padding: 6px 8px; opacity: 0; animation: re-fadeIn 0.4s ease 3.2s forwards; } [data-app-theme="theme2-resident-evil"] .re-hud-id-title { margin: 0 0 4px; font-size: 0.7rem; letter-spacing: 2px; color: #e8dcc8; } [data-app-theme="theme2-resident-evil"] .re-hud-id-line { margin: 0; font-size: 0.65rem; letter-spacing: 1px; line-height: 1.5; white-space: nowrap; overflow: hidden; width: 0; animation: re-typeLine 0.6s steps(30, end) forwards; } [data-app-theme="theme2-resident-evil"] .re-hud-id-line:nth-child(2) { animation-delay: 3.3s; } [data-app-theme="theme2-resident-evil"] .re-hud-id-line:nth-child(3) { animation-delay: 3.7s; } [data-app-theme="theme2-resident-evil"] .re-hud-id-status { color: #6ee06e; animation-delay: 4.1s !important; } /* Certificate cards, service cards, the ink stamp, hazard-tape bar and radar-sweep ring are styled directly with Tailwind utility classes (added at runtime by theme.js's buildCertScans()/buildServiceScans()) rather than hand-rolled CSS here. Only the keyframes those utility classes reference (re-stampIn, re-certSweep, re-imgGlitch, re-radarSpin, below) still need to live in real CSS. */ /* --- Section intro: brief "CONFIDENTIAL REPORT" flicker card --- */ [data-app-theme="theme2-resident-evil"] .re-report { position: fixed; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; pointer-events: none; z-index: 9990; } [data-app-theme="theme2-resident-evil"] .re-report-play { animation: re-reportFlicker 1.6s ease forwards; } [data-app-theme="theme2-resident-evil"] .re-report-kicker { margin: 0 0 10px; font-family: 'Special Elite', monospace; color: #b90000; letter-spacing: 3px; font-size: clamp(0.75rem, 2vw, 1rem); text-decoration: underline; } [data-app-theme="theme2-resident-evil"] .re-report-subject { margin: 0; font-family: 'Bebas Neue', sans-serif; color: #e8dcc8; font-size: clamp(1.6rem, 4.5vw, 2.8rem); letter-spacing: 2px; } @keyframes re-fadeIn { to { opacity: 1; } } @keyframes re-scanboxSweep { 0% { top: -40%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 106%; opacity: 0; } } @keyframes re-certSweep { from { transform: translateY(-100%); } to { transform: translateY(100%); } } @keyframes re-reportFlicker { 0% { opacity: 0; } 8% { opacity: 1; } 11% { opacity: 0.3; } 14% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } @keyframes re-stampIn { 0% { opacity: 0; transform: rotate(-14deg) scale(0.4); } 60% { opacity: 1; transform: rotate(-14deg) scale(1.15); } 100% { opacity: 1; transform: rotate(-14deg) scale(1); } } @keyframes re-imgGlitch { 0% { clip-path: inset(0 0 0 0); transform: translate(0, 0); filter: saturate(0.7) contrast(1.05); } 25% { clip-path: inset(10% 0 60% 0); transform: translate(-4px, 0); filter: hue-rotate(20deg) saturate(2); } 50% { clip-path: inset(60% 0 5% 0); transform: translate(4px, 0); filter: hue-rotate(-20deg) saturate(2); } 75% { clip-path: inset(30% 0 40% 0); transform: translate(-2px, 0); } 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); filter: saturate(0.7) contrast(1.05); } } @keyframes re-neonFlicker { 0%, 89%, 92%, 100% { opacity: 1; } 90% { opacity: 0.4; } 91% { opacity: 0.85; } } @keyframes re-radarSpin { to { transform: rotate(360deg); } } @keyframes re-interference { 0% { opacity: 0.5; transform: translate(0, 0); } 50% { opacity: 0.15; transform: translate(-6px, 4px); } 100% { opacity: 0.5; transform: translate(0, 0); } }