/* Opt-in motion primitives only; application layout and typography stay local. */
:root {
  --pointer-x: 50%;
  --pointer-y: 50%;
}

.reveal,
.magnetic {
  translate: var(--magnet-x, 0px) calc(var(--magnet-y, 0px) + var(--reveal-y, 0px));
}

.reveal {
  --reveal-y: 0px;
  transition: opacity 650ms cubic-bezier(.2,.75,.2,1),
    translate 750ms cubic-bezier(.2,.75,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-motion-ready="true"] .reveal:not(.is-revealed),
[data-motion-ready="true"].reveal:not(.is-revealed) {
  opacity: 0;
  --reveal-y: 18px;
}

.reveal.is-revealed {
  opacity: 1;
  --reveal-y: 0px;
}

.magnetic {
  transition: translate 240ms cubic-bezier(.2,.75,.2,1), scale 180ms ease;
}

.magnetic:active { scale: .985; }
.magnetic.is-magnetic-active { will-change: translate; }

.tilt-card {
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 420ms cubic-bezier(.2,.75,.2,1);
  transform-origin: center;
}

.tilt-card.is-tilting { will-change: transform; }

[data-scroll-progress] {
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
}

.motion-enter,
.enter {
  animation: baddies-enter 750ms cubic-bezier(.2,.75,.2,1) both;
  animation-delay: var(--enter-delay, 0ms);
}

.motion-float {
  animation: baddies-float 12s ease-in-out infinite;
}

.motion-atmosphere {
  display: block;
  pointer-events: none;
  background: #302D33;
}

.motion-atmosphere--fallback {
  background:
    radial-gradient(ellipse at 65% 52%, rgb(255 0 168 / .10), transparent 48%),
    radial-gradient(ellipse at 28% 45%, rgb(100 30 61 / .12), transparent 55%),
    linear-gradient(160deg, #302D33, #2b282e);
}

.motion-burst {
  position: fixed;
  z-index: 10000;
  width: 0;
  height: 0;
  pointer-events: none;
  contain: layout style;
}

.motion-burst > i {
  position: absolute;
  width: var(--particle-size, 3px);
  height: var(--particle-size, 3px);
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #FF00A8;
  animation: baddies-particle 550ms cubic-bezier(.16,.75,.24,1) both;
  animation-delay: var(--particle-delay, 0ms);
}

.motion-burst > i:nth-child(3n) { background: #F7F2F5; }

@keyframes baddies-enter {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes baddies-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes baddies-particle {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  12% { opacity: .85; }
  100% {
    opacity: 0;
    transform: translate(var(--particle-x), var(--particle-y)) scale(.35);
  }
}

html[data-motion="off"] .reveal,
html[data-motion="off"] .magnetic {
  opacity: 1 !important;
  translate: 0 0 !important;
  scale: 1 !important;
  transition: none !important;
}

html[data-motion="off"] .tilt-card {
  transform: none !important;
  transition: none !important;
}

html[data-motion="off"] .motion-enter,
html[data-motion="off"] .enter,
html[data-motion="off"] .motion-float {
  animation: none !important;
  opacity: 1 !important;
  translate: 0 0 !important;
}

html[data-motion="off"] .motion-burst { display: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .magnetic {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    transition: none !important;
  }
  .tilt-card {
    transform: none !important;
    transition: none !important;
  }
  .motion-enter,
  .enter,
  .motion-float {
    animation: none !important;
    opacity: 1 !important;
    translate: 0 0 !important;
  }
  .motion-burst { display: none; }
}