/* assets/css/style.css */

/* --- GLOBAL THEME & FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    --neon-pink: #ff00ff;
    --neon-blue: #00ffff;
    --neon-green: #39ff14;
    --background-color: #0d0221;
    --font-family-retro: 'Press Start 2P', cursive;
}

/* --- BODY & BACKGROUND STYLES --- */
body.homepage, body.visualizer-page, body.about-page {
    /* REMOVED: background-color: var(--background-color); */
    background-image: url('../dna.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* CHANGE 1: Let the image show through without a color overlay */
    background-blend-mode: normal; 
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

body.homepage, body.about-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

/* Scanline effect for ALL pages */
body.homepage::before, body.visualizer-page::before, body.about-page::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.3) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 75%, transparent 75%, transparent);
    background-size: 100% 4px;
    z-index: 2;
    pointer-events: none;
    animation: scanlines 10s linear infinite;
}

@keyframes scanlines {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

/* --- HOMEPAGE & ABOUT PAGE CONTAINER STYLES --- */
.homepage-container {
    font-family: var(--font-family-retro);
    text-align: center;
    padding: 2rem;
    max-width: 900px;
    /* CHANGE 2: Removed the background box */
    /* REMOVED: background: rgba(13, 2, 33, 0.6); */
    position: relative;
    z-index: 3;
    margin: 1rem;
}

/* CHANGE 3: Enhanced text shadows for readability on a complex background */
.homepage-container header h1,
.homepage-container header p,
.homepage-container main,
.homepage-container footer,
.footer-link {
    text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000;
}

.homepage-container header h1{font-size:2em;color:var(--neon-blue);letter-spacing:4px;animation:flicker 3s infinite alternate}@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{text-shadow:0 0 4px #000,0 0 10px #000,0 0 18px #000,0 0 40px var(--neon-blue),0 0 80px var(--neon-blue),0 0 90px var(--neon-blue)}20%,24%,55%{text-shadow:0 0 5px #000,0 0 10px #000}}.homepage-container header p{font-size:.8em;color:var(--neon-pink);line-height:1.5;margin-top:1rem}.homepage-container main{margin-top:2rem;color:#fff}.homepage-container .intro h2{color:var(--neon-blue);font-size:1.2em;margin-bottom:1rem}.homepage-container .intro p{font-size:.7em;line-height:1.8}.homepage-container .cta{margin-top:2.5rem}.button-link{font-family:var(--font-family-retro);font-size:1em;text-decoration:none;color:var(--background-color);background-color:var(--neon-blue);padding:1rem 2rem;border:4px solid var(--background-color);box-shadow:0 0 10px var(--neon-blue),inset 0 0 5px var(--neon-blue);transition:all .2s ease-in-out}.button-link:hover{color:#fff;background-color:var(--neon-pink);box-shadow:0 0 20px var(--neon-pink),inset 0 0 10px var(--neon-pink);transform:scale(1.05)}.homepage-container footer{margin-top:3rem;font-size:.6em;color:var(--neon-blue)}

.footer-link {
    color: var(--neon-blue);
    text-decoration: none;
    transition: all 0.2s ease;
}
.footer-link:hover {
    color: var(--neon-pink);
    text-shadow: 0 0 5px #000, 0 0 8px var(--neon-pink);
}

/* --- VISUALIZER PAGE STYLES --- */
#mynetwork {
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

/* NEON TOOLTIP STYLES */
.vis-tooltip {
  background-color: rgba(10, 25, 10, 0.85);
  border: 2px solid var(--neon-green);
  border-radius: 8px;
  color: var(--neon-green);
  font-family: 'Consolas', 'Menlo', 'Monaco', monospace;
  padding: 15px;
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  max-width: 350px !important;
  z-index: 1001;
  white-space: normal;
  position: absolute;
}
.tooltip-content{display:flex;flex-direction:column;gap:8px}.tooltip-title{color:var(--neon-blue);font-size:1.2em;text-align:center;text-shadow:0 0 8px rgba(0,255,255,.7);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(57,255,20,.5)}.tooltip-row{display:flex;justify-content:space-between;align-items:center;font-size:.9em}.tooltip-label{color:rgba(255,255,255,.7);font-weight:700;margin-right:15px;text-transform:uppercase}.tooltip-value{color:var(--neon-green);text-align:right;word-break:break-all}

/* ENHANCED MODAL STYLES */
#modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 1rem;
}
#welcome-modal{background:rgba(255,255,255,.95);border:2px solid var(--neon-blue);box-shadow:0 0 25px rgba(0,255,255,.5);font-family:sans-serif;padding:2.5rem;border-radius:10px;max-width:600px;width:100%;text-align:center}#slide-text{font-size:1.2em;line-height:1.7;color:#222;margin-bottom:2rem;min-height:120px}#next-slide-btn{font-family:sans-serif;font-weight:700;background-color:#3498db;color:#fff;border:none;padding:15px 30px;font-size:1.1em;border-radius:5px;cursor:pointer;transition:background-color .2s}#next-slide-btn:hover{background-color:#2980b9}

/* Vis.js Button Overrides */
.vis-navigation {
  bottom: 15px !important;
  right: 15px !important;
  z-index: 100;
}
.vis-navigation .vis-button{background-color:rgba(255,255,255,.9);color:#000;border:1px solid #000;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.4);transition:all .2s ease-in-out}.vis-navigation .vis-button:hover{background-color:#000;color:#fff;transform:scale(1.1)}.vis-navigation .vis-button.vis-up,.vis-navigation .vis-button.vis-down,.vis-navigation .vis-button.vis-left,.vis-navigation .vis-button.vis-right,.vis-navigation .vis-button.vis-zoomIn,.vis-navigation .vis-button.vis-zoomOut,.vis-navigation .vis-button.vis-zoomExtends{background-image:none!important;position:relative;font-weight:700;font-size:20px}.vis-navigation .vis-button.vis-zoomIn::after{content:'+'}.vis-navigation .vis-button.vis-zoomOut::after{content:'-'}.vis-navigation .vis-button.vis-up::after{content:'▲';font-size:14px}.vis-navigation .vis-button.vis-down::after{content:'▼';font-size:14px}.vis-navigation .vis-button.vis-left::after{content:'◄';font-size:14px}.vis-navigation .vis-button.vis-right::after{content:'►';font-size:14px}.vis-navigation .vis-button.vis-zoomExtends::after{content:'⛶';font-size:16px}.vis-navigation .vis-separator-line{display:none}

.highlighted{
  color: yellow;
  font-weight: bold;
}