/* ===================================
   gifts.css — 礼物盒样式和交互动画
   =================================== */

.gifts-area {
    position: absolute;
    top: 48%;              /* 独立于蛋糕，直接相对主场景 */
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 5;            /* 确保在天空背景之上 */
    align-items: center;
    z-index: 5;
}

/* ---- 单个礼物盒（缩小） ---- */
.gift-box {
    position: relative;
    cursor: pointer;
    transform: scale(0.55);
    transform-origin: center;
    transition: transform 0.3s var(--ease-bounce);
    animation: float-side 4s ease-in-out infinite;
}

.gift-box:nth-child(2) { animation-delay: 0.3s; }
.gift-box:nth-child(3) { animation-delay: 0.6s; }

.gift-box:hover {
    transform: scale(0.65);
    animation-play-state: paused;
}

@keyframes float-side {
    0%,100% { transform: scale(0.55) translateX(0); }
    50%     { transform: scale(0.55) translateX(-6px); }
}

.gift-box:hover .gift-sparkle {
    opacity: 1;
    transform: translateY(-10px) scale(1.3);
}

/* 礼物闪光 */
.gift-sparkle {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    opacity: 0;
    transition: all 0.4s var(--ease-bounce);
    pointer-events: none;
}

/* ---- 礼物盒盖子 ---- */
.gift-lid {
    width: 100px;
    height: 28px;
    background: #FFB7C5;
    border-radius: 8px 8px 0 0;
    position: relative;
    z-index: 2;
    transform-origin: right bottom;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}

/* 不同盒子不同颜色 */
#giftWishtree .gift-lid { background: #FFEAA7; }
#giftBlessing .gift-lid { background: #C7CEEA; }

/* 蝴蝶结 */
.gift-bow {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
}

.bow-loop {
    position: absolute;
    width: 22px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #FF8E9E;
    background: #FFB7C5;
}

#giftWishtree .bow-loop { border-color: #E8C547; background: #FFEAA7; }
#giftBlessing .bow-loop { border-color: #A0A8D0; background: #C7CEEA; }

.bow-left {
    right: 4px;
    transform: rotate(-30deg);
}

.bow-right {
    left: 4px;
    transform: rotate(30deg);
}

.bow-knot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FF8E9E;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

#giftWishtree .bow-knot { background: #FFD700; }
#giftBlessing .bow-knot { background: #A0A8D0; }

/* ---- 礼物盒身体 ---- */
.gift-body {
    width: 100px;
    height: 70px;
    background: #FFD1DC;
    border-radius: 0 0 10px 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    overflow: hidden;
}

#giftWishtree .gift-body { background: #FFF5BA; }
#giftBlessing .gift-body { background: #DBDFF0; }

/* 丝带（竖） */
.gift-ribbon-v {
    position: absolute;
    width: 8px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.5);
}

/* 丝带（横） */
.gift-ribbon-h {
    position: absolute;
    width: 100%;
    height: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.5);
}

/* ---- 礼物盒标签文字 ---- */
.gift-label {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
    writing-mode: horizontal-tb;
}

/* ---- 抖动动画 ---- */
.gift-box.shaking {
    animation: shake 0.5s ease-in-out !important;
}

/* ---- 开盖状态 ---- */
.gift-box.opened .gift-lid {
    transform: translateY(-40px) rotate(-25deg) translateX(30px);
}

/* ---- 礼物穿帮光效 ---- */
.gift-box .glow {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6), transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.gift-box.opened .glow {
    opacity: 1;
    animation: twinkle 1s ease-in-out infinite;
}