/* ============================================================================
   VESSEL — styles.css
   Everything Tailwind can't (or shouldn't) express:
   canvas layering, scrollbar removal, split-type masks, liquid-button canvas.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. SCROLL BEHAVIOUR
   The scrollbar is hidden because the scrollbar IS the camera dolly —
   showing it would break the spatial illusion. Scrolling still works via
   wheel / trackpad / touch / keyboard (Lenis preserves all inputs).
--------------------------------------------------------------------------- */
html {
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* legacy Edge/IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;                    /* Chrome / Safari / Opera */
  width: 0;
  height: 0;
}

/* Lenis recommendation: it owns the smoothing, so disable native smooth */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------------------------------------------------------------------------
   2. WEBGL CANVAS
   Fixed behind everything; DOM sections scroll over it. pointer-events off
   so links and buttons above stay clickable everywhere.
--------------------------------------------------------------------------- */
#gl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* Soft top/bottom fade so DOM type never fights bright 3D highlights */
.edge-fade {
  background:
    linear-gradient(to bottom,
      rgba(6, 8, 7, 0.85) 0%,
      rgba(6, 8, 7, 0)   18%,
      rgba(6, 8, 7, 0)   82%,
      rgba(6, 8, 7, 0.85) 100%);
}

/* ---------------------------------------------------------------------------
   3. SPLIT TYPOGRAPHY MASKS
   splitChars() in main.js wraps every glyph:  .char-mask > .char
   The mask clips; GSAP slides .char up from yPercent:110 into view.
--------------------------------------------------------------------------- */
.char-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Italiana has tall ascenders — give the mask breathing room so glyphs
     aren't shaved during the reveal */
  padding-top: 0.06em;
  margin-top: -0.06em;
}
.char {
  display: inline-block;
  will-change: transform;
}

/* [data-reveal] blocks start invisible (GSAP autoAlpha animates them in);
   this prevents a flash of unstyled content before JS boots. */
[data-reveal] { visibility: hidden; }

/* ---------------------------------------------------------------------------
   4. PRODUCT PANELS — the broken grid
   Panels alternate edges of the viewport; the sculpture occupies the
   opposite half of the frame (the camera path composes it there).
--------------------------------------------------------------------------- */
.product-panel { justify-content: flex-start; }
.product-panel.panel-right { justify-content: flex-end; text-align: right; }
.product-panel.panel-right .flex { justify-content: flex-end; }

/* ---------------------------------------------------------------------------
   5. LIQUID BUTTONS
   The micro WebGL canvas sits behind the label (z-10 on the <span>).
--------------------------------------------------------------------------- */
.liquid-btn { isolation: isolate; cursor: pointer; }
.liquid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   6. FOCUS VISIBILITY & REDUCED MOTION
   Keyboard users get a clear brass ring; motion-sensitive users get a
   static (but complete) experience — main.js zeroes durations, and this
   kills any leftover CSS transitions as a belt-and-braces measure.
--------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible {
  outline: 1px solid #C2A164;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { visibility: visible; }
}

/* ---------------------------------------------------------------------------
   7. SELECTION + TAP HIGHLIGHT POLISH
--------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }