/* ==========================================================================
   Regalo Digital - 3D Animated Gift Box, Ribbon & Tag Styles
   ========================================================================== */

.gift-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  user-select: none;
  overflow: visible !important; /* Ensure character jump & speech bubble are never clipped */
}

/* Base Shadow */
.box-floor-shadow {
  width: 220px;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  margin-top: -20px;
  transition: var(--transition-normal);
  animation: shadowPulse 3s ease-in-out infinite alternate;
  z-index: 2;
}

@keyframes shadowPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.1); opacity: 0.9; }
}

/* 3D Box Main Wrapper */
.gift-box-container {
  position: relative;
  width: 240px;
  height: 240px;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 0.4s var(--transition-bounce);
  z-index: 10;
  overflow: visible !important; /* Guaranteed no clipping */
}

.gift-box-container:hover {
  transform: translateY(-8px) rotateY(5deg) rotateX(2deg);
}

.gift-box-container:hover .box-floor-shadow {
  transform: scale(0.85);
  opacity: 0.5;
}

/* Gift Box Body */
.box-body {
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 180px;
  background: linear-gradient(145deg, var(--box-color-light) 0%, var(--box-color) 60%, var(--box-color-dark) 100%);
  border-radius: 12px 12px 20px 20px;
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.4),
    inset 0 -10px 20px rgba(0, 0, 0, 0.25),
    0 12px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden; /* Local paper shimmer clipping only */
  transform-style: preserve-3d;
  transition: background 0.3s ease;
  z-index: 5;
}

/* Shimmer overlay on box paper */
.box-body::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    115deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0) 40%, 
    rgba(255, 255, 255, 0.25) 50%, 
    rgba(255, 255, 255, 0) 60%, 
    transparent 100%
  );
  animation: boxShimmer 6s infinite linear;
  pointer-events: none;
}

@keyframes boxShimmer {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(50%); }
}

/* Body Ribbons */
.body-ribbon-v {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 44px;
  height: 100%;
  background: linear-gradient(90deg, var(--ribbon-color-dark) 0%, var(--ribbon-color) 40%, var(--ribbon-color) 70%, var(--ribbon-color-dark) 100%);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1);
  transition: background 0.3s ease;
}

.body-ribbon-h {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 44px;
  background: linear-gradient(180deg, var(--ribbon-color-dark) 0%, var(--ribbon-color) 40%, var(--ribbon-color) 70%, var(--ribbon-color-dark) 100%);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1);
  transition: background 0.3s ease;
}

/* Gift Box Lid */
.box-lid {
  position: absolute;
  top: 30px;
  left: -10px;
  width: 260px;
  height: 55px;
  background: linear-gradient(145deg, var(--box-color-light) 0%, var(--box-color) 70%, var(--box-color-dark) 100%);
  border-radius: 14px;
  box-shadow: 
    inset 0 3px 6px rgba(255, 255, 255, 0.5),
    0 8px 18px rgba(0, 0, 0, 0.35);
  z-index: 15;
  transform-origin: top left;
  transition: transform 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045), background 0.3s ease;
}

.lid-ribbon-v {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 46px;
  height: 100%;
  background: linear-gradient(90deg, var(--ribbon-color-dark) 0%, var(--ribbon-color) 50%, var(--ribbon-color-dark) 100%);
}

/* Ribbon Bow on top of lid */
.ribbon-bow-container {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 50px;
  z-index: 20;
  transition: transform 0.5s ease;
}

.bow-knot {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 24px;
  background: linear-gradient(135deg, var(--ribbon-color) 0%, var(--ribbon-color-dark) 100%);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 5;
}

.bow-loop-left, .bow-loop-right {
  position: absolute;
  top: 8px;
  width: 55px;
  height: 38px;
  border: 12px solid var(--ribbon-color);
  border-radius: 50% 50% 10% 50%;
  box-shadow: inset 0 -4px 6px rgba(0,0,0,0.2), 0 6px 12px rgba(0,0,0,0.2);
}

.bow-loop-left {
  left: 6px;
  transform: rotate(-25deg) scaleX(-1);
}

.bow-loop-right {
  right: 6px;
  transform: rotate(25deg);
}

/* Hanging Tag on Right Corner */
.box-tag {
  position: absolute;
  top: 48px;
  right: -24px;
  width: 95px;
  min-height: 52px;
  background: var(--tag-color);
  color: var(--tag-text-color);
  padding: 10px 8px 8px 8px;
  border-radius: 8px 8px 14px 14px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  transform-origin: 10px -20px;
  animation: tagSway 4s ease-in-out infinite alternate;
  z-index: 22;
  text-align: center;
  font-family: var(--font-heading);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Hole & String for tag */
.box-tag::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 14px;
  width: 7px;
  height: 7px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 50%;
}

.tag-string {
  position: absolute;
  top: -24px;
  left: 17px;
  width: 2px;
  height: 28px;
  background: var(--ribbon-color-dark);
  transform: rotate(-25deg);
  transform-origin: bottom center;
}

.tag-to {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.1;
  word-break: break-word;
}

.tag-from {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 4px;
  word-break: break-word;
}

@keyframes tagSway {
  0% { transform: rotate(-6deg); }
  50% { transform: rotate(5deg); }
  100% { transform: rotate(-4deg); }
}

/* Sparkle Effects on Box */
.box-sparkle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #fff 20%, transparent 70%);
  pointer-events: none;
  animation: sparkleTwinkle 2s infinite ease-in-out;
}

@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(45deg); }
}

/* ==========================================================================
   UNBOXING ANIMATION STATES
   ========================================================================== */

/* State 1: Rumble / Shake */
.gift-box-container.is-rumbling {
  animation: boxRumble 0.12s infinite ease-in-out;
}

@keyframes boxRumble {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-4px, 2px) rotate(-3deg); }
  50% { transform: translate(4px, -2px) rotate(3deg); }
  75% { transform: translate(-3px, -1px) rotate(-2deg); }
  100% { transform: translate(3px, 1px) rotate(2deg); }
}

/* State 2: Bow Fly Off */
.gift-box-container.is-opening .ribbon-bow-container {
  animation: bowPopOff 0.7s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bowPopOff {
  0% { transform: translateX(-50%) translateY(0) scale(1) rotate(0deg); opacity: 1; }
  50% { transform: translateX(-50%) translateY(-120px) scale(1.3) rotate(-30deg); opacity: 0.9; }
  100% { transform: translateX(-50%) translateY(-250px) scale(0) rotate(180deg); opacity: 0; }
}

/* State 3: Lid Fly Open */
.gift-box-container.is-opening .box-lid {
  animation: lidOpen 0.8s 0.2s forwards cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes lidOpen {
  0% { transform: rotate(0deg) translateY(0); opacity: 1; }
  40% { transform: rotate(-40deg) translateY(-60px) translateX(-30px); opacity: 1; }
  100% { transform: rotate(-120deg) translateY(180px) translateX(-180px) scale(0.5); opacity: 0; }
}

/* Box interior reveal container - ON TOP OF BOX BODY WHEN OPENING */
.box-interior {
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  height: 145px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 30 !important; /* Higher than box-body & lid */
  pointer-events: none;
  overflow: visible !important; /* Never clip character or dialogue bubble */
}