/* «هدية منّا لك»: صندوق هدية بستايل الملصقات، غطاه بيتفتح ويطلع منه نور، وتحته الأزرار */
.gift { background: #f4f4f4; color: #111; padding: clamp(70px, 9vw, 120px) 16px clamp(70px, 8vw, 110px); text-align: center; overflow: hidden; }
.gift-kicker { display: inline-block; font-size: 15px; font-weight: 700; color: #b9771f; letter-spacing: .02em; margin-bottom: 10px; }
.gift h2 { margin: 0; font-size: clamp(46px, 7.4vw, 104px); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; }
.gift h2 span { display: block; }
.gift-sub { max-width: 560px; margin: 18px auto 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.8; color: #555; }

/* الرسمة */
.gift-art { position: relative; width: min(420px, 82vw); margin: clamp(10px, 2vw, 24px) auto 0; aspect-ratio: 400 / 430; cursor: pointer; }
.gift-art svg { position: relative; z-index: 2; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 30px 40px #0000002a); animation: gift-float 4.5s ease-in-out infinite; }
.gift-rays { position: absolute; z-index: 1; left: 50%; top: 40%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; scale: .4; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, #ffd98e66 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); transition: opacity .8s, scale 1.2s cubic-bezier(.2, 1, .3, 1); }
.gift-glow { position: absolute; z-index: 1; left: 50%; top: 46%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #ffe2a2 0, #f1b35c55 40%, transparent 70%); opacity: 0; transition: opacity .8s; pointer-events: none; }
.gift-lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .9s cubic-bezier(.3, 1.6, .5, 1); }
.gift.open .gift-lid { transform: translate(-6px, -58px) rotate(-16deg); }
.gift.open .gift-rays { opacity: 1; scale: 1; animation: gift-spin 26s linear infinite; }
.gift.open .gift-glow { opacity: 1; }
.gift-spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.gift.open .gift-spark { animation: gift-twinkle 2.2s ease-in-out infinite; }
.gift.open .gift-spark:nth-of-type(2) { animation-delay: .4s; } .gift.open .gift-spark:nth-of-type(3) { animation-delay: .8s; } .gift.open .gift-spark:nth-of-type(4) { animation-delay: 1.2s; } .gift.open .gift-spark:nth-of-type(5) { animation-delay: 1.6s; }
.gift-eye { transform-box: fill-box; transform-origin: center; animation: gift-blink 5s infinite; }
.gift-mouth { transition: d .5s; }
.gift-tag { position: absolute; z-index: 3; top: 6%; inset-inline-end: -2%; rotate: 10deg; padding: 8px 16px; border-radius: 12px; background: #f1b35c; color: #111; font-weight: 800; font-size: clamp(14px, 1.4vw, 17px); box-shadow: 0 0 0 4px #fff, 0 12px 24px #0002; animation: gift-sway 3s ease-in-out infinite; }

/* الأزرار */
.gift-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(26px, 3vw, 40px); }
.gift-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: min(300px, 100%); min-height: 70px; padding: 0 34px; border-radius: 999px; border: 1px solid #d6d6d6; background: transparent; color: #111; font: inherit; font-size: 19px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; }
.gift-btn:hover { transform: translateY(-2px); background: #fff; color: #111; }
.gift-btn.main { background: #111; border-color: #111; color: #fff; box-shadow: 0 14px 30px #0000002e; }
.gift-btn.main:hover { background: #222; color: #fff; }
.gift-btn svg { width: 16px; height: 16px; }

@keyframes gift-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes gift-spin { to { rotate: 360deg; } }
@keyframes gift-twinkle { 0%, 100% { opacity: 0; scale: .3; } 50% { opacity: 1; scale: 1.1; } }
@keyframes gift-blink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .1; } }
@keyframes gift-sway { 0%, 100% { rotate: 10deg; } 50% { rotate: 4deg; } }
@media (max-width: 640px) { .gift-btn { min-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .gift-art svg, .gift-tag, .gift-eye, .gift.open .gift-rays, .gift.open .gift-spark { animation: none; } .gift.open .gift-spark { opacity: 1; } .gift-lid, .gift-rays { transition: none; } }