.gift-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(circle at 50% 40%, #FFF9F4 0%, #F4E6DF 60%, #EAD6CD 100%);
  transition: opacity .8s ease;
}
.gift-overlay.revealed { opacity: 0; }
.gift-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #5B3A33; max-width: 420px; }
.gift-lead { margin: 0; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: 20px; letter-spacing: .14em; }
.gift-from { margin: 0 0 26px; font-size: 15px; letter-spacing: .04em; }
.gift-title { margin: 22px 0 0; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: 15px; letter-spacing: .08em; }
.gift-open { margin-top: 22px; min-height: 52px; padding: 0 40px; border: none; border-radius: 999px; background: #A8473A; color: #fff; font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .3em; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(140, 50, 40, .55); }
.gift-open:focus-visible { outline: 3px solid #2F3B8F; outline-offset: 3px; }

/* The box */
.gift-box { position: relative; width: 200px; height: 170px; animation: gift-float 3.2s ease-in-out infinite; }
.gift-body { position: absolute; left: 10px; right: 10px; bottom: 0; height: 120px; border-radius: 4px; background: #F7F1E8; box-shadow: inset 0 -10px 18px -10px rgba(0,0,0,.18), 0 18px 26px -14px rgba(90, 40, 30, .45); }
.gift-lid { position: absolute; left: 0; right: 0; top: 34px; height: 30px; z-index: 2; border-radius: 4px; background: #FBF7F0; box-shadow: 0 4px 8px -4px rgba(0,0,0,.25); transition: transform 1s cubic-bezier(.3, .7, .2, 1), opacity 1s ease; }
.gift-ribbon-v { position: absolute; left: 50%; top: 34px; bottom: 0; width: 22px; z-index: 3; transform: translateX(-50%); background: linear-gradient(90deg, #9E3B30, #C25446 50%, #9E3B30); transition: opacity .5s ease, transform .6s ease; }
.gift-ribbon-h { position: absolute; left: 10px; right: 10px; top: 96px; height: 18px; z-index: 1; background: linear-gradient(180deg, #9E3B30, #C25446 50%, #9E3B30); transition: opacity .5s ease, transform .6s ease; }
.gift-bow { position: absolute; left: 50%; top: 6px; width: 92px; height: 40px; z-index: 4; transform: translateX(-50%); transition: transform .6s ease, opacity .5s ease; }
.gift-bow::before, .gift-bow::after {
  content: ""; position: absolute; top: 4px; width: 42px; height: 30px; border: 9px solid #B04A3D; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.gift-bow::before { left: 0; transform: rotate(-18deg); }
.gift-bow::after { right: 0; transform: rotate(18deg); }

/* Opening */
.gift-overlay.opening .gift-box { animation: none; }
.gift-overlay.opening .gift-bow { transform: translateX(-50%) translateY(-30px) scale(.6); opacity: 0; }
.gift-overlay.opening .gift-ribbon-v { transform: translateX(-50%) scaleY(0); opacity: 0; }
.gift-overlay.opening .gift-ribbon-h { transform: scaleX(0); opacity: 0; }
.gift-overlay.opening .gift-lid { transform: translateY(-90px) rotate(-14deg); opacity: 0; transition-delay: .35s; }
.gift-overlay.opening .gift-open, .gift-overlay.opening .gift-lead, .gift-overlay.opening .gift-from, .gift-overlay.opening .gift-title { opacity: 0; transition: opacity .4s ease; }

@keyframes gift-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .gift-box { animation: none; } }
.gift-overlay:focus { outline: none; }
.gift-perma { margin-top: 26px; padding: 14px 18px; max-width: 380px; border-top: 1px solid rgba(140, 80, 60, .25); }
.gift-perma p { margin: 0; }
.gift-perma-title { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: #6A3E2E; }
.gift-perma-text { margin-top: 6px !important; font-size: 12.5px; line-height: 1.8; color: #7A5A50; }
.gift-perma-date { margin-top: 6px !important; font-size: 12px; color: #9A7A70; }
.gift-overlay.opening .gift-perma { opacity: 0; transition: opacity .4s ease; }
@media (max-height: 700px) { .gift-box { transform: scale(.8); margin: -14px 0; } .gift-from { margin-bottom: 12px; } .gift-perma { margin-top: 14px; } .gift-open { margin-top: 14px; } }
.phrase { display: inline-block; }
