/* The glass answers a finger. It is a hard sheet, not a pond: contact reads as a
   point and a hairline ring that arrives in 120ms, and only then do fine rings
   travel out across the surface and thin away.

   Rules of the file:
   - Only transform and opacity animate. box-shadow and border-radius are static
     values the element already carries.
   - The rings are a fixed pool in the HTML, replayed by a class swap. Nothing is
     created or destroyed while a finger is down.
   - will-change sits on the pool only, never on the one-shot marks.
   - Everything is inside .nm-touch, which is clipped to the window, so no part of
     this can push the page sideways at any width. */

.nm-touch{position:absolute;inset:var(--pane-top) var(--pane-side) 24px;z-index:5;
  overflow:hidden;pointer-events:none;
  --tx:50%;--ty:50%;--hit-far:34px;--wave-far:96px}
/* Blending is switched on by the first touch, so an untouched page never asks the
   compositor to keep a backdrop for a layer that is entirely transparent. */
.nm-touch.is-awake{mix-blend-mode:screen}
.nm-touch>*{position:absolute;left:var(--tx);top:var(--ty);pointer-events:none}

/* a. Contact. A 3px point that drops away in steps — a hit, not a fade. */
.nm-touch-hit{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px #eafcff;opacity:0}
.nm-touch-hit.is-live{animation:nmTouchHit .16s steps(3,jump-none) both}
@keyframes nmTouchHit{from{opacity:1}to{opacity:0}}

/* a. The same contact read as a ring: out to 34px in 120ms and gone. It stays a
      hairline the whole way, so it never becomes a soft swelling. */
.nm-touch-strike{width:var(--hit-far);height:var(--hit-far);
  margin:calc(var(--hit-far) / -2) 0 0 calc(var(--hit-far) / -2);
  border:1px solid #eafcff;border-radius:50%;opacity:0;transform:scale(.02)}
.nm-touch-strike.is-live{animation:nmTouchStrike .12s cubic-bezier(.1,.9,.2,1) both}
@keyframes nmTouchStrike{from{opacity:1;transform:scale(.02)}to{opacity:0;transform:scale(1)}}

/* c. Where the finger rested, the glass holds a faint print: 220ms in, 700ms out. */
.nm-touch-sheen{width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#dcefff1a,#dcefff00 72%)}
.nm-touch-sheen.is-live{animation:nmTouchSheen .92s linear both}
@keyframes nmTouchSheen{0%{opacity:0}24%{opacity:1}to{opacity:0}}

/* b. The travelling rings. The anchor carries nothing but the release fade, so
      lifting a finger never has to rewrite a ring's own 900ms life mid-flight.
      The ring is very slightly out of round and turns as it grows, which is what
      makes the edge read as a wave rather than a circle. */
.nm-touch-wave{width:0;height:0;opacity:1}
.nm-touch-wave i{position:absolute;left:0;top:0;
  width:var(--wave-far);height:var(--wave-far);
  margin:calc(var(--wave-far) / -2) 0 0 calc(var(--wave-far) / -2);
  border:1px solid #bfefff;box-shadow:0 0 6px #cbb8ff;
  border-radius:48% 52% 50% 49% / 51% 49% 52% 48%;
  opacity:0;transform:scale(.03);will-change:transform,opacity}
.nm-touch-wave.is-live i{animation:nmTouchWave .9s cubic-bezier(.15,.72,.3,1) both,
  nmTouchDim .9s linear both}
@keyframes nmTouchWave{from{transform:scale(.03) rotate(0deg)}to{transform:scale(1) rotate(28deg)}}
@keyframes nmTouchDim{0%{opacity:.9}62%{opacity:.36}to{opacity:0}}

/* The sheet gives under the finger, overshoots once and stops — a hard board's
   rebound. Held only while a pointer is down; with neither class the element
   carries no transform at all, which is what the rest of the page assumes. */
.nm-layout.is-pressed{transform:perspective(1400px) rotateX(var(--press-x,0deg)) rotateY(var(--press-y,0deg));
  transition:transform .12s cubic-bezier(.2,.9,.3,1)}
.nm-layout.is-easing{transform:none;transition:transform .42s cubic-bezier(.2,.9,.3,1.4)}

/* Phones: a shorter reach, still three rings. */
@media(max-width:800px){.nm-touch{--wave-far:72px}}

/* Reduced motion: the point of contact answers, nothing travels and nothing tilts.
   new-model-countdown.css already switches off every animation and transition
   inside .nm-hero at this setting, so the point is held by the class alone and
   the script takes it away after 160ms. */
@media(prefers-reduced-motion:reduce){
  .nm-touch-strike,.nm-touch-sheen,.nm-touch-wave{display:none}
  .nm-touch-hit.is-live{opacity:1}
  .nm-layout.is-pressed,.nm-layout.is-easing{transform:none;transition:none}
}