/* Stone of Help 1.1.3 – fade-in + left-to-right defocus/reveal, desktop and mobile. */
.soh-intro-screen {
  --soh-font-size: 56px;
  --soh-duration: 2.4s;
  --soh-intro-delay: .55s;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
.soh-intro-screen *,
.soh-intro-screen *::before,
.soh-intro-screen *::after {
  box-sizing: border-box;
}
.soh-intro-screen .soh-intro-logo {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(16px, 4.7vw, var(--soh-font-size));
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
  text-transform: none;
  text-shadow: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  /* The whole logo fades in while coming into focus; runs on mobile too. */
  animation: soh-intro-fade-in .9s ease-out .05s both;
}
.soh-intro-screen .soh-intro-logo span {
  grid-area: 1 / 1;
  display: block;
  margin: 0;
  padding: 0;
  color: #fff;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-shadow: none;
  white-space: nowrap;
  /* Force consistent composition of blur + clipping in mobile Safari. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* A softly blurred copy is initially visible under the sharp copy. */
.soh-intro-screen .soh-intro-blur {
  -webkit-filter: blur(4.5px);
  filter: blur(4.5px);
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  animation: soh-intro-blur-out var(--soh-duration) cubic-bezier(.65,0,.25,1) var(--soh-intro-delay) forwards;
}
/* The clean copy progressively replaces the blurred copy left to right. */
.soh-intro-screen .soh-intro-sharp {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  animation: soh-intro-reveal var(--soh-duration) cubic-bezier(.65,0,.25,1) var(--soh-intro-delay) forwards;
}
.soh-intro-screen.soh-intro-auto-hide {
  animation: soh-intro-dismiss .5s ease-in calc(var(--soh-duration) + 1.25s) forwards;
}
@keyframes soh-intro-fade-in {
  0% {
    opacity: 0;
    -webkit-filter: blur(9px);
    filter: blur(9px);
    transform: translate3d(0, 4px, 0);
  }
  65% {
    opacity: 1;
    -webkit-filter: blur(3px);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes soh-intro-blur-out {
  from {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
  }
}
@keyframes soh-intro-reveal {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}
@keyframes soh-intro-dismiss {
  0% { opacity: 1; visibility: visible; }
  99% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* Keep the full "stone of help coming soon" phrase on one line on phones. */
@media (max-width: 600px) {
  .soh-intro-screen .soh-intro-logo {
    font-size: clamp(16px, 5.3vw, var(--soh-font-size));
    max-width: calc(100vw - 32px);
    white-space: nowrap;
  }
  .soh-intro-screen .soh-intro-blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
  }
}

/* Die Intro-Animation bleibt bewusst auch bei aktivierter Betriebssystem-Option
   "Bewegung reduzieren" aktiv, wie fuer diese Website gewuenscht. */