/* mieroo — coming-soon landing.
   Standalone static page: the custom-property values below are COPIED from
   src/styles/tokens.css (the app's single source of truth) — if tokens change,
   sync this block. Artwork + motion (glyph, glow) are verbatim from the app:
   LogoGlyph.css ("looking" mood) and global.css (.app::before default glow). */

:root {
  --color-bg: #ffffff;
  --color-fg: #0a0a0a;
  --color-fg-muted: #6f6f6f;
  --color-border: #e4e4e4;
  --color-accent: #3f35e5;
  --color-glow-pink: #ff6cab;

  --font-sans: 'Roboto', system-ui, sans-serif;

  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  --text-caption: 14px;
  --text-body: 16px;

  --radius-pill: 999px;

  --duration-glow: 12s;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* The app's DEFAULT scan-page glow (indigo + pink, slow hue drift) — the calm
   two-colour gradient, not the 4-colour "analysis running" aurora. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: min(72vh, 680px);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      72% 82% at 22% 0%,
      color-mix(in srgb, var(--color-accent) 26%, transparent),
      transparent 68%
    ),
    radial-gradient(
      62% 72% at 84% 4%,
      color-mix(in srgb, var(--color-glow-pink) 24%, transparent),
      transparent 68%
    );
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  animation: scan-glow var(--duration-glow) var(--ease-standard) infinite alternate;
}

@keyframes scan-glow {
  from {
    filter: hue-rotate(-8deg);
  }
  to {
    filter: hue-rotate(14deg);
  }
}

/* ── Hero ── */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
  padding: var(--space-48) var(--space-24);
  text-align: center;
}

/* The living glyph — big, eyes glancing around. */
.glyph {
  height: var(--space-64);
  width: auto;
  color: var(--color-fg);
}

/* Power-on once at load: empty frame → CRT line → eyes alive (LogoGlyph). */
.glyph__eyes {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: glyph-eyes-on 700ms var(--ease-out) both;
}

@keyframes glyph-eyes-on {
  0% {
    opacity: 0;
    transform: scaleY(0.18);
  }
  45% {
    opacity: 1;
    transform: scaleY(0.18);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* "Looking" — saccades around the room, with blinks (LogoGlyph loop, verbatim). */
.glyph__pupil {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: glyph-look 7s infinite;
  animation-delay: 700ms; /* after the power-on */
}

@keyframes glyph-look {
  0%, 12%        { transform: translate(0, 0)       scaleY(1); }
  12.01%, 26%    { transform: translate(-10px, 0)   scaleY(1); }
  26.01%, 28%    { transform: translate(-10px, 0)   scaleY(0.25); }
  28.01%, 42%    { transform: translate(10px, 0)    scaleY(1); }
  42.01%, 54%    { transform: translate(7px, -7px)  scaleY(1); }
  54.01%, 64%    { transform: translate(-6px, -7px) scaleY(1); }
  64.01%, 66%    { transform: translate(-6px, -7px) scaleY(0.25); }
  66.01%, 78%    { transform: translate(0, 5px)     scaleY(1); }
  78.01%, 100%   { transform: translate(0, 0)       scaleY(1); }
}

/* The full brand lockup under the glyph — stays --color-fg black. */
.lockup {
  height: var(--space-32);
  width: auto;
  color: var(--color-fg);
}

.tagline {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-fg-muted);
}

.soon {
  font-size: var(--text-caption);
  color: var(--color-fg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-8) var(--space-16);
  background: var(--color-bg);
}

/* ── Footer ── */

.foot {
  display: flex;
  justify-content: center;
  padding: var(--space-24);
}

.foot__signin {
  font-size: var(--text-caption);
  color: var(--color-fg-muted);
  text-decoration: none;
}

.foot__signin:hover {
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .glyph__eyes,
  .glyph__pupil {
    animation: none;
  }
}