/* gift.css — the wrapped box, the note, the mini countdown, and the midnight birthday card.
   Transform owners: .gf-box = bob · .gf-lid = fly-off · .gf-bow = untie · .gf-tag = swing · .gf-box-wrap = entrance. */

.gf-stage { display: grid; place-items: center; width: 100%; }
.gf-stage > * { grid-area: 1 / 1; }
.gf-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gf-heading { margin-bottom: 26px; font-size: clamp(20px, 6vw, 30px); font-weight: 600; text-shadow: var(--text-shadow); animation: slideDown .8s var(--ease-out) both; }
.gf-hint { margin-top: 26px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .92); animation: pulse 2s var(--ease-pulse) infinite; }
.gf-from { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.gf-sound { margin-top: 10px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .85); }
.gf-intro.is-opening .gf-heading, .gf-intro.is-opening .gf-hint, .gf-intro.is-opening .gf-from,
.gf-intro.is-opening .gf-sound, .gf-intro.is-opening .gf-mini { opacity: 0; transition: opacity .4s ease; animation: none; }

/* ----- the box ----- */
.gf-box-wrap { animation: scaleIn .8s var(--ease-out) .15s both; }
.gf-box {
  position: relative;
  width: min(220px, 58vw);
  height: calc(min(220px, 58vw) * .86);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: gfBob 3s ease-in-out infinite;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@keyframes gfBob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.gf-base {
  position: absolute; left: 6%; right: 6%; bottom: 0; height: 70%;
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(#fff8f2, #ffd9c2);
  box-shadow: var(--shadow-card), inset 0 -8px 16px rgba(160, 60, 80, .15);
}
.gf-band, .gf-lid-band {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 16%; margin-left: -8%;
  background: linear-gradient(90deg, var(--seal-lo), var(--seal-hi) 45%, #ff6b82 55%, var(--seal-lo));
}
.gf-lid {
  position: absolute; left: 0; right: 0; top: 18%; height: 22%;
  border-radius: 10px;
  background: linear-gradient(#ffe9d9, #ffd2b8);
  box-shadow: 0 6px 14px rgba(120, 0, 40, .25);
  overflow: hidden;
  z-index: 2;
  transition: transform .8s var(--ease-flap), opacity .6s ease .2s;
}
.gf-lid-shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 2.6s linear infinite; }
.gf-bow { position: absolute; left: 50%; top: 2%; width: 44%; height: 24%; margin-left: -22%; z-index: 3; transition: transform .5s var(--ease-back), opacity .4s ease; }
.gf-bow-l, .gf-bow-r { position: absolute; top: 10%; width: 46%; height: 80%; border: 8px solid var(--seal-hi); border-radius: 50%; box-shadow: 0 2px 6px rgba(80, 0, 20, .3); }
.gf-bow-l { left: 0; transform: rotate(-20deg); }
.gf-bow-r { right: 0; transform: rotate(20deg); }
.gf-bow-k { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 6px; background: radial-gradient(circle at 35% 30%, #ff8a9c, var(--seal-lo)); z-index: 1; }
.gf-tag {
  position: absolute; right: -6%; top: 38%; z-index: 4;
  padding: 4px 10px; border-radius: 6px;
  background: #fffdf9; color: var(--ink);
  font: italic 600 14px/1.2 var(--font-love);
  box-shadow: 0 3px 8px rgba(80, 0, 20, .25);
  transform-origin: 0 50%;
  animation: gfSwing 3.2s ease-in-out infinite;
}
@keyframes gfSwing { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-4deg); } }
.gf-box.is-open { animation: none; }
.gf-box.is-open .gf-bow { transform: translateY(-40px) scale(1.3) rotate(-15deg); opacity: 0; }
.gf-box.is-open .gf-lid { transform: translate(40%, -180%) rotate(28deg); opacity: 0; transition-delay: .25s, .45s; }
.gf-box.is-open .gf-tag { animation: none; opacity: 0; transition: opacity .3s ease; }

/* ----- the mini countdown (visible before unlocking) ----- */
.gf-mini { margin-top: 22px; padding: 12px 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-bd); text-align: center; }
.gf-mini-title { font-size: 14px; font-weight: 600; text-shadow: var(--text-shadow); }
.gf-mini-time { display: block; margin-top: 2px; font-family: var(--font-love); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: var(--text-shadow); }
.gf-mini-teaser { margin-top: 2px; font-size: 13px; font-weight: 500; opacity: .92; }

/* ----- the note ----- */
.gf-note { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 26px 28px; }
.gf-note-bow { position: absolute; top: -14px; left: 50%; width: 46px; height: 24px; margin-left: -23px;
  background: radial-gradient(circle at 25% 50%, var(--seal-hi) 0 9px, transparent 10px), radial-gradient(circle at 75% 50%, var(--seal-hi) 0 9px, transparent 10px), radial-gradient(circle at 50% 50%, var(--seal-lo) 0 6px, transparent 7px); }
.gf-note-greeting { font-size: 24px; font-weight: 600; color: var(--ink); }
.gf-note-line { font-size: 17px; line-height: 1.55; color: var(--ink); animation: fadeIn .8s var(--ease-out) both; }
.gf-note-sign { font-size: 18px; font-style: italic; color: var(--ink); }

/* ----- ?og screenshot frame ----- */
.gf-og { padding: 0 !important; justify-content: center; }
.gf-og .gf-heading { font-size: 44px; margin-bottom: 36px; }
.gf-og .gf-box { width: 280px; height: 241px; animation: none; cursor: default; }
html.og-mode .music-toggle, html.og-mode .test-badge, html.og-mode .next-btn, html.og-mode .gf-bday-chip { display: none !important; }

/* ----- the midnight hand-off (body-level, over any screen) ----- */
.gf-bday { position: fixed; inset: 0; z-index: 38; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(136, 14, 79, .5); animation: fadeIn .5s ease both; }
.gf-bday-card { width: min(92vw, 400px); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 30px 22px 22px; animation: cardIn .7s var(--ease-out) both; }
.gf-bday-cake { font-size: 56px; line-height: 1; }
.gf-bday-title { font-size: 28px; font-weight: 700; color: var(--ink); }
.gf-bday-text { font-size: 17px; line-height: 1.5; color: var(--ink); }
.gf-bday-wa { width: 100%; margin-top: 4px; }
.gf-bday-back { color: var(--rose-700); }
.gf-bday-chip {
  position: fixed; z-index: 37; left: 50%; top: calc(62px + var(--sat)); transform: translateX(-50%);
  max-width: calc(100vw - 24px); padding: 8px 14px; border: 0; border-radius: 999px;
  background: #fff; color: var(--rose-700); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-btn); cursor: pointer;
}

@media (max-height: 560px) {
  .gf-heading { margin-bottom: 14px; }
  .gf-box { width: 170px; height: 146px; }
  .gf-hint { margin-top: 14px; }
  .gf-mini { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-box, .gf-tag, .gf-box-wrap, .gf-heading, .gf-hint, .gf-lid-shine { animation: none !important; }
  .gf-lid, .gf-bow { transition-duration: .15s !important; }
}