/* ============================================================
   MONOONO — stylesheet
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:          #000000;
  --ink:         #ffffff;
  --footer-text: #666666;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background-color: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Main content ─────────────────────────────────────────── */

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}


/* ── Logo Animation ───────────────────────────────────────── */

.logo-wrap {
  width: 200px;
  max-width: 40vw;
}

.logo-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}


.char {
  opacity: 0;
  animation: charAppear 0s forwards;
}

/* Organic Typing Sequence (Starts after 2s delay) */
#char-1 { animation-delay: 2.0s; }
#char-2 { animation-delay: 2.25s; }
#char-3 { animation-delay: 2.4s; }
#char-4 { animation-delay: 2.75s; }

/* 0.75s pause with 1 blink at the end of line 1 */
#char-5 { animation-delay: 3.7s; }
#char-6 { animation-delay: 3.95s; }
#char-7 { animation-delay: 4.2s; }

@keyframes charAppear {
  to { opacity: 1; }
}

#cursor {
  animation: 
    cursorMove 4.5s steps(1) forwards,
    cursorState 4.5s forwards,
    finalBlink 1s step-end 4.8s infinite;
}

@keyframes cursorMove {
  0%    { transform: translate(-42px, -14px); } /* 0s: Start Row 1 */
  44.4% { transform: translate(-28px, -14px); } /* 2.0s: After M */
  50.0% { transform: translate(-14px, -14px); } /* 2.25s: After O */
  53.3% { transform: translate(0px, -14px); }   /* 2.4s: After N */
  61.1% { transform: translate(14px, -14px); }  /* 2.75s: Right of O (STAYS for blink) */
  77.8% { transform: translate(-42px, 0px); }   /* 3.5s: Moves to Row 2 */
  82.2% { transform: translate(-28px, 0px); }   /* 3.7s: After O */
  87.8% { transform: translate(-14px, 0px); }   /* 3.95s: After N */
  93.3% { transform: translate(0px, 0px); }     /* 4.2s: After O (final) */
}

@keyframes cursorState {
  /* Initial 2 blinks (0-2s) */
  0%, 22%, 44% { opacity: 1; }
  11%, 33%      { opacity: 0; }
  
  /* Typing Row 1 (2-2.75s) */
  45%, 61% { opacity: 1; }
  
  /* Single blink at end of Row 1 (2.75-3.5s) */
  69% { opacity: 0; }
  77% { opacity: 1; }
  
  /* Typing Row 2 (3.5-4.5s) */
  78%, 100% { opacity: 1; }
}

@keyframes finalBlink {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}







/* ── Replay Button ─────────────────────────────────────────── */

#replay-btn {
  background: none;
  border: none;
  color: var(--footer-text);
  cursor: pointer;
  padding: 12px;
  opacity: 0;
  transform: translateY(10px);
  animation: replayAppear 0.8s ease-out 5s forwards;
  transition: color 0.3s ease, transform 0.3s ease;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

#replay-btn:hover {
  color: var(--ink);
  transform: translateY(-2px);
}

#replay-btn:active {
  transform: scale(0.95);
}

@keyframes replayAppear {
  to {
    opacity: 0.4;
    transform: translateY(0);
  }
}

#replay-btn:hover {
  opacity: 1;
}

/* ── Footer ────────────────────────────────────────────────── */

footer {
  width: 100%;
  padding: 2rem;
  text-align: center;
}

footer small {
  color: var(--footer-text);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace;
}