/* ============================================================
   זריז שליחויות · home.css (עמוד הבית בלבד)
   הסרט, תמונות הסרט הסטטיות, הדף שמחליק מעל הסרט, הקופסה בתלת-ממד,
   ערימת השירותים, השורה הרצה, שיחת הוואטסאפ, המשפט, האזורים.
   נטען אחרי site.css.
   ============================================================ */
/* ============================================================
   מסך הפתיחה: הסרט
   ============================================================ */
.film-track { position: relative; }
.film {
  position: relative; block-size: 100svh; min-block-size: 34rem;
  overflow: clip; contain: paint; background: var(--ink-900);
}
html.fx .film { position: sticky; top: 0; min-block-size: 0; }
html.fx .film-track { --zone: 220svh; block-size: calc(var(--zone) + 200svh); }
@media (max-width: 820px) { html.fx .film-track { --zone: 160svh; } }
html.fx[data-fx="1"] .film-track { --zone: 140svh; }

.film__media { position: absolute; inset: 0; transform-origin: 30% 55%; }
.film__cam { position: absolute; inset: 0; transform-origin: 30% 55%; }
/* the intro zoom starts from CSS, so the first paint already matches the first animation frame */
html.fx:not(.hero-ready) .film__media { transform: scale(1.12); }
html.fx:not(.hero-ready) .film__veil { opacity: .22; }
.film__media picture { display: contents; }
.film__poster, .film__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; }
.film__poster { object-fit: cover; object-position: 30% 50%; }
.film__canvas { opacity: 0; }
.film[data-ready] .film__canvas { opacity: 1; }
.film[data-ready] .film__poster { visibility: hidden; }
.film__veil { position: absolute; inset: 0; background: var(--ink-900); opacity: 0; pointer-events: none; }
.film__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(var(--ink-rgb) / .72) 0, rgb(var(--ink-rgb) / 0) 18%),
    linear-gradient(to top, var(--ink-900) 0%, rgb(var(--ink-rgb) / 0) 22%),
    linear-gradient(to left, rgb(var(--ink-rgb) / .88) 0%, rgb(var(--ink-rgb) / .62) 36%, rgb(var(--ink-rgb) / 0) 68%);
}
.film__dim { position: absolute; inset: 0; background: var(--ink-950); opacity: 0; pointer-events: none; }

.film__ui {
  position: relative; z-index: 2; block-size: 100%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-content: end;
  padding-block: calc(var(--header-h) + var(--sp-6)) max(13svh, 4.5rem);
}
.film__copy, .film__caps, .film__end { grid-row: 1; grid-column: 1 / span 7; }
@media (min-width: 69rem) { .film__caps, .film__end { grid-column: 1 / span 6; } }
@media (min-width: 48rem) and (orientation: landscape) { .film__title .h1-line { white-space: nowrap; } }
.film__copy { align-self: end; }
.film__eyebrow { color: var(--fg-2); margin-block-end: var(--space-in); }
.film__title .h1-line { display: block; }
.film__sub { margin-block-start: var(--space-in); color: var(--fg-2); max-inline-size: 30em; }
.film__copy .cta-row { margin-block-start: var(--space-group); }

.film__caps, .film__end, .film__rail { display: none; }
html.fx .film__caps { display: block; list-style: none; position: relative; align-self: center; block-size: 0; }
html.fx .film__cap { position: absolute; inset-inline: 0; top: 0; transform: translateY(-50%); visibility: hidden; max-inline-size: 16em; text-wrap: balance; }
.cap-l { display: block; }
.film__end-title, .belief { text-wrap: balance; }
html.fx .film__end { display: block; align-self: end; visibility: hidden; opacity: 0; }
.film__end .cta-row { margin-block-start: var(--space-group); }
html.fx .film__rail {
  display: block; position: absolute; inset-inline: 0; bottom: max(5svh, 1.5rem);
  block-size: 1px; background: var(--line-hover);
}
.film__rail-fill {
  position: absolute; inset-inline: 0; top: -.5px; block-size: 2px;
  background: var(--lime-500); transform: scaleX(0);
  transform-origin: calc(50% - 50% * var(--dir)) 50%;
}

/* טלפון ומסך לאורך: הרוכב בחצי התחתון, הטקסט למעלה */
@media (orientation: portrait) {
  .film__poster { object-position: 55% 60%; }
  .film__media { transform-origin: 40% 70%; }
  .film__scrim {
    background:
      linear-gradient(to top, var(--ink-900) 0%, rgb(var(--ink-rgb) / 0) 16%),
      linear-gradient(to bottom, rgb(var(--ink-rgb) / .9) 0%, rgb(var(--ink-rgb) / .74) 40%, rgb(var(--ink-rgb) / 0) 70%);
  }
  .film__ui { align-content: start; padding-block: calc(var(--header-h) + var(--sp-5)) max(9svh, 4rem); }
  .film__copy, .film__caps, .film__end { grid-column: 1 / -1; align-self: start; }
  html.fx .film__caps { align-self: start; block-size: auto; min-block-size: 8em; }
  html.fx .film__cap { transform: none; }
  html.fx .film__end { align-self: start; }   /* in the dark sky, never over the rider */
  html.fx .film__end .btn--ghost { background: rgb(var(--ink-rgb) / .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* low landscape screens (phone on its side, short desktop windows): everything fits in one screen */
@media (max-height: 34rem) and (orientation: landscape) {
  :root { --fs-display: clamp(2rem, 1rem + 6svh, 3.25rem); }
  .film__ui { padding-block: calc(var(--header-h) + var(--sp-2)) max(4svh, 1.75rem); }
  .film__eyebrow { display: none; }
  .film__copy .cta-row { margin-block-start: var(--sp-4); }
  .film__sub { margin-block-start: var(--sp-2); }
}
@media (max-height: 26rem) and (orientation: landscape) { .film__sub { display: none; } }

/* גרסה סטטית: שלוש תמונות מהנסיעה */
.film-stills {
  display: grid; gap: var(--space-group);
  padding-block: var(--space-block);
}
.still { margin: 0; }
.still img { inline-size: 100%; border-radius: var(--r-lg); }
.still figcaption { margin-block-start: var(--space-in); }
@media (min-width: 48rem) and (orientation: landscape) { .film-stills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.fx .film-stills { display: none; }

/* הדף שמחליק מעל הסרט */
.sheet {
  z-index: 10;
  border-start-start-radius: var(--r-xl); border-start-end-radius: var(--r-xl);
  box-shadow: inset 0 1px 0 var(--line-hover), 0 -40px 80px -30px rgb(8 10 12 / .85);
}
html.fx .sheet { margin-block-start: -100svh; }

/* ---------- הקופסה בתלת-ממד: פותחת את השירותים ---------- */
.sheet { padding-block-start: var(--space-block); }
.box3d__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-group); align-items: center; }
.box3d__head { grid-column: 1 / -1; margin-block-end: 0; }
.box3d__stage { grid-column: 1 / -1; position: relative; justify-self: center; inline-size: min(100%, 52svh); aspect-ratio: 1; }
.box3d__fallback, .box3d__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; }
.box3d__fallback { object-fit: cover; border-radius: var(--r-xl); }
.box3d__canvas { opacity: 0; transition: opacity var(--dur-panel) var(--ease-out); }
.box3d[data-ready] .box3d__canvas { opacity: 1; }
.box3d[data-ready] .box3d__fallback { visibility: hidden; }
.box3d__index { list-style: none; display: grid; gap: var(--sp-2); margin-block-start: var(--space-in); font-weight: var(--fw-bold); }
.box3d__index li { display: flex; align-items: baseline; gap: var(--sp-3); }
.box3d__num { font-size: var(--fs-small); color: var(--lime-500); font-variant-numeric: tabular-nums; }
html.fx .box3d[data-on] .box3d__index li { opacity: .3; transform: translateX(calc(8px * var(--dir))); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
html.fx .box3d[data-on] .box3d__index li.is-on { opacity: 1; transform: none; }
html.fx .box3d[data-on] { block-size: 160svh; }
html.fx .box3d[data-on] .box3d__pin { position: sticky; top: var(--header-h); min-block-size: calc(100svh - var(--header-h)); display: grid; align-items: center; }
@media (min-width: 48rem) {
  .box3d__head { grid-column: 1 / span 5; }
  .box3d__stage { grid-column: 6 / -1; inline-size: 100%; max-block-size: 70svh; aspect-ratio: 4 / 3; }
  .box3d__fallback { object-fit: contain; }
}
@media (max-width: 47.99rem) {
  html.fx .box3d[data-on] { block-size: 150svh; }
  .box3d__stage { inline-size: min(100%, 42svh); }
  .box3d__index { grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-small); }
  .box3d__index li { flex-direction: column; gap: 0; }
}

/* ---------- שירותים: ערימה דביקה ---------- */
.stack { list-style: none; counter-reset: svc; margin-block-start: var(--space-block); }
.stack__card {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4) + var(--i) * 12px);
  block-size: min(70svh, 600px);
  margin-block-end: 6svh;
  counter-increment: svc;
}
.stack__card:last-child { margin-block-end: 0; }
.stack__in {
  position: relative; block-size: 100%; overflow: hidden;
  border-radius: var(--r-lg); background: var(--ink-850);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2);
  transform-origin: 50% 0;
  display: grid;
}
.stack__media { position: relative; overflow: hidden; }
.stack__media img { inline-size: 100%; block-size: 100%; object-fit: cover; max-inline-size: none; filter: saturate(.85) brightness(.92); }
/* one grade for the whole set: a cool ink wash over every service photo */
.stack__media::after { content: ""; position: absolute; inset: 0; background: rgb(var(--ink-rgb) / .2); mix-blend-mode: multiply; pointer-events: none; }
.stack__body { position: relative; z-index: 1; display: grid; align-content: space-between; justify-items: start; gap: var(--space-in); }
.stack__title::before {
  content: "0" counter(svc); display: block; margin-block-end: var(--space-in);
  font-size: var(--fs-display); font-weight: var(--fw-black); line-height: 1; letter-spacing: var(--ls-display);
  color: transparent; -webkit-text-stroke: 1px var(--line-control);
  font-variant-numeric: tabular-nums;
}
.stack__foot { display: grid; justify-items: start; gap: var(--space-in); }
.stack__foot p { color: var(--fg-2); max-inline-size: 26em; }
.stack__shade { position: absolute; inset: 0; z-index: 2; background: var(--ink-900); opacity: 0; pointer-events: none; }

@media (max-width: 47.99rem) {
  .stack__card { block-size: 64svh; min-block-size: 28rem; margin-block-end: 6svh; }
  .stack__in > * { grid-area: 1 / 1; }
  .stack__media { position: absolute; inset: 0; }
  .stack__body {
    padding: var(--sp-5);
    background:
      linear-gradient(to bottom, rgb(var(--ink-rgb) / .6) 0%, rgb(var(--ink-rgb) / 0) 28%),
      linear-gradient(to top, rgb(var(--ink-rgb) / .94) 0%, rgb(var(--ink-rgb) / .78) 34%, rgb(var(--ink-rgb) / 0) 62%);
  }
  .stack__title::before { font-size: var(--fs-h2); -webkit-text-stroke: 1px rgb(var(--paper-rgb) / .7); }
  .stack__foot p { color: var(--fg-1); }
}
@media (min-width: 48rem) {
  .stack__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: var(--inset); }
  .stack__media { grid-row: 1; grid-column: 6 / -1; border-radius: var(--r-inner); }
  .stack__body { grid-row: 1; grid-column: 1 / span 5; padding: var(--sp-6); }
}
html.no-fx .stack__card { position: relative; top: auto; margin-block-end: var(--space-group); }

/* ---------- השורה הרצה (קישוט אחד בעמוד) ---------- */
.ticker { overflow: clip; contain: paint; background: var(--ink-900); padding-block: var(--space-block) var(--space-group); }
.ticker__track { display: flex; inline-size: max-content; }
.ticker__group {
  display: flex; align-items: center; gap: .3em; padding-inline-end: .3em; flex: none;
  font-size: calc(var(--fs-ornament) * .5); font-weight: var(--fw-black); line-height: 1;
  letter-spacing: -0.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px var(--ink-600);
}
.ticker__plane { inline-size: .38em; block-size: .38em; color: var(--lime-500); opacity: .7; flex: none; }
@supports not (-webkit-text-stroke: 1px black) { .ticker__group { color: var(--ink-700); } }

/* ---------- איך זה עובד: שיחת וואטסאפ אחת ---------- */
.thread { position: relative; padding-block: var(--space-section); }
.thread__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-group); align-items: center; }
.thread__head { grid-column: 1 / -1; display: grid; gap: var(--space-in); align-content: start; }
.thread__head h2 { max-inline-size: 12em; }
.notes { list-style: none; display: grid; gap: var(--space-in); margin-block-start: var(--space-in); }
.note { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.note__check { inline-size: var(--icon-md); block-size: var(--icon-md); color: var(--lime-500); margin-block-start: .2em; }
.note__title { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-body); }
.note p { color: var(--fg-2); }

.phone { grid-column: 1 / -1; justify-self: center; inline-size: min(100%, 24rem); }
.phone__screen {
  position: relative; display: flex; flex-direction: column;
  border-radius: 2.25rem; background: var(--ink-900); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-hover), 0 0 0 8px var(--ink-800), 0 0 0 9px var(--line), var(--shadow-2);
}
.phone__bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--ink-850); box-shadow: 0 1px 0 var(--line); }
.phone__mark { inline-size: 32px; block-size: 32px; color: var(--lime-500); flex: none; }
.phone__who { display: grid; line-height: 1.25; }
.phone__name { font-weight: var(--fw-bold); }
.phone__state { font-size: var(--fs-small); color: var(--fg-3); }
.chat-log { list-style: none; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4); }
.msg {
  position: relative; max-inline-size: 82%; padding: .6rem .9rem; border-radius: 1.1rem;
  font-size: var(--fs-small); line-height: var(--lh-small);
}
.msg--him { align-self: flex-start; background: var(--ink-800); color: var(--fg-1); border-start-start-radius: .3rem; }
.msg--me { align-self: flex-end; background: rgb(var(--lime-rgb) / .16); color: var(--fg-1); border-start-end-radius: .3rem; padding-inline-end: 2.4rem; }
.msg__ticks { position: absolute; inset-inline-end: .7rem; bottom: .55rem; inline-size: 1.1rem; block-size: .75rem; color: var(--lime-500); }
.msg--photo { padding: .3rem; display: grid; gap: .35rem; inline-size: 70%; }
.msg--photo img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; border-radius: .85rem; }
.msg--photo span { padding: 0 .55rem .3rem; }
.msg--typing { display: none; }

/* motion: the phone stays, the messages arrive with scroll */
html.fx .thread { padding-block: 0; block-size: 240svh; }
html.fx .thread__pin { position: sticky; top: var(--header-h); block-size: calc(100svh - var(--header-h)); display: grid; align-items: center; padding-block: var(--sp-5); }
html.fx .phone__screen { block-size: min(calc(100svh - var(--header-h) - 3rem), 40rem); }
html.fx .chat-log { flex: 1; min-block-size: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.5rem); mask-image: linear-gradient(to bottom, transparent 0, #000 2.5rem); }
html.fx .msg:not(.is-in) { display: none; }
html.fx .msg.is-in { animation: msg-in 380ms var(--ease-out) both; }
html.fx .msg--me.is-in { transform-origin: 0 100%; }
html.fx .msg--him.is-in { transform-origin: 100% 100%; }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px) scale(.94); } }
html.fx .msg--typing.is-in { display: inline-flex; align-self: flex-start; gap: 4px; padding: .8rem .9rem; background: var(--ink-800); border-start-start-radius: .3rem; }
.msg--typing i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--fg-3); animation: dot 1s infinite ease-in-out; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { opacity: .3; transform: translateY(-2px); } }
html.fx .note { transition: opacity 400ms var(--ease-out); }
html.fx .note:not(.is-on) { opacity: .38; }
html.fx .note:not(.is-on) .note__check { color: var(--fg-3); }
@media (min-width: 48rem) {
  .thread__head { grid-column: 1 / span 6; }
  .phone { grid-column: 8 / -1; }
}
@media (max-width: 47.99rem) {
  html.fx .thread { block-size: 220svh; }
  html.fx .thread__pin { align-items: start; padding-block: var(--sp-4); }
  html.fx .thread__grid { row-gap: var(--sp-4); }
  html.fx .thread__sub { display: none; }
  /* phones: one note at a time, in the same spot, above the phone */
  html.fx .notes { margin: 0; min-block-size: 4.6em; }
  html.fx .note { grid-area: 1 / 1; opacity: 0; transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms; }
  /* beats ".note:not(.is-on)" above: only the current note is visible (and read), never a stack of faded ones */
  html.fx .note:not(.is-current) { opacity: 0; visibility: hidden; }
  html.fx .note.is-current { opacity: 1; visibility: visible; transition: opacity 300ms var(--ease-out), visibility 0s; }
  html.fx .note p { font-size: var(--fs-small); }
  html.fx .phone__screen { block-size: calc(100svh - var(--header-h) - 14rem); min-block-size: 19rem; }
  .phone { inline-size: min(100%, 22rem); }
}

/* ---------- למה לכתוב לי: משפט אחד ---------- */
.why { overflow: clip; }
.why__bg { position: absolute; inset: 0; z-index: 0; }
.why__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 70% 50%; max-inline-size: none; }
.why__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--bg) 0%, rgb(var(--ink-rgb) / .78) 30%, rgb(var(--ink-rgb) / .9) 65%, var(--bg) 100%);
}
.why__in { position: relative; z-index: 1; display: grid; gap: var(--space-group); }
.why__title { max-inline-size: 11em; }
.belief { max-inline-size: 15em; }
.belief__mark { position: relative; display: inline-block; }
.belief__mark::after {
  content: ""; position: absolute; inset-inline: 0; bottom: .02em; block-size: 3px; border-radius: 2px;
  background: var(--lime-500);
  transform: scaleX(1); transform-origin: calc(50% - 50% * var(--dir)) 50%;
  transition: transform var(--dur-scene) var(--ease-expo);
}
html.fx .belief__mark:not(.is-on)::after { transform: scaleX(0); }

/* ---------- אזורים ---------- */
.area__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-block); align-items: center; }
.area__text { grid-column: 1 / -1; }
.area__line { margin-block-start: var(--space-in); color: var(--fg-2); }
.cities { list-style: none; margin-block-start: var(--space-group); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); font-weight: var(--fw-light); }
.cities li { display: inline-flex; align-items: center; gap: .4em; }
.cities li::before { content: ""; inline-size: .32em; block-size: .32em; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--on-ink-3); flex: none; }
.area__media {
  grid-column: 1 / -1; margin: 0 calc(-1 * var(--margin)); position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
}
.area__media-in { position: absolute; inset: -8% 0; }
.area__media img { inline-size: 100%; block-size: 100%; object-fit: cover; max-inline-size: none; }
@media (min-width: 48rem) {
  .area__text { grid-column: 1 / span 5; }
  .area__media {
    grid-column: 6 / -1; margin: 0; margin-inline-end: calc(-1 * var(--margin));
    aspect-ratio: 16 / 11;
    border-start-start-radius: var(--r-xl); border-end-start-radius: var(--r-xl);
  }
}

/* ---------- מצבי התחלה לאנימציה של מסך הפתיחה ---------- */
html.fx:not(.hero-ready) [data-hero-title],
html.fx:not(.hero-ready) [data-hero-sub],
html.fx:not(.hero-ready) [data-hero-eyebrow] { opacity: 0; }
html.fx .film__copy .btn:not(.btn--ghost):not(.is-lit)::before { opacity: 0; }

@media (prefers-contrast: more) {
  .film__scrim { background: rgb(var(--ink-rgb) / .85); }
}

@media (forced-colors: active) {
  .phone__screen, .msg { border: 1px solid CanvasText; }
}