/* devices.css — the three floating hero devices.

   Each device is a flat <img> of a Blender render (tools/render_devices.py).
   The perspective, the metal, the glass and the light are all baked into the
   pixels, so this file does exactly two things: place them, and float them.

   HARD RULE: no rotate, no scale, no 3D transform on anything containing a
   device image. A rotated or scaled compositor layer is re-rasterised with
   bilinear filtering on one mip level, and the screenshot inside turns to mush
   — that is precisely what sank the hand-drawn SVG version. Translation alone
   does not resample a layer, so the float below is translate3d only.

   --u is derived from the CONTAINER, not from breakpoints, so the rig scales
   as one rigid object and can never overflow: stepped breakpoints were
   overflowing at 360, 900 and 1280 when this was tried the other way. */

/* .hd-rig, not .hd-rig / .devices — dark-sections.css still owns .devices,
   .dev-laptop and .dev-phone for the older flat hero mock, and its
   .dev-phone{bottom:-9%} silently stretched this figure from 215px to
   370px. Name collisions across two stylesheets are invisible until you
   measure the box. */
.hd-rig-wrap{container-type:inline-size;min-width:0;overflow:visible}

.hd-rig{
  --u:calc(100cqw * 1.04 / 620);
  position:relative;
  width:calc(620 * var(--u));
  /* tall enough to contain the phone AND its label — measured, not guessed:
     at 568 the phone tag sat 59px below the rig and slid under the hero rule */
  height:calc(616 * var(--u));
}
@media(max-width:900px){.hd-rig{--u:calc(100cqw * .90 / 620);margin:0 auto}}
@supports not (container-type:inline-size){
  .hd-rig{--u:.62px;margin:0 auto}
}

.hd{position:absolute;margin:0;will-change:transform}
.hd img{display:block;width:100%;height:auto}

/* Sizes are the packed asset widths / 2.4, so each image is drawn at roughly
   2.4x its CSS size and stays sharp on retina without paying for 4x. */
/* A deliberate triangle: laptop top-left and dominant, tablet mid-right,
   phone bottom-centre. Every gap is real — the phone used to graze the
   laptop's bottom edge, which reads as an accident rather than a composition.
   Clearances at these numbers: laptop->phone 72u, laptop->tablet 20u,
   phone->tablet 144u. Sizes are the packed asset widths / 2.4. */
.hd-laptop{left:0;                   top:0;                    width:calc(433 * var(--u)); z-index:1}
.hd-tablet{left:calc(453 * var(--u));top:calc(108 * var(--u)); width:calc(167 * var(--u)); z-index:2}
.hd-phone {left:calc(190 * var(--u));top:calc(330 * var(--u)); width:calc(119 * var(--u)); z-index:3}

/* the float: three different durations with negative delays, so the devices are
   permanently out of phase and never read as one locked group */
@keyframes hdFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,calc(-13 * var(--u)),0)}
}
html.motion-on .hd{animation:hdFloat var(--fd,8s) var(--fdel,0s) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hd{animation:none}}

/* Contact shadow. The renders ship without one — a baked shadow cannot adapt
   to the page, and a separate element can be tuned without a four-minute
   re-render. Offset down-right to match the render's key light, which sits
   up-left-front in tools/render_devices.py. */
.hd-shadow{
  position:absolute;left:50%;top:100%;
  width:76%;height:calc(16 * var(--u));
  transform:translate(calc(-50% + 6 * var(--u)), calc(-6 * var(--u)));
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(15,26,36,.42), rgba(15,26,36,.16) 46%, rgba(15,26,36,0) 74%);
  filter:blur(calc(8 * var(--u)));
  pointer-events:none;z-index:-1;
}
.hd-laptop .hd-shadow{width:64%;transform:translate(calc(-50% + 6 * var(--u)), calc(-22 * var(--u)))}

/* labels: placed to clear every neighbour at every scale. The laptop's is
   left-aligned because centred it lands where the phone floats. */
.hd-tag{
  position:absolute;left:50%;top:calc(100% + 14 * var(--u));
  transform:translateX(-50%);
  font-size:max(9.5px, calc(11 * var(--u)));font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);white-space:nowrap;
}
.hd-laptop .hd-tag{left:0;transform:none;top:calc(100% + 26 * var(--u))}
/* below this the rig is small enough that the labels crowd the devices; the
   hero's support line already names all three in the same left-to-right order */
@media(max-width:700px){.hd-tag{display:none}}