:root {
  --accent: #8fd4e3;
  --ink: #e8ebee;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "DejaVu Sans Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #000;
  color: var(--ink);
  font-family: var(--mono);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Full-screen grain-texture canvas, painted behind everything */
#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Perspective context so the container can be pressed in 3D */
.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 6vmin;
  perspective: 900px;
}

/* Gentle idle "breathing" so the page feels alive at rest */
.float { animation: breathe 9s ease-in-out infinite; }

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

/* The container takes a subtle distortion pulse during random bursts.
   --press: 0 at rest -> 1 at a burst peak (drives the warp + gentle squeeze). */
.container {
  --press: 0;

  position: relative;
  width: min(86vw, 380px);
  text-align: center;
  border-radius: 14px;

  transform-origin: top center;
  transform:
    translateY(calc(var(--press) * 4px))
    scaleX(calc(1 + var(--press) * 0.01))
    scaleY(calc(1 - var(--press) * 0.04));

  /* Displacement filter is always attached but its scale is 0 at rest
     (identity), then animated up subtly during a burst. */
  filter: url(#squish);
  will-change: transform, filter;
}

/* Content wrapper: holds the padding so the container box stays edge-to-edge. */
.layer {
  padding: 46px 40px 40px;
}

.base { position: relative; }

.logo {
  display: block;
  width: min(46vw, 150px);
  height: auto;
  margin: 0 auto 26px;
  /* logo art is near-black (#1d1d1b): invert to read on black, plus a soft glow */
  filter: invert(1) drop-shadow(0 0 22px rgba(143, 212, 227, 0.22));
  user-select: none;
}

.tagline {
  margin: 0;
  font-size: clamp(0.7rem, 2.6vw, 0.82rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(232, 235, 238, 0.82);
  text-indent: 0.26em; /* balance the trailing letter-spacing */
}

.links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 8px;
  margin-top: 24px;
}

.link {
  font-size: clamp(0.52rem, 1.9vw, 0.66rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 4px 1px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease, text-shadow 0.25s ease;
}

.link:hover,
.link:focus-visible {
  color: var(--accent);
  border-bottom-color: rgba(143, 212, 227, 0.6);
  text-shadow: 0 0 14px rgba(143, 212, 227, 0.55);
  outline: none;
}

.sep {
  color: rgba(143, 212, 227, 0.5);
  font-size: 0.45rem;
}

.defs { position: absolute; }

/* Accessibility: calm everything down for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .float { animation: none; }
  .container { transition: none; }
}