/* ==================== ROOT VARIABLES ==================== */
:root {
  --primary-color: #b026ff;   /* Neon Purple */
  --secondary-color: #00f3ff; /* Neon Blue */
  --bg-dark: #050505;
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --font-main: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ==================== GLOBAL RESET ==================== */
html {
  scroll-behavior: auto;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-dark);
  color: var(--text-primary);
}

/* ==================== UTILITIES ==================== */
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.glass-nav {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.text-gradient {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==================== ANIMATIONS ==================== */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

.animate-pulse-slow {
  animation: pulse-slow 8s infinite ease-in-out;
}

/* Glitch Effect */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 2px;
  text-shadow: -1px 0 #b026ff;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -1px 0 #00f3ff;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(11px, 9999px, 86px, 0); }
  20% { clip: rect(93px, 9999px, 14px, 0); }
  40% { clip: rect(32px, 9999px, 20px, 0); }
  60% { clip: rect(54px, 9999px, 137px, 0); }
  80% { clip: rect(104px, 9999px, 57px, 0); }
  100% { clip: rect(19px, 9999px, 82px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(65px, 9999px, 11px, 0); }
  25% { clip: rect(24px, 9999px, 96px, 0); }
  50% { clip: rect(94px, 9999px, 15px, 0); }
  75% { clip: rect(7px, 9999px, 53px, 0); }
  100% { clip: rect(44px, 9999px, 78px, 0); }
}

/* Cursor Blink */
.cursor-blink {
  animation: blink 1s step-end infinite;
}

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

/* ==================== FLIP CARD ==================== */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 450px; /* Specific height for the card */
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Flip on hover/focus */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

.flip-card-front {
  background-color: #0d1117;
}

.flip-card-back {
  background: linear-gradient(145deg, #1a1f2e, #0d1117);
  color: white;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Align text to left */
  padding: 2rem;
  text-align: left;
}

/* Code Window Styling in Flip Back */
.code-window-mini {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  width: 100%;
}

.code-line {
  display: block;
}

.code-keyword { color: #b026ff; }
.code-string { color: #00f3ff; }
.code-func { color: #eebb00; }
.code-comment { color: #6b7280; font-style: italic; }

/* ==================== NAVIGATION TOOLTIP ==================== */
.nav-item .tooltip {
    /* Tooltip styles handled effectively by Tailwind classes in HTML, 
       adding specific override here if needed */
    white-space: nowrap;
}

/* ==================== GLASS STACK (Skills) ==================== */
.glass-stack {
  position: relative;
}

.glass-stack::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}