/* ==========================================================================
   dev_page — Coming Soon
   1. Tokens
   2. Base
   3. Layout (.cs)
   4. Background layers
   5. Content
   6. CTA button (.cta)
   7. Animations
   8. Responsive / a11y
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --bg: #0A0A0B;
  --ink: #FFFFFF;
  --ink-muted: rgba(255, 255, 255, .6);
  --ink-faint: rgba(255, 255, 255, .4);
  --blue-600: #2563EB;
  --blue-500: #3B82F6;
  --blue-400: #60A5FA;
  --blue-300: #93C5FD;
  --blue-100: #DBEAFE;
  --font: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --grid: 64px;
  --notch: 8px;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink); }

/* 3. Layout ---------------------------------------------------------------- */
.cs {
  --mx: 50%;
  --my: 40%;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 18px;
  overflow: hidden;
  text-align: center;
  cursor: crosshair;
}
.cs__spacer { margin-top: auto; }

.cs__topbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  animation: fadeUp .8s ease 2.4s forwards;
}

.cs__logo {
  position: relative;
  width: min(380px, 72vw, 32vh);
  height: min(310px, 58vw, 26vh);
  flex-shrink: 0;
}

/* 4. Background layers ----------------------------------------------------- */
.cs__canvas,
.cs__grid,
.cs__grid-glow,
.cs__scanlines,
.cs__scan,
.cs__flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cs__canvas { width: 100%; height: 100%; display: block; }

.cs__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 20%, transparent 100%);
}
.cs__grid-glow {
  background-image:
    linear-gradient(rgba(59, 130, 246, .6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, .6) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  -webkit-mask-image: radial-gradient(220px circle at var(--mx) var(--my), #000, transparent 70%);
          mask-image: radial-gradient(220px circle at var(--mx) var(--my), #000, transparent 70%);
}
.cs__scanlines {
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
}
.cs__scan { overflow: hidden; }
.cs__scan span {
  position: absolute;
  left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(59, 130, 246, .06), transparent);
  animation: scan 5s linear infinite;
}
.cs__flash {
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 40%), rgba(147, 197, 253, .55), transparent 55%);
  opacity: 0;
}
.cs__flash.is-active { animation: flash .7s ease-out; }

/* 5. Content --------------------------------------------------------------- */
.cs__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.cs__build {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(37, 99, 235, .45);
  background: rgba(10, 10, 11, .7);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--blue-300);
  opacity: 0;
  animation: fadeUp .7s var(--ease-out) 2s forwards;
}
.cs__build-label { color: rgba(255, 255, 255, .45); }
.cs__build-bar { letter-spacing: -.5px; }
.cs__build-pct { color: var(--ink); }
.cs__caret {
  display: inline-block;
  width: 7px; height: 13px;
  background: var(--blue-300);
  animation: blink 1s steps(1) infinite;
}

.cs__title {
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  max-width: 640px;
  min-height: 1.2em;
  white-space: pre-wrap;
}
.cs__title .is-accent { color: var(--blue-500); }
.cs__title .is-glyph { color: var(--blue-400); }

.cs__lead {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 440px;
  text-wrap: balance;
  opacity: 0;
  animation: fadeUp .8s var(--ease-out) 3.4s forwards;
}

/* 6. CTA button ------------------------------------------------------------ */
.cs__cta-wrap {
  position: relative;
  margin-top: 20px;
  filter: drop-shadow(0 10px 30px rgba(37, 99, 235, .55));
  opacity: 0;
  animation: fadeUp .8s var(--ease-out) 3.6s forwards;
}

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  padding: 16px 26px 16px 20px;
  background: var(--blue-600);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  /* stepped “pixel” corners — like the logo */
  clip-path: polygon(
    var(--notch) 0, calc(100% - var(--notch)) 0,
    calc(100% - var(--notch)) var(--notch), 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%, var(--notch) 100%,
    var(--notch) calc(100% - var(--notch)), 0 calc(100% - var(--notch)),
    0 var(--notch), var(--notch) var(--notch)
  );
  transition: transform .25s var(--ease-out), background .3s ease;
}
.cta:hover, .cta:focus-visible { background: var(--blue-500); }
.cta:focus-visible { outline: none; }

.cta__grid,
.cta__shine { position: absolute; inset: 0; pointer-events: none; }
.cta__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0;
  transition: opacity .35s ease;
}
.cta__shine {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shine 3s linear infinite;
}

.cta__logo { position: relative; flex-shrink: 0; overflow: visible; fill: var(--ink); }
.cta__half { transition: transform .45s var(--ease-io); }
.cta__half--l { animation: splitL 2.4s cubic-bezier(.7, 0, .3, 1) infinite; }
.cta__half--r { animation: splitR 2.4s cubic-bezier(.7, 0, .3, 1) infinite; }
.cta__pixel {
  fill: var(--blue-300);
  opacity: 0;
  transform-origin: 16.4px 12.8px;
  transform: scale(.2);
  transition: opacity .3s ease, transform .45s var(--ease-out);
}

.cta__label {
  position: relative;
  display: inline-block;
  height: 1.3em;
  line-height: 1.3em;
  overflow: hidden;
}
.cta__roll {
  display: flex;
  flex-direction: column;
  transition: transform .5s var(--ease-io);
}
.cta__roll > span { white-space: nowrap; }
.cta__email { color: var(--blue-100); }

.cta__arrow {
  --n: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: rgba(255, 255, 255, .18);
  font-size: 13px;
  clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)), 0 var(--n), var(--n) var(--n));
  transition: transform .45s var(--ease-out);
}

/* hover / focus state */
.cta:is(:hover, :focus-visible) .cta__grid { opacity: 1; }
.cta:is(:hover, :focus-visible) .cta__half--l { transform: translateX(-4px); }
.cta:is(:hover, :focus-visible) .cta__half--r { transform: translateX(4px); }
.cta:is(:hover, :focus-visible) .cta__pixel { opacity: 1; transform: scale(1); }
.cta:is(:hover, :focus-visible) .cta__roll { transform: translateY(-50%); }
.cta:is(:hover, :focus-visible) .cta__arrow { transform: rotate(45deg); }

/* 7. Animations ------------------------------------------------------------ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes shine  { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes blink  { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes flash  { 0% { opacity: 0; } 8% { opacity: .9; } 100% { opacity: 0; } }
@keyframes scan   { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
@keyframes splitL { 0%, 62%, 100% { translate: 0 0; } 74%, 86% { translate: -2px 0; } }
@keyframes splitR { 0%, 62%, 100% { translate: 0 0; } 74%, 86% { translate: 2px 0; } }

/* 8. Responsive / a11y ----------------------------------------------------- */
@media (max-width: 640px) {
  .cs__hint { display: none; }
  .cta { padding: 14px 20px 14px 16px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}