/* ==========================================

   WEARME GLOBAL FLOATING EXPERIENCE

   东方数字文化 × 全球青年亚文化

========================================== */



:root {

  --wm-gold: #e8c477;

  --wm-blue: #171d45;

  --wm-purple: #6654a5;

  --wm-glow: rgba(232, 196, 119, .28);

}



/* 页面基础 */

html {

  scroll-behavior: smooth;

}



body {

  position: relative;

  overflow-x: hidden;

}



/* 全站氛围背景 */

.wm-atmosphere {

  position: fixed;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  overflow: hidden;

  isolation: isolate;

  background:

    radial-gradient(ellipse at 15% 20%, rgba(88, 73, 155, .16), transparent 45%),

    radial-gradient(ellipse at 85% 75%, rgba(218, 171, 94, .10), transparent 42%);

}



/* 背景层不拦截操作；页面普通内容保持在背景之上 */

body > :not(.wm-atmosphere):not(script):not(style) {

  position: relative;

}



/* 渐变光球 */

.wm-orb {

  position: absolute;

  border-radius: 50%;

  filter: blur(48px);

  opacity: .28;

  will-change: transform;

  animation: wm-orb-float 14s ease-in-out infinite alternate;

}



.wm-orb:nth-child(1) {

  width: 260px;

  height: 260px;

  top: 8%;

  left: 5%;

  background: #6252a6;

}



.wm-orb:nth-child(2) {

  width: 210px;

  height: 210px;

  top: 52%;

  right: 8%;

  background: #d6a75e;

  animation-delay: -5s;

}



.wm-orb:nth-child(3) {

  width: 170px;

  height: 170px;

  bottom: 4%;

  left: 38%;

  background: #526eaa;

  animation-delay: -8s;

}



@keyframes wm-orb-float {

  from { transform: translate3d(0, 0, 0) scale(1); }

  to { transform: translate3d(38px, -48px, 0) scale(1.14); }

}



/* 金色星点 */

.wm-particle {

  position: absolute;

  width: 3px;

  height: 3px;

  border-radius: 50%;

  background: var(--wm-gold);

  box-shadow: 0 0 12px 2px rgba(232, 196, 119, .65);

  animation: wm-particle-float 9s ease-in-out infinite;

  will-change: transform, opacity;

}



@keyframes wm-particle-float {

  0%, 100% {

    transform: translate3d(0, 0, 0);

    opacity: .2;

  }

  50% {

    transform: translate3d(20px, -65px, 0);

    opacity: .9;

  }

}



/* 漂浮河灯 */

.wm-lantern {

  position: absolute;

  width: 11px;

  height: 17px;

  border-radius: 50% 50% 45% 45%;

  background: rgba(232, 196, 119, .8);

  box-shadow: 0 0 20px 7px rgba(232, 196, 119, .25);

  animation: wm-lantern-float 11s ease-in-out infinite;

  will-change: transform, opacity;

}



@keyframes wm-lantern-float {

  0% {

    transform: translate3d(0, 0, 0) rotate(-5deg);

    opacity: .2;

  }

  50% {

    transform: translate3d(25px, -55px, 0) rotate(5deg);

    opacity: .8;

  }

  100% {

    transform: translate3d(-10px, -110px, 0) rotate(-5deg);

    opacity: .1;

  }

}



/* 卡片悬浮 */

.wm-float-card,

.feature-card,

.module-card,

.tool-card {

  transition:

    transform .35s ease,

    box-shadow .35s ease,

    border-color .35s ease;

}



@media (hover: hover) and (pointer: fine) {

  .wm-float-card:hover,

  .feature-card:hover,

  .module-card:hover,

  .tool-card:hover {

    transform: translateY(-6px);

    box-shadow:

      0 15px 35px rgba(0, 0, 0, .18),

      0 0 22px var(--wm-glow);

  }

}



/* 阿匣 / IP 角色漂浮 */

.wm-mascot-float {

  animation: wm-mascot-float 5s ease-in-out infinite;

  transform-origin: center center;

  will-change: transform;

}



@keyframes wm-mascot-float {

  0%, 100% { transform: translateY(0) rotate(-2deg); }

  50% { transform: translateY(-13px) rotate(2deg); }

}



/* 装饰图片轻微漂浮 */

.wm-floating-image {

  animation: wm-image-float 7s ease-in-out infinite;

  will-change: transform;

}



@keyframes wm-image-float {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-9px); }

}



/* 进入页面时淡入 */

.wm-enter {

  animation: wm-enter .7s ease both;

}



@keyframes wm-enter {

  from {

    opacity: 0;

    transform: translateY(12px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* 尊重系统减少动态设置 */

@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: .01ms !important;

  }

}



/* 手机端性能优化 */

@media (max-width: 768px) {

  .wm-orb {

    filter: blur(35px);

    opacity: .18;

  }



  .wm-particle {

    width: 2px;

    height: 2px;

  }



  .wm-float-card:hover,

  .feature-card:hover,

  .module-card:hover,

  .tool-card:hover {

    transform: none;

    box-shadow: none;

  }

}