/* The same film occupies the miniature and the finished hero. */
.hero-scene { position: absolute; inset: 0; overflow: hidden; background: #221f1c; }
.hero-caption-window { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero-next {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  transform: translateX(-50%);
  color: #f3f0ed;
  opacity: .47;
  transition: opacity .55s ease;
}
.hero-next svg { filter: drop-shadow(0 1px 2px #0009); }
.hero-next:is(:hover, :focus-visible) { opacity: 1; }
.hero-next:focus-visible { outline-color: currentColor; outline-offset: -4px; }
html[data-hero-intro] .hero-next { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .hero-next { transition: none; }
}
.hero .hero-title h1 {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 .05em 0 0;
  font: 400 clamp(76px, 13vw, 210px)/.74 var(--serif);
  letter-spacing: -.065em;
  text-shadow: none;
}
.home-page .header-social-bar .header-brand {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.065em;
}
.hero .hero-title > .hero-tagline {
  margin: clamp(15px, 2.2svh, 25px) 0 0;
  font: 400 clamp(16px, 1.45vw, 23px)/1.24 var(--serif);
  letter-spacing: -.025em;
}
.hero-tagline span { display: inline-block; }
.hero .hero-ko {
  margin-top: 10px;
  font: 400 clamp(11px, .85vw, 14px)/1.65 var(--korean);
  letter-spacing: -.03em;
}
.hero-entry-copy, .hero-entry-meter { display: none; }
@media (max-width: 650px) {
  .home-page .hero, .home-page .hero-frame { height: 100svh; height: 100dvh; min-height: 0; }
  .home-page .hero-title { top: 50%; transform: translateY(-50%); }
  .hero .hero-title h1 { font-size: 19vw; line-height: .85; }
  .hero .hero-title > .hero-tagline { font-size: clamp(17px, 4.8vw, 24px); }
  .hero .hero-ko { margin-top: 6px; font-size: 11px; }
}

html[data-hero-intro] .hero-frame { background: var(--paper); --hero-expansion-time: .84s; }
html[data-hero-intro] .hero-scene {
  z-index: 2;
  transform: scale(var(--entry-scale, .001));
  will-change: transform;
}
html[data-hero-intro] .hero-entry-copy {
  position: absolute; inset: 0; display: grid; justify-items: center;
  grid-template-rows: minmax(0,1fr) var(--entry-aperture, 0%) minmax(0,1fr);
  color: var(--ink); text-align: center; pointer-events: none;
  font: 400 clamp(32px, 5.7vw, 98px)/.86 var(--serif); letter-spacing: -.055em;
}
.entry-above { grid-row: 1; align-self: end; padding-bottom: clamp(8px, 1.45svh, 17px); }
.entry-below { grid-row: 3; align-self: start; padding-top: clamp(8px, 1.45svh, 17px); }
.hero-entry-copy span { display: block; }
.hero-entry-copy em { font-style: italic; }
html[data-hero-intro] .hero-entry-copy span { opacity: 0; }
html[data-hero-intro]:not([data-hero-intro="waiting"]) .hero-entry-copy span {
  animation: loader-ink .63s cubic-bezier(.35,.05,.45,1) both;
}
html[data-hero-intro] .entry-above span:nth-child(2) { animation-delay: .06s; }
html[data-hero-intro] .entry-below span:first-child { animation-delay: .12s; }
html[data-hero-intro] .entry-below span:nth-child(2) { animation-delay: .18s; }
@keyframes loader-ink {
  0% { opacity: 0; transform: translateY(.065em); }
  52% { opacity: .35; }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes entry-ink {
  from { opacity: 0; transform: translateY(.19em); }
  to { opacity: 1; transform: translateY(0); }
}
html[data-hero-intro] .hero-entry-meter {
  display: block; position: absolute; z-index: 3; left: 6.6%; right: 6.6%;
  bottom: max(4svh, env(safe-area-inset-bottom)); height: 1px;
  background: rgb(24 22 21 / 18%); color: var(--ink); pointer-events: none;
}
.hero-entry-meter i {
  position: absolute; inset: 0; background: currentColor; transform-origin: left;
  transform: scaleX(var(--entry-progress, 0));
}
.hero-entry-meter span {
  position: absolute; bottom: 7px; left: clamp(3ch, var(--entry-percent, 0%), 100%);
  transform: translateX(-100%); font: 400 12px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums;
}
html[data-hero-intro] .hero-caption-window { clip-path: inset(var(--entry-inset, 50%)); }
html[data-hero-intro] .hero-title > *, html[data-hero-intro] .header-social-bar { opacity: 0; }
html[data-hero-intro] .header-social-bar { visibility: hidden; }
html[data-hero-intro="expand"] .hero-scene {
  transform: scale(1);
  transition: transform var(--hero-expansion-time) cubic-bezier(.48,.05,.22,1);
}
html[data-hero-intro="expand"] .hero-caption-window {
  clip-path: inset(0);
  transition: clip-path var(--hero-expansion-time) cubic-bezier(.48,.05,.22,1);
}
html[data-hero-intro="expand"] .hero-next {
  visibility: visible; opacity: .47;
  transition: visibility 0s var(--hero-expansion-time), opacity .15s ease-out var(--hero-expansion-time);
}
html[data-hero-intro="expand"] .hero-entry-copy,
html[data-hero-intro="expand"] .hero-entry-meter {
  opacity: 0; transition: opacity .26s .05s ease-in;
}
html[data-hero-intro="expand"] .header-social-bar {
  visibility: visible; animation: entry-ink .40s .62s ease-out both;
}
html[data-hero-intro="expand"] .hero-title > h1 { opacity: 1; }
.hero-title h1 .entry-letter { display: inline-block; }
html[data-hero-intro="expand"] .entry-letter {
  animation: mark-unfold .41s cubic-bezier(.30,.02,.29,1) both;
  animation-delay: calc(.22s + var(--order) * .04s);
}
@keyframes mark-unfold {
  from { clip-path: polygon(-20% -25%, -20% -25%, -30% 125%, -30% 125%); }
  to { clip-path: polygon(-20% -25%, 127% -25%, 117% 125%, -30% 125%); }
}
@keyframes line-unfold {
  from { opacity: 0; transform: translateY(.32em); clip-path: inset(0 100% -.18em 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(-.18em -.12em -.18em -.12em); }
}
html[data-hero-intro="expand"] .hero-tagline { opacity: 1; }
html[data-hero-intro="expand"] .hero-tagline span { animation: line-unfold .41s .60s both; }
html[data-hero-intro="expand"] .hero-tagline span:nth-child(2) { animation-delay: .69s; }
html[data-hero-intro="expand"] .hero-tagline span:nth-child(3) { animation-delay: .78s; }
html[data-hero-intro="expand"] .hero-ko { animation: entry-ink .44s .98s both; }
@media (max-width: 650px) {
  html[data-hero-intro] .hero-entry-copy { font-size: min(clamp(43.5px, 12.3vw, 72px), 15svh); }
  .entry-above { padding-bottom: clamp(12px, 2.175svh, 25.5px); }
  .entry-below { padding-top: clamp(12px, 2.175svh, 25.5px); }
  .hero-entry-meter span { font-size: 18px; }
}