:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #071210;
  color: #f8f2da;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #071210;
}

button {
  font: inherit;
}

.world {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  place-items: center;
}

.forest,
.veil {
  position: absolute;
  inset: -4%;
}

.forest {
  z-index: -3;
  background-image: url("public/wald-ohne-namen.png");
  background-position: center;
  background-size: cover;
  animation: breathe 20s ease-in-out infinite alternate;
  filter: saturate(1.07) contrast(1.04);
  transform: scale(1.05);
}

.veil {
  z-index: -2;
  background:
    radial-gradient(circle at 50% 47%, transparent 0 17%, rgb(5 12 14 / 0.12) 46%, rgb(1 7 8 / 0.76) 100%),
    linear-gradient(180deg, rgb(3 9 12 / 0.3), transparent 42%, rgb(2 8 8 / 0.55));
}

.threshold {
  width: min(90vw, 760px);
  padding: clamp(2rem, 7vw, 5rem) 1.5rem;
  text-align: center;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.9);
  transform: translateY(3vh);
}

.sigil {
  margin: 0 0 1.5rem;
  color: #d8ffde;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  opacity: 0.82;
}

h1 {
  margin: 0;
  font-size: clamp(3.4rem, 9vw, 7.6rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.promise {
  margin: 2rem auto 2.4rem;
  max-width: 600px;
  color: #f7f4e8;
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  line-height: 1.65;
}

.enter {
  position: relative;
  min-width: 10.5rem;
  padding: 0.9rem 1.7rem;
  overflow: hidden;
  border: 1px solid rgb(229 255 226 / 0.7);
  border-radius: 999px;
  background: rgb(6 27 24 / 0.42);
  box-shadow: 0 0 35px rgb(96 255 178 / 0.11), inset 0 0 16px rgb(255 255 255 / 0.05);
  color: #fffbe8;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.enter::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgb(184 255 218 / 0.28), transparent 80%);
  content: "";
  transform: translateX(-120%);
  transition: transform 700ms ease;
}

.enter:hover,
.enter:focus-visible {
  border-color: #ecffd7;
  box-shadow: 0 0 42px rgb(122 255 194 / 0.3), inset 0 0 18px rgb(255 255 255 / 0.09);
  outline: none;
  transform: translateY(-2px);
}

.enter:hover::before,
.enter:focus-visible::before {
  transform: translateX(120%);
}

.enter span {
  position: relative;
}

.welcome {
  min-height: 1.6rem;
  margin: 1.8rem 0 0;
  color: #e1ffe8;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-style: italic;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 1.1s ease, transform 1.1s ease;
}

.world.is-open .welcome {
  opacity: 1;
  transform: translateY(0);
}

.world.is-open .forest {
  filter: saturate(1.22) contrast(1.06) brightness(1.08);
}

.mark {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2rem);
  margin: 0;
  color: rgb(244 255 229 / 0.58);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.35em;
}

.mark span {
  color: #baffc7;
}

.embers {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.embers i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e6ffc0;
  box-shadow: 0 0 12px 4px rgb(123 255 196 / 0.55);
  opacity: 0;
  animation: drift 8s ease-in-out infinite;
}

.embers i:nth-child(1) { left: 11%; top: 73%; animation-delay: -1s; }
.embers i:nth-child(2) { left: 23%; top: 31%; animation-delay: -5s; }
.embers i:nth-child(3) { left: 37%; top: 82%; animation-delay: -3s; }
.embers i:nth-child(4) { left: 52%; top: 21%; animation-delay: -7s; }
.embers i:nth-child(5) { left: 66%; top: 70%; animation-delay: -2s; }
.embers i:nth-child(6) { left: 78%; top: 39%; animation-delay: -6s; }
.embers i:nth-child(7) { left: 89%; top: 77%; animation-delay: -4s; }
.embers i:nth-child(8) { left: 58%; top: 54%; animation-delay: -8s; }

@keyframes breathe {
  from { transform: scale(1.05) translate3d(-0.5%, -0.3%, 0); }
  to { transform: scale(1.11) translate3d(0.5%, 0.35%, 0); }
}

@keyframes drift {
  0%, 100% { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.7); }
  35%, 68% { opacity: 0.9; }
  55% { transform: translate3d(10px, -18px, 0) scale(1.15); }
}

@media (max-width: 620px) {
  .forest { background-position: 53% center; }
  .threshold { transform: translateY(1vh); }
  .promise { margin-top: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}