:root {
  --parallax-x: 0px;
  --parallax-y: 0px;
  --hud-x: 0px;
  --hud-y: 0px;
}

.motion-scene {
  display: none;
}

body.motion-enabled .motion-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(var(--hud-x), var(--hud-y), 0);
  transition: transform 180ms ease-out;
}

body.motion-enabled .page-shell {
  position: relative;
  z-index: 1;
}

body.motion-enabled .link-card {
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
  transition: transform 180ms ease-out, box-shadow 260ms ease;
  animation: card-arrive 700ms 80ms both cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-grid {
  position: absolute;
  left: -34%;
  right: -34%;
  bottom: -56%;
  height: 122%;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(46, 230, 193, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 220, 255, 0.2) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(720px) rotateX(62deg);
  transform-origin: center bottom;
  animation: grid-drift 18s linear infinite;
}

.hud-scan {
  position: absolute;
  top: -8%;
  left: -14%;
  width: 128%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(119, 220, 255, 0.08), var(--teal), rgba(255, 112, 92, 0.36), transparent);
  box-shadow: 0 0 20px rgba(46, 230, 193, 0.46);
  animation: scan-sweep 8s 1.4s linear infinite;
}

.hud-panel {
  position: absolute;
  width: clamp(150px, 20vw, 320px);
  height: 92px;
  opacity: 0.36;
  border: 1px solid rgba(119, 220, 255, 0.36);
  background:
    linear-gradient(90deg, rgba(46, 230, 193, 0.06), transparent 56%),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(246, 247, 239, 0.14) 16px 20px, transparent 20px 32px);
  clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.hud-panel::after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 4px;
  content: "";
  background: var(--coral);
  box-shadow: 14px -12px 0 var(--teal), -28px 12px 0 rgba(119, 220, 255, 0.65);
}

.hud-panel-left {
  top: 18%;
  left: -52px;
  animation: panel-float-left 9s ease-in-out infinite;
}

.hud-panel-right {
  right: -60px;
  bottom: 17%;
  border-color: rgba(255, 112, 92, 0.4);
  transform: rotate(180deg);
  animation: panel-float-right 11s ease-in-out infinite;
}

body.motion-enabled .avatar {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-color: rgba(246, 247, 239, 0.25);
  background: #07100e;
  animation: avatar-pulse 3.6s ease-in-out infinite;
}

body.motion-enabled .avatar-ring {
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 20deg, var(--teal), var(--cyan), var(--coral), var(--lime), var(--teal));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ring-spin 8s linear infinite;
}

body.motion-enabled .avatar img {
  position: relative;
  z-index: 1;
}

body.motion-enabled .profile > *:not(.avatar) {
  opacity: 0;
  animation: content-rise 620ms both cubic-bezier(0.16, 1, 0.3, 1);
}

body.motion-enabled .profile h1 {
  animation-delay: 180ms;
}

body.motion-enabled .profile .bio {
  animation-delay: 280ms;
}

body.motion-enabled .link-row {
  --accent: var(--teal);
  opacity: 0;
  isolation: isolate;
  animation: link-arrive 520ms both cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

body.motion-enabled .link-row:nth-child(1) { animation-delay: 330ms; }
body.motion-enabled .link-row:nth-child(2) { animation-delay: 400ms; }
body.motion-enabled .link-row:nth-child(3) { animation-delay: 470ms; }
body.motion-enabled .link-row:nth-child(4) { animation-delay: 540ms; }
body.motion-enabled .link-row:nth-child(5) { animation-delay: 610ms; }
body.motion-enabled .link-row:nth-child(6) { animation-delay: 680ms; }

body.motion-enabled .link-row::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: 0;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--accent) 30%, transparent) 50%, transparent 70%);
  transform: translateX(-115%);
  transition: transform 520ms ease, opacity 240ms ease;
}

body.motion-enabled .link-row:hover,
body.motion-enabled .link-row:focus-visible {
  transform: translateY(-4px) scale(1.008);
  border-color: var(--accent);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--accent) 16%, transparent);
}

body.motion-enabled .link-row:hover::after,
body.motion-enabled .link-row:focus-visible::after {
  opacity: 1;
  transform: translateX(115%);
}

body.motion-enabled .link-row:hover .link-icon,
body.motion-enabled .link-row:focus-visible .link-icon {
  transform: translateY(-1px) scale(1.08);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 -8px 18px rgba(0, 0, 0, 0.12);
}

body.motion-enabled .link-icon {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.twitch-row { --accent: #b591ff; }
.tiktok-row { --accent: #25f4ee; }
.telegram-row { --accent: #77dcff; }
.discord-row { --accent: #9f7aff; }
.donatello-row { --accent: #4e85ff; }
.monobank-row { --accent: #ffd36f; }

@keyframes card-arrive {
  from { opacity: 0; filter: blur(6px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes content-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes link-arrive {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes grid-drift {
  to { background-position: 0 54px, 54px 0; }
}

@keyframes scan-sweep {
  0%, 12% { opacity: 0; transform: translateY(0); }
  16% { opacity: 0.68; }
  52% { opacity: 0.3; }
  62%, 100% { opacity: 0; transform: translateY(112vh); }
}

@keyframes panel-float-left {
  50% { transform: translate3d(18px, -14px, 0); }
}

@keyframes panel-float-right {
  50% { transform: rotate(180deg) translate3d(16px, -12px, 0); }
}

@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes avatar-pulse {
  50% { box-shadow: 0 0 48px rgba(46, 230, 193, 0.43), 0 0 18px rgba(255, 112, 92, 0.2); }
}

@keyframes card-scan {
  0%, 18% { opacity: 0; transform: translateY(-118%); }
  26% { opacity: 0.3; }
  64% { opacity: 0.12; transform: translateY(118%); }
  100% { opacity: 0; transform: translateY(118%); }
}

@media (max-width: 520px) {
  .hud-grid {
    left: -84%;
    right: -84%;
    bottom: -42%;
    height: 126%;
    opacity: 0.52;
    background-size: 38px 38px;
    animation-duration: 12s;
  }

  .hud-scan {
    left: -22%;
    width: 144%;
    animation-duration: 5.8s;
  }

  .hud-panel {
    width: 164px;
    height: 78px;
    opacity: 0.44;
  }

  .hud-panel-left {
    top: 5%;
    left: -54px;
  }

  .hud-panel-right {
    right: -58px;
    bottom: 5%;
  }

  body.motion-enabled .link-card > * {
    position: relative;
    z-index: 1;
  }

  body.motion-enabled .link-card::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg, transparent 42%, rgba(46, 230, 193, 0.1) 49%, rgba(119, 220, 255, 0.22) 50%, rgba(255, 112, 92, 0.08) 52%, transparent 59%);
    animation: card-scan 5.6s 1.1s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-scene {
    display: none !important;
  }
}