@charset "UTF-8";

@font-face {
  font-family: "ML Home Entry C01";
  src: url("assets/fonts/opening-c01/C01-names-preview.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

.home-entry {
  --entry-edge: clamp(14px, 5.4cqw, 112px);
  --entry-ink: #534a43;
  --entry-muted: #6b635d;
  --entry-cross: #b7b3b0;
  position: fixed;
  inset: 0;
  z-index: 10000;
  container-type: inline-size;
  isolation: isolate;
  overflow: clip;
  background: radial-gradient(ellipse at 50% 47%, #fff 0%, #fdfefe 44%, #fbfcfd 100%);
  color: var(--entry-ink);
  color-scheme: light;
  font-family: "ML Site Montserrat", "HarmonyOS Sans", "HarmonyOS Sans SC", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.home-entry[hidden] { display: var(--home-entry-initial-display, none) !important; }
.home-entry, .home-entry * { box-sizing: border-box; }
.home-entry .entry-topline,
.home-entry .entry-bottomline {
  position: absolute;
  z-index: 2;
  left: var(--entry-edge);
  right: var(--entry-edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.home-entry .entry-topline { top: max(5.5%, env(safe-area-inset-top)); }
.home-entry .entry-bottomline { bottom: max(4.5%, env(safe-area-inset-bottom)); z-index: 4; }
.home-entry .entry-topline p,
.home-entry .entry-bottomline p { margin: 0; }
.home-entry .entry-mark,
.home-entry .entry-discipline,
.home-entry .entry-eyebrow,
.home-entry .entry-name-en { font-family: "ML Site Montserrat", sans-serif; font-weight: 600; }
.home-entry .entry-mark {
  display: inline-flex;
  align-items: center;
  font-size: clamp(13px, 1.7cqw, 25px);
  letter-spacing: -.045em;
  line-height: 1;
}
.home-entry .entry-mark span {
  margin-inline: .5em;
  color: var(--entry-cross);
  font-family: "HarmonyOS Sans", "HarmonyOS Sans SC", sans-serif;
  font-size: .5em;
  font-weight: 400;
}
.home-entry .entry-discipline {
  font-size: clamp(7px, .78cqw, 11px);
  letter-spacing: .2em;
  color: var(--entry-muted);
}
.home-entry .entry-center {
  position: absolute;
  z-index: 1;
  left: var(--entry-edge);
  right: var(--entry-edge);
  top: 48%;
  transform: translateY(-50%);
}
.home-entry:not([data-ready="true"]) .entry-center { visibility: hidden; }
.home-entry .entry-eyebrow {
  margin: 0 0 4.2cqw;
  text-align: center;
  font-size: clamp(7px, .85cqw, 12px);
  letter-spacing: .24em;
  color: var(--entry-muted);
}
.home-entry .entry-names {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 3.7cqw;
  width: min(100%, 1370px);
  margin: 0 auto;
  font-weight: 500;
}
.home-entry .entry-person { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.home-entry .entry-name {
  display: block;
  margin: 0;
  padding: .04em 0 .08em;
  color: var(--entry-ink);
  font-family: "ML Home Entry C01", "HarmonyOS Sans SC", serif;
  font-size: clamp(25px, 8.7cqw, 148px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: .025em;
  white-space: nowrap;
}
.home-entry .entry-name-en {
  display: block;
  margin-top: 1.9cqw;
  font-size: clamp(8px, 1.06cqw, 15px);
  line-height: 1.4;
  letter-spacing: .2em;
  color: var(--entry-muted);
  white-space: nowrap;
}
.home-entry .entry-tagline {
  margin: 3.4cqw 0 0;
  text-align: center;
  color: var(--entry-muted);
  font-family: "HarmonyOS Sans", "HarmonyOS Sans SC", sans-serif;
  font-size: clamp(8px, .98cqw, 15px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .16em;
}
.home-entry .entry-cross {
  padding-top: .17em;
  color: var(--entry-cross);
  opacity: .68;
  font-family: "HarmonyOS Sans", "HarmonyOS Sans SC", sans-serif;
  font-size: clamp(19px, 4.6cqw, 66px);
  font-weight: 260;
  line-height: 2.35;
}
.home-entry .entry-caption {
  color: var(--entry-muted);
  font-family: "HarmonyOS Sans", "HarmonyOS Sans SC", sans-serif;
  font-size: clamp(7px, .95cqw, 15px);
  font-weight: 400;
  letter-spacing: .14em;
}
.home-entry .entry-skip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 10px 0 10px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--entry-muted);
  font-family: "HarmonyOS Sans", "HarmonyOS Sans SC", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
  cursor: pointer;
  touch-action: manipulation;
}
.home-entry .entry-skip span { font-size: 18px; line-height: 1; }
.home-entry .entry-skip:hover { color: var(--entry-ink); }
.home-entry .entry-skip:focus { outline: none; }
.home-entry[data-keyboard="true"] .entry-skip:focus-visible { outline: 2px solid var(--entry-ink); outline-offset: 5px; }
.home-entry .entry-wipe {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: #eef2f7;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.home-entry.is-playing .entry-person:first-child .entry-name { animation: home-entry-name-left 450ms cubic-bezier(.16, 1, .3, 1) both 65ms; }
.home-entry.is-playing .entry-person:last-child .entry-name { animation: home-entry-name-right 500ms cubic-bezier(.16, 1, .3, 1) both 185ms; }
.home-entry.is-playing .entry-cross { animation: home-entry-intersection 650ms cubic-bezier(.16, 1, .3, 1) both 120ms; }
.home-entry.is-playing .entry-caption,
.home-entry.is-playing .entry-tagline { animation: home-entry-detail 325ms ease both 650ms; }
.home-entry.is-playing .entry-eyebrow,
.home-entry.is-playing .entry-name-en { animation: home-entry-detail 275ms ease both 450ms; }
.home-entry.is-playing .entry-person:last-child .entry-name-en { animation-delay: 550ms; }
.home-entry.is-playing .entry-discipline { animation: home-entry-detail 275ms ease both; }
.home-entry.is-playing .entry-wipe { animation: home-entry-wipe-wide 325ms cubic-bezier(.76, 0, .24, 1) both 1300ms; }
.home-entry.is-playing { animation: home-entry-open-wide 350ms cubic-bezier(.76, 0, .24, 1) both 1595ms; }

@keyframes home-entry-name-left {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-.2em); }
  to { opacity: 1; clip-path: inset(0 -2% 0 0); transform: none; }
}
@keyframes home-entry-name-right {
  from { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(.2em); }
  to { opacity: 1; clip-path: inset(0 -2% 0 0); transform: none; }
}
@keyframes home-entry-detail { from { opacity: 0; } to { opacity: 1; } }
@keyframes home-entry-intersection { from { opacity: 0; transform: scale(.85); } to { opacity: .68; transform: scale(1); } }
@keyframes home-entry-wipe-wide { to { transform: scaleX(1); } }
@keyframes home-entry-wipe-tall { to { transform: scaleY(1); } }
@keyframes home-entry-open-wide { from { clip-path: inset(0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes home-entry-open-tall { from { clip-path: inset(0); } to { clip-path: inset(0 0 100% 0); } }

@media (max-aspect-ratio: 1/1) {
  .home-entry .entry-name { font-size: 9.3cqw; }
  .home-entry .entry-names { gap: 3cqw; }
  .home-entry .entry-center { top: 47%; }
  .home-entry .entry-eyebrow { font-size: 2.05cqw; margin-bottom: 7.2cqw; }
  .home-entry .entry-name-en { font-size: 2.2cqw; letter-spacing: .1em; margin-top: 3.6cqw; }
  .home-entry .entry-cross { font-size: 5cqw; }
  .home-entry .entry-tagline { font-size: 2.85cqw; margin-top: 7.2cqw; }
  .home-entry .entry-mark { font-size: 5.2cqw; }
  .home-entry .entry-discipline { font-size: 2.3cqw; letter-spacing: .08em; }
  .home-entry .entry-caption { font-size: 2.55cqw; }
  .home-entry .entry-wipe { transform: scaleY(0); transform-origin: bottom; }
  .home-entry.is-playing .entry-wipe { animation-name: home-entry-wipe-tall; }
  .home-entry.is-playing { animation-name: home-entry-open-tall; }
}
@media (max-width: 520px) {
  .home-entry .entry-skip { font-size: 10px; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .home-entry .entry-name { font-size: min(8.7cqw, 19vh); }
  .home-entry .entry-cross { font-size: min(4.6cqw, 10vh); }
  .home-entry .entry-eyebrow { margin-bottom: 18px; font-size: 9px; }
  .home-entry .entry-name-en { margin-top: 8px; font-size: 9px; }
  .home-entry .entry-tagline { margin-top: 18px; font-size: 11px; }
  .home-entry .entry-topline { top: max(18px, env(safe-area-inset-top)); }
  .home-entry .entry-bottomline { bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .home-entry, .home-entry[hidden] { display: none !important; }
  .home-entry, .home-entry * { animation: none !important; }
}