/* home.css: the home page's own placements, with the tokens of system.css. The components are in components.css. */

/* ---------- the header: full-bleed footage, one field at a time (kit rotate) ---------- */
.hero { --edge: clamp(16px, 4.5vw, 88px); --col: min(580px, 41vw); position: relative; height: calc(100svh - var(--header-h)); min-height: 640px; max-height: 900px; overflow: hidden; background: var(--c-brand-dark); color: var(--c-on-brand); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: 0; }

/* the kit's gentle change (kit.md), as it is */
[data-kit-scene="rotate"] [data-kit-slide] { position: absolute; inset: 0; margin: 0; visibility: hidden; overflow: hidden; }
[data-kit-scene="rotate"] [data-kit-slide][data-kit-on] { visibility: visible; z-index: 2; opacity: var(--kit-move, 1); transform: translateX(calc((1 - var(--kit-move, 1)) * 4%)); }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-prev])) [data-kit-slide][data-kit-on] { transform: none; opacity: 1; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { visibility: visible; z-index: 1; }
[data-kit-scene="rotate"] [data-kit-slide] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* each clip a little larger, anchored left, so every face sits right of the words; the roofers are mirrored */
.hero .hero__video { transform-origin: 0 50%; transform: scale(1.12); }
.hero .hero__slide--mirror .hero__video { transform: translateX(112%) scale(-1.12, 1.12); }

/* the shade lives in each slide, between its clip and its card, so the card stays crisp white */
.hero__shade { display: none; }
.hero__slide::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(90deg, rgba(var(--c-shade), 0.93) 0%, rgba(var(--c-shade), 0.86) calc(var(--edge) + var(--col) * 0.75), rgba(var(--c-shade), 0.4) calc(var(--edge) + var(--col) + 6vw), rgba(var(--c-shade), 0) calc(var(--edge) + var(--col) + 18vw)),
  linear-gradient(0deg, rgba(var(--c-shade), 0.4) 0%, rgba(var(--c-shade), 0) 28%); }

.hero__pop { position: absolute; z-index: 3; right: var(--edge); bottom: 15%; opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 16px)); }
/* the leaving card goes at once, so two cards never overlap; the new one comes as its picture settles (the kit) */
.hero [data-kit-slide][data-prev] .hero__pop { opacity: 0; transition: opacity 0.2s ease-out; }

.hero__in { position: relative; z-index: 4; height: 100%; display: flex; align-items: center; padding-inline: var(--edge); box-sizing: border-box; pointer-events: none; }
.hero__copy { width: var(--col); pointer-events: auto; }
.hero__title { font-size: clamp(2.375rem, 3.7vw, 3.55rem); line-height: 1.02; color: var(--c-on-brand); }
.hero__line { display: block; }
.hero__word { color: var(--c-accent-on-dark); white-space: nowrap; opacity: calc((1 - var(--kit-swap, 0) * 0.8) * var(--hero-word, 1)); transform: translateY(calc(var(--kit-swap, 0) * 0.14em)); }
.hero__lead { margin: 22px 0 28px; max-width: 540px; font-size: 1.1875rem; line-height: 1.55; color: var(--c-ink-on-dark); }
.hero__picker { max-width: 520px; }
.hero__stop { top: auto; bottom: 22px; right: var(--edge); }

@media (max-width: 899px) {
  .hero { --media-h: clamp(210px, 54vw, 360px); height: auto; min-height: 0; max-height: none; }
  .hero__media { position: relative; inset: auto; height: var(--media-h); }
  .hero .hero__video { transform: none; transform-origin: 50% 50%; object-position: 64% 35%; }
  .hero .hero__slide--mirror .hero__video { transform: scaleX(-1); object-position: 30% 35%; }
  .hero__slide::after { background: linear-gradient(0deg, rgba(var(--c-shade), 0.85) 0%, rgba(var(--c-shade), 0) 45%); }
  .hero__pop { right: 12px; bottom: 12px; padding: 9px 12px 9px 9px; gap: 10px; }
  .hero__pop .pop__icon { width: 34px; height: 34px; padding: 7px; }
  .hero__pop b { font-size: 0.9375rem; }
  .hero__pop span { font-size: 0.8125rem; }
  .hero__in { height: auto; display: block; padding: 22px var(--gutter) 32px; }
  .hero__copy { width: auto; }
  .hero__title { font-size: clamp(2rem, 8.4vw, 2.75rem); }
  .hero__lead { margin: 14px 0 20px; font-size: 1.0625rem; }
  .hero__picker { max-width: none; padding: 18px; }
  .hero__stop { top: 12px; bottom: auto; left: 12px; right: auto; }
}

/* ---------- the services rows: where each clip is cropped ---------- */
#svc-found .frame__video { object-position: 0% 50%; }
#svc-answer .frame__video { object-position: 35% 50%; }
#svc-work .frame__video { object-position: 50% 30%; }
/* the comparison: the owner on the phone shown with his whole face */
#compare .cmp__photo--mirror { object-position: 50% 6%; }
/* phone: the search card on top, so the hands and the phone show under it */
@media (max-width: 860px) {
  #svc-found .svc-row__scene { top: 12px; bottom: auto; }
}