/* =========================================================
 * 3D 双层旋转相册样式
 *  - 星空背景 / 漂浮爱心 / 底部光晕
 *  - 外层立方体 6 面，悬停（stage.open，由 TS 添加）时向外炸开
 *  - 内层立方体反向自转，悬停时才显现
 * ========================================================= */

:root {
  --cube-size: 300px;                          /* 外层立方体边长 */
  --cube-half: calc(var(--cube-size) / 2);
  --expand: 110px;                             /* 悬停时外层炸开的距离 */
  --inner-size: 132px;                         /* 内层立方体边长 */
  --inner-half: calc(var(--inner-size) / 2);
  --pad: transparent;                          /* 非正方形照片的补边色，改 #000 即黑边 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, #161d33 0%, #07080f 62%, #000 100%);
  color: #eee;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------- 星空 ---------------- */
.sky { position: fixed; inset: 0; z-index: 0; }

.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: .2;
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: .12; transform: scale(.75); }
  50%      { opacity: .95; transform: scale(1.2); }
}

/* ---------------- 漂浮爱心 ---------------- */
.hearts { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

.heart {
  position: absolute;
  bottom: -60px;
  left: var(--left, 50%);
  font-size: var(--size, 20px);
  line-height: 1;
  color: var(--c, #ff5f8f);
  text-shadow: 0 0 8px currentColor, 0 0 22px rgba(255, 79, 121, .6);
  opacity: 0;
  animation: floatUp var(--dur, 12s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0) scale(.6) rotate(-10deg); opacity: 0; }
  8%   { opacity: .9; }
  50%  { transform: translateY(-46vh) translateX(var(--sway, 24px)) scale(1) rotate(10deg); opacity: .75; }
  100% { transform: translateY(-108vh) translateX(calc(var(--sway, 24px) * -0.6)) scale(.8) rotate(-10deg); opacity: 0; }
}

/* ---------------- 底部光晕 ---------------- */
.floor-glow {
  position: fixed;
  left: 50%;
  bottom: 6%;
  width: 620px;
  height: 140px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 110, 160, .16), transparent 70%);
  filter: blur(8px);
  z-index: 1;
  pointer-events: none;
}

/* ---------------- 标题 ---------------- */
.header {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: 34px;
}

.title {
  display: inline-block;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 6px;
  background: linear-gradient(90deg, #ff8fb1, #ffe1ec 50%, #ff8fb1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 120, 160, .4));
}

.subtitle {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, .42);
}

/* ---------------- 3D 场景 ---------------- */
.scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1300px;
  /* 关键：让外层与内层两个立方体共享同一 3D 空间、按真实深度互相遮挡，
     否则它们各自拍平、按 DOM 顺序合成，内层会整体浮在外层之上 */
  transform-style: preserve-3d;
  touch-action: none;
  cursor: grab;
}

.scene.dragging { cursor: grabbing; }

/* 悬停感应区：透明盖板，尺寸固定、不随展开状态变化。
   （若尺寸随状态切换，边缘会在静止鼠标下扫过并触发 enter/leave，
   在边界环带形成"展开-收合"自激循环；固定尺寸则任何静止位置
   最多触发一次状态变化，不可能振荡） */
.hover-zone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cube-size) + 220px);
  height: calc(var(--cube-size) + 220px);
  transform: translate(-50%, -50%);
}

/* 舞台：JS 每帧写入 translate(-50%,-50%) rotateX() rotateY() */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
}

/* ---------------- 立方体与面 ---------------- */
.cube { position: absolute; inset: 0; transform-style: preserve-3d; }

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--pad); /* 非正方形照片按 contain 显示时的补边（--pad） */
  border-radius: 10px;
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 20px rgba(255, 158, 187, .35), inset 0 0 34px rgba(0, 0, 0, .28);
  backface-visibility: hidden;
  /* 位移慢（炸开有过程），透明度快（迅速让位不遮挡内层） */
  transition: transform .9s cubic-bezier(.22, .9, .3, 1), opacity .35s ease, border-color .35s ease;
}

.face img {
  width: 100%;
  height: 100%;
  /* 完整显示照片：不裁剪不拉伸，非正方形时上下/左右补黑色 */
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* 面本身也不接收鼠标：在 preserve-3d 深度排序下，面会挡住 z=0 平面的
   悬停感应区、抢走事件，导致“悬停立方体反而不展开”。
   悬停判定统一交给 .hover-zone，拖拽事件仍冒泡给 .scene */
.face { pointer-events: none; }

/* 六个面的朝向；--tz 是面到中心的距离，悬停时增大 => 向外炸开 */
.cube-outer .face { --tz: var(--cube-half); }

.cube-inner .face {
  --tz: var(--inner-half);
  border-width: 2px;
  border-radius: 8px;
  box-shadow: 0 0 26px rgba(255, 138, 176, .6);
}

.f-front  { transform: rotateY(0deg)   translateZ(var(--tz)); }
.f-back   { transform: rotateY(180deg) translateZ(var(--tz)); }
.f-right  { transform: rotateY(90deg)  translateZ(var(--tz)); }
.f-left   { transform: rotateY(-90deg) translateZ(var(--tz)); }
.f-top    { transform: rotateX(90deg)  translateZ(var(--tz)); }
.f-bottom { transform: rotateX(-90deg) translateZ(var(--tz)); }

/* 内层立方体：与外层平级、互为镜像旋转（速度完全一致，方向相反），
   常驻渲染，收起时被外层整体遮挡 */
.inner-rotor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
}

/* 内层立方体：常驻渲染、不做任何出现动画——
   收起时被不透明的外层立方体整体遮住，外层炸开的瞬间直接就“在那儿” */
.cube-inner {
  position: absolute;
  inset: auto;
  width: var(--inner-size);
  height: var(--inner-size);
  left: calc(50% - var(--inner-half));
  top: calc(50% - var(--inner-half));
  transform-style: preserve-3d;
}

/* ------- 展开状态：外层六面炸开变半透明，内层自然露出 ------- */
.scene.open .cube-outer .face {
  --tz: calc(var(--cube-half) + var(--expand));
  opacity: .16;
  border-color: rgba(255, 255, 255, .3);
}

/* ---------------- 底部控制条 ---------------- */
.controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .55);
}

input[type="range"] {
  width: 150px;
  accent-color: #ff7aa5;
  cursor: pointer;
}

.btn {
  padding: 6px 18px;
  font-size: 13px;
  letter-spacing: 2px;
  font-family: inherit;
  color: #ffd9e4;
  background: rgba(255, 122, 165, .12);
  border: 1px solid rgba(255, 122, 165, .45);
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s, box-shadow .25s;
}

.btn:hover {
  background: rgba(255, 122, 165, .3);
  box-shadow: 0 0 14px rgba(255, 122, 165, .4);
}

/* ---------------- 小屏适配 ---------------- */
@media (max-width: 480px) {
  :root { --cube-size: 210px; --inner-size: 96px; --expand: 70px; }
  .title { font-size: 20px; letter-spacing: 4px; }
  .scene { perspective: 900px; }
}