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

/* ─── 공통 ──────────────────────────────────────────── */
:root {
  --tr-deep   : #0c2d4e;
  --tr-mid    : #164e7a;
  --tr-gold   : #0EA5E9;
  --tr-speed  : .72s;
  --tr-ease   : cubic-bezier(.76, 0, .24, 1);
}


/* ════════════════════════════════════════════════════
   ① 로딩 인트로
   ════════════════════════════════════════════════════ */
#hm-intro {
  position      : fixed;
  inset         : 0;
  z-index       : 99999;
  display       : flex;
  align-items   : center;
  justify-content: center;
  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;
  gap         : 0;
}

/* 로고 영문 */
.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, transform .6s cubic-bezier(.22,.8,.36,1);
}
#hm-intro.hm-intro--active .hm-intro-logo-en {
  opacity  : 1;
  transform: translateY(0);
  transition-delay: .05s;
}

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

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

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


/* ════════════════════════════════════════════════════
   ② 페이지 전환 오버레이
   ════════════════════════════════════════════════════ */
#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도 아님) ── */
/* 패널이 아래에 숨어있으므로 아무것도 안 보임 — 의도된 동작 */