/* ========================================
   ULTRA-SMOOTH GRID ANIMATIONS
   Buttery smooth transitions and performance optimized
   ======================================== */

/* Enhanced Portfolio Container */
.portfolio-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 30px;
  padding: 40px 20px;
  perspective: 2000px;
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  max-width: 1400px;
  margin: 0 auto;
}

/* Ultra-Smooth Portfolio Box */
.portfolio-box {
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center center;
  will-change: transform, opacity, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth 3D Hover Transform */
.portfolio-box:hover {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth Image Container */
.portfolio-image {
  overflow: hidden;
  position: relative;
}

.portfolio-image img {
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.portfolio-box:hover .portfolio-image img {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
}

/* Smooth Overlay Transition */
.portfolio-overlay {
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.portfolio-box:hover .portfolio-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth Content Animations */
.portfolio-content {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.project-title {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.portfolio-box:hover .project-title {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.project-description {
  transition: color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth Category Badge */
.project-category {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: left center;
  backface-visibility: hidden;
}

.portfolio-box:hover .project-category {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Ultra-Smooth Tech Badges */
.tech-badge {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tech-badge:hover {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth Button Animations */
.project-btn {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.project-btn:hover {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.project-btn i {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  backface-visibility: hidden;
}

.project-btn:hover i {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth Entrance Animation */
@keyframes smoothFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(80px) translateZ(-60px) scale(0.9);
    filter: blur(12px);
  }
  50% {
    opacity: 0.6;
    transform: translateY(30px) translateZ(-20px) scale(0.95);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateZ(0) scale(1);
    filter: blur(0);
  }
}

.portfolio-box {
  animation: smoothFadeInUp 1s cubic-bezier(0.23, 1, 0.32, 1) backwards;
}

/* Staggered Animation with Smooth Timing */
.portfolio-box:nth-child(1) {
  animation-delay: 0.1s;
}
.portfolio-box:nth-child(2) {
  animation-delay: 0.18s;
}
.portfolio-box:nth-child(3) {
  animation-delay: 0.26s;
}
.portfolio-box:nth-child(4) {
  animation-delay: 0.34s;
}
.portfolio-box:nth-child(5) {
  animation-delay: 0.42s;
}
.portfolio-box:nth-child(6) {
  animation-delay: 0.5s;
}
.portfolio-box:nth-child(7) {
  animation-delay: 0.58s;
}
.portfolio-box:nth-child(8) {
  animation-delay: 0.66s;
}

/* Smooth Group Hover Effect */
.portfolio-container:hover .portfolio-box:not(:hover) {
  transform: scale(0.97) translateZ(-15px);
  opacity: 0.65;
  filter: blur(2px);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth Focus States */
.portfolio-box:focus-within {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.project-btn:focus,
.tech-badge:focus {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth Grid Layout Changes */
@media (max-width: 1200px) {
  .portfolio-container {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 28px;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
}

@media (max-width: 768px) {
  .portfolio-container {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 20px 10px;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .portfolio-box:hover {
    transform: translateY(-10px) scale(1.01);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  }
}

/* Performance Optimizations */
.portfolio-box,
.portfolio-image,
.portfolio-image img,
.project-btn,
.tech-badge,
.project-title,
.project-category {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* GPU Acceleration */
.portfolio-box {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Smooth Scroll Behavior */
.portfolio {
  scroll-behavior: smooth;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .portfolio-box,
  .portfolio-image img,
  .project-btn,
  .tech-badge,
  .portfolio-overlay,
  .project-title,
  .project-category {
    transition: none !important;
    animation: none !important;
  }

  .portfolio-box:hover {
    transform: none !important;
  }

  .portfolio-container:hover .portfolio-box:not(:hover) {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ========================================
   SCROLL STACK SMOOTH ANIMATIONS
   ======================================== */

/* Ultra-Smooth Scroll Stack Container */
.scroll-stack-container {
  scroll-behavior: smooth;
}

/* Enhanced Scroll Stack Card Smoothness */
.scroll-stack-card {
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.scroll-stack-card:hover {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth Scroll Stack Elements */
.scroll-stack-card h3 {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  backface-visibility: hidden;
}

.scroll-stack-card p {
  transition: color 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-stack-card .tech-badge {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  backface-visibility: hidden;
}

.scroll-stack-card .project-btn {
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  backface-visibility: hidden;
}

.scroll-stack-card .project-btn i {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth Underline Animation */
.scroll-stack-card h3::after {
  transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ========================================
   GLOBAL SMOOTH ENHANCEMENTS
   ======================================== */

/* Smooth Page Transitions */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Smooth Link Transitions */
a {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth Button Base */
button,
.btn {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  backface-visibility: hidden;
}

/* Smooth Input Focus */
input:focus,
textarea:focus {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth Image Loading */
img {
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 60fps Animations */
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}