html { scrollbar-gutter: stable; }
#on3d-intro[hidden] { display: none !important; }
#on3d-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: transparent;
  color: var(--white, #F0FAF7);
  font-family: var(--mont, Montserrat, sans-serif);
  direction: ltr;
}
#on3d-intro canvas { display: block; width: 100%; height: 100%; }
#on3d-intro .intro-skip {
  position: absolute;
  top: max(22px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right));
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #52777d;
  border-radius: 3px;
  background: #060d18cc;
  color: #d2e6e4;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#on3d-intro .intro-skip:focus-visible { outline: 3px solid #92d8c0; outline-offset: 4px; }
.hero-left { --home-text-x: -56px; --home-text-y: 0px; }
.hero-left > * { animation-name: homeTextEnter; }
.on3d-intro-playing .hero-left > *,
.on3d-intro-playing .scroll-hint {
  animation: none;
  opacity: 0;
}
@keyframes homeTextEnter {
  from { opacity: 0; transform: translate3d(var(--home-text-x), var(--home-text-y), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (max-width: 900px) {
  .hero-left { --home-text-x: 0px; --home-text-y: 36px; }
}