/* A (V8 loading). The loading mark is Joseph's V7 ring in the middle of the stage over the veiled poster (style.css).
   The page never locks: until the live 3D is ready, every gesture over the hero belongs to the page (app.js), and the
   ring offers Skip, straight past the 3D story to the first section below. Loaded after style.css and v7.css. */

/* until the live yacht is on screen, gestures over the hero are the page's (the frame has nothing to turn yet) */
:where(.x52-content) .stage:not(.is-ready) iframe { pointer-events:none }

/* the seconds under the name, only while the yacht's bytes arrive at a steady speed (app.js) */
:where(.x52-content) .load .eta:empty { display:none }

/* Skip: a quiet button under the ring, in the site's hairline style (2 px corners); the ring itself never catches a touch */
:where(.x52-content) .load { pointer-events:none }
:where(.x52-content) .load .skip { pointer-events:auto; display:inline-block; margin-top:22px; padding:10px 22px; font:inherit; font-weight:400; font-size:16px; line-height:1.2; letter-spacing:.02em; text-transform:none; color:#fff; background:rgba(7,22,31,.35); border:1px solid rgba(255,255,255,.6); border-radius:2px; cursor:pointer; transition:background .25s,color .25s,border-color .25s }
:where(.x52-content) .load .skip:hover,:where(.x52-content) .load .skip:focus-visible { background:#fff; color:#163254; border-color:#fff; outline:none }
:where(.x52-content) .stage.is-ready .load .skip,:where(.x52-content) .stage.is-fallback .load .skip { pointer-events:none }

/* the garage callouts wait for the buyer to arrive (is-here, set by v7.js): before that the three labels sat piled up at
   the section's top-left corner while it scrolled in */
:where(.x52-content) .garage:not(.is-here) .callouts { visibility:hidden }

/* fallback only (no WebGL, a graphics chip too slow even for the lightest render, or Save-Data): a plain button that
   says what it does, clear of the site's Contact button; readable type, the site's 2 px corners and hairline */
:where(.x52-content) .to3d { top:calc(var(--x52-strip-offset,0px) + var(--head-h,72px) + 16px); bottom:auto; right:var(--gutter); font-weight:400; font-size:16px; letter-spacing:.01em; text-transform:none; padding:10px 16px; border-radius:2px; border:1px solid rgba(255,255,255,.6); background:rgba(15,34,56,.5) }
:where(.x52-content) .to3d:hover { background:#fff; color:#163254 }