/* hero.css: three-layer hero + terminal window */

/* ---------- layers ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: calc(var(--space-16) + env(safe-area-inset-top, 0px)) var(--space-16);
}

#rain {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.22;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 45%,
      rgba(10, 15, 22, 0) 0%,
      rgba(10, 15, 22, 0.75) 70%,
      var(--color-canvas) 100%),
    radial-gradient(ellipse at center,
      transparent 60%,
      rgba(0, 0, 0, 0.55) 100%);
}

/* Faint two-axis ruling that reads as a market chart canvas behind the telemetry streams. */
.hero-scanlines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(97, 168, 255, 0.045) 0 1px,
      transparent 1px 64px
    ),
    repeating-linear-gradient(
      to right,
      rgba(97, 168, 255, 0.03) 0 1px,
      transparent 1px 64px
    );
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  /* the terminal column is wide enough for the boot lines to fit without wrapping */
  grid-template-columns: 52fr 48fr;
  gap: var(--space-fluid-lg);
  align-items: center;
}

/* ---------- hero copy ---------- */

.hero-kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-text-3);
  margin: 0;
}

.hero-kicker::before {
  content: '~ ';
}

.hero-title {
  font-family: var(--font-sans);
  font-size: var(--step-5);
  font-weight: 640;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--color-text-hi);
  margin: var(--space-3) 0 0;
  font-variation-settings: 'wght' 640;
}

@supports (syntax: "<number>") {
  @property --wght {
    syntax: "<number>";
    inherits: false;
    initial-value: 640;
  }

  @keyframes hero-title-settle {
    from {
      --wght: 180;
      opacity: 0.35;
    }
    to {
      --wght: 640;
      opacity: 1;
    }
  }

  .hero-title {
    font-variation-settings: 'wght' var(--wght, 640);
    animation: hero-title-settle 900ms var(--ease-out) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title {
    animation: none;
    opacity: 1;
    font-variation-settings: 'wght' 640;
  }
}

.hero-sub {
  font-size: var(--step-1);
  color: var(--color-text-2);
  max-width: 52ch;
  margin-block: var(--space-4) var(--space-6);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  min-height: 48px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-state) var(--ease-spring),
    box-shadow var(--dur-state) var(--ease-out),
    background-color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    color var(--dur-state) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 640;
}

.btn-primary:hover {
  background-color: var(--color-accent-bright);
  color: var(--color-on-accent);
  box-shadow:
    0 0 0 1px rgba(97, 168, 255, 0.4),
    0 0 24px rgba(97, 168, 255, 0.18);
}

.btn-ghost {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-bright);
  text-decoration: none;
}

/* two-column hero band: the step-0 labels no longer fit on one row, so the pair
   stacks as full-width buttons instead of breaking into a ragged second line */
@media (min-width: 901px) and (max-width: 1199px) {
  .hero-cta-row .btn { flex: 1 1 100%; }
}

/* ---------- proof chips ---------- */

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}

.hero-proof li {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-text-2);
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  padding: 6px 12px;
  background-color: color-mix(in srgb, var(--color-surface-1) 70%, transparent);
}

.hero-proof li::before {
  content: '✓ ';
  color: var(--color-ok);
}

/* ---------- terminal window ---------- */

.term-window {
  background-color: color-mix(in srgb, var(--color-surface-2) 88%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

@supports not (backdrop-filter: blur(10px)) {
  .term-window {
    background-color: var(--color-surface-2);
  }
}

@supports (backdrop-filter: blur(10px)) {
  .term-window {
    backdrop-filter: blur(10px);
  }
}

.term-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background-color: var(--color-surface-3);
  border-bottom: 1px solid var(--color-border-2);
}

.term-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  opacity: 0.6;
}

.dot-r { background-color: #FF5F57; }
.dot-y { background-color: #FEBC2E; }
.dot-g { background-color: #28C840; }

.term-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-text-3);
}

.term-body {
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.7;
  min-height: 280px;
  max-height: 420px;
  overflow-y: auto;
}

.term-log p {
  margin: 0;
}

.t-prompt { color: var(--color-accent); }
.t-cmd    { color: var(--color-text-hi); }
.t-out    { color: var(--color-text-2); }
.t-ok     { color: var(--color-ok); }
.t-dim    { color: var(--color-text-3); }
.t-info   { color: var(--color-info); }
.t-err    { color: var(--color-err); }
.t-log    { color: var(--color-text-2); }  /* an OK status line: the label is green, the text reads as output */

.term-caret {
  display: inline-block;
  color: var(--color-accent);
  animation: blink 1.06s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .term-caret {
    animation: none;
    opacity: 1;
  }
}

.term-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.term-input-row:focus-within {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.term-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-text-hi);
  caret-color: var(--color-accent);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-title {
    /* Phones read this headline first, so it tracks the container instead of sitting on
       the step-4 floor (a flat 39px from 320 to 458). The vw term keeps the same three
       lines at every phone width, and the 3.7rem cap lands on the 59.5px the desktop
       step-5 gives at 901px, so nothing jumps across the breakpoint. */
    font-size: clamp(2.5rem, 0.1rem + 11.9vw, 3.7rem);
  }

  .term-body {
    min-height: 220px;
  }

  /* grow the button's own box past the 44px tap bar without moving the h1 line box */
  .hero-title .slot {
    padding-block: 5px;
    margin-block: -5px;
  }
}

/* ---------- mobile pass (phones only, never at 901px or wider) ---------- */

/* phone hero density and full width stacked CTAs */
@media (max-width: 640px) {
  .hero {
    padding-block: calc(2.5rem + env(safe-area-inset-top, 0px)) 2.5rem;
  }

  .hero-inner {
    gap: var(--space-6);
  }

  /* Phones with vertical headroom spend it on the headline, so the hero copy fills the
     first screen and the proof chips fall past the fold. The bonus term is a length, not a
     breakpoint, so it grows smoothly with the visible viewport. Below 700svh it evaluates to
     zero and every size here falls back to the shared phone scale, which keeps short phones
     (iPhone SE class, small Android) from losing room they do not have. The bonus is capped
     so a wide and tall viewport inside this band, such as an unfolded foldable or a small
     tablet in portrait, cannot run the headline away. At a 430x755 viewport the headline
     lands at 66.5px on four lines with the CTA row clear of the browser chrome. */
  .hero-title {
    font-size: calc(clamp(2.5rem, 0.1rem + 11.9vw, 3.7rem) + max(0px, min(15px, (100svh - 700px) * 0.25)));
  }

  .hero-sub {
    font-size: calc(var(--step-0) + max(0px, min(3px, (100svh - 700px) * 0.05)));
    max-width: none;
    margin-block: var(--space-3) 1.25rem;
  }

  /* On a phone the chips stack into three separate rows below the CTAs, so this width hides
     them and the terminal moves up into the space. Wider layouts keep them, and the same
     three claims appear in full in the services cards. */
  .hero-proof {
    display: none;
  }

  .hero-cta-row .btn {
    width: 100%;
  }
}

/* extra relief on tiny phones */
@media (max-width: 360px) {
  .hero {
    padding-block: calc(2rem + env(safe-area-inset-top, 0px)) 2rem;
  }

  .btn {
    padding-inline: 18px;
  }
}

/* landscape phones, short viewports */
@media (max-width: 900px) and (max-height: 520px) {
  .hero {
    min-height: auto;
    padding-block: calc(2rem + env(safe-area-inset-top, 0px)) 2rem;
  }
}

/* iOS Safari zooms the page when a focused input is under 16px, so touch devices
   get a 16px input. The row already reserves 44px, so nothing else moves. */
@media (hover: none) and (pointer: coarse) {
  .term-input {
    font-size: 16px;
  }

  /* the prompt and the idle caret match the input so the whole line reads at one size */
  .term-input-row .t-prompt,
  .term-idle-caret {
    font-size: 16px;
  }
}

/* tablet band: the three chips stay on one row at the 12px type floor */
@media (min-width: 700px) and (max-width: 860px) {
  .hero-proof { gap: 4px; }
  .hero-proof li { padding-inline: 8px; }
}

/* ---------- headline slot: the last word is a control ---------- */

.slot {
  display: inline-grid;
  grid-template-areas: 'w';
  align-items: baseline;
  justify-items: start;
  vertical-align: baseline;
  font: inherit;
  font-variation-settings: inherit;
  font-feature-settings: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: var(--color-accent);
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.slot > span { grid-area: w; }

/* one hidden copy of the widest word reserves the width, so the headline never re-wraps
   and nothing extra lands in the h1's text content */
.slot::after {
  content: 'model.';
  grid-area: w;
  visibility: hidden;
  pointer-events: none;
  padding-inline-end: 0.6em;
}

.slot-word {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.08em;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  transition:
    color var(--dur-state) var(--ease-standard),
    text-decoration-color var(--dur-state) var(--ease-standard);
}

.slot:hover .slot-word,
.slot:focus-visible .slot-word {
  color: var(--color-accent-bright);
  text-decoration-color: var(--color-accent-bright);
  text-decoration-thickness: 0.07em;
}

/* the ring hugs the word, not the reserved width of the widest word */
.slot:focus-visible { outline: none; }

.slot:focus-visible .slot-word {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 0;
  border-radius: 2px;
}

/* the typing caret: a box, not a glyph, so it needs no font support */
.slot-word::after {
  content: '';
  display: none;
  width: 0.5em;
  height: 0.8em;
  margin-inline-start: 0.08em;
  vertical-align: -0.04em;
  background: var(--color-accent);
}

.slot[data-typing] .slot-word::after { display: inline-block; }
.slot[data-typing="hold"] .slot-word::after { animation: blink 1.06s step-end infinite; }

/* ---------- terminal affordance: you can type here ---------- */

.term-body { cursor: text; }

.term-input-wrap {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.term-idle-caret {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent);
  pointer-events: none;
  animation: blink 1.06s step-end infinite;
}

.term-input-row[data-idle] .term-idle-caret { display: inline-block; }

/* one pulse of the input row's top edge when the prompt unlocks */
.term-input-row.is-ready { animation: term-ready 1.8s var(--ease-out) 1; }

@keyframes term-ready {
  0%   { border-top-color: var(--color-accent); box-shadow: 0 -6px 18px -8px rgba(97, 168, 255, 0.55); }
  100% { border-top-color: var(--color-border); box-shadow: none; }
}

/* the "type help" line becomes a pill that glows twice, then rests */
.term-log p.t-hint-line { margin-top: 6px; margin-bottom: 10px; }

.t-hint {
  display: inline-block;
  padding: 1px 10px 1px 8px;
  border: 1px solid var(--color-accent-dim);
  border-radius: 4px;
  background: var(--color-accent-tint);
  color: var(--color-accent);
  animation: hint-pulse 2.4s var(--ease-out) 2;
}

.t-hint-arrow { margin-inline-end: 6px; }

.t-kbd {
  font: inherit;
  padding: 0 5px;
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--color-surface-3);
  color: var(--color-text-hi);
}

@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(97, 168, 255, 0); }
  40%      { box-shadow: 0 0 0 4px rgba(97, 168, 255, 0.18), 0 0 18px rgba(97, 168, 255, 0.28); }
}

/* wrapped output lines hang under the first character instead of reading as new lines.
   Command lines and the hint line keep their flush left edge. */
#term-log p.t-out,
#term-log p.t-log,
#term-log p.t-ok,
#term-log p.t-info,
#term-log p.t-err,
#term-log p.t-dim {
  padding-inline-start: 2ch;
  text-indent: -2ch;
}