﻿/* DOS Boot Screen Styles */
.dos-boot-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 1000;
  padding: 2em;
  box-sizing: border-box;
}

.boot-content {
  font-family: 'ac437_ibm_dos_iso8regular', 'Consolas', 'Courier New', monospace;
  color: var(--greenscreen);
  font-size: 2em;
  line-height: 1.0;
  text-align: left;
  white-space: pre-line;
}

.boot-sequence {
  margin-bottom: 1em;
}

.boot-line {
  margin-bottom: 0.5em;
}

/* Starting line appears immediately */
.starting-line {
  animation: showStartingLine 0.5s ease-in;
}

@keyframes showStartingLine {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Progressive period display - build up then reset */
.period1, .period2, .period3 {
  opacity: 0;
}

/* Accumulative period animation - runs twice then stops when C:\> appears */
.period1 {
  animation:
    showPeriod1 2s 2,
    hidePeriods 0s 6s forwards;
}

.period2 {
  animation:
    showPeriod2 2s 2,
    hidePeriods 0s 6s forwards;
}

.period3 {
  animation:
    showPeriod3 2s 2,
    hidePeriods 0s 6s forwards;
}

/* Period 1: . appears at 0.5s, stays visible until 2s reset */
@keyframes showPeriod1 {
  0%, 24.99% {
    opacity: 0;
  }
  25%, 99.99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Period 2: .. appears at 1s, stays visible until 2s reset */
@keyframes showPeriod2 {
  0%, 49.99% {
    opacity: 0;
  }
  50%, 99.99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Period 3: ... appears at 1.5s, stays visible until 2s reset */
@keyframes showPeriod3 {
  0%, 74.99% {
    opacity: 0;
  }
  75%, 99.99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes hidePeriods {
  to {
    opacity: 0;
  }
}

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

@keyframes hidePeriod {
  to {
    opacity: 0;
  }
}

/* Starting line stays visible throughout */
.starting-line {
  animation: showStartingLine 0.5s ease-in;
}

/* Line-by-line boot sequence */
.line1, .line2, .line3 {
  opacity: 0;
}

.line1 {
  animation: showLine 0.5s ease-in 4s forwards;
}

.line2 {
  animation: showLine 0.5s ease-in 4.5s forwards;
}

.line3 {
  animation: showLine 0.5s ease-in 5.5s forwards;
}

@keyframes showLine {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.boot-cursor {
  animation: bootCursorBlink 1s infinite;
  margin-left: 2px;
}

@keyframes bootCursorBlink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Typing command animation using max-width instead of width */
.typed-command {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  animation: typeCommand 4.5s steps(45, end) 6.5s forwards;
}

@keyframes typeCommand {
  from {
    max-width: 0;
  }
  to {
    max-width: 45ch; /* 45 characters in monospace font */
  }
}

/* Press Any Key message */
.press-key-message {
  position: absolute;
  bottom: 2em;
  left: 50%;
  transform: translateX(-50%);
  color: var(--greenscreen);
  font-size: 1.2em;
  text-align: center;
  opacity: 1;
}

@keyframes showPressKey {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes blinkPressKey {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.3;
  }
}
