/* Amplitude — holding page styles. Consumes the canonical Brand tokens
   (assets/tokens.css → var(--amp-*)). The hero is the live WebGL glass brain
   (assets/glass-brain.js); this file is type, layout, and the no-WebGL fallback. */

:root { --ease: var(--amp-ease-standard, cubic-bezier(0.2, 0, 0, 1)); }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  min-height: 100svh;
  font-family: var(--amp-font-body);
  color: var(--amp-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* shown behind the canvas while it warms up, and in the no-WebGL fallback */
  background: var(--amp-bg-gradient);
  position: relative;
  overflow: hidden;
}

/* live hero */
#glass {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
#glass.is-ready { opacity: 1; }

/* ---- no-WebGL fallback: static render + CSS grid ---- */
.fallback {
  display: none;
  position: fixed; top: 39%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(64vw, 560px); height: auto;
  z-index: 0; pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(70, 95, 165, 0.18));
}
.no-webgl #glass { display: none; }
.no-webgl .fallback { display: block; }
.no-webgl::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--amp-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--amp-hairline) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(100% 80% at 50% 40%, #000 35%, transparent 85%);
          mask-image: radial-gradient(100% 80% at 50% 40%, #000 35%, transparent 85%);
}

/* ---- content (sits below the brain) ---- */
.content {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  text-align: center;
  padding: 0 var(--amp-space-5) clamp(120px, 22vh, 240px);
  pointer-events: none;                  /* let the pointer reach the canvas */
  animation: rise 1.1s var(--ease) both;
}

/* wordmark — brand lockup: lowercase, rounded, regular, lightly tracked (.amp-wordmark). */
.wordmark {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  line-height: 1;
}
.wordmark__suffix { margin-left: 0.28em; color: var(--amp-ink-secondary); }

.tagline {
  margin: var(--amp-space-3) 0 0;
  font-size: clamp(1.02rem, 2.4vw, 1.35rem);
  font-weight: var(--amp-weight-regular);
  color: var(--amp-ink-secondary);
  letter-spacing: 0.01em;
}

.status {
  margin: var(--amp-space-5) 0 0;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--amp-text-caption);
  color: var(--amp-ink-tertiary);
  letter-spacing: 0.02em;
}
.status__pulse {
  width: 8px; height: 8px; border-radius: var(--amp-radius-pill);
  background: var(--amp-accent);
  animation: blip 2.6s ease-out infinite;
}

.foot {
  position: fixed; bottom: 22px; left: 0; right: 0;
  z-index: 1;
  display: flex; justify-content: center; gap: 10px;
  font-size: var(--amp-text-caption);
  color: var(--amp-ink-tertiary);
  letter-spacing: 0.02em;
}
.foot__sep { opacity: 0.6; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes blip {
  0%   { box-shadow: 0 0 0 0 rgba(111, 134, 201, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(111, 134, 201, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 134, 201, 0); }
}

@media (prefers-reduced-motion: reduce) { .content, .status__pulse { animation: none !important; } }
@media (max-width: 560px) { .fallback { width: 78vw; top: 36%; } }