/* ============================================================
   CONCEPTO P — THE MEMBERS' LINE, AND THE WATER IT IS ANSWERED WITH
   The line lives at the head of the navigation centre and nowhere else.
   It has no colour: bronze is the launch page's, and the standing house is
   paper, ink and the greys between them. So the lamp does not glow warm —
   it develops, the way silver does, from a latent trace to full black, and
   the rule under the word takes ink at the same time.

   The water (.rip) is light on a surface and nothing more: one lens ring
   that bends what it passes over, a veil of plain light and shade so the
   water is felt on cream as well as on black, a grey skin in soft-light so
   a crest lifts the page and a trough lets it down, and the strike of
   contact. Reduced motion keeps the lift and drops every wave.
   ============================================================ */

/* ---------- the line ---------- */
.mem{
  --mem-ink:26,24,20;
  position:absolute; z-index:3;
  top:calc(var(--nav-h)*.5 - 11px); left:var(--gutter);
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono);
}
[data-tone="dark"] .mem,
.mem.mem-on-dark{ --mem-ink:236,234,229; }

.mem-say{
  position:relative;
  display:flex; align-items:center; gap:9px;
  padding:9px 2px 8px 0;
  background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:9.5px; line-height:1;
  letter-spacing:.24em; text-transform:uppercase; white-space:nowrap;
  color:rgba(var(--mem-ink),.32);
  transition:color .5s var(--settle, var(--ease)), letter-spacing .6s var(--settle, var(--ease));
}
.mem-say::after{
  content:""; position:absolute; left:0; right:2px; bottom:3px; height:1px;
  background:rgba(var(--mem-ink),.11);
  transition:background-color .5s var(--settle, var(--ease));
}
.mem-say:focus-visible{ outline:none; }
.mem-say:focus-visible::after{ background:rgba(var(--mem-ink),.9); }

/* the hand comes near: the word takes ink, the rule takes ink, the lamp develops */
.mem:hover .mem-say,
.mem:focus-within .mem-say,
.mem[data-mem="open"] .mem-say,
.mem[data-mem="in"] .mem-say{ color:rgba(var(--mem-ink),.94); letter-spacing:.28em; }
.mem:hover .mem-say::after,
.mem:focus-within .mem-say::after,
.mem[data-mem="open"] .mem-say::after,
.mem[data-mem="in"] .mem-say::after{ background:rgba(var(--mem-ink),.44); }

.mem-lamp{
  width:5px; height:5px; flex:0 0 auto; border-radius:50%;
  background:rgba(var(--mem-ink),.2);
  box-shadow:0 0 0 0 rgba(var(--mem-ink),0);
  transition:background-color .55s var(--settle, var(--ease)), box-shadow .55s var(--settle, var(--ease));
}
.mem:hover .mem-lamp,
.mem:focus-within .mem-lamp{
  background:rgba(var(--mem-ink),.92);
  box-shadow:0 0 0 3px rgba(var(--mem-ink),.07), 0 0 11px 1px rgba(var(--mem-ink),.14);
}
/* a level that is in keeps its light, and the light keeps breathing */
.mem[data-mem="in"] .mem-lamp{
  background:rgba(var(--mem-ink),.96);
  box-shadow:0 0 0 3px rgba(var(--mem-ink),.09), 0 0 13px 2px rgba(var(--mem-ink),.17);
  animation:mem-kept 5.2s var(--settle, var(--ease)) infinite;
}
@keyframes mem-kept{
  0%,100%{ box-shadow:0 0 0 3px rgba(var(--mem-ink),.09), 0 0 13px 2px rgba(var(--mem-ink),.17); }
  50%{ box-shadow:0 0 0 4px rgba(var(--mem-ink),.05), 0 0 17px 3px rgba(var(--mem-ink),.1); }
}

/* the field: shut, it takes no room at all */
.mem-gate{
  display:flex; align-items:center; gap:11px;
  max-width:0; opacity:0; overflow:hidden; pointer-events:none;
  transition:max-width .62s var(--settle, var(--ease)), opacity .38s var(--settle, var(--ease));
}
.mem[data-mem="open"] .mem-gate{ max-width:min(300px,42vw); opacity:1; pointer-events:auto; }

.mem-key{
  width:clamp(110px,18vw,166px); padding:5px 0 4px;
  background:none; border:0; border-bottom:1px solid rgba(var(--mem-ink),.3);
  color:rgb(var(--mem-ink));
  font-family:inherit; font-size:10px; letter-spacing:.18em;
  transition:border-color .4s var(--settle, var(--ease));
}
.mem-key:focus{ outline:none; border-bottom-color:rgba(var(--mem-ink),.8); }
.mem-key::placeholder{ color:rgba(var(--mem-ink),.34); letter-spacing:.2em; }

.mem-go{
  padding:5px 0 4px; background:none; border:0; border-bottom:1px solid rgba(var(--mem-ink),.3);
  cursor:pointer; color:rgba(var(--mem-ink),.72);
  font-family:inherit; font-size:9px; letter-spacing:.22em;
  transition:color .35s var(--settle, var(--ease)), border-color .35s var(--settle, var(--ease));
}
.mem-go:hover, .mem-go:focus-visible{ color:rgb(var(--mem-ink)); border-bottom-color:rgb(var(--mem-ink)); outline:none; }
.mem-go[disabled]{ opacity:.45; cursor:default; }

.mem-note{
  font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(var(--mem-ink),.5); opacity:0; white-space:nowrap;
  transition:opacity .4s var(--settle, var(--ease));
}
.mem-note.is-on{ opacity:1; }

/* the sheet is still coming up out of the developer: nothing is asked yet */
.tray.is-home:not(.is-live) .mem,
.tray.is-going .mem,
.tray.is-drain .mem{ opacity:0; pointer-events:none; transition:opacity .25s var(--settle, var(--ease)); }
.mem{ transition:opacity .7s var(--settle, var(--ease)); }

@media (max-width:759px){
  .mem{ gap:9px; }
  .mem-note{ display:none; }
}

/* ---------- the water ---------- */
/* The wrapper is deliberately not a box. A position:fixed element is a
   stacking context and a stacking context isolates blending, so a skin
   nested inside a fixed layer would blend with that empty layer instead of
   with the house and paint its grey out flat. So .rip lays out as nothing
   and only carries the numbers down; each surface below is fixed in its own
   right, and so each one blends against the page. */
.rip{ position:static; display:block; width:0; height:0; }
.rip > *{ position:fixed; pointer-events:none; }

.rip-skin{
  inset:0; width:100%; height:100%; display:block; z-index:95;
  mix-blend-mode:soft-light; filter:blur(var(--rip-soft,4px));
}
/* plain light and plain shade, so the water is still there on paper white
   and on ink black, where soft-light has nothing left to bend */
.rip-veil{
  inset:0; width:100%; height:100%; display:block; z-index:94;
  filter:blur(var(--rip-soft,4px));
}
/* the body of the water, under its own surface: this is the only part that
   moves the page itself rather than the light on it */
.rip-lens{
  inset:0; z-index:93; opacity:0;
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
}
.rip-strike{
  left:var(--rx,50%); top:var(--ry,50%); z-index:96;
  width:2px; height:2px; margin:-1px 0 0 -1px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.42) 0%, rgba(255,255,255,.13) 48%, rgba(255,255,255,0) 74%);
  mix-blend-mode:screen; opacity:0;
}
.rip.is-struck .rip-strike{ animation:rip-strike 560ms var(--settle, var(--ease)) both; }
@keyframes rip-strike{
  0%{ transform:scale(5); opacity:0; }
  16%{ transform:scale(84); opacity:.7; }
  100%{ transform:scale(430); opacity:0; }
}

/* no motion: the house still answers, it just does not move */
.rip-still{ inset:0; z-index:95; opacity:0; background:rgba(255,255,255,.055); }
.rip.is-quiet .rip-still{ animation:rip-quiet 880ms var(--settle, var(--ease)) both; }
@keyframes rip-quiet{ 0%{ opacity:0; } 24%{ opacity:1; } 100%{ opacity:0; } }

@media (prefers-reduced-motion:reduce){
  .mem[data-mem="in"] .mem-lamp{ animation:none; }
  .rip-skin, .rip-lens, .rip-strike{ display:none; }
}