/* Герой: цех → слово → груз на траверсе → плашки и панель. */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  height: min(100svh, 940px); min-height: 640px;
  --load-w: min(58vw, 1000px, 100svh);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.hero__haze {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb), .35) 0%, transparent 18%, transparent 62%, rgba(var(--bg-rgb), .55) 88%, var(--color-background) 100%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(var(--text-rgb), .06), transparent 70%);
}

/* огромное слово */
.hero__word {
  position: absolute; left: 0; right: 0; top: clamp(96px, 17%, 170px); z-index: 1;
  text-align: center; white-space: nowrap; pointer-events: none;
  font-size: clamp(56px, 13.4vw, 200px); line-height: .8; letter-spacing: -.005em;
}
html[data-lang="en"] .hero__word { font-size: clamp(64px, 16.6vw, 250px); }
.hero__word-in { display: inline-block; padding-top: .04em;
  background: linear-gradient(180deg, var(--color-text-muted) 0%, var(--color-border-strong) 55%, var(--color-border) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* груз */
.hero__stage { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--load-w); transform: translateX(-50%); z-index: 2; pointer-events: none; }
.hero__load {
  position: absolute; left: 0; right: 0; top: clamp(70px, 11%, 120px);
  transform-origin: 49.8% 0; will-change: transform; pointer-events: none;
}
.hero__crate-wrap { position: relative; display: block; }
.hero__crate { width: 100%; filter: brightness(.86) contrast(1.06) saturate(.88) drop-shadow(0 34px 44px rgba(0, 0, 0, .55)); }
/* свет сверху: затемнение по форме ящика (маска по альфе картинки) */
.hero__crate-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), .06) 40%, rgba(var(--bg-rgb), .42) 74%, rgba(var(--bg-rgb), .72) 100%),
    linear-gradient(90deg, rgba(var(--bg-rgb), .38) 0%, transparent 22%, transparent 78%, rgba(var(--bg-rgb), .38) 100%);
  -webkit-mask: url(../assets/hero-crate.webp) center / 100% 100% no-repeat;
  mask: url(../assets/hero-crate.webp) center / 100% 100% no-repeat;
}
.hero__rope {
  position: absolute; left: calc(49.8% - 1.5px); bottom: calc(100% - 2px); width: 3px; height: 60vh;
  background: linear-gradient(90deg, var(--color-border), var(--color-text-muted) 45%, var(--color-border-strong) 70%, var(--color-border));
}
.hero__shadow {
  position: absolute; left: 6%; right: 6%; top: calc(clamp(70px, 11%, 120px) + var(--load-w) * .636 + 7%); height: 9%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35) 55%, transparent 72%);
  filter: blur(16px); transform-origin: 50% 50%;
}
/* ядро тени прямо под ящиком: плотнее и уже */
.hero__contact {
  position: absolute; left: 16%; right: 16%; top: calc(clamp(70px, 11%, 120px) + var(--load-w) * .636 + 9%); height: 4%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, .7), transparent 70%); filter: blur(8px);
}
/* конус света из фонаря над грузом */
.hero__beam {
  position: absolute; left: 50%; top: 0; width: min(60vw, 1000px); height: 90%; transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--text-rgb), .08), rgba(var(--text-rgb), .025) 60%, transparent);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); filter: blur(24px);
}

/* точки на ящике */
.hero__dot {
  position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(var(--text-rgb), .55); background: rgba(var(--primary-rgb), .22);
  cursor: pointer; pointer-events: auto; transition: transform .3s var(--ease), background-color .3s;
}
.hero__dot::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--color-primary-foreground); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .9); }
.hero__dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(var(--primary-rgb), .35); }
.hero__dot:hover, .hero__dot:focus-visible, .hero__dot.is-hot { transform: scale(1.18); background: rgba(var(--primary-rgb), .4); }
.hero__tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 6px);
  white-space: nowrap; padding: 8px 12px; font-size: 13px; color: var(--color-text);
  background: rgba(var(--surface-rgb), .85); border: 1px solid var(--glass-line); border-radius: var(--r);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease);
}
.hero__dot:hover .hero__tip, .hero__dot:focus-visible .hero__tip, .hero__dot.is-hot .hero__tip { opacity: 1; transform: translate(-50%, 0); }

/* линии-выноски */
.hero__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.hero__lines path { fill: none; stroke: rgba(var(--text-rgb), .45); stroke-width: 1; }

/* плашки */
.hero__tag {
  position: absolute; z-index: 4; display: grid; gap: 4px; padding: 14px 18px; min-width: 200px;
  text-decoration: none; color: var(--color-text); transition: border-color .25s, transform .3s var(--ease);
}
.hero__tag strong { font-size: 17px; font-weight: 700; }
.hero__tag[data-tag="customs"] { left: max(var(--gutter), calc(50% - var(--load-w) / 2 - 150px)); top: 52%; }
.hero__tag[data-tag="install"] { right: max(var(--gutter), calc(50% - var(--load-w) / 2 - 170px)); top: 66%; }
.hero__tag.is-hot, .hero__tag:hover { border-color: rgba(var(--primary-rgb), .9); }

/* панель с лидом */
.hero__panel {
  position: absolute; z-index: 5; left: var(--gutter); bottom: clamp(28px, 7%, 72px);
  width: min(460px, calc(100% - 2 * var(--gutter))); padding: 26px 28px 24px;
}
.hero__lead { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.35; margin-bottom: 22px; }
.hero__act { display: grid; gap: 12px; justify-items: start; }
.hero__note { font-size: 13.5px; color: var(--color-text-muted); }

/* ноутбук ниже 820 по высоте: груз меньше, чтобы не наехать на панель */
@media (min-width: 1081px) and (max-height: 820px) {
  .hero { --load-w: min(56vw, 104svh); }
}

/* планшет */
@media (max-width: 1080px) {
  .hero { --load-w: 80vw; height: auto; min-height: 0; padding: 0 0 var(--gutter); display: flex; flex-direction: column; }
  .hero__word { position: relative; top: auto; margin-top: clamp(104px, 16vw, 150px); font-size: 13.2vw; }
  html[data-lang="en"] .hero__word { font-size: 16.4vw; }
  .hero__stage { position: relative; left: auto; top: auto; bottom: auto; transform: none; margin: calc(-8.5vw) auto 0; height: calc(var(--load-w) * .636 + 8vw); }
  .hero__load { top: 0; }
  .hero__shadow { top: calc(var(--load-w) * .636 - 2vw); height: 10vw; }
  .hero__contact { top: calc(var(--load-w) * .636); height: 4vw; }
  .hero__beam { display: none; }
  .hero__rope { height: 40vw; }
  .hero__tag { display: none; }
  .hero__lines { display: none; }
  .hero__panel { position: relative; left: auto; bottom: auto; margin: 4vw var(--gutter) 0; width: auto; max-width: 620px; }
}
@media (max-width: 640px) {
  .hero { --load-w: 96vw; }
  .hero__word { margin-top: 92px; font-size: 13.4vw; }
  html[data-lang="en"] .hero__word { font-size: 16.6vw; }
  .hero__stage { margin-top: -2vw; }
  .hero__dot { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .hero__dot::before { inset: 8px; }
  .hero__panel { padding: 20px; margin-inline: 16px; }
  .hero__act .btn { width: 100%; }
}

/* вход: свет поднимается по буквам, груз опускается и успокаивается */
.hero.is-ready .hero__word-in { animation: hero-word 1.1s var(--ease) both; }
.hero.is-ready .hero__load { animation: hero-drop 1.6s cubic-bezier(.3, .9, .3, 1) both; }
.hero.is-ready .hero__tag, .hero.is-ready .hero__panel { animation: hero-in .8s var(--ease) both; }
.hero.is-ready .hero__tag[data-tag="customs"] { animation-delay: 1.1s; }
.hero.is-ready .hero__tag[data-tag="install"] { animation-delay: 1.25s; }
.hero.is-ready .hero__panel { animation-delay: .35s; }
.hero.is-ready .hero__lines path { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); animation: hero-line .9s var(--ease) 1.2s forwards; }
@keyframes hero-word { from { clip-path: inset(100% 0 0 0); transform: translateY(.06em); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes hero-drop {
  0% { transform: translateY(-34px) rotate(0deg); opacity: 0; }
  30% { opacity: 1; }
  55% { transform: translateY(4px) rotate(.9deg); }
  75% { transform: translateY(-1px) rotate(-.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hero-line { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero.is-ready .hero__word-in, .hero.is-ready .hero__load, .hero.is-ready .hero__tag, .hero.is-ready .hero__panel, .hero.is-ready .hero__lines path { animation: none !important; stroke-dashoffset: 0; }
}