/* ═══ FLOATING ARTIFACTS ══════════════════════════════════════════
   Andie's brief, points 8–10 and 27.

   The rule is simple and it is the fastest way to stop looking like a
   template: if a legitimate transparent asset exists, USE IT — as an
   object, not as a picture inside a rectangle. Cruiser floats. A seal
   sits in negative space. Artwork is allowed to cross a headline.

   Everything here runs on real cutouts pulled from the client's FINAL
   folder — genuine alpha, not a JPEG with a background knocked out by
   hand. No fake proof, no stock substitute.

   TWO TRANSFORMS, TWO LAYERS. The outer .float carries the scroll
   parallax written by sos-float.js; the inner .fl-in carries the slow
   ambient drift. They must not share an element or the last one to
   write transform wins and the other silently stops.

   NO overflow:hidden on the section. Cruiser is supposed to break the
   top edge — that controlled violation of the grid is the whole point
   of 27, and clipping it turns him back into a picture in a box. The
   trade is that every offset here must stay POSITIVE: a negative right
   would push past the viewport edge and reintroduce the sideways-scroll
   bug. body already carries overflow-x:hidden as a second net.

   RESTRAINT. Point 8's numbers: a few pixels over several seconds, a
   degree or two of rotation at most. Not bobbing balloons, not a 1999
   parallax site. If you can watch it move, it is too much. */

.dossier{position:relative}
.float{position:absolute;pointer-events:none;z-index:3;will-change:transform}
.fl-in{display:block;animation:sos-drift 13s ease-in-out infinite}
.float img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 30px 38px rgba(0,0,0,.6))
         drop-shadow(0 3px 6px rgba(0,0,0,.45));
}

@keyframes sos-drift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(0,-11px,0) rotate(1.1deg)}
}
/* the second object breathes on its own clock, or they pulse together
   and read as one mechanism */
.fl-slow .fl-in{animation-duration:19s;animation-delay:-4s}

/* ── Roadsters dossier ──
   Cruiser overlaps the dossier tag and the top rule. The headline still
   has to win, so he sits beside the type column, never over the words. */
#roadsters .fl-cruiser{
  width:clamp(150px,20vw,300px);
  right:clamp(6px,1.5vw,30px);
  top:clamp(-26px,-1.6vw,-4px);
}
#roadsters .fl-seal{
  width:clamp(96px,11vw,168px);
  left:clamp(6px,1.2vw,22px);
  bottom:9%;
}
@media(max-width:1000px){
  #roadsters .fl-cruiser{width:132px;right:6px;top:-12px}
  #roadsters .fl-seal{display:none}
}
@media(max-width:620px){
  #roadsters .fl-cruiser{width:94px;right:4px;top:-6px;opacity:.9}
}
/* keep the dossier text clear of him on wide screens */
@media(min-width:1001px){
  #roadsters .dos-h,#roadsters .dos-lede{max-width:min(72ch,calc(100% - 330px))}
}

/* ── Proof plate ──
   Point 15: once or twice in a substantial story, give one piece of
   work enough room to dominate. Minimal text. Let the visitor stare. */
.proof{margin:clamp(34px,5vw,64px) 0 0;position:relative;z-index:1}
.proof img{
  display:block;width:100%;height:auto;
  background:var(--paper);
  box-shadow:0 0 0 1px var(--rule),0 30px 60px rgba(0,0,0,.45);
}
.proof figcaption{
  margin-top:13px;font-family:var(--type);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);
}
.proof .pf-k{color:var(--gold)}

@media(prefers-reduced-motion:reduce){
  .fl-in{animation:none}
  .float{transform:none !important}
}