/* ── Sync Inc gravity mode ────────────────────────────────────────────────
   Styling for the no-gravity toy that runs on every page: the two control
   buttons, the optional attract pulse, and the click shockwave.

   The physics and the markup live in site-gravity.js. Load this file after
   site-chrome.css — the gravity-active nav rule has to beat the chrome's
   own background rules, and they carry the same specificity. */
:root {
  --gv-accent:    #41d6cb;
  --gv-accent-hi: #36c2b8;
}

/* ── Controls ── */
#gravity-btn, #reset-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 20px;
  transition: all 0.15s;
}

#gravity-btn {
  background: var(--gv-accent);
  color: #000000;
  border: 1px solid var(--gv-accent);
}

#gravity-btn:hover {
  background: var(--gv-accent-hi);
  border-color: var(--gv-accent-hi);
}

#reset-btn {
  display: none;
  background: #111;
  color: #888;
  border: 1px solid #2a2a2a;
}

#reset-btn:hover {
  background: #181818;
  color: #ffffff;
}

/* ── Gravity mode ── */
body.gravity-active {
  /* scroll intentionally allowed so users can explore all sections */
}

/* The nav is switched to position:absolute in gravity mode and drifts off
   with everything else — its background would otherwise stay painted behind
   the pieces as a stray band. */
body.gravity-active #site-nav {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* ── Attract pulse ──────────────────────────────────────────────────────
   Opt-in per page (SITE_GRAVITY.pulse). A glow that swells out from behind
   the button on a slow repeat, for someone who has started reading and would
   never otherwise look at the corner. It runs until the button is used, and
   does not return afterwards — once you know the toy is there, being nudged
   about it again is just nagging.

   Drawn with box-shadow rather than a pseudo-element on purpose: outset
   shadows paint behind the element's own background, whereas the button is a
   stacking context (position:fixed + z-index), so a z-index:-1 pseudo-element
   would paint on top of it instead of behind. */
#gravity-btn.is-pulsing {
  animation: gravity-pulse 2.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes gravity-pulse {
  0% {
    box-shadow: 0 0  0px 0px rgba(65, 214, 203, 0),
                0 0  0    0   rgba(65, 214, 203, 0.55),
                0 0  0    0   rgba(65, 214, 203, 0);
  }
  18% {
    box-shadow: 0 0 26px 7px rgba(65, 214, 203, 0.50),
                0 0  0    9px rgba(65, 214, 203, 0.30),
                0 0  0    0   rgba(65, 214, 203, 0);
  }
  45% {
    box-shadow: 0 0 20px 4px rgba(65, 214, 203, 0.20),
                0 0  0   21px rgba(65, 214, 203, 0),
                0 0  0    0   rgba(65, 214, 203, 0.38);
  }
  100% {
    box-shadow: 0 0  0px 0px rgba(65, 214, 203, 0),
                0 0  0   21px rgba(65, 214, 203, 0),
                0 0  0   28px rgba(65, 214, 203, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #gravity-btn.is-pulsing { animation: none; }
}

/* ── Shockwave ripple ── */
.ripple {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
}

.ripple-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  transform: scale(0);
  animation: ring-out 0.7s cubic-bezier(0.15, 0.5, 0.4, 1) forwards;
}

.ripple-ring:nth-child(2) {
  border-color: rgba(255,255,255,0.3);
  animation-duration: 1s;
  animation-delay: 0.07s;
}

.ripple-ring:nth-child(3) {
  border-color: rgba(255,255,255,0.12);
  animation-duration: 1.3s;
  animation-delay: 0.16s;
}

.ripple-flash {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  animation: flash-out 0.4s ease-out forwards;
}

@keyframes ring-out {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(1); opacity: 0; }
}

@keyframes flash-out {
  from { transform: scale(1);  opacity: 1; }
  to   { transform: scale(12); opacity: 0; }
}