/* Styles for Enfys Warner Portfolio (Fallout/Vault-Tec Theme) */
:root{
  --bg: #0d0d0d; /* deep black like vault interior */
  --panel: #1a1a1a; /* dark panel */
  --muted: #8b9a7f; /* muted olive green */
  --accent: #ffd700; /* vault-tec yellow/gold */
  --accent-dark: #d4af37; /* darker gold */
  --accent-2: #7fff00; /* terminal green */
  --accent-3: #ff6f00; /* radiation orange */
  --glass: rgba(255,215,0,0.05);
  --glow: 0 0 15px rgba(255,215,0,0.6), 0 0 30px rgba(255,215,0,0.4);
  --glow-green: 0 0 15px rgba(127,255,0,0.6), 0 0 30px rgba(127,255,0,0.4);
  --scanline: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, transparent 1px, transparent 2px, rgba(0,0,0,0.15) 3px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  height:100%;
  margin:0;
  font-family:'Share Tech Mono', 'VT323', 'Courier New', monospace;
  background:#0a0a0a;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255,215,0,0.03) 0%, transparent 25%),
    radial-gradient(circle at 80% 20%, rgba(127,255,0,0.03) 0%, transparent 25%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,215,0,0.015) 2px, rgba(255,215,0,0.015) 4px),
    radial-gradient(ellipse at center, #1a1a1a 0%, #0d0d0d 50%, #0a0a0a 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: center center, center center, 0 0, center center;
  background-attachment: fixed;
  color:#d4d4aa;
  position:relative;
  overflow-x:hidden;
  letter-spacing:0.5px
}
/* CRT Scanlines Effect */
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:var(--scanline);pointer-events:none;z-index:9999;opacity:0.15;animation:scanlines 8s linear infinite}
/* Vignette Effect */
body::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center, transparent 0%, transparent 60%, rgba(0,0,0,0.8) 100%);pointer-events:none;z-index:9998}
/* Radiation Symbol Corner */
.container::before{content:'☢';position:fixed;bottom:20px;right:20px;font-size:40px;color:var(--accent-3);opacity:0.3;z-index:100;animation:radiation-pulse 3s ease-in-out infinite;text-shadow:0 0 20px rgba(255,111,0,0.8)}
@keyframes scanlines{0%{background-position:0 0} 100%{background-position:0 100px}}
@keyframes radiation-pulse{0%,100%{opacity:0.3;transform:scale(1) rotate(0deg)} 50%{opacity:0.6;transform:scale(1.1) rotate(180deg)}}
.container{max-width:1100px;margin:0 auto;padding:2rem; position:relative; z-index:1}

/* Header - Pip-Boy Style */
.site-header{position:sticky;top:0;background:rgba(13,13,13,0.95);backdrop-filter:blur(8px);border-bottom:3px solid var(--accent);border-top:3px solid var(--accent);box-shadow:0 0 20px rgba(255,215,0,0.3), inset 0 0 30px rgba(255,215,0,0.05);z-index:1000;position:relative;animation:header-glitch 5s infinite}
@keyframes header-glitch{0%,98%,100%{transform:translateX(0)} 98.5%{transform:translateX(-2px)} 99%{transform:translateX(2px)} 99.5%{transform:translateX(-1px)}}
.site-header::before{content:'[ VAULT-TEC PERSONNEL FILE ]';position:absolute;top:-20px;left:50%;transform:translateX(-50%);background:var(--accent);color:#0d0d0d;padding:2px 12px;font-size:10px;font-weight:bold;letter-spacing:2px;box-shadow:0 0 15px rgba(255,215,0,0.6);animation:label-flicker 3s infinite}
@keyframes label-flicker{0%,100%{opacity:1} 50%{opacity:0.85} 51%{opacity:1}}
.site-header::after{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:var(--scanline);opacity:0.1;pointer-events:none}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;position:relative;gap:2rem}
.logo{font-family:'Orbitron', 'Share Tech Mono', monospace;color:var(--accent);letter-spacing:4px;text-decoration:none;font-size:16px;font-weight:bold;text-shadow:var(--glow);position:relative;border:2px solid var(--accent);padding:8px 16px;background:rgba(255,215,0,0.05);transition:all 0.2s ease;animation:logo-pulse 4s ease-in-out infinite}
@keyframes logo-pulse{0%,100%{text-shadow:0 0 15px rgba(255,215,0,0.6), 0 0 30px rgba(255,215,0,0.4)} 50%{text-shadow:0 0 25px rgba(255,215,0,0.9), 0 0 50px rgba(255,215,0,0.6)}}
.logo:hover{background:var(--accent);color:#0d0d0d;text-shadow:none;box-shadow:0 0 25px rgba(255,215,0,0.8);transform:scale(1.05)}
.logo::before{content:'[ ';color:var(--accent-2)}
.logo::after{content:' ]';color:var(--accent-2)}
nav{display:flex;align-items:center}
.nav-list{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center}
.nav-list a{color:var(--accent);text-decoration:none;padding:0.6rem 1rem;font-weight:bold;transition:all 0.2s ease;position:relative;border:2px solid transparent;text-transform:uppercase;font-size:11px;letter-spacing:2px;background:rgba(255,215,0,0.05)}
.nav-list a::before{content:'[ ';opacity:0;color:var(--accent-2);transition:all 0.2s ease}
.nav-list a::after{content:' ]';opacity:0;color:var(--accent-2);transition:all 0.2s ease}
.nav-list a:hover{color:#0d0d0d;border-color:var(--accent);background:var(--accent);text-shadow:none;box-shadow:0 0 15px rgba(255,215,0,0.6)}
.nav-list a:hover::before,.nav-list a:hover::after{opacity:1}
.nav-toggle{display:none;background:rgba(255,215,0,0.1);border:2px solid var(--accent);padding:0.5rem 0.75rem;color:var(--accent);cursor:pointer;font-size:18px;font-weight:bold;transition:all 0.2s ease;box-shadow:0 0 10px rgba(255,215,0,0.3);font-family:'Orbitron', 'Share Tech Mono', monospace}
.nav-toggle:hover{background:var(--accent);color:#0d0d0d;box-shadow:0 0 20px rgba(255,215,0,0.8)}

/* Hero - Terminal Style */
.hero{display:grid;grid-template-columns:420px 1fr;gap:3rem;align-items:center;padding-top:4rem;padding-bottom:4rem;position:relative;border:3px solid var(--accent);background:rgba(255,215,0,0.02);padding:3rem;box-shadow:inset 0 0 50px rgba(255,215,0,0.1), 0 0 30px rgba(255,215,0,0.2);animation:hero-scan 6s ease-in-out infinite}
@keyframes hero-scan{0%,100%{box-shadow:inset 0 0 50px rgba(255,215,0,0.1), 0 0 30px rgba(255,215,0,0.2)} 50%{box-shadow:inset 0 0 70px rgba(255,215,0,0.15), 0 0 40px rgba(255,215,0,0.3)}}
.hero::before{content:'> ACCESSING PERSONNEL DATABASE...';position:absolute;top:10px;left:20px;color:var(--accent-2);font-size:11px;letter-spacing:1px;animation:typing-blink 2s infinite}
@keyframes typing-blink{0%,49%{opacity:1} 50%,100%{opacity:0.4}}
.hero::after{content:'';position:absolute;inset:0;background:var(--scanline);opacity:0.08;pointer-events:none;animation:scanline-move 3s linear infinite}
@keyframes scanline-move{0%{transform:translateY(0)} 100%{transform:translateY(20px)}}
@keyframes blink{0%,49%{opacity:1} 50%,100%{opacity:0.3}}
.avatar{position:relative;border:4px solid var(--accent);padding:8px;background:rgba(255,215,0,0.05);box-shadow:0 0 30px rgba(255,215,0,0.4), inset 0 0 20px rgba(255,215,0,0.1);animation:avatar-glow 4s ease-in-out infinite}
@keyframes avatar-glow{0%,100%{box-shadow:0 0 30px rgba(255,215,0,0.4), inset 0 0 20px rgba(255,215,0,0.1)} 50%{box-shadow:0 0 50px rgba(255,215,0,0.7), inset 0 0 30px rgba(255,215,0,0.2)}}
.avatar::before{content:'IR Photo';position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);background:var(--accent);color:#0d0d0d;padding:2px 12px;font-size:9px;font-weight:bold;letter-spacing:2px;white-space:nowrap;animation:label-glow 2s ease-in-out infinite}
@keyframes label-glow{0%,100%{box-shadow:0 0 10px rgba(255,215,0,0.4)} 50%{box-shadow:0 0 20px rgba(255,215,0,0.8)}}
.avatar img{width:400px;height:400px;display:block;background:#1a1a1a;padding:0;transition:all 0.2s ease;position:relative;z-index:1;filter:contrast(1.1) brightness(1.1)}
.avatar img:hover{filter:contrast(1.3) brightness(1.2) drop-shadow(0 0 20px rgba(255,215,0,0.6));transform:scale(1.02)}
.hero h1{font-family:'Orbitron', 'Share Tech Mono', monospace;font-size:32px;margin:0 0 0.5rem 0;color:var(--accent);line-height:1.3;text-shadow:var(--glow);position:relative;font-weight:bold;letter-spacing:2px;text-transform:uppercase}
.hero h1::before{content:'> NAME: ';color:var(--accent-2);font-size:14px;display:block;margin-bottom:8px}
.hero h1::after{content:'_';animation:cursor-blink 1s infinite;color:var(--accent-2);margin-left:4px}
@keyframes cursor-blink{0%,50%{opacity:1} 51%,100%{opacity:0}}
.lead{margin:1rem 0 1.5rem;color:var(--muted);font-size:16px;line-height:1.8;border-left:3px solid var(--accent-2);padding-left:15px;background:rgba(127,255,0,0.02)}
.lead::before{content:'> OCCUPATION: ';color:var(--accent-2);font-weight:bold;display:block;margin-bottom:4px;font-size:13px;letter-spacing:1px}
.lead small{display:block;margin-top:0.75rem;font-size:13px;color:var(--accent-2);text-transform:uppercase;letter-spacing:1px;font-weight:bold}
.lead small::before{content:'> SPECIALIZATIONS: ';color:var(--accent);display:block;margin-bottom:4px}
.chip{display:inline-block;background:rgba(255,215,0,0.05);padding:0.5rem 1rem;margin-right:0.5rem;margin-bottom:0.5rem;color:var(--accent);font-size:12px;text-decoration:none;border:2px solid var(--accent);box-shadow:inset 0 0 10px rgba(255,215,0,0.05), 0 0 10px rgba(255,215,0,0.2);font-weight:bold;letter-spacing:1px;transition:all 0.2s ease;text-transform:uppercase;animation:chip-float 3s ease-in-out infinite}
@keyframes chip-float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
.chip::before{content:'[ '}
.chip::after{content:' ]'}
.chip:hover{background:var(--accent);color:#0d0d0d;box-shadow:0 0 25px rgba(255,215,0,0.6), inset 0 0 20px rgba(0,0,0,0.2);transform:translateY(-5px);animation:none}
.cta-row{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-block;padding:0.8rem 2rem;text-decoration:none;font-weight:bold;border:3px solid;margin-right:0.5rem;text-transform:uppercase;font-size:13px;letter-spacing:2px;transition:all 0.2s ease;position:relative;font-family:'Orbitron', 'Share Tech Mono', monospace;cursor:pointer;animation:btn-pulse 3s ease-in-out infinite}
@keyframes btn-pulse{0%,100%{box-shadow:0 0 15px rgba(255,215,0,0.3)} 50%{box-shadow:0 0 30px rgba(255,215,0,0.6)}}
.btn::before{content:'[ '}
.btn::after{content:' ]'}
.btn.primary{background:var(--accent);color:#0d0d0d;border-color:var(--accent);box-shadow:0 0 20px rgba(255,215,0,0.4), inset 0 0 20px rgba(255,215,0,0.3);position:relative;z-index:1}
.btn.primary:hover{background:#0d0d0d;color:var(--accent);box-shadow:0 0 40px rgba(255,215,0,1), inset 0 0 30px rgba(255,215,0,0.1);transform:translateY(-3px) scale(1.05);animation:none}
.btn.ghost{background:transparent;color:var(--accent-2);border-color:var(--accent-2);border-style:solid;box-shadow:0 0 15px rgba(127,255,0,0.3)}
.btn.ghost:hover{background:var(--accent-2);color:#0d0d0d;box-shadow:0 0 40px rgba(127,255,0,1);transform:translateY(-3px) scale(1.05);animation:none}

/* Links - Terminal Style */
a{color:var(--accent);text-decoration:none;transition:all 0.2s ease;font-weight:bold}
a:visited{color:var(--accent-dark)}
a:hover{color:var(--accent-2);text-shadow:0 0 15px rgba(127,255,0,0.6);text-decoration:underline}

/* Sections - Terminal Style */
h2{font-family:'Orbitron', 'Share Tech Mono', monospace;letter-spacing:3px;color:var(--accent);font-size:20px;text-transform:uppercase;margin-bottom:2rem;position:relative;padding:1rem;background:rgba(255,215,0,0.05);border:2px solid var(--accent);border-left:8px solid var(--accent);text-shadow:var(--glow);font-weight:bold;box-shadow:0 0 20px rgba(255,215,0,0.2), inset 0 0 20px rgba(255,215,0,0.05);animation:header-glow 4s ease-in-out infinite}
@keyframes header-glow{0%,100%{text-shadow:0 0 15px rgba(255,215,0,0.6), 0 0 30px rgba(255,215,0,0.4)} 50%{text-shadow:0 0 25px rgba(255,215,0,0.9), 0 0 50px rgba(255,215,0,0.6)}}
h2::after{content:'';position:absolute;top:0;right:0;width:20px;height:100%;background:repeating-linear-gradient(0deg, var(--accent) 0px, transparent 2px, transparent 4px, var(--accent) 6px);opacity:0.5;animation:bars-scroll 1s linear infinite}
@keyframes bars-scroll{0%{transform:translateY(0)} 100%{transform:translateY(6px)}}
h2::before{content:'> ';color:var(--accent-2);font-weight:bold}
.card{background:rgba(26,26,26,0.8);border:2px solid rgba(255,215,0,0.3);padding:1.5rem;margin-bottom:1rem;box-shadow:inset 0 0 30px rgba(255,215,0,0.05), 0 0 15px rgba(255,215,0,0.15);transition:all 0.3s ease;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,215,0,0.3), transparent);transition:left 0.6s;animation:card-scan 8s ease-in-out infinite}
@keyframes card-scan{0%,100%{left:-100%} 10%{left:100%} 90%{left:100%}}
.card::after{content:'';position:absolute;top:0;right:0;width:40px;height:100%;background:linear-gradient(90deg, transparent, rgba(255,215,0,0.1));pointer-events:none}
.card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 0 30px rgba(255,215,0,0.5), inset 0 0 40px rgba(255,215,0,0.1);animation:none}
.card:hover::before{left:100%;animation:none}
.card h3{color:var(--accent);text-transform:uppercase;letter-spacing:1px;font-weight:bold}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem}
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}

/* Small icons for skill headers and brand badges */
.skill-icon{width:22px;height:22px;vertical-align:middle;margin-right:0.5rem;filter:drop-shadow(0 0 10px rgba(255,215,0,0.6)) brightness(1.2) contrast(1.3);}
.app-badge{width:20px;height:20px;vertical-align:middle;margin-right:0.5rem;filter:drop-shadow(0 0 8px rgba(255,215,0,0.5)) brightness(1.2)}
.platform-badge{width:18px;height:18px;vertical-align:middle;margin-right:0.4rem;opacity:0.95;filter:drop-shadow(0 0 8px rgba(255,215,0,0.5)) brightness(1.2)}
.platform-badge.small{width:16px;height:16px;margin-right:0.25rem}
.platform-list{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.app-list{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;margin-left:0.25rem;margin-top:0.75rem}

/* For official logo assets; keep them contained and aligned */
.brand-logo{width:18px;height:18px;vertical-align:middle;margin-right:0.4rem;object-fit:contain}
.brand-logo.small{width:14px;height:14px}

/* Hover and micro-animation effects for badges */
.platform-badge, .app-badge { transition: transform 200ms ease, filter 200ms ease, opacity 200ms ease; }
.platform-badge:hover, .app-badge:hover { transform: translateY(-3px) scale(1.15); filter: drop-shadow(0 0 15px rgba(255,215,0,0.9)) brightness(1.4); opacity: 1; }

@keyframes pixel-pop {
  0% { transform: translateY(0) scale(1); opacity: 0.95 }
  50% { transform: translateY(-4px) scale(1.08); opacity: 1 }
  100% { transform: translateY(0) scale(1); opacity: 0.95 }
}
.platform-badge.animated:hover, .app-badge.animated:hover { animation: pixel-pop 360ms ease-in-out; }

/* Visual grouping for app-list */
.app-list span { display:inline-flex; gap:0.5rem; align-items:center; padding:6px 12px; background: rgba(255,215,0,0.05); border: 2px solid rgba(255,215,0,0.3); transition:all 0.2s ease; font-size:12px; font-weight:bold; }
.app-list span:hover { background: rgba(255,215,0,0.15); transform: translateY(-2px); box-shadow:0 0 20px rgba(255,215,0,0.4); border-color:var(--accent); }

@media (max-width:760px){
  .platform-badge{width:14px;height:14px}
  .platform-badge.small{width:12px;height:12px}
  .app-badge{width:16px;height:16px}
}

/* Timeline - Work History Terminal */
.timeline{display:flex;flex-direction:column;gap:1.5rem;position:relative;padding-left:2rem}
.timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg, var(--accent), var(--accent-3), var(--accent));box-shadow:0 0 10px rgba(255,215,0,0.5);opacity:0.6;animation:timeline-pulse 3s ease-in-out infinite}
@keyframes timeline-pulse{0%,100%{box-shadow:0 0 10px rgba(255,215,0,0.5)} 50%{box-shadow:0 0 20px rgba(255,215,0,0.9)}}
.timeline-item{background:rgba(26,26,26,0.9);padding:1.5rem;padding-left:2rem;border:2px solid rgba(255,215,0,0.3);border-left:6px solid var(--accent);transition:all 0.3s ease;position:relative;box-shadow:inset 0 0 30px rgba(255,215,0,0.05), 0 0 15px rgba(255,215,0,0.15);animation:item-appear 0.6s ease-out}
@keyframes item-appear{0%{opacity:0;transform:translateX(-20px)} 100%{opacity:1;transform:translateX(0)}}
.timeline-item::before{content:'●';position:absolute;left:-2.5rem;top:1.5rem;font-size:20px;color:var(--accent);text-shadow:0 0 15px rgba(255,215,0,0.8);animation:dot-pulse 3s ease-in-out infinite}
@keyframes dot-pulse{0%,100%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)}}
.timeline-item::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:var(--scanline);opacity:0.06;pointer-events:none}
.timeline-item:hover{background:rgba(26,26,26,1);transform:translateX(8px);box-shadow:0 0 30px rgba(255,215,0,0.4), inset 0 0 40px rgba(255,215,0,0.1);border-left-width:8px}
.timeline-item.current{border-left-color:var(--accent-2);border-color:var(--accent-2);background:rgba(26,26,26,0.95);box-shadow:0 0 30px rgba(127,255,0,0.4), inset 0 0 40px rgba(127,255,0,0.1);animation:current-glow 2s ease-in-out infinite}
@keyframes current-glow{0%,100%{box-shadow:0 0 30px rgba(127,255,0,0.4), inset 0 0 40px rgba(127,255,0,0.1)} 50%{box-shadow:0 0 50px rgba(127,255,0,0.7), inset 0 0 60px rgba(127,255,0,0.2)}}
.timeline-item.current::before{color:var(--accent-2);text-shadow:0 0 20px rgba(127,255,0,1);animation:pulse-active 1.5s ease-in-out infinite}
@keyframes pulse-active{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.8;transform:scale(1.4)}}
.timeline-item.current h3::after{content:' [ACTIVE]';font-size:11px;color:var(--accent-2);font-weight:bold;text-transform:uppercase;letter-spacing:2px;padding:4px 10px;background:rgba(127,255,0,0.15);margin-left:10px;border:2px solid var(--accent-2);box-shadow:0 0 15px rgba(127,255,0,0.4);animation:badge-blink 2s ease-in-out infinite}
@keyframes badge-blink{0%,100%{opacity:1} 50%{opacity:0.7}}
.timeline-item h3{margin:0 0 0.5rem 0;color:var(--accent);font-size:18px;text-shadow:0 0 10px rgba(255,215,0,0.4);text-transform:uppercase;letter-spacing:1px;font-weight:bold}
.timeline-item h3::before{content:'>> ';color:var(--accent-2)}

/* Grouping for freelance and other roles */
.timeline-group{display:flex;flex-direction:column;gap:1rem;margin-top:1rem;padding:1.5rem;background:rgba(255,215,0,0.02);border:2px dashed rgba(255,215,0,0.3);position:relative}
.timeline-group::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg, var(--accent-3) 0px, transparent 10px, transparent 20px, var(--accent-3) 30px)}
.timeline-group-title{font-family:'Orbitron', 'Share Tech Mono', monospace;font-size:14px;color:var(--accent-3);letter-spacing:3px;margin:0 0 1rem 0;padding:0.6rem 1.2rem;background:var(--accent-3);color:#0d0d0d;display:inline-block;text-shadow:none;box-shadow:0 0 20px rgba(255,111,0,0.6);font-weight:bold;text-transform:uppercase;border:2px solid var(--accent-3)}
.timeline-group-title::before{content:'[ CLASSIFICATION: '}
.timeline-group-title::after{content:' ]'}
.timeline-group .timeline-item{border-left-color:var(--accent-3);border-left-width:5px;padding-left:1.5rem;background:rgba(26,26,26,0.85);border-color:rgba(255,111,0,0.4)}

/* Removed timeline-subgroup: Founded is now a top-level group */

/* Achievements */
.achievements ul, .highlights ul{margin:0;padding-left:1rem}

/* Media Showcase Section */
.media-showcase{margin:3rem 0;text-align:center}
.media-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:2rem;max-width:1100px;margin:0 auto}
.media-card{background:rgba(26,26,26,0.9);border:3px solid rgba(255,215,0,0.3);padding:2rem;position:relative;overflow:hidden;transition:all 0.3s ease;box-shadow:inset 0 0 30px rgba(255,215,0,0.05), 0 0 15px rgba(255,215,0,0.15);display:flex;flex-direction:column;align-items:center}
.media-card::after{content:'';position:absolute;top:0;right:0;width:30px;height:100%;background:linear-gradient(90deg, transparent, rgba(255,215,0,0.1));pointer-events:none}
.media-card:hover{transform:translateY(-8px) scale(1.02);border-color:var(--accent);background:rgba(26,26,26,1);box-shadow:0 0 40px rgba(255,215,0,0.6), inset 0 0 50px rgba(255,215,0,0.15)}
.media-thumb{width:100%;aspect-ratio:4/3;background-size:cover;background-position:center;background-repeat:no-repeat;border:3px solid rgba(255,215,0,0.4);border-radius:6px;box-shadow:inset 0 0 20px rgba(255,215,0,0.08), 0 0 15px rgba(0,0,0,0.35);margin-bottom:1rem;transition:transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease}
.media-card:hover .media-thumb{transform:scale(1.02);border-color:var(--accent);box-shadow:0 0 28px rgba(255,215,0,0.4), inset 0 0 28px rgba(255,215,0,0.12)}
.media-thumb.media-thumb--contain{aspect-ratio:16/9;background-size:contain;background-color:#0f0f0f}
.media-card:hover .media-thumb.media-thumb--contain{transform:scale(1.01)}
.media-icon{font-size:48px;margin-bottom:1rem;text-align:center;filter:drop-shadow(0 0 15px rgba(255,215,0,0.6))}
.media-card h3{color:var(--accent);text-transform:uppercase;letter-spacing:2px;font-weight:bold;margin:1rem 0;font-size:16px;text-shadow:0 0 10px rgba(255,215,0,0.5);font-family:'Orbitron', 'Share Tech Mono', monospace;text-align:center}
.media-card h3::before{content:'[ '}
.media-card h3::after{content:' ]'}
.media-card p{color:var(--muted);line-height:1.8;margin-bottom:1.5rem;font-size:14px;border-left:3px solid var(--accent-2);padding-left:12px;background:rgba(127,255,0,0.02);text-align:left;width:100%}
.media-link{display:inline-block;color:var(--accent-2);font-weight:bold;text-transform:uppercase;font-size:12px;letter-spacing:1px;padding:0.6rem 1.2rem;border:2px solid var(--accent-2);background:rgba(127,255,0,0.05);transition:all 0.2s ease;text-decoration:none;box-shadow:0 0 10px rgba(127,255,0,0.3)}
.media-link::before{content:'> '}
.media-link:hover{background:var(--accent-2);color:#0d0d0d;box-shadow:0 0 30px rgba(127,255,0,0.8);transform:translateX(5px)}

/* Equal-height cards in media showcase */
#media .grid{align-items:stretch}
#media .card{height:100%;display:flex;flex-direction:column}
#media .card p{flex:1}

/* Contact Section - Pip-Boy Interface */
.contact-section{padding:4rem 2rem;position:relative}
.contact-card{background:rgba(26,26,26,0.95);border:4px solid var(--accent);padding:3rem;max-width:900px;margin:0 auto;box-shadow:0 0 40px rgba(255,215,0,0.4), inset 0 0 50px rgba(255,215,0,0.08);position:relative;overflow:hidden;animation:card-pulse 4s ease-in-out infinite}
@keyframes card-pulse{0%,100%{box-shadow:0 0 40px rgba(255,215,0,0.4), inset 0 0 50px rgba(255,215,0,0.08)} 50%{box-shadow:0 0 60px rgba(255,215,0,0.7), inset 0 0 70px rgba(255,215,0,0.15)}}
.contact-card::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:conic-gradient(from 0deg, transparent, rgba(255,215,0,0.2), transparent 30%);animation:rotate-border 8s linear infinite;pointer-events:none;z-index:1}
@keyframes rotate-border{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}
.contact-card::after{content:'▲';position:absolute;top:15px;right:15px;color:var(--accent-2);font-size:24px;opacity:0.6;animation:radiation-spin 6s linear infinite;z-index:3}
@keyframes radiation-spin{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}
.contact-card > *{position:relative;z-index:2}
.contact-card > p{text-align:center;font-size:16px;margin-bottom:2.5rem;color:var(--muted);line-height:2;border:2px solid rgba(255,215,0,0.3);padding:1rem;background:rgba(255,215,0,0.03)}
.contact-card > p::before{content:'> STATUS UPDATE: ';color:var(--accent);font-weight:bold;display:block;margin-bottom:8px;letter-spacing:1px}
.contact-methods{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:1.5rem;margin-bottom:2.5rem}
.contact-item{background:rgba(255,215,0,0.03);padding:1.5rem;border:2px solid rgba(255,215,0,0.4);transition:all 0.2s ease;box-shadow:inset 0 0 20px rgba(255,215,0,0.05), 0 0 10px rgba(255,215,0,0.2);position:relative;animation:item-float 3s ease-in-out infinite}
@keyframes item-float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}
.contact-item::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--accent-2);box-shadow:0 0 10px rgba(127,255,0,0.6);animation:pulse-glow 2s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 10px rgba(127,255,0,0.6)} 50%{box-shadow:0 0 20px rgba(127,255,0,1)}}
.contact-item:hover{background:rgba(255,215,0,0.08);border-color:var(--accent);transform:translateY(-8px);box-shadow:0 0 30px rgba(255,215,0,0.5), inset 0 0 30px rgba(255,215,0,0.15);animation:none}
.contact-label{display:block;font-weight:bold;color:var(--accent);margin-bottom:0.75rem;font-size:12px;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px rgba(255,215,0,0.5)}
.contact-label::before{content:'> '}
.contact-item a{color:var(--accent-2);font-weight:bold;text-decoration:none;transition:all 0.2s ease;letter-spacing:0.5px}
.contact-item a:hover{color:var(--accent);text-shadow:var(--glow)}
.contact-item span:not(.contact-label){color:var(--muted);font-weight:bold}
.contact-section .cta-row{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* Footer - Terminal Style */
.site-footer{padding:2rem 0;border-top:4px solid var(--accent);box-shadow:0 -5px 30px rgba(255,215,0,0.2);background:rgba(13,13,13,0.95);position:relative;animation:footer-glow 5s ease-in-out infinite}
@keyframes footer-glow{0%,100%{box-shadow:0 -5px 30px rgba(255,215,0,0.2)} 50%{box-shadow:0 -10px 50px rgba(255,215,0,0.4)}}
.site-footer::before{content:'[ END OF FILE ]';position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--accent);color:#0d0d0d;padding:3px 15px;font-size:10px;font-weight:bold;letter-spacing:2px}
.site-footer::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:var(--scanline);opacity:0.1;pointer-events:none}
.footer-inner{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.footer-inner small{color:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.footer-inner small::before{content:'> ';color:var(--accent-2)}
.footer-inner a{color:var(--accent);text-decoration:none;transition:all 0.2s ease;font-weight:bold}
.footer-inner a:hover{color:var(--accent-2);text-shadow:0 0 15px rgba(127,255,0,0.8)}

/* Responsive - Pip-Boy Adaptation */
@media (max-width:760px){
  .hero{grid-template-columns:1fr;grid-auto-rows:auto;text-align:center;gap:2rem;padding:2rem}
  .hero::before{font-size:9px;top:5px;left:10px}
  .avatar{margin:0 auto}
  .avatar::before{font-size:8px;bottom:-20px}
  .hero h1{font-size:22px;letter-spacing:1px}
  .hero h1::before{font-size:12px}
  .lead{font-size:14px}
  .header-inner{padding:1rem}
  .site-header::before{font-size:8px;padding:2px 8px}
  nav{position:absolute;top:100%;left:0;right:0;background:rgba(13,13,13,0.98);backdrop-filter:blur(8px);border-bottom:3px solid var(--accent);border-top:2px solid var(--accent-2);box-shadow:0 8px 32px rgba(255,215,0,0.4);display:none}
  nav::before{content:'[ NAVIGATION TERMINAL ]';position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--accent-2);color:#0d0d0d;padding:2px 10px;font-size:9px;font-weight:bold;letter-spacing:2px}
  .nav-list{display:flex;flex-direction:column;padding:1rem;gap:0.5rem}
  .nav-list a{padding:1rem;background:rgba(255,215,0,0.05);border:2px solid rgba(255,215,0,0.3)}
  .nav-toggle{display:inline-block}
  body.nav-open nav{display:block}
  .skills-grid{grid-template-columns:1fr}
  .contact-methods{grid-template-columns:1fr}
  .contact-card{padding:2rem 1.5rem}
  .contact-section::before{font-size:10px;padding:4px 12px}
  .timeline-item.current h3::after{display:block;margin-top:0.5rem;margin-left:0}
  h2{font-size:16px;padding:0.75rem}
  .timeline{padding-left:1.5rem}
  .timeline-item{padding:1rem;padding-left:1.5rem}
  .btn{padding:0.7rem 1.5rem;font-size:11px}
}

/* Utility - Terminal Style */
ul{line-height:2;color:var(--muted);font-size:14px}
ul li{margin-bottom:0.75rem;position:relative;padding-left:1.5rem}
ul li::before{content:'>';position:absolute;left:0;color:var(--accent-2);font-size:16px;font-weight:bold}
.lead small{color:var(--muted)}
strong{color:var(--accent);text-shadow:0 0 8px rgba(255,215,0,0.4)}

/* Lightbox overlay (shared across pages) */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.8);z-index:10000}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:90vh;border:4px solid var(--accent);box-shadow:0 0 40px rgba(255,215,0,0.6);background:#111}
.lightbox .close{position:absolute;top:20px;right:20px;background:var(--accent);color:#0d0d0d;border:2px solid var(--accent);font-weight:bold;padding:6px 12px;cursor:pointer}

/* Headings with retro glow */
h1,h2,h3,h4{text-shadow: 0 0 15px rgba(255,215,0,0.4)}
h3{color:var(--accent);font-weight:bold;letter-spacing:1px}
h4{color:var(--accent-2);font-weight:bold;text-transform:uppercase;font-size:15px;letter-spacing:2px}
h4::before{content:'>> ';color:var(--accent)}

/* Accessibility focus states */
a:focus{outline:3px solid var(--accent);outline-offset:3px;box-shadow:0 0 20px rgba(255,215,0,0.6)}
button:focus{outline:3px solid var(--accent);outline-offset:3px;box-shadow:0 0 20px rgba(255,215,0,0.6)}

/* CRT Flicker Effect */
@keyframes crt-flicker{
  0%{opacity:1}
  50%{opacity:0.98}
  100%{opacity:1}
}

/* Radiation Symbol Animation */
@keyframes radiation-pulse{
  0%,100%{transform:scale(1);opacity:0.4}
  50%{transform:scale(1.05);opacity:0.7}
}

/* Terminal Text Effect */
@keyframes terminal-glow{
  0%,100%{text-shadow:0 0 10px rgba(255,215,0,0.4)}
  50%{text-shadow:0 0 20px rgba(255,215,0,0.8), 0 0 30px rgba(255,215,0,0.5)}
}

/* Vault-Tec Loading Bar */
@keyframes loading-bar{
  0%{width:0}
  100%{width:100%}
}