/* ============================================================
   DEPTH, FLOW AND A LETTERHEAD WITH NOTHING UNDER IT         round of 17 October
   Written beside house/depth.js. Three things live here:

     flow       a section that is not a box: [data-flow] comes up as it enters and lets go as it
                leaves, and overlaps its neighbours a little, so one passes into the next the way
                a sheet slides over a sheet. No rule, no edge, no background.
     rhythm     .flow .flow-tight .flow-loose: how much air a section is given above and below
     letterhead nothing: no sheet, no feather and no mist under #nav, ever (see the rule below)

   Where the browser has scroll-linked animation (animation-timeline: view()) a flow is a stylesheet
   thing, drawn by the compositor, and cannot stutter; elsewhere depth.js draws the same ranges.
   Reduced motion: everything is at rest and whole.
   ============================================================ */

:root{
  --flow-overlap:6vh;                      /* how far a flowing section slides under its neighbour */
  --flow-lift:3vh;                         /* how far it comes up from as it enters */
  --flow-feather:9vh;                      /* the soft mask of data-flow="soft" */
}

/* ---------- rhythm: air, in the house's own steps ---------- */
.flow{ --flow-pad:clamp(72px, 15vh, 176px); padding-block:var(--flow-pad); }
.flow-tight{ --flow-pad:clamp(36px, 8vh, 96px); }
.flow-loose{ --flow-pad:clamp(112px, 24vh, 280px); }

/* ---------- flow ---------- */
[data-flow]{ position:relative; margin-block:calc(var(--flow-overlap) * -1); }
/* soft: the section's own top and bottom are a feathered mask, so whatever lies under the seam is let through */
[data-flow="soft"]{
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 var(--flow-feather), #000 calc(100% - var(--flow-feather)), transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 var(--flow-feather), #000 calc(100% - var(--flow-feather)), transparent 100%);
}
@keyframes cp-flow-in{
  from{ opacity:0; translate:0 var(--flow-lift); }
  to{ opacity:1; translate:0 0; }
}
@keyframes cp-flow-out{
  from{ opacity:1; translate:0 0; }
  to{ opacity:0; translate:0 calc(var(--flow-lift) * -.66); }
}
@supports (animation-timeline: view()){
  [data-flow]{
    animation:cp-flow-in linear backwards, cp-flow-out linear forwards;
    animation-timeline:view(), view();
    /* in: over the first half window of its entering; out: over the last 40% of the window it leaves by */
    animation-range:entry 0px entry min(50vh, 70%), exit calc(100% - min(40vh, 40%)) exit 100%;
  }
}

/* ---------- nothing under the letterhead ----------
   The words float over the page: no sheet, no feather, no gradient, no blur, no backdrop, whatever the room
   or the scroll. Every old mist under #nav (site.css, type.css, gallery.css, ledger-stage.css ...) is put out
   here as a backstop, so that a room's own rule cannot bring one back. The words are kept legible by their ink
   (app.js: CP.nav.ink reads what lies under them). */
#nav::before, #nav::after, #nav.is-over::before{ content:none !important; display:none !important; }
#nav{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }

/* ---------- the overlay for ?depth=1 (localhost only) ---------- */
#cp-depth-debug{
  position:fixed; left:8px; bottom:8px; z-index:9999; margin:0; padding:8px 10px;
  font:10px/1.5 var(--num, var(--body, system-ui, sans-serif)); letter-spacing:0; color:#111;
  background:rgba(255,255,255,.94); pointer-events:none; white-space:pre; max-width:calc(100vw - 16px); overflow:hidden;
}

@media (prefers-reduced-motion:reduce){
  [data-flow]{ animation:none !important; opacity:1; translate:none; }
}