:root {
  --bg-deep: #0b0710;
  --warm: #ffb37a;
  --warm-2: #ff7a59;
  --magenta: #c86dd7;
  --cyan: #7ad9ff;
  --cream: #f6e7d3;
  --text: #e3c28c;
  --muted: rgba(244, 236, 223, 0.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  background: var(--bg-deep);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  cursor: default;
}

/* WebGL Canvas — Hintergrundbild wird in der Shader-Pipeline gerendert */
#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* ----------- Bokeh Lichter (CSS) ----------- */
.bokeh-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(0.5px);
}
.bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  animation: float 18s ease-in-out infinite;
}
.b1 { width: 380px; height: 380px; left: -80px;  top: -60px;  background: radial-gradient(circle, var(--warm) 0%, transparent 70%); animation-duration: 22s; }
.b2 { width: 460px; height: 460px; right: -120px; top: 10%;   background: radial-gradient(circle, var(--magenta) 0%, transparent 70%); animation-duration: 26s; animation-delay: -4s; }
.b3 { width: 300px; height: 300px; left: 20%;    bottom: -80px; background: radial-gradient(circle, var(--warm-2) 0%, transparent 70%); animation-duration: 20s; animation-delay: -8s; }
.b4 { width: 240px; height: 240px; right: 18%;   bottom: 10%; background: radial-gradient(circle, var(--cyan) 0%, transparent 70%); animation-duration: 28s; animation-delay: -2s; opacity: 0.4; }
.b5 { width: 200px; height: 200px; left: 45%;    top: 35%;    background: radial-gradient(circle, #ffd6a5 0%, transparent 70%); animation-duration: 24s; animation-delay: -12s; opacity: 0.35;}
.b6 { width: 520px; height: 520px; left: 30%;    top: 50%;    background: radial-gradient(circle, rgba(255,150,90,0.6) 0%, transparent 70%); animation-duration: 30s; animation-delay: -6s; opacity: 0.25; }

@keyframes float {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(40px, -30px) scale(1.08); }
  50%  { transform: translate(-30px, 40px) scale(0.95); }
  75%  { transform: translate(20px, 20px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ----------- Light Sweep ----------- */
.light-sweep {
  position: fixed;
  inset: -20% -20% -20% -20%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 200, 150, 0.08) 45%,
    rgba(255, 220, 180, 0.18) 50%,
    rgba(255, 200, 150, 0.08) 55%,
    transparent 65%);
  mix-blend-mode: screen;
  animation: sweep 14s linear infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-30%) rotate(0deg); }
  100% { transform: translateX(30%) rotate(0deg); }
}

/* ----------- Scanlines (LoFi/CRT) ----------- */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.0) 0px,
    rgba(0,0,0,0.0) 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0.0) 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.45;
}

/* ----------- Vignette ----------- */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.55) 90%, rgba(0,0,0,0.85) 100%);
}

/* ----------- Film Grain ----------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 6;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.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 0.6 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%, -2%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0,0); }
}

/* ----------- Content ----------- */
.content {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(24px, 6vw, 96px);
  max-width: 1400px;
  margin: 0 auto;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(246, 231, 211, 0.25);
  border-radius: 999px;
  background: rgba(20, 10, 20, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 28px;
  animation: fadeUp 1.4s ease 0.2s both;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warm-2);
  box-shadow: 0 0 12px var(--warm-2), 0 0 24px var(--warm);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.4); opacity: 0.6; }
}

.title {
  font-family: "Zen Dots", "Georgia", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(44px, 8.5vw, 132px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  text-shadow:
    0 2px 24px rgba(0,0,0,0.6),
    0 0 60px rgba(255, 160, 100, 0.25);
}
.title .word + .word { margin-left: 0; }
.title .word {
  display: inline-block;
  animation: fadeUp 1.6s cubic-bezier(.2,.7,.2,1) both;
}
.title .word:nth-child(1) { animation-delay: 0.3s; }
.title .word.accent {
  /*background: linear-gradient(120deg, var(--warm) 0%, var(--warm-2) 40%, var(--magenta) 100%); */
  background: linear-gradient(120deg, #fdd228 0%, #92faff 40%, #ff70a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-delay: 0.55s;
  filter: drop-shadow(0 0 18px rgba(255, 140, 90, 0.35));
}

.tagline {
  margin-top: 22px;
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--cream);
  max-width: 520px;
  opacity: 0.88;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
  animation: fadeUp 1.6s ease 0.8s both;
}

.cta {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  animation: fadeUp 1.6s ease 1.05s both;
}

.enter-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid rgba(246, 231, 211, 0.35);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(255, 140, 90, 0.18), rgba(200, 109, 215, 0.18));
  color: var(--cream);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.enter-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(120deg, rgba(255, 140, 90, 0.35), rgba(200, 109, 215, 0.3));
  box-shadow: 0 12px 40px rgba(255, 130, 80, 0.25), 0 0 0 1px rgba(246,231,211,0.4) inset;
}
.enter-btn svg { transition: transform .3s ease; }
.enter-btn:hover svg { transform: translateX(4px); }

.meta {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  gap: 12px;
}
.meta .sep { opacity: 0.4; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@media (max-width: 640px) {
  .content { justify-content: flex-end; padding-bottom: 12vh; }
  .tagline br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bokeh, .light-sweep, .grain, .dot { animation: none !important; }
}