/* --- CSS VARIABLES FOR EASY THEMING --- */
:root {
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-accent: #facc15;
  --color-accent-hover: #fbbf24;
  --color-dark: #0b090a;
  --timing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --timing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* --- 1. CORE PARALLAX SETUP (CSS 3D for GPU Acceleration) --- */
.parallax-wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px; /* Key for 3D space */
  scroll-behavior: smooth;
  font-family: "Inter", sans-serif;
  -webkit-overflow-scrolling: touch;
}

.parallax-group {
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform;
}

.parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  /* Ensure GPU-acceleration for smooth movement */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Far Background Layer (Moves slowest) */
.layer-back {
  /* Parallax Intensity: -1px depth means the background moves at half the speed of the viewport */
  transform: translateZ(-1px) scale(2);
  pointer-events: auto;
  background-color: var(--color-dark);
}

/* Foreground Content Layer (Moves fastest / normal speed) */
.layer-front {
  transform: translateZ(0); /* Default front plane */
}

/* --- 2. HERO ANIMATED GRADIENT EFFECT --- */
@keyframes subtle-move {
  0%,
  100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
}

.animated-bg-gradient {
  background: linear-gradient(
    135deg,
    #0f172a 0%,
    #1e3a8a 50%,
    #312e81 75%,
    #0f172a 100%
  );
  background-size: 400% 400%;
  animation: subtle-move 30s ease-in-out infinite;
}

/* --- 3. SCROLL-TRIGGERED ANIMATIONS (Initial State) --- */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px) translateZ(0);
  transition: opacity 0.8s var(--timing-smooth),
    transform 0.8s var(--timing-smooth);
}

.scale-in {
  opacity: 0;
  transform: scale(0.85) translateZ(0);
  transition: opacity 0.8s var(--timing-smooth),
    transform 0.8s var(--timing-bounce);
}

.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) translateZ(0) !important;
}

/* --- 4. TEXT LEGIBILITY & SHADOWS --- */
.text-outline-shadow {
  /* Subtle shadow for white text on complex backgrounds */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 1px rgba(0, 0, 0, 0.5);
}

/* --- 5. RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 767px) {
  .parallax-group {
    min-height: 80vh;
  }

  /* Reduce parallax intensity on mobile for better performance */
  .layer-back {
    transform: translateZ(-0.5px) scale(1.5) !important;
  }

  .fade-in-up {
    transform: translateY(25px) translateZ(0); /* Reduced motion */
  }
}
/* --- 6. PROJECT CARD ENHANCEMENT --- */
.project-card-hover {
  transition: all 0.5s var(--timing-smooth);
  transform: translateZ(0);
}
.project-card-hover:hover {
  transform: scale(1.03) translateZ(5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}