/* Hacker-style — pure CSS animation */
:root{
  --bg:#030706;
  --green:#4cff8a;
  --dim:#0b1a12;
  --muted:#7ea88f;
  --accent:#4cc0ff;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(76,192,255,0.03), transparent), var(--bg);
  color:var(--green);
  font-family: 'Courier New', Consolas, monospace;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

/* SCENE */
.scene{position:relative;height:100vh;width:100vw;padding:28px 40px;display:flex;flex-direction:column;gap:18px}

/* MATRIX RAIN LAYER (CSS-only repeating gradient moving) */
.matrix{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.0) 0 1px, rgba(0,0,0,0.35) 1px 100%),
    linear-gradient(transparent 0 40%, rgba(0,0,0,0.15) 40% 60%, transparent 60% 100%),
    repeating-linear-gradient(0deg, rgba(76,255,138,0.06) 0 1px, transparent 1px 6px);
  background-size: 100% 100%, 100% 100%, 3px 24px;
  mix-blend-mode: screen;
  animation: drift 10s linear infinite;
  opacity:0.9;
}
@keyframes drift { from{transform:translateY(0)} to{transform:translateY(-1200px)} }

/* HEADER */
.brand{z-index:5;display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.logo{font-weight:800;letter-spacing:2px}
.mode{font-size:12px;color:rgba(76,255,138,0.85);border:1px solid rgba(76,255,138,0.06);padding:6px 10px;border-radius:6px;backdrop-filter:blur(2px)}

/* MAIN STAGE: left terminal + right skyscraper HUD */
.stage{z-index:5;display:flex;flex:1;gap:32px;align-items:center;justify-content:center}
.left{flex:1;min-width:380px}
.right{width:380px;display:flex;flex-direction:column;align-items:center;gap:18px}

/* GLITCH TITLE */
.glitch-title{
  font-size:34px;
  font-weight:900;
  letter-spacing:3px;
  position:relative;
  color:var(--green);
  text-transform:uppercase;
  margin-bottom:18px;
  filter:drop-shadow(0 0 12px rgba(76,255,138,0.18));
}
.glitch-title::before,
.glitch-title::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;
  clip-path:polygon(0 0,100% 0,100% 33%,0 33%);
  opacity:0.8;
}
.glitch-title::before{
  transform:translate(-2px,-2px);
  color:rgba(76,255,138,0.65);
  animation:gl1 2.5s infinite linear;
}
.glitch-title::after{
  transform:translate(2px,2px);
  color:rgba(76,192,255,0.45);
  animation:gl2 3s infinite linear;
}
@keyframes gl1{
  0%{clip-path:polygon(0 0,100% 0,100% 10%,0 10%)} 
  25%{clip-path:polygon(0 15%,100% 15%,100% 28%,0 28%)}
  50%{clip-path:polygon(0 40%,100% 40%,100% 50%,0 50%)}
  75%{clip-path:polygon(0 10%,100% 10%,100% 20%,0 20%)}
  100%{clip-path:polygon(0 0,100% 0,100% 10%,0 10%)}
}
@keyframes gl2{
  0%{opacity:0.7;transform:translate(2px,2px)}
  50%{opacity:0.3;transform:translate(6px,-2px)}
  100%{opacity:0.7;transform:translate(2px,2px)}
}

/* TERMINAL */
.terminal{
  width:100%;
  max-width:760px;
  background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  border:1px solid rgba(76,255,138,0.06);
  padding:22px;
  border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,0.6), 0 0 40px rgba(76,255,138,0.03);
  overflow:hidden;
  position:relative;
}

/* subtle scanline inside terminal */
.terminal::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 48%, rgba(76,255,138,0.02) 48% 52%, transparent 52%);
  background-size:100% 6px;
  mix-blend-mode:overlay;
  opacity:0.6;
}

/* Terminal lines animation: reveal with steps */
.term-lines{display:flex;flex-direction:column;gap:8px;color:var(--green);font-size:14px}
.term-lines .line{opacity:0.95}
.term-lines .a{animation:reveal 1s steps(30) 0.4s both}
.term-lines .b{animation:reveal 1s steps(40) 1.2s both}
.term-lines .c{animation:reveal 1s steps(45) 2s both}
.term-lines .d{animation:typing 6s steps(60,end) 2.8s infinite}

/* Typing line contains blinking cursor (the little block) */
.typing .cursor{
  display:inline-block;
  color:var(--green);
  animation:blink 1s steps(1,start) infinite;
}
@keyframes blink{50%{opacity:0}}

/* reveal effect */
@keyframes reveal{
  from{max-width:0;opacity:0}
  to{max-width:100%;opacity:1}
}

/* skyscraper (right) */
.skyscraper{
  width:220px;height:340px;background:
    linear-gradient(180deg,#041217,#071a12);
  border-radius:6px;border:1px solid rgba(76,255,138,0.06);
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  position:relative;overflow:hidden;
  transform:translateZ(0);
  animation:floatS 4s ease-in-out infinite;
  display:flex;flex-direction:column;align-items:center;padding-top:28px;
}
@keyframes floatS{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* floors with staggered light pulses */
.floor{
  width:80%;height:30px;margin:10px 0;border-radius:3px;background:linear-gradient(90deg,#01120a,#042916);
  position:relative;overflow:hidden;box-shadow:inset 0 -4px 10px rgba(0,0,0,0.6);
}
.floor::before{
  content:"";
  position:absolute;left:-60%;top:0;height:100%;width:60%;
  background:linear-gradient(90deg, transparent, rgba(76,255,138,0.08), transparent);
  transform:skewX(-18deg);
  animation:pass 3s linear infinite;
}
@keyframes pass{0%{left:-60%}100%{left:120%}}
.f1::before{animation-duration:3.2s}
.f2::before{animation-duration:2.8s}
.f3::before{animation-duration:4.1s}

/* antenna */
.antenna{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);width:6px;height:24px;background:linear-gradient(180deg,var(--green),transparent);
  box-shadow:0 0 10px rgba(76,255,138,0.7);
  border-radius:3px;
}

/* HUD below skyscraper */
.hud{width:320px;background:linear-gradient(180deg, rgba(0,0,0,0.35), transparent);padding:12px;border-radius:6px;border:1px solid rgba(76,255,138,0.04);color:var(--muted)}
.hud-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px dashed rgba(76,255,138,0.03)}
.hud-row:last-child{border-bottom:0}
.hud-row strong{color:var(--green)}
.hud-row .ok{color:var(--accent);font-weight:700}

/* Footer */
.foot{z-index:5;color:rgba(126,168,143,0.45);font-size:12px;text-align:center;padding-top:8px}

/* overlay scanline / grain for gritty hacker feel */
.scanline{position:fixed;inset:0;z-index:6;pointer-events:none;background:
  linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.01) 100%);
  mix-blend-mode:overlay;opacity:0.35}
.grain{position:fixed;inset:0;z-index:8;pointer-events:none;background-image:
  radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);background-size:3px 3px;opacity:0.12}

/* Responsive */
@media (max-width:900px){
  .stage{flex-direction:column;align-items:stretch;padding:12px}
  .right{width:100%}
  .skyscraper{margin:0 auto}
}

    </div>
  </div>

  <div class="content">
    <h1 class="title">MEDZENTRA</h1>
    <h2 class="subtitle">
      <span class="typing">Building India’s Health Revolution...</span>
    </h2>
    <div class="loader"></div>
  </div>
</body>
</html>