/*
 * Motion Primitives Static Adapter
 * Interaction patterns adapted from https://github.com/ibelick/motion-primitives
 * Copyright (c) 2024 ibelick — MIT License; see MOTION_PRIMITIVES_LICENSE.txt.
 */

html[data-mp-ready] {
  --mp-accent: #8b5cf6;
  --mp-accent-2: #22d3ee;
  --mp-ease-out: cubic-bezier(.22, 1, .36, 1);
  --mp-ease-spring: cubic-bezier(.2, 1.35, .4, 1);
  --mp-duration: 680ms;
}

html[data-mp-ready] .mp-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 2147483000;
  height: 3px;
  pointer-events: none;
  transform: scaleX(var(--mp-scroll, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--mp-accent), var(--mp-accent-2), var(--mp-accent));
  background-size: 200% 100%;
  box-shadow: 0 0 16px color-mix(in srgb, var(--mp-accent) 58%, transparent);
  animation: mp-gradient-flow 4s linear infinite;
}

html[data-mp-ready] .mp-cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147482000;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .13;
  transform: translate3d(-500px, -500px, 0);
  background: radial-gradient(circle, color-mix(in srgb, var(--mp-accent) 72%, white) 0%, color-mix(in srgb, var(--mp-accent) 26%, transparent) 32%, transparent 70%);
  filter: blur(12px);
  mix-blend-mode: screen;
  will-change: transform;
}

html[data-mp-ready] .mp-reveal {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity var(--mp-duration) var(--mp-ease-out) var(--mp-delay, 0ms),
    translate var(--mp-duration) var(--mp-ease-out) var(--mp-delay, 0ms);
}

html[data-mp-ready] .mp-reveal.mp-in-view {
  opacity: 1;
  translate: 0 0;
}

html[data-mp-ready] .mp-heading-reveal {
  text-wrap: balance;
  transform-origin: 0 50%;
}

html[data-mp-ready] .mp-surface {
  position: relative;
  isolation: isolate;
  transition:
    translate 360ms var(--mp-ease-out),
    scale 360ms var(--mp-ease-out),
    filter 280ms ease;
}

html[data-mp-ready] .mp-surface:hover {
  translate: 0 -2px;
  filter: brightness(1.035) saturate(1.025);
}

html[data-mp-ready] .mp-spotlight-layer,
html[data-mp-ready] .mp-border-trail-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

html[data-mp-ready] .mp-spotlight-layer {
  z-index: 0;
  opacity: 0;
  background: radial-gradient(
    260px circle at var(--mp-spot-x, 50%) var(--mp-spot-y, 50%),
    color-mix(in srgb, var(--mp-accent) 20%, transparent),
    transparent 72%
  );
  transition: opacity 240ms ease;
}

html[data-mp-ready] .mp-spotlight-active > .mp-spotlight-layer {
  opacity: 1;
}

html[data-mp-ready] .mp-border-trail-layer {
  display: none;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  html[data-mp-ready] .mp-border-trail-layer {
    display: block;
    inset: -1px;
    padding: 1px;
    opacity: .42;
    background: conic-gradient(
      from var(--mp-trail-angle),
      transparent 0 76%,
      color-mix(in srgb, var(--mp-accent-2) 78%, white) 84%,
      color-mix(in srgb, var(--mp-accent) 82%, white) 90%,
      transparent 98%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: mp-border-spin 6s linear infinite;
  }
}

@property --mp-trail-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

html[data-mp-ready] .mp-pressable {
  --mp-magnetic-x: 0px;
  --mp-magnetic-y: 0px;
  translate: var(--mp-magnetic-x) var(--mp-magnetic-y);
  transition:
    translate 320ms var(--mp-ease-spring),
    scale 220ms var(--mp-ease-out),
    filter 220ms ease;
  transform-origin: center;
}

html[data-mp-ready] .mp-pressable:hover:not(:disabled):not([aria-disabled='true']) {
  scale: 1.025;
  filter: brightness(1.07);
}

html[data-mp-ready] .mp-pressable:active:not(:disabled):not([aria-disabled='true']) {
  scale: .975;
  transition-duration: 90ms;
}

html[data-mp-ready] .mp-pressable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--mp-accent-2) 78%, white);
  outline-offset: 3px;
}

html[data-mp-ready] .mp-stagger-1 { --mp-delay: 45ms; }
html[data-mp-ready] .mp-stagger-2 { --mp-delay: 90ms; }
html[data-mp-ready] .mp-stagger-3 { --mp-delay: 135ms; }
html[data-mp-ready] .mp-stagger-4 { --mp-delay: 180ms; }
html[data-mp-ready] .mp-stagger-5 { --mp-delay: 225ms; }
html[data-mp-ready] .mp-stagger-6 { --mp-delay: 270ms; }

@keyframes mp-gradient-flow {
  to { background-position: 200% 0; }
}

@keyframes mp-border-spin {
  to { --mp-trail-angle: 360deg; }
}

@media (hover: none), (pointer: coarse) {
  html[data-mp-ready] .mp-cursor-glow { display: none; }
  html[data-mp-ready] .mp-surface:hover { translate: 0 0; filter: none; }
  html[data-mp-ready] .mp-pressable:hover:not(:disabled) { scale: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-mp-ready] .mp-reveal,
  html[data-mp-ready] .mp-reveal.mp-in-view,
  html[data-mp-ready] .mp-surface,
  html[data-mp-ready] .mp-pressable {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  html[data-mp-ready] .mp-cursor-glow,
  html[data-mp-ready] .mp-border-trail-layer { display: none !important; }

  html[data-mp-ready] .mp-scroll-progress { animation: none; }
}