html{
  background:#000;
}

body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:#fff;
  background:#000;
  background-image:radial-gradient(circle at 50% 30%,#111 0%,#000 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  overflow-x:hidden;

  /* NEW: flex layout to auto-pack everything into the viewport */
  display:flex;
  flex-direction:column;
  min-height:100vh;
  justify-content:space-between;
  padding:clamp(16px,3vh,28px) clamp(16px,4vw,32px);
}

*{box-sizing:border-box;}

.center{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  text-align:center;
}

/* HEADER / HERO */
section{
  position:relative;
  overflow:hidden;
  padding:24px 20px 10px;
}

.hero{
  min-height:auto;
  height:auto;
  position:relative;
  z-index:2;
  padding-top:8px;
}

/* NEW: make hero behave like a compact header block */
section.hero{
  padding:0;
  margin:0 auto;
}

.hero h1{
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:3.6rem;
  margin:0 0 8px;
  animation:fadeIn 2s ease;
}
.hero p{
  max-width:700px;
  font-size:1.15rem;
  opacity:.8;
  margin:0 auto 6px;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(40px);}
  to{opacity:1;transform:translateY(0);}
}

/* reactive visuals */
.triangle{
  position:absolute;
  top:50%;
  left:50%;
  width:220px;
  height:220px;
  border:2px solid #fff;
  clip-path:polygon(50% 0,0 100%,100% 100%);
  transform:translate(-50%,-50%);
  opacity:.15;
  animation:spin 40s linear infinite;
  z-index:1;
}
@keyframes spin{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(360deg);}
}
.eye{
  position:absolute;
  width:100px;
  height:100px;
  background:url('https://upload.wikimedia.org/wikipedia/commons/4/45/Eye_icon.svg') center/contain no-repeat;
  opacity:.08;
  mix-blend-mode:screen;
  z-index:1;
}
.eye:nth-child(2){top:10%;left:10%;}
.eye:nth-child(3){top:70%;right:15%;}
.eye:nth-child(4){top:40%;left:70%;}

/* soundwave (bottom visualizer) */
.soundwave{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  height:80px;
  margin:16px auto 28px;
  gap:6px;
}
.bar{
  width:6px;
  background:#fff;
  height:20px;
  opacity:.6;
}

/* aura cursor */
#aura{
  position:fixed;
  top:0;
  left:0;
  width:100px;
  height:100px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,#fff2 0%,transparent 70%);
  mix-blend-mode:screen;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s;
  z-index:4;
}

/* MATRIX + ICON OVERLAYS (background) */
#matrix-overlay,
#icon-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
#matrix-overlay{
  opacity:0;
  transition:opacity .5s ease;
}
#matrix-overlay.active{
  opacity:0.45;
}
#matrix-canvas{
  width:100%;
  height:100%;
  display:block;
}
#icon-overlay{
  opacity:0;
  transition:opacity .6s ease;
  mix-blend-mode:screen;
}
#icon-overlay.active{
  opacity:0.6;
}
.icon-item{
  position:absolute;
  font-size:18px;
  opacity:0.85;
  animation:icon-float 5s ease-in-out forwards;
}
@keyframes icon-float{
  0%{transform:translate(0,0);opacity:0;}
  10%{opacity:1;}
  50%{transform:translate(-10px,-12px);}
  100%{transform:translate(12px,10px);opacity:0;}
}

/* TERMINAL CHAT */
#chat-terminal-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
  padding:10px 20px 18px;
  position:relative;
  z-index:3;
}

.chat-terminal{
  width:100%;
  max-width:900px;
  height:clamp(260px, 40vh, 360px);
  background:linear-gradient(135deg,rgba(255,255,255,0.12),rgba(0,0,0,0.9));
  border:1px solid rgba(255,255,255,0.4);
  border-radius:18px;
  box-shadow:0 0 40px rgba(255,255,255,0.35);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding:16px 46px 46px 18px;
  font-family:'Inter',monospace;
  font-size:0.9rem;
  overflow-y:auto;
  position:relative;
}
.chat-terminal::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  mix-blend-mode:screen;
  border:1px solid transparent;
  box-shadow:
    0 0 0 1px rgba(0,255,220,0.25),
    0 0 0 2px rgba(255,0,180,0.15);
  opacity:.4;
}

/* chat lines */
#chat-log{
  margin-bottom:8px;
}
.chat-line{
  margin-bottom:6px;
  text-align:left;
}
.chat-label{
  color:rgba(255,255,255,0.65);
  margin-right:6px;
}
.chat-content{
  white-space:pre-wrap;
}

/* prompt line */
#prompt-line{
  display:flex;
  align-items:flex-start;
  text-align:left;
}
#prompt-label{
  color:rgba(255,255,255,0.65);
  margin-right:6px;
}
#prompt-text{
  white-space:pre-wrap;
}
#prompt-cursor{
  display:inline-block;
  margin-left:2px;
  animation:blink-cursor 1s step-end infinite;
}
@keyframes blink-cursor{
  50%{opacity:0;}
}

/* send icon button – pinned bottom-right, minimal */
#send-button{
  position:absolute;
  right:16px;
  bottom:14px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.55);
  background:rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0.85;
  transition:opacity .2s ease, transform .2s ease, border-color .2s ease;
  box-shadow:none;
}
#send-button:hover{
  opacity:1;
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.85);
}
.send-icon{
  font-size:16px;
  line-height:1;
  transform:translateX(1px);
}

/* copyable email styling */
.copy-email{
  text-decoration:underline dotted;
  cursor:pointer;
  opacity:0.95;
}
.copy-email.copied{
  text-decoration-style:solid;
  opacity:1;
}

/* VIBE BOX UNDER CHAT */
#vibe-box-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
  padding:0 20px 20px;
  position:relative;
  z-index:2;
}
.vibe-box{
  width:100%;
  max-width:900px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.25);
  padding:14px 18px;
  background:linear-gradient(135deg,rgba(0,0,0,0.9),rgba(25,25,25,0.95));
  box-shadow:0 0 25px rgba(0,0,0,0.7);
  overflow:hidden;
  position:relative;
}
.vibe-box::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:conic-gradient(from 180deg,#00ffd5,#ff00ff,#ffd500,#00ffd5);
  opacity:0.18;
  mix-blend-mode:screen;
  filter:blur(10px);
  z-index:-1;
}
.vibe-title{
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  opacity:0.7;
  margin-bottom:4px;
  text-align:center;
}
.vibe-words{
  font-size:0.95rem;
  opacity:0.9;
  min-height:1.2em;
  text-align:center;
}

/* base fade */
@keyframes vibeFade{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}

/* extra transitions */
@keyframes vibeSlideUp{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes vibeSlideDown{
  from{opacity:0; transform:translateY(-14px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes vibeSlideLeft{
  from{opacity:0; transform:translateX(18px);}
  to{opacity:1; transform:translateX(0);}
}
@keyframes vibeSlideRight{
  from{opacity:0; transform:translateX(-18px);}
  to{opacity:1; transform:translateX(0);}
}
@keyframes vibeZoomIn{
  from{opacity:0; transform:scale(0.9);}
  to{opacity:1; transform:scale(1);}
}
@keyframes vibeZoomOut{
  from{opacity:0; transform:scale(1.06);}
  to{opacity:1; transform:scale(1);}
}
@keyframes vibeBlurIn{
  from{opacity:0; filter:blur(6px);}
  to{opacity:1; filter:blur(0);}
}
@keyframes vibeTilt{
  from{opacity:0; transform:translateY(10px) rotate(-2deg);}
  to{opacity:1; transform:translateY(0) rotate(0deg);}
}
@keyframes vibeGlitch{
  0%{opacity:0; transform:translateX(0);}
  25%{opacity:.7; transform:translateX(-2px);}
  50%{opacity:1; transform:translateX(2px);}
  75%{opacity:.8; transform:translateX(-1px);}
  100%{opacity:1; transform:translateX(0);}
}

/* 10 different classes used in JS */
.vibe-transition-1{animation:vibeFade .5s ease-out;}
.vibe-transition-2{animation:vibeSlideUp .5s ease-out;}
.vibe-transition-3{animation:vibeSlideDown .5s ease-out;}
.vibe-transition-4{animation:vibeSlideLeft .45s ease-out;}
.vibe-transition-5{animation:vibeSlideRight .45s ease-out;}
.vibe-transition-6{animation:vibeZoomIn .45s ease-out;}
.vibe-transition-7{animation:vibeZoomOut .45s ease-out;}
.vibe-transition-8{animation:vibeBlurIn .45s ease-out;}
.vibe-transition-9{animation:vibeTilt .5s ease-out;}
.vibe-transition-10{animation:vibeGlitch .35s ease-out;}

/* scrollbars */
.chat-terminal::-webkit-scrollbar,
#chat-log::-webkit-scrollbar{
  width:6px;
}
.chat-terminal::-webkit-scrollbar-thumb,
#chat-log::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.25);
  border-radius:3px;
}

/* hidden input for mobile keyboard */
#hidden-terminal-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  height:0;
  width:0;
  border:0;
  padding:0;
}

/* MOBILE TWEAKS */
@media (max-width:768px){
  section{
    padding:20px 16px 8px;
  }
  .hero h1{
    font-size:2.6rem;
    margin-bottom:6px;
  }
  .hero p{
    font-size:1.05rem;
  }
  #chat-terminal-wrapper{
    padding:6px 16px 16px;
  }
  #vibe-box-wrapper{
    padding:0 16px 18px;
  }
  .soundwave{
    margin:10px auto 24px;
    height:70px;
  }
}

/* DESKTOP TIGHT LAYOUT */
@media (min-width:1024px){
  section{
    padding:24px 20px 8px;
  }
  .hero{
    min-height:auto;
  }
  #chat-terminal-wrapper{
    padding-top:6px;
    padding-bottom:10px;
  }
  #vibe-box-wrapper{
    padding-bottom:12px;
  }
  .soundwave{
    margin:8px auto 20px;
    height:70px;
  }
}

/* NEW: tighten vertical spacing between main blocks so everything fits */
#chat-terminal-wrapper,
#vibe-box-wrapper,
.soundwave{
  padding:0;
  margin-top:clamp(8px,1.8vh,16px);
}

/* Slightly more responsive visualizer height */
.soundwave{
  height:clamp(60px,8vh,90px);
}