/* Hero 섹션 관련 스타일 - 개선된 버전 */
.hero {
  height: 200vh;
  view-timeline: --hero-view;
}

.hero-inner {
  height: 100vh;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 2;
}

.hero .back-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(103, 58, 183, 0.6); /* Changed to match purple theme */
  padding-top: 3px;
  padding-bottom: 3px;
  clip-path: polygon(
    47% 21%,
    100% 0,
    100% 55%,
    90% 94%,
    46% 100%,
    5% 93%,
    0% 12%
  );
  animation: forwards backVideo;
  animation-timeline: --hero-view;
  animation-range: exit-crossing 0% exit-crossing 20%;
  box-shadow: 0 0 25px rgba(156, 39, 176, 0.5); /* Add glow effect */
}

.hero .back-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(
    47% 21%,
    100% 0,
    100% 55%,
    90% 94%,
    46% 100%,
    5% 93%,
    0% 12%
  );
  filter: hue-rotate(225deg) saturate(0.8); /* Adjust video colors to match theme */
  opacity: 0.9;
}

.hero .front-video {
  width: 100%;
  height: 100vh;
  background-color: rgba(156, 39, 176, 0.7); /* Changed to match purple theme */
  padding: 3px;
  clip-path: polygon(
    0% 0%,
    30% 0%,
    50% 15%,
    100% 15%,
    100% 80%,
    30% 100%,
    0% 50%
  );
  animation: both frontVideoClipPath, both border;
  animation-timeline: --hero-view;
  animation-range: exit-crossing;
  box-shadow: 0 0 30px rgba(156, 39, 176, 0.6); /* Add glow effect */
}

.hero .front-video video {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 100;
  object-fit: cover;
  clip-path: polygon(
    0% 0%,
    30% 0%,
    50% 15%,
    100% 15%,
    100% 80%,
    30% 100%,
    0% 50%
  );
  filter: hue-rotate(225deg) contrast(1.1) saturate(0.7); /* Adjust video colors to match theme */
  animation: both frontVideoClipPath, both frontVideoEffects;
  animation-timeline: --hero-view;
  animation-range: exit-crossing;
}

/* 제목 부분 */
.hero-titles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.hero-titles-inner {
  text-align: center;
  animation: both moveTitlesUp;
  animation-timeline: --hero-view;
  animation-range: exit-crossing 40% exit-crossing 50%;
}

.hero-titles-inner h2.first {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.2;
  background: linear-gradient(to right, #fff, #9c27b0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(156, 39, 176, 0.3);
  animation: both firstTitleInitial;
  animation-timeline: --hero-view;
  animation-range: exit-crossing 0% exit-crossing 10%;
}

.hero-titles-inner h2.second {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 0px;
  line-height: 1.2;
  background: linear-gradient(to right, #9c27b0, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(156, 39, 176, 0.3);
  opacity: 0;
  animation: both secondTitleAppear;
  animation-timeline: --hero-view;
  animation-range: exit-crossing 10% exit-crossing 20%;
}

/* 설명 및 버튼 부분 */
.hero-details {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 199;
}

.hero-details-inner {
  width: 90%;
  max-width: 800px;
  padding: 40px;
  margin: 0 auto;
  background-color: rgba(12, 12, 22, 0.7);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(156, 39, 176, 0.3);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  animation: both fadeInDetails;
  animation-timeline: --hero-view;
  animation-range: exit-crossing 30% exit-crossing 50%;
}

.hero-details-inner p {
  font-size: 1.25rem;
  margin-bottom: 30px;
  color: #e9ecef;
}

.hero-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* Hero 관련 애니메이션 */
@keyframes frontVideoClipPath {
  20% {
    clip-path: polygon(
      0% 0%,
      30% 0%,
      50% 0%,
      100% 0%,
      100% 100%,
      30% 100%,
      0% 100%
    );
  }
  to {
    clip-path: polygon(
      0% 0%,
      30% 0%,
      50% 0%,
      100% 0%,
      100% 90%,
      30% 100%,
      0% 90%
    );
  }
}

@keyframes frontVideoEffects {
  0% {
    filter: hue-rotate(225deg) contrast(1.1) saturate(0.7);
  }
  20% {
    filter: hue-rotate(225deg) contrast(1.2) saturate(0.8);
  }
  to {
    filter: hue-rotate(225deg) contrast(1) saturate(0.6);
  }
}

@keyframes border {
  0% {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 0;
    padding-right: 0;
    box-shadow: 0 0 30px rgba(156, 39, 176, 0.6);
  }
  20% {
    padding: 5px;
    box-shadow: 0 0 40px rgba(156, 39, 176, 0.8);
  }
  70% {
    padding-left: 0px;
    padding-right: 0px;
    box-shadow: 0 0 35px rgba(156, 39, 176, 0.7);
  }
  100% {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 3px;
    box-shadow: 0 0 30px rgba(156, 39, 176, 0.6);
  }
}

@keyframes backVideo {
  to {
    opacity: 0;
    transform: scale(1.1);
  }
}

/* 텍스트 애니메이션 키프레임 */
@keyframes firstTitleInitial {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(-20px);
  }
}

@keyframes secondTitleAppear {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(-10px);
  }
}

@keyframes moveTitlesUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100px); /* 제목을 위쪽으로 이동 */
  }
}

/* 설명 및 버튼이 나타난 후 사라지지 않도록 수정 */
@keyframes fadeInDetails {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(120px);
  }
}
/* 반응형 디자인 */
@media (max-width: 768px) {
  .hero-titles-inner h2.first,
  .hero-titles-inner h2.second {
    font-size: 2.5rem;
  }

  .hero-details-inner {
    padding: 25px;
  }

  .hero-details-inner p {
    font-size: 1rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
}