/* ============================================================
   Alessio Attilia — IDE Noir Glassmorphism (Zen Mode)
   ============================================================ */

:root {
  --bg-deep:        #090a0f;
  --bg-editor:      rgba(15, 18, 28, 0.85);
  --bg-tabs:        rgba(10, 12, 18, 0.95);
  --bg-card:        rgba(20, 24, 38, 0.6);
  --bg-card-hover:  rgba(28, 34, 52, 0.9);
  --glass-border:   rgba(255,255,255,0.08);

  /* Accents */
  --accent-blue:    #7aa2f7;
  --accent-cyan:    #7dcfff;
  --accent-purple:  #bb9af7;
  --accent-green:   #9ece6a;
  --accent-orange:  #ff9e64;

  /* Text */
  --text-primary:   #c0caf5;
  --text-secondary: #9aa5ce;
  --text-muted:     #565f89;

  /* Syntax */
  --syn-kw:         #bb9af7;
  --syn-type:       #e0af68;
  --syn-iface:      #7dcfff;
  --syn-str:        #9ece6a;
  --syn-bool:       #ff9e64;
  --syn-prop:       #7aa2f7;
  --syn-ns:         #c0caf5;
  --syn-comment:    #565f89;

  --font-code: 'Fira Code', monospace;
  --font-ui:   'Outfit', sans-serif;
}

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

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-ui);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}

/* Background Aurora */
.bg-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.15; }
.orb-1 { width: 600px; height: 600px; background: #7aa2f7; top: -100px; left: -100px; animation: float 20s ease-in-out infinite; }
.orb-2 { width: 500px; height: 500px; background: #bb9af7; bottom: -100px; right: -100px; animation: float 25s ease-in-out infinite reverse; }
@keyframes float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px, -40px); } }

.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(122,162,247,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(122,162,247,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* IDE Container */
.ide-wrapper { position: relative; z-index: 1; width: 100%; max-width: 900px; }
.ide-shell {
  display: flex; flex-direction: column;
  background: var(--bg-editor); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border); border-radius: 12px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.6),
    0 0 0 1px rgba(122,162,247,0.04),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 80px rgba(122,162,247,0.02);
  min-height: 600px; overflow: hidden;
  position: relative;
}
/* Accent glow line at top */
.ide-shell::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,162,247,0.6) 30%, rgba(187,154,247,0.5) 70%, transparent);
  z-index: 1;
}

/* Top Bar */
.ide-topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-tabs); padding: 0 1.2rem; height: 40px;
  border-bottom: 1px solid var(--glass-border);
}
.window-controls { display: flex; gap: 8px; }
.wc-btn { width: 12px; height: 12px; border-radius: 50%; }
.wc-close { background: #ff5f56; } .wc-min { background: #ffbd2e; } .wc-max { background: #27c93f; }
.topbar-center { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-muted); font-weight: 500;}
.topbar-right { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-code); font-size: 0.75rem; color: var(--text-muted); }
.connection-dot-wrap { position: relative; width: 10px; height: 10px; flex-shrink: 0; }
.connection-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 6px var(--accent-green);
  position: absolute; top: 1px; left: 1px;
}
.connection-ping {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent-green);
  position: absolute; top: 0; left: 0;
  animation: ping 2.5s ease-out infinite;
  opacity: 0;
}
@keyframes ping {
  0%   { transform: scale(0.9); opacity: 0.7; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Tabs */
.editor-tabs { display: flex; background: var(--bg-tabs); border-bottom: 1px solid var(--glass-border); }
.tab {
  padding: 0.8rem 1.5rem; font-family: var(--font-code); font-size: 0.8rem;
  color: var(--text-muted); border-right: 1px solid var(--glass-border);
  border-bottom: 2px solid transparent; cursor: default;
}
.tab.active { background: rgba(255,255,255,0.02); color: var(--text-primary); border-bottom-color: var(--accent-blue); }
.cs-color { color: var(--accent-purple); } .py-color { color: var(--accent-blue); }

/* Content Scroll */
.editor-scroll { padding: 2.5rem; overflow-y: auto; flex: 1; }

/* Code Block */
.code-section { margin-bottom: 2rem; }
.code-block {
  display: flex; font-family: var(--font-code); font-size: 0.95rem; line-height: 1.7;
  background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border);
  border-radius: 8px; padding: 1.5rem; overflow-x: auto;
}
.line-nums {
  display: flex; flex-direction: column; color: var(--text-muted);
  padding-right: 1.5rem; border-right: 1px solid var(--glass-border); margin-right: 1.5rem;
  user-select: none;
}
.i1 { padding-left: 2rem; }
.c-kw { color: var(--syn-kw); } .c-type { color: var(--syn-type); } .c-iface { color: var(--syn-iface); }
.c-str { color: var(--syn-str); } .c-bool { color: var(--syn-bool); } .c-prop { color: var(--syn-prop); }
.c-ns { color: var(--syn-ns); } .c-comment { color: var(--syn-comment); font-style: italic; }

/* Blinking cursor inside code */
.code-cursor {
  display: inline-block;
  width: 2px; height: 0.85em;
  background: var(--syn-comment);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink-cursor 1.2s step-end infinite;
  opacity: 0.7;
}
@keyframes blink-cursor { 0%,100% { opacity: 0.7; } 50% { opacity: 0; } }

/* Buttons */
.action-ribbon { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.btn {
  font-family: var(--font-code); font-size: 0.85rem; font-weight: 500;
  padding: 0.8rem 1.2rem; border-radius: 6px; text-decoration: none;
  transition: all 0.2s ease;
}
.btn-primary { background: var(--accent-blue); color: #000; box-shadow: 0 4px 15px rgba(122,162,247,0.2); }
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-outline { border: 1px solid var(--glass-border); color: var(--text-primary); background: rgba(255,255,255,0.03); }
.btn-outline:hover { border-color: var(--accent-blue); color: var(--accent-blue); transform: translateY(-2px); }

/* Dividers & Terminal */
.section-divider { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 1.5rem; }
.div-label { font-family: var(--font-code); font-size: 0.8rem; color: var(--text-muted); }
.div-line { flex: 1; height: 1px; background: var(--glass-border); }

.terminal-prompt { font-family: var(--font-code); font-size: 0.85rem; margin-bottom: 1.5rem; }
.tp-user { color: var(--accent-green); } .tp-sep { color: var(--text-muted); } .tp-host { color: var(--accent-blue); }
.tp-tilde { color: var(--text-muted); } .tp-path { color: var(--accent-cyan); } .tp-cmd { color: var(--text-primary); }

/* Projects Grid */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.repo-card {
  background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 8px;
  padding: 1.5rem; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: all 0.25s ease; position: relative; overflow: hidden;
}
.rc-glow {
  position: absolute; top: -50px; right: -50px;
  width: 150px; height: 150px; border-radius: 50%;
  pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
}
.rc-cs .rc-glow { background: radial-gradient(circle, rgba(187,154,247,0.14), transparent 70%); }
.rc-py .rc-glow { background: radial-gradient(circle, rgba(122,162,247,0.14), transparent 70%); }
.repo-card:hover .rc-glow { opacity: 1; }
.repo-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.rc-cs:hover { border-color: rgba(187,154,247,0.35); }
.rc-py:hover { border-color: rgba(122,162,247,0.35); }
.rc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.rc-title {
  font-size: 1.05rem; font-weight: 600; color: var(--accent-blue);
  transition: letter-spacing 0.25s ease;
}
.repo-card:hover .rc-title { letter-spacing: 0.02em; }
.rc-badge { font-family: var(--font-code); font-size: 0.7rem; border: 1px solid var(--text-muted); padding: 0.2em 0.6em; border-radius: 12px; color: var(--text-muted); }
.rc-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; flex: 1; margin-bottom: 1.5rem;}
.rc-footer { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-code); font-size: 0.8rem; color: var(--text-muted); }
.lang-dot { width: 10px; height: 10px; border-radius: 50%; }
.cs-dot { background: #178600; } .py-dot { background: #3572A5; }

/* Training Grid */
.training-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.training-card {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,0.02); border: 1px solid var(--glass-border);
  padding: 1rem 1.2rem; border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}
.training-card::before {
  content: '';
  position: absolute; left: 0; top: 15%; bottom: 15%; width: 2px;
  background: var(--accent-purple); border-radius: 0 2px 2px 0;
  opacity: 0; transition: opacity 0.2s ease;
}
.training-card:hover {
  background: rgba(187,154,247,0.04);
  border-color: rgba(187,154,247,0.2);
  transform: translateX(3px);
}
.training-card:hover::before { opacity: 1; }
.tc-icon { font-size: 1.8rem; }
.tc-body strong { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; }
.tc-body span { font-size: 0.8rem; color: var(--text-muted); }

/* Status Bar */
.status-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--accent-blue); color: #090a0f; padding: 0.4rem 1.5rem;
  font-family: var(--font-code); font-size: 0.75rem; font-weight: 600;
}
.sb-left, .sb-right { display: flex; gap: 1.5rem; align-items: center; }
.sb-item { display: flex; align-items: center; gap: 0.35rem; }

.editor-eof { text-align: center; margin-top: 3rem; font-family: var(--font-code); font-size: 0.8rem; color: var(--text-muted); }

/* Staggered fade-in on load */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fade-up 0.5s ease forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 100ms);
}
@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 650px) {
  body { padding: 0; }
  .ide-shell { border-radius: 0; min-height: 100vh; }
  .editor-scroll { padding: 1.5rem; }
  .action-ribbon { flex-direction: column; }
  .btn { text-align: center; }
  .sb-right { display: none; }
}