/* ===== 3D Gift Box ===== */
.giftbox-scene {
  perspective: 1100px;
  width: 340px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.giftbox-stage {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(-32deg);
  animation: boxFloat 7s ease-in-out infinite;
}
@keyframes boxFloat {
  0%, 100% { transform: rotateX(-22deg) rotateY(-32deg) translateY(0); }
  50% { transform: rotateX(-22deg) rotateY(-22deg) translateY(-16px); }
}

.gb-face {
  position: absolute;
  width: 200px;
  height: 200px;
  background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 70%, #1a1430), color-mix(in oklab, var(--accent-2) 55%, #141228));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 0 50px rgba(0,0,0,0.35);
}
.gb-face.front  { transform: translateZ(100px); }
.gb-face.back   { transform: rotateY(180deg) translateZ(100px); }
.gb-face.right  { transform: rotateY(90deg) translateZ(100px); }
.gb-face.left   { transform: rotateY(-90deg) translateZ(100px); }
.gb-face.bottom { transform: rotateX(-90deg) translateZ(100px); }

/* ribbon on body */
.gb-face::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 30px;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(var(--accent-3), color-mix(in oklab, var(--accent-3) 60%, #a36b00));
  box-shadow: 0 0 24px color-mix(in oklab, var(--accent-3) 60%, transparent);
  opacity: 0.95;
}

/* lid */
.gb-lid {
  position: absolute;
  width: 224px;
  height: 56px;
  top: -78px;
  left: -12px;
  transform-style: preserve-3d;
  transform: translateY(0);
  animation: lidLift 7s ease-in-out infinite;
}
@keyframes lidLift {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50% { transform: translateY(-26px) rotateZ(-2deg); }
}
.gb-lid-face {
  position: absolute;
  background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 80%, #fff 4%), color-mix(in oklab, var(--accent-2) 65%, #141228));
  border: 1px solid rgba(255,255,255,0.25);
}
.gb-lid-top    { width: 224px; height: 224px; transform: rotateX(90deg) translateZ(28px) translateY(-112px); }
.gb-lid-front  { width: 224px; height: 56px; transform: translateZ(112px); }
.gb-lid-back   { width: 224px; height: 56px; transform: rotateY(180deg) translateZ(112px); }
.gb-lid-right  { width: 224px; height: 56px; transform: rotateY(90deg) translateZ(112px); }
.gb-lid-left   { width: 224px; height: 56px; transform: rotateY(-90deg) translateZ(112px); }
.gb-lid-front::before, .gb-lid-back::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 30px; height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(var(--accent-3), color-mix(in oklab, var(--accent-3) 60%, #a36b00));
  box-shadow: 0 0 24px color-mix(in oklab, var(--accent-3) 60%, transparent);
}

/* bow */
.gb-bow {
  position: absolute;
  top: -118px; left: 50%;
  transform: translateX(-50%);
  width: 76px; height: 50px;
  animation: lidLift 7s ease-in-out infinite;
}
.gb-bow span {
  position: absolute; top: 6px;
  width: 38px; height: 44px;
  background: radial-gradient(circle at 40% 40%, color-mix(in oklab, var(--accent-3) 90%, #fff), color-mix(in oklab, var(--accent-3) 50%, #7a4d00));
  border-radius: 50% 50% 50% 10%;
  box-shadow: 0 0 26px color-mix(in oklab, var(--accent-3) 70%, transparent);
}
.gb-bow span.l { left: -6px; transform: rotate(-26deg); }
.gb-bow span.r { right: -6px; transform: rotate(26deg) scaleX(-1); }
.gb-bow .knot {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff8e6, var(--accent-3));
  box-shadow: 0 0 20px color-mix(in oklab, var(--accent-3) 80%, transparent);
  z-index: 2;
}

/* floor glow */
.gb-glow {
  position: absolute;
  bottom: -56px; left: 50%;
  transform: translateX(-50%) rotateX(74deg);
  width: 230px; height: 230px;
  background: radial-gradient(circle, var(--glow), transparent 60%);
  filter: blur(8px);
  opacity: 0.65;
  animation: glowPulse 7s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { opacity: 0.5; transform: translateX(-50%) rotateX(74deg) scale(1); }
  50% { opacity: 0.8; transform: translateX(-50%) rotateX(74deg) scale(1.08); }
}

/* sparkles floating out */
.gb-spark {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--accent-3);
  clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter: drop-shadow(0 0 6px var(--accent-3));
  animation: sparkRise linear infinite;
  opacity: 0;
}
@keyframes sparkRise {
  0% { transform: translateY(0) scale(0.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-150px) scale(1); opacity: 0; }
}