/* Morkant – schwarze Lagune, Nebel, ein Licht. Eine Seite, nichts zum Scrollen. */
@font-face { font-family: "Fell"; font-weight: 400; font-display: swap;
  src: url("../fonts/im-fell-english-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fell"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fonts/im-fell-english-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Fell SC"; font-weight: 400; font-display: swap;
  src: url("../fonts/im-fell-english-sc-latin-400-normal.woff2") format("woff2"); }

:root {
  --bg: #060607;
  --bone: #DCD5C8;       /* Maske */
  --bone-2: #A9A296;
  --muted: #7C766C;
  --lamp: #E0A85C;       /* Laterne */
  --lamp-dim: rgba(224, 168, 92, .35);
  --line: rgba(220, 213, 200, .28);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--bone); font-family: "Fell", Georgia, serif;
  overflow: hidden; -webkit-font-smoothing: antialiased; }

/* Unscharfer Hintergrund für breite Bildschirme */
.backdrop { position: fixed; inset: -40px; background: url("../img/ferryman-blur.jpg") center / cover no-repeat;
  filter: brightness(.38) saturate(.8); }

/* Das Bild selbst: Hochformat, mittig, seitlich ins Schwarz auslaufend */
.stage { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; aspect-ratio: 941 / 1672; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.stage picture, .stage img { display: block; width: 100%; height: 100%; }
.stage img { object-fit: cover; animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.04) translateY(-.6%); } }
/* Hochformat-Bildschirme (Handy): Bild füllt alles */
@media (max-aspect-ratio: 941/1672) {
  .stage { left: 0; transform: none; width: 100%; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
}

/* Laterne: warmes, flackerndes Licht an ihrer Position im Bild */
.lantern { position: absolute; left: 71.8%; top: 63.6%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(224,168,92,.42) 0%, rgba(224,168,92,.12) 30%, transparent 62%);
  animation: flicker 3.8s infinite; }
@keyframes flicker {
  0%, 100% { opacity: .75; } 8% { opacity: .9; } 12% { opacity: .62; } 20% { opacity: .85; }
  45% { opacity: .7; } 52% { opacity: .95; } 60% { opacity: .68; } 78% { opacity: .82; }
}
.is-thinking .lantern { animation-duration: .9s; }
.is-open .lantern { opacity: 1; animation: none; transform: translate(-50%, -50%) scale(1.5);
  transition: transform 2.5s ease; background: radial-gradient(circle, rgba(224,168,92,.55) 0%, rgba(224,168,92,.16) 32%, transparent 65%); }

/* Nebel: zwei langsam ziehende Schwaden */
.fog { position: fixed; left: -50%; width: 200%; pointer-events: none; opacity: .5; }
.fog--a { bottom: -10%; height: 55%; animation: fog 70s linear infinite;
  background: radial-gradient(ellipse 30% 40% at 20% 60%, rgba(200,200,205,.16), transparent 70%),
              radial-gradient(ellipse 25% 35% at 60% 50%, rgba(200,200,205,.12), transparent 70%),
              radial-gradient(ellipse 30% 45% at 85% 65%, rgba(200,200,205,.14), transparent 70%); }
.fog--b { bottom: 10%; height: 45%; opacity: .35; animation: fog 110s linear infinite reverse;
  background: radial-gradient(ellipse 35% 40% at 30% 50%, rgba(190,190,200,.14), transparent 70%),
              radial-gradient(ellipse 28% 38% at 75% 55%, rgba(190,190,200,.12), transparent 70%); }
@keyframes fog { from { transform: translateX(0); } to { transform: translateX(25%); } }

/* Inhalt: unten über dem Wasser */
.gatehouse { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; text-align: center;
  padding: 0 20px max(5vh, env(safe-area-inset-bottom) + 24px);
  background: linear-gradient(180deg, transparent 0%, rgba(6,6,7,.75) 35%, rgba(6,6,7,.92) 100%); padding-top: 14vh; }
.kicker { margin: 0; font-family: "Fell SC", Georgia, serif; font-size: clamp(13px, 1.4vh + 6px, 18px);
  letter-spacing: .32em; color: var(--bone-2); }
h1 { margin: 2px 0 clamp(14px, 3vh, 28px); font-family: "Fell SC", Georgia, serif; font-weight: 400;
  font-size: clamp(44px, 7vh + 12px, 96px); letter-spacing: .14em; line-height: 1; color: var(--bone);
  text-shadow: 0 0 30px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }

.gate { max-width: 30rem; margin: 0 auto; }
.gate__prompt { display: block; font-style: italic; font-size: clamp(17px, 1.2vh + 10px, 21px); color: var(--bone-2); margin-bottom: 14px; }
.gate__row { display: flex; gap: 10px; align-items: stretch; }
.gate input { flex: 1; min-width: 0; font: inherit; font-size: 20px; color: var(--bone); text-align: center;
  background: rgba(6,6,7,.55); border: 0; border-bottom: 1px solid var(--line); padding: 10px 8px; outline: none;
  letter-spacing: .06em; transition: border-color .3s; }
.gate input:focus { border-bottom-color: var(--lamp); }
.gate button { font-family: "Fell SC", Georgia, serif; font-size: 16px; letter-spacing: .18em; color: var(--bone);
  background: transparent; border: 1px solid var(--line); padding: 0 18px; cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.gate button:hover, .gate button:focus-visible { border-color: var(--lamp); color: var(--lamp); outline: none; }
.gate button:disabled, .gate input:disabled { opacity: .5; cursor: progress; }
.gate__answer { min-height: 1.5em; margin: 14px 0 0; font-style: italic; color: var(--lamp); font-size: 17px; }
.gate__answer a { color: var(--bone); }
.gate.is-wrong { animation: shake .45s; }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

/* Belohnung */
.is-open .gate { display: none; }
.reward { max-width: 32rem; margin: 0 auto; outline: none; animation: rise 2.2s ease both; }
.reward__title { margin: 0 0 12px; font-family: "Fell SC", Georgia, serif; font-weight: 400; font-size: clamp(22px, 2vh + 12px, 32px);
  letter-spacing: .1em; color: var(--lamp); }
.reward__text p { margin: 0 0 .45em; font-size: clamp(18px, 1.2vh + 11px, 22px); line-height: 1.45; color: var(--bone); }
/* Frage mit Ja/Nein */
.reward__question { margin: 0 0 16px; font-style: italic; font-size: clamp(19px, 1.3vh + 11px, 24px); line-height: 1.4; color: var(--bone); }
.reward__choices { display: flex; justify-content: center; gap: 14px; }
.reward__choices button { font-family: "Fell SC", Georgia, serif; font-size: 17px; letter-spacing: .2em; color: var(--bone);
  background: rgba(6,6,7,.55); border: 1px solid var(--line); padding: 10px 26px; cursor: pointer; transition: border-color .3s, color .3s; }
.reward__choices button:hover, .reward__choices button:focus-visible { border-color: var(--lamp); color: var(--lamp); outline: none; }
.is-answered .reward__ask { display: none; }
.reward__text { outline: none; }
.is-answered .reward__text { animation: rise 2s ease both; }
.is-yes .reward__text p:first-child { font-family: "Fell SC", Georgia, serif; letter-spacing: .08em; color: var(--lamp); }
.is-no .reward__text p { font-style: italic; color: var(--bone-2); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

@media (max-height: 560px) { .gatehouse { padding-top: 6vh; } h1 { font-size: 40px; margin-bottom: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .stage img, .fog, .lantern, .reward { animation: none; }
}