/*
Theme Name: Timothy Que - Terminal Portfolio
Theme URI: https://timothyque.dev
Author: Timothy Que
Description: A futuristic terminal-style developer portfolio with CSS animations and interactive elements.
Version: 2.0
License: GNU General Public License v2 or later
Text Domain: tq-portfolio
*/

/* ============================================
   FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap');

/* ============================================
   CSS VARIABLES (matches Lovable design system)
   ============================================ */
:root {
  --background: hsl(240, 10%, 4%);
  --foreground: hsl(0, 0%, 98%);
  --card: hsl(240, 10%, 6%);
  --primary: hsl(180, 100%, 50%);
  --primary-foreground: hsl(240, 10%, 4%);
  --muted: hsl(240, 5%, 26%);
  --muted-foreground: hsl(240, 5%, 55%);
  --border: hsla(0, 0%, 100%, 0.08);
  --grid-line: hsla(0, 0%, 100%, 0.06);
  --primary-alpha-20: hsla(180, 100%, 50%, 0.2);
  --primary-alpha-30: hsla(180, 100%, 50%, 0.3);
  --primary-alpha-40: hsla(180, 100%, 50%, 0.4);
  --foreground-alpha-03: hsla(0, 0%, 100%, 0.03);
  --foreground-alpha-05: hsla(0, 0%, 100%, 0.05);
  --foreground-alpha-08: hsla(0, 0%, 100%, 0.08);
  --foreground-alpha-10: hsla(0, 0%, 100%, 0.1);
  --foreground-alpha-20: hsla(0, 0%, 100%, 0.2);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  font-feature-settings: "liga" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
}

::selection {
  background: var(--primary-alpha-20);
  color: var(--foreground);
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--muted); }

a { color: inherit; text-decoration: none; }

/* ============================================
   UTILITIES
   ============================================ */
.grid-line-l { border-left: 1px solid var(--grid-line); }
.grid-line-r { border-right: 1px solid var(--grid-line); }
.grid-line-b { border-bottom: 1px solid var(--grid-line); }
.grid-line-t { border-top: 1px solid var(--grid-line); }
.text-glow { text-shadow: 0 0 20px var(--primary-alpha-30); }

.label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--primary);
}

.label-muted {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: var(--foreground);
  margin-bottom: 3rem;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .container { padding: 0 3rem; }
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */
@keyframes scan-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

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

@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes clip-reveal {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0% 0); }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes boot-text {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-blink { animation: blink 1s step-end infinite; }
.animate-scan { animation: scan-line 0.6s ease-out forwards; }

/* Scroll-triggered animation classes */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.clip-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.clip-reveal.visible {
  clip-path: inset(0 0 0% 0);
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 40px;
  background: hsla(240, 10%, 4%, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--grid-line);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .header-right { display: none; }
}

/* ============================================
   BOOT SCREEN
   ============================================ */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  animation: fade-out-boot 0.3s ease-out 0.6s forwards;
}

@keyframes fade-out-boot {
  to { opacity: 0; pointer-events: none; }
}

.boot-text {
  animation: blink 1s step-end infinite;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 1.5rem 0;
}

@media (min-width: 768px) {
  .hero { padding: 40px 4rem 0; }
}

.hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding: 12vh 1.5rem;
}

@media (min-width: 768px) {
  .hero-inner { padding: 12vh 3rem; }
}

.hero-label {
  opacity: 0;
  animation: fade-in 0.4s ease-out 0.7s forwards;
}

.hero-title {
  font-size: clamp(2.5rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: var(--foreground);
  animation: clip-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

.hero-desc {
  opacity: 0;
  animation: fade-in-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.0s forwards;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  max-width: 55ch;
  margin-top: 2rem;
}

.hero-buttons {
  opacity: 0;
  animation: fade-in 0.4s ease-out 1.2s forwards;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.hero-btn {
  height: 40px;
  padding: 0 1.5rem;
  border: 1px solid var(--foreground-alpha-20);
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--foreground);
  background: transparent;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  font-family: inherit;
}

.hero-btn:hover {
  background: var(--foreground);
  color: var(--background);
}

.hero-btn-primary {
  border-color: var(--primary-alpha-30);
  color: var(--primary);
}

.hero-btn-primary:hover {
  background: var(--primary);
  color: var(--background);
}

.hero-meta {
  opacity: 0;
  animation: fade-in 0.4s ease-out 1.4s forwards;
  margin-top: 4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* ============================================
   SECTIONS
   ============================================ */
.section {
  padding: 12vh 1.5rem;
}

@media (min-width: 768px) {
  .section { padding: 12vh 4rem; }
}

/* ============================================
   PROJECT CARDS
   ============================================ */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .projects-grid { grid-template-columns: 1fr 1fr; }
}

.project-card {
  position: relative;
  border: 1px solid var(--foreground-alpha-08);
  padding: 1.5rem;
  transition: background 0.2s;
  overflow: hidden;
}

@media (min-width: 768px) {
  .project-card { padding: 2rem; }
}

.project-card:hover {
  background: var(--foreground-alpha-03);
}

.project-card .scan-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.project-card:hover .scan-bar {
  opacity: 1;
  animation: scan-line 0.6s ease-out forwards;
}

.project-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.project-title {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}

.project-desc {
  margin-bottom: 1.5rem;
}

.project-desc p {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.project-desc p::before {
  content: "→ ";
}

.stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stack-tag {
  font-size: 10px;
  padding: 0.25rem 0.5rem;
  background: var(--foreground-alpha-05);
  border: 1px solid var(--foreground-alpha-10);
  color: var(--muted-foreground);
}

/* ============================================
   SKILLS
   ============================================ */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .skills-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .skills-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.skill-group {
  border: 1px solid var(--foreground-alpha-08);
  padding: 1.5rem;
}

.skill-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}

.skill-dot {
  width: 6px;
  height: 6px;
  background: var(--primary-alpha-40);
  flex-shrink: 0;
}

/* ============================================
   EDUCATION
   ============================================ */
.education-card {
  border: 1px solid var(--foreground-alpha-08);
  padding: 1.5rem 2rem;
  max-width: 36rem;
}

.education-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}

.education-card p {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ============================================
   CONTACT
   ============================================ */
.contact-section {
  padding: 20vh 1.5rem;
}

@media (min-width: 768px) {
  .contact-section { padding: 20vh 4rem; }
}

.contact-box {
  border: 1px solid var(--foreground-alpha-08);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.contact-row:last-child { margin-bottom: 0; }

.contact-row a {
  font-size: 0.875rem;
  color: var(--foreground);
  transition: color 0.2s;
}

.contact-row a:hover {
  color: var(--primary);
}

.contact-row span:last-child {
  font-size: 0.875rem;
}

/* Command line */
.command-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.command-line .prompt {
  color: var(--primary);
}

.command-line input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--foreground);
  font-family: inherit;
  font-size: inherit;
}

.command-line input::placeholder {
  color: hsla(240, 5%, 55%, 0.4);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.social-links a {
  color: var(--muted-foreground);
  transition: color 0.2s;
}

.social-links a:hover {
  color: var(--foreground);
}

/* ============================================
   STATUS TERMINAL
   ============================================ */
.status-terminal {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 50;
  width: 256px;
  border: 1px solid var(--foreground-alpha-08);
  background: hsla(240, 10%, 4%, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.75rem;
}

@media (max-width: 768px) {
  .status-terminal { display: none; }
}

.status-terminal .log-line {
  font-size: 10px;
  color: var(--muted-foreground);
  line-height: 1;
  font-family: inherit;
  margin-bottom: 2px;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  padding: 2rem 1.5rem;
  border-top: 1px solid var(--grid-line);
  text-align: center;
}

@media (min-width: 768px) {
  .site-footer { padding: 2rem 4rem; }
}