/* ================================================================= ERA OVERRIDES — loaded AFTER themes.css so eras WIN on source order. When an era is active, the theme's typography/cards/buttons/nav are completely replaced. The theme effectively "doesn't exist". ================================================================= */ /* ─── ERA-AWARE CURSORS ────────────────────────────────────────── Each era gets a custom cursor that fits its world. Hot-spot tuned so the click point lands where the user expects. ── 1980 DOS → solid yellow block (CGA character cursor) ── 2030 → small luminous orb with halo (hologram pointer) ── 2077 → tactical crosshair w/ corner brackets (Kiroshi HUD) Pointer cursor (links/buttons) gets the matching "selected" version. */ html[data-era="1980"], html[data-era="1980"] body { cursor: url('data:image/svg+xml;utf8,') 2 2, crosshair; } html[data-era="1980"] a, html[data-era="1980"] button, html[data-era="1980"] [role="button"], html[data-era="1980"] .btn, html[data-era="1980"] input[type="submit"] { cursor: url('data:image/svg+xml;utf8,_') 2 2, pointer; } html[data-era="2030"], html[data-era="2030"] body { cursor: url('data:image/svg+xml;utf8,') 14 14, auto; } html[data-era="2030"] a, html[data-era="2030"] button, html[data-era="2030"] [role="button"], html[data-era="2030"] .btn { cursor: url('data:image/svg+xml;utf8,') 14 14, pointer; } html[data-era="2077"], html[data-era="2077"] body { cursor: url('data:image/svg+xml;utf8,') 16 16, crosshair; } html[data-era="2077"] a, html[data-era="2077"] button, html[data-era="2077"] [role="button"], html[data-era="2077"] .btn { cursor: url('data:image/svg+xml;utf8,') 16 16, crosshair; } /* ─── Universal era reset ───────────────────────────────────────── When ANY era is active, strip theme-specific decorations that would otherwise leak through (gradient text, pseudo-element marks, theme-specific cursors etc). */ html[data-era] h1::before, html[data-era] h2::before, html[data-era] h3::before, html[data-era] .project-card::before, html[data-era] .case-card::before, html[data-era] .project-card::after, html[data-era] .case-card::after { content: none !important; } html[data-era] h1, html[data-era] h2, html[data-era] h3 { -webkit-text-fill-color: initial !important; background-clip: initial !important; -webkit-background-clip: initial !important; background: transparent !important; } /* ═══════════════════════════════════════════════════════════════════ 1980 — DOS / IBM-PC CGA palette on blue, VT323 monospace, ASCII trim, blinking caret. ═══════════════════════════════════════════════════════════════════ */ html[data-era="1980"] body { font-family: "VT323", "Courier New", monospace !important; font-size: 20px !important; line-height: 1.3 !important; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.35) 0, rgba(0,0,0,0.35) 1px, transparent 1px, transparent 2px), #0000aa !important; color: #aaaaaa !important; letter-spacing: 0.04em; backdrop-filter: none !important; } html[data-era="1980"] body::before, html[data-era="1980"] body::after { content: ""; } html[data-era="1980"] body::after { position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,80,0.6) 100%); } html[data-era="1980"] * { border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-era="1980"] h1, html[data-era="1980"] h2, html[data-era="1980"] h3 { font-family: "VT323", monospace !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #ffff55 !important; text-shadow: 0 0 2px #ffff55, 1px 0 0 #ff55ff !important; font-style: normal !important; transform: none !important; background: none !important; } html[data-era="1980"] h1 { font-size: clamp(2.5rem, 6vw, 4.5rem) !important; border-top: 2px double #ffffff !important; border-bottom: 2px double #ffffff !important; padding: 0.3em 0 !important; text-align: center; } html[data-era="1980"] h1::before { content: "█ " !important; color: #ffff55; } html[data-era="1980"] h1::after { content: " █" !important; color: #ffff55; } html[data-era="1980"] h2::before { content: "▓▒░ " !important; color: #55ffff; } html[data-era="1980"] h3::before { content: "C:\\> " !important; color: #55ff55; } html[data-era="1980"] .nav { background: #aaaaaa !important; border-bottom: 2px solid #ffffff !important; } html[data-era="1980"] .nav-links a { color: #000080 !important; background: #aaaaaa !important; text-transform: uppercase; font-family: "VT323", monospace !important; padding: 4px 10px !important; } html[data-era="1980"] .nav-links a:hover, html[data-era="1980"] .nav-links a.active { background: #000080 !important; color: #ffffff !important; } html[data-era="1980"] .brand-text { color: #000080 !important; font-family: "VT323", monospace !important; font-weight: 400 !important; } html[data-era="1980"] .project-card, html[data-era="1980"] .case-card, html[data-era="1980"] .ai-card, html[data-era="1980"] .insight-card { background: #000080 !important; border: 2px solid #ffffff !important; outline: 2px double #aaaaaa !important; outline-offset: 2px; color: #ffffff !important; clip-path: none !important; transform: none !important; } html[data-era="1980"] .btn, html[data-era="1980"] .btn-primary { background: #aaaaaa !important; color: #000080 !important; border: 2px outset #ffffff !important; font-family: "VT323", monospace !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; padding: 6px 18px !important; clip-path: none !important; } html[data-era="1980"] .btn-primary { background: #ffff55 !important; color: #000080 !important; } html[data-era="1980"] .btn-primary::before { content: "►" !important; margin-right: 8px; animation: dos-blink 1s step-end infinite; } @keyframes dos-blink { 50% { opacity: 0; } } html[data-era="1980"] .shop-hero-title::after, html[data-era="1980"] .hero h1::after { content: "_" !important; margin-left: 8px; color: #ffff55; animation: dos-blink 1s step-end infinite; } /* ═══════════════════════════════════════════════════════════════════ 2010 — LEGACY WEB Times New Roman, blue underlined links, 90s box layouts. ═══════════════════════════════════════════════════════════════════ */ html[data-era="2010"] body { font-family: "Times New Roman", "Georgia", serif !important; font-size: 16px !important; line-height: 1.5 !important; background: #ffffff !important; color: #000 !important; backdrop-filter: none !important; } html[data-era="2010"] body::before, html[data-era="2010"] body::after { content: none !important; } html[data-era="2010"] * { border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; transform: none !important; clip-path: none !important; } html[data-era="2010"] h1, html[data-era="2010"] h2, html[data-era="2010"] h3 { font-family: "Times New Roman", serif !important; color: #000 !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; font-style: normal !important; } html[data-era="2010"] a { color: #0000ee !important; text-decoration: underline !important; } html[data-era="2010"] a:visited { color: #551a8b !important; } html[data-era="2010"] .nav { background: #ececec !important; border-bottom: 1px solid #999 !important; } html[data-era="2010"] .nav-links a { color: #0000ee !important; background: transparent !important; } html[data-era="2010"] .project-card, html[data-era="2010"] .case-card, html[data-era="2010"] .ai-card { background: #ffffff !important; border: 1px solid #999 !important; color: #000 !important; } html[data-era="2010"] .btn, html[data-era="2010"] .btn-primary { background: linear-gradient(to bottom, #eee, #ccc) !important; color: #000 !important; border: 1px solid #666 !important; font-family: "Tahoma", "Arial", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; padding: 4px 12px !important; } /* ═══════════════════════════════════════════════════════════════════ 2040 — NEO-HOLOGRAPHIC (was "Synthwave") The advanced version of "Modern" — sleek, holographic, weightless. Volumetric depth, iridescent edges, floating glass panels, AR vibes. Think Apple Vision Pro × Minority Report × Westworld control room. ═══════════════════════════════════════════════════════════════════ */ html[data-era="2030"] body { font-family: "Inter", "SF Pro Display", system-ui, sans-serif !important; font-weight: 300 !important; color: #e8f1ff !important; background: radial-gradient(ellipse 80% 50% at 30% 20%, rgba(120,180,255,0.18) 0%, transparent 60%), radial-gradient(ellipse 60% 60% at 80% 80%, rgba(180,140,255,0.16) 0%, transparent 65%), radial-gradient(ellipse 100% 80% at 50% 100%, rgba(80,255,220,0.12) 0%, transparent 70%), linear-gradient(180deg, #050a1a 0%, #0a1428 60%, #050810 100%) !important; background-attachment: fixed !important; min-height: 100vh; position: relative; overflow-x: hidden; letter-spacing: 0.005em; } /* Volumetric floating particles — slow drifting depth layer */ html[data-era="2030"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 15% 30%, rgba(160,200,255,0.6) 0, transparent 1.5px) 0 0 / 240px 240px, radial-gradient(circle at 75% 60%, rgba(220,180,255,0.5) 0, transparent 1px) 0 0 / 180px 180px, radial-gradient(circle at 40% 85%, rgba(120,255,230,0.4) 0, transparent 1.2px) 0 0 / 320px 320px; animation: neo-particles 30s linear infinite; mix-blend-mode: screen; } @keyframes neo-particles { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 240px -120px, -180px 60px, 320px -200px; } } /* Subtle horizontal hologram scan-pass that moves down the page once every 12s */ html[data-era="2030"] body::after { content: ""; position: fixed; left: 0; right: 0; top: -20vh; height: 30vh; pointer-events: none; z-index: 1; background: linear-gradient(180deg, transparent 0%, rgba(140,200,255,0.04) 30%, rgba(160,220,255,0.08) 50%, rgba(140,200,255,0.04) 70%, transparent 100%); animation: neo-scan 12s ease-in-out infinite; } @keyframes neo-scan { 0%, 100% { top: -30vh; opacity: 0; } 20%, 80% { opacity: 1; } 50% { top: 100vh; opacity: 1; } } /* Ensure content layers above ambient */ html[data-era="2030"] .nav, html[data-era="2030"] section, html[data-era="2030"] main, html[data-era="2030"] .container, html[data-era="2030"] footer { position: relative; z-index: 2; } /* Soft rounded futurism — generous radii, never harsh */ html[data-era="2030"] * { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Typography — ultralight display weight, iridescent edge */ html[data-era="2030"] h1, html[data-era="2030"] h2, html[data-era="2030"] h3 { font-family: "Inter", "SF Pro Display", system-ui, sans-serif !important; font-weight: 200 !important; letter-spacing: -0.02em !important; font-style: normal !important; color: transparent !important; background: linear-gradient(135deg, #ffffff 0%, #b8d4ff 25%, #d4b8ff 50%, #b8f0e0 75%, #ffffff 100%) !important; background-size: 200% 200% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 24px rgba(160,200,255,0.4)); animation: neo-iris 8s ease-in-out infinite; } @keyframes neo-iris { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } html[data-era="2030"] h1 { font-size: clamp(3rem, 9vw, 7rem) !important; line-height: 1.05 !important; font-weight: 100 !important; } html[data-era="2030"] h2 { font-weight: 300 !important; } html[data-era="2030"] p { color: rgba(232,241,255,0.78) !important; } /* Nav — floating frosted bar, almost invisible until you focus */ html[data-era="2030"] .nav { background: rgba(10,20,40,0.4) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; border: none !important; border-bottom: 1px solid rgba(160,200,255,0.15) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 32px rgba(0,0,0,0.4), 0 0 80px rgba(140,200,255,0.1) !important; } html[data-era="2030"] .nav-links a { color: rgba(232,241,255,0.75) !important; font-family: "Inter", sans-serif !important; font-weight: 400 !important; letter-spacing: 0.04em; position: relative; transition: color 0.3s ease; } html[data-era="2030"] .nav-links a:hover { color: #ffffff !important; } html[data-era="2030"] .nav-links a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -4px; height: 1px; background: linear-gradient(90deg, transparent, #a0c8ff, #d4b8ff, transparent); transition: left 0.4s cubic-bezier(0.22,1,0.36,1), right 0.4s cubic-bezier(0.22,1,0.36,1); } html[data-era="2030"] .nav-links a:hover::after { left: 0; right: 0; } /* Cards — holographic glass panels with iridescent edge */ html[data-era="2030"] .project-card, html[data-era="2030"] .case-card, html[data-era="2030"] .ai-card, html[data-era="2030"] .insight-card { background: linear-gradient(135deg, rgba(160,200,255,0.06) 0%, rgba(180,140,255,0.04) 50%, rgba(120,255,230,0.05) 100%), rgba(10,20,40,0.35) !important; border: 1px solid transparent !important; border-radius: 20px !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 0 60px rgba(160,200,255,0.04), 0 1px 2px rgba(0,0,0,0.3), 0 24px 60px -20px rgba(0,0,0,0.5), 0 0 80px -20px rgba(180,140,255,0.3) !important; color: #e8f1ff !important; position: relative; outline: none !important; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.6s !important; } /* Iridescent border via gradient pseudo-element */ html[data-era="2030"] .project-card::after, html[data-era="2030"] .case-card::after, html[data-era="2030"] .ai-card::after, html[data-era="2030"] .insight-card::after { content: "" !important; position: absolute; inset: 0; border-radius: 20px; padding: 1px; background: linear-gradient(135deg, rgba(160,200,255,0.6) 0%, transparent 30%, rgba(180,140,255,0.5) 60%, transparent 80%, rgba(120,255,230,0.5) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.7; } html[data-era="2030"] .project-card:hover, html[data-era="2030"] .case-card:hover { transform: translateY(-6px) scale(1.005) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 40px 80px -20px rgba(0,0,0,0.6), 0 0 100px -10px rgba(180,140,255,0.5) !important; } /* Buttons — translucent capsule with iridescent rim */ html[data-era="2030"] .btn, html[data-era="2030"] .btn-primary { background: linear-gradient(135deg, rgba(160,200,255,0.18) 0%, rgba(180,140,255,0.15) 100%) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 999px !important; font-family: "Inter", sans-serif !important; font-weight: 500 !important; letter-spacing: 0.02em !important; text-transform: none !important; padding: 12px 28px !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.4), 0 0 40px -10px rgba(180,140,255,0.4) !important; text-shadow: none !important; transition: all 0.3s cubic-bezier(0.22,1,0.36,1) !important; } html[data-era="2030"] .btn-primary { background: linear-gradient(135deg, rgba(160,200,255,0.35) 0%, rgba(180,140,255,0.3) 50%, rgba(120,255,230,0.25) 100%) !important; } html[data-era="2030"] .btn:hover, html[data-era="2030"] .btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 12px 32px rgba(0,0,0,0.5), 0 0 60px -10px rgba(180,140,255,0.7) !important; } /* Subtle data-tag floating top-right of cards — like AR object labels */ html[data-era="2030"] .project-card::before, html[data-era="2030"] .case-card::before { content: "● ACTIVE" !important; position: absolute; top: 14px; right: 18px; font-family: "Inter", sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.2em; color: rgba(120,255,200,0.85); text-transform: uppercase; text-shadow: 0 0 8px rgba(120,255,200,0.5); z-index: 3; } /* Selection */ html[data-era="2030"] ::selection { background: rgba(180,140,255,0.35); color: #fff; } /* ═══════════════════════════════════════════════════════════════════ 2077 — CYBERPUNK — AGGRESSIVE Static-noise + jitter + RGB split + ICE intrusion alert. ═══════════════════════════════════════════════════════════════════ */ html[data-era="2077"] body { font-family: "JetBrains Mono", "Inter", monospace !important; background: #030303 !important; color: #FCE300 !important; position: relative; } html[data-era="2077"] *:not(.nav-toggle span) { border-radius: 0 !important; } /* Static-noise overlay drifting */ html[data-era="2077"] body::after { content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 9997; background-image: radial-gradient(rgba(252,227,0,0.06) 1px, transparent 1px), radial-gradient(rgba(255,0,60,0.04) 1px, transparent 1px); background-size: 3px 3px, 2px 2px; background-position: 0 0, 1px 1px; animation: cp77-noise-drift 0.2s steps(5) infinite; mix-blend-mode: screen; opacity: 0.7; } @keyframes cp77-noise-drift { 0% { transform: translate(0,0); } 20% { transform: translate(-1%,1%); } 40% { transform: translate(1%,-1%); } 60% { transform: translate(-1%,-1%); } 80% { transform: translate(1%,1%); } 100% { transform: translate(0,0); } } /* ICE intrusion banner — cycles through multiple lore messages every 30s. Each message holds for ~1.2s, with brief flicker. Otherwise silent. */ html[data-era="2077"] body::before { position: fixed; top: 4px; left: 50%; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 10px; color: #ff003c; letter-spacing: 0.3em; z-index: 9999; background: rgba(0,0,0,0.92); padding: 4px 14px; border: 1px solid #ff003c; box-shadow: 0 0 20px rgba(255,0,60,0.7), inset 0 0 12px rgba(255,0,60,0.3); animation: cp77-alert-cycle 30s step-start infinite; text-shadow: 0 0 8px #ff003c; } @keyframes cp77-alert-cycle { /* 96% silent → 4% visible (≈1.2s out of every 30s) */ 0%, 95.9%, 100% { opacity: 0; content: ""; } 96.0%, 96.4% { opacity: 1; content: "▓▓▓ ICE INTRUSION DETECTED ▓▓▓ FLATLINE RISK: ELEVATED ▓▓▓"; } 96.5% { opacity: 0.2; content: "▓▓▓ ICE INTRUSION DETECTED ▓▓▓ FLATLINE RISK: ELEVATED ▓▓▓"; } 96.6%, 96.9% { opacity: 1; content: "▓▓▓ ICE INTRUSION DETECTED ▓▓▓ FLATLINE RISK: ELEVATED ▓▓▓"; } 97.0% { opacity: 0; } } /* Secondary lore alerts cycling — staggered 30s offset, different message each cycle. Uses a sibling pseudo-element on .nav so we get two slots. */ html[data-era="2077"] .nav::after { content: "// ARASAKA SECURE NET-77 // ALL ACTIVITY MONITORED"; position: fixed; top: 4px; right: 12px; z-index: 9999; font-family: "JetBrains Mono", monospace; font-size: 9px; color: #FCE300; letter-spacing: 0.25em; background: rgba(0,0,0,0.85); padding: 3px 10px; border: 1px solid rgba(252,227,0,0.6); text-shadow: 0 0 8px rgba(252,227,0,0.9); pointer-events: none; animation: cp77-corp-pulse 8s ease-in-out infinite; } /* On mobile the ARASAKA badge sits right on top of the hamburger menu button, which makes the menu visually unclickable even though pointer-events:none lets the tap through. Hide it. */ @media (max-width: 1024px) { html[data-era="2077"] .nav::after { display: none !important; } } /* Guarantee the nav (and its hamburger toggle) sit above every era backdrop / overlay we paint — across all eras. The era backdrop canvas is at z-index:0 with pointer-events:none, but on some mobile browsers stacking-context interactions with the body's filter / backdrop-filter property end up effectively burying the nav-toggle's hit region. Force it. */ html[data-era] .nav { position: relative; z-index: 10000 !important; } html[data-era] .nav-toggle { position: relative; z-index: 10001 !important; pointer-events: auto !important; } html[data-era] .nav-inner { position: relative; z-index: 10001; } @keyframes cp77-corp-pulse { 0%, 100% { opacity: 0.7; box-shadow: 0 0 8px rgba(252,227,0,0.4); } 50% { opacity: 1; box-shadow: 0 0 24px rgba(252,227,0,0.9), inset 0 0 12px rgba(252,227,0,0.3); } } /* Datamosh slice on containers */ @keyframes cp77-slice { 0%, 92%, 100% { transform: translate(0,0); filter: none; } 93% { transform: translate(-4px, 0) skewX(-2deg); filter: hue-rotate(20deg); } 94% { transform: translate(3px, 0) skewX(1deg); filter: hue-rotate(-15deg); } 95% { transform: translate(-2px, 0); filter: none; } } html[data-era="2077"] .container, html[data-era="2077"] .nav-inner { animation: cp77-slice 7s infinite; } /* Constant jitter on text */ @keyframes cp77-jitter { 0%, 100% { transform: translate(0,0); } 25% { transform: translate(0.3px, -0.3px); } 50% { transform: translate(-0.3px, 0.3px); } 75% { transform: translate(0.3px, 0.3px); } } html[data-era="2077"] h1, html[data-era="2077"] h2, html[data-era="2077"] h3, html[data-era="2077"] p { animation: cp77-jitter 0.15s infinite; } html[data-era="2077"] h1, html[data-era="2077"] h2, html[data-era="2077"] h3 { font-family: "JetBrains Mono", monospace !important; color: #FCE300 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-weight: 700 !important; font-style: normal !important; text-shadow: -3px 0 0 #ff003c, 3px 0 0 #00fff7, 0 0 12px rgba(252,227,0,0.6) !important; } /* Nav */ @keyframes cp77-flicker { 0%, 95%, 97%, 100% { opacity: 1; } 96% { opacity: 0.7; } } html[data-era="2077"] .nav { background: rgba(2,2,2,0.98) !important; border-bottom: 2px solid #FCE300 !important; box-shadow: 0 0 20px rgba(252,227,0,0.4), 0 4px 0 #ff003c !important; animation: cp77-flicker 1.8s step-start infinite, cp77-jitter 0.2s infinite !important; } html[data-era="2077"] .nav-links a { font-family: "JetBrains Mono", monospace !important; text-transform: uppercase; letter-spacing: 0.15em; color: #FCE300 !important; } html[data-era="2077"] .nav-links a:hover { color: #ff003c !important; text-shadow: -2px 0 0 #FCE300, 2px 0 0 #00fff7 !important; } /* Cards */ html[data-era="2077"] .project-card, html[data-era="2077"] .case-card, html[data-era="2077"] .ai-card, html[data-era="2077"] .insight-card { background: repeating-linear-gradient(180deg, rgba(252,227,0,0.04) 0, rgba(252,227,0,0.04) 1px, transparent 1px, transparent 4px), #0a0a0a !important; border: 1px solid #FCE300 !important; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)) !important; box-shadow: inset 0 0 30px rgba(252,227,0,0.1), 0 0 40px rgba(255,0,60,0.15), -4px 4px 0 rgba(255,0,60,0.4) !important; color: #FCE300 !important; } html[data-era="2077"] .project-card:hover { animation: cp77-ice-alert 0.3s steps(3); } @keyframes cp77-ice-alert { 0% { filter: hue-rotate(0deg) brightness(1); } 33% { filter: hue-rotate(180deg) brightness(1.5); } 66% { filter: invert(0.3) brightness(1.2); } 100% { filter: none; } } /* Buttons — parallelogram + sweep */ html[data-era="2077"] .btn, html[data-era="2077"] .btn-primary { background: #FCE300 !important; color: #000 !important; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%) !important; padding: 14px 32px !important; font-family: "JetBrains Mono", monospace !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.2em !important; border: none !important; position: relative; overflow: hidden; box-shadow: 0 0 30px rgba(252,227,0,0.6), -6px 6px 0 #ff003c !important; } html[data-era="2077"] .btn::before, html[data-era="2077"] .btn-primary::before { content: "" !important; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: cp77-sweep 2s linear infinite; } @keyframes cp77-sweep { 0% { left: -30%; } 100% { left: 100%; } } /* ─── EXTRA NEON LAYER ───────────────────────────────────────────── Crank the brightness: every interactive surface gets a neon halo. */ html[data-era="2077"] { --cp77-neon-yellow: 0 0 8px #FCE300, 0 0 16px rgba(252,227,0,0.6), 0 0 32px rgba(252,227,0,0.3); --cp77-neon-red: 0 0 8px #ff003c, 0 0 16px rgba(255,0,60,0.6), 0 0 32px rgba(255,0,60,0.3); --cp77-neon-cyan: 0 0 8px #00fff7, 0 0 16px rgba(0,255,247,0.5), 0 0 32px rgba(0,255,247,0.25); } /* Edge-of-screen ambient glow — like neon city light bleeding into the room */ html[data-era="2077"] html, html[data-era="2077"] body { box-shadow: inset 0 0 200px rgba(255,0,60,0.18), inset 0 0 120px rgba(252,227,0,0.1) !important; } /* Stronger heading glow — multilayer yellow + red chromatic */ html[data-era="2077"] h1 { text-shadow: -3px 0 0 #ff003c, 3px 0 0 #00fff7, 0 0 6px #FCE300, 0 0 18px rgba(252,227,0,0.8), 0 0 36px rgba(252,227,0,0.4), 0 0 60px rgba(252,227,0,0.2) !important; } html[data-era="2077"] h2 { text-shadow: -2px 0 0 #ff003c, 2px 0 0 #00fff7, 0 0 12px rgba(252,227,0,0.6), 0 0 28px rgba(252,227,0,0.3) !important; } /* Cards get pulsing neon edge */ @keyframes cp77-neon-pulse { 0%, 100% { box-shadow: inset 0 0 30px rgba(252,227,0,0.1), 0 0 24px rgba(252,227,0,0.4), 0 0 60px rgba(255,0,60,0.15), -4px 4px 0 rgba(255,0,60,0.5); } 50% { box-shadow: inset 0 0 50px rgba(252,227,0,0.2), 0 0 50px rgba(252,227,0,0.7), 0 0 100px rgba(255,0,60,0.3), -4px 4px 0 rgba(255,0,60,0.7); } } html[data-era="2077"] .project-card, html[data-era="2077"] .case-card, html[data-era="2077"] .ai-card { animation: cp77-neon-pulse 4s ease-in-out infinite; } /* Card corner cyber-bracket — adds a UI-grade tactical mark */ html[data-era="2077"] .project-card::before, html[data-era="2077"] .case-card::before { content: "// BD-LINK STABLE ■ STR_CRED: MAX ■ KIROSHI v2.1" !important; position: absolute; top: 0; left: 0; right: 0; padding: 4px 12px; background: linear-gradient(90deg, #FCE300 0%, #FCE300 70%, transparent 100%); color: #000; font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } /* Buttons get neon glow */ html[data-era="2077"] .btn, html[data-era="2077"] .btn-primary { text-shadow: 0 0 6px rgba(0,0,0,0.4); filter: drop-shadow(0 0 12px rgba(252,227,0,0.6)); } html[data-era="2077"] .btn:hover, html[data-era="2077"] .btn-primary:hover { filter: drop-shadow(0 0 24px #FCE300) drop-shadow(0 0 8px #ff003c); } /* Nav links — neon underline on hover */ html[data-era="2077"] .nav-links a { text-shadow: var(--cp77-neon-yellow); } /* Fixed Arasaka corner badge — bottom-left, tactical UI element */ html[data-era="2077"]::before { content: ""; position: fixed; bottom: 16px; left: 16px; z-index: 9996; width: 64px; height: 64px; background: rgba(0,0,0,0.85); border: 1px solid #FCE300; box-shadow: 0 0 16px rgba(252,227,0,0.5), inset 0 0 12px rgba(252,227,0,0.2); clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%); background-image: linear-gradient(45deg, transparent 47%, #FCE300 47%, #FCE300 53%, transparent 53%), linear-gradient(-45deg, transparent 47%, #FCE300 47%, #FCE300 53%, transparent 53%); background-size: 24px 24px; background-position: center; background-repeat: no-repeat; pointer-events: none; } html[data-era="2077"]::after { content: "ARASAKA // 2077 // V-LINK ACTIVE"; position: fixed; bottom: 18px; left: 88px; z-index: 9996; font-family: "JetBrains Mono", monospace; font-size: 9px; color: #FCE300; letter-spacing: 0.3em; text-shadow: var(--cp77-neon-yellow); pointer-events: none; max-width: 200px; line-height: 1.4; } /* "WAKE UP, SAMURAI" — faint background watermark on the hero region */ html[data-era="2077"] .hero::before, html[data-era="2077"] section:first-of-type::before { content: "WAKE UP, SAMURAI."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-4deg); font-family: "JetBrains Mono", monospace; font-weight: 900; font-size: clamp(3rem, 12vw, 9rem); color: transparent; -webkit-text-stroke: 1px rgba(255,0,60,0.18); letter-spacing: 0.05em; pointer-events: none; z-index: 0; white-space: nowrap; } /* ─── ADVANCED CYBERWARE / AR LAYER ─────────────────────────────── Make it feel like you're seeing the page THROUGH cyberware: volumetric light bleed, AR grid, holographic depth on cards. */ /* AR scan-grid overlay — fixed thin yellow grid behind everything */ html[data-era="2077"] main, html[data-era="2077"] body { background-image: linear-gradient(rgba(252,227,0,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(252,227,0,0.025) 1px, transparent 1px), linear-gradient(rgba(255,0,60,0.02) 1px, transparent 1px) !important; background-size: 80px 80px, 80px 80px, 320px 320px !important; background-position: 0 0, 0 0, 0 0 !important; background-attachment: fixed !important; } /* Volumetric light shafts from corners — like neon spilling into the AR view */ html[data-era="2077"] body { background-color: #030303 !important; } html[data-era="2077"] section:first-of-type::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(252,227,0,0.18) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(255,0,60,0.18) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 100% 0%, rgba(0,255,247,0.08) 0%, transparent 50%); mix-blend-mode: screen; animation: cp77-light-breathe 6s ease-in-out infinite; } @keyframes cp77-light-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } /* Holographic card depth — multi-layer drop shadow, AR object feel */ html[data-era="2077"] .project-card, html[data-era="2077"] .case-card, html[data-era="2077"] .ai-card { /* Stack: existing styles + volumetric depth */ box-shadow: inset 0 0 50px rgba(252,227,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 24px rgba(252,227,0,0.4), 0 0 60px rgba(255,0,60,0.15), -6px 6px 0 rgba(255,0,60,0.55), 0 30px 60px -20px rgba(252,227,0,0.25), 0 60px 120px -40px rgba(255,0,60,0.2) !important; } /* AR measurement tick on left edge of cards */ html[data-era="2077"] .project-card, html[data-era="2077"] .case-card { position: relative; } /* Floating data point markers near cards */ html[data-era="2077"] .project-card .project-status, html[data-era="2077"] .case-card .case-tag { background: rgba(0,0,0,0.85) !important; border: 1px solid #00fff7 !important; color: #00fff7 !important; text-shadow: 0 0 8px #00fff7 !important; font-family: "JetBrains Mono", monospace !important; font-size: 9px !important; letter-spacing: 0.25em !important; text-transform: uppercase; padding: 3px 10px !important; box-shadow: 0 0 12px rgba(0,255,247,0.4); } /* AR vertical-tick rulers on the left/right edges of viewport */ html[data-era="2077"] .nav::before { content: ""; position: fixed; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(180deg, transparent 0%, transparent 8%, #FCE300 8%, #FCE300 8.5%, transparent 8.5%, transparent 18%, #FCE300 18%, #FCE300 18.5%, transparent 18.5%, transparent 28%, #FCE300 28%, #FCE300 29%, transparent 29%, transparent 38%, #FCE300 38%, #FCE300 38.5%, transparent 38.5%, transparent 48%, #FCE300 48%, #FCE300 48.5%, transparent 48.5%, transparent 58%, #FCE300 58%, #FCE300 59%, transparent 59%, transparent 68%, #FCE300 68%, #FCE300 68.5%, transparent 68.5%, transparent 78%, #FCE300 78%, #FCE300 78.5%, transparent 78.5%, transparent 88%, #FCE300 88%, #FCE300 89%, transparent 89%, transparent 100%); z-index: 9995; pointer-events: none; box-shadow: 0 0 12px rgba(252,227,0,0.6); opacity: 0.7; } /* Subtle chromatic aberration on the whole viewport — like cheap optics */ html[data-era="2077"] body { filter: contrast(1.05) saturate(1.1); }