/* ══════════════════════════════════════════════════════
   Hillmaru  ·  transition.css
   ① 로딩 인트로  ② 페이지 전환 오버레이
   ══════════════════════════════════════════════════════ */

/* ─── 공통 ──────────────────────────────────────────── */
:root {
  /* 기본값 — 테마 미설정 시 폴백 */
  --tr-deep   : var(--green-deep,  #0c2d4e);
  --tr-mid    : var(--green-mid,   #164e7a);
  --tr-gold   : var(--gold,        #C9A84C);
  --tr-speed  : .72s;
  --tr-ease   : cubic-bezier(.76, 0, .24, 1);
}


/* ════════════════════════════════════════════════════
   ① 로딩 인트로
   ════════════════════════════════════════════════════ */
#hm-intro {
  position      : fixed;
  inset         : 0;             /* top/right/bottom/left:0 — 뷰포트 정확히 커버 */
  z-index       : 99999;
  display       : flex;
  align-items   : center;
  justify-content: center;
  overflow      : hidden;        /* 내용 넘침 방지 */
  box-sizing    : border-box;
  padding       : 0 24px;
  background    : var(--tr-deep);
  opacity       : 1;
  transition    : opacity .55s ease .1s;
  pointer-events: all;
}

/* 페이드아웃 */
#hm-intro.hm-intro--out {
  opacity       : 0;
  pointer-events: none;
}

/* 내부 컨테이너 */
.hm-intro-inner {
  text-align     : center;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 0;
  width          : 100%;
  max-width      : 480px;
  margin         : 0 auto;
  /* 모바일 SafeArea 대응 */
  padding-bottom : env(safe-area-inset-bottom, 0px);
}

/* 로고 영문 */
.hm-intro-logo-en {
  font-family   : 'Cormorant Garamond', 'Georgia', serif;
  font-size     : clamp(2.6rem, 7vw, 5rem);
  font-weight   : 300;
  letter-spacing: .28em;
  color         : #fff;
  opacity       : 0;
  transform     : translateY(22px);
  transition    : opacity .6s ease .05s, transform .6s cubic-bezier(.22,.8,.36,1) .05s;
}
#hm-intro.hm-intro--active .hm-intro-logo-en {
  opacity  : 1;
  transform: translateY(0);
}

/* 로고 서브 */
.hm-intro-logo-sub {
  font-family   : 'Inter', sans-serif;
  font-size     : clamp(.6rem, 1.6vw, .78rem);
  font-weight   : 400;
  letter-spacing: .32em;
  color         : rgba(255,255,255,.5);
  margin-top    : 8px;
  opacity       : 0;
  transform     : translateY(10px);
  transition    : opacity .5s ease .28s, transform .5s ease .28s;
}
#hm-intro.hm-intro--active .hm-intro-logo-sub {
  opacity  : 1;
  transform: translateY(0);
}

/* 이벤트명 */
.hm-intro-event {
  font-family   : 'Cormorant Garamond', serif;
  font-size     : clamp(.9rem, 2.2vw, 1.1rem);
  font-weight   : 400;
  font-style    : italic;
  letter-spacing: .14em;
  color         : var(--tr-gold);
  margin-top    : 28px;
  opacity       : 0;
  transform     : translateY(8px);
  transition    : opacity .5s ease .52s, transform .5s ease .52s;
}
#hm-intro.hm-intro--active .hm-intro-event {
  opacity  : 1;
  transform: translateY(0);
}

/* 진행 바 */
.hm-intro-bar-wrap {
  width         : 120px;
  height        : 1px;
  background    : rgba(255,255,255,.15);
  margin-top    : 36px;
  overflow      : hidden;
  opacity       : 0;
  transition    : opacity .3s ease .7s;
}
#hm-intro.hm-intro--active .hm-intro-bar-wrap {
  opacity: 1;
}
.hm-intro-bar {
  height    : 100%;
  width     : 0%;
  background: linear-gradient(90deg, var(--tr-gold), rgba(255,255,255,.9));
  transition: none;
}
#hm-intro.hm-intro--active .hm-intro-bar {
  width     : 100%;
  transition: width 1.4s cubic-bezier(.4,0,.2,1) .78s;
}


/* ════════════════════════════════════════════════════
   ② 페이지 전환 오버레이
   ════════════════════════════════════════════════════ */
#hm-trans {
  position      : fixed;
  inset         : 0;
  z-index       : 99998;
  pointer-events: none;
  overflow      : hidden;
}

/* 두 개의 패널이 겹쳐서 슬라이드 */
.hm-trans-panel {
  position  : absolute;
  inset     : 0;
  transform : translateY(100%); /* 기본: 화면 아래 대기 */
  will-change: transform;
}
.hm-trans-panel--a { background: var(--tr-deep); }
.hm-trans-panel--b { background: var(--tr-mid);  }

/* 중앙 로고 (전환 중 잠깐 보임) */
.hm-trans-logo {
  position      : absolute;
  inset         : 0;
  display       : flex;
  align-items   : center;
  justify-content: center;
  font-family   : 'Cormorant Garamond', serif;
  font-size     : clamp(1.8rem, 5vw, 3rem);
  font-weight   : 300;
  letter-spacing: .32em;
  color         : #fff;
  opacity       : 0;
  pointer-events: none;
  transition    : opacity .25s ease;
}

/* ── IN: 패널이 아래→위로 올라와 화면을 덮음 ── */
#hm-trans.hm-trans--in {
  pointer-events: all;
}
#hm-trans.hm-trans--in .hm-trans-panel--a {
  transform : translateY(0);
  transition: transform var(--tr-speed) var(--tr-ease);
}
#hm-trans.hm-trans--in .hm-trans-panel--b {
  transform : translateY(0);
  transition: transform var(--tr-speed) var(--tr-ease) .06s;
}
#hm-trans.hm-trans--in .hm-trans-logo {
  opacity: 1;
  transition-delay: .38s;
}

/* instant: 전환으로 진입한 페이지 — 애니메이션 없이 즉시 IN 상태로 */
#hm-trans.hm-trans--instant .hm-trans-panel--a,
#hm-trans.hm-trans--instant .hm-trans-panel--b {
  transition: none !important;
}

/* ── OUT: 패널이 위→아래로 빠져나가 화면 노출 ── */
#hm-trans.hm-trans--out .hm-trans-panel--a {
  transform : translateY(-100%);
  transition: transform var(--tr-speed) var(--tr-ease) .08s;
}
#hm-trans.hm-trans--out .hm-trans-panel--b {
  transform : translateY(-100%);
  transition: transform var(--tr-speed) var(--tr-ease);
}
#hm-trans.hm-trans--out .hm-trans-logo {
  opacity: 0;
  transition-delay: 0s;
}

/* ── 기본 상태 (로드 직후, IN도 OUT도 아님) ── */
/* 패널이 아래에 숨어있으므로 아무것도 안 보임 — 의도된 동작 */