/* Hero — layout, copy and visual from landbitt.com; background (gradient, grid lines, dotted
   skyline) from this page. Scoped under .hero and mapped onto this project's tokens. */

/* ---------- Shell: landbitt.com's shape ----------
   Point-symmetric like the live banner: a tab rises at the top left (it holds the logo; the nav
   sits on the ground beside it) and the right part drops lower at the bottom, each joined by a
   convex corner → diagonal → concave corner slope. The outline is one clip-path path drawn by
   js/sections/01-hero.js on every resize (proportions from the live banner: tab ≈ a third of the
   width but never under the nav links, bottom step ≈ 0.65 × the tab depth). One element, so the
   gradient, grid and skyline run straight into the tab. Without JS it stays a rounded panel.
   The hero slides up under the sticky nav (margin-top: −tab height) so its top edge sits
   --hero-top below the page top (--hero-top and --tab-h are set in 00-chrome.css). */
.hero {
  --hero-side: 12px;
  margin-top: calc(-1 * var(--tab-h));
  padding: 0 var(--hero-side);
}
.hero-shell {
  --r: 48px;
  --col: min(var(--container), 100% + 2 * var(--hero-side) - 2 * var(--gutter));
  --foot-h: calc(var(--tab-h) * .65);
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  color: #fff;
  background:
    radial-gradient(120% 90% at 78% 10%, rgba(49, 226, 154, .22), transparent 58%),
    radial-gradient(80% 70% at 10% 95%, rgba(25, 154, 172, .28), transparent 60%),
    linear-gradient(158deg, var(--ink-btn) 0%, #116655 62%, #0b4a45 100%);
}
.hero-lines {
  position: absolute;
  inset: 0;
  opacity: .5;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
}

/* ---------- Copy ----------
   ≥1061px the visual is pinned to the shell's right edge (see Visual), so the grid holds only
   the copy; the min-height leaves room for the visual (52vw wide, 876:776). */
.hero-in {
  display: grid;
  align-items: center;
  width: var(--col);
  min-height: calc(var(--tab-h) + min(52vw, 980px) * .886 + 40px);
  margin-inline: auto;
  padding: calc(var(--tab-h) + clamp(24px, 3.4vw, 52px)) 0 calc(var(--foot-h) + clamp(28px, 3vw, 48px));
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 560px; }
.hero h1 {
  font-size: clamp(40px, 4.6vw, 66px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
}
.hero h1 .hl { color: var(--accent); }
.hero h1 .thin { font-weight: 300; }
.hero-l1, .hero-l2 { display: block; }
.hero-l2 { display: flex; align-items: center; gap: .22em; margin-top: .06em; }
.hero-arrow { flex: none; width: auto; height: 1.45em; margin: -.12em 0 -.08em -.06em; }
.hero-sub { font-size: clamp(16px, 1.45vw, 19px); font-weight: 500; line-height: 1.55; color: rgba(255, 255, 255, .86); max-width: 40ch; }
.hero-cert { font-size: clamp(15.5px, 1.35vw, 18px); font-weight: 700; line-height: 1.45; color: #fff; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- Visual: a realistic open hand holding the city, with the live site's card loop ----------
   ≥1061px the visual is pinned to the shell's right edge; below that it sits under the copy,
   widened past the gutter. Either way the forearm leaves through the shell's right edge (the shell
   clips it), so the end of the arm is never seen.
   Placement uses the Lottie's 876 × 776 coordinates: --u is one Lottie pixel (.hv is a size
   container, so 100cqw is its width).
   hand-city.webp (1688 × 1066, from the HQ PSD) is one image: the hand, the city resting in the palm, and the soft
   shadows between them. It is drawn 840 units wide (smaller hand) and set low: plaza centre (764, 519) in the image → (440, 520) here. The thumb (far side of the
   palm) is a separate image, hand-thumb.webp, in the same frame, painted behind the cards.
   The cards keep the live Lottie's coordinates and motion inside .hv-cards, which is scaled to
   the plaza: old plaza point (380.5, 568) → (440, 520), scale .715 (10% over the original .65).
   Paint order: thumb, left card, right card, main card, then the hand + city (cards sink behind).
   The side-card images are drawn already tilted ±30°; rotating them ∓30° stands them up. */
.hero-copy { position: relative; z-index: 1; }
.hero .stage { position: absolute; right: -3%; bottom: 3%; width: min(52%, 980px); }
.hv {
  position: relative;
  width: 100%;
  aspect-ratio: 876 / 776;
  container-type: inline-size;
}
.hv img { position: absolute; max-width: none; height: auto; --u: calc(100cqw / 876); }
.hv-hand, .hv-thumb { left: calc(60 * var(--u)); top: calc(261.7 * var(--u)); width: calc(840 * var(--u)); }
.hv-hand { z-index: 4; }
.hv-thumb { z-index: 0; }
.hv-cards {
  --u: calc(100cqw / 876);
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: calc(380.5 * var(--u)) calc(568 * var(--u));
  transform: translate(calc(59.5 * var(--u)), calc(-48 * var(--u))) scale(.715);
}
.hv-card--m { z-index: 3; left: calc(281.5 * var(--u)); top: calc(6 * var(--u)); width: calc(249 * var(--u)); }
.hv-card--r { z-index: 2; left: calc(227 * var(--u)); top: calc(-21 * var(--u)); width: calc(362 * var(--u)); }
.hv-card--l { z-index: 1; left: calc(222.5 * var(--u)); top: calc(-20.5 * var(--u)); width: calc(362 * var(--u)); }
/* resting pose (reduced motion): cards fanned out and upright */
.hv-card--r { translate: calc(250 * var(--u)) 0; rotate: -30deg; }
.hv-card--l { translate: calc(-250 * var(--u)) calc(4 * var(--u)); rotate: 30deg; }

/* 5s loop, keyframe times from the Lottie (120 frames at 24fps):
   0–23%  side cards fan out from behind the main card      23–28%  hold
   28–51% all three sink into the hand and fade              51–76%  rise back, side cards tilted
   76–100% side cards swing back behind the main card */
@keyframes hv-m {
  0%, 28.3% { translate: 0 0; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  51.2%     { translate: 0 calc(380 * var(--u)); opacity: 0; animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  75.75%, 100% { translate: 0 0; opacity: 1; }
}
@keyframes hv-r {
  0%     { translate: 0 0; rotate: -30deg; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, 0, 1); }
  22.9%  { translate: calc(250 * var(--u)) 0; rotate: -30deg; opacity: 1; animation-timing-function: linear; }
  28.3%  { translate: calc(250 * var(--u)) 0; rotate: -30deg; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  51.2%  { translate: 0 calc(385 * var(--u)); rotate: 0deg; opacity: 0; animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  75.75% { translate: calc(190 * var(--u)) calc(46 * var(--u)); rotate: -.6deg; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100%   { translate: 0 0; rotate: -30deg; opacity: 0; }
}
@keyframes hv-l {
  0%     { translate: 0 0; rotate: 30deg; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, 0, 1); }
  22.9%  { translate: calc(-250 * var(--u)) calc(4 * var(--u)); rotate: 30deg; opacity: 1; animation-timing-function: linear; }
  28.3%  { translate: calc(-250 * var(--u)) calc(4 * var(--u)); rotate: 30deg; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  51.2%  { translate: calc(5 * var(--u)) calc(383 * var(--u)); rotate: 0deg; opacity: 0; animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  75.75% { translate: calc(-190 * var(--u)) calc(46.5 * var(--u)); rotate: -.4deg; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100%   { translate: 0 0; rotate: 30deg; opacity: 0; }
}

/* ---------- Motion: load sequence, then the card loop ---------- */
@keyframes hero-rise { from { opacity: 0; translate: 0 28px; } }
@keyframes hero-visual-in { from { opacity: 0; translate: 0 50px; scale: .96; } }
@keyframes hero-arrow-in { from { opacity: 0; clip-path: inset(0 100% 0 0); translate: -8px 8px; } to { clip-path: inset(0 0 0 0); } }
@keyframes hero-arrow-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 3px -4px; } }
.js .hero-copy > * { animation: hero-rise .9s var(--ease) both; }
.js .hero-copy > :nth-child(1) { animation-delay: .1s; }
.js .hero-copy > :nth-child(2) { animation-delay: .3s; }
.js .hero-copy > :nth-child(3) { animation-delay: .42s; }
.js .hero-copy > :nth-child(4) { animation-delay: .54s; }
.js .hero-arrow { animation: hero-arrow-in .9s var(--ease) .55s backwards, hero-arrow-nudge 3.2s ease-in-out 1.6s infinite; }
.js .hero .hv { animation: hero-visual-in 1.1s var(--ease) .25s backwards; }
.js .hero .hv-card--m { animation: hv-m 5s linear 1.3s infinite backwards; }
.js .hero .hv-card--r { animation: hv-r 5s linear 1.3s infinite backwards; }
.js .hero .hv-card--l { animation: hv-l 5s linear 1.3s infinite backwards; }
/* pause the loops while the hero is off screen (class set by js/sections/01-hero.js) */
.hero.is-offscreen .hv-card,
.hero.is-offscreen .hero-arrow { animation-play-state: paused; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  /* the bottom padding keeps the palm clear of the shell's lower-left edge (the forearm still runs into the foot) */
  .hero-in { gap: 8px; min-height: 0; padding-bottom: calc(var(--foot-h) * .45); }
  .hero-copy { max-width: 620px; }
  /* under the copy, its right edge on the shell's edge (the image runs ~7% past it, so the
     forearm leaves the shell); as wide as fits with the fingertips 8px inside the left edge */
  .hero .stage {
    position: relative;
    right: auto;
    bottom: auto;
    justify-self: end;
    width: min(640px, 100% + 2 * (var(--gutter) - var(--hero-side)) - 8px);
    margin-right: calc(var(--hero-side) - var(--gutter));
  }
}
@media (max-width: 720px) {
  .hero { --hero-side: 10px; }
  .hero-shell { --r: 28px; }
  .hero-in { padding-top: calc(var(--tab-h) + 22px); }
  .hero-copy { gap: 18px; }
  .hero-btns { width: 100%; }
  .hero-btns .btn { flex: 1 1 200px; }
}
@media (max-width: 380px) {
  .hero-btns .btn { flex: 1 1 100%; }
}

/* ---------- Dotted skyline (canvas, drawn by js/sections/01-hero.js) ---------- */
.hero-skyline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* fade out toward the top so it reads as a horizon, not a texture */
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .55) 62%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .55) 62%, #000 100%);
}