/* --- Base page look (don’t fight your ) --- */ body { font-family: Verdana, Arial, sans-serif; margin: 0; padding: 0; /* Let your HTML drive the vibe */ background-color: transparent; color: inherit; } /* --- LOGO: glow + float + one-time flicker --- */ .pg-logo { display: block; margin: 0 auto; /* Constant glow */ filter: drop-shadow(0 0 6px rgba(0, 255, 120, 0.6)) drop-shadow(0 0 12px rgba(0, 255, 120, 0.4)); /* Combine animations (float always + flicker once) */ animation: pgFloat 2.4s ease-in-out infinite, pgLogoFlicker 0.75s steps(2, end) 1; } @keyframes pgFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0px); } } @keyframes pgLogoFlicker { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: 0.25; } 45% { opacity: 1; } 60% { opacity: 0.55; } 100% { opacity: 1; } } /* --- GLITCH WORDS --- */ .glitch { position: relative; display: inline-block; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; } .glitch:hover::before, .glitch:hover::after, .glitch:focus::before, .glitch:focus::after { opacity: 1; animation: glitchBurst 220ms steps(2, end) 1; } .glitch:hover::before, .glitch:focus::before { transform: translate(-1px, 0); color: #00ff66; } .glitch:hover::after, .glitch:focus::after { transform: translate(1px, 0); color: #00c8ff; } @keyframes glitchBurst { 0% { clip-path: inset(0 0 80% 0); } 25% { clip-path: inset(40% 0 40% 0); } 50% { clip-path: inset(80% 0 0 0); } 75% { clip-path: inset(10% 0 70% 0); } 100% { clip-path: inset(0 0 0 0); } } /* --- LINKS: base --- */ a { text-decoration: none; transition: color 120ms ease-in-out, filter 120ms ease-in-out; } /* --- NAV SPARK: use per-link classes for reliable variation --- */ .nav-spark { display: inline-block; animation: navSpark 3.6s steps(1, end) infinite; } /* Add ONE of these extra classes to each link for different timing */ .nav-s1 { animation-duration: 3.1s; } .nav-s2 { animation-duration: 3.7s; } .nav-s3 { animation-duration: 4.2s; } .nav-s4 { animation-duration: 4.8s; } .nav-s5 { animation-duration: 5.1s; } @keyframes navSpark { 0% { filter: none; } 12% { filter: none; } 13% { filter: drop-shadow(0 0 3px rgba(0,255,120,0.85)) drop-shadow(0 0 7px rgba(0,255,120,0.55)); } 14% { filter: none; } 55% { filter: none; } 56% { filter: drop-shadow(0 0 2px rgba(0,200,255,0.9)) drop-shadow(0 0 6px rgba(0,200,255,0.45)); } 57% { filter: none; } 100% { filter: none; } } /* ASCII ghost glitch styling */ .ascii-ghost { color: #ffffff; text-shadow: 0 0 6px rgba(0,255,120,0.8), 0 0 14px rgba(0,200,255,0.6); animation: ghostJitter 220ms steps(2, end) infinite; white-space: pre; margin: 6px 0 0 0; } .ghost-residue { color: #00ff66; opacity: 0.35; white-space: pre; margin: 2px 0 0 0; } @keyframes ghostJitter { 0% { transform: translate(0,0); opacity: 0.95; } 50% { transform: translate(-1px, 0); opacity: 0.55; } 100% { transform: translate(1px, 0); opacity: 0.85; } } /* Hover = full paranormal */ .nav-spark:hover { color: #ffffff; filter: drop-shadow(0 0 4px rgba(0,255,120,0.9)) drop-shadow(0 0 10px rgba(0,255,120,0.65)); } /* General hover glow for non-nav links */ a:hover { color: #ffffff; filter: drop-shadow(0 0 4px rgba(0, 255, 120, 0.8)) drop-shadow(0 0 8px rgba(0, 255, 120, 0.6)); } .rp-btn { font-family: Arial, sans-serif; font-size: 12px; background: #efefef; border: 2px outset #ffffff; color: #000; padding: 2px 8px; cursor: pointer; } .rp-btn:active { border: 2px inset #ffffff; } /* --- VHS snapshot look --- */ .team-photo { width: 120px; height: 120px; border: 2px solid #00ff66; background: #000000; position: relative; overflow: hidden; display: inline-block; } .team-photo img { display: block; width: 120px; height: 120px; transform: rotate(-1.2deg) scale(1.03); filter: contrast(1.05) brightness(0.95) saturate(0.9); } /* Scanlines overlay */ .team-photo::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0,0,0,0.00) 0px, rgba(0,0,0,0.00) 2px, rgba(0,0,0,0.18) 3px ); opacity: 0.8; } /* Small VHS jitter */ .team-photo { animation: vhsJitter 3.8s steps(1,end) infinite; } @keyframes vhsJitter { 0% { transform: translate(0,0); } 6% { transform: translate(0,0); } 7% { transform: translate(-1px, 0); } 8% { transform: translate(0,0); } 60% { transform: translate(0,0); } 61% { transform: translate(1px, 0); } 62% { transform: translate(0,0); } 100% { transform: translate(0,0); } } /* --- ID badge under photo --- */ .id-badge { width: 120px; margin-top: 6px; padding: 4px; border: 1px solid #00ff66; background: #000000; text-align: left; font-family: "Courier New", Courier, monospace; font-size: 10px; color: #00ff66; } .id-badge .label { color: #cccccc; } .id-badge .warn { color: #ff6666; }