@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */

/* Navbar underline hover animation */
.nav-link {
  position: relative;
  display: inline-block;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: #111827; /* tailwind gray-900/black tone */
  transition: width 200ms ease;
}

.nav-link:hover::after,
.nav-link:focus::after {
  width: 100%;
}

.nav-link.active::after {
  width: 100%;
}

/* Edge & IE 전용 호환 코드 */
@supports not (gap: 1rem) {
  /* gap을 지원하지 않는 브라우저용 */
  .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 {
    gap: 0 !important;
  }
  
  .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 > * {
    margin-bottom: 1rem;
  }
  
  @media (min-width: 768px) {
    .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 > * {
      margin-bottom: 0;
      margin-right: 2rem;
    }
    
    .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 > *:last-child {
      margin-right: 0;
    }
  }
}

/* Edge & IE 전용 3D 변환 호환성 */
@supports not (transform-style: preserve-3d) {
  .tilt-card {
    transform-style: flat !important;
  }
  
  .tilt-content {
    transform: none !important;
  }
}

/* Edge & IE 전용 transition 호환성 */
@supports not (transition: all 0.3s ease) {
  .transition-all {
    transition: none !important;
  }
  
  .duration-300 {
    transition-duration: 0s !important;
  }
}

/* Edge & IE 전용 border-radius 호환성 */
@supports not (border-radius: 1rem) {
  .rounded-2xl {
    border-radius: 0 !important;
  }
}

/* Edge & IE 전용 box-shadow 호환성 */
@supports not (box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25)) {
  .shadow-2xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  }
}

/* Edge & IE 전용 flexbox 호환성 */
@supports not (display: flex) {
  .flex {
    display: block !important;
  }
  
  .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 > * {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }
  
  @media (min-width: 768px) {
    .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 > * {
      display: inline-block;
      width: calc(25% - 1.5rem);
      margin-right: 2rem;
      vertical-align: top;
    }
    
    .flex.flex-col.md\:flex-row.justify-center.gap-4.md\:gap-8 > *:last-child {
      margin-right: 0;
    }
  }
}

/* Edge & IE 전용 hover 효과 호환성 */
@supports not (hover: hover) {
  .hover\:bg-\[#2941ff\]:hover {
    background-color: #2941ff !important;
  }
  
  .hover\:text-\[#ededed\]:hover {
    color: #ededed !important;
  }
  
  .group:hover .group-hover\:text-\[#ededed\] {
    color: #ededed !important;
  }
}

/* Edge & IE 전용 transform 호환성 */
@supports not (transform: scale(1.05)) {
  .group:hover .group-hover\:scale-105 {
    transform: none !important;
  }
}

/* Edge & IE 전용 backdrop-filter 호환성 */
@supports not (backdrop-filter: blur(10px)) {
  .backdrop-blur {
    backdrop-filter: none !important;
  }
}

/* Edge & IE 전용 CSS Grid 호환성 */
@supports not (display: grid) {
  .grid {
    display: block !important;
  }
  
  .grid.grid-cols-2.sm\:grid-cols-2.md\:grid-cols-3.gap-4.md\:gap-8 > * {
    display: inline-block;
    width: calc(50% - 0.5rem);
    margin-bottom: 1rem;
    vertical-align: top;
  }
  
  @media (min-width: 768px) {
    .grid.grid-cols-2.sm\:grid-cols-2.md\:grid-cols-3.gap-4.md\:gap-8 > * {
      width: calc(33.333% - 1rem);
      margin-right: 1rem;
    }
    
    .grid.grid-cols-2.sm\:grid-cols-2.md\:grid-cols-3.gap-4.md\:gap-8 > *:nth-child(3n) {
      margin-right: 0;
    }
  }
}

/* Edge & IE 전용 aspect-ratio 호환성 */
@supports not (aspect-ratio: 3/4) {
  .aspect-\[3\/4\] {
    position: relative !important;
    padding-bottom: 133.33% !important;
  }
  
  .aspect-\[3\/4\] > * {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Hero Blob Background */
.hero-blob {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 14rem;
  background: radial-gradient(73.4% 100.98% at 95.54% 95.05%, rgba(255, 156, 65, 0.78) 0%, rgba(255, 168, 88, 0) 100%), linear-gradient(197.37deg, #FFF0A4 -0.38%, rgba(255, 240, 164, 0) 101.89%), radial-gradient(58.85% 73.83% at 9.82% 3.13%, rgba(49, 132, 255, 0.8) 0%, rgba(56, 75, 247, 0.208) 52.16%, rgba(62, 246, 246, 0) 100%), linear-gradient(117.39deg, #3E9EF6 3.91%, rgba(238, 43, 183, 0.33) 37.48%, rgba(246, 62, 106, 0) 73.98%), linear-gradient(306.53deg, #FFAADD 19.83%, rgba(255, 170, 221, 0) 97.33%);
  background-blend-mode: normal, normal, normal, normal, normal, normal;
  filter: blur(62px);
  z-index: -1;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .hero-blob {
    width: 300px;
    height: 300px;
  }
}

/* Gradient Button */
.btn-grad {
  background-image: linear-gradient(to right, #1A2980 0%, #26D0CE 51%, #1A2980 100%);
  margin: 0;
  padding: 12px 24px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 9999px;
  display: block;
}

.btn-grad:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}

/* Light Gradient Button */
.btn-grad-light {
  background-image: linear-gradient(to right, #ECE9E6 0%, #FFFFFF 51%, #ECE9E6 100%);
  margin: 0;
  padding: 12px 24px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: #333;
  box-shadow: 0 0 20px #eee;
  border-radius: 9999px;
  display: block;
}

.btn-grad-light:hover {
  background-position: right center;
  color: #333;
  text-decoration: none;
}

/* Portfolio Gradient Button */
.btn-grad-portfolio {
  background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
  margin: 0;
  padding: 12px 24px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 9999px;
  display: block;
}

.btn-grad-portfolio:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}