/* SURFSUP V28 — POLISH PASS
   Purpose: fix the specific things breaking the "one continuous world" feel —
   a leftover neon-cyan section, an invisible headline, a nav rule that never
   rendered, and hard-cut section boundaries — without touching any commerce,
   Stripe, Sample Machine, cart, or backend logic. Loads last, on every public
   page, so the whole site (not just the homepage) shares one finished look. */

:root{
  --v28-dark:#111110;
  --v28-dark-text:#f4efe5;
  --v28-fallback-paper:#f4f0e8;
  --v28-fallback-line:#cfc8bb;
}

/* ------------------------------------------------------------------ */
/* 1) FIX: the video/"OUT NOW" section was skipped by the V27 pass and
   was still rendering the original neon-cyan (#82e8e8) test color —
   the single loudest, most out-of-family jump on the page. Bring it
   into the same paper family as every section around it. */
.transmission-section{
  background:var(--v27-paper,var(--v28-fallback-paper))!important;
}
.transmission-section .video-console-top,
.transmission-section .video-console-bottom{
  color:var(--v27-ink,#11110f)!important;
  border-color:var(--v27-line,var(--v28-fallback-line))!important;
}

/* ------------------------------------------------------------------ */
/* 2) FIX: the Sample Machine heading was set to light paper-colored
   text by one layer, then its section background got flattened to a
   light paper color by a later layer — leaving near-invisible text.
   Make the Sample Machine an intentional dark "installation" moment
   (it pairs with the dark hero as the site's two anchor points) and
   pin both the background and the text color together so they can't
   drift apart again. */
.tools-section{
  background:var(--v28-dark)!important;
  color:var(--v28-dark-text)!important;
}
.tools-section .section-head h2,
.tools-section .section-head .micro,
.tools-section .micro{
  color:var(--v28-dark-text)!important;
}
.tools-section .section-head p:not(.micro){
  color:rgba(244,239,229,.68)!important;
}

/* ------------------------------------------------------------------ */
/* 3) FIX: an earlier pass wrote a "floating pill" nav treatment
   targeting `.nav`, but `.nav` / `#topNav` is the legacy header that
   is deliberately hidden (`display:none`) in favor of the `.vibe-nav`
   header injected by surfsup-vibe.js. That rule has never once
   rendered. Rather than guess at new offsets for a floating pill
   (real risk of overlapping the hero on some viewport), this keeps
   the flush top bar the reference sites actually use and just
   refines it — clearer blur, a soft shadow instead of a hard edge. */
.vibe-nav{
  box-shadow:0 1px 0 rgba(17,17,15,.08),0 12px 28px -20px rgba(17,17,15,.35)!important;
}

/* ------------------------------------------------------------------ */
/* 4) Soft cross-fades at the two remaining light/dark seams (into and
   out of the hero, into and out of the Sample Machine) so those two
   transitions read as a blend rather than a cut. Every other section
   now shares the same paper family, so they only need the existing
   hairline seam — no color jump left to hide. */
#worked-with,#tools,#proof{position:relative}
#worked-with:before,#proof:before{
  content:"";position:absolute;top:0;left:0;right:0;height:min(160px,22vw);
  background:linear-gradient(180deg,rgba(17,17,16,.4),transparent);
  pointer-events:none;z-index:1;
}
#tools:before{
  content:"";position:absolute;top:0;left:0;right:0;height:min(140px,18vw);
  background:linear-gradient(180deg,var(--v27-paper,var(--v28-fallback-paper)),transparent);
  opacity:.5;pointer-events:none;z-index:1;
}

/* ------------------------------------------------------------------ */
/* 5) Scroll reveal: grid/editorial content eases in as it enters the
   viewport instead of just appearing, matching the calmer, more
   deliberate motion of the reference sites. Moving rails (artist
   strip, records marquee, proof rail) are intentionally excluded —
   they already move on their own. surfsup-v28-polish.js adds/removes
   the classes below; this block only defines how they animate. */
.v28-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);
}
.v28-reveal.v28-visible{
  opacity:1;
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  .v28-reveal{opacity:1!important;transform:none!important;transition:none!important}
}