/* ============================================================================
   sealevel.AIfred — real-time 3D hero graphic (scoped styles)

   Structure and treatment inherited verbatim from the approved design export.
   The scene is UNBOXED: a widened canvas, no rectangular crop, and a dual
   feather (a shader radial falloff plus the CSS radial mask below) so it
   dissolves into the page navy on every side with no hard line. Only used on
   AIfred.html; linked after tokens.css / site.css so it can lean on the tokens.
   ========================================================================== */

/* The media cell must not clip the widened, unboxed scene. */
.page-aifred .mk-hero__media { overflow: visible; }

.sl-hero3d {
  position: relative;
  width: 100%;
  height: clamp(480px, 62vh, 640px);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
}

/* Widened, unboxed scene host. The negative insets push the canvas past the
   media box on all sides; the radial mask feathers it to transparent well
   before those edges, so the render melts into the page navy (right edge
   included). Do not add overflow clipping here. */
.sl-hero3d__scene {
  position: absolute;
  inset: -26% -60% -22% -60%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse 44% 62% at 50% 46%, #000 18%, rgba(0,0,0,0.5) 54%, rgba(0,0,0,0.14) 80%, transparent 100%);
          mask-image: radial-gradient(ellipse 44% 62% at 50% 46%, #000 18%, rgba(0,0,0,0.5) 54%, rgba(0,0,0,0.14) 80%, transparent 100%);
}
.sl-hero3d__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 1;
}

/* Poster-first paint (LCP): the static poster paints immediately and is faded
   out by the scene once WebGL has produced its first frame (JS drives opacity).
   On reduced-motion / no-WebGL the poster simply stays. */
.sl-hero3d__poster {
  position: absolute; inset: 0;
  z-index: 2;
  opacity: 1;
  pointer-events: none;
}

/* Overlay: card + AIfred wordmark + drag hint, above the canvas + poster. */
.sl-hero3d__overlay {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* ---- Liquid Glass recommendation card ---- */
.sl-hero3d__card {
  position: absolute; left: 7%; top: 2%;
  width: 238px;
  border-radius: 17px;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.42)) drop-shadow(0 3px 8px rgba(0,0,0,0.3));
  animation: sl-hero3d-moment-rise 620ms cubic-bezier(0.16,1,0.3,1);
}
.sl-hero3d__glass {
  position: absolute; inset: 0; border-radius: 17px;
  background: linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.012));
  backdrop-filter: blur(6px) saturate(1.5) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.5) brightness(1.05);
  padding: 13px;
  -webkit-mask: linear-gradient(#000 0 0) content-box; mask: linear-gradient(#000 0 0) content-box;
  pointer-events: none;
}
.sl-hero3d__glass-liquid {
  position: absolute; inset: 0; border-radius: 17px;
  backdrop-filter: url(#cardLiquid); -webkit-backdrop-filter: url(#cardLiquid);
  padding: 13px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.sl-hero3d__glass-edge {
  position: absolute; inset: 0; border-radius: 17px; pointer-events: none;
  box-shadow: inset 0 1.5px 0.5px rgba(255,255,255,0.5), inset 0 0 0 1px rgba(255,255,255,0.10), inset 1.5px 1.5px 1px rgba(255,255,255,0.16), inset -1px -3px 5px rgba(2,22,40,0.5);
}
.sl-hero3d__glass-chroma {
  position: absolute; inset: 0; border-radius: 17px; pointer-events: none;
  mix-blend-mode: screen;
  box-shadow: inset 1.5px 0 2px rgba(70,190,255,0.22), inset -1.5px 0 2px rgba(255,150,80,0.20);
}
.sl-hero3d__card-edge {
  position: absolute; inset: 0; border-radius: 17px;
  border: 1px solid rgba(212,173,94,0.85);
  box-shadow: inset 0 0 16px rgba(200,90,39,0.4), 0 0 12px rgba(212,173,94,0.45);
  opacity: 0; pointer-events: none;
}
.sl-hero3d__trace {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; opacity: 0;
}
.sl-hero3d__trace-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: screen;
  filter: drop-shadow(0 0 2px rgba(236,196,118,0.55));
}
.sl-hero3d__card-body { position: relative; padding: 14px 17px 16px; }
.sl-hero3d__card-kindrow { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.sl-hero3d__card-tick { width: 6px; height: 6px; background: #2abfb0; }
.sl-hero3d__card-kind {
  font-family: var(--font-display); font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #2abfb0;
}
.sl-hero3d__card-line {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.18; letter-spacing: -0.01em;
  color: #f9fafb; text-shadow: 0 2px 24px rgba(5,16,29,0.7);
}
.sl-hero3d__card-meta {
  margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--text-muted); letter-spacing: 0.02em;
}

/* ---- AIfred two-colour wordmark (AI ember, fred paper) ----
   Uses the site's own `.aifred` / `.ai` classes so the wordmark font, weight
   and ember tint match the rest of the site exactly (Instrument Sans, not the
   card's Geist Mono). Only size/position are set here. */
.sl-hero3d__brand { position: absolute; left: 4%; bottom: 7%; }
.sl-hero3d__brand-lockup {
  display: inline-block; line-height: 1;
  font-family: var(--font-display); font-size: 26px;
  letter-spacing: -0.01em; color: var(--text-strong);
}
.sl-hero3d__brand-sub  { margin-top: 5px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-faint); }

/* ---- Drag hint ---- */
.sl-hero3d__hint {
  position: absolute; right: 4%; bottom: 7%;
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint); opacity: 1;
  transition: opacity var(--dur) var(--ease-out);
}
.sl-hero3d__hint-rule { display: inline-block; width: 18px; height: 1px; background: currentColor; }

@keyframes sl-hero3d-moment-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-hero3d { cursor: default; }
  .sl-hero3d__card { animation: none; }
}

/* On phones the hero is a narrow single column; the bottom-left brand and the
   bottom-right drag hint would collide. Drop the hint there (the scene already
   auto-plays, and swipe stays discoverable) and keep the AIfred brand + tagline. */
@media (max-width: 560px) {
  .sl-hero3d__hint { display: none; }
}