/* Sidewave · Interference. The brand is one cut: a line at 11° (tan 11° = .1944) through everything.
   Shared by the home page, sign-in, Terms/Privacy and 404. 1K is a separate brand and never loads this file.
   - .cut: built by /sw/cut.js from any [data-cut] element. Two copies of the content, split along the 11° line;
     the lower piece slides along the cut (--s, set every frame by cut.js). Without JS the element is untouched.
   - .ocean: the fixed WebGL sea (/sw/ocean.js) and its still fallback.
   The footer row itself lives in shell.css: every page has the same one (Terms · Privacy · ©). */
:root { --cut: 19.44vw; } /* the rise of an 11° line across the full width */

/* ── The cut ── */
/* The pieces are plain copies of the element's content: they never pick up page rules aimed at spans inside headings. */
.cut .cut-in, .cut .cut-a, .cut .cut-b { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; padding: 0; }
.cut-in { position: relative; display: block; }
.cut-in[data-text] { display: inline-block; vertical-align: top; max-width: 100%; }
.cut-a, .cut-b { display: block; }
.cut-b { position: absolute; inset: 0; pointer-events: none; }
/* Each piece moves half the shift, in opposite directions, along the cut (cos 11° / 2, sin 11° / 2). */
.cut[data-cut-live] .cut-a { transform: translate(calc(var(--s, 0px) * -.4909), calc(var(--s, 0px) * .0954)); }
.cut[data-cut-live] .cut-b { transform: translate(calc(var(--s, 0px) * .4909), calc(var(--s, 0px) * -.0954)); }
.cut:not([data-cut-live]) .cut-b { display: none; }
/* A mark at rest is whole (one copy, unclipped); the cut shows only while it moves. The swell is the exception. */
.cut-in.is-small:not(.is-split) .cut-a { clip-path: none !important; }
.cut-in.is-small:not(.is-split) .cut-b { visibility: hidden; }
/* The home wordmark: above the cut it stands solid; below, the sheared piece is drawn in water lines (--wl a period),
   and the wave's front is a line of light along the cut that runs on past the letters on both sides. */
.cut--water .cut-b { -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 calc(var(--wl, 6px) * .56), transparent calc(var(--wl, 6px) * .56) var(--wl, 6px)); mask-image: repeating-linear-gradient(180deg, #000 0 calc(var(--wl, 6px) * .56), transparent calc(var(--wl, 6px) * .56) var(--wl, 6px)); }
.cut-line { position: absolute; left: 50%; top: 50%; width: calc(var(--cw, 100%) + 12vw); height: 2px; pointer-events: none; transform: translate(-50%, -50%) rotate(-11deg);
  background: linear-gradient(90deg, rgba(167, 214, 237, 0), rgba(167, 214, 237, .55) 16%, #f3f6fa 50%, rgba(167, 214, 237, .55) 84%, rgba(167, 214, 237, 0));
  box-shadow: 0 0 18px 2px rgba(167, 214, 237, .45); opacity: .9; }
.cut:not([data-cut-live]) .cut-line { display: none; }

/* ── The sea ── */
.ocean {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* deep space → horizon glow → deep water (the stars are drawn by ocean.js). The GL sheet is drawn on top; this is also the no-WebGL fallback. */
  background:
    radial-gradient(120% 22% at 50% 37%, rgba(93, 139, 208, .42) 0%, rgba(93, 139, 208, .12) 42%, rgba(93, 139, 208, 0) 70%),
    radial-gradient(60% 40% at 78% 8%, rgba(70, 76, 150, .10) 0%, rgba(70, 76, 150, 0) 70%),
    linear-gradient(180deg, #000105 0%, #01030b 14%, #030a1d 27%, #0a2652 36.5%, #061734 42%, #040d1f 60%, #030916 100%);
}
.ocean-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ocean[data-ocean="fallback"]::after, .ocean:not([data-ocean])::after {
  /* still sea: a dotted field that thins toward the horizon */
  content: ""; position: absolute; left: 0; right: 0; top: 38%; bottom: 0;
  background-image: radial-gradient(circle, rgba(167, 214, 237, .55) 0 .7px, transparent 1.2px);
  background-size: 7px 7px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 12%, rgba(0, 0, 0, .9) 45%, rgba(0, 0, 0, .6) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 12%, rgba(0, 0, 0, .9) 45%, rgba(0, 0, 0, .6) 100%);
  transform: perspective(600px) rotateX(55deg); transform-origin: 50% 0;
}
.ocean[data-ocean="live"]::after { display: none; }