/* ========================================================
   CADEAU 3D CINÉMATIQUE, DÉBALLAGE EXPLOSIF & EFFET WOW
   ======================================================== */

.gift-scene-container {
  position: relative;
  width: 100%;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
  perspective-origin: 50% 40%;
  overflow: visible;
  padding: 30px 10px;
}

/* HALO SOLAIRE & RAYONS CÉLESTES EN ARRIÈRE-PLAN */
.gift-celestial-aura {
  position: absolute;
  width: 380px;
  height: 380px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, rgba(245, 158, 11, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: pulseAura 3s ease-in-out infinite;
  transition: all 0.8s ease;
}

@keyframes pulseAura {
  0%, 100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.95; }
}

/* COLONNE DE LUMIÈRE QUI JAILLIT DE LA BOÎTE OUVERTE */
.gift-light-beam {
  position: absolute;
  width: 160px;
  height: 0;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(254, 240, 138, 0.9) 0%, rgba(251, 191, 36, 0.6) 40%, rgba(255, 255, 255, 0) 100%);
  filter: blur(8px);
  border-radius: 80px 80px 0 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

.gift-scene-container.opened .gift-light-beam {
  height: 480px;
  opacity: 1;
}

/* CONTENEUR DE LA BOÎTE CADEAU 3D */
.gift-box-3d {
  position: relative;
  width: 160px;
  height: 160px;
  transform-style: preserve-3d;
  transform: rotateX(-16deg) rotateY(28deg);
  cursor: pointer;
  z-index: 5;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: giftLevitate 3.4s ease-in-out infinite;
}

.gift-box-3d:hover {
  transform: rotateX(-12deg) rotateY(36deg) scale(1.08);
}

@keyframes giftLevitate {
  0%, 100% { transform: translateY(0) rotateX(-16deg) rotateY(28deg); }
  50% { transform: translateY(-16px) rotateX(-13deg) rotateY(32deg); }
}

/* OMBRE PORTÉE AU SOL */
.gift-shadow {
  position: absolute;
  width: 170px;
  height: 70px;
  bottom: -45px;
  left: -5px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 72%);
  border-radius: 50%;
  transform: rotateX(74deg);
  pointer-events: none;
  transition: all 0.4s ease;
}

.gift-box-3d:hover ~ .gift-shadow {
  transform: rotateX(74deg) scale(0.9);
  opacity: 0.35;
}

/* ========================================================
   FACES DU CORPS DU CUBE 3D (140px x 140px)
   ======================================================== */
.gift-cube-body {
  position: absolute;
  width: 140px;
  height: 120px;
  top: 30px;
  left: 10px;
  transform-style: preserve-3d;
}

.cube-face {
  position: absolute;
  width: 140px;
  height: 120px;
  backface-visibility: hidden;
  border-radius: 4px;
}

/* FACE AVANT (Plein éclat velours rouge) */
.face-front {
  transform: translateZ(70px);
  background: linear-gradient(135deg, #e11d48 0%, #be123c 60%, #9f1239 100%);
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.25);
}

/* FACE DROITE (Ombrée pour la profondeur 3D) */
.face-right {
  transform: rotateY(90deg) translateZ(70px);
  background: linear-gradient(135deg, #9f1239 0%, #881337 70%, #4c0519 100%);
  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.5);
}

/* FACE GAUCHE */
.face-left {
  transform: rotateY(-90deg) translateZ(70px);
  background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);
}

/* INTÉRIEUR DU CADEAU (DORÉ ET LUMINEUX LORS DE L'OUVERTURE) */
.face-top-inside {
  position: absolute;
  width: 140px;
  height: 140px;
  top: -10px;
  transform: rotateX(90deg) translateZ(60px);
  background: radial-gradient(circle, #fef08a 0%, #f59e0b 60%, #b45309 100%);
  box-shadow: 0 0 50px #fbbf24;
}

/* ========================================================
   RUBANS DORÉS EFFET SOIE SUR LE CORPS
   ======================================================== */
.ribbon-v {
  position: absolute;
  width: 28px;
  height: 100%;
  left: 56px;
  top: 0;
  background: linear-gradient(90deg, #fef08a 0%, #fbbf24 30%, #d97706 70%, #b45309 100%);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  z-index: 2;
}

.ribbon-h {
  position: absolute;
  width: 100%;
  height: 28px;
  left: 0;
  top: 46px;
  background: linear-gradient(180deg, #fef08a 0%, #fbbf24 30%, #d97706 70%, #b45309 100%);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  z-index: 2;
}

/* ÉTIQUETTE CADEAU AVEC CACHET DE CIRE */
.box-tag {
  position: absolute;
  top: 15px;
  right: 12px;
  background: #fffbeb;
  border: 1px solid #fef08a;
  border-radius: 4px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: rotate(8deg);
  z-index: 3;
}

.wax-seal {
  font-size: 1.1rem;
}

.tag-text {
  font-family: var(--font-festive);
  font-size: 0.85rem;
  font-weight: 800;
  color: #881337;
}

/* ========================================================
   COUVERCLE DU CUBE 3D (S'ÉJECTE LORS DU DÉBALLAGE)
   ======================================================== */
.gift-cube-lid {
  position: absolute;
  width: 156px;
  height: 38px;
  top: 12px;
  left: 2px;
  transform-style: preserve-3d;
  z-index: 10;
  transition: transform 0.85s cubic-bezier(0.12, 0.9, 0.2, 1.2), opacity 0.6s ease;
}

.lid-face {
  position: absolute;
  backface-visibility: hidden;
}

/* FACE DU DESSUS DU COUVERCLE */
.lid-top {
  width: 156px;
  height: 156px;
  transform: rotateX(90deg) translateZ(78px);
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 50%, #be123c 100%);
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.25), 0 0 15px rgba(251, 191, 36, 0.3);
  border-radius: 6px;
}

.lid-front {
  width: 156px;
  height: 36px;
  transform: translateZ(78px);
  background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

.lid-right {
  width: 156px;
  height: 36px;
  transform: rotateY(90deg) translateZ(78px);
  background: linear-gradient(180deg, #be123c 0%, #881337 100%);
  border-radius: 0 0 4px 4px;
}

/* RUBANS SUR LE COUVERCLE */
.ribbon-top-v {
  position: absolute;
  width: 28px;
  height: 100%;
  left: 64px;
  background: linear-gradient(90deg, #fef08a 0%, #fbbf24 50%, #d97706 100%);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.8);
}

.ribbon-top-h {
  position: absolute;
  width: 100%;
  height: 28px;
  top: 64px;
  background: linear-gradient(180deg, #fef08a 0%, #fbbf24 50%, #d97706 100%);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.8);
}

/* ========================================================
   ROSETTE / NOEUD DORÉ ULTRA-LUXE (Multi-boucles)
   ======================================================== */
.gift-bow-luxury {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  z-index: 12;
}

.bow-loop {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 7px solid #fbbf24;
  border-radius: 50% 50% 0 50%;
  background: radial-gradient(circle, #fef08a 0%, #f59e0b 80%);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.9), inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.loop-left {
  top: 8px;
  left: 4px;
  transform: rotate(-35deg);
}

.loop-right {
  top: 8px;
  right: 4px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(35deg);
}

.loop-top {
  top: -2px;
  left: 21px;
  border-radius: 50% 50% 0 50%;
  transform: rotate(45deg);
  width: 32px;
  height: 32px;
}

.loop-bottom {
  bottom: 0px;
  left: 21px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  width: 32px;
  height: 32px;
}

.bow-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  background: radial-gradient(circle, #ffffff 0%, #fef08a 30%, #f59e0b 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: 0 0 18px #ffffff, 0 0 28px #fbbf24;
  animation: pulseAvatar 1.5s infinite;
}

/* ========================================================
   ÉTINCELLES MAGIQUES EN LÉVITATION
   ======================================================== */
.gift-sparkles-floating {
  position: absolute;
  inset: -30px;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  font-size: 1.4rem;
  opacity: 0.8;
  animation: floatSparkle 2.6s ease-in-out infinite;
  text-shadow: 0 0 12px #fbbf24;
}

.s1 { top: -10px; left: 10px; animation-delay: 0s; }
.s2 { top: 20px; right: -15px; animation-delay: 0.6s; font-size: 1.6rem; color: #fef08a; }
.s3 { bottom: 20px; left: -20px; animation-delay: 1.2s; font-size: 1.2rem; }
.s4 { bottom: -10px; right: 15px; animation-delay: 1.8s; color: #ffd700; }

@keyframes floatSparkle {
  0%, 100% { transform: translateY(0) scale(0.8) rotate(0deg); opacity: 0.4; }
  50% { transform: translateY(-16px) scale(1.25) rotate(25deg); opacity: 1; }
}

/* BOUTON / BADGE D'INCITATION */
.unboxing-cta-badge {
  margin-top: 36px;
  background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
  border: 2px solid #fbbf24;
  color: #fffbeb;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(185, 28, 28, 0.45), 0 0 15px rgba(251, 191, 36, 0.5);
  animation: pulseCta 1.6s ease-in-out infinite;
  cursor: pointer;
}

.finger-tap-icon {
  font-size: 1.3rem;
  animation: tapMotion 1s infinite alternate;
}

@keyframes tapMotion {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px) scale(1.15); }
}

@keyframes pulseCta {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(185, 28, 28, 0.45); }
  50% { transform: scale(1.04); box-shadow: 0 8px 30px rgba(245, 158, 11, 0.7); }
}

/* ========================================================
   CHORÉGRAPHIE D'OUVERTURE CINÉMATIQUE
   ======================================================== */

/* 1. CHARGEMENT / SÉISME MAGIQUE AVANT EXPLOSION */
.gift-box-3d.charging {
  animation: seismicRumble 0.08s ease-in-out infinite alternate !important;
}

.gift-box-3d.charging .ribbon-v,
.gift-box-3d.charging .ribbon-h,
.gift-box-3d.charging .ribbon-top-v,
.gift-box-3d.charging .ribbon-top-h {
  filter: brightness(1.7) drop-shadow(0 0 15px #ffffff);
}

@keyframes seismicRumble {
  0% { transform: translateY(-4px) rotateX(-15deg) rotateY(26deg) scale(1.06); }
  100% { transform: translateY(2px) rotateX(-17deg) rotateY(31deg) scale(1.08); }
}

/* 2. ÉJECTION DU COUVERCLE VERS LE CIEL */
.gift-box-3d.blast-open .gift-cube-lid {
  transform: translateY(-380px) rotateX(-85deg) rotateZ(60deg) scale(0.4) !important;
  opacity: 0 !important;
}

.gift-box-3d.blast-open {
  animation: none !important;
  transform: rotateX(-8deg) rotateY(20deg) scale(1.02) !important;
  transition: transform 0.6s ease;
}

/* ========================================================
   RÉSULTAT RÉVÉLÉ : CARTE CÉLESTE LÉGENDAIRE
   ======================================================== */
.reveal-celestial-wrapper {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  perspective: 1000px;
}

/* DISQUE DE RAYONS SOLAIRES QUI TOURNE EN CONTINU */
.sunburst-disc {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    rgba(251, 191, 36, 0.22) 0deg 20deg,
    transparent 20deg 40deg,
    rgba(251, 191, 36, 0.22) 40deg 60deg,
    transparent 60deg 80deg,
    rgba(251, 191, 36, 0.22) 80deg 100deg,
    transparent 100deg 120deg,
    rgba(251, 191, 36, 0.22) 120deg 140deg,
    transparent 140deg 160deg,
    rgba(251, 191, 36, 0.22) 160deg 180deg,
    transparent 180deg 200deg,
    rgba(251, 191, 36, 0.22) 200deg 220deg,
    transparent 220deg 240deg,
    rgba(251, 191, 36, 0.22) 240deg 260deg,
    transparent 260deg 280deg,
    rgba(251, 191, 36, 0.22) 280deg 300deg,
    transparent 300deg 320deg,
    rgba(251, 191, 36, 0.22) 320deg 340deg,
    transparent 340deg 360deg
  );
  border-radius: 50%;
  animation: spinSunburst 25s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes spinSunburst {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* CARTE EN ÉLÉVATION MAGIQUE */
.reveal-result-card {
  position: relative;
  background: linear-gradient(145deg, #ffffff 0%, #fffdf5 40%, #fef3c7 100%);
  border: 3px solid #fbbf24;
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 0 35px rgba(245, 158, 11, 0.45);
  animation: celestialAscend 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 5;
  overflow: hidden;
}

@keyframes celestialAscend {
  0% {
    opacity: 0;
    transform: translateY(80px) scale(0.6) rotateX(25deg);
  }
  60% {
    transform: translateY(-12px) scale(1.04) rotateX(-4deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
  }
}

/* RUBAN SUPÉRIEUR CONFIDENTIEL */
.card-mission-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #881337 0%, #991b1b 100%);
  color: #fef08a;
  border: 1px solid #f59e0b;
  padding: 6px 18px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(136, 19, 55, 0.3);
}

/* MÉDAILLON ROYAL DE L'AVATAR */
.receiver-avatar-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 12px auto;
}

.receiver-avatar-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 3px dashed #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
  pointer-events: none;
  animation: spinRing 20s linear infinite;
}

@keyframes spinRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.receiver-avatar {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #fef3c7 0%, #fde68a 60%, #fbbf24 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.2rem;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4), inset 0 2px 4px #ffffff;
  animation: bounceAvatar 2.2s ease-in-out infinite;
}

@keyframes bounceAvatar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08) translateY(-4px); }
}

/* TYPOGRAPHIE MÉTALLIQUE DORÉE DU NOM */
.receiver-name {
  font-family: var(--font-festive);
  font-size: 3rem;
  font-weight: 800;
  margin: 8px 0 14px 0;
  background: linear-gradient(90deg, #991b1b 0%, #d97706 25%, #fbbf24 50%, #d97706 75%, #991b1b 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shineMetallic 4s linear infinite;
  text-shadow: 0 2px 14px rgba(245, 158, 11, 0.3);
}

@keyframes shineMetallic {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* BOÎTE DES IDÉES CADEAUX */
.receiver-wishlist {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 18px;
  margin: 16px 0;
  text-align: left;
  border: 2px solid #fed7aa;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04);
}

.wishlist-pill {
  padding: 10px 14px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-radius: var(--radius-sm);
  border: 1px solid #fde047;
  margin-bottom: 8px;
  color: #1e293b;
  font-size: 0.98rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  animation: slideWishItem 0.5s ease-out forwards;
}

@keyframes slideWishItem {
  0% { opacity: 0; transform: translateX(-15px); }
  100% { opacity: 1; transform: translateX(0); }
}