/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }
body { background:white; color:black; font-family:'Space Mono', monospace; min-height:100vh; overflow-x:hidden; }
.container { text-align:center; max-width:90%; margin:0 auto; padding:1rem; opacity:0; transition: opacity 1.2s ease; }
body.loaded .container { opacity:1; }

/* CURTAIN */
#curtain {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:white;
  color:black;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  font-family:'Space Mono', monospace;
  z-index:999; transition: opacity 1s ease;
  text-align:center;
}
#curtain.fade { opacity:0; pointer-events:none; }

/* Curtain Heading */
#curtain h1 {
  font-family:'Unica One', cursive;
  font-size:6vw;
  letter-spacing:0.2em;
  margin-bottom:0.5em;
  color:black;
}

/* Curtain Paragraph */
#curtain p {
  font-family:'Space Mono', monospace;
  font-size:1.2rem;
  margin-bottom:1em;
}

/* Curtain Button */
#revealBtn {
  padding: 15px 30px;
  font-size: 1.2rem;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background: black !important;  /* force black background */
  color: white !important;       /* force white text */
  font-weight: bold;
  font-family: 'Space Mono', monospace;
  transition: 0.3s;
}
#revealBtn:hover {
  transform: scale(1.05);
  background: #222 !important;  /* darken slightly on hover */
}

/* LOGO & TEXT */
.logo { font-family:'Unica One', cursive; font-size:8vw; letter-spacing:0.5vw; position:relative; display:inline-block; color:black; }
.years { opacity:.6; margin-top:.5rem; font-size:1rem; }
.divider { width:50%; max-width:220px; height:2px; background:black; margin:2rem auto; }
.description { font-size:clamp(0.8rem, 1.2vw, 1rem); line-height:1.8; opacity:.85; margin-bottom:2rem; }
footer { margin-top:3rem; font-size:clamp(0.7rem, 1vw, 0.9rem); opacity:.6; }

/* STATUS */
.status { margin-top:1.5rem; letter-spacing:0.2rem; font-size:clamp(0.7rem, 1vw, 0.9rem); }
.dot { display:inline-block; width:0.8rem; height:0.8rem; background:black; border-radius:50%; margin-right:0.5rem; animation:blink 1s infinite; }
@keyframes blink{50%{opacity:0}}

/* GLITCH */
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;opacity:.5;pointer-events:none;}
.glitch::before{clip-path:polygon(0 0,100% 0,100% 45%,0 45%);transform:translate(-0.2em,0);animation:glitchTop 2s infinite linear alternate;}
.glitch::after{clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%);transform:translate(0.2em,0);animation:glitchBottom 2s infinite linear alternate;}
@keyframes glitchTop{0%{transform:translate(-0.2em,0)}50%{transform:translate(-0.4em,-0.2em)}100%{transform:translate(-0.2em,0)}}
@keyframes glitchBottom{0%{transform:translate(0.2em,0)}50%{transform:translate(0.4em,0.2em)}100%{transform:translate(0.2em,0)}}

/* AUDIO VISUALIZER */
.visualizer{display:flex;justify-content:center;gap:0.3rem;height:5vh;margin-top:2rem;}
.visualizer div{width:0.6rem;background:black;height:2vh;animation:wave 1.2s infinite ease-in-out;}
.visualizer div:nth-child(2){animation-delay:.1s} div:nth-child(3){animation-delay:.2s} div:nth-child(4){animation-delay:.3s} div:nth-child(5){animation-delay:.4s;}
@keyframes wave{0%{height:2vh}50%{height:6vh}100%{height:2vh}}

/* ROSES */
.roses{position:fixed;bottom:0;width:100%;pointer-events:none;}
.rose{position:absolute;bottom:-2rem;font-size:1.5rem;animation:rise 6s linear forwards;}
@keyframes rise{0%{transform:translateY(0) rotate(0deg);opacity:1;}100%{transform:translateY(-110vh) rotate(360deg);opacity:0;}}

/* OVERLAYS */
.grain{position:fixed;width:100%;height:100%;background-image:url("https://grainy-gradients.vercel.app/noise.svg");opacity:.12;pointer-events:none;}
.scan{position:fixed;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.04) 3px);pointer-events:none;}

/* RESPONSIVE */
@media (max-width:768px){.logo{font-size:12vw;letter-spacing:0.3vw}.divider{width:70%}.description{font-size:clamp(0.75rem,2vw,0.9rem)}.visualizer div{width:0.4rem;height:3vh}.rose{font-size:1.2rem}}
@media (max-width:480px){.logo{font-size:16vw;letter-spacing:0.2vw}.divider{width:80%}.description{font-size:clamp(0.7rem,2.5vw,0.85rem)}.visualizer{gap:0.2rem;height:4vh}.visualizer div{width:0.3rem;height:2.5vh}.rose{font-size:1rem}}