/* ====================================
   GSAP Animations Styles
   TechU Website
   ==================================== */

/* ====================================
   Smooth Rendering
   ==================================== */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====================================
   Card Hover Effects
   ==================================== */

.main-card,
.tools-card,
.product-card,
.benefits-card,
.can-join-card,
.benefits-join-card,
.contact-department-card,
.account-info-card,
.account-content-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-card:hover,
.tools-card:hover,
.product-card:hover,
.benefits-card:hover,
.can-join-card:hover,
.benefits-join-card:hover,
.contact-department-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ====================================
   Button Hover Effects
   ==================================== */

.btn,
.btn-primary,
.btn-white,
.btn-light-green,
button {
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.btn-light-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(21, 128, 61, 0.25);
}

.btn:active,
.btn-primary:active,
.btn-white:active,
.btn-light-green:active {
  transform: translateY(0);
}

/* ====================================
   Image Hover Effects
   ==================================== */

img {
  transition: transform 0.4s ease;
}

.main-card:hover img,
.tools-card:hover img,
.product-card:hover img {
  transform: scale(1.01);
}
.main-card:hover .price-box,
.tools-card:hover .price-box,
.product-card:hover .price-box {
  /* transform: scale(1.03) translateY(-10px) ease-in-out; */
}


/* ====================================
   Icon Animations
   ==================================== */

.card-icon,
.benefit-icon {
  transition: transform 0.3s ease;
}

.main-card:hover .card-icon,
.benefits-card:hover .benefit-icon {
  transform: scale(1.1) rotate(5deg);
}

/* ====================================
   Text Hover Effects
   ==================================== */

.main-card:hover h3,
.tools-card:hover h4,
.benefits-card:hover h4 {
  color: var(--tu-primary);
  transition: color 0.3s ease;
}

/* ====================================
   Smooth Scroll
   ==================================== */

html {
  scroll-behavior: smooth;
}

/* ====================================
   Performance Optimization
   ==================================== */

.main-card,
.tools-card,
.product-card,
.benefits-card,
section {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* ====================================
   Responsive Adjustments
   ==================================== */

@media (max-width: 768px) {
  .main-card:hover,
  .tools-card:hover,
  .product-card:hover,
  .benefits-card:hover {
    transform: translateY(-3px);
  }
  
  .btn-primary:hover,
  .btn-white:hover,
  .btn-light-green:hover {
    transform: translateY(-1px);
  }
}

/* ====================================
   Reduced Motion Support
   ==================================== */

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

/* ====================================
   Focus States (Accessibility)
   ==================================== */

.btn:focus,
.btn-primary:focus,
.btn-white:focus,
.btn-light-green:focus {
  outline: 3px solid var(--tu-primary);
  outline-offset: 3px;
}

.main-card:focus-within,
.tools-card:focus-within,
.product-card:focus-within {
  outline: 2px solid var(--tu-primary);
  outline-offset: 4px;
}