/* =====================================================
   CSS Reset & Base Styles
   ===================================================== */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: color 0.3s ease, background-color 0.3s ease;
  overflow-x: hidden;
}

/* =====================================================
   CSS Custom Properties (Theme Variables)
   ===================================================== */

:root {
  /* Light Theme Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  
  --accent-primary: #3b82f6;
  --accent-primary-rgb: 59, 130, 246;
  --accent-secondary: #1d4ed8;
  --accent-tertiary: #dbeafe;
  
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e1;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Status Colors */
  --status-live: #10b981;
  --status-development: #f59e0b;
  --status-completed: #8b5cf6;
  
  /* Spacing Scale */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  
  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Dark Theme */
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  
  --accent-primary: #60a5fa;
  --accent-primary-rgb: 96, 165, 250;
  --accent-secondary: #3b82f6;
  --accent-tertiary: #1e3a8a;
  
  --border-primary: #334155;
  --border-secondary: #475569;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* =====================================================
   Layout & Container
   ===================================================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* =====================================================
   Typography
   ===================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: 1.2;
  color: var(--text-primary);
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-sm);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  font-weight: var(--font-medium);
}

.hero-description {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
  max-width: 600px;
}

.section-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  text-align: center;
  margin-bottom: var(--space-3xl);
  color: var(--text-primary);
}

/* =====================================================
   Header & Navigation
   ===================================================== */

.site-header {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-4xl) 0;
  position: relative;
  overflow: hidden;
}

.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(var(--accent-primary-rgb), 0.05) 0%, 
    transparent 50%, 
    rgba(var(--accent-primary-rgb), 0.03) 100%);
  pointer-events: none;
}

.header-content {
  position: relative;
  z-index: 2;
}

.hero-actions {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* =====================================================
   Main Content Sections
   ===================================================== */

.projects-section {
  padding: var(--space-4xl) 0;
  background: var(--bg-secondary);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-2xl);
  max-width: 1400px;
  margin: 0 auto;
}

.project-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 1rem;
  padding: var(--space-xl);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-primary);
}

.project-animation-area {
  height: 120px;
  background: linear-gradient(135deg, var(--accent-tertiary) 0%, var(--bg-secondary) 100%);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* =====================================================
   Credit Card Specific Styles
   ===================================================== */

.credit-card .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.credit-card .flip-card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: linear-gradient(135deg, #1f2937, #374151);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.credit-card .chip {
  align-self: flex-start;
  margin-bottom: 0.5rem;
}

.credit-card .valid_thru {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.2rem;
  align-self: flex-start;
}

.credit-card .number {
  font-size: 0.9rem;
  font-weight: var(--font-medium);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.credit-card .date_8264 {
  font-size: 0.8rem;
  font-weight: var(--font-medium);
  margin-bottom: 0.3rem;
}

.credit-card .name {
  font-size: 0.7rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
}

.credit-card .heading_8264 {
  font-size: 0.8rem;
  font-weight: var(--font-bold);
  text-align: center;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.credit-card .logo {
  align-self: center;
  margin-bottom: 1rem;
}

.credit-card .contactless {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* =====================================================
   Pixel Art Ghost Animation - ML Playground (From Uiverse.io by BlackisPlay)
   ===================================================== */

.ghost-card .project-animation-area {
  background: linear-gradient(135deg, 
    rgba(102, 126, 234, 0.1) 0%, 
    rgba(118, 75, 162, 0.1) 50%, 
    rgba(240, 147, 251, 0.1) 100%);
}

.ghost-card #ghost {
  position: relative;
  scale: 0.8;
}

.ghost-card #red {
  animation: upNDown infinite 0.5s;
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(14, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "a1  a2  a3  a4  a5  top0  top0  top0  top0  a10 a11 a12 a13 a14"
    "b1  b2  b3  top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14"
    "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14"
    "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14"
    "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14"
    "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5"
    "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18";
}

@keyframes upNDown {
  0%,
  49% {
    transform: translateY(0px);
  }
  50%,
  100% {
    transform: translateY(-10px);
  }
}

.ghost-card #top0,
.ghost-card #top1,
.ghost-card #top2,
.ghost-card #top3,
.ghost-card #top4,
.ghost-card #st0,
.ghost-card #st1,
.ghost-card #st2,
.ghost-card #st3,
.ghost-card #st4,
.ghost-card #st5 {
  background-color: red;
}

.ghost-card #top0 {
  grid-area: top0;
}

.ghost-card #top1 {
  grid-area: top1;
}

.ghost-card #top2 {
  grid-area: top2;
}

.ghost-card #top3 {
  grid-area: top3;
}

.ghost-card #top4 {
  grid-area: top4;
}

.ghost-card #st0 {
  grid-area: st0;
}

.ghost-card #st1 {
  grid-area: st1;
}

.ghost-card #st2 {
  grid-area: st2;
}

.ghost-card #st3 {
  grid-area: st3;
}

.ghost-card #st4 {
  grid-area: st4;
}

.ghost-card #st5 {
  grid-area: st5;
}

.ghost-card #an1 {
  grid-area: an1;
  animation: flicker0 infinite 0.5s;
}

.ghost-card #an18 {
  grid-area: an18;
  animation: flicker0 infinite 0.5s;
}

.ghost-card #an2 {
  grid-area: an2;
  animation: flicker1 infinite 0.5s;
}

.ghost-card #an17 {
  grid-area: an17;
  animation: flicker1 infinite 0.5s;
}

.ghost-card #an3 {
  grid-area: an3;
  animation: flicker1 infinite 0.5s;
}

.ghost-card #an16 {
  grid-area: an16;
  animation: flicker1 infinite 0.5s;
}

.ghost-card #an4 {
  grid-area: an4;
  animation: flicker1 infinite 0.5s;
}

.ghost-card #an5 {
  grid-area: an5;
  animation: flicker0 infinite 0.5s;
}

.ghost-card #an15 {
  grid-area: an15;
  animation: flicker1 infinite 0.5s;
}

.ghost-card #an6 {
  grid-area: an6;
  animation: flicker0 infinite 0.5s;
}

.ghost-card #an12 {
  grid-area: an12;
  animation: flicker0 infinite 0.5s;
}

.ghost-card #an7 {
  grid-area: an7;
  animation: flicker0 infinite 0.5s;
}

.ghost-card #an13 {
  grid-area: an13;
  animation: flicker0 infinite 0.5s;
}

.ghost-card #an9 {
  grid-area: an9;
  animation: flicker1 infinite 0.5s;
}

.ghost-card #an10 {
  grid-area: an10;
  animation: flicker1 infinite 0.5s;
}

.ghost-card #an8 {
  grid-area: an8;
  animation: flicker0 infinite 0.5s;
}

.ghost-card #an11 {
  grid-area: an11;
  animation: flicker0 infinite 0.5s;
}

.ghost-card #an14 {
  grid-area: an14;
  animation: flicker1 infinite 0.5s;
}

@keyframes flicker0 {
  0%,
  49% {
    background-color: red;
  }
  50%,
  100% {
    background-color: transparent;
  }
}

@keyframes flicker1 {
  0%,
  49% {
    background-color: transparent;
  }
  50%,
  100% {
    background-color: red;
  }
}

.ghost-card #eye {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 10px;
}

.ghost-card #eye::before {
  content: "";
  background-color: white;
  width: 20px;
  height: 50px;
  transform: translateX(10px);
  display: block;
  position: absolute;
}

.ghost-card #eye::after {
  content: "";
  background-color: white;
  width: 40px;
  height: 30px;
  transform: translateY(10px);
  display: block;
  position: absolute;
}

.ghost-card #eye1 {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 30px;
  right: 30px;
}

.ghost-card #eye1::before {
  content: "";
  background-color: white;
  width: 20px;
  height: 50px;
  transform: translateX(10px);
  display: block;
  position: absolute;
}

.ghost-card #eye1::after {
  content: "";
  background-color: white;
  width: 40px;
  height: 30px;
  transform: translateY(10px);
  display: block;
  position: absolute;
}

.ghost-card #pupil {
  width: 20px;
  height: 20px;
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 10px;
  z-index: 1;
  animation: eyesMovement infinite 3s;
}

.ghost-card #pupil1 {
  width: 20px;
  height: 20px;
  background-color: blue;
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 1;
  animation: eyesMovement infinite 3s;
}

@keyframes eyesMovement {
  0%,
  49% {
    transform: translateX(0px);
  }
  50%,
  99% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}

.ghost-card #shadow {
  background-color: black;
  width: 140px;
  height: 140px;
  position: absolute;
  border-radius: 50%;
  transform: rotateX(80deg);
  filter: blur(20px);
  top: 80%;
  animation: shadowMovement infinite 0.5s;
}

@keyframes shadowMovement {
  0%,
  49% {
    opacity: 0.5;
  }
  50%,
  100% {
    opacity: 0.2;
  }
}

/* =====================================================
   Credit Card Breaking Animation - The Perfect Version!
   ===================================================== */

.credit-card .card-container {
  display: flex;
  align-items: center;
  scale: 0.7;
  z-index: 1;
  position: relative;
}

.credit-card .flip-card_1 {
  display: inline-block;
  width: 150px;
  height: 154px;
  perspective: 1000px;
  color: white;
  margin-right: -12px;
  animation: moveLeft 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  border-radius: 1rem 0 0 1rem;
  --m: conic-gradient(from -135deg at right, #0000,#000 1deg 89deg,#0000 90deg) right/100% 20px repeat-y;
  -webkit-mask: var(--m);
  mask: var(--m);
}

.credit-card .flip-card_2 {
  display: inline-block;
  width: 130px;
  height: 154px;
  perspective: 1000px;
  color: white;
  margin-left: -12px;
  animation: moveRight 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  border-radius: 0 1rem 1rem 0;
  --m: conic-gradient(from 45deg at left, #0000,#000 1deg 89deg,#0000 90deg) left/100% 20px repeat-y;
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-position: 0 -2px;
  mask-position: 0 -2px;
}

/* The perfected keyframes with 25px split - exactly as you wanted! */
@keyframes moveLeft {
  0%, 20%, 80%, 100% {
    margin-right: -12px;
    transform: translateX(0) rotate(0deg);
  }
  50% {
    margin-right: 25px;
    transform: translateX(-25px) rotate(-3deg);
  }
}

@keyframes moveRight {
  0%, 20%, 80%, 100% {
    margin-left: -12px;
    transform: translateX(0) rotate(0deg);
  }
  50% {
    margin-left: 25px;
    transform: translateX(25px) rotate(3deg);
  }
}

/* Card styling overrides */
.credit-card .flip-card-front {
  background: #171717;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Card text positioning - exact layout */
.credit-card .chip {
  position: absolute;
  top: 2.2em;
  left: 1.5em;
}

.credit-card .valid_thru {
  position: absolute;
  font-weight: normal;
  top: 12.5em;
  font-size: 0.5em;
  left: 1.7em;
  color: #ccc;
}

.credit-card .number {
  position: absolute;
  font-weight: bold;
  font-size: 0.6em;
  top: 8.5em;
  left: 1.5em;
  letter-spacing: 0.1em;
}

.credit-card .date_8264 {
  position: absolute;
  font-weight: bold;
  font-size: 0.4em;
  top: 17.2em;
  left: 3.5em;
}

.credit-card .name {
  position: absolute;
  font-weight: bold;
  font-size: 0.5em;
  top: 16em;
  left: 1.7em;
}

.credit-card .heading_8264 {
  position: absolute;
  letter-spacing: 0.2em;
  font-size: 0.6em;
  top: 1.5em;
  right: 2em;
}

.credit-card .logo {
  position: absolute;
  top: 7em;
  right: 1em;
}

.credit-card .contactless {
  position: absolute;
  top: 4.5em;
  right: 1.5em;
}

/* =====================================================
   Footer
   ===================================================== */

.site-footer {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-primary);
  padding: var(--space-2xl) 0;
}

.footer-content {
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.footer-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-normal);
  font-weight: var(--font-medium);
}

.footer-link:hover {
  color: var(--accent-primary);
}

.footer-link svg {
  width: 20px;
  height: 20px;
}

.copyright {
  color: var(--text-tertiary);
  font-size: 0.9rem;
}

/* =====================================================
   Responsive Design
   ===================================================== */

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }
  
  .projects-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .footer-links {
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .theme-toggle {
    top: var(--space-md);
    right: var(--space-md);
  }
}

@media (max-width: 480px) {
  .project-card {
    padding: var(--space-lg);
  }
  
  .project-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  
  .project-links {
    flex-direction: column;
  }
  
  .hero-actions {
    width: 100%;
  }
  
  .hero-actions .btn {
    justify-content: center;
    width: 100%;
  }
}

/* =====================================================
   Focus & Accessibility
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* Focus styles for keyboard navigation */
a:focus,
button:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border-primary: #000000;
    --border-secondary: #000000;
  }
  
  [data-theme="dark"] {
    --border-primary: #ffffff;
    --border-secondary: #ffffff;
  }
}