/* ADA landing — diagonal mode chooser.
 *
 * The two halves of ADA are opposite themes, so instead of two cards on a
 * neutral page the whole viewport is split along a diagonal: dark neon on the
 * left is the Virtual Lab, white and purple on the right is DISCOVER. Hovering
 * a side pushes the seam over to give it more room, so the page answers back
 * before you commit to a click.
 *
 * clip-path polygons are used rather than transforms so the diagonal edge is
 * genuinely shared — no gap, no overlap — and it animates because every state
 * keeps the same four points. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; }

:root {
  --bg: #06050c;
  --surface: #0c0a14;
  --border-bright: #3d3558;

  --teal: #34e8d0;
  --teal-dim: #22b8a8;

  --purple: #a78bfa;
  --purple-ink: #6d28d9;
  --purple-deep: #4c1d95;

  --text: #dde2ea;
  --text-2: #8895a5;
  --text-3: #6b7688;

  --ink: #16121f;
  --ink-2: #56506b;
  --ink-3: #6f6885;

  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.sp-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------------ sides */

.sp-side {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  overflow: hidden;
  transition: clip-path .5s cubic-bezier(.22, 1, .36, 1);
  will-change: clip-path;
}

/* Resting split — the seam runs from 60% at the top to 40% at the bottom. */
.sp-side--lab      { clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%); }
.sp-side--discover { clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%); }

/* :has lets one side react to the other being hovered. Where it is
   unsupported the page still works — the split simply stays put. */
.sp-stage:has(.sp-side--lab:hover) .sp-side--lab,
.sp-stage:has(.sp-side--lab:focus-visible) .sp-side--lab {
  clip-path: polygon(0 0, 74% 0, 54% 100%, 0 100%);
}
.sp-stage:has(.sp-side--lab:hover) .sp-side--discover,
.sp-stage:has(.sp-side--lab:focus-visible) .sp-side--discover {
  clip-path: polygon(74% 0, 100% 0, 100% 100%, 54% 100%);
}

.sp-stage:has(.sp-side--discover:hover) .sp-side--lab,
.sp-stage:has(.sp-side--discover:focus-visible) .sp-side--lab {
  clip-path: polygon(0 0, 46% 0, 26% 100%, 0 100%);
}
.sp-stage:has(.sp-side--discover:hover) .sp-side--discover,
.sp-stage:has(.sp-side--discover:focus-visible) .sp-side--discover {
  clip-path: polygon(46% 0, 100% 0, 100% 100%, 26% 100%);
}

.sp-side--lab {
  background:
    radial-gradient(ellipse 90% 70% at 20% 30%, rgba(52, 232, 208, .12) 0%, transparent 62%),
    radial-gradient(ellipse 120% 90% at 0% 100%, rgba(109, 40, 217, .16) 0%, transparent 60%),
    linear-gradient(140deg, #0d1b30 0%, #06050c 62%);
}

.sp-side--discover {
  background:
    radial-gradient(ellipse 90% 70% at 80% 30%, rgba(167, 139, 250, .28) 0%, transparent 62%),
    radial-gradient(ellipse 100% 80% at 100% 100%, rgba(52, 232, 208, .12) 0%, transparent 60%),
    linear-gradient(200deg, #ffffff 0%, #f6f2ff 55%, #ffffff 100%);
}

/* --------------------------------------------------------------- ambience */

.sp-field { position: absolute; inset: 0; pointer-events: none; }

/* Lab: a live-looking trace and faint CRT scanlines. */
.sp-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(52, 232, 208, .028) 3px, rgba(52, 232, 208, .028) 4px
  );
}

.sp-wave {
  position: absolute;
  left: -50%;
  top: 50%;
  width: 200%;
  height: 42vh;
  transform: translateY(-50%);
  opacity: .5;
}
.sp-wave-path { fill: none; stroke-linecap: round; }
.sp-wave-path--a {
  stroke: var(--teal);
  stroke-width: 1.4;
  opacity: .55;
  animation: sp-drift 9s linear infinite;
}
.sp-wave-path--b {
  stroke: var(--purple);
  stroke-width: 1;
  opacity: .3;
  animation: sp-drift 14s linear infinite reverse;
}
@keyframes sp-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* Discover: a slow constellation, standing in for an index of connections. */
.sp-mesh {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 78%;
  height: 88vh;
  opacity: .5;
}
.sp-mesh-lines path {
  fill: none;
  stroke: var(--purple-ink);
  stroke-width: 1;
  opacity: .28;
}
.sp-node { fill: var(--purple-ink); opacity: .5; }
.sp-node--1 { animation: sp-float 7s ease-in-out infinite; }
.sp-node--2 { animation: sp-float 9s ease-in-out infinite .6s; }
.sp-node--3 { animation: sp-float 8s ease-in-out infinite 1.2s; }
.sp-node--4 { animation: sp-float 11s ease-in-out infinite .3s; }
.sp-node--5 { animation: sp-float 6.5s ease-in-out infinite 1.8s; }
.sp-node--6 { animation: sp-float 10s ease-in-out infinite .9s; }
@keyframes sp-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, -10px); }
}

/* ------------------------------------------------------------------- seam */
/* Three stacked slivers on the same diagonal: a soft bloom, a hard line, and
   a highlight that travels down it. */

.sp-seam-glow, .sp-seam, .sp-seam-pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: clip-path .5s cubic-bezier(.22, 1, .36, 1);
}

/* Kept narrow on purpose: any wider and the bloom reads as a third panel
   rather than a lit edge between two. */
.sp-seam-glow {
  clip-path: polygon(58.9% 0, 61.1% 0, 41.1% 100%, 38.9% 100%);
  background: linear-gradient(180deg, rgba(52, 232, 208, .5), rgba(167, 139, 250, .5));
  filter: blur(13px);
  opacity: .55;
}
.sp-seam {
  clip-path: polygon(59.88% 0, 60.12% 0, 40.12% 100%, 39.88% 100%);
  background: linear-gradient(180deg, var(--teal) 0%, #9b8cf2 55%, var(--purple-ink) 100%);
  opacity: .9;
}
.sp-seam-pulse {
  clip-path: polygon(59.7% 0, 60.3% 0, 40.3% 100%, 39.7% 100%);
  background: linear-gradient(180deg, transparent 0%, #ffffff 50%, transparent 100%);
  background-size: 100% 45%;
  background-repeat: no-repeat;
  opacity: .5;
  animation: sp-travel 4.5s ease-in-out infinite;
}
@keyframes sp-travel {
  0%   { background-position: 0 -50%; opacity: 0; }
  25%  { opacity: .55; }
  75%  { opacity: .55; }
  100% { background-position: 0 150%; opacity: 0; }
}

.sp-stage:has(.sp-side--lab:hover) .sp-seam-glow      { clip-path: polygon(72.9% 0, 75.1% 0, 55.1% 100%, 52.9% 100%); }
.sp-stage:has(.sp-side--lab:hover) .sp-seam           { clip-path: polygon(73.88% 0, 74.12% 0, 54.12% 100%, 53.88% 100%); }
.sp-stage:has(.sp-side--lab:hover) .sp-seam-pulse     { clip-path: polygon(73.7% 0, 74.3% 0, 54.3% 100%, 53.7% 100%); }

.sp-stage:has(.sp-side--discover:hover) .sp-seam-glow  { clip-path: polygon(44.9% 0, 47.1% 0, 27.1% 100%, 24.9% 100%); }
.sp-stage:has(.sp-side--discover:hover) .sp-seam       { clip-path: polygon(45.88% 0, 46.12% 0, 26.12% 100%, 25.88% 100%); }
.sp-stage:has(.sp-side--discover:hover) .sp-seam-pulse { clip-path: polygon(45.7% 0, 46.3% 0, 26.3% 100%, 25.7% 100%); }

/* ---------------------------------------------------------------- content */

.sp-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  max-width: 30ch;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.sp-content--lab      { left: 6vw; align-items: flex-start; text-align: left; }
.sp-content--discover { right: 6vw; align-items: flex-end;  text-align: right; }

.sp-side:hover .sp-content--lab      { transform: translateY(-50%) translateX(6px); }
.sp-side:hover .sp-content--discover { transform: translateY(-50%) translateX(-6px); }

.sp-eyebrow {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sp-content--lab .sp-eyebrow      { color: var(--teal); }
.sp-content--discover .sp-eyebrow { color: var(--purple-ink); }

.sp-title {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .01em;
  margin-bottom: 14px;
}
.sp-content--lab .sp-title      { color: #f8fafc; text-shadow: 0 0 34px rgba(52, 232, 208, .3); }
.sp-content--discover .sp-title { color: var(--ink); }

.sp-desc { font-size: .95rem; margin-bottom: 24px; }
.sp-content--lab .sp-desc      { color: var(--text-2); }
.sp-content--discover .sp-desc { color: var(--ink-2); }

.sp-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 11px;
  transition: box-shadow .25s, transform .2s, background .25s;
}
.sp-content--lab .sp-cta {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dim) 100%);
  color: #06050c;
  box-shadow: 0 0 26px rgba(52, 232, 208, .3);
}
.sp-content--discover .sp-cta {
  background: linear-gradient(135deg, var(--purple-ink) 0%, var(--purple-deep) 100%);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(76, 29, 149, .32);
}
.sp-side:hover .sp-content--lab .sp-cta      { box-shadow: 0 0 44px rgba(52, 232, 208, .5); }
.sp-side:hover .sp-content--discover .sp-cta { box-shadow: 0 10px 30px rgba(76, 29, 149, .46); }

.sp-arrow { transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.sp-side:hover .sp-arrow { transform: translateX(4px); }

.sp-note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
/* --text-3 measures 4.30:1 against the Lab's backdrop, just under AA, so the
   note gets its own slightly lighter grey (5.62:1) rather than being dimmed
   into a guess. */
.sp-content--lab .sp-note      { color: #7d8a9b; }
.sp-content--discover .sp-note { color: var(--ink-3); }

/* ------------------------------------------------------------------ brand */
/* Sits over the dark half, so it uses the light-on-dark wordmark. */

.sp-brand {
  position: absolute;
  top: clamp(22px, 5vh, 48px);
  left: 6vw;
  z-index: 5;
  pointer-events: none;
}
.sp-logo {
  width: clamp(150px, 15vw, 220px);
  height: auto;
  filter: drop-shadow(0 0 26px rgba(52, 232, 208, .22));
}
.sp-tagline {
  margin-top: 10px;
  font-size: .84rem;
  color: var(--text-2);
}

/* ------------------------------------------------------------------ legal */

.sp-legal {
  position: absolute;
  left: 6vw;
  bottom: clamp(18px, 4vh, 34px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .76rem;
  color: var(--text-3);
}
.sp-legal a {
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .16s;
}
.sp-legal a:hover { color: var(--teal); }
.sp-legal-sep { opacity: .5; }

/* ------------------------------------------------------------------- a11y */

.sp-side:focus-visible { outline: 3px solid var(--teal); outline-offset: -6px; }
.sp-side--discover:focus-visible { outline-color: var(--purple-ink); }
.sp-legal a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* --------------------------------------------------------------- responsive */
/* Below this the diagonal turns horizontal: Lab on top, DISCOVER beneath.
   A near-vertical split would squeeze the copy into unreadable columns. */

@media (max-width: 860px), (orientation: portrait) {
  body { overflow: auto; }

  .sp-side--lab      { clip-path: polygon(0 0, 100% 0, 100% 46%, 0 58%); }
  .sp-side--discover { clip-path: polygon(0 58%, 100% 46%, 100% 100%, 0 100%); }

  .sp-stage:has(.sp-side--lab:hover) .sp-side--lab           { clip-path: polygon(0 0, 100% 0, 100% 56%, 0 68%); }
  .sp-stage:has(.sp-side--lab:hover) .sp-side--discover      { clip-path: polygon(0 68%, 100% 56%, 100% 100%, 0 100%); }
  .sp-stage:has(.sp-side--discover:hover) .sp-side--lab      { clip-path: polygon(0 0, 100% 0, 100% 36%, 0 48%); }
  .sp-stage:has(.sp-side--discover:hover) .sp-side--discover { clip-path: polygon(0 48%, 100% 36%, 100% 100%, 0 100%); }

  .sp-seam-glow { clip-path: polygon(0 55.6%, 100% 43.6%, 100% 48.4%, 0 60.4%); }
  .sp-seam      { clip-path: polygon(0 57.85%, 100% 45.85%, 100% 46.15%, 0 58.15%); }
  .sp-seam-pulse { display: none; }

  .sp-content {
    position: absolute;
    left: 7vw;
    right: 7vw;
    max-width: none;
    transform: none;
  }
  /* Each block is pushed toward its own end of the screen so the two never
     meet in the middle — at short viewport heights they otherwise collide
     across the diagonal (the note ran into the next mode's eyebrow). */
  .sp-content--lab {
    top: 13%;
    align-items: flex-start;
    text-align: left;
  }
  .sp-content--discover {
    top: auto;
    bottom: 7%;
    align-items: flex-start;
    text-align: left;
  }
  .sp-side:hover .sp-content--lab,
  .sp-side:hover .sp-content--discover { transform: none; }

  .sp-title { font-size: clamp(1.75rem, 8vw, 2.4rem); margin-bottom: 10px; }
  .sp-desc { font-size: .88rem; max-width: 34ch; margin-bottom: 18px; }
  .sp-eyebrow { margin-bottom: 8px; }
  .sp-cta { padding: 12px 20px; }
  .sp-note { margin-top: 10px; }

  .sp-brand { left: 7vw; top: 20px; }
  .sp-tagline, .sp-pick { display: none; }
  .sp-legal { left: auto; right: 7vw; bottom: 18px; }

  .sp-wave { height: 26vh; }
  .sp-mesh { width: 100%; right: -20%; height: 46vh; top: auto; bottom: 0; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-side, .sp-seam, .sp-seam-glow, .sp-seam-pulse, .sp-content, .sp-arrow { transition: none; }
  .sp-wave-path--a, .sp-wave-path--b, .sp-node, .sp-seam-pulse { animation: none; }
}