@import "https://assets.elements.dev/assets/app/shared/styles/page.2ba0908c910344c0.css";

.home-page { color: var(--ink); }

.home-wrap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.home-main { flex: 1; }

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

.hero {
  /* Top air recreates Feed's: 4rem from <PageChrome>.page-chrome-main
     (var(--space-16)) + 2rem from the canonical h1 margin-top = 6rem
     total. /home doesn't use PageChrome, so we put the combined
     value (var(--space-24)) on .hero directly. The result is that the
     top line of the hero headline sits at the same Y as the page title
     on /feed, /learn, /install, so clicking between them doesn't jump. */
  padding: var(--space-24) 0 0;
}

.hero-title {
  /* Logo mark + wordmark as one lockup row. gap + align in em so both
     track the clamped title size. */
  display: flex;
  align-items: center;
  gap: 0.14em;
  font-family: var(--font-sans);
  /* The tagline is the heaviest heading on the page: base sits at bold
     and the glimmer phrase lifts to black, so it out-weighs the section
     headers below it. */
  font-weight: var(--weight-bold);
  /* Display scale straight off the type system: --text-6xl (72px)
     floor on phones up to the --text-8xl (128px) cap on wide screens,
     10vw riding between. */
  font-size: clamp(var(--text-6xl), 10vw, var(--text-8xl));
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-none);
  /* The subtitle carries the breathing room down to the CTAs now, so
     the title only needs a small gap to its subtitle below. */
  margin: 0 0 var(--space-4);
}

/* Terminal card in the hero: shows the getting-started command flow.
   Deep ink card so it reads as a real terminal on the white page and
   holds up in dark mode. */
.hero-terminal {
  /* Full width of the content column so the right edge aligns with the
     headline's right edge. */
  width: 100%;
  margin: 0 0 var(--space-8);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #0d1b28;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 48px -24px rgba(16, 44, 66, 0.5);
}
.term-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.term-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.term-body {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.75;
  color: #c6d3de;
  overflow-x: auto;
  /* Render like a real TUI: no ligatures, so => stays => and !== stays !==. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}
.term-body .line { white-space: pre; }
.term-body .line.gap { height: 0.9em; }

.term-body .p { color: #6d7d8b; }
.term-body .c { color: #f2f7fb; font-weight: var(--weight-medium); }
.term-body .ok { color: #5fd0a0; font-weight: var(--weight-bold); }
.term-body .lbl { color: #e6edf3; font-weight: var(--weight-bold); display: inline-block; width: 9ch; }
.term-body .dim { color: #8b98a5; }
.term-body .link { color: var(--accent); }
.term-body .arrow { color: var(--accent); }

/* Startup animation. Command lines type out one character at a time
   (a steps() sweep over an overflow-hidden inline-block), then the
   fast-boot output snaps in as a block to sell the "1.5µs" startup. */
.term-body.animate .cmd { opacity: 0; }
.term-body.animate .cmd .c {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
}
.term-body.animate .c1 { animation: term-reveal 1ms linear 150ms forwards; }
.term-body.animate .c1 .c { animation: type-14 420ms steps(14) 150ms forwards; }
@keyframes term-reveal { to { opacity: 1; } }
/* +1ch buffer past the exact character count so the final glyph never
   clips when the mono font's metrics round narrow (seen on mobile).
   The extra width is trailing blank on the dark card, so it's invisible. */
@keyframes type-14 { to { width: 15ch; } }

/* Boot output sequences after "elements start" finishes typing (c1
   ends at 150 + 420 = 570ms): the State/Ok block fades in first, then
   the "listening" block, each a quick fade. */
.term-body.animate .s1,
.term-body.animate .s2 {
  opacity: 0;
  transform: translateY(3px);
}
.term-body.animate .s1 { animation: term-line 150ms ease-out 600ms forwards; }
.term-body.animate .s2 { animation: term-line 150ms ease-out 820ms forwards; }
@keyframes term-line {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .term-body.animate .cmd,
  .term-body.animate .line:not(.cmd) {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .term-body.animate .cmd .c { width: auto; }
}

/* Sentence headline variant: block layout, smaller than the wordmark
   scale, with the lead words in ink and only "elements" accented. */
.hero-title.is-sentence {
  display: block;
  font-size: clamp(var(--text-5xl), 7vw, var(--text-7xl));
  letter-spacing: var(--tracking-tight);
  line-height: 1.02;
  /* Give the big display headline more room to breathe before the
     dense intro paragraph — the base --space-4 reads crammed under a
     7xl h1. Stays below the para→terminal gap (--space-8) so the
     paragraph still groups with the headline above it. */
  margin-bottom: var(--space-6);
}
/* Keep "The full stack" on one line — never break between "The" and
   the glimmered wordmark. Paired with the mobile font-size below, which
   sizes the headline so the locked phrase fits the phone content width
   (it doesn't at the desktop-derived size). */
.hero-lockup {
  white-space: nowrap;
}
.hero-para {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  /* Fills the content column so its edges align with the headline and
     terminal above/below. A single short intro paragraph reads fine at
     the column width; the ~66ch readability cap is for long-form body
     copy, not a three-sentence hero blurb. */
  max-width: none;
  margin: 0 0 var(--space-8);
}

/* The glimmering blue "elements" in the hero tagline. On load it does
   a one-time bright sweep (wave), then settles into a slow, subtle
   infinite glimmer — same treatment as the generator boilerplate's
   home page. The gradient runs accent → deep → accent so the sweep
   reads as a highlight travelling across the word. */
.hero-glimmer {
  display: inline-block;
  font-weight: var(--weight-black);
  /* background-clip:text shrink-wraps the paint box to the text advance;
     the tight tracking pulls the final glyph's ink past that edge and
     the clip cuts the "s". A hair of right padding widens the paint box
     to include it, with a matching negative margin so layout is
     unchanged. */
  padding-right: 0.08em;
  margin-right: -0.08em;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent) 38%,
    var(--accent-deep) 50%,
    var(--accent) 62%,
    var(--accent) 100%
  );
  background-size: 260% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation:
    hero-wave    1900ms ease-in-out   50ms forwards,
    hero-glimmer 6s     ease-in-out 1950ms infinite;
}

@keyframes hero-wave {
  from { background-position: 100% 50%; }
  to   { background-position:   0% 50%; }
}

@keyframes hero-glimmer {
  0%   { background-position:  0% 50%; }
  50%  { background-position: 30% 50%; }
  100% { background-position:  0% 50%; }
}

/* ---- feed ---- */

/* No top rule between hero and feed and no FEED label — the feed
   reads as a continuation of the page, not a separate band. The
   hero's bottom margin + the feed's first row carry the visual
   transition on their own. */
.feed-wrap {
  width: 100%;
}

/* Same column + gutter as .shell-marketing (the hero above) so the feed
   header and rows share the hero's exact left edge — and match the
   /feed page, which uses the same gutter. */
.home-feed-shell {
  width: 100%;
  max-width: var(--container-marketing);
  margin: 0 auto;
  padding: 0 var(--space-8);
}


.feed-section {
  /* Modest air between the header and the first row; deep air below
     before the footer. Header→first-item lands at ~24px visual (this
     16px + the row's 8px top padding), a touch more than the 16px
     item-to-item rhythm without the header floating off its list. */
  padding: var(--space-4) 0 10rem;
}

/* Feed header. A very subtle full-bleed hairline separates the CTA
   block above from the feed below — --rule is the theme-aware divider
   token (light neutral-200 / dark neutral-800), the same one the footer
   uses, so it reads as a faint line in both modes. The band is
   full-width, so the border spans the whole viewport edge to edge. */
.feed-head-band {
  border-top: 1px solid var(--rule);
  padding: var(--space-10) 0 0;
}
.feed-head {
  margin: 0;
}
.feed-head-title {
  font-family: var(--font-sans);
  /* Section scale — a landmark heading with weight under the hero, but
     always smaller than it. Responsive: ~40px on desktop down to ~28px
     on phones, so it tracks the hero's own mobile shrink and never
     overtakes it (the hero clamps to ~36–52px on narrow screens). Held
     below the 64px --page-title token at every width. */
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.feed-head-sub {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--ink-soft);
  line-height: var(--leading-snug);
  margin: 0;
}

.section-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2.5rem;
}

/* ---- mobile ---- */

@media (max-width: 700px) {
  /* Top padding matches the canonical 48px above-h1 air on the
     other pages: <PageChrome>.page-chrome-main contributes 24px of
     chrome padding on mobile and the canonical h1 adds 24px of
     margin-top. Home doesn't use PageChrome, so we recreate the
     combined 48px in the hero element directly. */
  .hero { padding: var(--space-12) 0 0; }
  .hero-title {
    max-width: none;
    /* Small gap to the subtitle on mobile. */
    margin-bottom: var(--space-3);
  }
  /* Size the sentence headline so the "The full stack" lockup fits the
     phone content width (down to ~320px): scales with the viewport and
     caps at 3.25rem. The desktop-derived size (~60px) is too wide for
     the phrase and forces a break after "The". */
  .hero-title.is-sentence {
    font-size: clamp(2.25rem, 13.5vw, 3.25rem);
  }
  /* Match .shell-marketing's mobile gutter (1.5rem) so the feed stays
     on the hero's left edge at phone widths too. */
  .home-feed-shell { padding: 0 1.5rem; }
  .feed-section { padding: var(--space-5) 0 2rem; }
  .section-foot { margin-top: 3rem; }
}

/* ---- landscape phones ---- */

/* Phones in landscape exceed the 700px max-width above (iPhone 14
   Pro = 844px wide rotated) but the viewport height collapses to
   ~390px. The desktop hero padding of 8rem 0 6rem leaves only a
   thin strip of content visible above the fold. Compress to phone-
   like padding when the viewport is short and wide. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { padding: var(--space-6) 0 0; }
  .hero-title { max-width: none; margin-bottom: var(--space-2); }
  .feed-section { padding: var(--space-4) 0 var(--space-8); }
}

/* ---- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .hero-glimmer {
    animation: none !important;
    background: var(--accent);
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--accent);
    -webkit-text-fill-color: currentColor;
  }
}

/* CTA framed as a full-width band — a distinct action strip spanning the
   viewport so the CTAs aren't lost. Buttons sit in the content column,
   left-aligned, Introducing then Install so the eye lands on Install. */
/* Buttons stand alone under the terminal — no band framing. They sit in
   the hero flow, left-aligned like the copy and terminal above; the blue
   Install carries the emphasis on its own. The terminal's space-8 bottom
   margin sets the gap above; margin-bottom sets the gap down to the feed. */
.cta-band {
  /* Extra air above the CTAs so they don't crowd the terminal box.
     Uses padding, not margin: a margin here just collapses into the
     terminal's space-8 bottom margin (larger wins) and does nothing,
     so padding is what actually adds to the gap. 32px + 24px = 56px. */
  padding-top: var(--space-6);
  margin-bottom: var(--space-14);
}
.cta-band-inner {
  /* Two equal-width buttons, sized to whichever label is wider — no
     hardcoded width, so changing either label keeps the pair matched.
     inline-grid shrinks the row to content (left-aligned); the two 1fr
     tracks resolve to the widest item's width and apply it to both. */
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: var(--space-3);
}
.cta-band-btn {
  font-size: var(--text-lg);
  padding: 0.9rem 1.9rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: box-shadow 140ms ease, transform 140ms ease;
  white-space: nowrap;
}
.cta-band-btn:hover {
  box-shadow: 0 18px 44px -12px color-mix(in srgb, var(--accent) 72%, transparent);
  transform: translateY(-1px);
}
/* Secondary "Watch the intro" — same size/shape as the primary but the
   base outlined button chrome (transparent fill, rule border), so it
   reads as the quieter of the two actions. */
.cta-band-watch {
  font-size: var(--text-lg);
  padding: 0.9rem 1.9rem;
  border-radius: var(--radius-xl);
  white-space: nowrap;
}
.cta-band-play {
  /* Nudge the play triangle to sit optically centered against the label. */
  position: relative;
  top: 0.5px;
}
@media (max-width: 700px) {
  .cta-band { margin-bottom: var(--space-10); }
  .cta-band-inner {
    /* Stack full-width on mobile — single column, buttons fill it. */
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    width: 100%;
    gap: var(--space-3);
  }
  .cta-band-btn,
  .cta-band-watch { width: 100%; text-align: center; }
}