:root{--bg-x:0px;--bg-y:0px;--bg-scroll:0px;--gyro-x:0px;--gyro-y:0px;--cn-offset:calc(5cm - 1.5mm);--en-x:0px;--en-y:0px;--en-rotate:0deg;--cn-x:0px;--cn-y:0px;--cn-rotate:0deg;--paint1-x:0px;--paint1-y:0px;--paint1-rotate:0deg;--paint2-x:0px;--paint2-y:0px;--paint2-rotate:0deg;--cat-left-x:0px;--cat-left-y:0px;--cat-left-rotate:0deg;--cat-right-x:0px;--cat-right-y:0px;--cat-right-rotate:0deg;--sign-x:0px;--sign-y:0px;--sign-rotate:0deg;--sign-en-x:0px;--sign-en-y:0px;--sign-en-rotate:0deg}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#194c37;color:#fff;font-family:Arial,'PingFang SC',sans-serif;overflow-x:hidden}main,footer{position:relative;z-index:1}.background-viewport{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}.background-image{position:absolute;width:160%;height:160%;left:-30%;top:-30%;background:url('./assets/background.webp') center/cover no-repeat;background-color:#24573e;transform:translate3d(calc(var(--bg-x) + var(--gyro-x)),calc(var(--bg-y) + var(--bg-scroll) + var(--gyro-y)),0);animation:backgroundFlow 15s ease-in-out infinite alternate;will-change:transform}@keyframes backgroundFlow{0%{translate:-12px -8px;scale:1}25%{translate:8px -18px;scale:1.012}50%{translate:18px 5px;scale:1.022}75%{translate:-5px 15px;scale:1.012}100%{translate:-12px -8px;scale:1}}
.hero{position:relative;width:100%;height:100svh;min-height:480px;overflow:hidden}.hero-inner{position:relative;width:100%;height:100%}.logo-stage{position:absolute;top:8vh;left:50%;transform:translateX(-50%);width:calc(100% - 2cm);max-width:1900px}.logo-stage img{user-select:none;-webkit-user-drag:none}.logo-en{position:relative;top:-1cm;display:block;width:100%;height:auto;z-index:4;transform:translate3d(var(--en-x),var(--en-y),0) rotate(var(--en-rotate));animation:logoFloat 22s ease-in-out infinite;filter:drop-shadow(0 5px 12px rgba(0,0,0,.15))}@keyframes logoFloat{0%,100%{translate:0 0;scale:1}17%{translate:3px -2px;scale:1.001}36%{translate:-4px 1px;scale:1}54%{translate:2px 4px;scale:1.001}73%{translate:-2px -3px;scale:1}88%{translate:3px 1px;scale:1}}
.paint-layer{position:absolute;left:50%;top:50%;height:auto;pointer-events:auto;filter:none}.paint-layer-1{width:min(29vw,430px);z-index:2;transform:translate(-50%,-50%) translateY(calc(var(--cn-offset) - 1cm)) translate3d(var(--paint1-x),var(--paint1-y),0) rotate(var(--paint1-rotate))}.paint-layer-2{width:min(21.6vw,319.5px);z-index:3;transform:translate(-50%,-50%) translateY(var(--cn-offset)) translate(2px,10px) translate3d(var(--paint2-x),var(--paint2-y),0) rotate(var(--paint2-rotate))}.logo-cn{position:absolute;left:50%;top:50%;width:min(8.25vw,130px);height:auto;z-index:5;transform:translate(-50%,-50%) translateY(var(--cn-offset)) translate3d(var(--cn-x),var(--cn-y),0) rotate(var(--cn-rotate))}
.platform-links{position:absolute;left:50%;top:calc(57% - .5cm);width:0;height:0;z-index:7;pointer-events:none}.platform-link{position:absolute;left:0;top:0;width:1.8cm;height:1.8cm;display:block;transform:translate(calc(-50% + var(--icon-x)),calc(-50% + var(--icon-y))) rotate(var(--icon-angle));pointer-events:auto;cursor:pointer;z-index:1}.platform-link img{width:100%;height:100%;object-fit:contain;display:block;animation:floatSticker 5.5s ease-in-out infinite alternate;transition:filter .35s ease,scale .35s ease}.platform-link:hover{z-index:20}.platform-link:hover img{animation:iconWiggle 1.5s ease-in-out infinite;scale:1.035;filter:drop-shadow(0 0 5px rgba(255,255,255,.45)) drop-shadow(0 0 12px rgba(255,255,255,.23))}@keyframes floatSticker{0%{transform:translateY(-3px) rotate(-3deg)}100%{transform:translateY(4px) rotate(3deg)}}@keyframes iconWiggle{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-2px) rotate(-2deg)}55%{transform:translateY(1px) rotate(1.5deg)}80%{transform:translateY(-1px) rotate(-1deg)}}.platform-1{--icon-x:-5.8cm;--icon-y:-1.9cm;--icon-angle:-13deg}.platform-2{--icon-x:4.7cm;--icon-y:-2.3cm;--icon-angle:10deg}.platform-3{--icon-x:-8.2cm;--icon-y:.7cm;--icon-angle:7deg}.platform-4{--icon-x:7.5cm;--icon-y:.4cm;--icon-angle:-12deg}.platform-5{--icon-x:-5.7cm;--icon-y:3cm;--icon-angle:11deg}.platform-6{--icon-x:5.1cm;--icon-y:2.8cm;--icon-angle:-9deg}.platform-7{--icon-x:-2.7cm;--icon-y:1cm;--icon-angle:-6deg}.platform-8{--icon-x:2.4cm;--icon-y:1.4cm;--icon-angle:14deg}.platform-link:nth-child(even) img{animation-duration:6.7s;animation-delay:-2s}
.find-me-banner{position:absolute;left:50%;bottom:calc(16vh + 1cm);width:min(18.22vw,217px);height:auto;transform:translate(-50%,-.5mm);z-index:8;pointer-events:none;animation:findMeFloat 1.8s ease-in-out infinite}@keyframes findMeFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}.signature-group{position:absolute;left:50%;bottom:calc(7vh - 2cm);transform:translateX(-50%);width:min(27.33vw,326px);display:flex;flex-direction:column;align-items:center;gap:3px;z-index:8}.signature-group img{display:block;width:100%;height:auto}.signature{transform:translate3d(var(--sign-x),var(--sign-y),0) rotate(var(--sign-rotate))}.signature-en{transform:translate3d(var(--sign-en-x),var(--sign-en-y),0) rotate(var(--sign-en-rotate))}.cat{position:absolute;height:auto;user-select:none;-webkit-user-drag:none;cursor:pointer;z-index:6;transform-origin:50% 82%}.cat-left{left:-6vw;bottom:-3vh;width:min(28vw,380px);transform:translate3d(var(--cat-left-x),var(--cat-left-y),0) rotate(var(--cat-left-rotate))}.cat-right{right:1vw;bottom:-4vh;width:min(31vw,430px);transform:translate3d(var(--cat-right-x),var(--cat-right-y),0) rotate(var(--cat-right-rotate))}.click-wiggle.clicked{animation:clickWiggle .55s ease-in-out}@keyframes clickWiggle{0%,100%{filter:none}35%{filter:drop-shadow(0 0 8px rgba(255,255,255,.25))}55%{filter:none}}
.cat-counter{position:absolute;bottom:1.5vh;z-index:15;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;text-shadow:0 1px 5px #234}.cat-counter-left{left:7%}.cat-counter-right{right:7%}.cat-counter>span{font-size:22px;font-variant-numeric:tabular-nums}.cat-counter small{font-size:9px;letter-spacing:1.5px;opacity:.8}.cat-counter.bump>span{animation:counterPop .35s ease-out}@keyframes counterPop{50%{scale:1.18}}.sound-toggle{position:absolute;left:2.5%;top:calc(50% - .5cm);transform:translateY(-50%);display:flex;align-items:center;gap:9px;padding:12px 8px;background:none;border:0;color:#fff;font-size:11px;letter-spacing:1.8px;opacity:.78;cursor:pointer;z-index:20;transition:opacity .3s,translate .3s}.sound-toggle:hover{opacity:1;translate:4px 0}.sound-toggle:focus-visible,.platform-link:focus-visible{outline:1px solid white;outline-offset:4px}.sound-toggle>span:first-child{font-size:18px}.sound-dot{width:5px;height:5px;border-radius:50%;background:#88968f}.is-playing .sound-dot{background:#b6f5ce;box-shadow:0 0 8px #b6f5ce}.scroll-hint{position:absolute;right:2.7vw;bottom:3vh;color:white;text-decoration:none;letter-spacing:2px;font-size:10px;opacity:.75;z-index:19}
.music-section{position:relative;min-height:100svh;padding:7vh 5vw 9vh}.section-heading{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:2px;opacity:.8}.music-section h2{margin:6vh 0 7px;font-size:clamp(25px,5vw,78px);font-weight:400;letter-spacing:.055em;text-align:center}.album-subtitle{font-size:11px;letter-spacing:2px;text-align:center;opacity:.8;margin:0}.album3d-section{position:relative;width:100%;height:min(68vh,680px);min-height:380px;overflow:hidden}#album3d{position:absolute;inset:0;touch-action:none;cursor:grab}#album3d:active{cursor:grabbing}#album3d canvas{width:100%;height:100%;display:block}.album3d-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;letter-spacing:2px;color:white;opacity:.8;pointer-events:none}.album-controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.album-controls button{padding:11px 13px;border:1px solid rgba(255,255,255,.6);border-radius:2px;background:rgba(0,0,0,.12);color:#fff;cursor:pointer;font-size:10px;letter-spacing:1px;transition:background .2s}.album-controls button:hover{background:rgba(255,255,255,.16)}.album-tip{text-align:center;opacity:.73;font-size:11px;margin-top:15px}footer{padding:22px 5vw;display:flex;justify-content:space-between;gap:18px;font-size:9px;letter-spacing:1.3px;opacity:.8}
@media(max-width:900px){.logo-stage{top:12vh}.logo-cn{width:15vw}.paint-layer-1{width:min(40vw,380px)}.paint-layer-2{width:min(31vw,280px)}.find-me-banner{width:min(24vw,190px);bottom:calc(17vh + 1cm)}.signature-group{width:40vw;bottom:calc(9vh - 2cm)}.platform-links{scale:.72}.cat-left{width:32vw}.cat-right{width:34vw}}
@media(max-width:700px){:root{--cn-offset:calc(18vh - 1.5mm)}.logo-stage{top:12vh;width:calc(100% - 18px)}.logo-cn{width:17vw}.paint-layer-1{width:51vw}.paint-layer-2{width:39vw}.platform-links{top:calc(55% - .5cm);scale:.85}.platform-link{width:1.05cm;height:1.05cm}.platform-1{--icon-x:-3.3cm;--icon-y:-1.5cm}.platform-2{--icon-x:2.8cm;--icon-y:-1.7cm}.platform-3{--icon-x:-3.8cm;--icon-y:.5cm}.platform-4{--icon-x:3.8cm;--icon-y:.35cm}.platform-5{--icon-x:-2.8cm;--icon-y:2.25cm}.platform-6{--icon-x:2.7cm;--icon-y:2.2cm}.platform-7{--icon-x:-1.35cm;--icon-y:.8cm}.platform-8{--icon-x:1.3cm;--icon-y:1.1cm}.find-me-banner{width:30vw;bottom:calc(18vh + 1cm)}.signature-group{width:48vw;bottom:calc(10vh - 2cm)}.cat-left{left:-10vw;width:39vw}.cat-right{right:-5vw;width:42vw}.sound-toggle{left:3%;top:calc(42% - .5cm);font-size:9px;letter-spacing:1px;gap:5px}.cat-counter-left{left:5%}.cat-counter-right{right:5%}.cat-counter>span{font-size:17px}.cat-counter small{font-size:8px;letter-spacing:1px}.music-section{padding:6vh 4vw}.album3d-section{height:55svh;min-height:330px}.album-controls{gap:7px}.album-controls button{padding:10px 9px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* =====================================
   图片点击后的左右晃动效果
===================================== */

.logo-en,
.logo-cn,
.paint-layer-1,
.paint-layer-2,
.cat-left,
.cat-right,
.signature-en {
  cursor: pointer;
}

/* 点击时使用独立的旋转动画，
   尽量不影响原来的位置和鼠标跟随 */

.is-clicking {
  animation: clickWiggle 0.68s
    ease-in-out !important;
}

@keyframes clickWiggle {
  0% {
    rotate: 0deg;
  }

  20% {
    rotate: -4deg;
  }

  40% {
    rotate: 3deg;
  }

  60% {
    rotate: -2deg;
  }

  80% {
    rotate: 1deg;
  }

  100% {
    rotate: 0deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-clicking {
    animation: none !important;
  }
}

/* =====================================
   Logo、猫咪点击动画重新调整
===================================== */

/* 1. 左侧小猫向右移动1cm */
.cat-left {
  left: calc(-6vw + 1cm);
}

/* 2. Logo点击时轻微快速抖动 */
.logo-en.is-clicking,
.logo-cn.is-clicking {
  animation: logoClickShake 0.42s ease-in-out !important;
}

/* 微小、快速、不规则抖动 */
@keyframes logoClickShake {
  0%, 100% {
    rotate: 0deg;
    translate: 0 0;
  }

  20% {
    rotate: -0.35deg;
    translate: -1px 0.5px;
  }

  40% {
    rotate: 0.4deg;
    translate: 1px -0.5px;
  }

  60% {
    rotate: -0.25deg;
    translate: -0.5px 1px;
  }

  80% {
    rotate: 0.2deg;
    translate: 0.5px -0.5px;
  }
}

/* 3. 两只猫点击时晃动幅度更大 */
.cat-left.is-clicking,
.cat-right.is-clicking {
  animation: catClickWiggle 0.8s ease-in-out !important;
  transform-origin: 50% 82%;
}

@keyframes catClickWiggle {
  0%, 100% {
    rotate: 0deg;
  }

  20% {
    rotate: -9deg;
  }

  42% {
    rotate: 7deg;
  }

  65% {
    rotate: -4deg;
  }

  82% {
    rotate: 2deg;
  }
}

/* 4. 颜料层不参与点击抖动 */
.paint-layer-1.is-clicking,
.paint-layer-2.is-clicking {
  animation: none !important;
}

/* 5. 交换左右计数器显示位置 */
.cat-counter-left {
  left: auto;
  right: 7%;
}

.cat-counter-right {
  right: auto;
  left: 7%;
}

/* 手机适配 */
@media (max-width: 700px) {
  .cat-counter-left {
    left: auto;
    right: 5%;
  }

  .cat-counter-right {
    right: auto;
    left: 5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-en.is-clicking,
  .logo-cn.is-clicking,
  .cat-left.is-clicking,
  .cat-right.is-clicking {
    animation: none !important;
  }
}

/* =========================================
   MUSHICHONG · 动画修复
   猫咪柔和回弹 + 图标恢复漂浮
========================================= */


/* =========================================
   1. 猫咪点击后柔和回弹
========================================= */

.cat {
  transform-origin: 50% 82%;
}

/* 同时兼容旧代码使用的两个点击类名 */
.cat.clicked,
.cat.is-clicking {
  animation: catSoftWiggle 1.25s
    cubic-bezier(0.33, 0, 0.18, 1)
    both !important;
}

/* 前段幅度明显，后段逐渐衰减 */
@keyframes catSoftWiggle {

  0% {
    rotate: 0deg;
  }

  16% {
    rotate: -10deg;
  }

  34% {
    rotate: 7deg;
  }

  52% {
    rotate: -4deg;
  }

  68% {
    rotate: 2deg;
  }

  81% {
    rotate: -0.7deg;
  }

  91% {
    rotate: 0.2deg;
  }

  100% {
    rotate: 0deg;
  }
}


/* =========================================
   2. 八个平台图标恢复持续漂浮
========================================= */

.platform-link img {
  display: block;

  animation: platformSoftFloat 6s
    ease-in-out infinite alternate !important;

  transition:
    filter 0.45s ease,
    scale 0.45s ease;

  will-change: transform;
}

/* 每个图标的运动节奏不完全相同 */

.platform-link:nth-child(2n) img {
  animation-duration: 7.4s !important;
  animation-delay: -2s !important;
}

.platform-link:nth-child(3n) img {
  animation-duration: 5.7s !important;
  animation-delay: -3.5s !important;
}

.platform-link:nth-child(5n) img {
  animation-duration: 8.2s !important;
  animation-delay: -1s !important;
}

/* 缓慢、轻微、略带旋转的漂浮 */

@keyframes platformSoftFloat {

  0% {
    transform:
      translate(-2px, 3px)
      rotate(-3deg);
  }

  35% {
    transform:
      translate(3px, -3px)
      rotate(1deg);
  }

  70% {
    transform:
      translate(-1px, -5px)
      rotate(3deg);
  }

  100% {
    transform:
      translate(3px, 2px)
      rotate(-2deg);
  }
}


/* =========================================
   3. 鼠标悬停时明显一些的柔光
========================================= */

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

  .platform-link:hover {
    z-index: 30;
  }

  .platform-link:hover img {

    /* 保持原本漂浮 */
    animation-name:
      platformSoftFloat !important;

    /* 微微放大 */
    scale: 1.07;

    /* 比之前明显的白色光晕 */
    filter:
      drop-shadow(
        0 0 7px rgba(255,255,255,0.85)
      )
      drop-shadow(
        0 0 16px rgba(255,255,255,0.55)
      )
      drop-shadow(
        0 0 28px rgba(255,255,255,0.25)
      );
  }
}


/* =========================================
   4. 猫咪计数器位置修正
   左猫小鱼，右猫大虾
========================================= */

.cat-counter-left {
  left: 7%;
  right: auto;
}

.cat-counter-right {
  right: 7%;
  left: auto;
}

/* 左侧小猫继续保持右移1cm */

.cat-left {
  left: calc(-6vw + 1cm);
}

@media (max-width: 700px) {

  .cat-left {
    left: calc(-10vw + 1cm);
  }

  .cat-counter-left {
    left: 5%;
    right: auto;
  }

  .cat-counter-right {
    right: 5%;
    left: auto;
  }
}


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

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

  .cat.clicked,
  .cat.is-clicking,
  .platform-link img {
    animation: none !important;
  }
}

/* =========================================
   点击动画冲突修复
========================================= */

/* Logo：屏蔽旧点击晃动动画 */
.logo-en.is-clicking,
.logo-en.clicked,
.logo-cn.is-clicking,
.logo-cn.clicked {
  animation: none !important;
}

/* 英文Logo保留原来的缓慢漂浮 */
.logo-en {
  animation: logoRandomFloat 22s
    ease-in-out infinite !important;
}

/* Logo抖动由JS控制，不覆盖原transform */
.logo-en,
.logo-cn {
  transform-origin: center center;
}

/* 猫咪：彻底关闭旧关键帧晃动 */
.cat-left.is-clicking,
.cat-right.is-clicking,
.cat-left.clicked,
.cat-right.clicked {
  animation: none !important;
}

/* 猫咪以身体下方为摆动支点 */
.cat-left,
.cat-right {
  transform-origin: 50% 82%;
}

/* 尊重系统减少动态效果的设置 */
@media (prefers-reduced-motion: reduce) {
  .logo-en,
  .logo-cn {
    animation: none !important;
  }
}

/* =====================================
   八个平台图标：悬停轻微摇晃、放大
===================================== */

/* 保留原来的自动漂浮 */
.platform-link img {
  animation: platformSoftFloat 6s
    ease-in-out infinite alternate !important;

  transition:
    scale 0.35s ease,
    filter 0.45s ease;
}

/* 鼠标真正经过图标时才触发 */
@media (hover: hover) and (pointer: fine) {

  .platform-link:hover {
    z-index: 30;
  }

  .platform-link:hover img {

    /* 微微放大 4% */
    scale: 1.04;

    /* 保留原来的漂浮动画 */
    animation:
      platformSoftFloat 6s ease-in-out
      infinite alternate,
      iconTinyWiggle 0.55s ease-in-out
      1 !important;

    /* 保留明显但柔和的发光 */
    filter:
      drop-shadow(0 0 7px rgba(255,255,255,0.85))
      drop-shadow(0 0 16px rgba(255,255,255,0.55))
      drop-shadow(0 0 28px rgba(255,255,255,0.25));
  }
}

/* 悬停时轻轻摇晃一次 */
@keyframes iconTinyWiggle {
  0%, 100% {
    rotate: 0deg;
  }

  25% {
    rotate: -2deg;
  }

  55% {
    rotate: 1.5deg;
  }

  80% {
    rotate: -0.5deg;
  }
}

/* 减少动态效果设置 */
@media (prefers-reduced-motion: reduce) {
  .platform-link img,
  .platform-link:hover img {
    animation: none !important;
  }
}

/* =====================================
   八个平台图标：柔和悬停摆动
===================================== */

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

  .platform-link:hover img {
    scale: 1.04;

    animation:
      platformSoftFloat 6s ease-in-out
      infinite alternate,
      iconSoftWiggle 1.1s ease-in-out
      1 !important;
  }
}

/* 更圆滑、更自然的摆动与回正 */

@keyframes iconSoftWiggle {

  0% {
    rotate: 0deg;
  }

  22% {
    rotate: -1.8deg;
  }

  48% {
    rotate: 1.1deg;
  }

  72% {
    rotate: -0.45deg;
  }

  90% {
    rotate: 0.1deg;
  }

  100% {
    rotate: 0deg;
  }
}

/* 取消8个平台图标悬停放大 */

.platform-link img,
.platform-link:hover img {
  scale: 1 !important;
}

/* =====================================
   恢复全页面滚动物理惯性
===================================== */

/* 滚动惯性统一加在独立位移层上 */
:root {
  --scroll-physics-x: 0px;
  --scroll-physics-y: 0px;
}

/* 滚动惯性使用独立的CSS变量 */
.logo-en,
.logo-cn,
.paint-layer-1,
.paint-layer-2,
.cat-left,
.cat-right,
.find-me-banner,
.signature,
.signature-en,
.platform-link {
  --scroll-lag-y: 0px;
  --scroll-lag-rotate: 0deg;
}

/* 图标滚动惯性应用在外层，避免覆盖漂浮 */
.platform-link {
  translate: 0 var(--scroll-lag-y);
}

/* 减少动态效果 */
@media (prefers-reduced-motion: reduce) {
  .platform-link {
    translate: none !important;
  }
}

/* =====================================
   应用滚动物理偏移
===================================== */

.logo-en,
.logo-cn,
.paint-layer-1,
.paint-layer-2,
.cat-left,
.cat-right,
.find-me-banner,
.signature,
.signature-en {
  translate: 0 var(--scroll-lag-y);
}

/* 图标也参与滚动惯性 */
.platform-link {
  translate: 0 var(--scroll-lag-y);
}

/* =====================================
   英文 Logo 持续轻微漂浮
===================================== */

.logo-en {
  animation: logoGentleFloat 16s
    ease-in-out infinite !important;
}

/* 不规则感的缓慢漂浮 */
@keyframes logoGentleFloat {
  0%, 100% {
    transform:
      translate3d(
        var(--en-x, 0px),
        var(--en-y, 0px),
        0
      )
      rotate(var(--en-rotate, 0deg));
  }

  24% {
    transform:
      translate3d(
        calc(var(--en-x, 0px) + 2px),
        calc(var(--en-y, 0px) - 3px),
        0
      )
      rotate(calc(var(--en-rotate, 0deg) + 0.25deg));
  }

  49% {
    transform:
      translate3d(
        calc(var(--en-x, 0px) - 3px),
        calc(var(--en-y, 0px) + 1px),
        0
      )
      rotate(calc(var(--en-rotate, 0deg) - 0.3deg));
  }

  76% {
    transform:
      translate3d(
        calc(var(--en-x, 0px) + 1px),
        calc(var(--en-y, 0px) + 3px),
        0
      )
      rotate(calc(var(--en-rotate, 0deg) + 0.2deg));
  }
}

/* 点击时暂时不使用旧漂浮关键帧，
   避免和 Logo 点击抖动冲突 */
.logo-en.is-clicking,
.logo-en.clicked {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .logo-en {
    animation: none !important;
  }
}

/* =====================================
   合并漂浮与滚动惯性
===================================== */

/* 英文Logo：
   漂浮使用transform
   滚动惯性使用translate */

.logo-en {
  translate: 0 var(--scroll-lag-y, 0px);
}

/* 其他图片保留滚动位移 */

.logo-cn,
.paint-layer-1,
.paint-layer-2,
.cat-left,
.cat-right,
.find-me-banner,
.signature,
.signature-en,
.platform-link {
  translate: 0 var(--scroll-lag-y, 0px);
}

/* 防止旧的旋转惯性叠加 */
.scroll-physics {
  --scroll-lag-rotate: 0deg;
}
/* =====================================
   新的 scroll 图片按钮
===================================== */

.scroll-image-btn {
  position: absolute;
  z-index: 22;

  /* 放在右边猫和签名中间 */
  right: 12%;
  bottom: 17%;

  width: 1.8cm;
  height: auto;

  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  /* 跟别的滚动物理效果兼容 */
  translate: 0 var(--scroll-lag-y, 0px);
}

.scroll-image-btn img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;

  transition:
    filter 0.4s ease,
    transform 0.4s ease;
}

/* 鼠标悬停：轻微晃动 + 发光 */
@media (hover: hover) and (pointer: fine) {
  .scroll-image-btn:hover img {
    animation: scrollBtnSoftWiggle 1.05s ease-in-out 1;
    filter:
      drop-shadow(0 0 7px rgba(255,255,255,0.9))
      drop-shadow(0 0 16px rgba(255,255,255,0.55))
      drop-shadow(0 0 28px rgba(255,255,255,0.22));
  }
}

/* 更自然一点的轻微晃动 */
@keyframes scrollBtnSoftWiggle {
  0%   { transform: rotate(0deg); }
  22%  { transform: rotate(-1.8deg); }
  48%  { transform: rotate(1.15deg); }
  72%  { transform: rotate(-0.45deg); }
  90%  { transform: rotate(0.12deg); }
  100% { transform: rotate(0deg); }
}

/* 手机端位置微调 */
@media (max-width: 700px) {
  .scroll-image-btn {
    right: 14%;
    bottom: 19%;
    width: 1.8cm;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-image-btn:hover img {
    animation: none !important;
  }
}
/* =====================================
   下一页按钮：放大一倍，移到简介右侧
===================================== */

.scroll-image-btn {
  width: 3.6cm;

  /* 中英文简介右侧 */
  left: calc(50% + 5cm);
  right: auto;

  /* 与简介区域大致对齐 */
  bottom: 2vh;
}

/* 手机适配 */
@media (max-width: 700px) {
  .scroll-image-btn {
    width: 3.6cm;
    left: calc(50% + 2.8cm);
    right: auto;
    bottom: 10vh;
  }
}

/* ==========================================
   第一屏整体位置调整
========================================== */

/* 1. 隐藏旧版 SCROLL 按钮 */
.scroll-hint {
  display: none !important;
}

/* 2. 第一屏全部视觉元素上移 0.5cm
   使用独立的定位调整，不覆盖原有动画 */
.hero {
  position: relative;
}

.hero-inner {
  top: -0.5cm;
}

/* 原本放在 hero-inner 外面的元素也上移 */
.hero > .cat,
.hero > .sound-toggle,
.hero > .scroll-image-btn,
.hero > .cat-counter {
  margin-top: -0.5cm;
}

/* 3. 两只猫计数器额外上移 2.5cm
   加上全屏上移，总共上移 3cm */
.cat-counter-left,
.cat-counter-right {
  bottom: calc(1.5vh + 2.5cm);
}

/* 手机端保持同样的调整幅度 */
@media (max-width: 700px) {
  .cat-counter-left,
  .cat-counter-right {
    bottom: calc(1.5vh + 2.5cm);
  }
}

/* =====================================
   最新位置调整
===================================== */

/* 1. 八个平台图标整体下移1cm */
.platform-links {
  top: calc(57% + 0.5cm);
}

/* 2. FIND ME 整体下移1cm */
.find-me-banner {
  bottom: 16vh;
}


/* =====================================
   手机端专属调整
===================================== */

@media (max-width: 700px) {

  /* 八个平台图标下移1cm */
  .platform-links {
    top: calc(55% + 0.5cm);
  }

  /* FIND ME 下移1cm */
  .find-me-banner {
    bottom: 18vh;
  }

  /* 右侧小猫向左移动1cm */
  .cat-right {
    right: calc(1vw + 1cm);
  }

  /* 下一页图片缩小一倍，
     放在右侧小猫左边 */
  .scroll-image-btn {
    width: 1.8cm;

    left: auto;
    right: calc(31vw + 1cm);

    bottom: 10vh;
  }
}

/* =====================================
   最新布局调整
===================================== */

/* =====================================
   一、电脑端两只猫的计数器
===================================== */

/* 左侧计数器：左移1.5cm，上移1.5cm */
.cat-counter-left {
  left: calc(7% - 1.5cm);
  right: auto;
  bottom: calc(1.5vh + 4cm);
}

/* 右侧计数器：右移1cm，上移3cm */
.cat-counter-right {
  right: calc(7% - 1cm);
  left: auto;
  bottom: calc(1.5vh + 5.5cm);
}


/* =====================================
   二、手机端专属调整
===================================== */

@media (max-width: 700px) {

  /* 右侧小猫：在当前位置向右0.5cm */
  .cat-right {
    right: calc(1vw + 0.5cm);
  }

  /* 下一页按钮：
     位于右侧小猫头顶，贴近屏幕右边 */
  .scroll-image-btn {
    width: 1.8cm;

    left: auto;
    right: 0.15cm;

    bottom: 33vh;
  }

  /* 两只猫的计数器缩小三分之一
     即保留原来约66.7%的大小 */
  .cat-counter {
    scale: 0.667;
    transform-origin: center center;
  }

  /* 手机左侧计数器：
     保留之前的手机端位置 */
  .cat-counter-left {
    left: 5%;
    right: auto;
    bottom: calc(1.5vh + 2.5cm);
  }

  /* 手机右侧计数器：
     保留之前的手机端位置 */
  .cat-counter-right {
    right: 5%;
    left: auto;
    bottom: calc(1.5vh + 2.5cm);
  }
}

/* =====================================
   最新位置微调
===================================== */

/* 电脑端左侧计数器
   再向左0.5cm、向上1cm */
.cat-counter-left {
  left: calc(7% - 2cm);
  right: auto;
  bottom: calc(1.5vh + 5cm);
}

/* 电脑端右侧计数器
   再向右0.5cm、向上1cm */
.cat-counter-right {
  right: calc(7% - 1.5cm);
  left: auto;
  bottom: calc(1.5vh + 6.5cm);
}


/* =====================================
   手机端专属调整
===================================== */

@media (max-width: 700px) {

  /* 下一页按钮向下1.5cm */
  .scroll-image-btn {
    bottom: calc(33vh - 1.5cm);
  }

  /* 左侧计数器
     向下0.5cm、向左0.1cm */
  .cat-counter-left {
    left: calc(5% - 0.1cm);
    right: auto;
    bottom: calc(1.5vh + 2cm);
  }

  /* 右侧计数器保持原位置 */
  .cat-counter-right {
    right: 5%;
    left: auto;
    bottom: calc(1.5vh + 2.5cm);
  }
}

/* =====================================
   修复手机端音乐开关无法点击
===================================== */

.sound-toggle {
  position: absolute !important;
  z-index: 9999 !important;

  pointer-events: auto !important;
  touch-action: manipulation;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 确保内部文字不会拦截触摸 */
.sound-toggle span {
  pointer-events: none;
}

/* 手机端增加透明触摸区域 */
@media (max-width: 700px) {
  .sound-toggle {
    min-height: 48px;
    min-width: 110px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 12px;
  }
}

/* 手机端音乐按钮可以正常点击 */

.sound-toggle {
  z-index: 9999 !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}

@media (max-width: 700px) {
  .sound-toggle {
    min-width: 110px;
    min-height: 48px;
  }
}

@media (max-width: 700px) {
  .sound-toggle {
    top: 42% !important;
  }
}

/* 第一屏视觉内容整体上移0.8cm */

.hero > .hero-inner {
  margin-top: -0.8cm;
}

.hero > .cat,
.hero > .cat-counter,
.hero > .sound-toggle,
.hero > .scroll-image-btn {
  margin-top: -0.8cm;
}

/* =====================================
   简介与音乐按钮位置微调
===================================== */

/* 中英文简介整体向下移动 0.5cm */
.signature-group {
  margin-top: 0.5cm;
}

/* 音乐按钮向上移动 0.4cm */
.sound-toggle {
  margin-top: -0.4cm;
}

/* =====================================
   中英文简介整体向下移动 0.5cm
===================================== */

/* 电脑端 */
.signature-group {
  bottom: calc(7vh - 2.5cm) !important;
}

/* 平板端 */
@media (max-width: 900px) {
  .signature-group {
    bottom: calc(9vh - 2.5cm) !important;
  }
}

/* 手机端 */
@media (max-width: 700px) {
  .signature-group {
    bottom: calc(10vh - 2.5cm) !important;
  }
}

/* 手机端两只小猫统一上移0.2cm */

@media (max-width: 700px) {
  .cat-left,
  .cat-right {
    bottom: calc(-3vh + 0.5cm);
  }

  .cat-right {
    bottom: calc(-4vh + 0.3cm);
  }
}

/* 电脑端左侧小猫向左移动1cm */

@media (min-width: 701px) {
  .cat-left {
    left: -2vw;
  }
}

/* =====================================
   实体专辑交互展示区域
===================================== */

.album3d-section {
  height: 76vh;
  min-height: 460px;
  overflow: hidden;
}

#album3d {
  cursor: grab;
  touch-action: none;
}

#album3d:active {
  cursor: grabbing;
}

#album3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 手机端展示 */
@media (max-width: 700px) {

  .album3d-section {
    height: 65svh;
    min-height: 380px;
  }

  .album-controls {
    gap: 8px;
  }

  .album-controls button {
    font-size: 9px;
    padding: 10px 9px;
  }
}

/* =====================================
   第二屏：自然光下的实体专辑
===================================== */

.album3d-section {
  position: relative;
  height: 82vh;
  min-height: 520px;
  overflow: hidden;

  /* 不透明度很低的环境光晕 */
  background:
    radial-gradient(
      ellipse 58% 55% at 38% 35%,
      rgba(255, 248, 222, 0.13),
      rgba(255, 255, 255, 0.045) 46%,
      transparent 78%
    );
}

#album3d {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
}

#album3d:active {
  cursor: grabbing;
}

#album3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 降低模型区域周围文字的视觉干扰 */
.album-subtitle,
.album-tip {
  opacity: 0.75;
}

@media (max-width: 700px) {

  .album3d-section {
    height: 68svh;
    min-height: 410px;
  }
}

/* =====================================
   第二屏专辑 · 柔和自然光环境
===================================== */

.album3d-section {
  position: relative;

  height: 85vh;
  min-height: 540px;

  overflow: hidden;

  background:
    radial-gradient(
      ellipse 65% 60% at 33% 30%,
      rgba(255, 244, 211, 0.16),
      rgba(255, 255, 255, 0.055) 47%,
      transparent 85%
    );
}

#album3d {
  position: absolute;
  inset: 0;

  touch-action: none;
  cursor: grab;
}

#album3d:active {
  cursor: grabbing;
}

#album3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 700px) {

  .album3d-section {
    height: 70svh;
    min-height: 420px;
  }
}

/* =====================================
   第二屏 · 三张专辑封面动态切换
===================================== */

.music-section.gallery-section {
  min-height: 100svh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* 整个构图区域 */
.album-gallery {
  position: relative;
  width: min(100%, 1240px);
  aspect-ratio: 1.5;
  margin: 0 auto;
}

/* 三张封面共用的样式 */
.gallery-cover {
  position: absolute;
  display: block;

  width: 15%;
  aspect-ratio: 1 / 1;

  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;

  background: #fff;
  cursor: pointer;

  box-shadow: 0 5px 16px rgba(0,0,0,0.045);

  transition:
    left 0.85s cubic-bezier(.22,1,.36,1),
    top 0.85s cubic-bezier(.22,1,.36,1),
    width 0.85s cubic-bezier(.22,1,.36,1),
    box-shadow 0.45s ease;

  will-change: left, top, width;

  -webkit-tap-highlight-color: transparent;
}

/* 图片始终填满方块 */
.gallery-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  user-select: none;
  -webkit-user-drag: none;

  pointer-events: none;
}

/* =====================================
   上方大封面
===================================== */

.gallery-cover[data-slot="0"] {
  left: 5.3%;
  top: 6.2%;
  width: 26.4%;
  z-index: 3;
}

/* =====================================
   左下角小封面
===================================== */

.gallery-cover[data-slot="1"] {
  left: 11.7%;
  top: 63%;
  width: 14.7%;
  z-index: 2;
}

/* =====================================
   右下角小封面
===================================== */

.gallery-cover[data-slot="2"] {
  left: 32.6%;
  top: 63%;
  width: 14.7%;
  z-index: 2;
}

/* 鼠标经过：非常轻微的阴影变化 */
@media (hover:hover) and (pointer:fine) {
  .gallery-cover:hover {
    box-shadow:
      0 9px 25px rgba(0,0,0,0.15);
  }
}

.gallery-cover:focus-visible {
  outline: 2px solid white;
  outline-offset: 5px;
}

/* 状态文字仅供读屏软件使用 */
.gallery-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =====================================
   手机端适配
===================================== */

@media (max-width: 700px) {

  .music-section.gallery-section {
    min-height: 100svh;
    padding: 0;
  }

  .album-gallery {
    width: 100%;
    aspect-ratio: 0.8;
  }

  /* 手机上方大封面 */
  .gallery-cover[data-slot="0"] {
    left: 7%;
    top: 6%;
    width: 69%;
  }

  /* 手机左下角小封面 */
  .gallery-cover[data-slot="1"] {
    left: 9%;
    top: 65%;
    width: 37%;
  }

  /* 手机右下角小封面 */
  .gallery-cover[data-slot="2"] {
    left: 54%;
    top: 65%;
    width: 37%;
  }
}

/* 尊重系统减少动态效果的设置 */
@media (prefers-reduced-motion: reduce) {
  .gallery-cover {
    transition: none !important;
  }
}

/* =====================================
   第二屏 · 三张专辑最新布局
===================================== */

.album-gallery {
  /* 大方形：原26.4%放大至52.8% */
  --large-size: 52.8%;
  --small-size: 14.7%;
  --cover-gap: 1cm;

  position: relative;
  width: min(100%, 1240px);
  aspect-ratio: 1.5;
  margin: 0;
}

/* 大封面：左上角各1cm */
.gallery-cover[data-slot="0"] {
  left: 1cm;
  top: 1cm;
  width: var(--large-size);
}

/* 两个小封面：
   放在大封面右边，底边对齐 */

/* 第一个小封面 */
.gallery-cover[data-slot="1"] {
  left: calc(1cm + var(--large-size) + var(--cover-gap));
  top: calc(1cm + var(--large-size) - var(--small-size));
  width: var(--small-size);
}

/* 第二个小封面 */
.gallery-cover[data-slot="2"] {
  left: calc(
    1cm + var(--large-size) +
    var(--small-size) +
    var(--cover-gap) * 2
  );

  top: calc(1cm + var(--large-size) - var(--small-size));
  width: var(--small-size);
}

/* =====================================
   手机端自适应
===================================== */

@media (max-width: 700px) {

  .album-gallery {
    width: 100%;
    aspect-ratio: 0.8;

    --large-size: 52.8%;
    --small-size: 14.7%;
    --cover-gap: 1cm;
  }

  .gallery-cover[data-slot="0"] {
    left: 1cm;
    top: 1cm;
    width: var(--large-size);
  }

  .gallery-cover[data-slot="1"] {
    left: calc(1cm + var(--large-size) + var(--cover-gap));
    top: calc(1cm + var(--large-size) - var(--small-size));
    width: var(--small-size);
  }

  .gallery-cover[data-slot="2"] {
    left: calc(
      1cm + var(--large-size) +
      var(--small-size) +
      var(--cover-gap) * 2
    );

    top: calc(1cm + var(--large-size) - var(--small-size));
    width: var(--small-size);
  }
}

/* =====================================
   第二屏 · 专辑封面位置调整
===================================== */

/* 整个展示区域 */
.album-gallery {
  --large-size: 52.8%;
  --small-size: 21%;
  --cover-gap: 1cm;

  position: relative;
  width: min(100%, 1240px);
  aspect-ratio: 1.2;
  margin: 0;
}

/* 大封面：向左上移动 */
.gallery-cover[data-slot="0"] {
  left: 0.2cm;
  top: 0.2cm;
  width: var(--large-size);
}

/* 左下小封面 */
.gallery-cover[data-slot="1"] {
  left: 0.2cm;
  top: calc(0.2cm + 52.8% + 1cm);
  width: var(--small-size);
}

/* 右下小封面 */
.gallery-cover[data-slot="2"] {
  left: calc(0.2cm + 21% + 1cm);
  top: calc(0.2cm + 52.8% + 1cm);
  width: var(--small-size);
}

/* =====================================
   手机端
===================================== */

@media (max-width: 700px) {

  .album-gallery {
    width: 100%;
    aspect-ratio: 0.8;

    --large-size: 60%;
    --small-size: 25%;
    --cover-gap: 0.5cm;
  }

  .gallery-cover[data-slot="0"] {
    left: 0.2cm;
    top: 0.2cm;
    width: var(--large-size);
  }

  .gallery-cover[data-slot="1"] {
    left: 0.2cm;
    top: calc(0.2cm + 60% + 0.5cm);
    width: var(--small-size);
  }

  .gallery-cover[data-slot="2"] {
    left: calc(0.2cm + 25% + 0.5cm);
    top: calc(0.2cm + 60% + 0.5cm);
    width: var(--small-size);
  }
}
/* =====================================
   第二屏 · 专辑封面位置调整
===================================== */

.album-gallery {
  --large-size: 52.8%;
  --small-size: 21%;
  --cover-gap: 1cm;

  position: relative;
  width: min(100%, 1240px);
  aspect-ratio: 1.2;
  margin: 0;
}

/* 大封面：整体往左移动2cm */
.gallery-cover[data-slot="0"] {
  left: -1.8cm;
  top: 0.2cm;
  width: var(--large-size);
}

/* 左下小封面：整体往左2cm，再往下4cm */
.gallery-cover[data-slot="1"] {
  left: -1.8cm;
  top: calc(0.2cm + 52.8% + 1cm + 4cm);
  width: var(--small-size);
}

/* 右下小封面：整体往左2cm，再往下4cm */
.gallery-cover[data-slot="2"] {
  left: calc(-1.8cm + 21% + 1cm);
  top: calc(0.2cm + 52.8% + 1cm + 4cm);
  width: var(--small-size);
}

/* =====================================
   手机端
===================================== */

@media (max-width: 700px) {

  .album-gallery {
    width: 100%;
    aspect-ratio: 0.8;

    --large-size: 60%;
    --small-size: 25%;
    --cover-gap: 0.5cm;
  }

  .gallery-cover[data-slot="0"] {
    left: -1.8cm;
    top: 0.2cm;
    width: var(--large-size);
  }

  .gallery-cover[data-slot="1"] {
    left: -1.8cm;
    top: calc(0.2cm + 60% + 0.5cm + 4cm);
    width: var(--small-size);
  }

  .gallery-cover[data-slot="2"] {
    left: calc(-1.8cm + 25% + 0.5cm);
    top: calc(0.2cm + 60% + 0.5cm + 4cm);
    width: var(--small-size);
  }
}

/* =====================================
   第二屏 · 不要忘记我
   专辑封面 + 旋转CD
===================================== */

.music-section.album-showcase {
  position: relative;
  width: 100%;
  min-height: 100svh;

  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  background: transparent;
  overflow: hidden;
}

/* 主体内容 */
.showcase-content {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 4vh;
  padding-bottom: 2cm;
}

/* =====================================
   复合专辑图
===================================== */

.album-composite {
  position: relative;

  width: min(47vw, 570px);
  aspect-ratio: 1.45;

  margin: 0 auto;

  isolation: isolate;
}

/* CD：位于封面后方 */
.showcase-disc {
  position: absolute;

  width: 72%;
  height: auto;
  aspect-ratio: 1;

  left: 43%;
  top: 7%;

  z-index: 1;
  object-fit: contain;

  transform-origin: center center;

  animation: showcaseDiscRotate
    24s linear infinite;

  filter:
    drop-shadow(
      0 12px 16px rgba(0,0,0,0.24)
    );
}

/* 24秒旋转一圈 */
@keyframes showcaseDiscRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 封面：位于CD前方 */
.showcase-cover {
  position: absolute;

  width: 72%;
  height: auto;

  left: 7%;
  top: 3%;

  z-index: 2;
  object-fit: contain;

  filter:
    drop-shadow(
      7px 12px 12px rgba(0,0,0,0.24)
    );

  animation: showcaseCoverFloat
    9s ease-in-out infinite;
}

/* 轻微上下悬浮 */
@keyframes showcaseCoverFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

/* =====================================
   手写专辑标题
===================================== */

.showcase-title {
  display: block;

  width: min(34vw, 420px);
  height: auto;

  margin-top: 0.6cm;

  object-fit: contain;
}

/* =====================================
   已上线与手势
===================================== */

.showcase-released {
  display: block;

  width: min(47vw, 570px);
  height: auto;

  margin-top: 0.85cm;

  object-fit: contain;
}

/* =====================================
   第二屏底部 Join us
===================================== */

.showcase-join {
  display: block;

  position: relative;

  width: min(27.33vw, 326px);
  height: auto;

  margin: auto auto 5vh;

  object-fit: contain;
}

/* =====================================
   手机端
===================================== */

@media (max-width: 700px) {

  .music-section.album-showcase {
    min-height: 100svh;
  }

  .showcase-content {
    padding-top: 7vh;
    padding-bottom: 1.2cm;
  }

  .album-composite {
    width: 92vw;
    aspect-ratio: 1.28;
  }

  .showcase-disc {
    width: 72%;
    left: 37%;
    top: 9%;
  }

  .showcase-cover {
    width: 72%;
    left: 2%;
    top: 5%;
  }

  .showcase-title {
    width: 68vw;
    margin-top: 0.35cm;
  }

  .showcase-released {
    width: 86vw;
    margin-top: 0.65cm;
  }

  .showcase-join {
    width: 48vw;
    margin-bottom: 6vh;
  }
}

/* 减少动态效果 */
@media (prefers-reduced-motion: reduce) {
  .showcase-disc,
  .showcase-cover {
    animation: none !important;
  }
}

/* =====================================
   第二屏 · 最新尺寸与位置调整
===================================== */

/* 所有内容向下移动 2.5cm */
.music-section.album-showcase {
  padding-top: 2.5cm;
  box-sizing: border-box;
}

/* 绿色 CD 缩小为原来的 60% */
.showcase-disc {
  width: 60.24%; /* 原来 72% × 0.6 */

  /* 保持光盘中心基本不变 */
  left: 47.4%;
  top: 6.74%;
}

/* 已上线标语缩小一半 */
.showcase-released {
  width: min(23.5vw, 285px);
}

/* 手机端也同步调整 */
@media (max-width: 700px) {

  .showcase-disc {
    width: 43.2%;
    left: 51.4%;
    top: 23.4%;
  }

  .showcase-released {
    width: 43vw;
  }
}

/* ==========================================
   第二屏 · 新增细节图与微信入口
========================================== */

/* 给新增内容留出足够空间 */
.music-section.album-showcase {
  min-height: 125svh;
  box-sizing: border-box;
  padding-bottom: 2.5cm;
  overflow: visible;
}

/* 原来的封面与CD维持不变 */

/* =====================================
   1. 已上线标语再缩小一半
===================================== */

.music-section.album-showcase
.showcase-released {
  width: min(11.75vw, 142.5px);
  height: auto;
}

/* =====================================
   2. 两张专辑实物图
===================================== */

.album-detail-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  gap: 1cm;

  width: min(82vw, 1100px);

  margin-top: 1cm;
}

/* 图二、图三 */
.album-detail-row img {
  display: block;

  width: calc((100% - 1cm) / 2);
  height: auto;

  object-fit: contain;

  flex-shrink: 0;

  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}

/* 鼠标经过略微上浮 */
@media (hover: hover) {

  .album-detail-row img:hover {
    transform: translateY(-6px);
    filter: drop-shadow(
      0 8px 12px rgba(0,0,0,0.12)
    );
  }
}

/* =====================================
   3. 图四：实体专辑上线文字
===================================== */

.showcase-sold-out {
  display: block;

  width: min(72vw, 900px);
  height: auto;

  margin-top: 1.1cm;

  object-fit: contain;
}

/* =====================================
   4. 微信图标
===================================== */

.showcase-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin-top: auto;
  margin-bottom: 0.55cm;

  padding-top: 1.3cm;
}

.showcase-wechat-icon {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 72px;
  height: 72px;

  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  animation: wechatFloat 5s ease-in-out infinite;

  transition:
    filter 0.3s ease;
}

.showcase-wechat-icon img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  pointer-events: none;

  transition:
    transform 0.35s cubic-bezier(.2,1.4,.4,1);
}

/* 类似第一屏的平台图标的漂浮 */
@keyframes wechatFloat {

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

  50% {
    transform: translateY(-8px) rotate(3deg);
  }

}

/* 鼠标悬停时轻微放大 */
@media (hover: hover) {

  .showcase-wechat-icon:hover img {
    transform: scale(1.18) rotate(7deg);
  }

}

/* 点击时的小弹性反馈 */
.showcase-wechat-icon:active img {
  transform: scale(0.83);
}

.showcase-wechat-icon:focus-visible {
  outline: 2px solid white;
  outline-offset: 5px;
}

/* 复制结果提示 */
.showcase-copy-feedback {
  min-height: 1.5em;

  margin-top: 0.2cm;

  font-size: 11px;
  letter-spacing: 0.08em;
  color: white;

  text-align: center;
}

/* =====================================
   5. 底部 JOIN US 向下2cm
===================================== */

.music-section.album-showcase
.showcase-join {
  position: relative;

  margin: 0 auto 5vh;

  transform: translateY(2cm);
}

/* =====================================
   手机端
===================================== */

@media (max-width: 700px) {

  .music-section.album-showcase {
    min-height: 125svh;
    padding-bottom: 2.5cm;
  }

  /* 已上线标语在手机上也缩小一半 */
  .music-section.album-showcase
  .showcase-released {
    width: 21.5vw;
  }

  /* 两张图片保持横向排列 */
  .album-detail-row {
    width: 94vw;
    gap: 0.35cm;
    margin-top: 1cm;
  }

  .album-detail-row img {
    width: calc((100% - 0.35cm) / 2);
  }

  .showcase-sold-out {
    width: 90vw;
    margin-top: 0.8cm;
  }

  .showcase-wechat-icon {
    width: 58px;
    height: 58px;
  }

  .showcase-social {
    padding-top: 1cm;
  }
}

/* 减少动态效果 */
@media (prefers-reduced-motion: reduce) {

  .showcase-wechat-icon {
    animation: none;
  }

  .album-detail-row img,
  .showcase-wechat-icon img {
    transition: none;
  }
}

/* =====================================
   第二屏 · 恢复高度 + 缩小图片
===================================== */

/* 恢复第二屏高度 */
.music-section.album-showcase {
  height: 100svh;
  min-height: 100svh;
  padding-bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* 图二、图三：缩小到原来的50% */
.album-detail-row {
  width: min(41vw, 550px);
  gap: 0.5cm;
  margin-top: 0.6cm;
}

/* 两张图保持横向排列 */
.album-detail-row img {
  width: calc((100% - 0.5cm) / 2);
  height: auto;
  object-fit: contain;
}

/* 数量有限：缩小至之前的25% */
.showcase-sold-out {
  width: min(18vw, 225px);
  height: auto;
  margin-top: 0.5cm;
}

/* 微信图标与底部文字 */
.showcase-social {
  padding-top: 0.3cm;
}

.music-section.album-showcase .showcase-join {
  margin-bottom: 3vh;
}

/* =====================================
   手机端
===================================== */

@media (max-width: 700px) {

  .music-section.album-showcase {
    height: 100svh;
    min-height: 100svh;
    padding-bottom: 0;
  }

  .album-detail-row {
    width: 47vw;
    gap: 0.2cm;
    margin-top: 0.5cm;
  }

  .album-detail-row img {
    width: calc((100% - 0.2cm) / 2);
  }

  .showcase-sold-out {
    width: 22.5vw;
    margin-top: 0.4cm;
  }

  .showcase-social {
    padding-top: 0.2cm;
  }
}

/* =====================================
   第二屏 · 间距与 Join us 修复
===================================== */

/* 第二屏仍保持一屏高度 */
.music-section.album-showcase {
  position: relative;
  height: 100svh;
  min-height: 100svh;
  padding-bottom: 0;
  overflow: hidden;
}

/* 图二、图三间距增加1cm */
.album-detail-row {
  width: min(41vw, 550px);
  gap: 1.5cm;
}

/* 自动计算两张图片宽度，防止挤出容器 */
.album-detail-row img {
  width: calc((100% - 1.5cm) / 2);
  flex-shrink: 0;
}

/* Join us 固定在第二屏底部 */
.music-section.album-showcase .showcase-join {
  position: absolute;
  left: 50%;
  bottom: 2vh;

  width: min(27.33vw, 326px);
  height: auto;

  margin: 0;
  transform: translateX(-50%);

  z-index: 10;
}

/* 微信图标放在 Join us 上方 */
.showcase-social {
  position: absolute;
  left: 50%;
  bottom: calc(2vh + 1.8cm);

  margin: 0;
  padding: 0;
  transform: translateX(-50%);

  z-index: 10;
}

/* =====================================
   手机端
===================================== */

@media (max-width: 700px) {

  .album-detail-row {
    width: 47vw;
    gap: 1.2cm;
  }

  .album-detail-row img {
    width: calc((100% - 1.2cm) / 2);
  }

  .music-section.album-showcase .showcase-join {
    width: 48vw;
    bottom: 3vh;
  }

  .showcase-social {
    bottom: calc(3vh + 1.8cm);
  }
}

/* ==========================================
   第二屏 · 位置调整与自然互动
========================================== */

/* 图二、图三整体向下1.7cm */
.music-section.album-showcase .album-detail-row {
  position: relative;
  top: 1.7cm;
}

/* 数量有限向下1.7cm */
.music-section.album-showcase .showcase-sold-out {
  position: relative;
  top: 1.7cm;
}

/* 微信图标向下1.7cm */
.music-section.album-showcase .showcase-social {
  bottom: calc(2vh + 1.8cm - 1.7cm);
}

/* Join us向下1.7cm */
.music-section.album-showcase .showcase-join {
  bottom: calc(2vh - 1.7cm);
}

/* ==========================================
   第二屏鼠标自然互动
========================================== */

.music-section.album-showcase {
  --ss-mouse-x: 0px;
  --ss-mouse-y: 0px;
  --ss-rotate: 0deg;
  --ss-scale: 1;
}

/* 除封面和CD以外的图片 */
.music-section.album-showcase .showcase-title,
.music-section.album-showcase .showcase-released,
.music-section.album-showcase .album-detail-row img,
.music-section.album-showcase .showcase-sold-out,
.music-section.album-showcase .showcase-join,
.music-section.album-showcase .showcase-wechat-icon {

  --move-x: 0px;
  --move-y: 0px;
  --turn: 0deg;
  --zoom: 1;

  translate: var(--move-x) var(--move-y);
  rotate: var(--turn);
  scale: var(--zoom);

  transition:
    translate 0.65s cubic-bezier(.2,.8,.2,1),
    rotate 0.7s cubic-bezier(.2,.8,.2,1),
    scale 0.45s cubic-bezier(.2,.8,.2,1);

  transform-origin: center;
  will-change: translate, rotate, scale;
}

/* 清除旧的独立浮动动画，避免冲突 */
.music-section.album-showcase .showcase-title,
.music-section.album-showcase .album-detail-row img,
.music-section.album-showcase .showcase-join,
.music-section.album-showcase .showcase-wechat-icon {
  animation: none !important;
}

/* 保留CD旋转 */
.music-section.album-showcase .showcase-disc {
  animation: showcaseDiscRotate 24s linear infinite !important;
}

/* 保留封面原有悬浮 */
.music-section.album-showcase .showcase-cover {
  animation: showcaseCoverFloat 9s ease-in-out infinite !important;
}

/* 不让旧的hover效果干扰新动画 */
@media (hover: hover) {
  .music-section.album-showcase .album-detail-row img:hover {
    transform: none;
  }
}

/* 尊重系统减少动态效果设置 */
@media (prefers-reduced-motion: reduce) {
  .music-section.album-showcase .showcase-title,
  .music-section.album-showcase .showcase-released,
  .music-section.album-showcase .album-detail-row img,
  .music-section.album-showcase .showcase-sold-out,
  .music-section.album-showcase .showcase-join,
  .music-section.album-showcase .showcase-wechat-icon {
    transition: none;
  }
}

/* =====================================
   第二屏 · 最新微调
===================================== */

/* 1. 图二向左移动0.5cm */
.music-section.album-showcase
.album-detail-row img:nth-child(1) {
  position: relative;
  left: -0.5cm;
}

/* 图三向右移动0.5cm */
.music-section.album-showcase
.album-detail-row img:nth-child(2) {
  position: relative;
  left: 0.5cm;
}

/* 2. Join us 完整显示，不再裁掉下半部分 */
.music-section.album-showcase
.showcase-join {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 1vh;

  width: min(27.33vw, 326px);
  height: auto;

  margin: 0;
  transform: translateX(-50%);
  z-index: 10;
}


/* =====================================
   第二屏 · 微信图标尺寸与位置
===================================== */

/* 电脑端：原始尺寸的80% */
.music-section.album-showcase
.showcase-wechat-icon {
  width: 57.6px !important;
  height: 57.6px !important;
}

.music-section.album-showcase
.showcase-wechat-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 整个微信图标区域向上移动1cm */
.music-section.album-showcase
.showcase-social {
  bottom: calc(2vh + 1.5cm) !important;
}

/* 手机端 */
@media (max-width: 700px) {
  .music-section.album-showcase
  .showcase-wechat-icon {
    width: 46.4px !important;
    height: 46.4px !important;
  }
}

/* ==========================================
   第二屏 · 滚动惯性物理效果
========================================== */

.music-section.album-showcase {
  /* 滚动时的最大位移 */
  --scroll-move: 34px;

  /* 滚动时的最大旋转角度 */
  --scroll-rotate: 2.2deg;

  /* 以下数值由 JavaScript 自动控制 */
  --scroll-x: 0px;
  --scroll-y: 0px;
  --scroll-r: 0deg;
}

/* 专辑封面和 CD 恢复原来的正常角度 */
.music-section.album-showcase
.album-composite {
  transform: translateX(-50%) rotate(0deg) !important;
  transform-origin: center center;
}

/* 第二屏主体随网页滚动产生弹性位移 */
.music-section.album-showcase
.showcase-content {
  transform:
    translate3d(
      var(--scroll-x),
      var(--scroll-y),
      0
    )
    rotate(var(--scroll-r));

  transform-origin: 50% 45%;
  will-change: transform;
}

/* 微信图标和底部文字跟随滚动 */
.music-section.album-showcase
.showcase-social {
  translate:
    var(--scroll-x)
    var(--scroll-y);

  rotate: var(--scroll-r);
}

.music-section.album-showcase
.showcase-join {
  /*
    原来的水平居中依然保留，
    通过独立的 translate/rotate 属性叠加物理效果
  */
  translate:
    var(--scroll-x)
    var(--scroll-y);

  rotate: var(--scroll-r);
}

/* 保留原有 CD 自转 */
.music-section.album-showcase
.showcase-disc {
  animation: showcaseDiscRotate 24s linear infinite !important;
}

/* 保留封面轻微悬浮 */
.music-section.album-showcase
.showcase-cover {
  animation: showcaseCoverFloat 9s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  .music-section.album-showcase {
    --scroll-x: 0px;
    --scroll-y: 0px;
    --scroll-r: 0deg;
  }
}

/* =====================================
   第二屏 · 专辑组合居中并上移1cm
===================================== */

.music-section.album-showcase
.album-composite {
  position: relative;
  left: 18% !important;
  top: -1cm !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  transform: translateX(-50%) rotate(0deg) !important;
  transform-origin: center center;
}

/* =================================================
   木世虫 · 第二屏手机端专用控制面板

   仅适用于手机（屏幕宽度 <= 700px）
   电脑端完全不受影响

   X = 左右位置
   Y = 上下位置
   SIZE = 大小倍率

   位置单位：
   1cm = 移动1厘米
   -1cm = 反方向移动1厘米

   大小倍率：
   1 = 原始尺寸
   1.5 = 放大50%
   0.8 = 缩小20%
================================================= */

@media screen and (max-width: 700px) {

  .music-section.album-showcase {

    /* =================================
       ① 专辑封面 + CD（整体控制）
    ================================= */

    --mobile-album-x: 2.7cm;
    --mobile-album-y: 0cm;
    --mobile-album-size: 0.9;


    /* =================================
       ② 专辑手写标题
    ================================= */

    --mobile-title-x: 0cm;
    --mobile-title-y: -4cm;
    --mobile-title-size: 0.7;


    /* =================================
       ③ 已上线标语
    ================================= */

    --mobile-released-x: 0cm;
    --mobile-released-y: -4.6cm;
    --mobile-released-size: 1;


    /* =================================
       ④ 图二
    ================================= */

    --mobile-detail1-x: -0.5cm;
    --mobile-detail1-y: -5cm;
    --mobile-detail1-size: 1.9;


    /* =================================
       ⑤ 图三
    ================================= */

    --mobile-detail2-x: 0.5cm;
    --mobile-detail2-y: -5cm;
    --mobile-detail2-size: 1.9;


    /* =================================
       ⑥ 数量有限标语
    ================================= */

    --mobile-sold-x: 0cm;
    --mobile-sold-y: -4.3cm;
    --mobile-sold-size: 2;


    /* =================================
       ⑦ 微信图标
    ================================= */

    --mobile-wechat-x: 0cm;
    --mobile-wechat-y: 0.6cm;
    --mobile-wechat-size: 1;


    /* =================================
       ⑧ Join us
    ================================= */

    --mobile-join-x: 1.2cm;
    --mobile-join-y: -0.5cm;
    --mobile-join-size: 1.8;

  }


  /* =====================================
     ① 专辑 + CD整体
     不破坏之前的滚动物理效果
  ===================================== */

  .music-section.album-showcase
  .album-composite {

    translate:
      var(--mobile-album-x);
      var(--mobile-album-y);

    scale: var(--mobile-album-size);
  }


  /* =====================================
     ② 标题
  ===================================== */

  .music-section.album-showcase
  .showcase-title {

    translate:
      calc(
        var(--mobile-title-x) +
        var(--ss-scroll-x, 0px) +
        var(--move-x, 0px)
      )
      calc(
        var(--mobile-title-y) +
        var(--ss-scroll-y, 0px) +
        var(--move-y, 0px)
      );

    scale: var(--mobile-title-size);
  }


  /* =====================================
     ③ 已上线标语
  ===================================== */

  .music-section.album-showcase
  .showcase-released {

    translate:
      calc(
        var(--mobile-released-x) +
        var(--ss-scroll-x, 0px) +
        var(--move-x, 0px)
      )
      calc(
        var(--mobile-released-y) +
        var(--ss-scroll-y, 0px) +
        var(--move-y, 0px)
      );

    scale: var(--mobile-released-size);
  }


  /* =====================================
     ④ 图二
  ===================================== */

  .music-section.album-showcase
  .album-detail-row img:nth-child(1) {

    translate:
      calc(
        var(--mobile-detail1-x) +
        var(--ss-scroll-x, 0px) +
        var(--move-x, 0px)
      )
      calc(
        var(--mobile-detail1-y) +
        var(--ss-scroll-y, 0px) +
        var(--move-y, 0px)
      );

    scale: var(--mobile-detail1-size);
  }


  /* =====================================
     ⑤ 图三
  ===================================== */

  .music-section.album-showcase
  .album-detail-row img:nth-child(2) {

    translate:
      calc(
        var(--mobile-detail2-x) +
        var(--ss-scroll-x, 0px) +
        var(--move-x, 0px)
      )
      calc(
        var(--mobile-detail2-y) +
        var(--ss-scroll-y, 0px) +
        var(--move-y, 0px)
      );

    scale: var(--mobile-detail2-size);
  }


  /* =====================================
     ⑥ 数量有限
  ===================================== */

  .music-section.album-showcase
  .showcase-sold-out {

    translate:
      calc(
        var(--mobile-sold-x) +
        var(--ss-scroll-x, 0px) +
        var(--move-x, 0px)
      )
      calc(
        var(--mobile-sold-y) +
        var(--ss-scroll-y, 0px) +
        var(--move-y, 0px)
      );

    scale: var(--mobile-sold-size);
  }


  /* =====================================
     ⑦ 微信图标
  ===================================== */

  .music-section.album-showcase
  .showcase-wechat-icon {

    translate:
      calc(
        var(--mobile-wechat-x) +
        var(--ss-scroll-x, 0px) +
        var(--move-x, 0px)
      )
      calc(
        var(--mobile-wechat-y) +
        var(--ss-scroll-y, 0px) +
        var(--move-y, 0px)
      );

    scale: var(--mobile-wechat-size);
  }


  /* =====================================
     ⑧ Join us
  ===================================== */

  .music-section.album-showcase
  .showcase-join {

    translate:
      calc(
        var(--mobile-join-x) +
        var(--ss-scroll-x, 0px) +
        var(--move-x, 0px)
      )
      calc(
        var(--mobile-join-y) +
        var(--ss-scroll-y, 0px) +
        var(--move-y, 0px)
      );

    scale: var(--mobile-join-size);
  }

}

/* =============================================
   木世虫 · 第二屏手机端专辑独立控制面板

   只影响手机端（宽度 <= 700px）
   不影响电脑端

   X：正数向右，负数向左
   Y：正数向下，负数向上
   SIZE：1 = 原尺寸
         0.8 = 缩小20%
         1.5 = 放大50%
============================================= */

@media screen and (max-width: 700px) {

  .music-section.album-showcase {

    /* =================================
       ① 专辑封面独立调整
    ================================= */

    --phone-cover-x: 0cm;
    --phone-cover-y: -2cm;
    --phone-cover-size: 0.9;


    /* =================================
       ② 绿色CD独立调整
    ================================= */

    --phone-disc-x: 0cm;
    --phone-disc-y: -2.25cm;
    --phone-disc-size: 1.2;

    /* CD旋转一圈的时间 */
    --phone-disc-speed: 24s;

  }


  /* =====================================
     封面与CD的共同容器

     取消此前手机端整体缩放和左移，
     避免两层定位相互干扰。

     保留原来的水平居中与滚动物理效果。
  ===================================== */

  .music-section.album-showcase
  .album-composite {

    transform:
      translateX(-50%)
      translate3d(
        var(--ss-album-x, 0px),
        var(--ss-album-y, 0px),
        0
      )
      rotate(var(--ss-album-r, 0deg))
      !important;

    scale: 1;
  }


  /* =====================================
     ① 专辑封面
  ===================================== */

  .music-section.album-showcase
  .album-composite .showcase-cover {

    translate:
      var(--phone-cover-x)
      var(--phone-cover-y);

    scale: var(--phone-cover-size);

    transform-origin: center center;
  }


  /* =====================================
     ② 绿色CD
  ===================================== */

  .music-section.album-showcase
  .album-composite .showcase-disc {

    translate:
      var(--phone-disc-x)
      var(--phone-disc-y);

    scale: var(--phone-disc-size);

    transform-origin: center center;

    animation:
      showcaseDiscRotate
      var(--phone-disc-speed)
      linear infinite !important;
  }

}

/* 第二屏微信复制提示：淡入淡出 */

.music-section.album-showcase
.showcase-copy-feedback {
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* ==============================================
   第二屏 · 电脑端专辑封面 + CD 视觉整体居中
   仅电脑端；完全不修改手机端规则

   使用 flex 容器自身的居中定位，不再用窗口固定 cm 偏移。
   封面+CD 可见范围约占组合盒 7%~100.6%，
   其视觉中心约为 53.8%，故修正 -3.8%。
============================================== */
@media screen and (min-width: 701px) {
  .music-section.album-showcase .album-composite {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    top: -1cm !important;
    margin-left: auto !important;
    margin-right: auto !important;
    translate: none !important;
    scale: 1 !important;
    transform:
      translateX(-3.8%)
      translate3d(
        var(--ss-album-x, 0px),
        var(--ss-album-y, 0px),
        0
      )
      rotate(var(--ss-album-r, 0deg)) !important;
    transform-origin: center center !important;
  }
}