@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400&display=swap');

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

:root {
  --bg: #0f1a2e;
  --accent-1: #1a3a5c;
  --orb-1: #1e4d7a;
  --orb-2: #163d62;
  --orb-3: #112e4a;
  --text: rgba(180, 210, 240, 0.6);
  --text-main: rgba(210, 230, 250, 0.85);
}

html, body { width: 100%; height: 100%; overflow: hidden; }

body {
  background: radial-gradient(ellipse at 50% 40%, var(--accent-1) 0%, var(--bg) 65%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lexend Deca', sans-serif;
  cursor: url('/assets/cursor.png'), auto;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
}

/* Blue orbs */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}
.orb-1 {
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, var(--orb-1) 0%, transparent 70%);
  top: -10vw; left: -10vw;
  animation: breathe-1 9s ease-in-out infinite;
}
.orb-2 {
  width: 45vw; height: 45vw;
  background: radial-gradient(circle, var(--orb-2) 0%, transparent 70%);
  bottom: -8vw; right: -8vw;
  animation: breathe-2 11s ease-in-out infinite;
}
.orb-3 {
  width: 35vw; height: 35vw;
  background: radial-gradient(circle, var(--orb-3) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: breathe-3 7s ease-in-out infinite;
}
@keyframes breathe-1 {
  0%,100% { transform: scale(1) translate(0,0); opacity:.7; }
  50%      { transform: scale(1.18) translate(3%,4%); opacity:1; }
}
@keyframes breathe-2 {
  0%,100% { transform: scale(1) translate(0,0); opacity:.6; }
  50%      { transform: scale(1.22) translate(-4%,-3%); opacity:.9; }
}
@keyframes breathe-3 {
  0%,100% { transform: translate(-50%,-50%) scale(.9); opacity:.4; }
  50%      { transform: translate(-50%,-50%) scale(1.15); opacity:.7; }
}

/* Wave canvas */
#wave-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Floating circles */
.shapes { position: fixed; inset: 0; pointer-events: none; z-index: 3; contain: layout style; }
.shape {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(120,180,240,.12);
  will-change: transform;
}

/* Center UI */
.center {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}

.logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo {
  width: clamp(120px, 20vw, 240px);
  height: auto;
  display: block;
}

.label {
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  animation: fade-breathe 6s ease-in-out infinite;
}
.label h1 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 300;
  color: var(--text-main);
}
.label span {
  font-size: clamp(0.65rem, 1.2vw, 0.85rem);
  letter-spacing: .45em;
  color: var(--text);
  text-transform: uppercase;
  font-weight: 300;
}
.label .subtitle { font-size: clamp(0.45rem, 0.8vw, 0.65rem); }

@keyframes fade-breathe {
  0%,100% { opacity:.55; }
  50%      { opacity:1; }
}

@media (max-width: 768px) {
  .center { transform: scale(1.5); }
}

/* Impressum-Link */
#impressum-link {
  position: fixed;
  bottom: 1.2rem;
  right: 1.4rem;
  z-index: 20;
  font-size: 0.65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.5;
  transition: opacity .2s;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
#impressum-link:hover { opacity: 1; }

/* Modal */
#impressum-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
}
#impressum-modal.open { display: flex; }

#impressum-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 12, 25, 0.75);
  backdrop-filter: blur(6px);
}
#impressum-box {
  position: relative;
  z-index: 1;
  background: rgba(20, 38, 65, 0.92);
  border: 1px solid rgba(120, 180, 240, 0.12);
  border-radius: 12px;
  padding: 2.4rem 2.8rem;
  max-width: 420px;
  width: calc(100% - 3rem);
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.8;
}
#impressum-box h2 {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--text-main);
  margin-bottom: 1.4rem;
}
#impressum-box .placeholder {
  color: rgba(120, 180, 240, 0.3);
  font-style: italic;
}
#impressum-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity .2s;
  font-family: inherit;
}
#impressum-close:hover { opacity: 1; }