:root {
  --motion-x: 0px;
  --motion-y: 0px;
  --motion-hero-y: 0px;
  --motion-card-y: 0px;
}

.motion-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.motion-orb {
  position: absolute;
  width: min(82vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .22;
  filter: blur(54px);
  will-change: transform;
  transform: translate3d(var(--motion-x), var(--motion-y), 0);
}

.motion-orb.one {
  top: -28%;
  right: -31%;
  background: radial-gradient(circle, #985cff 0, rgba(91,41,190,.55) 42%, transparent 72%);
  animation: motion-orbit-one 17s ease-in-out infinite alternate;
}

.motion-orb.two {
  bottom: -34%;
  left: -38%;
  background: radial-gradient(circle, #f1bd4b 0, rgba(190,103,24,.32) 40%, transparent 72%);
  animation: motion-orbit-two 21s ease-in-out infinite alternate;
}

.motion-beam {
  position: absolute;
  inset: -35%;
  opacity: .09;
  background: conic-gradient(from 20deg, transparent, #a87aff, transparent 24%, #f3c867, transparent 51%);
  animation: motion-beam-spin 36s linear infinite;
}

.motion-particle {
  position: absolute;
  left: var(--particle-x);
  bottom: -20px;
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  background: var(--particle-colour);
  box-shadow: 0 0 12px currentColor;
  opacity: 0;
  animation: motion-particle-rise var(--particle-time) linear var(--particle-delay) infinite;
  will-change: transform, opacity;
}

.topbar-actions { display:flex; align-items:center; gap:8px; min-width:0; }
.motion-toggle {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 15px;
  color: #fff1ba;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 10px 28px rgba(0,0,0,.18);
  cursor: pointer;
  overflow: hidden;
}
.motion-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; }
.motion-toggle::after {
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  right:7px;
  top:7px;
  border-radius:50%;
  background:#63efb0;
  box-shadow:0 0 10px #63efb0;
}
.motion-toggle[aria-pressed="false"] { color:#8e8998; }
.motion-toggle[aria-pressed="false"]::after { background:#77727e; box-shadow:none; }

html[data-motion="on"] .hero {
  transform: translate3d(0, var(--motion-hero-y), 0);
  will-change: transform;
}
html[data-motion="on"] .stat-card {
  transform: translate3d(0, var(--motion-card-y), 0);
  will-change: transform;
}

.motion-ripple {
  position: fixed;
  z-index: 100050;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 1px solid rgba(255,225,145,.72);
  border-radius: 50%;
  pointer-events: none;
  animation: motion-ripple .55s ease-out forwards;
}

@keyframes motion-orbit-one { to { transform:translate3d(calc(var(--motion-x) - 8vw),calc(var(--motion-y) + 12vh),0) scale(1.12); } }
@keyframes motion-orbit-two { to { transform:translate3d(calc(var(--motion-x) + 11vw),calc(var(--motion-y) - 9vh),0) scale(.9); } }
@keyframes motion-beam-spin { to { transform:rotate(360deg); } }
@keyframes motion-particle-rise {
  0% { transform:translate3d(0,20px,0) scale(.6); opacity:0; }
  12% { opacity:.7; }
  85% { opacity:.25; }
  100% { transform:translate3d(var(--particle-drift),-108vh,0) scale(1.15); opacity:0; }
}
@keyframes motion-ripple { to { transform:scale(5); opacity:0; } }

html[data-motion="off"] .motion-scene { display:none; }
html[data-motion="off"] .app .reveal-on-scroll { opacity:1!important; transform:none!important; }
html[data-motion="off"] .app *,
html[data-motion="off"] .bottom-nav,
html[data-motion="off"] .gift-center * {
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
}

@media (max-width:380px) {
  .topbar-actions { gap:6px; }
  .motion-toggle { width:42px; height:42px; flex-basis:42px; border-radius:14px; }
  .profile-chip { min-width:42px; padding-inline:10px; }
  #profileName { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .motion-scene { display:none; }
  .motion-toggle::after { background:#77727e; box-shadow:none; }
}