/* Homepage video hero mockup (template-homepage-video.php).
   The hero itself is home.css; this adds the swapping headline (word by
   word) and the review chrome. */

.hv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* home.css's default hero photo; the homepage blanks it inline when the
   hero is a video. */
.fc-hv .hero.fc-has-bg-video::before { background-image: none; }

/* ============ HEADLINE SWAP ============ */
/* The h1 and the four swap copies share one grid cell, so the block is as
   tall as the tallest headline and nothing below moves as they swap. Each
   sits on the eyebrow (align end) rather than above a gap when shorter. */
.hv-headline {
  display: grid;
  align-items: end;
  margin-bottom: 24px;
}
.hv-hero .hero-inner > * { flex-shrink: 0; }
.hv-cue {
  grid-area: 1 / 1;
  opacity: 0;
}
.hv-cue.is-on { opacity: 1; }

.fc-home-template .hero .hv-headline .hv-cue { margin: 0; }
.fc-home-template .hero .hv-display {
  font-family: var(--font-display);
  font-size: 70px;
  font-weight: 300;
  line-height: 1em;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 720px;
}
.fc-home-template .hero .hv-display b {
  font-family: var(--font-accent);
  font-size: 66px;
  font-weight: 400;
  color: var(--green);
}
/* Lead and accent on their own lines: every headline keeps the h1's
   two-line shape. */
.hv-headline b { display: block; }

/* The cue area spans 85% of the frame rather than the 720px cap the hero
   h1 and the swap copies had, and wherever the frame can hold it the
   accent stays on one line ("A Walkable/Bikeable Eco-Community" is about
   1025px at 66px, 885px at the 57px that home.css uses up to 1024px). At
   1025 to 1199px the accent takes that 57px size so it still fits; under
   980px it wraps at the slash as before. The template's <wbr> after the
   slash still breaks under nowrap in Chrome, so it is dropped there too. */
.fc-home-template .hero .hv-headline .hv-cue { max-width: 85%; }
@media (min-width: 980px) {
  .fc-home-template .hero .hv-headline .hv-cue b { white-space: nowrap; }
  .fc-home-template .hero .hv-headline .hv-cue b wbr { display: none; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .fc-home-template .hero .hv-headline .hv-cue b { font-size: 57px; }
}

/* Word by word. Visibility lives on the words, not the headline, so the
   outgoing one can fade word by word too:
   - out: each word softens, fades and drifts on upward (the way it came
     in moving), 30ms apart, done in about 0.5s;
   - in:  each word sharpens up from below, 90ms apart, starting 0.35s in
     so it overlaps only the tail of the exit;
   - .is-enter (set by the JS for one frame) parks the incoming words
     below without a transition, since they last left upward. */
@media (prefers-reduced-motion: no-preference) {
  .hv-hero { --hv-ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
  /* Only once the JS has wrapped the words (.is-ready); until then the
     plain rule above keeps every headline but the h1 hidden. */
  .hv-hero.is-ready .hv-cue { opacity: 1; }
  .hv-w {
    display: inline-block;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-0.15em);
    transition:
      opacity 0.35s var(--hv-ease-out),
      filter 0.35s var(--hv-ease-out),
      transform 0.45s var(--hv-ease-out);
    transition-delay: calc(var(--i) * 30ms);
  }
  .hv-cue.is-enter .hv-w {
    filter: blur(10px);
    transform: translateY(0.2em);
    transition: none;
  }
  .hv-cue.is-on .hv-w {
    opacity: 1;
    filter: none;
    transform: none;
    transition:
      opacity 0.6s var(--hv-ease-out),
      filter 0.7s var(--hv-ease-out),
      transform 0.7s var(--hv-ease-out);
    transition-delay: calc(0.35s + var(--i) * 90ms);
  }
}

/* Reduced motion: same headlines, a short fade and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .hv-cue { transition: opacity 0.2s linear; }
}

.hv-hero .eyebrow { margin-bottom: 38px; }
/* The live homepage has no eyebrow: the headline takes its gap to the button. */
.hv-hero--no-eyebrow .hv-headline { margin-bottom: 38px; }

/* Eyebrow group: same stacking as the headline. When its line changes it
   uses the same word-by-word motion, starting after the headline's words
   so the two don't land at once. */
.hv-eyebrow {
  display: grid;
  align-items: start;
}
@media (prefers-reduced-motion: no-preference) {
  .hv-eyebrow .hv-cue.is-on .hv-w { transition-delay: calc(0.65s + var(--i) * 70ms); }
}

@media (max-width: 640px) {
  .fc-home-template .hero .hv-display { font-size: 50px; }
  .fc-home-template .hero .hv-display b { font-size: 47px; }
  .hv-headline { margin-bottom: 16px; }
  .hv-hero .eyebrow { margin-bottom: 24px; }
  .hv-hero--no-eyebrow .hv-headline { margin-bottom: 24px; }
}

/* ============ REVIEW NOTES ============ */
.hv-notes {
  background: #fff;
  padding: 120px 0 160px;
}
.hv-notes-inner {
  max-width: calc(var(--fc-frame-max) + 2 * var(--fc-frame-gutter));
  margin: 0 auto;
  padding: 0 var(--fc-frame-gutter);
  color: var(--ink);
}
.hv-notes .eyebrow {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--green);
  margin-bottom: 16px;
  font-weight: 500;
}
.hv-notes h2 { font-size: 44px; margin-bottom: 20px; max-width: 720px; }
.hv-notes h2 b { font-family: var(--font-accent); color: var(--green); font-weight: 400; }
.hv-notes h3 { font-size: 26px; margin: 56px 0 18px; }
.hv-lede { max-width: 640px; font-size: 17px; line-height: 1.6; color: #4c5246; }

.hv-timing { border-collapse: collapse; font-size: 15px; min-width: min(480px, 100%); }
.hv-timing th, .hv-timing td { text-align: left; padding: 10px 24px 10px 0; border-bottom: 1px solid var(--mist-dark); }
.hv-timing th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: #6b7064; }
.hv-timing td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

.hv-seo { padding-left: 20px; max-width: 760px; }
.hv-seo li { margin-bottom: 10px; font-size: 15px; line-height: 1.6; }
.hv-standin { margin-top: 40px; font-size: 13px; color: #6b7064; }

@media (max-width: 640px) {
  .hv-notes { padding: 64px 16px 160px; }
  .hv-notes h2 { font-size: 32px; }
}

/* ============ REVIEW BAR ============ */
.hv-bar {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: rgba(15, 24, 20, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.hv-bar-time {
  min-width: 44px;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.hv-bar-replay {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.hv-bar-replay:hover { background: rgba(255, 255, 255, 0.1); }
.hv-bar-replay:active { transform: scale(0.97); }
.hv-bar-replay:focus-visible { outline: 2px solid var(--green-light); outline-offset: 1px; }