/* ══════════════════════════════════════════════════════════════
   HOTEL AROUND PYEONGCHANG — BRAND INTRO (워드마크)
   AZMT 인트로 타임라인을 그대로 따른다 (세션 최초 진입 · 약 3초)
   0.0–0.4  dark (forest near-black)
   0.4–1.1  orange line enters from left
   0.8–1.7  wordmark mask reveal
   1.5–2.2  hold
   2.2–3.0  horizontal wipe → hero film
   ══════════════════════════════════════════════════════════════ */

:root{
  --hi-accent: #F37021;   /* 액센트는 이 한 줄로 교체 */
  --hi-bg: #0C1512;
}

html.ha-intro-on, html.ha-intro-on body{ overflow:hidden }

#haIntro{ display:none }
html.ha-intro-on #haIntro{
  display:block;
  position:fixed; inset:0; z-index:10000;
  background:var(--hi-bg);
  clip-path:inset(0 0 0 var(--hi-wipe, 0%));
  will-change:clip-path;
}

#haIntro .hi-edge{
  position:absolute; top:0; bottom:0; left:var(--hi-wipe, 0%);
  width:2px; background:var(--hi-accent);
  opacity:0; transition:opacity .18s linear;
}
#haIntro.wipe .hi-edge{ opacity:1 }

#haIntro .hi-in{
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  padding:0 clamp(28px, 8vw, 140px);
}

#haIntro .hi-line{
  height:2px; width:0; background:var(--hi-accent);
  margin-bottom:clamp(22px, 3vw, 40px);
  max-width:clamp(120px, 22vw, 300px);
}
html.ha-intro-on #haIntro .hi-line{
  animation:hi-line .70s cubic-bezier(.22,1,.26,1) .40s forwards;
}
@keyframes hi-line{ from{ width:0 } to{ width:100% } }

#haIntro .hi-slogan{
  font-family:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:clamp(1.6rem, 4.4vw, 4.1rem);
  line-height:1.12;
  letter-spacing:-.012em;
  color:#F3F0E8;
  margin:0;
}
#haIntro .hi-slogan .m{ display:block; overflow:hidden }
#haIntro .hi-slogan .m > span{
  display:block;
  clip-path:inset(0 100% 0 0);
  opacity:0;
  transform:translateY(8px);
}
html.ha-intro-on #haIntro .hi-slogan .m > span{
  animation:hi-reveal .78s cubic-bezier(.22,1,.26,1) .80s forwards;
}
html.ha-intro-on #haIntro .hi-slogan .m:nth-child(3) > span{ animation-delay:.92s }
@keyframes hi-reveal{
  from{ clip-path:inset(0 100% 0 0); opacity:0; transform:translateY(8px) }
  to  { clip-path:inset(0 0 0 0);    opacity:1; transform:none }
}

/* 데스크톱은 한 줄, 모바일은 두 줄 */
#haIntro .hi-slogan .m:nth-child(2),
#haIntro .hi-slogan .m:nth-child(3){ display:none }

/* ── 슬로건 대신 워드마크 — 왼쪽에서 오른쪽으로 마스크 리빌 ── */
#haIntro .hi-logo{ width:clamp(150px,16vw,240px); margin:0 }
#haIntro .hi-logo img{ display:block; width:100%; height:auto;
  clip-path:inset(0 100% 0 0); opacity:0; transform:translateY(8px) }
html.ha-intro-on #haIntro .hi-logo img{ animation:hi-reveal .9s cubic-bezier(.22,1,.26,1) .80s forwards }
@media (max-width:680px){ #haIntro .hi-logo{ width:150px } }

#haIntro .hi-sub{
  margin-top:clamp(16px, 2.2vw, 28px);
  font-family:'Instrument Sans',Helvetica,Arial,sans-serif;
  font-size:clamp(10.5px, .82vw, 12.5px);
  font-weight:500; letter-spacing:.20em; text-transform:uppercase;
  color:rgba(243,240,232,.42);
  opacity:0;
}
html.ha-intro-on #haIntro .hi-sub{ animation:hi-fade .6s ease 1.42s forwards }
@keyframes hi-fade{ to{ opacity:1 } }

#haIntro.wipe .hi-in{ opacity:0; transition:opacity .34s ease }

#haIntro .hi-skip{
  position:absolute; right:clamp(20px,3vw,44px); bottom:clamp(20px,3vw,40px);
  background:none; border:0; cursor:pointer; padding:10px 4px;
  font-family:'Instrument Sans',Helvetica,Arial,sans-serif;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(243,240,232,.34); opacity:0;
  transition:color .25s;
}
#haIntro .hi-skip:hover{ color:rgba(243,240,232,.7) }
html.ha-intro-on #haIntro .hi-skip{ animation:hi-fade .5s ease 1.6s forwards }

@media (max-width:680px){
  #haIntro .hi-slogan{ font-size:clamp(1.55rem, 8vw, 2.4rem) }
  #haIntro .hi-slogan .m:nth-child(1){ display:none }
  #haIntro .hi-slogan .m:nth-child(2),
  #haIntro .hi-slogan .m:nth-child(3){ display:block }
  html.ha-intro-on #haIntro .hi-slogan .m:nth-child(2) > span{ animation-delay:.80s }
  #haIntro .hi-line{ max-width:clamp(84px, 30vw, 150px) }
  #haIntro .hi-in{ padding:0 26px }
}

@media (prefers-reduced-motion:reduce){
  html.ha-intro-on #haIntro{ display:none }
  html.ha-intro-on, html.ha-intro-on body{ overflow:auto }
}

/* ── 호텔 테마: 가운데 로고 + 금색 선, 커튼처럼 위로 걷힌다 ── */
:root{ --hi-accent:#C9A063; --hi-bg:#1E1915 }
html.ha-intro-on #haIntro{ clip-path:inset(0 0 var(--hi-wipe, 0%) 0) }
#haIntro .hi-edge{ left:0; right:0; top:auto; bottom:var(--hi-wipe, 0%); width:auto; height:1px }
#haIntro .hi-in{ text-align:center; padding:0 24px }
#haIntro .hi-logo{ margin:0 auto }
#haIntro .hi-line{ margin:clamp(22px,2.6vw,34px) auto 0; max-width:clamp(60px,8vw,110px) }
#haIntro .hi-sub{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; text-transform:none;
  letter-spacing:.04em; font-size:clamp(15px,1.2vw,19px); color:rgba(243,240,232,.6) }