/* TheThingTech Startseite: Wallpaper, Glut, Filmkorn, Kratzer, HUD. Farben aus dem Wallpaper. */
:root{--pink:#ff2d6f;--pink-soft:#ff7aa5;--ink:#050007;--mono:ui-monospace,'IBM Plex Mono',Consolas,monospace}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--ink);overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage{position:relative;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;animation:flicker 7s infinite}
.stage>*{position:absolute;inset:0;pointer-events:none}

.bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block;transform-origin:50% 46%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect;animation:drift 26s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{from{transform:scale(.80) translate3d(0,0,0)}to{transform:scale(.84) translate3d(-.5%,-.4%,0)}}

.embers{width:100%;height:100%;mix-blend-mode:screen}
.heat{background:radial-gradient(60% 50% at 50% 38%,rgba(255,45,111,.20),transparent 70%);mix-blend-mode:screen;animation:pulse 5s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}

.beam{background:linear-gradient(180deg,transparent 0,rgba(255,80,130,.0) 40%,rgba(255,110,150,.16) 50%,rgba(255,80,130,0) 60%,transparent 100%);height:34%;inset:auto 0 auto 0;top:-34%;mix-blend-mode:screen;animation:sweep 9s linear infinite}
@keyframes sweep{to{top:100%}}

.grain{width:100%;height:100%;opacity:.10;mix-blend-mode:overlay}
.scratches{overflow:hidden;mix-blend-mode:screen}
.scratches i{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.55) 20%,rgba(255,255,255,.35) 70%,transparent);opacity:0}
.vignette{background:radial-gradient(120% 100% at 50% 45%,transparent 45%,rgba(0,0,0,.65) 100%),repeating-linear-gradient(0deg,rgba(0,0,0,.0) 0 2px,rgba(0,0,0,.10) 2px 3px)}
@keyframes flicker{0%,93%,100%{filter:brightness(1)}94%{filter:brightness(1.12)}95%{filter:brightness(.92)}96%{filter:brightness(1.06)}97%{filter:brightness(1)}}

.hud{inset:auto;width:44px;height:44px;margin:22px;border:2px solid var(--pink);opacity:.8;filter:drop-shadow(0 0 6px rgba(255,45,111,.7))}
.hud i{position:absolute;width:6px;height:6px;background:var(--pink);animation:blink 2.4s steps(2) infinite}
.tl{top:0;left:0;border-right:0;border-bottom:0}.tl i{left:-4px;top:-4px}
.tr{top:0;right:0;border-left:0;border-bottom:0}.tr i{right:-4px;top:-4px}
.bl{bottom:0;left:0;border-right:0;border-top:0}.bl i{left:-4px;bottom:-4px}
.br{bottom:0;right:0;border-left:0;border-top:0}.br i{right:-4px;bottom:-4px}
@keyframes blink{50%{opacity:.15}}
.readout{inset:auto;font:500 11px var(--mono);letter-spacing:.28em;color:var(--pink-soft);text-shadow:0 0 8px rgba(255,45,111,.8);text-transform:uppercase;top:34px;display:flex;align-items:center;gap:10px}
.readout.l{left:88px}.readout.r{right:88px}
.readout b{color:#fff;font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:blink 1.6s steps(2) infinite}

@media (max-width:700px){.hud{width:30px;height:30px;margin:14px}.readout{top:24px;font-size:10px;letter-spacing:.2em}.readout.l{left:58px}.readout.r{right:58px}.bg img{object-fit:contain;object-position:50% 50%;transform-origin:50% 50%}}
@media (max-width:700px) and (orientation:portrait){.stage{background:#000}}
@media (prefers-reduced-motion:reduce){.stage,.bg img,.heat,.beam,.hud i,.dot{animation:none!important}}