/* The press (W7): unvelt's interaction and scroll language, on every page. Ported from the approved prototype
   (docs/prototypes/website-v1/press/press.css, 20 Oct). Paper and two inks (ink, sepia). Flat at rest; halftone dots
   appear only while something prints. Everything is gated on html.motion (set in the head only when reduced motion and
   Save-Data are off), so without JS, or with reduced motion, the page is the comp. Loaded last. */
:root { --ez: cubic-bezier(.2, .7, .2, 1); }
@property --R { syntax: "<length>"; inherits: true; initial-value: -130px; }
@property --u { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --r { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --a { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --m { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* ---- printing: a dot screen at 45° and a roller that lays solid ink from the left. One ink: no sepia ghost ---- */
.motion .pr:not(.done), .motion .hload, .motion .plate .scr {
  -webkit-mask-image: linear-gradient(var(--ga, 90deg), #000 var(--a), transparent calc(var(--a) + 1px)),
    radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + .6px)), radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + .6px));
  mask-image: linear-gradient(var(--ga, 90deg), #000 var(--a), transparent calc(var(--a) + 1px)),
    radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + .6px)), radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + .6px));
  -webkit-mask-size: 100% 100%, 5px 5px, 5px 5px; mask-size: 100% 100%, 5px 5px, 5px 5px;
  -webkit-mask-position: 0 0, 0 0, 2.5px 2.5px; mask-position: 0 0, 0 0, 2.5px 2.5px;
  -webkit-mask-repeat: no-repeat, repeat, repeat; mask-repeat: no-repeat, repeat, repeat; }
.motion .hload { animation: print 1.1s var(--ez) both; animation-delay: calc(.3s + var(--i, 0) * .11s); }
@keyframes print { 0% { --r: 0px; --a: -10%; } 55% { --r: 2.2px; } 100% { --r: 2.6px; --a: 112%; } }

/* ---- 1. things you press: a small halftone lens sits under the pointer and follows it; pressing prints solid ---- */
.motion .btn:not(.ghost), .motion .cite, .motion .toggle > a { position: relative; isolation: isolate; cursor: pointer; }
.motion .hx { position: absolute; inset: 0; pointer-events: none; filter: url(#ht); }
.motion .lb { position: relative; color: #fbfbf9; mix-blend-mode: difference; display: inline-flex; gap: 8px; align-items: center; }
/* the solid button: the lens lifts the ink under the pointer (the words show through it); pressing closes it */
.motion .btn:not(.ghost) { background: var(--paper); clip-path: none; --R: -60px; transition: --R .35s var(--ez), transform .12s var(--ez); }
.motion .btn:not(.ghost) > .hx { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  background: radial-gradient(circle at var(--x, 0%) var(--y, 50%), rgba(0, 0, 0, 0) var(--R), #000 calc(var(--R) + 34px)),
    radial-gradient(circle, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, 0) 3.4px) 0 0 / 5px 5px, radial-gradient(circle, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, 0) 3.4px) 2.5px 2.5px / 5px 5px; }
.motion .btn:not(.ghost)::after { content: ""; position: absolute; inset: 0; background: var(--ink); pointer-events: none;
  clip-path: polygon(evenodd, 0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 0,
    1px 1px, 1px calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 12.41px, calc(100% - 12.41px) 1px, 1px 1px); }
.motion .btn:not(.ghost):hover, .motion .btn:not(.ghost).f-hover { --R: 2px; }
.motion .btn:not(.ghost):active, .motion .btn:not(.ghost).f-press { --R: -60px; transform: translateY(1px); transition-duration: .12s, .06s; }
/* chips: the outline inks, and a small pool of ink sits under the pointer; pressing fills the chip */
.motion .cite { background: #f3f3f0; overflow: hidden; --R: -40px; transition: --R .3s var(--ez), transform .12s var(--ez), border-color .2s; }
.motion .cite > .hx { background: radial-gradient(circle at var(--x, 0%) var(--y, 50%), #000 var(--R), rgba(0, 0, 0, 0) calc(var(--R) + 22px)),
    radial-gradient(circle, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, 0) 3.4px) 0 0 / 5px 5px, radial-gradient(circle, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, 0) 3.4px) 2.5px 2.5px / 5px 5px; }
.motion .cite:hover, .motion .cite.f-hover { --R: 0px; border-color: var(--ink); }
.motion .cite:focus-visible, .motion .cite.f-focus, .motion .cite.hot { border-color: var(--ink); }
.motion .cite:active, .motion .cite.f-press { --R: 330px; transform: translateY(1px); transition-duration: .25s, .06s, .2s; }
/* the sheet's held hovers: the pointer just inside, then moved along (the lens follows) */
.motion .btn:not(.ghost).f-mid { --R: 2px; --x: 24%; --y: 55%; }
.motion .btn:not(.ghost).f-hover:not(.f-mid) { --x: 76%; --y: 55%; }
.motion .cite.f-mid { --R: 0px; --x: 18%; --y: 50%; border-color: var(--ink); }
.motion .cite.f-hover:not(.f-mid) { --x: 74%; --y: 50%; }

/* the price toggle: the chosen option is printed solid; the other takes the chip's pool under the pointer */
.motion .toggle { position: relative; isolation: isolate; background: var(--paper); }
.motion .toggle .lb { padding: 0; } .motion .toggle > a { white-space: nowrap; background: var(--paper); color: var(--ink); text-decoration: none; overflow: hidden; }
.motion .toggle > a { --R: -40px; transition: --R .3s var(--ez); }
.motion .toggle > a > .hx { background: radial-gradient(circle at var(--x, 0%) var(--y, 50%), #000 var(--R), rgba(0, 0, 0, 0) calc(var(--R) + 28px)),
    radial-gradient(circle, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, 0) 3.4px) 0 0 / 5px 5px, radial-gradient(circle, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, 0) 3.4px) 2.5px 2.5px / 5px 5px; }
.motion .toggle > a.on { --R: 400px; }
.motion .toggle > a:not(.on):hover, .motion .toggle > a.f-hover { --R: 0px; }
.motion .toggle > a:not(.on):active, .motion .toggle > a.f-press { --R: 400px; transition-duration: .2s; }

/* ---- 2. links: the line goes from one pixel to two, dot by dot ---- */
.motion .btn.ghost, .motion footer.foot a, .motion p.body a, .motion .lnk, .motion nav.links a:not(.btn) { text-decoration: none; padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat,
    radial-gradient(circle, currentColor var(--u), transparent calc(var(--u) + .5px)) 0 calc(100% + .5px) / 2px 2px repeat-x;
  transition: --u .3s var(--ez), color .15s; }
.motion nav.links a:not(.btn):not(.here) { background-size: 0 1px, 2px 2px; }
.motion .btn.ghost:hover, .motion footer.foot a:hover, .motion p.body a:hover, .motion .lnk:hover, .motion nav.links a:not(.btn):hover,
.motion .btn.ghost:focus-visible, .motion footer.foot a:focus-visible, .motion p.body a:focus-visible, .motion .lnk:focus-visible, .motion nav.links a:not(.btn):focus-visible,
.motion .f-hover:is(.btn.ghost, a), .motion .f-focus:is(.btn.ghost, a) { --u: 1px; color: var(--ink); }
.motion .btn.ghost:active, .motion footer.foot a:active, .motion .lnk:active, .motion nav.links a:not(.btn):active, .motion a.f-press:not(.btn), .motion .btn.ghost.f-press { --u: 1px; opacity: .55; }

/* one keyboard ring everywhere, outside the shape */
.motion a:focus-visible, .motion button:focus-visible, .motion .cite:focus-visible, .motion [tabindex]:focus-visible, .motion .f-focus { outline: 2px solid var(--ink); outline-offset: 5px; }
.motion .fld input:focus-visible, .motion .fld select:focus-visible, .motion .fld textarea:focus-visible, .motion .fld .f-focus { outline-offset: 2px; }

/* ---- 3. samples you look at: crop marks where there's room; nothing moves ---- */
.motion .hcard { position: relative; }
.motion .hcard::after { content: ""; position: absolute; inset: 4px -10px; pointer-events: none; opacity: 0; transition: opacity .2s;
  --c: linear-gradient(var(--ink), var(--ink));
  background: var(--c) 0 0 / 9px 1px no-repeat, var(--c) 0 0 / 1px 9px no-repeat, var(--c) 100% 0 / 9px 1px no-repeat, var(--c) 100% 0 / 1px 9px no-repeat,
    var(--c) 0 100% / 9px 1px no-repeat, var(--c) 0 100% / 1px 9px no-repeat, var(--c) 100% 100% / 9px 1px no-repeat, var(--c) 100% 100% / 1px 9px no-repeat; }
.motion .hcard:hover::after, .motion .hcard.f-hover::after { opacity: 1; }
.motion .askp { transition: border-color .15s; } .motion .askp:is(:hover, .f-hover) { border-color: var(--ink); }

/* fields: pointing tints the paper with a light screen; focus registers the outline */
.motion .fld input, .motion .fld select, .motion .fld textarea { transition: background-color .15s; }
.motion .fld :is(input, select, textarea):is(:hover, .f-hover) { background-image: radial-gradient(circle, rgba(16, 16, 16, .16) .7px, transparent 1.1px); background-size: 4px 4px; }

/* the seal in the header turns with the scroll (press.js) */
.brand svg { transform-origin: 50% 50%; }
.motion .wrap { overflow-x: clip; }