/* The Home hero (card 1b): board HeroF.dc.html, approved as designed (decision 81: "That's perfect how it is.").
   Desktop (1000 px and up) is the board, measured element by element at 1280 x 900: the left column 588 px from the gutter,
   the window to its right from 24 px under the bar to 78 px above the bottom, the caption and the choice cards on the bottom
   line 40 px up. Where the board's number is not a shell token (14 px, the window's 40 px tab strip) the board's number is
   used and named. Below 1000 px everything stacks in the card's phone order (UNCONFIRMED: his to judge on his phone).
   Entrance: the board's play() steps as transition delays from the moment the script adds .is-in (home-hero.js). */

/* ---------- the ground and the grid ---------- */
.hero-f {
  position: relative;
  display: flex; flex-direction: column;
  min-height: calc(min(100vh, 1000px) + 8px);
  min-height: calc(min(100svh, 1000px) + 8px);   /* the board is one screen, 900 tall; a very tall screen stops at 1000 */
  background: var(--ground); color: var(--ink);
  overflow: hidden;
  overflow: clip;   /* the cards come in from 90 px to the right: never a sideways scroll while they travel */
}
/* The ground starts 8 px above the page top. The shell's desktop bar was 68 px tall (Chromium; 67.5 in WebKit) against a 66 px
   --bar-h, so .under-bar alone left a 2 px strip of navy above the grey. Card 1i centred Get a quote in the bar (.bar-cta
   align-self: center), so the bar now measures about 66.4 px against the unchanged 66 px --bar-h; the extra 8 px stays as a guard
   for a bar made taller by enlarged text, so the ground always reaches the top; the content still sits 24 px under the bar. */
.hero-f.under-bar { margin-top: calc(-1 * var(--bar-space) - 8px); padding-top: calc(var(--bar-space) + 8px); }
.hero-f-grid {
  flex: 1 1 auto;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  padding-block: var(--space-5) var(--space-7);
}
@media (min-width: 1000px) {
  .hero-f-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "intro show" "title show" "offer show" ". show" "choose show";
    align-content: stretch;
    column-gap: var(--space-5);
    padding-block: var(--space-5) var(--gutter);   /* 24 px under the bar; 40 px from the bottom at 1280 and up, as the board */
  }
  .hero-f-intro { grid-area: intro; }
  .hero-f-title { grid-area: title; }
  .hero-f-offer { grid-area: offer; }
  .hero-f-show { grid-area: show; }
  .hero-f-choose { grid-area: choose; }
}
@media (min-width: 1280px) {
  .hero-f-grid { grid-template-columns: 588px minmax(0, 1fr); }   /* the board's left column; the window takes the rest */
}

/* ---------- "Hi, I'm Parham." ---------- */
.hero-f-intro { display: flex; align-items: center; gap: 14px; }   /* the board's 14 px */
.hero-f-avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; object-position: 50% 30%; background: var(--ink);
}
.hero-f-hello { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: normal; }
.hero-f-hi { font-size: var(--fs-6); font-weight: 600; }
.hero-f-soon { font-size: var(--fs-8); font-weight: 500; color: var(--slate); }

/* ---------- the line: four short lines, each rising out of its own mask ---------- */
.hero-f-title { margin-top: var(--space-6); margin-left: 0; color: var(--ink); }   /* the board sets the h1 flush with the gutter */
.hero-f-line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero-f-line > span { display: block; overflow-wrap: break-word; transform-origin: 0% 100%; }   /* no nowrap: at the default sizes every line fits on one line (hero.mjs 3); with enlarged text a line wraps inside its mask (and a word wider than the mask breaks) instead of being cut off */
.hero-f-offer { margin-top: var(--space-5); font-size: var(--fs-5); line-height: 1.4; font-weight: 500; color: var(--slate); }

/* ---------- the window: Hollowbrook scrolling itself ---------- */
.hero-f-show { margin: var(--space-6) 0 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.hero-f-window {
  position: relative; aspect-ratio: 16 / 10;
  border-radius: var(--r-card); overflow: hidden; isolation: isolate;
  background: var(--paper); transform-origin: 50% 100%;
}
@media (min-width: 1000px) {
  .hero-f-show { margin-top: 0; }
  .hero-f-window { flex: 1 1 0; aspect-ratio: auto; min-height: 0; }   /* from 24 px under the bar down to the caption */
}
.hero-f-tab {   /* the board's 40 px strip: no browser dots, only the tab's label */
  position: absolute; inset: 0 0 auto; z-index: 1; min-height: 40px;   /* 40 px at the default text size; enlarged text (200%) makes it taller over the picture instead of cutting the label (card 1i, 1b's note) */
  display: flex; align-items: center; justify-content: center; padding: 6px var(--space-4);
  background: var(--graphite);
}
.hero-f-pill {
  padding: 4px 14px; border-radius: var(--r-pill); background: var(--slate); color: var(--blueprint);
  font-size: var(--fs-9); font-weight: 500; line-height: normal; text-align: center;   /* one line at the default sizes (hero.mjs); wraps only when the text is enlarged */
}
.hero-f-view { position: absolute; inset: 40px 0 0; overflow: hidden; }
.hero-f-shot {
  position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: auto;
  transform: translateY(0); transition: transform 1500ms var(--ease-draw);
}
.hero-f-window.is-empty .hero-f-shot { display: none; }   /* a missing picture: the window keeps its size, no broken-image icon */
.hero-f-caption {
  margin-top: 14px;   /* the board: the window ends 78 px up, the caption line 40 px up */
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  column-gap: var(--space-4); row-gap: var(--space-1); line-height: normal;
}
.hero-f-could { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 600; letter-spacing: -0.01em; }

/* the two plain links (Take a look, Not sure?): the board's underlined words, with a 44 px tap height that does not move them */
.hero-f-link {
  display: inline-block; padding: 12.5px 6px; margin: -12.5px -6px;
  font-size: var(--fs-7); font-weight: 600; line-height: normal; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: auto; text-underline-offset: 4px;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  .hero-f-link:hover { text-decoration-thickness: 2px; }
}
.hero-f-link:active { text-decoration-thickness: 2px; }
.hero-f-link:focus-visible { outline-offset: -3px; }   /* the ring sits inside the tap box (6 px of side padding keep it off the letters): the shell's 3 px offset ran it into the window's bottom edge above Take a look */

/* ---------- "Which one are you?" and the two sightline cards (the card itself is the shell's .sightline-card) ---------- */
.hero-f-choose { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 1000px) { .hero-f-choose { margin-top: var(--space-6); } }
.hero-f-ask {
  margin-bottom: var(--space-1);
  font-family: var(--font-display); font-size: var(--fs-4); font-weight: 600; letter-spacing: -0.01em; line-height: normal;
}
.hero-f-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.hero-f-cards li { display: block; }
.hero-f-cards :is(.sightline-card-title, .sightline-card-line) { text-wrap: pretty; }   /* no one-word last line ("job.") where they wrap */
.hero-f-notsure { align-self: flex-start; margin-top: calc(var(--space-1) - 12.5px); }
/* phone (UNCONFIRMED): the card's line one step under its title, the board's proportion (26 to 21); at 22 it matched the 22.6 px title */
@media (max-width: 759.98px) {
  .hero-f-cards .sightline-card-line { font-size: var(--fs-6); }
}

/* ---------- the entrance (decision 81): the board's steps, as delays from .is-in ----------
   150 ms "I've worked / the sites." (+110 ms for the second line) and "Hi, I'm Parham."; 480 ms the window and its caption;
   820 ms "Now I build / their websites."; 1300 ms the offer line and "Which one are you?"; 1450 and 1600 ms the cards from the
   right; 1850 ms "Not sure?". Under reduced motion none of this applies: the hero is in its final state from the start. */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-f:not(.is-in) :is(.hero-f-intro, .hero-f-caption, .hero-f-offer, .hero-f-ask, .hero-f-notsure) { opacity: 0; }
  html.js .hero-f:not(.is-in) .hero-f-line > span { transform: translateY(115%) rotate(6deg); }
  html.js .hero-f:not(.is-in) .hero-f-window { opacity: 0; transform: translateY(18px) scale(0.97); }
  html.js .hero-f:not(.is-in) .hero-f-cards .sightline-card { opacity: 0; transform: translateX(90px); }

  .hero-f.is-in .hero-f-intro { transition: opacity 600ms ease 150ms; }
  .hero-f.is-in .hero-f-line > span { transition: transform 1100ms var(--ease-soft) 150ms; }
  .hero-f.is-in .hero-f-line:nth-child(2) > span { transition-delay: 260ms; }
  .hero-f.is-in .hero-f-line:nth-child(3) > span { transition-delay: 820ms; }
  .hero-f.is-in .hero-f-line:nth-child(4) > span { transition-delay: 930ms; }
  .hero-f.is-in .hero-f-window { transition: opacity 1100ms ease 480ms, transform 1500ms var(--ease-soft) 480ms; }
  .hero-f.is-in .hero-f-caption { transition: opacity 700ms ease 480ms; }
  .hero-f.is-in :is(.hero-f-offer, .hero-f-ask) { transition: opacity 700ms ease 1300ms; }
  .hero-f.is-in .hero-f-cards li:nth-child(1) .sightline-card { transition: opacity 600ms ease 1450ms, transform 900ms var(--ease-soft) 1450ms; }
  .hero-f.is-in .hero-f-cards li:nth-child(2) .sightline-card { transition: opacity 600ms ease 1600ms, transform 900ms var(--ease-soft) 1600ms; }
  .hero-f.is-in .hero-f-notsure { transition: opacity 600ms ease 1850ms; }
  /* the script came late (a slow connection): show the final state at once, no entrance (!important: it must beat the
     more specific per-step rules above, e.g. the cards' li:nth-child ones) */
  .hero-f.is-late :is(.hero-f-intro, .hero-f-caption, .hero-f-offer, .hero-f-ask, .hero-f-notsure, .hero-f-line > span, .hero-f-window, .hero-f-cards .sightline-card) { transition: none !important; }
  /* the script never came: after 4 s everything shows anyway (home-hero.js adds .is-armed as soon as it runs, which cancels this) */
  html.js .hero-f:not(.is-in):not(.is-armed) :is(.hero-f-intro, .hero-f-caption, .hero-f-offer, .hero-f-ask, .hero-f-notsure, .hero-f-line > span, .hero-f-window, .hero-f-cards .sightline-card) {
    animation: hero-f-failsafe 1ms linear 4s forwards;
  }
}
@keyframes hero-f-failsafe { to { opacity: 1; transform: none; } }