/* Base Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Courier New', monospace; background:#000; color:#eee; overflow-x:hidden; }

/* Logs Paragraph Styling */
.logs .terminal p {
  margin: 0.2rem 0;
  transition: opacity 1s ease;
}

/* Fragments List */
.fragments-list {
  list-style:none;
  padding:0;
  margin:1rem 0;
}

.fragments-list li {
  margin:0.3rem 0;
  font-size:0.95rem;
  color:#0ff;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
  transition: text-shadow 0.3s ease;
}

.fragments-list li.glitch:hover {
  text-shadow: 0 0 10px #0ff, 0 0 20px #3df, 0 0 30px #0ff;
}

/* Form hover & click animations */
.form.hover-glitch img {
  transform: scale(1.1) rotate(-2deg);
  filter: drop-shadow(0 0 25px #ff3dff);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.form-message {
  transition: opacity 0.4s ease;
}
/* Glitchy Neon Icons */
.glitch-svg {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
  fill: #0ff;
  filter: drop-shadow(0 0 5px #0ff) drop-shadow(0 0 10px #3df);
  transition: transform 0.2s ease;
}

.glitch-svg:hover {
  transform: translateX(1px) rotate(-2deg) scale(1.1);
  filter: drop-shadow(0 0 8px #0ff) drop-shadow(0 0 15px #3df);
}

.glitch-path {
  animation: glitchPath 1.5s infinite;
}

@keyframes glitchPath {
  0% { transform: translate(0,0); }
  20% { transform: translate(-1px,1px); }
  40% { transform: translate(1px,-1px); }
  60% { transform: translate(-1px,0); }
  80% { transform: translate(1px,1px); }
  100% { transform: translate(0,0); }
}

/* Glitching Text Effect */
.glitch-text {
  color: #0ff;
  font-weight: bold;
  position: relative;
  display: inline-block;
  transition: color 0.2s ease;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.glitch-text:hover {
  animation: textGlitch 1s infinite;
}

@keyframes textGlitch {
  0% { text-shadow: 2px 0 #f0f, -2px 0 #0ff; }
  20% { text-shadow: -2px 1px #f0f, 2px -1px #0ff; }
  40% { text-shadow: 1px -1px #f0f, -1px 1px #0ff; }
  60% { text-shadow: -1px 2px #f0f, 1px -2px #0ff; }
  80% { text-shadow: 2px -2px #f0f, -2px 2px #0ff; }
  100% { text-shadow: 2px 0 #f0f, -2px 0 #0ff; }
}


/* Terminal Styling */
.terminal {
  max-width:800px;
  margin:0 auto 2rem auto;
  background:rgba(0,0,0,0.85);
  border:2px solid #0ff;
  border-radius:8px;
  box-shadow:0 0 20px rgba(0,255,255,0.5);
  font-family:"Courier New", monospace;
  color:#0ff;
  overflow:hidden;
}
.terminal-header {
  display:flex;
  align-items:center;
  padding:6px 12px;
  background:#111;
  border-bottom:2px solid #0ff;
}
.terminal-header .dot { height:10px; width:10px; border-radius:50%; margin-right:6px; }
.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}
.terminal-title { margin-left:auto; font-size:0.9rem; color:#aaa; }
.terminal-body {
  padding:5px 10px; /* reduced padding for smaller height */
  font-size:0.9rem; /* smaller font */
  line-height:1.3;
  min-height:180px; /* smaller box */
  max-height:180px;
  white-space:pre-wrap;
  overflow-y:auto;
  position:relative;
}
.terminal-body::-webkit-scrollbar { width:6px; }
.terminal-body::-webkit-scrollbar-thumb { background: rgba(61,255,255,0.5); border-radius:3px; }
.cursor { display:inline-block; animation:blink 1s steps(1) infinite; color:#0ff; }
@keyframes blink { 50%{opacity:0;} }

/* Background */
.background { position:fixed; width:100%; height:100%; background:radial-gradient(circle at center, rgba(0,0,0,0.9), #000); z-index:-1; }

/* Header */
header { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:rgba(0,0,0,0.7);}
.logo img { max-width:180px; height:auto; filter:drop-shadow(0 0 10px #3df);}
nav a { color:#fff; margin-left:1.5rem; text-decoration:none; font-size:1rem; transition:color 0.3s ease; }
nav a:hover{color:#3df;}

/* Hero */
.hero { text-align:center; padding:4rem 2rem;}
.glix-avatar img { max-width:250px; width:80%; height:auto; animation:pulse 6s infinite; filter:drop-shadow(0 0 15px #3df);}
.tagline { font-size:1.5rem; margin:1rem 0; color:#3df; text-shadow:0 0 10px #3df;}
.cta-buttons .btn { background:#3df; color:#000; padding:0.75rem 1.5rem; border-radius:8px; text-decoration:none; font-weight:bold; transition:all 0.3s ease; }
.cta-buttons .btn:hover { background:#fff; color:#111; }

/* Forms */
.forms { display:flex; justify-content:center; flex-wrap:wrap; gap:2rem; margin-top:2rem; }
.form img { max-width:200px; width:100%; height:auto; filter:drop-shadow(0 0 15px #ff3dff); transition:transform 0.3s ease; }
.form:hover img { transform:scale(1.1);}
.form-message { margin-top:1rem; font-size:1.2rem; color:#ff3dff; text-shadow:0 0 8px #ff3dff;}

/* Logs Section */
.logs { padding:3rem 2rem;}
.logs .terminal { background:rgba(0,0,0,0.85); border:1px solid #3df; border-radius:10px; padding:0.5rem 1rem; font-size:0.85rem; max-width:800px; margin:0 auto; height:180px; overflow-y:auto; color:#3df; }

/* ========================= */
/* Fragments of Signal Styles */
/* ========================= */
#logs .fragments-container {
  position: relative;
  width: 100%;
  height: 180px; /* match terminal height */
  overflow: hidden;
}

#logs .fragment {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  color: #3df;
  opacity: 0;
  text-shadow: 0 0 5px #3df, 0 0 10px #0ff;
  white-space: nowrap;
  animation: fragmentGlitchInOut 2s forwards;
}

@keyframes fragmentGlitchInOut {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) skew(0deg, 0deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) skew(-2deg, 2deg); }
  40% { transform: translate(-48%, -52%) scale(1) skew(2deg, -2deg); }
  60% { transform: translate(-52%, -48%) scale(0.95) skew(-1deg, 1deg); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1) skew(0deg, 0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9) skew(1deg, -1deg); }
}

/* Community */
.community { padding:3rem 2rem; text-align:center;}
.links { display:flex; justify-content:center; gap:2rem; margin-top:1.5rem; flex-wrap:wrap;}
.portal { display:flex; align-items:center; color:#fff; text-decoration:none; background: rgba(61,255,255,0.1); padding:0.75rem 1rem; border-radius:10px; transition:all 0.3s ease;}
.portal:hover{background: rgba(61,255,255,0.3);}
.portal .icon { width:20px; height:20px; margin-right:8px; filter:drop-shadow(0 0 5px #ff3dff); }

/* Footer */
footer { text-align:center; padding:2rem; }
.footer-glitch { color:#3df; animation:glitch 2s infinite; }

/* Animations */
@keyframes pulse {0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes glitch {0%{text-shadow:2px 2px #f0f,-2px -2px #0ff;}25%{text-shadow:-2px -2px #f0f,2px 2px #0ff;}50%{text-shadow:2px -2px #f0f,-2px 2px #0ff;}75%{text-shadow:-2px 2px #f0f,2px -2px #0ff;}100%{text-shadow:2px 2px #f0f,-2px -2px #0ff;}}
.glitch-char { color:#f0f; text-shadow:0 0 5px #f0f,0 0 10px #0ff; }

/* Flicker */
.flicker { animation:screenFlicker 0.2s linear; }
@keyframes screenFlicker {0%{opacity:1;filter:none;}25%{opacity:0.8;filter:blur(1px) brightness(1.2);}50%{opacity:0.6;filter:blur(2px) brightness(0.8);}75%{opacity:0.9;filter:blur(1px) brightness(1.1);}100%{opacity:1;filter:none;}}

/* Responsive */
@media(max-width:768px){.logo img{max-width:140px;}.glix-avatar img{max-width:180px;}.form img{max-width:150px;}.tagline{font-size:1.2rem;}}