/* =========================================================
   דף הבית: פתיחה וגלילה
   סצנות הגלילה הנעוצות ומסירת המכולה למשאית.
   ========================================================= */

/* ---------- hero + flow ---------- */
.flow {
  position: relative;
  height: 620vh;
}
@media (max-width: 700px) {
  .flow {
    height: 420vh;
  }
}
.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(60% 45% at 50% 62%, rgba(255, 255, 255, 0.055), transparent 70%), hsl(var(--bg));
}
.cam {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1600/767;
  transform-origin: 50% 50%;
  will-change: transform;
  direction: ltr;
  container-type: inline-size;
}
.cam img {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.floor {
  position: absolute;
  left: -30%;
  right: -30%;
  top: 70%;
  height: 40%;
  background: radial-gradient(50% 30% at 50% 22%, rgba(255, 255, 255, 0.07), transparent 70%);
}
.rig {
  position: absolute;
  inset: 0;
  transform-origin: 32% 88%;
  will-change: transform;
}
.base {
  inset: 0;
  width: 100%;
  height: 100%;
}
.cont {
  left: 30.14%;
  top: 30.33%;
  width: 61.91%;
  height: 41.17%;
  z-index: 200;
  will-change: transform;
}
.wheel {
  position: absolute;
  width: 5.125%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-size: 100% 100%;
  will-change: transform;
  z-index: 1;
}
.box {
  position: absolute;
  width: 6.5%;
  aspect-ratio: 320/228;
  background: url(../img/truck/carton.webp) center/100% 100% no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(92, 62, 32, 0.38),
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    0 1px 0 rgba(0, 0, 0, 0.3);
}
.box::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 15%;
  height: 1px;
  background: rgba(92, 62, 32, 0.28);
}
.box.flip {
  transform: scaleX(-1);
}
.faller {
  z-index: 150;
  will-change: left, top, transform;
}
.lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.lines i {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(245, 245, 245, 0.35), rgba(245, 245, 245, 0));
}
.dust {
  position: absolute;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(170, 160, 150, 0.35), rgba(170, 160, 150, 0) 65%);
  opacity: 0;
  pointer-events: none;
  z-index: 250;
}

.hero {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(env(safe-area-inset-top, 0px) + 104px) 24px 0;
  will-change: opacity, transform, filter;
}
.hero .eyebrow {
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(52px, 8.5vw, 118px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.hero .role {
  font-size: clamp(17px, 1.6vw, 20px);
  margin-bottom: 10px;
  color: hsl(var(--text) / 0.85);
}
.hero .role .display {
  font-size: 1.25em;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 14px 28px;
  border-radius: 999px;
  transition:
    transform 0.25s,
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.btn:hover {
  transform: scale(1.05);
}
.btn.solid {
  background: hsl(var(--text));
  color: hsl(var(--bg));
}
.btn.solid:hover {
  background: hsl(var(--bg));
  color: hsl(var(--text));
}
.btn.out {
  border: 2px solid hsl(var(--stroke));
  background: hsl(var(--bg));
}
.btn.out:hover {
  border-color: transparent;
}

.fadeb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26vh;
  z-index: 15;
  pointer-events: none;
  background: linear-gradient(to top, hsl(var(--bg)) 10%, hsl(var(--bg) / 0));
}
.cue {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: hsl(var(--muted));
  transition: opacity 0.3s;
}
.cue .ln {
  position: relative;
  width: 1px;
  height: 40px;
  background: hsl(var(--stroke));
  overflow: hidden;
}
.cue .ln i {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 50%;
  background: hsl(var(--text) / 0.8);
  animation: scroll-down 1.5s ease-in-out infinite;
}

.cap {
  position: absolute;
  left: max(24px, 6vw);
  bottom: calc(env(safe-area-inset-bottom, 0px) + max(28px, 5vh));
  z-index: 20;
  max-width: min(520px, calc(100vw - 48px));
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
  transition:
    opacity 0.5s,
    transform 0.5s,
    filter 0.5s;
  pointer-events: none;
}
.cap.on {
  opacity: 1;
  filter: none;
  transform: none;
  pointer-events: auto;
}
.cap .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  letter-spacing: 0.2em;
}
.cap .eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: hsl(var(--stroke));
  background: hsl(0 0% 30%);
}
.cap h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.1;
  margin-bottom: 8px;
}
.cap p {
  font-size: 15px;
  line-height: 1.6;
}
.cap .btn {
  margin-top: 18px;
}
.prog {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 30;
  width: calc(var(--p, 0) * 100%);
  box-shadow: 0 0 8px rgba(29, 28, 26, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .cue .ln i {
    animation: none;
  }
  .cap {
    transition: none;
  }
}