/* Homepage: hero animation, product shot, three steps, feature rows.
   Loaded only by index.php, so nothing here can reach another page. */

/* ---- Hero product shot --------------------------------------------- */

/* Replaces the CSS-drawn document mock and fake dashboard that used to sit
   here - a drawing of the product rather than the product. No border: the
   render carries its own browser chrome and a second frame around it reads
   as a screenshot of a screenshot. */
.hero-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.12);
}

/* Wider than its column, bleeding right. The interface has to be legible to
   be worth showing, and at the column's own width it is not. Capped so it
   never reaches the viewport edge, and dropped entirely below 900px where
   the hero stacks and there is no column to escape. */
@media (min-width: 901px) {
  .hero-shot {
    width: calc(100% + 8vw);
    max-width: none;
  }
}

/* ---- Brand intro, near the foot of the page ------------------------ */

/* On the CTA's own dark ground, not the page's. The two were already flush -
   64px of air above, nothing below - so spacing was never what separated
   them: the surface changed underneath, and a light panel sitting on the
   seam reads as balanced on the edge rather than part of what follows.
   Carrying the dark up behind it makes the pair one closing block, and the
   light animation gains contrast it did not have on cream. */
.home-intro {
  background: var(--color-dark-bg);
  padding: var(--space-7) 0 0;
}
.home-intro-video {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.10);
  background: var(--color-surface);
}

/* An autoplaying loop is motion the reader did not ask for, but CSS cannot
   stop a media element playing - it can only restyle it. The pause is done
   in the page's reduced-motion script instead; what is left here is the
   poster sizing, so the still it falls back to fills the same box and the
   layout does not move. */
.home-intro-video[data-motion="paused"] {
  object-fit: cover;
}

/* ---- Three steps --------------------------------------------------- */

.home-step-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  counter-reset: home-step;
}
.home-step { counter-increment: home-step; }
.home-step img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
/* The number comes from the counter rather than the markup: the steps are
   an ordered list, so their order is already stated once and does not need
   restating in a way that can drift from it. */
.home-step h3::before {
  content: counter(home-step, decimal-leading-zero);
  display: inline-block;
  margin-right: var(--space-2);
  font-family: var(--font-mono, monospace);
  font-size: 0.8em;
  color: var(--color-primary);
}
.home-step h3 { margin: 0 0 var(--space-2); }
.home-step p { margin: 0; color: var(--color-text-muted); }

/* ---- Blueprint divider --------------------------------------------- */

.home-divider {
  overflow: hidden;
  line-height: 0;
}
.home-divider img {
  display: block;
  width: 100%;
  min-width: 900px;
  height: auto;
}

/* ---- Feature rows -------------------------------------------------- */

.home-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-8);
}
.home-feature:last-child { margin-bottom: 0; }

/* Alternating sides. Ordering by grid-column rather than flex-direction
   keeps the text first in the DOM on every row, so the reading order and
   the tab order stay the same whichever side the picture is on. */
.home-feature.is-reversed .home-feature-text { grid-column: 2; grid-row: 1; }
.home-feature.is-reversed .home-feature-img  { grid-column: 1; grid-row: 1; }

.home-feature-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--color-border);
}
.home-feature-text h3 { margin: 0 0 var(--space-3); }
.home-feature-text p { color: var(--color-text-muted); }

.home-feature-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.home-feature-list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-text);
}
.home-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ---- Narrow screens ------------------------------------------------ */

@media (max-width: 900px) {
  .home-step-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .home-feature {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-7);
  }
  /* The alternating layout collapses: on one column the picture always
     follows the text it belongs to, whichever side it took on desktop. */
  .home-feature.is-reversed .home-feature-text,
  .home-feature.is-reversed .home-feature-img {
    grid-column: 1;
    grid-row: auto;
  }
  .home-intro { padding-top: var(--space-6); }
  /* Full-bleed at the edges would crop the browser chrome in the mockup. */
  .home-divider img { min-width: 700px; }
}

/* ---- Project Assistant feature -------------------------------------
   The one section built on the product's own dark surface rather than
   the page's cream one, since it is showing what already lives inside a
   project. --accent-word and .card-icon are tuned for light backgrounds
   elsewhere on the page, so both get a dark-safe override scoped to this
   section rather than changed globally. */

.section-dark .accent-word { color: var(--color-accent); }
.section-dark .card-icon {
  background: rgba(225, 128, 0, 0.18);
  color: var(--color-accent);
}

.assistant-layout {
  max-width: 760px;
  margin: 0 auto var(--space-7);
}

.assistant-mock {
  background: rgba(252, 251, 248, 0.04);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
}
.assistant-mock-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-dark-border);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-dark-text);
}
.assistant-mock-bar svg { color: var(--color-dark-text-faint); }
.assistant-mock-sub {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-dark-text-muted);
}
.assistant-mock-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}
.assistant-mock-msg {
  max-width: 84%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}
.assistant-mock-msg--ai {
  align-self: flex-start;
  background: rgba(252, 251, 248, 0.07);
  color: var(--color-dark-text);
  border-bottom-left-radius: 4px;
}
.assistant-mock-msg--user {
  align-self: flex-end;
  background: rgba(225, 128, 0, 0.16);
  color: var(--color-dark-text);
  border-bottom-right-radius: 4px;
}
.assistant-mock-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-dark-border);
  font-size: var(--font-size-xs);
  color: var(--color-dark-text-faint);
}
.assistant-mock-action .btn { flex-shrink: 0; }
.assistant-mock-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-dark-text-faint);
}

/* Reveal is opt-in: default state is fully visible, so no-JS and
   reduced-motion visitors just see the finished conversation. */
.assistant-mock.js-reveal .assistant-mock-msg {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms ease;
}
.assistant-mock.js-reveal.is-visible .assistant-mock-msg { opacity: 1; transform: none; }
.assistant-mock.js-reveal.is-visible .assistant-mock-msg:nth-child(1) { transition-delay: 80ms; }
.assistant-mock.js-reveal.is-visible .assistant-mock-msg:nth-child(2) { transition-delay: 340ms; }
.assistant-mock.js-reveal.is-visible .assistant-mock-msg:nth-child(3) { transition-delay: 600ms; }

@media (max-width: 640px) {
  .assistant-mock { padding: var(--space-4); }
  .assistant-mock-msg { max-width: 94%; }
  .assistant-mock-input span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}