/* ==========================================================================
   Frigate Yacht Partners - "projected boat" hero - boat-3d - v8 - 13 September 2026
   The hull cut-out from the brochure's own photograph floats over the original
   scene with real depth (a depth map drives the parallax), moves with the
   mouse or the phone's tilt, throws a soft reflection and catches a slow gold
   light sweep. Every class is prefixed fyp-boat3d-. No libraries.
   Palette: navy #0A1A3F, gold #D4AF37, cream #F7F3EB. Headings Playfair
   Display, labels IBM Plex Mono, body Inter - matching the rest of v8.
   ========================================================================== */

.fyp-boat3d{
  position:relative;display:block;width:100%;overflow:hidden;isolation:isolate;
  background:#0A1A3F;color:#F7F3EB;
  aspect-ratio:1600/1066;
}
@supports not (aspect-ratio:1600/1066){
  .fyp-boat3d::before{content:"";display:block;padding-top:66.625%}      /* 1066/1600, only if aspect-ratio is unsupported */
  .fyp-boat3d>*{position:absolute;inset:0}
}

/* ---------- canvas (the live WebGL scene) ---------- */
.fyp-boat3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.fyp-boat3d--live .fyp-boat3d-canvas{display:block}
.fyp-boat3d--live .fyp-boat3d-fallback{display:none}

/* ---------- CSS fallback (no WebGL, reduced motion, print) ---------- */
.fyp-boat3d-fallback{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.fyp-boat3d-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;
  -webkit-user-select:none;user-select:none;pointer-events:none;will-change:transform}
.fyp-boat3d-hull{position:absolute;display:block;width:auto;height:auto;pointer-events:none;
  -webkit-user-select:none;user-select:none;will-change:transform}
/* left/top/width/height are set inline by component.js from data-layout, in percent of this box,
   which works exactly because the box is aspect-locked to the source photograph (no crop mismatch) */

/* ---------- bottom shade + vignette, CSS-only version (the canvas bakes its own) ---------- */
.fyp-boat3d-shade{position:absolute;inset:0;pointer-events:none;display:none;
  background:
    radial-gradient(ellipse at center,rgba(10,26,63,0) 55%,rgba(10,26,63,.32) 100%),
    linear-gradient(180deg,rgba(10,26,63,0) 58%,rgba(10,26,63,.6) 92%,rgba(10,26,63,.72) 100%)}
.fyp-boat3d--fallback .fyp-boat3d-shade{display:block}

/* ---------- title slot ---------- */
.fyp-boat3d-title{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,4vw,44px) clamp(18px,4vw,44px);
  display:flex;flex-direction:column;gap:clamp(6px,1vw,10px);pointer-events:none}
.fyp-boat3d-kicker{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-weight:500;font-size:clamp(10px,1.1vw,12px);
  letter-spacing:.28em;text-transform:uppercase;color:#D4AF37;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.fyp-boat3d-name{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:800;
  font-size:clamp(26px,5vw,58px);line-height:1.05;color:#F7F3EB;text-shadow:0 3px 20px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.4)}
@media (max-width:520px){.fyp-boat3d-kicker{font-size:10px;letter-spacing:.2em}.fyp-boat3d-name{font-size:clamp(22px,7vw,32px)}}

/* ---------- reduced motion: one static frame, zero offset, no transforms ---------- */
@media (prefers-reduced-motion:reduce){
  .fyp-boat3d-hull,.fyp-boat3d-scene{transform:none !important;transition:none !important}
}

/* ---------- print: the static picture only, no canvas, no motion ---------- */
@media print{
  .fyp-boat3d{break-inside:avoid;page-break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .fyp-boat3d-canvas{display:none !important}
  .fyp-boat3d-fallback{display:block !important}
  .fyp-boat3d-scene{transform:none !important}
  .fyp-boat3d-hull{transform:none !important}
  .fyp-boat3d-shade{display:block !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}