/* Glanzklar – website. Self-hosted fonts, no trackers. */
@font-face { font-family: "Creepster"; src: url(fonts/Creepster-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Nosifer"; src: url(fonts/Nosifer-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Special Elite"; src: url(fonts/SpecialElite-Regular.ttf) format("truetype"); font-display: swap; }

:root {
  --blood: #b21818; --blood-hi: #e02a24; --bone: #e8e0d2; --ash: #9a9087; --soot: #0a0909; --panel: #131010; --line: #2a2321;
  --glass: rgba(20, 17, 16, .72);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--soot); color: var(--bone); font-family: "Special Elite", "Courier New", monospace; line-height: 1.6; overflow-x: hidden; }
body.locked { overflow: hidden; }
a { color: var(--bone); }
img { max-width: 100%; display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.blood { color: var(--blood); }
.drip { font-family: "Nosifer", "Creepster", cursive; }
.creep { font-family: "Creepster", cursive; letter-spacing: 2px; }
::selection { background: var(--blood); color: var(--bone); }

/* film grain and vignette over everything */
.grain { position: fixed; inset: -50%; pointer-events: none; z-index: 90; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,3%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)} }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 89; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.75) 100%); }
#flash { position: fixed; inset: 0; background: #dfe6ff; opacity: 0; pointer-events: none; z-index: 88; mix-blend-mode: screen; }
#rain { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

/* the gate: content warning before anything else */
#gate { position: fixed; inset: 0; z-index: 200; background: radial-gradient(ellipse at center, #1a0f0e 0%, #050404 70%); display: flex; align-items: center; justify-content: center; padding: 16px; }
#gate .box { max-width: 640px; text-align: center; }
#gate h2 { font-family: "Nosifer", cursive; color: var(--blood); font-size: clamp(26px, 5vw, 44px); margin: 0 0 18px; }
#gate p { color: var(--ash); }
#gate .gatehelp { color: var(--bone); border: 1px solid var(--line); padding: 12px; margin: 22px 0; }
#gate .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
#gate.gone { opacity: 0; pointer-events: none; transition: opacity 1.4s; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--blood); color: var(--bone); border: 0; text-decoration: none; padding: 16px 30px; font: inherit; font-size: 19px; letter-spacing: 1px; cursor: pointer; position: relative; overflow: hidden; transition: background .2s, transform .2s; }
.btn:hover { background: var(--blood-hi); transform: translateY(-2px); }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-100%); transition: transform .6s; }
.btn:hover::after { transform: translateX(100%); }
.btn.ghost { background: transparent; border: 1px solid #4a3e3a; font-size: 16px; padding: 13px 20px; }
.btn.ghost:hover { border-color: var(--blood); background: rgba(178,24,24,.12); }

/* navigation */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; transition: background .3s; }
nav.solid { background: rgba(8,7,7,.9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
nav .logo { font-family: "Creepster", cursive; color: var(--blood); font-size: 28px; text-decoration: none; letter-spacing: 3px; }
nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
nav ul a { text-decoration: none; color: var(--ash); font-size: 15px; }
nav ul a:hover { color: var(--bone); }
nav .sound { background: none; border: 1px solid var(--line); color: var(--ash); font: inherit; padding: 6px 12px; cursor: pointer; }
@media (max-width: 860px) { nav ul { display: none; } }

/* hero */
#hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: flex-end; }
#hero .slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.2s; transform: scale(1.12); }
#hero .slides img.on { opacity: 1; animation: kenburns 14s linear forwards; }
@keyframes kenburns { from { transform: scale(1.12) translate(0, 0); } to { transform: scale(1.0) translate(-1.5%, 1%); } }
#hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,9,.35) 0%, rgba(10,9,9,.15) 40%, rgba(10,9,9,.95) 92%); }
#hero .content { position: relative; z-index: 6; padding-bottom: 12vh; width: 100%; }
#hero h1 { font-family: "Nosifer", cursive; color: var(--blood); font-size: clamp(52px, 11vw, 150px); margin: 0; line-height: 1; text-shadow: 0 0 40px rgba(178,24,24,.45); position: relative; }
#hero h1.glitch::before, #hero h1.glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; }
#hero h1.glitch::before { color: #2af; left: 2px; opacity: 0; animation: glitch 7s infinite steps(1); }
#hero h1.glitch::after { color: #f22; left: -2px; opacity: 0; animation: glitch 7s 0.08s infinite steps(1); }
@keyframes glitch { 0%, 91%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); } 92% { opacity: .55; clip-path: inset(12% 0 70% 0); } 94% { opacity: .55; clip-path: inset(60% 0 18% 0); } 96% { opacity: .4; clip-path: inset(35% 0 45% 0); } }
#hero .tag { font-size: clamp(18px, 2.4vw, 26px); min-height: 2.6em; margin: 14px 0 26px; max-width: 820px; }
#hero .tag .cursor { display: inline-block; width: 10px; background: var(--bone); animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
#hero .meta { color: var(--ash); font-size: 14px; margin-top: 14px; }
.flicker { animation: flicker 6s infinite; }
@keyframes flicker { 0%,19%,21%,23%,55%,57%,100% { opacity: 1; } 20%,22%,56% { opacity: .35; } }
.scrollhint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 6; color: var(--ash); font-size: 13px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

/* missed calls on the phone */
#phone { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 290px; pointer-events: none; }
.call { background: rgba(18,16,16,.94); border: 1px solid #3a302d; border-left: 3px solid var(--blood); padding: 10px 14px; margin-top: 8px; font-size: 14px; display: flex; gap: 12px; align-items: center; opacity: 0; transform: translateX(40px); transition: all .5s; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.call.in { opacity: 1; transform: none; }
.call svg { flex: 0 0 22px; }
.call b { color: var(--bone); } .call small { color: var(--ash); display: block; }
@media (max-width: 640px) { #phone { width: 230px; right: 10px; bottom: 10px; } }

/* sections */
section { position: relative; padding: 110px 0; }
section h2 { font-family: "Creepster", cursive; color: var(--blood); font-size: clamp(40px, 6vw, 72px); margin: 0 0 22px; letter-spacing: 3px; line-height: 1; }
section .lead { font-size: 20px; max-width: 760px; color: var(--bone); }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.1s, transform 1.1s; }
.reveal.seen { opacity: 1; transform: none; }

/* flashlight: the text is only visible where your light falls */
#torch { height: 100vh; min-height: 560px; background: #000; overflow: hidden; cursor: none; display: flex; align-items: center; justify-content: center; text-align: center; }
#torch .hidden { position: absolute; inset: 0; background: url(img/flur.jpg?v=3) center/cover; filter: brightness(.9) saturate(.8); }
#torch .words { position: relative; z-index: 2; font-family: "Nosifer", cursive; color: #8a0f0f; font-size: clamp(28px, 6vw, 72px); line-height: 1.25; padding: 0 16px; text-shadow: 0 0 18px #000; }
#torch .dark { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle 170px at var(--x, 50%) var(--y, 50%), rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.985) 100%); }
#torch .hint { position: absolute; bottom: 26px; z-index: 4; color: var(--ash); font-size: 14px; width: 100%; }

/* timeline */
.timeline { position: relative; margin-top: 50px; }
.timeline::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--blood), transparent); }
.moment { position: relative; padding: 0 0 46px 64px; }
.moment::before { content: ""; position: absolute; left: 14px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--soot); border: 2px solid var(--blood); box-shadow: 0 0 14px var(--blood); }
.moment time { color: var(--blood); font-size: 15px; letter-spacing: 2px; }
.moment h3 { margin: 4px 0 8px; font-size: 26px; font-weight: normal; }
.moment p { margin: 0; color: var(--ash); max-width: 720px; }

/* chapters and cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 40px; }
.card { position: relative; background: var(--panel); border: 1px solid var(--line); overflow: hidden; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .35s, border-color .35s; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) brightness(.55); transition: filter .5s, transform .8s; }
.card:hover img { filter: grayscale(0) brightness(.75); transform: scale(1.06); }
.card:hover { border-color: var(--blood); transform: translateY(-6px); }
.card .txt { position: relative; padding: 22px; background: linear-gradient(transparent, rgba(5,4,4,.96) 40%); }
.card .num { color: var(--blood); font-size: 13px; letter-spacing: 3px; }
.card h3 { margin: 4px 0 6px; font-size: 24px; font-weight: normal; }
.card p { margin: 0; color: var(--ash); font-size: 15px; }

/* characters */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 40px; }
.person { background: var(--panel); border: 1px solid var(--line); padding: 24px; position: relative; }
.person .who { font-family: "Creepster", cursive; color: var(--blood); font-size: 32px; letter-spacing: 2px; }
.person .age { color: var(--ash); font-size: 14px; margin-bottom: 10px; }
.person p { margin: 0 0 14px; font-size: 15px; }
.play { background: none; border: 1px solid #4a3e3a; color: var(--bone); font: inherit; font-size: 14px; padding: 8px 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.play:hover, .play.on { border-color: var(--blood); color: #fff; background: rgba(178,24,24,.15); }
.wave { display: inline-flex; gap: 2px; height: 14px; align-items: flex-end; }
.wave i { width: 3px; background: var(--blood); height: 30%; }
.play.on .wave i { animation: wave .8s ease-in-out infinite; }
.play.on .wave i:nth-child(2) { animation-delay: .1s } .play.on .wave i:nth-child(3) { animation-delay: .2s } .play.on .wave i:nth-child(4) { animation-delay: .3s }
@keyframes wave { 50% { height: 100%; } }

/* features */
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
.feat { background: var(--soot); padding: 28px 24px; transition: background .3s; }
.feat:hover { background: #160f0e; }
.feat svg { width: 34px; height: 34px; stroke: var(--blood); fill: none; stroke-width: 1.6; margin-bottom: 12px; }
.feat h3 { margin: 0 0 6px; font-weight: normal; font-size: 20px; }
.feat p { margin: 0; color: var(--ash); font-size: 15px; }

/* the five endings: cracked glass you cannot see through */
.endings { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 40px; }
@media (max-width: 900px) { .endings { grid-template-columns: repeat(2, 1fr); } }
.ending { aspect-ratio: 3 / 4.4; position: relative; perspective: 900px; cursor: pointer; }
.ending .face { position: absolute; inset: 0; backface-visibility: hidden; transition: transform .9s; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; }
.ending .front { background: linear-gradient(135deg, #1a1514, #0c0a0a); }
.ending .front span { font-family: "Nosifer", cursive; font-size: 56px; color: #2a1c1a; }
.ending .front::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'><path d='M50 70 L20 10 M50 70 L90 20 M50 70 L95 95 M50 70 L10 120 M50 70 L60 140 M50 70 L5 60 M35 40 L20 45 M70 45 L85 55 M30 95 L45 110' stroke='rgba(255,255,255,0.08)' stroke-width='0.6' fill='none'/></svg>") center/cover; }
.ending .back { background: #150b0a; border-color: var(--blood); transform: rotateY(180deg); flex-direction: column; }
.ending .back b { font-family: "Creepster", cursive; font-size: 26px; color: var(--blood); letter-spacing: 1px; }
.ending .back small { color: var(--ash); margin-top: 8px; font-size: 13px; }
.ending.open .front { transform: rotateY(-180deg); }
.ending.open .back { transform: rotateY(0); }

/* the window: wipe it clean, like in the game */
#window { padding-bottom: 140px; }
.pane { position: relative; max-width: 900px; margin: 40px auto 0; aspect-ratio: 16 / 9; border: 14px solid #d9d2c4; outline: 2px solid #8e8679; box-shadow: 0 30px 80px rgba(0,0,0,.8), inset 0 0 0 2px #fff; cursor: grab; touch-action: none; }
.pane img { width: 100%; height: 100%; object-fit: cover; }
.pane canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pane .cross { position: absolute; left: 50%; top: 0; bottom: 0; width: 12px; margin-left: -6px; background: #d9d2c4; pointer-events: none; }
.meter { max-width: 900px; margin: 14px auto 0; display: flex; justify-content: space-between; color: var(--ash); font-size: 14px; }
#face { position: fixed; inset: 0; z-index: 150; display: none; background: #000 url(img/fratze.jpg?v=3) center/cover; }
#face.on { display: block; animation: shake .5s; }
@keyframes shake { 20% { transform: translate(-12px, 8px) scale(1.05); } 40% { transform: translate(10px, -6px) scale(1.1); } 60% { transform: translate(-6px, 4px) scale(1.06); } }

/* gallery with lightbox */
.gallery { columns: 3 320px; column-gap: 12px; margin-top: 40px; }
.gallery img { width: 100%; margin-bottom: 12px; border: 1px solid var(--line); cursor: zoom-in; filter: saturate(.85); transition: filter .3s, transform .3s; break-inside: avoid; }
.gallery img:hover { filter: saturate(1.1); transform: scale(1.015); }
#lightbox { position: fixed; inset: 0; z-index: 140; background: rgba(0,0,0,.94); display: none; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; }
#lightbox.on { display: flex; }
#lightbox img { max-height: 92vh; border: 1px solid var(--line); }

/* download */
#download { background: linear-gradient(180deg, transparent, #120a09 30%, #120a09 70%, transparent); }
.dl { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; margin-top: 40px; }
@media (max-width: 860px) { .dl { grid-template-columns: 1fr; } }
.panel { background: var(--glass); border: 1px solid var(--line); border-left: 3px solid var(--blood); padding: 26px; }
.panel h3 { margin: 0 0 10px; font-weight: normal; font-size: 22px; }
code.cmd { display: block; background: #000; color: #e9cdbb; padding: 14px; border: 1px solid var(--line); overflow-x: auto; white-space: nowrap; font-size: 14px; margin: 12px 0; }
table.req { width: 100%; border-collapse: collapse; font-size: 15px; }
table.req th, table.req td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.req th { color: var(--ash); font-weight: normal; width: 34%; }
.ver { color: var(--ash); font-size: 14px; margin-top: 10px; }

/* notes, faq */
.note { border-left: 2px solid var(--blood); padding: 2px 0 2px 18px; margin-bottom: 22px; }
.note b { color: var(--blood); }
details { border-bottom: 1px solid var(--line); padding: 16px 0; }
summary { cursor: pointer; font-size: 19px; list-style: none; }
summary::before { content: "+ "; color: var(--blood); }
details[open] summary::before { content: "– "; }
details p { color: var(--ash); margin: 10px 0 0; }

/* help */
.help { background: #0f0b0b; border: 1px solid #3a2a28; padding: 30px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.help .num { font-size: 30px; color: var(--bone); letter-spacing: 1px; }
.help p { margin: 0; color: var(--ash); }

footer { border-top: 1px solid var(--line); padding: 40px 0 70px; color: #6d655e; font-size: 13px; }
footer .cols { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
footer a { color: #8a8178; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  #rain, .grain { display: none; }
}