@keyframes bannerIn {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }

  20% {
    opacity: 1;
    transform: scale(1);
  }

  80% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes bannerCollapse {
  0% {
    max-height: 100vh;
    margin-bottom: 0;
  }

  100% {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

@keyframes veilOut {
  0% {
    opacity: 0.8;
  }

  70% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

.intro-banner {
  position: relative;
  width: 100vw;
  aspect-ratio: 6000 / 3000;
  background: center / cover no-repeat url('/static/img/banner/intro-banner6.png');
  background-color: rgb(14 45 63);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* 등장 → 사라짐 → 높이 축소 */
  opacity: 0;
  transform: scale(1.03);
  animation:
    bannerIn 1s ease-out forwards,
    bannerCollapse 0.8s ease-out 0.8s forwards;
}

/* 살짝 어둡게 → 자연스러운 페이드아웃 */
.intro-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 40%, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, .28) 100%);
  opacity: 0.8;

  animation: veilOut 4s ease-out forwards;
}

/* Responsive for banner */
@media (max-width: 768px) {
  .intro-banner {
    aspect-ratio: 16 / 9;
  }
}

/* 키프레임 */
@keyframes bannerIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes veilOut {
  to {
    opacity: .25;
  }
}

.intro-banner-logo {
  position: absolute;
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  justify-content: center;
  justify-items: center;
  align-items: center;

}

.intro-banner-logo .product {
  width: clamp(50%, 4vw, 80%);
}

.intro-banner-logo .logo {
  width: clamp(80%, 5vw, 100%);
  height: auto;
}

/* .product-banner {
  position: relative;
  height: 80vh;
  background-image: url('/static/img/product/background/excavator.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; 
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
} */