/* ========================================
   INDOOR PAGE - VistaFly

   Page-specific only: the 3D drone viewer overlays
   (callouts, hand comparison).
   Hero, cards, pricing, teaser and CTA all come from
   components.css.
   ======================================== */

body {
    --scrim: 0.52;
}

.bg-poster {
    background-image: url('/images/herobg-poster.jpg');
    background-size: cover;
    background-position: center;
}

.spec-unit {
    font-size: 0.5em;
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-wide);
    color: var(--bone-500);
    margin-inline-start: 0.1em;
}


/* ============================================================
   DRONE VIEWER
   The canvas is absolutely positioned so the callout overlay
   can share the same coordinate space — drone-viewer.js
   projects 3D points onto this box.
   ============================================================ */
.drone-viewer {
    position: relative;
}

#drone-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: transparent;
}



/* ============================================================
   HAND OVERLAY — palm-size comparison
   ============================================================ */
/* ---- Palm-size comparison ----
   The drone is rendered centred in the canvas, and hand.png happens to
   sit its palm near the middle of the frame — so the overlay is centred
   too. (It used to be right-aligned, which was tuned for the old wide
   viewer box; this container is square now and that no longer lines up.)

   Two properties of the asset drive the rest:
     - It is 1536x1024, and the cupped palm is only about a quarter of
       that width. The drone spans roughly half the container. So the
       image has to be scaled well past 100% for the drone to read as
       sitting IN the palm rather than dwarfing it.
     - It has a baked light-grey background, no alpha. Left alone that
       is a lit rectangle over a dark hero, so the edges are masked off
       radially and it reads as the hand emerging from the dark.

   A version of this PNG with a real alpha channel would let the mask go
   and allow tighter framing. */
.hand-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity var(--dur-glacial) var(--ease-out);

    /* The mask belongs HERE, on the container, not on the image.

       The image is scaled past 100% so the palm outsizes the drone,
       which means it runs well beyond this 580px box and gets cut
       off square by overflow:hidden. A mask on the image fades in
       IMAGE coordinates — its soft edge lands far outside the box
       and is never seen, leaving the hard rectangular cut visible.

       In container coordinates the fade lands where the clipping
       actually happens, so the hand dissolves into the dark instead
       of ending on a straight edge. Centred low, following the palm
       down after the image's translateY.

       The ellipse alone does not finish on the right: centred at 55%
       with a 58% x-radius, its transparent stop lands at ~108% — past
       the box — so overflow:hidden cut the fingers off at roughly 28%
       alpha, a visible vertical edge. A second linear layer runs the
       right side the rest of the way to zero before the box ends, and
       the two are intersected (min of the two alphas) so it only ever
       removes coverage the ellipse left behind. */
    -webkit-mask-image:
        radial-gradient(
            ellipse 58% 50% at 55% 55%,
            #000 30%,
            rgba(0, 0, 0, 0.55) 64%,
            transparent 92%
        ),
        linear-gradient(
            to right,
            #000 0 58%,
            rgba(0, 0, 0, 0.6) 76%,
            rgba(0, 0, 0, 0.22) 89%,
            transparent 98%
        );
    mask-image:
        radial-gradient(
            ellipse 58% 50% at 55% 55%,
            #000 30%,
            rgba(0, 0, 0, 0.55) 64%,
            transparent 92%
        ),
        linear-gradient(
            to right,
            #000 0 58%,
            rgba(0, 0, 0, 0.6) 76%,
            rgba(0, 0, 0, 0.22) 89%,
            transparent 98%
        );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.hand-overlay.visible {
    opacity: 1;
}

/* Below 700px the callouts become a rail and stop cycling, so nothing
   ever triggers the palm comparison — it just sat there at opacity 0,
   stretched to 613px inside a 350px viewer and covering the rail.

   This has to live in indoor.css, not components.css: .hand-overlay is
   declared here and this file loads later, so an equal-specificity
   rule over there would never win. */
@media (max-width: 700px) {
    .hand-overlay {
        display: none;
    }
}

.hand-overlay img {
    /* Two numbers do the work here, and both are tuned by eye:

       width      Scales the hand against the drone. The cupped palm is
                  only about a third of this image's width, so the image
                  has to run well past the container for the palm to end
                  up wider than the aircraft.

       translateY Drops the palm until its surface meets the underside of
                  the ducts. Too little and the drone sinks through the
                  hand — it reads as floating in front of it rather than
                  resting in it.

       translateX only corrects for the palm sitting a touch right of the
       image's centre; the drone itself renders dead centre. */
    width: 175%;
    max-width: none;
    height: auto;
    transform: translate(6%, 17%);
    /* No mask here — it lives on .hand-overlay, in container
       coordinates. See the note there. */
}