/* The fluid shades the page paper. Typography and opaque scene surfaces sit
 * above it, so the paper layer cannot cover a button label or scene lighting. */
.pointer-fluid-canvas {
  position:fixed;inset:0;display:block;width:100%;height:100%;
  z-index:1;pointer-events:none;
}
.pointer-fluid-canvas[hidden] {display:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .pointer-fluid-ready .hero-title {position:relative;z-index:2}
  .pointer-fluid-ready .hero-visual,.pointer-fluid-ready .scroll-marker {z-index:2}
  .pointer-fluid-ready .intro {z-index:2}
  /* The transparent work content sits above the fixed project image canvas. */
  .pointer-fluid-ready .work {position:relative;z-index:3}
  .pointer-fluid-ready .journey-section,.pointer-fluid-ready .contact-section {z-index:2}
  .pointer-fluid-ready .dom-footer-top,.pointer-fluid-ready .dom-footer-middle,.pointer-fluid-ready .dom-footer-bottom {z-index:2}
}
/* The tablet's presentation owns its silhouette and shadow. Keep the entry
 * paper on the same body surface as Featured Work, so one fluid field can
 * cross the section boundary without being covered by a second paper layer. */
@media (min-width:813px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .pointer-fluid-ready .journey-section:not([data-dark=true]),
  .pointer-fluid-ready .journey-section:not([data-dark=true]) .journey-stage,
  .pointer-fluid-ready .journey-section:not([data-dark=true]) .journey-canvas {background:transparent}
}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse) {
  .pointer-fluid-canvas {display:none}
}