/* Reset & Basic Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100%; font-family: 'Roboto Mono', monospace; background: #000; color: #00ff00; overflow-x: hidden; }

/* Matrix Background (Full Page) */
canvas#matrix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: black;
}

/* Alert Banner */
.alert-banner {
  position: fixed;
  top: 0;
  width: 100%;
  background: #ff0000;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 0.8rem 0;
  z-index: 10;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
  0% { background-color: #ff0000; }
  50% { background-color: #ff4d4d; }
  100% { background-color: #ff0000; }
}

/* Wrapper & Panel */
.wrap { display: flex; justify-content: center; align-items: center; height: 100vh; position: relative; z-index: 1; text-align: center; padding: 2rem; }
.panel {
  background: transparent; /* semi-transparent to show matrix behind */
  border: 2px solid #00ff00;
  border-radius: 10px;
  padding: 2rem;
  max-width: 900px;
  width: 100%;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 20px #00ff00;
  position: relative;
  z-index: 1;
}

/* Logo */
.logo img { width: 120px; margin-bottom: 1rem; }

/* Headline */
h1.headline { font-family: 'Montserrat', sans-serif; font-size: 3rem; color: #00ff00; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem; position: relative; z-index: 1; }

/* Glitch effect */
.headline .glitch { position: relative; color: #00ff00; animation: glitch 1s infinite; }
.headline .glitch::before,
.headline .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; opacity: 0.8; clip: rect(0, 900px, 0, 0); }
.headline .glitch::before { left: 2px; text-shadow: -2px 0 red; animation: glitchTop 1s infinite; }
.headline .glitch::after { left: -2px; text-shadow: -2px 0 blue; animation: glitchBottom 1s infinite; }
@keyframes glitch { 0%,100% { transform: translate(0); } 20% { transform: translate(-2px,2px); } 40% { transform: translate(-2px,-2px); } 60% { transform: translate(2px,2px); } 80% { transform: translate(2px,-2px); } }
@keyframes glitchTop { 0%,100% { clip: rect(0,900px,0,0); } 20% { clip: rect(2px,900px,30px,0); } 40% { clip: rect(10px,900px,40px,0); } 60% { clip: rect(25px,900px,50px,0); } 80% { clip: rect(15px,900px,35px,0); } }
@keyframes glitchBottom { 0%,100% { clip: rect(0,900px,0,0); } 20% { clip: rect(30px,900px,60px,0); } 40% { clip: rect(40px,900px,70px,0); } 60% { clip: rect(55px,900px,80px,0); } 80% { clip: rect(35px,900px,60px,0); } }

/* Subtitle */
.subtitle { font-size: 1.2rem; margin-bottom: 1.5rem; color: #00ff00; animation: flickerText 2s infinite; }
@keyframes flickerText { 0%,19%,21%,23%,25%,54%,56%,100% { opacity:1; } 20%,22%,24%,55% { opacity:0; } }

/* Message Paragraphs */
.message p { margin-bottom:1rem; line-height:1.6; color:#00ff00; font-size:1rem; }

/* Footer Ticker */
.ticker-wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background: transparent;
  border-top: 2px solid #00ff00;
  z-index: 10;
  height: 2rem;
}
.ticker {
  display: inline-block;
  white-space: nowrap;
  font-weight: bold;
  color: #00ffff;
  font-size: 1rem;
  letter-spacing: 1px;
  font-family: 'Roboto Mono', monospace;
  padding-left: 100%;
  animation: tickerScroll 15s linear infinite;
}
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* Responsive */
@media(max-width: 600px){
  h1.headline{font-size:2rem;}
  .message p{font-size:0.9rem;}
  .logo img{width:80px;}
  .ticker{font-size:0.8rem;}
}