/* site\assets\css\pages\home.css: the home page's own layout (specs\home.md), placing and sizing its parts with the
   tokens of design\system.css; the components themselves are in components.css. Breakpoints: 1100, 900, 600. */

/* ---------- hero: the home header (kit rotate) ---------- */
.hero { position: relative; isolation: isolate; container-type: inline-size; display: grid; align-items: center; min-height: max(720px, min(calc(100svh - 96px), 880px)); overflow: hidden; background: var(--c-navy-deep); color: var(--c-paper); }
.hero__slides { position: absolute; inset: 0; z-index: 0; }
/* until the kit starts (and with no script) the first picture is simply there */
.hero:not(:has([data-kit-slide][data-kit-on])) .hero__slide:first-child { visibility: visible; z-index: 2; }

/* each slide: its clip, the shade behind the words (under the card, so the card stays white), its booking card */
.hero__clip { object-position: 50% 50%; }
/* a clip loads one slide ahead: only the slide on screen, the one leaving and the next one keep their clip in the
   layout (the kit loads a clip once it is near), so the five clips never all load at once */
.hero__slide:not(:first-child):not([data-kit-on]):not([data-prev]):not([data-kit-on] + .hero__slide) .hero__clip { display: none; }
.hero__slide--landscaping .hero__clip { object-position: 50% 60%; }
.hero__slide--deck .hero__clip { object-position: 60% 50%; }
.hero__slide--lawn .hero__clip { object-position: 50% 40%; }
.hero__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--c-shade) 0%, var(--c-shade) 34%, color-mix(in srgb, var(--c-navy-deep) 45%, transparent) 54%, transparent 70%); }

.hero__card { position: absolute; z-index: 1; left: 66%; top: 58%; display: flex; align-items: center; gap: 0.75rem; max-width: calc(34% - 24px); }
/* the card lands once its picture is half in (home.js sets data-card from the kit's --kit-in) and leaves with it */
.hero[data-cards] .hero__slide:not([data-card]) .hero__card { opacity: 0; transform: translateY(16px); transition: none; }
.hero[data-cards] .hero__slide[data-card] .hero__card { opacity: 1; transform: none; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }

.hero__stop { top: 24px; right: 24px; z-index: 4; }

/* the words: a left column from the wrap's left edge, centered in the hero's height */
.hero__content { position: relative; z-index: 3; padding-block: var(--space-4); }
.hero__title { max-width: 760px; font-size: min(var(--fs-display), 80px); line-height: 1; color: var(--c-paper); }
/* the field's own line (or lines): every field's word unseen in the same cell keeps the box at the longest's height.
   7.5em keeps "pool company." and "deck company." on one line and breaks the two longest fields in two, so the marker
   ends before the middle of the picture (clear of the landscaper on the lawn care slide) */
.hero__field { display: grid; justify-items: start; max-width: 7.5em; margin-top: 0.32em; }
.hero__field > * { grid-area: 1 / 1; }
.hero__sizer { visibility: hidden; }
.hero__sizer::before { content: attr(data-w); padding: 0 0.16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__sizer::after { content: "."; }
/* the marker wipes in from the left under each new word, and on out to the right before the next (home.js turns the
   kit's --kit-swap into --wipe-r while a word comes in and --wipe-l while it leaves); the word itself never moves */
.hero__now { clip-path: inset(-0.2em calc(var(--wipe-r, 0) * (100% + 0.4em) - 0.2em) -0.2em calc(var(--wipe-l, 0) * (100% + 0.4em) - 0.2em)); }
/* the line ends where the shade is still deep enough for its white text on the brightest frame */
.hero__lede { max-width: min(620px, calc(43cqw - max(var(--gutter), (100cqw - var(--max-w)) / 2))); margin: var(--space-4) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: color-mix(in srgb, var(--c-paper) 92%, transparent); }
.hero__lede b { font-weight: 700; }
.hero__gap { display: none; }
.hero__picker { width: 560px; max-width: 100%; margin-top: var(--space-5); }

@media (max-width: 1099px) {
  .hero { min-height: max(720px, min(calc(100svh - 80px), 880px)); }
  .hero__shade { background: linear-gradient(90deg, var(--c-shade) 0%, var(--c-shade) 38.86%, color-mix(in srgb, var(--c-navy-deep) 45%, transparent) 61.71%, transparent 80%); }
  .hero__title { max-width: 600px; font-size: min(var(--fs-display), 64px); }
  .hero__lede { max-width: min(600px, calc(49cqw - var(--gutter))); }
  .hero__picker { margin-top: var(--space-4); }
  .hero__card { left: 64%; max-width: calc(36% - 16px); }
}

/* the phone: the footage behind everything, the shade even and stronger; the card under the line, then the picker */
@media (max-width: 899px) {
  .hero { align-items: start; min-height: calc(100svh - 80px); }
  .hero .hero__slide .hero__clip { object-position: 50% 50%; }
  .hero__shade { background: linear-gradient(180deg, color-mix(in srgb, var(--c-navy-deep) 72%, transparent) 0, color-mix(in srgb, var(--c-navy-deep) 72%, transparent) calc(var(--card-top, 50%) - 2.5rem), color-mix(in srgb, var(--c-navy-deep) 58%, transparent) var(--card-top, 50%)); }
  .hero__content { padding-block: var(--space-4); }
  .hero__title { max-width: none; font-size: var(--fs-display); }
  .hero__lede { max-width: 38rem; margin-top: var(--space-3); }
  .hero__gap { display: block; height: var(--card-h, 5.25rem); margin-top: var(--space-4); }
  .hero__picker { width: 100%; max-width: 560px; margin-top: var(--space-4); }
  .hero__card { left: var(--gutter); top: var(--card-top, 50%); width: min(320px, 100% - 2 * var(--gutter)); max-width: none; }
  .hero__stop { top: 16px; right: 16px; }
  /* with no script to place it, the card stays out of the way */
  .hero:not([data-placed]) .hero__card { display: none; }
}
@media (max-width: 599px) {
  .hero { min-height: calc(100svh - 72px); }
  .hero__content { padding-block: var(--space-4) var(--space-3); }
  .hero__picker { padding: var(--space-3); }
}

/* ---------- plan, how, worth, outcomes, compare, who, faq, close: the components are in components.css; here only
   this page's crops and the scenes' own settings ---------- */
/* how: his hands and phone in the stage's left half, beside the drawn phone */
#how .how__clip { object-position: 30% 50%; }
/* outcomes: each clip's crop; row 4's clip mirrored so the hands sit left of center, clear of its scene */
#outcomes .outcome:nth-of-type(1) .outcome__clip { object-position: 60% 40%; }
#outcomes .outcome:nth-of-type(3) .outcome__clip { object-position: 60% 50%; }
#outcomes .outcome:nth-of-type(4) .outcome__clip { transform: scaleX(-1); border-radius: var(--radius-l) var(--d-x) var(--d-x) var(--radius-l) / var(--radius-l) 50% 50% var(--radius-l); } /* mirrored, its D lands round side left */
/* row 2: the "Booked" card's title over its line, as V2 shows it (the scene's own ".card>span" rule lays them side by
   side; reported to the director, the scene's file untouched) */
#outcomes [data-scene="out-answer"] .booked > span:last-child { display: block; }
/* row 3's stars in their real gold */
#outcomes [data-scene="out-reviews"] { --c-accent: var(--c-star); --c-accent-text: var(--c-star-text); }
/* close: the dusk pool a little below the middle */
#close .close__clip { object-position: 50% 55%; }

@media (prefers-reduced-motion: reduce) {
  .hero[data-cards] .hero__slide[data-card] .hero__card { transition: none; }
  /* the header rests on its first slide: no clip loads ahead until the visitor plays it */
  .hero__slide:not(:first-child):not([data-kit-on]):not([data-prev]) .hero__clip { display: none; }
}