/* Companion styles for hyperion-motion.js. Purely decorative layers never take pointer input. */
.hyperion-scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 10050; width: 100%; height: 2px;
  pointer-events: none; opacity: 0; transform: translateX(-100%); will-change: transform;
  background: linear-gradient(90deg, #7431df, #b780ff 58%, #54f1e0);
  box-shadow: 0 0 12px #a46bff99; transition: opacity .4s ease;
}
.hyperion-scroll-progress.is-active { opacity: 1; }
.hyperion-scroll-progress::after {
  content: ''; position: absolute; top: 50%; right: -4px; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: #e9fffb; box-shadow: 0 0 10px 3px #54f1e0aa;
}

/* Magnetic buttons: a clipped layer for the hover sheen and press ripples. */
.hyperion-fx-layer {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.hyperion-fx-layer::before {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, #ffffff3d, transparent);
  transform: skewX(-18deg);
}
.hyperion-magnet:hover > .hyperion-fx-layer::before {
  left: 135%; transition: left .8s cubic-bezier(.2, .7, .2, 1);
}
.hyperion-ripple {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, #ffffff59 0, #d9b8ff26 35%, transparent 62%);
  animation: hyperion-ripple .75s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes hyperion-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* Card spotlight: soft inner light plus a border glow that follows the pointer. */
.hyperion-spot {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .4s ease; mix-blend-mode: screen;
  background: radial-gradient(440px circle at var(--sx, 50%) var(--sy, 50%), #b07cff3d, #7a5cff12 30%, transparent 55%);
}
.hyperion-spot::before {
  content: ''; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit;
  background: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), #f3e6ff, #b98cffcc 22%, #54f1e08c 42%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.hyperion-spot-host.is-spot > .hyperion-spot { opacity: 1; }

.hyperion-counting { font-variant-numeric: tabular-nums; }

/* Footer border becomes a pluckable string. */
.hyperion-string {
  position: absolute; top: -36px; left: 0; z-index: 3; display: block;
  width: 100%; height: 72px; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hyperion-magnet:hover > .hyperion-fx-layer::before { transition: none; left: -70%; }
  .hyperion-ripple { display: none; }
}

/* Cross-document page transitions (browsers without support simply navigate). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: hyperion-page-out .32s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: hyperion-page-in .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hyperion-page-out { to { opacity: 0; transform: scale(.985); filter: blur(6px); } }
@keyframes hyperion-page-in { from { opacity: 0; transform: scale(1.012); filter: blur(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* "Request a Feature" at the end of inner pages: centred, matching the home-page CTA. */
html body main > .hyperion-feature-request-button,
html body .shots > .hyperion-feature-request-button {
  position: relative !important; display: flex !important; align-items: center; justify-content: center;
  width: max-content; min-height: 48px; margin: 56px auto 72px !important; padding: 13px 24px !important;
  border-radius: 14px !important; border: 1px solid #77dedb69 !important;
  background: linear-gradient(140deg, #241245e8, #120d2be3) !important; color: #f7f1ff !important;
  font: 650 13px/1.3 Inter, system-ui, sans-serif !important;
  box-shadow: inset 0 1px #ffffff12, 0 10px 30px #0a041740, 0 0 34px #55e9da1f !important;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease !important;
}
html body main > .hyperion-feature-request-button:hover,
html body .shots > .hyperion-feature-request-button:hover {
  border-color: #9ff5ec !important; box-shadow: inset 0 1px #ffffff1c, 0 14px 38px #0a041759, 0 0 44px #55e9da40 !important;
}