/* =====================================================
   SeeU Dive Hero CSS v5.0
   - 메인 첫 화면 전용
   - 중복된 스크롤 안내 스타일 제거
   - DIVE + 아래 화살표 구성
   - 파일 위치: /assets/css/hero.css
===================================================== */

:root{
  --hero-height: var(--site-hero-height, 100vh);
  --hero-min-height: var(--site-hero-min-height, 680px);
  --hero-max-height: var(--site-hero-max-height, 980px);

  --hero-mobile-height: 88vh;
  --hero-mobile-min-height: 620px;

  --hero-video-scale-start: 1.03;
  --hero-video-scale-end: 1.08;

  --hero-text-y: -10px;
  --hero-text-mobile-y: -4px;

  --hero-eyebrow-size: clamp(13px,1vw,15px);
  --hero-eyebrow-mobile-size: 20px;
  --hero-eyebrow-gap: 38px;
  --hero-eyebrow-mobile-gap: 18px;
  --hero-eyebrow-letter: .34em;
  --hero-eyebrow-mobile-letter: .22em;
  --hero-eyebrow-color: #d8fbff;

  --hero-title-size: clamp(24px,3.45vw,34px);
  --hero-title-mobile-size: clamp(23px,7.2vw,34px);
  --hero-title-gap: 12px;
  --hero-title-mobile-gap: 10px;
  --hero-title-line-height: 1.22;
  --hero-title-mobile-line-height: 1.24;
  --hero-title-letter: -.04em;
  --hero-title-mobile-letter: -.035em;
  --hero-title-shadow: 0 12px 34px rgba(0,0,0,.42);

  --hero-seeu: #42e8ff;
  --hero-banana: #ffd54a;

  --logo-seeu: #42e8ff;
  --logo-dive: #ffffff;
  --logo-banana: #ffd54a;

  --logo-seeu-scroll: #0f7fbd;
  --logo-dive-scroll: #111111;
  --logo-banana-scroll: #f2b900;

  --hero-menu-color: rgba(255,255,255,.92);
  --hero-menu-scroll-color: #24435f;

  --hero-overlay-start:
    radial-gradient(circle at center, rgba(0,0,0,.02) 0%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.24) 100%),
    linear-gradient(180deg, rgba(0,18,32,.06) 0%, rgba(0,18,32,.10) 45%, rgba(0,18,32,.32) 100%);

  --hero-overlay-scrolled:
    radial-gradient(circle at center, rgba(0,0,0,.12) 0%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.58) 100%),
    linear-gradient(180deg, rgba(0,18,32,.22) 0%, rgba(0,18,32,.38) 45%, rgba(0,18,32,.78) 100%);
}

/* 1. HERO LAYOUT */
.hero.media-hero.premium-hero{
  position: relative;
  isolation: isolate;
  width: 100%;
  height: var(--hero-height);
  min-height: var(--hero-min-height);
  max-height: var(--hero-max-height);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  text-align: center;
  color: #fff;
  background: #001827;
}

/* 2. VIDEO */
.hero.media-hero.premium-hero .hero-video{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--hero-video-scale-start));
  filter: none;
  animation: heroVideoZoom 20s ease-in-out infinite alternate;
  transition: transform .6s ease, filter .6s ease;
}

/* 3. OVERLAY */
.hero.media-hero.premium-hero .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hero-overlay-start);
  transition: background .6s ease, opacity .6s ease;
}

.hero.media-hero.premium-hero.hero-scrolled .hero-overlay{
  background: var(--hero-overlay-scrolled);
}

/* 4. HERO TEXT */
.hero.media-hero.premium-hero .hero-inner,
.hero.media-hero.premium-hero .hero-content{
  position: relative;
  z-index: 2;
  width: min(980px, 100%);
  margin: 0 auto;
  transform: translateY(var(--hero-text-y));
}

.hero.media-hero.premium-hero .hero-eyebrow{
  display: block;
  margin-bottom: var(--hero-eyebrow-gap);
  font-size: var(--hero-eyebrow-size);
  letter-spacing: var(--hero-eyebrow-letter);
  color: var(--hero-eyebrow-color);
  text-shadow: 0 8px 28px rgba(0,0,0,.35);
  animation: heroFadeUp .9s ease both;
}

.hero-title-lines{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hero-title-gap);
  margin: 0 auto;
  color: #fff;
  text-shadow: var(--hero-title-shadow);
}

.hero-title-line{
  font-size: var(--hero-title-size);
  line-height: var(--hero-title-line-height);
  font-weight: 900;
  letter-spacing: var(--hero-title-letter);
  animation: heroFadeUp 1s ease both;
}

.hero-title-line:nth-child(2){
  animation-delay: .12s;
}

.hero-title-line .seeu{
  color: var(--hero-seeu);
  letter-spacing: .01em;
  white-space: nowrap;
}

.hero-title-line .banana{
  color: var(--hero-banana);
  letter-spacing: .01em;
  white-space: nowrap;
}

/* 메인 Hero에서는 브랜드 문구만 표시 */
.hero-desc,
.hero-actions,
.scroll-cue{
  display: none !important;
}

/* 5. TRANSPARENT HEADER */
#site-header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}

#site-header .topbar{
  position: relative;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
  backdrop-filter: none;
  transition: background .32s ease, border-color .32s ease, box-shadow .32s ease, backdrop-filter .32s ease;
}

#site-header .nav{
  transition: padding .32s ease;
}

#site-header .logo,
#site-header .menu a{
  transition: color .32s ease, text-shadow .32s ease;
  text-shadow: 0 8px 22px rgba(0,0,0,.32);
}

#site-header .logo-seeu{ color: var(--logo-seeu) !important; }
#site-header .logo-dive{ color: var(--logo-dive) !important; }
#site-header .logo-banana{ color: var(--logo-banana) !important; }
#site-header .menu a{ color: var(--hero-menu-color) !important; }

#site-header.header-scrolled .topbar{
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(5,43,79,.10);
  backdrop-filter: blur(14px);
}

#site-header.header-scrolled .nav{
  padding-top: 12px;
  padding-bottom: 12px;
}

#site-header.header-scrolled .logo,
#site-header.header-scrolled .menu a{
  text-shadow: none;
}

#site-header.header-scrolled .logo-seeu{ color: var(--logo-seeu-scroll) !important; }
#site-header.header-scrolled .logo-dive{ color: var(--logo-dive-scroll) !important; }
#site-header.header-scrolled .logo-banana{ color: var(--logo-banana-scroll) !important; }
#site-header.header-scrolled .menu a{ color: var(--hero-menu-scroll-color) !important; }
#site-header.header-scrolled .menu a:hover{ color: var(--blue) !important; }

/* 6. DIVE SCROLL INDICATOR
   기존 HTML의 <span>DIVE IN</span>도 화면에서는 DIVE로 표시합니다.
*/
.hero-scroll{
  position: absolute;
  left: 50%;
  bottom: clamp(24px,4.2vh,46px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 72px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.86);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transform: translateX(-50%);
  transition: opacity .32s ease, transform .32s ease, color .32s ease;
  animation: heroScrollFadeIn 1s ease .75s both;
}

.hero-scroll span{
  display: block;
  font-size: 0;
  line-height: 1;
}

.hero-scroll span::after{
  content: "DIVE";
  display: block;
  padding-left: .32em;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .32em;
  line-height: 1;
  text-shadow: 0 8px 24px rgba(0,0,0,.34);
}

/* 기존 i 요소를 아래 화살표로 사용 */
.hero-scroll i{
  display: block;
  width: 18px;
  height: 18px;
  border-right: 1.6px solid rgba(255,255,255,.92);
  border-bottom: 1.6px solid rgba(255,255,255,.92);
  background: none;
  transform: rotate(45deg);
  animation: heroScrollArrow 1.8s ease-in-out infinite;
}

/* 예전 세로선 완전 제거 */
.hero-scroll::before,
.hero-scroll::after{
  content: none !important;
  display: none !important;
}

.hero-scroll:hover{
  color: #fff;
  transform: translateX(-50%) translateY(-3px);
}

.hero.media-hero.premium-hero.hero-scrolled .hero-scroll{
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
}

/* 7. ANIMATIONS */
@keyframes heroVideoZoom{
  from{ transform: scale(var(--hero-video-scale-start)); }
  to{ transform: scale(var(--hero-video-scale-end)); }
}

@keyframes heroFadeUp{
  from{ opacity: 0; transform: translateY(22px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes heroScrollFadeIn{
  from{ opacity: 0; transform: translateX(-50%) translateY(12px); }
  to{ opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes heroScrollArrow{
  0%,100%{
    opacity: .45;
    transform: rotate(45deg) translate(0,0);
  }
  50%{
    opacity: 1;
    transform: rotate(45deg) translate(5px,5px);
  }
}

/* 8. RESPONSIVE */
@media(max-width:820px){
  #site-header .topbar{
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
  }

  #site-header .logo,
  #site-header .menu a{
    text-shadow: none;
  }

  #site-header .logo-seeu{ color: var(--logo-seeu-scroll) !important; }
  #site-header .logo-dive{ color: var(--logo-dive-scroll) !important; }
  #site-header .logo-banana{ color: var(--logo-banana-scroll) !important; }
}

@media(max-width:768px){
  .hero.media-hero.premium-hero{
    height: var(--hero-mobile-height);
    min-height: var(--hero-mobile-min-height);
  }

  .hero.media-hero.premium-hero .hero-video{
    transform: scale(1.02);
  }

  .hero.media-hero.premium-hero .hero-inner,
  .hero.media-hero.premium-hero .hero-content{
    transform: translateY(var(--hero-text-mobile-y));
  }

  .hero.media-hero.premium-hero .hero-eyebrow{
    margin-bottom: var(--hero-eyebrow-mobile-gap);
    font-size: var(--hero-eyebrow-mobile-size);
    letter-spacing: var(--hero-eyebrow-mobile-letter);
  }

  .hero-title-lines{
    gap: var(--hero-title-mobile-gap);
  }

  .hero-title-line{
    font-size: var(--hero-title-mobile-size);
    line-height: var(--hero-title-mobile-line-height);
    letter-spacing: var(--hero-title-mobile-letter);
  }

  .hero-scroll{
    bottom: 22px;
    gap: 10px;
  }

  .hero-scroll span::after{
    padding-left: .28em;
    font-size: 10px;
    letter-spacing: .28em;
  }

  .hero-scroll i{
    width: 15px;
    height: 15px;
  }
}

@media(max-height:680px){
  .hero-scroll{
    bottom: 18px;
  }
}

@media(max-width:420px), (max-height:620px){
  .hero-scroll span{
    display: none;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero.media-hero.premium-hero .hero-video,
  .hero.media-hero.premium-hero .hero-eyebrow,
  .hero-title-line,
  .hero-scroll,
  .hero-scroll i{
    animation: none !important;
  }
}