/* 26.3 seconds: globe 0–3, shrink 3–4, sentence 4–10.4,
   circles 10.7–22.9, logo 23.5–25.5, exit 25.5–26.3. */
html.app-loading .view-stage,
html.app-loading .portal-header,
html.app-loading .planet-menu { visibility:hidden; }
.earth-canvas:not([data-ready="true"]) { visibility:hidden; }
.intro-sentence {
  position: absolute; z-index: 6; top: 2%; left: 20%; width: 60%; margin: 0;
  color: #56B8E8; font-family: 'Modak', Arial, sans-serif; font-weight: 400;
  font-size: clamp(46px, 4.14vw, 78.2px); line-height: 1.15; letter-spacing: .01em;
  text-align: center; opacity: 0; transform: translateX(-100vw);
  transition: transform 6400ms cubic-bezier(.2,.7,.2,1), opacity 2400ms ease;
}
.intro-sentence.is-visible { opacity: 1; transform: translateX(0); }
.intro-sentence .intro-colon { color: #FEB812; font: inherit; letter-spacing: inherit; }
.planet-menu { transition: opacity 1040ms ease, visibility 1040ms ease; }
.intro-logo .intro-sentence { opacity: 0; }
.intro-stage { --intro-globe-size: min(48vw, 54dvh, 560px); --large-globe-size: min(88vw, 88dvh); transition: opacity 800ms ease, visibility 800ms ease; }
.intro-stage .earth-stage {
  width: var(--large-globe-size); height: var(--large-globe-size);
  transition: transform 1000ms cubic-bezier(.2,.8,.2,1), opacity 400ms ease;
}
.intro-stage .earth-stage::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid #242423; border-radius: 50%; pointer-events: none;
}
.intro-stage .earth-stage:has([data-renderer="canvas-globe-fallback"])::after { display: none; }
.intro-small .intro-stage .earth-stage { transform: translate(-50%, -50%) scale(.60); }
.intro-stage .logo-stage { transition: clip-path 1200ms ease, opacity 800ms ease; }
.intro-column { position: absolute; top: 5%; bottom: 10%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.intro-elements { left: 9%; }
.intro-syllables { right: 8%; }
.intro-column .intro-word {
  position: static; display: grid; place-items: center; flex: 0 0 auto;
  width: min(11vw, 18dvh); height: min(11vw, 18dvh);
  border: 3px solid var(--sun); border-radius: 50%;
  background: #FEB812; color: #FEFEFE;
  font-family: 'Modak', Arial, sans-serif; font-weight: 400;
  font-size: clamp(22px, 3.1vw, 58px); line-height: 1.1; letter-spacing: 0;
  transform: translateX(-65px) scale(.65);
  transition: opacity 900ms ease, transform 1000ms cubic-bezier(.2,.8,.2,1);
}
.intro-column .word-water, .intro-column .word-air { background: #56B8E8; border-color: #56B8E8; }
.intro-column .word-soil { background: #FEB812; }
.intro-syllables .intro-word { width: min(7.4vw, 13dvh); height: min(7.4vw, 13dvh); background: #FEB812; transform: translateX(65px) scale(.65); }
.intro-syllables .intro-word:nth-child(even) { background: #56B8E8; border-color: #56B8E8; }
.intro-column .intro-word.is-visible { transform: translateX(0) scale(1); }
.intro-stage .intro-next { right: 6%; bottom: 2%; }
.intro-logo .intro-column { opacity: 0; transition: opacity 400ms ease; }
.intro-leaving .intro-stage { pointer-events: none; }
.member-intro { font-family: Arial, sans-serif; font-weight: 700; letter-spacing: .01em; }
@media (max-width: 820px) {
  .intro-stage .intro-next { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .intro-sentence { top: 2%; left: 4%; width: 92%; font-size: clamp(39.1px, 10.35vw, 55.2px); }
  .intro-stage { --large-globe-size: min(94vw, 86dvh); --intro-globe-size: min(54vw, 50dvh); }
  .intro-small .intro-stage .earth-stage { transform: translate(-50%, -50%) scale(.55); }
  .intro-elements { left: 2%; }
  .intro-syllables { right: 2%; }
  .intro-column { top: 25%; bottom: 12%; }
  .intro-column .intro-word { width: min(22vw, 14dvh); height: min(22vw, 14dvh); font-size: clamp(23px, 5.6vw, 42px); border-width: 2px; }
  .intro-syllables .intro-word { width: min(16vw, 11dvh); height: min(16vw, 11dvh); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-sentence { transform: none; transition: none; }
  .intro-stage .earth-stage, .intro-column .intro-word, .intro-stage .logo-stage { transition: none; }
  .intro-column .intro-word { transform: none; }
}

/* Keep only the imported element images and their captions. */
.intro-elements .intro-word{
  position: relative;
  inset: auto;
  background: transparent;
  border-color: transparent;
}
.intro-elements .intro-word > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.intro-element-label{
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: min(clamp(16px, 1.8vw, 28px), 2.8dvh);
  line-height: 1.05;
  white-space: nowrap;
}

/* Override the global Arial rule, including the generated button lettering. */
body .intro-stage .intro-element-label,
body .intro-stage .intro-next,
body .intro-stage .intro-next * {
  font-family:'Modak',Arial,sans-serif!important;
  font-weight:400!important;
}

.intro-stage .intro-next, .intro-stage .intro-next:hover, .intro-stage .intro-next:focus-visible {
  font-family:'Modak',Arial,sans-serif; font-weight:400;
  border:0; text-decoration:none; color:#56B8E8; --letter-hover-color:#FFB812;
}
.intro-stage .intro-next:hover, .intro-stage .intro-next:focus-visible { color:#FFB812; }
.intro-stage .intro-next .letter-wipe { --letter-color:#56B8E8!important; --letter-hover-color:#FFB812; }