/* An open world, beginning with Korea. The poster and canvas share one frame. */
.landing.learning-home .learn-globe-scene {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 550px;
  justify-self: center;
  align-self: center;
  padding-bottom: 16px;
  --motion-play: paused;
}
.landing.learning-home.motion-ready .learn-globe-scene.is-in-view { --motion-play: running; }
.landing.learning-home.motion-paused .learn-globe-scene { --motion-play: paused; }
.landing.learning-home .learn-globe-label {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  z-index: 2;
  padding-inline: 5%;
  margin-bottom: -6px;
  color: var(--brand-muted, #b4bac4);
  font-family: var(--small);
  font-size: 9px;
  letter-spacing: .16em;
  line-height: 1.6;
  text-transform: uppercase;
}
.landing.learning-home .learn-globe-art {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 720 / 680;
  overflow: hidden;
  pointer-events: none;
}
.landing.learning-home .learn-globe-art::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 7% 0 2%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 53% 45%, #3385ff1f, #2167e80d 40%, transparent 68%);
}
.landing.learning-home :is(.greeting-globe-poster, .greeting-globe-canvas) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.landing.learning-home .greeting-globe-canvas { opacity: 0; }
.landing.learning-home .is-globe-ready .greeting-globe-canvas { opacity: 1; }
.landing.learning-home .is-globe-ready .greeting-globe-poster { opacity: 0; }
.landing.learning-home .learn-globe-origin {
  position: absolute;
  left: 56.971%;
  top: 39.968%;
  z-index: 2;
  display: grid;
  gap: 3px;
  margin: -5px 0 0 16px;
  color: var(--brand-text, #f5f7fa);
  font-family: var(--small);
  font-size: 10px;
  letter-spacing: .11em;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: 0 1px 8px #080808;
}
.landing.learning-home .learn-globe-origin > span:last-child {
  color: var(--brand-muted, #b4bac4);
  font-size: 8px;
  letter-spacing: .15em;
}
.landing.learning-home .learn-globe-greeting {
  position: absolute;
  z-index: 3;
  left: 12%;
  top: 58%;
  transform: translate(var(--greeting-drift-x, 0px), var(--greeting-drift-y, 0px));
  color: var(--brand-text, #f5f7fa);
  text-shadow: 0 3px 26px #080808e6, 0 0 38px #3385ff24;
}
.landing.learning-home .learn-globe-greeting > span {
  display: block;
  font-family: var(--ko);
  font-size: clamp(52px, 7vw, 90px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.06em;
}
.landing.learning-home .learn-globe-greeting > small {
  display: block;
  margin: 11px 0 0 4px;
  color: var(--brand-muted, #b4bac4);
  font-size: 13px;
  letter-spacing: .04em;
}
.landing.learning-home .learn-globe-caption {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 5px 20px;
  position: relative;
  z-index: 2;
  margin: -37px 6% 0;
  padding-block: 17px 10px;
  border-top: 1px solid var(--brand-line, #ffffff26);
}
.landing.learning-home .learn-globe-phrase {
  font-family: var(--ko);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.4;
  color: var(--brand-text, #f5f7fa);
}
.landing.learning-home .learn-globe-meaning { grid-column: 2; color: var(--brand-muted, #b4bac4); font-size: 14px; line-height: 1.5; }
.landing.learning-home .learn-globe-caption > svg { grid-column: 3; grid-row: 1; width: 23px; height: 23px; color: var(--brand-blue, #3385ff); transition: transform .25s; }
.landing.learning-home .learn-globe-caption:focus-visible { outline: 2px solid var(--brand-blue, #3385ff); outline-offset: 7px; }
@media (max-width: 1100px) {
  .landing.learning-home .learn-globe-scene { padding-bottom: 25px; }
  .landing.learning-home .learn-globe-label { padding-inline: 0; font-size: 8px; letter-spacing: .1em; }
  .landing.learning-home .learn-globe-caption { margin-inline: 3%; }
}
@media (min-width: 581px) and (max-width: 800px) {
  .landing.learning-home .learn-globe-label { font-size: 7px; letter-spacing: .05em; gap: 10px; }
  .landing.learning-home .learn-globe-greeting > span { font-size: 51px; }
  .landing.learning-home .learn-globe-greeting > small { font-size: 10px; margin-top: 7px; }
  .landing.learning-home .learn-globe-origin { font-size: 8px; margin-left: 10px; }
  .landing.learning-home .learn-globe-origin > span:last-child { font-size: 7px; }
  .landing.learning-home .learn-globe-caption { grid-template-columns: 1fr auto; margin-top: -15px; padding-top: 13px; }
  .landing.learning-home .learn-globe-phrase { font-size: 18px; }
  .landing.learning-home .learn-globe-meaning { grid-column: 1; font-size: 12px; }
  .landing.learning-home .learn-globe-caption > svg { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 580px) {
  .landing.learning-home .learn-globe-scene { order: -1; width: min(100%, 330px); padding: 10px 0 8px; }
  .landing.learning-home .learn-globe-label { font-size: 8px; letter-spacing: .1em; margin-bottom: -15px; }
  .landing.learning-home .learn-globe-art { width: min(100%, 303px); margin-inline: auto; }
  .landing.learning-home .learn-globe-greeting > span { font-size: clamp(48px, 14vw, 57px); }
  .landing.learning-home .learn-globe-greeting > small { font-size: 10px; margin: 7px 0 0 3px; }
  .landing.learning-home .learn-globe-origin { font-size: 8px; margin-left: 10px; }
  .landing.learning-home .learn-globe-origin > span:last-child { font-size: 7px; }
  .landing.learning-home .learn-globe-caption { grid-template-columns: auto 1fr auto; gap: 8px; margin: -13px 0 0; padding: 12px 0 7px; }
  .landing.learning-home .learn-globe-phrase { font-size: 15px; }
  .landing.learning-home .learn-globe-meaning { grid-column: 2; font-size: 11px; line-height: 1.35; }
  .landing.learning-home .learn-globe-caption > svg { grid-column: 3; grid-row: 1; width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing.learning-home .learn-globe-greeting { transform: none; }
  .landing.learning-home .learn-globe-caption > svg { transition: none; }
  .landing.learning-home .learn-globe-caption:hover > svg { transform: none; }
}
@media (forced-colors: active) {
  .landing.learning-home .learn-globe-art { display: none; }
  .landing.learning-home .learn-globe-scene { padding-block: 25px; }
  .landing.learning-home .learn-globe-caption { margin: 20px 0 0; border-color: LinkText; }
}
@media print {
  .landing.learning-home .learn-globe-art,
  .landing.learning-home .learn-globe-label { display: none; }
  .landing.learning-home .learn-globe-scene { padding: 0; }
  .landing.learning-home .learn-globe-caption { margin: 25px 0; border-color: #999; }
}