/* EDDIE RESUME | Style 05 V3 — Full-Bleed Future Laboratory + Visible Animated RGB
   Add AFTER the existing <style> in index.html.
   Does not remove or replace HTML or JavaScript. */
:root {
  --lab-bg: #080f1d;
  --lab-panel: rgba(12, 25, 46, .89);
  --lab-panel-hi: rgba(22, 44, 74, .88);
  --lab-blue: #67b8ff;
  --lab-violet: #ae8aff;
  --lab-white: #e7f3ff;
  --lab-muted: #a9c3dc;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  color: var(--lab-white) !important;
  background-color: var(--lab-bg) !important;
  background-image: linear-gradient(135deg, #060c1c 0%, #101b3b 44%, #090e23 100%) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  /* Moving RGB glows live in a separate layer so the banner and cards remain unchanged. */
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
}

/* Moving full-screen RGB light is layered ABOVE the solid body background,
   BELOW every page section. The original V2 used z-index:-1 and was hidden
   behind the opaque body, which made the animation hard to see. */
body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 46% at 10% 30%, rgba(15, 116, 255, .78), transparent 79%),
    radial-gradient(ellipse 39% 42% at 92% 22%, rgba(177, 60, 250, .71), transparent 80%),
    radial-gradient(ellipse 47% 45% at 72% 84%, rgba(0, 212, 225, .66), transparent 78%),
    radial-gradient(ellipse 40% 48% at 21% 92%, rgba(245, 39, 140, .61), transparent 80%);
  opacity: .91;
  filter: blur(20px) hue-rotate(0deg);
  will-change: transform, filter, opacity;
  animation: future-lab-rgb-flow 8s ease-in-out infinite;
  animation: future-lab-rgb-flow 8s ease-in-out infinite;
  animation-delay: var(--bg-animation-delay, 0ms);

}
/* Fixed cyber-grid overlay. It remains static while the RGB lights move. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .29;
  background-image:
    linear-gradient(rgba(118, 183, 255, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 183, 255, .11) 1px, transparent 1px);
  background-size: 48px 48px;
}
/* Page remains clickable and visually ABOVE both decorative light layers. */
body > .sunset-banner,
body > .top-nav,
body > header,
body > .resume-container,
body > footer {
  position: relative;
  z-index: 1;
}
body > .top-nav { z-index: 10; }
@keyframes future-lab-rgb-flow {
  0%, 100% { transform: translate3d(-9%, -5%, 0) scale(1.12); filter: blur(16px) hue-rotate(0deg) saturate(1.25); opacity: .94; }
  50% { transform: translate3d(9%, 6%, 0) scale(1.17); filter: blur(16px) hue-rotate(80deg) saturate(1.5); opacity: 1; }
}

/* V3: true full-width panoramic lab artwork, no solid dark side extensions. */
.sunset-banner {
  position: relative !important;
  width: 100% !important;
  height: clamp(245px,24vw,360px) !important;
  background-color: #060c16 !important;
  background-image: url("images/future-lab-hero-fullbleed.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid rgba(129,190,255,.56);
  box-shadow: inset 0 -32px 38px rgba(7,17,31,.3), 0 12px 45px rgba(22,92,159,.14);
}
.sunset-banner::after {
  content:""; display:block; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg,transparent 66%,rgba(5,13,28,.57));
}
.top-nav, body > nav.top-nav, .resume-container > nav {
  width: min(1060px, calc(100% - 28px)) !important;
  max-width: 1060px !important;
  box-sizing: border-box !important;
  margin: -20px auto 0 !important;
  position: relative !important;
  z-index: 10 !important;
  padding: 13px 18px !important;
  border: 1px solid rgba(125,192,255,.62) !important;
  border-radius: 12px !important;
  background: rgba(12,28,50,.95) !important;
  box-shadow: 0 0 25px rgba(50,129,255,.24), inset 0 1px 0 rgba(226,247,255,.15) !important;
  backdrop-filter: blur(16px);
}
.top-nav ul, .resume-container > nav ul {
  display:flex !important; gap:clamp(12px,3vw,44px) !important;
  flex-wrap:wrap; justify-content:center !important;
  list-style:none; padding:0; margin:0;
}
.top-nav a, .resume-container > nav a {
  color: #daeeff !important; background: none !important;
  border: none !important; font-weight:650 !important;
  letter-spacing:.06em !important; text-decoration:none !important;
  display: inline-block !important; padding:8px 10px !important; line-height:1.25; transition:color .25s, text-shadow .25s;
}
.top-nav a:hover, .resume-container > nav a:hover {
  color:#84d4ff !important; text-shadow:0 0 13px rgba(77,186,255,.9);
}
body > header, header {
  position:relative; text-align:center !important;
  background:transparent !important; color:var(--lab-white) !important;
  border:none !important; box-shadow:none !important;
  padding:24px 20px 16px !important;
}
body > header h1, header h1 {
  color: #f2f9ff !important;
  font-weight:800 !important; letter-spacing:.08em;
  text-shadow: 0 0 22px rgba(84,172,255,.48);
  margin: 0 0 14px !important;
}
body > header p, header p {
  color:#afc9e4 !important;
  line-height:1.8 !important;
}
.resume-container {
  width: min(1060px, calc(100% - 28px)) !important;
  max-width:1060px !important;
  margin: 14px auto 48px !important;
  padding: 18px !important;
  box-sizing:border-box !important;
  background:rgba(7,15,29,.53) !important;
  border:1px solid rgba(103,183,255,.25) !important;
  border-radius: 24px !important;
  box-shadow:0 24px 65px rgba(0,0,0,.34) !important;
}
/* Resume cards: keep the original grid and all content/interaction. */
.resume-container main > section,
.resume-container main > article,
.resume-container .card,
.resume-container .info-card,
.resume-container .link-card,
.resume-container .tile {
  color:var(--lab-white) !important;
  background:linear-gradient(140deg,rgba(29,53,88,.95),rgba(9,21,40,.95)) !important;
  border:1px solid rgba(101,181,255,.45) !important;
  border-radius:16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 6px 25px rgba(2,10,26,.35), 0 0 16px rgba(65,151,255,.075) !important;
  transition: transform .22s ease, border-color .22s ease,box-shadow .22s ease;
}
.resume-container main > section:hover,
.resume-container main > article:hover,
.resume-container .card:hover,
.resume-container .link-card:hover {
  transform:translateY(-3px);
  border-color:rgba(123,214,255,.78) !important;
  box-shadow:0 8px 34px rgba(48,143,248,.17) !important;
}
.resume-container h2, .resume-container h3 {
  color:#f0f8ff !important; text-shadow:0 0 10px rgba(119,174,253,.2);
}
.resume-container p, .resume-container li,
.resume-container span, .resume-container summary, .resume-container strong {
  color:inherit;
}
.resume-container a { color:#9dd6ff !important; }
.resume-container a:hover { color:#d9efff !important; }
.resume-container details {
  background:rgba(10,28,52,.62) !important;
  border:1px solid rgba(114,190,255,.27) !important;
  border-radius:10px; padding:10px 14px; color:var(--lab-white) !important;
}
.resume-container summary { cursor:pointer; color:#c9e5ff !important; }
.resume-container details[open] {border-color:rgba(115,190,255,.65) !important;}
.resume-container button, .resume-container .btn {
  background:linear-gradient(100deg,#15436f,#263f77) !important;
  border:1px solid #64b8ff !important; border-radius:10px;
  color:#effaff !important; box-shadow:0 0 15px rgba(89,169,255,.19);
}
footer { color:#9ab5cf !important; background:transparent !important; }
@media (max-width:600px) {
  .sunset-banner { height:220px !important; background-size:cover !important; background-position: 50% center !important; }
  .top-nav, body > nav.top-nav {margin-top:-15px !important;}
  .top-nav ul {gap:5px !important;}
  .top-nav a {font-size:.85rem !important;padding:7px 5px;}
  .resume-container {padding:12px !important;}
  body > header h1 {font-size:1.85rem !important;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation-duration:.01ms !important;transition-duration:.01ms !important;}
}


/* ========================================================
   Eddie Resume V3 integration patch
   Keeps original HTML content, links, details, and work history.
   Fixes the old light UI's selector mismatches on all three pages.
   ======================================================== */

/* Ensure decorative background stays behind all page content. */
.future-lab-page > header,
.future-lab-page > .container,
.future-lab-page > .resume-container,
.future-lab-page > footer {
  position: relative;
  z-index: 1;
}
.future-lab-page > header { background: transparent !important; }

/* Prevent link cards from retaining old white surfaces and pale lettering. */
.future-lab-home .resume-container .resume-links {
  gap: 16px;
  margin-top: 0;
  margin-bottom: 20px;
}
.future-lab-home .resume-container .resume-link-card {
  background: linear-gradient(145deg, rgba(29,53,88,.97), rgba(9,21,40,.97)) !important;
  color: #e9f5ff !important;
  border: 1px solid rgba(101,181,255,.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 9px 26px rgba(2,10,26,.36) !important;
  border-radius: 16px !important;
  padding: 34px 20px !important;
  text-decoration: none !important;
  min-height: 220px;
}
.future-lab-home .resume-container .resume-link-card:hover,
.future-lab-home .resume-container .resume-link-card:focus-visible {
  transform: translateY(-5px);
  border-color: #9bd9ff !important;
  box-shadow: 0 12px 32px rgba(48,143,248,.25) !important;
}
.future-lab-home .resume-container .resume-link-card h2 {
  color: #f1f8ff !important;
  text-shadow: 0 0 13px rgba(119,174,253,.27) !important;
}
.future-lab-home .resume-container .resume-link-card p {
  color: #bbd2ea !important;
  line-height: 1.75 !important;
}
.future-lab-home .resume-container .resume-link-card span {
  color: #82ceff !important;
  font-weight: 700;
}
.future-lab-home .resume-container .resume-link-card .card-icon {
  filter: drop-shadow(0 0 9px rgba(114,190,255,.35));
}

/* Secondary pages use .container, not .resume-container. */
.future-lab-detail .container {
  position: relative !important;
  z-index: 1 !important;
  width: min(1060px, calc(100% - 28px)) !important;
  max-width: 1060px !important;
  margin: 14px auto 48px !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(103,183,255,.28) !important;
  border-radius: 22px !important;
  background: rgba(7,15,29,.62) !important;
  box-shadow: 0 24px 65px rgba(0,0,0,.34) !important;
}
.future-lab-detail .container > main {
  width: 100%;
  margin: 0;
}
.future-lab-detail .container .card {
  color: #e8f2ff !important;
  background: linear-gradient(145deg, rgba(29,53,88,.97), rgba(9,21,40,.97)) !important;
  border: 1px solid rgba(101,181,255,.42) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 9px 26px rgba(2,10,26,.33) !important;
}
.future-lab-detail .container .card:hover {
  border-color: rgba(128,211,255,.75) !important;
  box-shadow: 0 12px 30px rgba(48,143,248,.19) !important;
}
.future-lab-detail .container .card h2,
.future-lab-detail .container .card h3 {
  color: #eaf6ff !important;
  text-shadow: 0 0 12px rgba(119,174,253,.22);
}
.future-lab-detail .container .work-card h3 {
  color: #8ed2ff !important;
}
.future-lab-detail .container .card p,
.future-lab-detail .container .card li,
.future-lab-detail .container .card ol,
.future-lab-detail .container .card ul {
  color: #d4e6f7 !important;
}
.future-lab-detail .container .card strong {
  color: #f2faff !important;
  font-weight: 700;
}
.future-lab-detail .container .work-card ul strong {
  color: #a5d9ff !important;
}
.future-lab-detail .container .work-card {
  border-left: 4px solid #69b9ff !important;
}
.future-lab-detail .container .achievement-card {
  background: rgba(20,40,70,.88) !important;
  border: 1px solid rgba(117,184,255,.31) !important;
  color: #dceeff !important;
  border-radius: 14px;
}
.future-lab-detail .container .achievement-number {
  color: #91dbff !important;
  text-shadow: 0 0 16px rgba(100,177,255,.25);
}
.future-lab-detail .container .achievement-card p {
  color: #c9e2f7 !important;
}
.future-lab-detail .container .back-link {
  display: block !important;
  color: #c1e7ff !important;
  background: rgba(19,42,72,.92) !important;
  border: 1px solid rgba(105,183,255,.5) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.future-lab-detail .container .back-link:hover,
.future-lab-detail .container .back-link:focus-visible {
  color: #f1faff !important;
  background: rgba(30,68,105,.94) !important;
}
.future-lab-detail > header {
  margin: 20px auto 0;
  padding: 24px 20px 16px !important;
}
.future-lab-detail > header p {
  color: #bcd4eb !important;
}
.future-lab-page footer,
.future-lab-page > footer {
  position: relative;
  z-index: 1;
  color: #a8c4df !important;
}

/* Keyboard focus remains visible against the dark surfaces. */
.future-lab-page a:focus-visible,
.future-lab-page summary:focus-visible {
  outline: 2px solid #a2e2ff;
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .future-lab-detail .container {
    width: calc(100% - 28px) !important;
    padding: 12px !important;
  }
  .future-lab-detail .container .card {
    padding: 22px !important;
  }
  .future-lab-home .resume-container .resume-link-card {
    min-height: 0;
  }
}
@media (max-width: 480px) {
      .future-lab-detail .container .achievement-grid {
    grid-template-columns: 1fr;
  }
}