/* ========================================
   celebrate.css
   納車完了の祝福演出（紙吹雪＋中央カード）
   ======================================== */

#celebrate-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  pointer-events:none;
  overflow:hidden;
}
#celebrate-overlay.show{display:block}

/* 紙吹雪のコンテナ */
#celebrate-confetti{
  position:absolute;
  inset:0;
  overflow:hidden;
}

/* 紙吹雪1片 */
.confetti-piece{
  position:absolute;
  top:-20px;
  width:10px;
  height:14px;
  opacity:.95;
  animation:confetti-fall linear forwards;
  will-change:transform;
}

@keyframes confetti-fall{
  0%{
    transform:translate3d(0,-20px,0) rotate(0deg);
    opacity:1;
  }
  100%{
    transform:translate3d(var(--drift,0px), 110vh, 0) rotate(var(--spin,720deg));
    opacity:.85;
  }
}

/* 中央カード */
#celebrate-card{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(.6);
  background:linear-gradient(135deg,#fff 0%,#fffaf0 100%);
  border:3px solid #fcd34d;
  border-radius:20px;
  padding:36px 56px;
  box-shadow:0 20px 60px rgba(0,0,0,.35), 0 0 80px rgba(252,211,77,.4);
  text-align:center;
  opacity:0;
  pointer-events:auto;
  min-width:340px;
}

#celebrate-overlay.show #celebrate-card{
  animation:celebrate-pop .6s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes celebrate-pop{
  0%{transform:translate(-50%,-50%) scale(.4);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.08);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}

.celebrate-emoji{
  font-size:72px;
  line-height:1;
  margin-bottom:14px;
  animation:celebrate-bounce 1.2s ease-in-out infinite;
}

@keyframes celebrate-bounce{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-12px) rotate(3deg)}
}

.celebrate-title{
  font-size:32px;
  font-weight:900;
  color:#d97706;
  letter-spacing:.04em;
  margin-bottom:10px;
  text-shadow:0 2px 4px rgba(0,0,0,.08);
}

.celebrate-sub{
  font-size:18px;
  font-weight:700;
  color:#444;
  margin-bottom:14px;
}

.celebrate-car{
  font-size:13px;
  color:#666;
  padding:8px 14px;
  background:rgba(252,211,77,.18);
  border-radius:8px;
  display:inline-block;
}

/* フェードアウト */
#celebrate-overlay.fade-out{
  animation:celebrate-fade-out .5s ease-out forwards;
}
@keyframes celebrate-fade-out{
  0%{opacity:1}
  100%{opacity:0}
}