/* ============================================ Easter Egg - Dangerous Dave on a Retro CRT PC ============================================ */ /* ========== GLITCH ENTRANCE/EXIT EFFECT ========== */ /* Phase 1: Page glitch - applied to */ @keyframes page-glitch { 0% { transform: translate(0); filter: none; } 5% { transform: translate(-3px, 1px); filter: hue-rotate(90deg); } 10% { transform: translate(2px, -2px); filter: hue-rotate(-90deg) saturate(2); } 15% { transform: translate(0); filter: none; } 20% { transform: translate(5px, 0) skewX(-2deg); filter: hue-rotate(180deg); } 25% { transform: translate(-4px, 2px) skewX(3deg); filter: saturate(3) brightness(1.3); } 30% { transform: translate(0) skewX(0); filter: none; } 35% { transform: translate(1px, -3px); filter: hue-rotate(-60deg) contrast(1.5); } 40% { transform: translate(-2px, 1px); filter: invert(1); } 42% { transform: translate(0); filter: none; } 45% { transform: translate(3px, 2px) skewX(-1deg); filter: hue-rotate(120deg) brightness(1.5); } 50% { transform: translate(0); filter: none; } 55% { transform: translate(-1px, -1px); filter: saturate(0) brightness(2); } 57% { transform: translate(0); filter: none; } 100% { transform: translate(0); filter: none; } } /* RGB split pseudo-elements on body during glitch */ body.glitching { animation: page-glitch 0.8s ease-out; overflow: hidden; } body.glitching::before, body.glitching::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; pointer-events: none; animation: rgb-split 0.8s ease-out; } body.glitching::before { background: rgba(255, 0, 0, 0.04); animation: rgb-split-red 0.8s ease-out; } body.glitching::after { background: rgba(0, 255, 255, 0.04); animation: rgb-split-cyan 0.8s ease-out; } @keyframes rgb-split-red { 0% { transform: translate(0); opacity: 0; } 10% { transform: translate(8px, -2px); opacity: 1; } 20% { transform: translate(-5px, 1px); opacity: 0.8; } 30% { transform: translate(3px, -1px); opacity: 0.5; } 50% { transform: translate(-2px, 0); opacity: 0.3; } 70% { transform: translate(1px, 0); opacity: 0.1; } 100% { transform: translate(0); opacity: 0; } } @keyframes rgb-split-cyan { 0% { transform: translate(0); opacity: 0; } 10% { transform: translate(-8px, 2px); opacity: 1; } 20% { transform: translate(5px, -1px); opacity: 0.8; } 30% { transform: translate(-3px, 1px); opacity: 0.5; } 50% { transform: translate(2px, 0); opacity: 0.3; } 70% { transform: translate(-1px, 0); opacity: 0.1; } 100% { transform: translate(0); opacity: 0; } } /* Horizontal tear lines that sweep during glitch */ @keyframes glitch-scanlines { 0% { background-position: 0 0; opacity: 0; } 10% { opacity: 1; } 50% { background-position: 0 100%; opacity: 0.6; } 100% { background-position: 0 200%; opacity: 0; } } body.glitching > .glitch-tear-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 2px, rgba(0, 255, 0, 0.06) 2px, rgba(0, 255, 0, 0.06) 4px ), linear-gradient( 0deg, transparent 0%, rgba(0, 255, 0, 0.15) 10%, transparent 20%, transparent 40%, rgba(0, 255, 0, 0.1) 50%, transparent 60%, transparent 80%, rgba(0, 255, 0, 0.08) 90%, transparent 100% ); background-size: 100% 4px, 100% 200%; animation: glitch-scanlines 0.8s ease-out; } /* Exit glitch - faster, reverse feel */ body.glitching-out { animation: page-glitch 0.5s ease-in; overflow: hidden; } body.glitching-out::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; pointer-events: none; background: rgba(255, 0, 0, 0.04); animation: rgb-split-red 0.5s ease-in; } body.glitching-out::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; pointer-events: none; background: rgba(0, 255, 255, 0.04); animation: rgb-split-cyan 0.5s ease-in; } /* ========== PC MATERIALIZE ========== */ /* Full-screen overlay */ .dave-easter-egg-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.88); z-index: 10000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; } .dave-easter-egg-overlay.entering { animation: overlay-materialize 0.5s ease-out forwards; } .dave-easter-egg-overlay.active { opacity: 1; pointer-events: auto; } .dave-easter-egg-overlay.exiting { animation: overlay-dissolve 0.4s ease-in forwards; pointer-events: none; } @keyframes overlay-materialize { 0% { opacity: 0; } 15% { opacity: 0.7; } 25% { opacity: 0.3; } 40% { opacity: 0.9; } 50% { opacity: 0.5; } 65% { opacity: 0.95; } 100% { opacity: 1; pointer-events: auto; } } @keyframes overlay-dissolve { 0% { opacity: 1; } 40% { opacity: 0.6; } 100% { opacity: 0; } } /* The whole PC assembly */ .retro-pc { display: flex; flex-direction: column; align-items: center; opacity: 0; transform: scale(0.7); } /* PC entrance: bright flash -> digital corruption -> slam into place */ .dave-easter-egg-overlay.entering .retro-pc { animation: pc-flash-in 0.9s 0.15s ease-out forwards; } .dave-easter-egg-overlay.active .retro-pc { opacity: 1; transform: scale(1); } .dave-easter-egg-overlay.exiting .retro-pc { animation: pc-dissolve 0.35s ease-in forwards; } /* Bright white flash -> glitch distortion -> slam to solid */ @keyframes pc-flash-in { 0% { opacity: 0; transform: scale(0.01) scaleY(0.01); filter: brightness(10) blur(20px); } /* Bright horizontal line appears (like CRT turning on) */ 8% { opacity: 1; transform: scale(0.8) scaleY(0.008); filter: brightness(8) blur(2px) saturate(0); } /* Line expands vertically with bright flash */ 16% { opacity: 1; transform: scale(0.95) scaleY(0.15); filter: brightness(5) blur(1px) saturate(0); } /* Rapid vertical expansion */ 24% { opacity: 1; transform: scale(1.02) scaleY(0.7); filter: brightness(2.5) saturate(0.3); } /* Almost full, glitch flicker */ 30% { transform: scale(0.97) scaleY(1) skewX(3deg); filter: brightness(3) hue-rotate(90deg); } 34% { transform: scale(1.03) skewX(-2deg); filter: brightness(0.3); } 38% { transform: scale(0.99) skewX(1deg); filter: brightness(4) hue-rotate(-60deg); } 42% { transform: scale(1.01) skewX(0deg); filter: brightness(0.5) saturate(2); } /* Stabilizing */ 50% { transform: scale(1.015); filter: brightness(1.8) saturate(1); } 60% { transform: scale(0.995) translateY(1px); filter: brightness(1.3); } 75% { transform: scale(1.005); filter: brightness(1.1); } 100% { opacity: 1; transform: scale(1); filter: none; } } @keyframes pc-dissolve { 0% { opacity: 1; transform: scale(1); filter: none; } 30% { opacity: 0.8; transform: scale(1.03) rotate(0.5deg); filter: brightness(1.5) blur(1px); } 60% { opacity: 0.4; transform: scale(0.9) rotate(-1deg); filter: brightness(3) blur(4px) saturate(0); } 100% { opacity: 0; transform: scale(0.3) rotate(2deg); filter: brightness(5) blur(10px) saturate(0); } } /* Static noise flash overlay during materialize */ .glitch-static-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10001; pointer-events: none; opacity: 0; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); animation: static-flash 0.8s ease-out; } @keyframes static-flash { 0% { opacity: 0; } 8% { opacity: 0.8; } 15% { opacity: 0.2; } 22% { opacity: 0.9; } 30% { opacity: 0.3; } 40% { opacity: 0.6; } 50% { opacity: 0.1; } 60% { opacity: 0.4; } 75% { opacity: 0.05; } 100% { opacity: 0; } } /* ---- CRT Monitor ---- */ .crt-monitor { background: linear-gradient(180deg, #d9d0b0 0%, #c8bc96 20%, #bfb38d 50%, #b5a880 80%, #a89a70 100%); border-radius: 18px 18px 12px 12px; padding: 22px 28px 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.15); position: relative; } /* Subtle texture on the beige plastic */ .crt-monitor::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: repeating-linear-gradient( 90deg, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.015) 2px, rgba(0, 0, 0, 0.015) 4px ); pointer-events: none; } /* Screen bezel - dark inset frame */ .crt-screen-bezel { background: linear-gradient(135deg, #1a1a1a, #2d2d2d, #1a1a1a); border-radius: 10px; padding: 8px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.15); } /* The actual screen area */ .crt-screen { position: relative; width: 640px; height: 400px; background: #0a0a0a; border-radius: 6px / 8px; overflow: hidden; box-shadow: inset 0 0 30px rgba(0, 180, 0, 0.05); } /* CRT curvature + vignette */ .crt-screen::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%); z-index: 2; pointer-events: none; border-radius: inherit; } /* Scanlines */ .crt-screen::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.12) 0px, rgba(0, 0, 0, 0.12) 1px, transparent 1px, transparent 3px ); z-index: 3; pointer-events: none; border-radius: inherit; } /* Screen reflection glare */ .crt-screen-glare { position: absolute; top: 5%; left: 5%; width: 40%; height: 30%; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100% ); border-radius: 50%; z-index: 4; pointer-events: none; transform: rotate(-10deg); } /* Game iframe */ .crt-screen iframe { width: 100%; height: 100%; border: none; position: relative; z-index: 1; } /* Loading state */ .crt-screen-loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; color: #33ff33; font-family: 'Courier New', monospace; font-size: 16px; gap: 16px; } .crt-screen-loading .blink { animation: blink-cursor 1s step-end infinite; } @keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Fallback message when iframe fails */ .crt-screen-fallback { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 5; color: #33ff33; font-family: 'Courier New', monospace; font-size: 14px; text-align: center; padding: 20px; gap: 12px; background: #0a0a0a; } .crt-screen-fallback a { color: #66ff66; text-decoration: underline; font-size: 16px; } .crt-screen-fallback a:hover { color: #99ff99; } /* ---- Monitor Bottom Panel ---- */ .crt-panel { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px; } .crt-panel-left { display: flex; align-items: center; gap: 10px; } .crt-panel-right { display: flex; align-items: center; gap: 8px; } /* Power LED */ .power-led { width: 8px; height: 8px; border-radius: 50%; background: #00ff00; box-shadow: 0 0 4px #00ff00, 0 0 8px rgba(0, 255, 0, 0.4); transition: all 0.3s; } .power-led.off { background: #333; box-shadow: none; } /* Brand label */ .crt-brand { font-family: 'Arial', sans-serif; font-size: 13px; letter-spacing: 3px; color: #7a7060; font-weight: bold; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); } /* OFF Button */ .crt-off-btn { background: linear-gradient(180deg, #666 0%, #444 100%); color: #ddd; border: 2px solid #333; border-radius: 4px; padding: 5px 14px; font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold; letter-spacing: 1px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all 0.15s; text-transform: uppercase; } .crt-off-btn:hover { background: linear-gradient(180deg, #cc3333, #991111); color: #fff; border-color: #880000; } .crt-off-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /* Mute Button */ .crt-mute-btn { background: linear-gradient(180deg, #666 0%, #444 100%); color: #ddd; border: 2px solid #333; border-radius: 4px; padding: 5px 10px; font-size: 13px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all 0.15s; line-height: 1; } .crt-mute-btn:hover { background: linear-gradient(180deg, #777, #555); color: #fff; } .crt-mute-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /* ---- Monitor Stand ---- */ .crt-stand-neck { width: 70px; height: 24px; background: linear-gradient(180deg, #a89a70 0%, #958a64 100%); box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.1), inset -2px 0 0 rgba(0, 0, 0, 0.1); } .crt-stand-base { width: 220px; height: 14px; background: linear-gradient(180deg, #bfb38d 0%, #a89a70 100%); border-radius: 0 0 8px 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* ---- CRT Boot Animation ---- */ @keyframes crt-boot { 0% { filter: brightness(0); transform: scaleY(0.005) scaleX(0.5); } 20% { filter: brightness(3); transform: scaleY(0.005) scaleX(1); } 40% { filter: brightness(1.5); transform: scaleY(0.3) scaleX(1); } 60% { filter: brightness(1.2); transform: scaleY(0.8) scaleX(1); } 80% { filter: brightness(1); transform: scaleY(1.02) scaleX(1); } 100% { filter: brightness(1); transform: scaleY(1) scaleX(1); } } .crt-screen.booting { animation: crt-boot 0.7s ease-out; } /* ---- CRT Shutdown Animation ---- */ @keyframes crt-shutdown { 0% { filter: brightness(1); transform: scaleY(1) scaleX(1); } 30% { filter: brightness(2); transform: scaleY(1) scaleX(1); } 60% { filter: brightness(3); transform: scaleY(0.005) scaleX(1); } 100% { filter: brightness(0); transform: scaleY(0) scaleX(0); } } .crt-screen.shutting-down { animation: crt-shutdown 0.5s ease-in forwards; } /* ---- Hint on logo ---- */ .logo-main.has-easter-egg { cursor: pointer; transition: text-shadow 0.3s; } .logo-main.has-easter-egg:hover { text-shadow: 0 0 8px rgba(0, 255, 0, 0.3); } /* ---- Responsive ---- */ @media (max-width: 768px) { .crt-screen { width: 85vw; height: 53vw; } .crt-monitor { padding: 14px 18px 10px; border-radius: 12px 12px 8px 8px; } .crt-stand-base { width: 160px; } } @media (max-height: 600px) { .crt-screen { width: 520px; height: 325px; } .retro-pc { transform: scale(0.85); } .dave-easter-egg-overlay.active .retro-pc { transform: scale(0.85); } }