/* ================================================================
   Szenen: liegen übereinander, nur eine ist aktiv.
   Die Bühne (Canvas) darunter läuft kontinuierlich weiter.
   ================================================================ */
.scene {
  position: fixed; inset: 0; z-index: 2;
  opacity: 0; visibility: hidden;
  transition: opacity .9s var(--ease-inout), visibility 0s linear .9s;
}
.scene.is-active {
  opacity: 1; visibility: visible;
  transition: opacity 1.3s var(--ease-inout) .2s, visibility 0s;
}
.anchor { pointer-events: none; }

/* ================================================================
   1 + 2  LANDING / INTENTION
   ================================================================ */
.landing {
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--top) + 60px + env(safe-area-inset-top)) var(--gutter) calc(clamp(64px, 10vh, 112px) + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.landing .hero { position: relative; flex: 1 1 auto; width: 100%; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.landing .hero .anchor { width: min(100%, 880px); height: 100%; }
/* Ohne WebGL: Keyframe V1 als ruhiges Standbild */
.hero-fallback { display: none; }
body.no-webgl .hero-fallback { display: block; position: absolute; left: 50%; top: 50%; height: 125%; transform: translate(-50%, -46%); pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }

.landing-copy { flex: none; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.question {
  margin: clamp(6px, 1.6vh, 20px) 0 clamp(22px, 3.4vh, 36px);
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4.5vw, 72px); line-height: 1.02; letter-spacing: -.014em;
  color: var(--ink);
}

.intent { width: min(700px, 100%); }
.intent-field {
  display: flex; align-items: flex-end; gap: 12px;
  padding: 9px 9px 9px 28px;
  border: 1px solid var(--hair-strong); border-radius: 34px;
  background: linear-gradient(180deg, rgba(255, 253, 249, .74), rgba(250, 246, 238, .5));
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(90, 64, 30, .05), 0 30px 64px -36px rgba(90, 64, 30, .5);
  transition: border-color .8s var(--ease-inout), box-shadow .8s var(--ease-inout);
}
.intent-field:focus-within {
  border-color: rgba(160, 122, 69, .62);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 7px rgba(201, 166, 107, .1), 0 36px 76px -34px rgba(90, 64, 30, .55);
}
.intent textarea {
  flex: 1; min-width: 0; height: 50px; max-height: 30vh;
  border: 0; outline: 0; background: transparent; resize: none;
  padding: 13px 0; color: var(--ink);
  font-family: var(--sans); font-weight: 300; font-size: 16.5px; line-height: 1.5; letter-spacing: .01em;
}
.intent textarea::placeholder { color: #9a8d7c; font-family: var(--serif); font-style: italic; font-size: 19px; letter-spacing: 0; }
.submit {
  flex: none; width: 50px; height: 50px; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: #fbf3e4;
  background: radial-gradient(120% 120% at 30% 22%, #a07c4a 0%, #6f4f27 55%, #46311a 100%);
  box-shadow: 0 12px 26px -12px rgba(74, 52, 24, .85), inset 0 1px 0 rgba(255, 236, 200, .35);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.submit svg { width: 22px; height: 22px; }
.submit:hover { transform: translateX(2px); box-shadow: 0 16px 30px -12px rgba(74, 52, 24, .9), inset 0 1px 0 rgba(255, 236, 200, .4); }
.form-hint { min-height: 1.5em; margin: 8px 0 0; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--bronze-deep); }

.inspire {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 9px;
  transition: opacity 1.2s var(--ease-inout);
}
.inspire button {
  border: 1px solid var(--hair); border-radius: 999px; background: rgba(251, 248, 242, .3);
  padding: 7px 16px 8px; color: var(--ink-soft);
  font-size: 12.5px; letter-spacing: .05em;
  transition: border-color .5s, color .5s, background .5s;
}
.inspire button:hover { border-color: var(--hair-strong); color: var(--ink); background: rgba(255, 253, 249, .72); }
body[data-state="intention"] .inspire { opacity: .38; }

.corner {
  position: absolute; bottom: calc(clamp(22px, 4vh, 40px) + env(safe-area-inset-bottom)); margin: 0;
  font-size: 10px; font-weight: 400; letter-spacing: .38em; line-height: 2.1; text-transform: uppercase;
  color: var(--bronze); transition: opacity 1.2s var(--ease-inout);
}
.corner--left { left: var(--gutter); }
.corner--right { right: var(--gutter); text-align: right; }
body[data-state="intention"] .corner { opacity: 0; }

/* ================================================================
   3  VERSTANDEN   ·   4  REISE ENTSTEHT
   ================================================================ */
.scene-head { position: absolute; left: var(--gutter); top: calc(var(--top) + clamp(84px, 14vh, 150px)); }
.echo {
  margin: clamp(18px, 3vh, 28px) 0 0; max-width: 340px;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(17px, 1.35vw, 21px); line-height: 1.45; color: var(--fg-soft);
  opacity: 0; transform: translateY(8px);
  transition: opacity 1.6s var(--ease-inout) 1.1s, transform 1.8s var(--ease-out) 1.1s;
}
.understood.is-active .echo { opacity: 1; transform: none; }

/* erst einblenden, wenn die Bühne nach dem Release dunkel genug ist */
.understood.is-active { transition-delay: 1.5s, 0s; }
.understood .anchor { position: absolute; left: 50%; top: 45%; width: min(50vh, 72vw); height: min(50vh, 72vw); transform: translate(-50%, -50%); }
.terms {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(56px, 12vh, 130px); margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px;
}
.term {
  margin-right: -.3em;
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.1vw, 30px);
  letter-spacing: .3em; text-transform: uppercase; color: var(--on-dark);
  text-shadow: 0 0 28px rgba(255, 214, 150, .35);
  opacity: 0; filter: blur(12px); transform: translateY(10px) scale(.98);
  transition: opacity 1.8s var(--ease-out), filter 1.8s var(--ease-out), transform 2.2s var(--ease-out);
}
.term.on { opacity: 1; filter: blur(0); transform: none; }
.sep {
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 10px rgba(240, 200, 130, .8); opacity: 0; transition: opacity 1.4s;
}
.sep.on { opacity: .8; }

.emergence .anchor { position: absolute; left: 50%; top: 44%; width: min(58vh, 80vw); height: min(58vh, 80vw); transform: translate(-50%, -50%); }
.whisper {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(56px, 11vh, 120px); margin: 0;
  text-align: center; font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(20px, 1.9vw, 28px); color: var(--on-dark-soft);
  opacity: 0; transform: translateY(6px); filter: blur(4px);
  transition: opacity .9s var(--ease-inout), transform 1.2s var(--ease-out), filter .9s var(--ease-inout);
}
.whisper.on { opacity: 1; transform: none; filter: none; }

/* ================================================================
   5  REVEAL – hier darf die Welt groß werden (Referenz 02)
   ================================================================ */
.reveal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 10, 8, .58) 0%, rgba(12, 10, 8, .26) 34%, rgba(12, 10, 8, 0) 60%);
  opacity: 0; transition: opacity 3s var(--ease-inout) 1.2s;
}
.reveal.is-active::before { opacity: 1; }
.reveal .anchor { position: absolute; left: 60%; top: 38%; width: min(36vh, 34vw); height: min(36vh, 34vw); transform: translate(-50%, -50%); }

.reveal-copy { position: absolute; left: var(--gutter); top: 50%; translate: 0 -42%; width: min(640px, 46vw); }
.reveal-title {
  margin: .3em 0 .32em;
  font-family: var(--serif); font-weight: 300; font-size: clamp(54px, 7.2vw, 128px); line-height: .9;
  text-transform: uppercase; color: #fbf4e8; text-shadow: 0 2px 40px rgba(0, 0, 0, .25);
}
.reveal-title span { display: block; }
.reveal-sub { margin: 0; max-width: 26ch; font-family: var(--serif); font-size: clamp(20px, 1.7vw, 27px); line-height: 1.35; color: var(--on-dark-soft); }
.reveal-meta {
  margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  font-size: 11px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; color: var(--gold);
}
.meta-sep { width: 28px; height: 1px; background: var(--hair-dark); }
.reveal-actions { margin-top: clamp(28px, 4.6vh, 46px); display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.cta {
  border: 0; border-radius: 999px; padding: 18px 36px 19px;
  background: linear-gradient(180deg, #fcf7ee, #eee2cc); color: var(--graphite);
  font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  box-shadow: 0 20px 46px -18px rgba(255, 206, 136, .5), inset 0 1px 0 #fff;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 26px 62px -18px rgba(255, 206, 136, .66), inset 0 1px 0 #fff; }
.ghost {
  border: 0; border-bottom: 1px solid var(--hair-dark); background: none; padding: 8px 1px;
  color: var(--on-dark-soft); font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase;
  transition: color .5s, border-color .5s;
}
.ghost:hover { color: var(--on-dark); border-color: var(--on-dark-mute); }
.reveal-note {
  min-height: 1.5em; margin: 18px 0 0; max-width: 40ch;
  font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--on-dark-soft);
  opacity: 0; transition: opacity 1s var(--ease-inout);
}
.reveal-note.on { opacity: 1; }

.rv { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 1.6s var(--ease-out), transform 2s var(--ease-out), filter 1.6s var(--ease-out); }
.reveal.is-active .rv { opacity: 1; transform: none; filter: none; transition-delay: var(--d, 0s); }
.reveal-title.rv { letter-spacing: .16em; transition: opacity 2s var(--ease-out), transform 2.4s var(--ease-out), filter 2s var(--ease-out), letter-spacing 3.6s var(--ease-out); }
.reveal.is-active .reveal-title.rv { letter-spacing: .02em; }

.phases {
  position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; min-width: 220px;
  margin: 0; padding: 6px 0 6px 26px; list-style: none; border-left: 1px solid var(--hair-dark);
}
.phases li {
  position: relative; display: flex; justify-content: space-between; gap: 40px; padding: 9px 0;
  font-size: 10.5px; font-weight: 400; letter-spacing: .34em; text-transform: uppercase; color: var(--on-dark-soft);
}
.phases li::before {
  content: ""; position: absolute; left: -30px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; border: 1px solid var(--gold); background: #15120f;
}
.phases li:first-child::before { background: var(--gold); box-shadow: 0 0 12px rgba(240, 200, 130, .8); }
.phases li span:last-child { letter-spacing: .12em; color: var(--on-dark-mute); }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1100px) {
  .phases { display: none; }
  .reveal .anchor { left: 64%; }
}
@media (max-width: 760px) {
  .landing { padding-top: calc(var(--top) + 52px + env(safe-area-inset-top)); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .question { font-size: clamp(34px, 9.6vw, 44px); }
  .intent-field { padding-left: 20px; border-radius: 28px; }
  .intent textarea { min-height: 76px; }
  .intent textarea::placeholder { font-size: 17px; }
  .inspire button { font-size: 12px; padding: 6px 13px 7px; }
  .corner--right { display: none; }
  .corner--left { left: 0; right: 0; text-align: center; font-size: 9px; }
  .corner--left br { display: none; }

  .scene-head { top: calc(var(--top) + 64px + env(safe-area-inset-top)); }
  .kicker--lg { font-size: 12px; }
  .echo { font-size: 16px; max-width: 82vw; }
  .understood .anchor { top: 50%; width: 86vw; height: 86vw; }
  .emergence .anchor { top: 48%; width: 90vw; height: 90vw; }
  .terms { gap: 10px 14px; bottom: 9vh; }
  .term { font-size: 17px; letter-spacing: .24em; margin-right: -.24em; }

  .reveal::before { background: linear-gradient(180deg, rgba(10, 8, 7, 0) 32%, rgba(10, 8, 7, .55) 58%, rgba(10, 8, 7, .86) 100%); }
  .reveal .anchor { left: 50%; top: 26%; width: 62vw; height: 62vw; }
  .reveal-copy { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(26px + env(safe-area-inset-bottom)); translate: none; }
  .reveal-title { font-size: clamp(40px, 12vw, 58px); }
  .reveal-sub { font-size: 19px; }
  .reveal-meta { margin-top: 16px; font-size: 10px; }
  .reveal-actions { gap: 18px; }
  .cta { padding: 15px 26px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .rv, .term, .whisper, .echo { transform: none !important; filter: none !important; }
}