/* Homepage "Get a free AI camera" section (Figma: Home Page, node 2472:2936).
   Sky backdrop fading into teal-10, white copy on the left, and the TraceCam
   rising up its tripod pole over the gradient as the visitor scrolls.
   home-sky.js sets --hsky-p (0 = hidden below, 1 = fully up) on .hsky from
   the section's position as the page scrolls normally (no pinning).
   Without JS (or with reduced motion) the camera sits in its final spot.

   Desktop sizes are Figma pixels times --u, one unit of the 1512x809 frame
   fitted into the stage (85vh tall, a little under a full screen), so the sky and camera keep their proportions at
   any screen size. Copy uses the site's standard H2, subhead and button.
   Home-Sky-3.webp already carries the Figma colour grade. */

.hsky {
  --hsky-p: 1;
  position: relative;
  background-color: var(--white);
}

.hsky-stage {
  --h: 85vh;
  --u: min(calc(100vw / 1512), calc(var(--h) / 809));
  position: relative;
  height: var(--h);
  overflow: clip;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  background-color: #4f78a8;
}

/* Fit to width, 468px down a 1512x2016 render: the Figma crop. */
.hsky-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38.8%;
}

/* Sky dissolves into teal-10 so the next section continues seamlessly.
   The camera sits above this layer, per the design. */
.hsky-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(231, 248, 245, 0) 0%,
    rgba(231, 248, 245, 0) 15.02%,
    rgba(231, 248, 245, .55) 76.28%,
    rgba(231, 248, 245, .9) 91.33%,
    var(--teal-10) 100%
  );
}

/* Final resting spot (Figma: x 766, y 92, 401x834). Anchored to the bottom so
   the pole always runs off the stage, whatever the viewport shape. At p = 0
   it is pushed below the stage. */
.hsky-cam {
  position: absolute;
  left: calc(50% + 10 * var(--u));
  bottom: calc(-117.7 * var(--u));
  height: calc(834.5 * var(--u));
  width: auto;
  max-width: none;
  transform: translate3d(0, calc((1 - var(--hsky-p)) * 92vh), 0);
  will-change: transform;
}

/* Figma: left edge 538 units left of the frame centre, vertically centred. */
.hsky-copy {
  position: absolute;
  z-index: 2;
  left: calc(50% - 538 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: fit-content;
}

/* The headline sets the block width; the body copy adds none of its own
   (width 0, min-width 100%), so it wraps where the H2 does. Balanced so a
   line never ends on a widow. */
.hsky-sub {
  width: 0;
  min-width: 100%;
  color: var(--white);
  text-wrap: balance;
}

/* Mobile: centred copy at the top, camera centred and rising beneath it.
   The sky is cropped to its clear upper-left band so the copy sits on open
   blue, and a soft blue scrim behind the copy keeps white text readable
   whatever clouds drift in. */
@media screen and (max-width: 767px) {
  .hsky-stage {
    --h: 100vh;
    min-height: 640px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
  .hsky-sky { object-position: 0% 30%; }
  .hsky-stage::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 60%;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(60, 98, 145, .5) 0%, rgba(60, 98, 145, .3) 55%, rgba(60, 98, 145, 0) 100%);
  }
  .hsky-copy {
    left: 6vw;
    right: 6vw;
    top: 88px;
    transform: none;
    width: auto;
    align-items: center;
    text-align: center;
  }
  .hsky-copy .h2 { text-align: center; }
  .hsky-cam {
    left: 50%;
    top: 37%;
    bottom: auto;
    height: 72%;
    transform: translate3d(-50%, calc((1 - var(--hsky-p)) * 75vh), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hsky-cam { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .hsky-cam { transform: translate3d(-50%, 0, 0); }
}