/* ============================================================================
   lycorp.ai — pure monochrome (zero chroma), system theme, hairline system.
   The crescent is the only curve on the page; everything else is 1px rules and
   rectangles. That contrast is the whole visual signature.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --paper:  oklch(0.995 0 0);
  --ink:    oklch(0.160 0 0);
  --muted:  oklch(0.420 0 0);
  --rule:   oklch(0.870 0 0);

  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --col: 33rem;
  --pad: clamp(1.25rem, 0.9rem + 1.8vw, 2rem);
  --bleed: 0.7rem;                 /* how far a hovered row extends past the rules */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --swift: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:  oklch(0.135 0 0);
    --ink:    oklch(0.970 0 0);
    --muted:  oklch(0.660 0 0);
    --rule:   oklch(0.290 0 0);
  }
}

/* ============================== reset ==================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, p { margin: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ========================= paint gate ==================================== */
/* Hold every animation at frame zero until the document has actually been
   composited once (html.painted, set by the inline head script on the second
   requestAnimationFrame). Without this the clocks run during layout/font/
   script work and the first visible frames land mid-animation. Applies only
   when scripting is present (html.js); otherwise inert. */

html.js:not(.painted) *,
html.js:not(.painted) *::before,
html.js:not(.painted) *::after {
  animation-play-state: paused !important;
}

/* ============================== splash =================================== */
/* Removed by its own CSS animation. JS shortens it; JS failure cannot trap the
   page, because nothing here depends on script to clear. */

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--paper);
  animation: splash-out 0.42s var(--ease) 0.6s forwards;
}
.splash__moon {
  width: 34px; height: 34px;
  color: var(--ink);
  animation: moon-spin 1.4s linear infinite;
}
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
@keyframes moon-spin { to { transform: rotate(360deg); } }

/* JS path: explicit final state plus `animation: none` cleanly overrides. */
.splash.is-done {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}

/* ============================== shell ==================================== */

.shell {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 1.5rem + 3.5vw, 3.75rem);
}

/* ============================== head ==================================== */

.head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  text-align: center;
}
.mark {
  width: clamp(46px, 11vw, 62px);
  height: auto;
  color: var(--ink);
  animation: mark-in 1.5s var(--ease) 0.15s backwards;
}
@keyframes mark-in {
  from { transform: rotate(-125deg) scale(0.72); opacity: 0; }
  55%  { opacity: 1; }
}
.wordmark {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;             /* optically re-centre the tracked word */
  text-transform: uppercase;
  animation: fade-up 0.8s var(--ease) 0.42s backwards;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }

/* ============================== index =================================== */

.index { position: relative; }

/* Group top rule + per-row bottom rules together form the full ruling.
   Both draw from the centre outward on load; the base state is drawn, so a
   headless render or reduced-motion client still shows every line. */
.index::before,
.row::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(1);
  animation: rule-in 0.9s var(--ease) backwards;
}
.index::before { top: 0; }
/* Inset by the row's bleed so every rule on the page shares one edge, flush with
   the text column, while the hover inversion still extends past it. */
.row::after { bottom: 0; left: var(--bleed); right: var(--bleed); }
@keyframes rule-in { from { transform: scaleX(0); } }

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  /* Bleed past the text column so the hover inversion reads as deliberate. */
  margin-inline: calc(var(--bleed) * -1);
  padding: 0.92rem var(--bleed);
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  transition: background var(--swift), color var(--swift);
  animation: fade-up 0.7s var(--ease) backwards;
}
.row__name { flex: 1; min-width: 0; }
.row__arrow {
  width: 15px; height: 15px; flex: none;
  color: var(--muted);
  transition: transform var(--swift), color var(--swift);
}

/* The standout move: the whole row inverts. Pure black/white, no colour. */
.row:hover, .row:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.row:hover .row__arrow, .row:focus-visible .row__arrow {
  color: var(--paper);
  transform: translate(2px, -2px);
}
.row:focus-visible { outline-offset: 0; }

/* stagger: rules and rows cascade down the page */
.index::before          { animation-delay: 0.5s; }
.row:nth-child(1)       { animation-delay: 0.55s; }
.row:nth-child(1)::after{ animation-delay: 0.57s; }
.row:nth-child(2)       { animation-delay: 0.62s; }
.row:nth-child(2)::after{ animation-delay: 0.64s; }

/* ========================= reduced motion ================================ */

@media (prefers-reduced-motion: reduce) {
  .splash { animation-duration: 0.01s; animation-delay: 0s; }
  .mark, .wordmark, .row, .index::before, .row::after {
    animation: none !important;
  }
  .splash__moon {
    animation: moon-spin 1.6s linear infinite !important;
  }
}