:root {
  --glow-r: 209;
  --glow-g: 172;
  --glow-b: 183;
  --glow-blur-dim: 22px;
  --glow-blur-bright: 46px;
  --glow-alpha-dim: 0.25;
  --glow-alpha-bright: 0.6;
  --glow-speed: 3.5s;
  --glow-delay: 1.2s;
  --glow-fade: 1.5s;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #000;
  color: #d1acb7;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mascot {
  position: fixed;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.mascot.show {
  opacity: 0.25;
  filter:
    drop-shadow(0 0 18px rgba(209, 172, 183, 0.12))
    drop-shadow(0 0 5px rgba(209, 172, 183, 0.08));
  animation:
    bob 5s ease-in-out infinite,
    mascotPulse var(--glow-speed) ease-in-out calc(var(--glow-delay) + var(--glow-fade)) infinite;
}

.stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  padding-top: 12vh;
  padding-bottom: 9rem;
  text-align: center;
}

.soon {
  margin: 0;
  font-size: clamp(4.5rem, 18vw, 12rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #d1acb7;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.85);
  animation:
    rise 1s ease both,
    glowIn var(--glow-fade) ease-out var(--glow-delay) both,
    glowPulse var(--glow-speed) ease-in-out calc(var(--glow-delay) + var(--glow-fade)) infinite;
}

.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1rem 1.5rem 1.4rem;
  text-align: center;
}

.foot-brand {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #b0b0b0;
}

.foot-copy {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: #808080;
}

.foot-alias {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #a9a9a9;
}

.foot-social {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.35rem;
}

.foot-social a {
  display: inline-flex;
  color: #808080;
  transition: color 0.2s ease;
}
.foot-social a:hover { color: #d1acb7; }
.foot-social svg {
  width: 19px;
  height: 19px;
  display: block;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes glowIn {
  from {
    text-shadow:
      0 0 4px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0),
      0 2px 18px rgba(0, 0, 0, 0.85);
  }
  to {
    text-shadow:
      0 0 var(--glow-blur-dim) rgba(var(--glow-r), var(--glow-g), var(--glow-b), var(--glow-alpha-dim)),
      0 2px 18px rgba(0, 0, 0, 0.85);
  }
}

@keyframes mascotPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 18px rgba(209, 172, 183, 0.12))
      drop-shadow(0 0 5px rgba(209, 172, 183, 0.08));
  }
  50% {
    filter:
      drop-shadow(0 0 34px rgba(209, 172, 183, 0.4))
      drop-shadow(0 0 8px rgba(209, 172, 183, 0.22));
  }
}

@keyframes glowPulse {
  0%, 100% {
    text-shadow:
      0 0 var(--glow-blur-dim) rgba(var(--glow-r), var(--glow-g), var(--glow-b), var(--glow-alpha-dim)),
      0 2px 18px rgba(0, 0, 0, 0.85);
  }
  50% {
    text-shadow:
      0 0 var(--glow-blur-bright) rgba(var(--glow-r), var(--glow-g), var(--glow-b), var(--glow-alpha-bright)),
      0 2px 18px rgba(0, 0, 0, 0.85);
  }
}

::selection { background: rgba(209, 172, 183, 0.35); }

:focus-visible {
  outline: 2px solid #d1acb7;
  outline-offset: 3px;
  border-radius: 4px;
}