/* hold-indicator.css — v1.24.131: vaporwave hold-progress indicator.
 * One fixed overlay (#nn-holdfx) is created lazily by hold-indicator.js and
 * shown only while a hold gesture is in progress. All progress motion is
 * CSS keyframes whose duration is the target hold threshold, delivered
 * through the --dur custom property — no per-frame JS, zero idle cost.
 * The overlay never takes pointer events; JS places it offset from the
 * press point — clear of the thumb, fully on-screen (v1.24.159). */
.nnholdfx {
  position: fixed;
  left: 0; top: 0;
  width: 92px; height: 92px;
  margin: -46px 0 0 -46px;
  z-index: 9900;
  pointer-events: none;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .16s ease-out, transform .16s ease-out;
  filter: drop-shadow(0 0 10px rgba(255, 46, 136, .45))
          drop-shadow(0 0 22px rgba(0, 229, 255, .25));
}
.nnholdfx.on { opacity: 1; transform: scale(1); }
.nnholdfx.done { opacity: 1; transform: scale(1.1); }
.nnholdfx.out { opacity: 0; transform: scale(.86); }
.nnholdfx svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nnholdfx.done svg { animation: nnhold-done .3s ease-out both; }
@keyframes nnhold-done {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.13); filter: brightness(1.7); }
  100% { transform: scale(1.05); filter: brightness(1.25); }
}

/* Shared scene base: dark glass disc so the art reads on any background. */
.nnholdfx .fx-base {
  fill: rgba(10, 4, 26, .62);
  stroke: rgba(0, 229, 255, .35);
  stroke-width: 1;
}

/* --- SUN: fill rises bottom-to-top; ring drains over the same span --- */
.nnholdfx .fx-rise {
  animation: nnhold-rise var(--dur, 500ms) linear both;
}
@keyframes nnhold-rise {
  from { transform: translateY(97px); }
  to { transform: translateY(0); }
}
.nnholdfx .fx-ring {
  fill: none;
  stroke: #00e5ff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 257.6;
  stroke-dashoffset: 257.6;
  animation: nnhold-ring var(--dur, 500ms) linear both;
}
@keyframes nnhold-ring {
  from { stroke-dashoffset: 257.6; }
  to { stroke-dashoffset: 0; }
}

/* --- PEAKS: ridges draw in sequence, fills bloom behind them --- */
.nnholdfx .fx-ridge {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  fill-opacity: 0;
  animation: nnhold-draw calc(var(--dur, 500ms) * .5) linear both,
             nnhold-fillfade calc(var(--dur, 500ms) * .5) linear both;
  animation-delay: var(--rd, 0ms), var(--rd, 0ms);
}
.nnholdfx .fx-ridge-back { --rd: 0ms; }
.nnholdfx .fx-ridge-mid { --rd: calc(var(--dur, 500ms) * .25); }
.nnholdfx .fx-ridge-front { --rd: calc(var(--dur, 500ms) * .5); }
@keyframes nnhold-draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
@keyframes nnhold-fillfade {
  from { fill-opacity: 0; }
  to { fill-opacity: .9; }
}
.nnholdfx .fx-floor { opacity: 0; animation: nnhold-fadein var(--dur, 500ms) linear both; }
.nnholdfx .fx-fadein { animation: nnhold-fadein var(--dur, 500ms) linear both; }
@keyframes nnhold-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* peaks sun keeps its own base opacity under the fade-in */
.nnholdfx.style-peaks .fx-halo { animation-name: nnhold-fadein18; }
@keyframes nnhold-fadein18 {
  from { opacity: 0; }
  to { opacity: .18; }
}

/* --- DOLPHIN: gradient sweep travels the arc --- */
.nnholdfx .fx-sweep {
  animation: nnhold-sweep var(--dur, 500ms) linear both;
}
@keyframes nnhold-sweep {
  from { transform: translateX(-97px); }
  to { transform: translateX(0); }
}
.nnholdfx .fx-edgeglow { opacity: .8; }
/* Splash rings + droplets: only on hold complete. */
.nnholdfx .fx-splash { opacity: 0; }
.nnholdfx .fx-splash circle {
  fill: none; stroke: #22d3ee; stroke-width: 1.6;
  transform-box: fill-box; transform-origin: center;
}
.nnholdfx .fx-splash .fx-drop { fill: #a5f3fc; stroke: none; }
.nnholdfx.done .fx-splash { opacity: 1; }
.nnholdfx.done .fx-splash circle { animation: nnhold-splash .38s ease-out both; }
.nnholdfx.done .fx-splash .fx-drop { animation: nnhold-drop .38s ease-out both; }
@keyframes nnhold-splash {
  from { transform: scale(.35); opacity: .95; }
  to { transform: scale(2.1); opacity: 0; }
}
@keyframes nnhold-drop {
  from { transform: translateY(3px); opacity: 0; }
  35% { opacity: 1; }
  to { transform: translateY(-5px); opacity: 0; }
}

/* Reduced motion: no travel, no draw-on — the lit art simply fades in
 * over the hold duration, and completion is a plain opacity settle. */
@media (prefers-reduced-motion: reduce) {
  .nnholdfx .fx-rise, .nnholdfx .fx-sweep, .nnholdfx .fx-ring,
  .nnholdfx .fx-ridge, .nnholdfx .fx-floor, .nnholdfx .fx-fadein,
  .nnholdfx.done svg, .nnholdfx.done .fx-splash circle,
  .nnholdfx.done .fx-splash .fx-drop { animation: none !important; }
  .nnholdfx .fx-ring { display: none; }
  .nnholdfx .fx-ridge { stroke-dashoffset: 0; fill-opacity: .9; }
  .nnholdfx .fx-floor { opacity: 1; }
  .nnholdfx .fx-lit { opacity: 0; transition: opacity var(--dur, 500ms) linear; }
  .nnholdfx.on .fx-lit { opacity: 1; }
  .nnholdfx .fx-edgeglow, .nnholdfx .fx-splash { display: none; }
  .nnholdfx { transition: opacity .16s ease-out; transform: none; }
  .nnholdfx.done, .nnholdfx.out { transform: none; }
}