/* boot.css — gothic Mac OS 9 / XP bootloader sequence */

/* ==========================================
   🕯️ GOTHIC MAC OS 9 / XP BOOTLOADER STYLES
   ========================================== */

#mac-xp-bootloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #090306;
  background-image: 
    radial-gradient(circle at center, rgba(80, 0, 30, 0.4) 0%, rgba(0, 0, 0, 0.95) 80%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  font-family: "MS Sans Serif", "Geneva", Tahoma, sans-serif;
  transition: opacity 0.8s ease-in-out;
}

/* Classic Mac OS Window Box with Gothic Gold/Crimson Bevels */
.boot-frame {
  width: 480px;
  background: #12090e;
  border: 3px double #8b0000;
  box-shadow: 0 0 25px rgba(255, 0, 80, 0.25), inset 0 0 15px rgba(0,0,0,0.9);
  padding: 16px;
  color: #d4af37; /* Vintage Gothic Gold */
  box-sizing: border-box;
}

.boot-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: bold;
  border-bottom: 1px solid #4a0d18;
  padding-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gothic-brand {
  color: #ff3355;
  text-shadow: 0 0 5px rgba(255, 51, 85, 0.6);
}

.boot-status {
  color: #887766;
}

/* Emblem Center */
.boot-center {
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #2b0c14;
}

.alice-logo-container {
  text-align: center;
}

.omega-symbol {
  font-size: 54px;
  font-family: "Georgia", serif;
  color: #ff2a4b;
  text-shadow: 0 0 12px #ff0033, 0 0 25px #8b0000;
  animation: pulseOmega 2.5s infinite ease-in-out;
}

.logo-subtext {
  font-size: 10px;
  font-family: "Courier New", monospace;
  color: #a0a0a0;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: -5px;
}

/* macOS 9 Extension Bar Mechanics */
.extensions-container {
  background: #000000;
  border: 1px solid #3d141d;
  padding: 6px;
  margin-bottom: 15px;
}

.ext-label {
  font-size: 9px;
  color: #665555;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

/* macOS 9 Extension Bar Slot Layout */
.extensions-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  background: #080305;
  padding: 2px 8px;
  border: 1px inset #2a0a10;
  overflow-x: auto;
}

/* Base state: Hidden before loading */
.ext-icon {
  font-size: 18px;
  opacity: 0;
  transform: scale(0.3) translateY(8px);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: grayscale(100%) brightness(0.3);
}

/* Active state triggered by JS */
.ext-icon.loaded {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: drop-shadow(0 0 6px #ff0055) drop-shadow(0 0 12px #8b0000) grayscale(0%);
}

/* Windows XP Progress Bar Mechanics */
.xp-progress-track {
  height: 14px;
  background: #050203;
  border: 2px inset #3a1018;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}

.xp-progress-bar {
  display: flex;
  gap: 3px;
  position: absolute;
  top: 1px;
  left: -60px;
  width: 50px;
  height: 10px;
  animation: xpBounce 1.8s infinite linear;
}

.xp-block {
  width: 12px;
  height: 100%;
  background: linear-gradient(180deg, #ff4d6d 0%, #b30024 50%, #660014 100%);
  border-radius: 1px;
  box-shadow: 0 0 4px #ff0033;
}

.boot-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: #8a737d;
  min-height: 24px;
}

#boot-enter-btn {
  background: #2b0810;
  border: 1px solid #ff3355;
  color: #ffcc00;
  font-family: inherit;
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(255, 51, 85, 0.4);
}

#boot-enter-btn:hover {
  background: #ff3355;
  color: #000000;
}

/* Container box layout fixes */
.boot-center {
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #2b0c14;
  position: relative; 
  overflow: hidden;
}

.alice-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.cheshire-smile {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  height: 50px;
}

.cheshire-smile svg {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 8px #ff0055) drop-shadow(0 0 18px #8b0000);
  animation: pulseCheshire 3s infinite ease-in-out;
}

@keyframes pulseCheshire {
  0%, 100% { 
    opacity: 0.6; 
    transform: scale(0.98); 
    filter: drop-shadow(0 0 6px #ff0033) drop-shadow(0 0 12px #8b0000);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.08); 
    filter: drop-shadow(0 0 12px #ff0055) drop-shadow(0 0 24px #ff0033);
  }
}

@keyframes loadExt {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes xpBounce {
  0% { left: -50px; }
  100% { left: 100%; }
}