/* Container Variables */
.scene-wrapper {
  --accent-purple: #9b59b6;
  --accent-blue: #3498db;
  --accent-green: #2ecc71;
  --accent-orange: #e67e22;
  --accent-red: #e74c3c;
  
  --glass-bg: rgba(20, 25, 35, 0.95);
  --glass-border: rgba(255, 255, 255, 0.2);
  --text-muted: #bdc3c7;
  --text-bright: #ecf0f1;
  --monitor-grey: #2c3e50;
  --monitor-dark: #1a252f;
}

.animation-wrapper{
  /* Takes up the full viewport height so vertical centering is possible */
  height: 100vh; 
  width: 100%;
  
  /* This actually centers the .animation-wrapper */
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  
  /* Optional: prevents scrollbars if the animation moves outside bounds */
  overflow: hidden; 
}
/* Main 3D Container - South West Orientation */
.scene-wrapper {
  position: relative;
  width: 500px;
  height: 500px;
  transform-style: preserve-3d;
  transform: rotateX(5deg) rotateY(-35deg);
}

/* --- Shared Window Styles --- */
.floating-window {
  position: absolute;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 12px;
  box-shadow: 10px 10px 30px rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
  z-index: 10;
}

.win-header {
  display: flex; align-items: center; margin-bottom: 8px; gap: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 5px;
}
.win-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.win-title { font-size: 10px; color: var(--text-muted); font-family: sans-serif; margin-left: auto; font-weight: bold; letter-spacing: 0.5px;}

/* Syntax Highlighting */
.s-kwd { color: var(--accent-purple); } 
.s-str { color: var(--accent-green); } 
.s-fnc { color: var(--accent-blue); }
.s-tag { color: var(--accent-orange); }
.s-cmt { color: #666; font-style: italic; }
.s-obj { color: var(--accent-red); }

/* --- Monitor Group --- */
.monitor-group {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateZ(0px);
  transform-style: preserve-3d;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.monitor-frame {
  width: 380px; height: 240px;
  background: var(--monitor-grey);
  border-radius: 10px;
  padding: 10px;
  border-bottom: 20px solid var(--monitor-dark);
  box-shadow: 15px 15px 40px rgba(0,0,0,0.6);
  position: relative;
  transform-style: preserve-3d;
}

/* Monitor Thickness */
.monitor-frame::before {
  content: ''; position: absolute;
  top: 0; right: -10px; width: 10px; height: 100%;
  background: #141d26;
  transform: skewY(45deg); transform-origin: top left;
}
.monitor-frame::after {
  content: ''; position: absolute;
  bottom: -10px; left: 0; width: 100%; height: 10px;
  background: #141d26;
  transform: skewX(-45deg); transform-origin: top right;
}

.monitor-screen {
  width: 100%; height: 100%;
  background: #1e1e1e;
  border-radius: 4px;
  display: flex;
  overflow: hidden;
  position: relative;
  border: 1px solid #333;
  font-family: 'Consolas', 'Monaco', monospace;
}

/* Monitor UI Details */
.screen-sidebar {
  width: 35px; height: 100%;
  background: #252526;
  border-right: 1px solid #333;
  display: flex; flex-direction: column; align-items: center; padding-top: 10px; gap: 10px;
}
.icon-box { width: 15px; height: 15px; background: #555; border-radius: 2px; }
.icon-box.active { background: var(--text-bright); border-left: 2px solid var(--accent-blue); }

.screen-main { flex: 1; display: flex; flex-direction: column; }

.screen-tabs {
  height: 25px; background: #252526; display: flex;
}
.screen-tab {
  padding: 0 10px; display: flex; align-items: center; gap: 5px;
  background: #1e1e1e; color: var(--text-bright); font-size: 8px; border-top: 2px solid var(--accent-blue);
}
.tab-icon { width: 8px; height: 8px; background: var(--accent-blue); border-radius: 50%; }

.screen-code-area {
  padding: 10px; flex: 1;
}
.line-nums { color: #858585; margin-right: 10px; text-align: right; border-right: 1px solid #333; padding-right: 5px; }

.screen-status {
  height: 15px; background: var(--accent-blue);
  display: flex; align-items: center; justify-content: space-between; padding: 0 5px;
  font-size: 7px; color: white;
}

/* Stand Neck */
.monitor-neck {
  width: 60px; height: 50px;
  background: var(--monitor-dark);
  transform: translateY(-5px) translateZ(-10px);
  position: relative;
  transform-style: preserve-3d;
}
.monitor-neck::before { 
  content: ''; position: absolute; top:0; right:-10px; width:10px; height:100%;
  background: #000; transform: skewY(45deg); transform-origin: top left;
}

/* Stand Base */
.monitor-base {
  width: 140px; height: 10px;
  background: var(--monitor-grey);
  transform: translateY(-5px) translateZ(20px);
  position: relative;
  transform-style: preserve-3d;
  border-radius: 2px;
}
.monitor-base::before { 
  content: ''; position: absolute; 
  bottom: 100%; left: 0; width: 100%; height: 30px;
  background: var(--monitor-grey);
  transform: rotateX(60deg); transform-origin: bottom center;
  border-radius: 4px 4px 0 0;
}
.monitor-base::after { 
  content: ''; position: absolute;
  top:0; right:-10px; width:10px; height:100%;
  background: var(--monitor-dark);
  transform: skewY(45deg); transform-origin: top left;
}

/* --- Windows Positioning --- */

/* React (Shifted left to clear monitor) */
.win-react {
  width: 180px; height: 130px;
  top: 5%; left: -20%; 
  transform: translateZ(60px); 
}

/* Python (Shifted right for spacing) */
.win-python {
  width: 200px; height: 140px;
  top: 8%; right: -12%;
  transform: translateZ(50px); 
}

/* Firebase */
.win-firebase {
  width: 170px; height: 140px;
  bottom: 15%; right: 0%;
  transform: translateZ(80px); 
}

/* MongoDB */
.win-mongo {
  width: 190px; height: 140px;
  bottom: 10%; left: -5%;
  transform: translateZ(70px);
}

/* Terminal (Background) */
.win-git {
  width: 240px; height: 110px;
  top: -15%; right: 25%; 
  transform: translateZ(-50px);
  z-index: 1;
  opacity: 0.9;
}

/* Animation Keyframes */
@keyframes float-scene {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}