/* Landing integration only; reusable effect styles live in hive.css. */
body.landing-hive {
  /* Establish the decorative layer before the module arrives. */
  position: relative;
  isolation: isolate;
  background: #fff;
  transition: none;
}

.landing-hive > main,
.landing-hive > footer {
  position: relative;
  z-index: 1;
}

.landing-hive > main > section,
.landing-hive > footer {
  background: transparent;
}

/* Retain the existing sticky navigation above every decorative layer. */
.landing-hive > nav {
  background: #fff;
  backdrop-filter: none;
}

.landing-hive .btn-outline {
  background: #fff;
}

.landing-hive .btn-outline:hover {
  background: var(--accent);
}

/* The short-window demo uses side-by-side columns; its positioned viewer must
   not intercept clicks on the independently sized dialog's close button. */
.landing-hive .phone-demo > .demo-close { z-index: 5; }

/* A complete, inline image paints with the hero, before any animation code or
   separate body parts arrive. The wrapper is the same 2:3 body box as makeBee;
   the larger raster also includes the wings, legs and antennae. */
.landing-hive .hero-demo-layout { position: relative; }
.hive-bee-start {
  --bee-start-size: 58px;
  --bee-start-angle: -25deg;
  position: absolute;
  display: block;
  width: calc(var(--bee-start-size) * 2 / 3);
  height: var(--bee-start-size);
  transform: translate(-50%, -50%) rotate(var(--bee-start-angle));
  transform-origin: center;
  pointer-events: none;
  user-select: none;
}
.hive-bee-start > img {
  position: absolute;
  display: block;
  left: -75%;
  top: -25%;
  width: 250%;
  height: 150%;
  max-width: none;
  pointer-events: none;
}
.hive-bee-start--primary {
  /* The existing 64px copy/phone gap plus the phone's inner side margin. */
  left: calc(100% - 300px);
  top: calc(50% - 175px);
}
.hive-bee-start--secondary {
  --bee-start-size: 64px;
  --bee-start-angle: 30deg;
  left: calc(100% - 100px);
  top: calc(50% - 320px);
}
/* Keep the geometry measurable while the controller atomically hands the
   visible image to its decoded flight, and for later responsive remounts. */
.hive-bee-start[data-hive-bee-taken="true"] { visibility: hidden; }
@media (max-width: 760px) {
  .hive-bee-start--primary {
    --bee-start-size: 32px;
    --bee-start-angle: 20deg;
    left: 50%;
    right: auto;
    /* Existing hero top padding is clear even when the phone is below fold. */
    top: -28px;
  }
  .hive-bee-start--secondary { display: none; }
}
@media print { .hive-bee-start { display: none; } }

/* Opacity preserves measurable layout without inherited visibility transitions
   on every descendant under the shared reduced-motion rule. The head bootstrap
   always removes this class within one second; no hiding applies without JS. */
@media (min-width: 1024px) {
  .landing-scale-pending body.landing-hive { opacity: 0; pointer-events: none; }
}

/* Scroll padding is in viewport pixels, outside every zoomed container. */
html.landing-scale-ready { scroll-padding-top: var(--landing-header-height); }
.landing-scale-ready .landing-hive :is(main, section[id]) { scroll-margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  /* The shared 0.01ms rule still creates transitions on default `all`, which
     can remain pending while deferred modules load. No transition is needed. */
  body.landing-hive,
  .landing-hive *,
  .landing-hive *::before,
  .landing-hive *::after { transition: none !important; }
}

@media (min-width: 1024px) {
  .landing-scale-active .landing-hive > :is(main, footer),
  .landing-scale-active .landing-hive > nav > .nav-inner {
    width: var(--landing-source-width);
    margin-inline: auto;
    zoom: var(--landing-scale);
    transition: none;
  }

  .landing-scale-active .landing-hive .support-button {
    /* Its existing explicit width is already in source pixels. */
    zoom: var(--landing-scale);
    transition-property: transform, background;
  }

  .landing-scale-active .landing-hive > nav {
    /* The outer sticky strip remains viewport-wide. Padding can scale below a
       device pixel, whereas a border is rounded up by some browser engines. */
    border-bottom: 0;
    padding-bottom: calc(1px * var(--landing-scale));
    transition: none;
  }

  .landing-scale-active .landing-hive > nav::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: calc(1px * var(--landing-scale));
    background: var(--border);
    pointer-events: none;
  }
}

@media (min-width: 1024px) {
  /* WebKit before its fix for bug 319939 enlarges small zoomed fonts. Only
     engines failing the text probe use transforms, with explicit flow-space
     compensation so the map, later sections and footer still follow normally. */
  html.landing-scale-active.landing-scale-transform { overflow: auto; }
  .landing-scale-active.landing-scale-transform body.landing-hive {
    display: flow-root;
    /* Exclude the original, untransformed boxes from scrollable overflow. An
       explicit root overflow keeps this clipping local to the body. */
    overflow: clip;
  }

  html.landing-scale-active.landing-scale-transform:has(.phone-demo[open]) { overflow: hidden; }

  .landing-scale-active.landing-scale-transform .landing-hive > :is(main, footer),
  .landing-scale-active.landing-scale-transform .landing-hive > nav > .nav-inner {
    zoom: 1;
    transform: scale(var(--landing-scale));
    transform-origin: top center;
    margin-bottom: calc(var(--landing-source-height) * (var(--landing-scale) - 1));
  }

  .landing-scale-active.landing-scale-transform .landing-hive .support-button {
    zoom: 1;
    scale: var(--landing-scale);
    transform-origin: bottom right;
    right: calc(20px * var(--landing-scale));
    bottom: calc(20px * var(--landing-scale));
  }
}