/* ==========================================================================
   kanjidrift.com

   This sheet is a port of the app's chrome, not a lookalike. The wordmark, the
   header bar, the chamfered HUD tabs, the cyan scanlines, the live wire and the
   ground are all lifted from `kanjisrs/app/assets/stylesheets/application.css`
   and `app/views/shared/_app_header.html.erb`, with the same values and, where
   it helps, the same class names (`.r-col`, `.k-col`, `.nav-btn`,
   `.brand-group`). Someone who reads this page and then signs in should not see
   a seam.

   The rule when editing: if a thing exists in the app, copy the app. Invent only
   what the app has no equivalent for (the hero kanji field, the tategaki rails)
   and build those out of the same parts.

   THE CHAMFER HAS A DIRECTION. The app cuts the top-left and bottom-right
   corners, never the other diagonal. Getting this backwards is the single most
   obvious way to look almost-right; use var(--ch) and the polygon below.

   The landing page is one screen on purpose. Styles for a section that does not
   exist are not kept here on the chance it comes back — the sheet should
   describe the page, and nothing else.
   ========================================================================== */

:root {
  /* ground — the app's, exactly */
  --bg:         #1a1a2e;         /* app body */
  --bg-glow:    #1e2a4a;         /* app's radial highlight on auth/focus pages */
  --chrome-bg:  #16162b;         /* header bar, top */
  --chrome-deep:#0f0f1f;         /* header bar, bottom */
  --border:     rgba(255, 255, 255, 0.12);
  --wire:       rgba(0, 212, 255, 0.30);

  /* ink */
  --text:  #e8e8f0;
  --muted: rgba(232, 232, 240, 0.55);
  --faint: rgba(232, 232, 240, 0.34);

  /* accents — identical to the app's */
  --cyan:     #00d4ff;
  --cyan-lit: #00e8ff;           /* the app's button hover */
  --cyan-hi:  #43fbff;           /* glow tint, used on lit glyphs only */
  --pink:     #ff2d9b;

  /* type — --gothic is the app's stack, name and all */
  --gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
            "Noto Sans JP", Inter, -apple-system, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --jp-serif: 'Hiragino Mincho ProN', 'Yu Mincho', 'Songti SC', serif;

  --ch: 10px;                    /* chamfer depth */
}

/* The one chamfer. Top-left and bottom-right, like every panel in the app. */
.btn, .eyebrow, .nav-btn {
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)),
                     calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }

/* Column flex so the footer sits on the floor of the viewport on a page this
   short, instead of leaving a band of dead ground beneath it. */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  display: flex; flex-direction: column; min-height: 100vh;
}

/* Scanlines — the CRT the whole city is filmed through. Same cyan tint and same
   1px/3px pitch as the app's header::before, just spread over the page. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.5;
  background: repeating-linear-gradient(
    180deg, rgba(0, 212, 255, 0.035) 0px, rgba(0, 212, 255, 0.035) 1px,
    transparent 1px, transparent 3px);
}

main, .site-header, .site-footer { position: relative; z-index: 2; }
main { flex: 1 0 auto; display: flex; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--pink); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* A live wire: the app's header::after, reused as the edge of a full-bleed
   section. This is the app's section rule — there is no other kind. */
.wire {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg,
    transparent 0%, var(--cyan) 10%, var(--cyan) 45%,
    rgba(0, 212, 255, 0.75) 62%, var(--cyan) 82%, transparent 100%);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.5), 0 0 24px rgba(0, 212, 255, 0.2);
}

/* --- tategaki rails ---------------------------------------------------- */
/* Decorative vertical Japanese in the outer gutters. Dropped once the gutters
   are gone rather than folded into the layout. */
.rail {
  position: fixed; top: 0; bottom: 0; width: 46px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.rail-l { left: 0; }
.rail-r { right: 0; }
.rail span {
  writing-mode: vertical-rl; font-family: var(--jp-serif);
  font-size: 13px; letter-spacing: 0.42em;
}
.rail-l span { color: var(--cyan); opacity: 0.30; }
.rail-r span { color: var(--pink); opacity: 0.24; }
@media (max-width: 1320px) { .rail { display: none; } }

/* --- header ------------------------------------------------------------ */
/* The app's bar. Flex is declared on both .site-header and .header-inner so it
   works whether brand and nav are direct children or wrapped in .header-inner. */
.site-header {
  position: sticky; top: 0; z-index: 60;
  min-height: 60px;
  background: linear-gradient(180deg, var(--chrome-bg) 0%, var(--chrome-deep) 100%);
  border-bottom: none;
}
.site-header, .header-inner {
  display: flex; align-items: stretch; justify-content: space-between; gap: 20px;
}
.header-inner { width: 100%; }
/* Scanlines and the live wire, both pseudo-elements, exactly as in the app. */
.site-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(
    180deg, rgba(0, 212, 255, 0.035) 0px, rgba(0, 212, 255, 0.035) 1px,
    transparent 1px, transparent 3px);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--cyan) 10%, var(--cyan) 45%,
    rgba(0, 212, 255, 0.75) 62%, var(--cyan) 82%, transparent 100%);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.5), 0 0 24px rgba(0, 212, 255, 0.2);
}

.brand-group {
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 1;
}
a.brand, a.brand:hover { text-decoration: none; }

/* ---------- Wordmark ---------- */
/* Ported wholesale from the app's `header h1`. KANJI is lit type; DRIFT is a
   chamfered capsule lit from inside. The class names are the app's too, so the
   two are visibly the same component rather than two drawings of one idea. */
.wordmark {
  font-family: var(--gothic);
  font-size: 20px; font-weight: 800; letter-spacing: 0.16em;
  line-height: 1; white-space: nowrap; text-transform: uppercase;
  display: flex; align-items: center;
}
.wordmark .r-col {
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(0, 212, 255, 0.55);
  transition: text-shadow 0.4s ease;
}
.wordmark .k-col {
  color: #12101f; background: var(--pink);
  padding: 5px 10px 4px; margin-left: 9px;
  font-size: 14px; letter-spacing: 0.2em; font-weight: 800;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  box-shadow: 0 0 18px rgba(255, 45, 155, 0.55);
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.brand:hover .r-col { text-shadow: -1.5px 0 var(--pink), 1.5px 0 var(--cyan), 0 0 20px rgba(0, 212, 255, 0.8); }
.brand:hover .k-col { transform: translateY(-1px); box-shadow: 0 0 28px rgba(255, 45, 155, 0.85); }

/* The app's plain cyan/pink wordmark — what its auth pages use. Kept as a
   fallback so a `.brand` without a `.wordmark` inside still reads as the logo
   rather than as body text. */
.brand {
  font-family: var(--gothic);
  font-size: 21px; font-weight: 800; letter-spacing: 2px; line-height: 1;
  color: var(--text);
}
.brand .a { color: var(--cyan); }
.brand .b { color: var(--pink); }
.brand-ja {
  font-family: var(--gothic); font-size: 10px; font-weight: 400;
  letter-spacing: 0.34em; color: var(--faint); white-space: nowrap;
  align-self: center;
}

/* ---------- Nav ---------- */
/* The app's HUD tabs: chamfered panels, a cyan→pink charge line that fires
   across the base on hover, light bleeding up from it, and a chromatic split on
   the label — the signal not quite holding. */
.site-header nav { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; position: relative; z-index: 1; }
/* A header link with no .nav-btn still gets the type — only the panel chrome is
   opt-in. Keeps any page that hasn't been updated from looking unstyled. */
.site-header nav a {
  display: inline-flex; align-items: center;
  font-family: var(--gothic); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.14em; color: rgba(232, 232, 240, 0.5);
}
.site-header nav a:hover { color: var(--text); text-decoration: none; }
.nav-btn {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: none; margin: 12px 0; padding: 0 16px;
  text-indent: 0.14em; white-space: nowrap; cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease, text-shadow 0.3s ease;
}
.nav-btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.7);
}
.nav-btn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 212, 255, 0.16) 100%);
  opacity: 0; transition: opacity 0.3s ease;
}
.nav-btn:hover {
  color: var(--text); background: rgba(0, 212, 255, 0.07); text-decoration: none;
  text-shadow: -1px 0 rgba(255, 45, 155, 0.9), 1px 0 rgba(0, 212, 255, 0.9);
}
.nav-btn:hover::after { transform: scaleX(1); }
.nav-btn:hover::before { opacity: 1; }

/* Sign up is the app's `.active` tab — powered on, its charge line already
   fired. With only two items in the bar, this is what separates them. */
.nav-cta {
  color: var(--cyan); background: rgba(0, 212, 255, 0.12);
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.7);
}
.nav-cta::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, var(--cyan), var(--cyan));
}
.nav-cta:hover { color: var(--cyan-lit); background: rgba(0, 212, 255, 0.18); }

/* --- buttons ----------------------------------------------------------- */
/* Chamfered rather than the app's pill, because the wordmark's DRIFT capsule is
   chamfered and the two sit near each other. Colours and hover are the app's. */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: var(--cyan); color: #06121a;
  font-family: var(--gothic);
  font-weight: 800; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  background: var(--cyan-lit); text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}
.btn .arw { transition: transform 0.16s ease; }
.btn:hover .arw { transform: translateX(4px); }
.btn-lg { padding: 17px 34px; font-size: 15px; }

/* --- hero -------------------------------------------------------------- */
/* The ground is the app's auth/focus background, unchanged: the last screen
   before signing in and the first screen after it are the same room. The hero
   is the page, so it takes whatever height is left over. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1; display: flex; align-items: center;
  padding: 92px 0 96px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 30%, var(--bg-glow) 0%, var(--bg) 70%);
}
/* The drifting kanji field, painted by drift.js. Absent without JS — which is
   why nothing in the hero relies on it for contrast. */
.hero .drift {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -2; opacity: 0.42;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 96%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 96%);
}
/* Perspective floor grid receding to a horizon behind the headline. */
.hero-grid {
  position: absolute; inset: 42% 0 0; z-index: -2;
  background:
    repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.14) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg,  rgba(0, 212, 255, 0.14) 0 1px, transparent 1px 44px);
  transform: perspective(360px) rotateX(66deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 88%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 88%);
  opacity: 0.45;
}
/* Darkens the middle so the headline never fights the field behind it. */
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 62% 54% at 50% 46%, rgba(16, 17, 32, 0.82) 0%, transparent 78%);
}
.hero-inner { position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  --ch: 8px;
  font-family: var(--gothic); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
  padding: 7px 15px; margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.18);
}
.pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 9px var(--cyan);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.hero h1 {
  font-size: clamp(36px, 6.4vw, 68px); font-weight: 800;
  letter-spacing: -1.4px; line-height: 1.08; margin-bottom: 22px;
}
.hero h1 .grad {
  background: linear-gradient(96deg, var(--cyan) 0%, var(--cyan) 30%, var(--pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede {
  font-size: clamp(16px, 2.1vw, 19px); color: var(--muted);
  max-width: 640px; margin: 0 auto 34px;
}
.hero-note {
  margin-top: 18px; font-family: var(--gothic);
  font-size: 11px; letter-spacing: 0.18em; color: var(--faint);
}

/* --- the specimen ticker ----------------------------------------------- */
/* One line, stepped through the real top of the deck by drift.js. The rank
   climbing 001, 002, 003 is what makes "in order" self-evident, so the numeral
   is tabular and never reflows the line. */
/* Block-level so it takes its own line; `width: fit-content` keeps the box
   hugging the text while `margin: auto` still centres it. */
.ticker {
  display: flex; align-items: center; gap: 16px;
  width: fit-content; margin: 0 auto 32px; padding: 10px 22px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.14);
}
.t-rank {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--cyan); font-variant-numeric: tabular-nums;
}
.t-k {
  font-family: var(--jp-serif); font-size: 30px; line-height: 1;
  color: var(--text); text-shadow: 0 0 22px rgba(67, 251, 255, 0.28);
  min-width: 34px;
}
/* Wide enough for the longest meaning in the set ("occurrence", 105px measured)
   so the box never resizes as the line steps. Re-measure if the set changes. */
.t-m {
  font-family: var(--gothic); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
  min-width: 108px; text-align: left;
}

/* --- email capture ------------------------------------------------------ */
/* The app's login row, exactly: same pill, same 2px border, same blur, same
   cyan submit. The first field you type on the marketing site is the field you
   already know from the app. */
.capture {
  display: inline-flex; gap: 0; overflow: hidden;
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.capture:focus-within {
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow: 0 0 26px rgba(0, 212, 255, 0.18);
}
.capture input {
  width: 260px; padding: 15px 24px;
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--sans); font-size: 15px;
}
.capture input::placeholder { color: rgba(255, 255, 255, 0.3); }
.capture input:focus { background: rgba(0, 212, 255, 0.04); }
.capture button {
  padding: 15px 28px; border: none; cursor: pointer;
  background: var(--cyan); color: #0a0a1a;
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0.5px;
  white-space: nowrap; -webkit-appearance: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.capture button:hover { background: var(--cyan-lit); box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }

/* --- document pages (credits) ------------------------------------------ */
.doc { max-width: 760px; margin: 0 auto; padding: 48px 0 24px; position: relative; z-index: 2; }
.doc h1 { font-size: clamp(30px, 5vw, 42px); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 16px; }
.doc .lede-sm { color: var(--muted); font-size: 16px; margin-bottom: 40px; }

.credit-entry { padding: 24px 0 26px; border-top: 1px solid var(--border); }
.credit-entry h2 {
  font-family: var(--gothic); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 12px;
}
.credit-entry .src { font-size: 17px; line-height: 1.5; margin-bottom: 12px; }
.credit-entry .src .en { font-size: 13px; color: var(--muted); }
.credit-entry p { color: var(--text); font-size: 15px; margin-bottom: 10px; }
.credit-entry .terms {
  font-size: 13px; color: var(--muted);
  border-left: 2px solid var(--wire); padding-left: 14px; margin-top: 14px;
}
.credit-entry .terms strong { color: var(--pink); font-weight: 700; }
.doc .footnote { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }

/* --- footer ------------------------------------------------------------ */
/* The app's footer: no border, a dimmed cyan→pink current above the row, and
   links that light a charge line under themselves. */
.site-footer {
  position: relative; border-top: none;
  flex: 0 0 auto; padding: 0 0 32px;
  background: linear-gradient(180deg, transparent, rgba(15, 15, 31, 0.9));
  color: var(--muted); font-size: 13px;
}
.site-footer .row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap; padding-top: 26px; position: relative;
}
.site-footer .row::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(0, 212, 255, 0.5) 30%, rgba(255, 45, 155, 0.6) 50%,
    rgba(0, 212, 255, 0.5) 70%, transparent);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.25);
}
.site-footer a {
  position: relative; display: inline-block;
  font-family: var(--gothic); font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-indent: 0.2em;
  color: rgba(232, 232, 240, 0.35); padding: 7px 4px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.site-footer a::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}
.site-footer a:hover {
  color: var(--text); text-decoration: none;
  text-shadow: -1px 0 rgba(255, 45, 155, 0.9), 1px 0 rgba(0, 212, 255, 0.9);
}
.site-footer a:hover::after { transform: scaleX(1); }
.credit { font-size: 11px; opacity: 0.65; margin-top: 14px; line-height: 1.5; }

/* --- responsive --------------------------------------------------------- */
/* The app stacks its header at 760px; matching that keeps the two in step. */
@media (max-width: 760px) {
  .site-header, .header-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
  .site-header { padding: 10px 0 0; }
  .site-header nav { width: 100%; flex-wrap: wrap; }
  .nav-btn { padding: 0 10px; font-size: 12.5px; margin: 4px 0; height: 34px; }
  .brand-group { gap: 12px; padding-top: 4px; }
  .hero { padding: 64px 0 72px; }
}
@media (max-width: 640px) {
  .brand-ja { display: none; }
  .site-footer .row { justify-content: flex-start; }
}
/* The capture row is 404px at its natural size, so it outgrows the content box
   below ~452px and gets clipped by the page's overflow guard. Below that it
   goes full width and the input takes the slack — `min-width: 0` because a flex
   item will not shrink past its intrinsic width without it. */
@media (max-width: 520px) {
  .capture { display: flex; width: 100%; }
  .capture input { width: auto; flex: 1 1 auto; min-width: 0; padding: 14px 18px; }
  .capture button { flex: 0 0 auto; padding: 14px 20px; }
  .ticker { gap: 12px; padding: 9px 16px; }
  .t-m { min-width: 0; }
}

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}