@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--nuit:#050607;--creme:#FAF3D1;--teal:#5FA3A0;--ocre:#D9A94E}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--nuit);color:var(--creme);font-family:'Montserrat',system-ui,sans-serif;overflow:hidden;
  display:grid;place-items:center;min-height:100svh;
  background-image:radial-gradient(110% 80% at 50% 40%,#0a0d0f 0%,#040506 55%,#000 100%)}

/* Körnung: leichtes, langsam springendes Rauschen */
.grain{position:fixed;inset:-50%;pointer-events:none;opacity:.035;z-index:2;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Halo hinter dem Namen */
.halo{position:fixed;left:50%;top:44%;width:min(900px,120vw);height:50vh;transform:translate(-50%,-50%);pointer-events:none;filter:blur(40px);
  background:radial-gradient(45% 35% at 50% 50%,rgba(95,163,160,.13),transparent 70%);animation:breathe 10s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}

/* Der Planet-Ball am Horizont (Bild). Der Lichtbogen liegt bei 38,5 % der Bildhöhe und soll bei 75 % der Fensterhöhe stehen. */
.planet{--w:max(100vw,1000px);position:fixed;left:50%;width:var(--w);top:calc(75vh - var(--w) * .5628 * .385);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%);
  opacity:0;transform:translate(-50%,8vh);animation:rise 5s cubic-bezier(.2,.7,.1,1) .2s forwards}
.planet img{display:block;width:100%;height:auto;filter:brightness(.82) saturate(.9)}
@keyframes rise{to{opacity:1;transform:translate(-50%,0)}}

main{position:relative;z-index:1;text-align:center;padding:0 16px;margin-top:-10vh}
.mark{position:relative;width:min(500px,76vw);margin:0 auto;line-height:0}
.mark img{display:block;width:100%;height:auto}
.mark .g{position:absolute;inset:0;opacity:0}
.mark .w{opacity:0;filter:blur(14px);animation:arrive 2.6s cubic-bezier(.2,.7,.1,1) .9s forwards}
.mark .g-a{animation:ghostA 2.6s ease-out .9s forwards, driftA 11s ease-in-out 3.5s infinite}
.mark .g-b{animation:ghostB 2.6s ease-out .9s forwards, driftB 11s ease-in-out 3.5s infinite}
@keyframes arrive{60%{opacity:.9}to{opacity:1;filter:blur(0)}}
@keyframes ghostA{0%{opacity:0;transform:translate(-14px,0)}40%{opacity:.8}to{opacity:.55;transform:translate(-1.5px,0)}}
@keyframes ghostB{0%{opacity:0;transform:translate(14px,0)}40%{opacity:.8}to{opacity:.55;transform:translate(1.5px,0)}}
/* ab und zu ein kurzes Verrutschen, sonst Ruhe */
@keyframes driftA{0%,88%,100%{opacity:.55;transform:translate(-1.5px,0)}90%{opacity:.6;transform:translate(-5px,1px)}92%{opacity:.45;transform:translate(2px,0)}}
@keyframes driftB{0%,88%,100%{opacity:.55;transform:translate(1.5px,0)}90%{opacity:.6;transform:translate(5px,-1px)}92%{opacity:.45;transform:translate(-2px,0)}}
/* JS setzt .phase für ein seltenes, zufälliges Flackern */
.mark .shift{display:block;position:relative}
.mark.phase .shift{transform:translateX(4px) skewX(-6deg);filter:hue-rotate(40deg) brightness(1.25)}

.msg{margin-top:clamp(18px,4vh,40px);font-weight:600;font-size:clamp(13px,1.6vw,16px);letter-spacing:.5em;text-transform:uppercase;
  color:rgba(250,243,209,.82);padding-left:.5em;opacity:0;animation:fade 1.6s ease 3s forwards}
.msg .sep{margin:0 .9em;color:var(--ocre)}
@keyframes fade{to{opacity:1}}

footer{position:fixed;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));text-align:center;z-index:1;opacity:0;animation:fade 2s ease 5s forwards}
footer a{color:rgba(250,243,209,.45);text-shadow:0 0 8px #000,0 0 2px #000;font-size:12px;letter-spacing:.12em;text-decoration:none;padding:12px}
footer a:hover,footer a:focus-visible{color:rgba(250,243,209,.8)}
a:focus-visible{outline:1px solid var(--ocre);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .mark .w,.msg,footer{opacity:1;filter:none}
  .mark .g{opacity:.3}.mark .g-a{transform:translate(-1.5px,0)}.mark .g-b{transform:translate(1.5px,0)}
  .planet{opacity:1;transform:translate(-50%,0)}
}
footer .dot{color:rgba(250,243,209,.25);font-size:12px}
@media (max-width:420px){footer a{padding:12px 6px;font-size:11px}}