/* ============================================================
   animation.css – Pack Opening Animation
   Sequência: idle → shaking → tearing → revealing → done
   ============================================================ */

/* ── Pack wrapper ─────────────────────────────────────────── */
.pack-screen {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: calc(100dvh - var(--nav-h) - 40px);
  gap: 0; position: relative;
}

.pack-stage {
  position: relative; width: 200px; height: 320px;
  margin: 0 auto 24px;
  perspective: 1000px;
}

/* ── IDLE: floating pack ──────────────────────────────────── */
.pack-idle {
  width: 200px; height: 320px;
  position: relative; cursor: pointer;
  animation: packFloat 2.5s ease-in-out infinite;
  user-select: none;
}
.pack-idle::after {
  content: '✨';
  position: absolute; top: -10px; right: -10px;
  font-size: 1.5rem;
  animation: starOrbit 3s linear infinite;
}
@keyframes packFloat {
  0%,100%{ transform: translateY(0) rotate(-2deg); }
  50%    { transform: translateY(-14px) rotate(2deg); }
}
@keyframes starOrbit {
  0%  { transform: rotate(0deg)   translateX(16px) rotate(0deg); }
  100%{ transform: rotate(360deg) translateX(16px) rotate(-360deg); }
}

.pack-img {
  width: 100%; height: 100%;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 12px 40px rgba(233,30,140,.4), 0 4px 12px rgba(0,0,0,.2);
}

/* Pack placeholder (SVG art embutida) */
.pack-placeholder {
  width: 100%; height: 100%;
  border-radius: 16px;
  background: linear-gradient(160deg, #FF69B4 0%, #E91E8C 50%, #C2185B 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 12px 40px rgba(233,30,140,.5);
  position: relative; overflow: hidden;
}
.pack-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 10px,
    rgba(255,255,255,.05) 10px, rgba(255,255,255,.05) 20px
  );
}
.pack-placeholder .pack-title {
  font-family: 'Pacifico', cursive;
  color: var(--white); font-size: 1rem;
  text-shadow: 0 2px 6px rgba(0,0,0,.3);
  z-index: 1;
}
.pack-placeholder .pack-emoji { font-size: 4rem; z-index: 1; }
.pack-placeholder .pack-count {
  background: var(--gold);
  color: var(--text-dark); font-weight: 900; font-size: .85rem;
  padding: 4px 14px; border-radius: 50px; z-index: 1;
}
/* Shine effect on pack */
.pack-placeholder::after {
  content: '';
  position: absolute; top: -60%; left: -30%;
  width: 60%; height: 180%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.15) 50%, transparent 60%);
  animation: packShine 3s ease-in-out infinite;
}
@keyframes packShine {
  0%,100%{ transform: translateX(-200%); }
  50%    { transform: translateX(400%); }
}

/* ── SHAKING state ────────────────────────────────────────── */
.pack-idle.shaking {
  animation: packShake .5s ease-in-out;
  cursor: default;
}
@keyframes packShake {
  0%,100%{ transform: rotate(0deg); }
  15%    { transform: rotate(-8deg) translateX(-6px); }
  30%    { transform: rotate(8deg)  translateX(6px); }
  45%    { transform: rotate(-6deg) translateX(-4px); }
  60%    { transform: rotate(6deg)  translateX(4px); }
  75%    { transform: rotate(-3deg) translateX(-2px); }
  90%    { transform: rotate(3deg)  translateX(2px); }
}

/* ── TEARING state ────────────────────────────────────────── */
.pack-tear-wrap {
  width: 200px; height: 320px;
  position: relative;
}
.pack-half {
  position: absolute; width: 100%; height: 100%;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, #FF69B4, #C2185B);
}
.pack-half--top {
  clip-path: polygon(0 0, 100% 0, 100% 48%, 55% 52%, 45% 46%, 30% 54%, 15% 47%, 0 52%);
  animation: tearTop .5s ease-in forwards;
  transform-origin: center top;
}
.pack-half--bottom {
  clip-path: polygon(0 52%, 15% 47%, 30% 54%, 45% 46%, 55% 52%, 100% 48%, 100% 100%, 0 100%);
  animation: tearBottom .5s ease-in forwards;
  transform-origin: center bottom;
}
@keyframes tearTop    { to{ transform: translateY(-120%) rotate(-15deg); opacity:0; } }
@keyframes tearBottom { to{ transform: translateY(120%)  rotate(10deg);  opacity:0; } }

/* Glow burst on tear */
.tear-burst {
  position: absolute; inset: -20px;
  background: radial-gradient(circle, rgba(255,215,0,.8) 0%, transparent 70%);
  animation: burstFade .5s ease-out forwards;
  border-radius: 50%; pointer-events: none;
}
@keyframes burstFade { from{transform:scale(0);opacity:1} to{transform:scale(2);opacity:0} }

/* ── REVEAL state: card fan ───────────────────────────────── */
.cards-reveal {
  display: flex; align-items: flex-end; justify-content: center;
  position: relative;
  width: 100%; min-height: 300px;
  margin-bottom: 16px;
}

.reveal-card {
  position: absolute;
  width: 130px;
  aspect-ratio: 5/7;
  border-radius: 12px;
  cursor: pointer;
  /* 3D flip setup */
  transform-style: preserve-3d;
  perspective: 800px;
  transition: transform .4s ease;
}
/* Fan positions for 5 cards */
.reveal-card:nth-child(1) { transform: rotate(-24deg) translateY(20px); z-index:1; animation: cardReveal .4s ease .0s backwards; }
.reveal-card:nth-child(2) { transform: rotate(-12deg) translateY(8px);  z-index:2; animation: cardReveal .4s ease .1s backwards; }
.reveal-card:nth-child(3) { transform: rotate(0deg)   translateY(0px);  z-index:3; animation: cardReveal .4s ease .2s backwards; }
.reveal-card:nth-child(4) { transform: rotate(12deg)  translateY(8px);  z-index:2; animation: cardReveal .4s ease .3s backwards; }
.reveal-card:nth-child(5) { transform: rotate(24deg)  translateY(20px); z-index:1; animation: cardReveal .4s ease .4s backwards; }

.reveal-card.flipped { transform: rotate(0deg) translateY(-30px) !important; z-index:10 !important; }

@keyframes cardReveal {
  from { transform: translateY(200px) scale(.5); opacity:0; }
}

.card-face {
  position: absolute; inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  display: flex; flex-direction:column; align-items:center; justify-content:center;
}

/* Card back (question mark) */
.card-back {
  background: linear-gradient(160deg, var(--pink-deep), var(--pink));
  box-shadow: 0 6px 20px rgba(233,30,140,.4);
}
.card-back::before {
  content: '?';
  font-family: 'Pacifico', cursive;
  font-size: 3rem; color: rgba(255,255,255,.6);
}
.card-back::after {
  content: '';
  position: absolute; inset: 8px;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 8px;
}

/* Card front (sticker) */
.card-front {
  transform: rotateY(180deg);
  padding: 8px; gap: 6px;
}
.card-front .sticker-front-img {
  width: 72%; aspect-ratio: 1;
  object-fit: cover; border-radius: 8px;
  margin-bottom: 4px;
}
.card-front .sticker-front-emoji { font-size: 2.8rem; }
.card-front .sticker-front-name {
  font-size: .6rem; font-weight: 900;
  color: var(--white); text-align: center; line-height:1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  padding: 0 4px;
}

/* Flip animation */
.reveal-card.flipping .card-back  { animation: flipBack .5s ease forwards; }
.reveal-card.flipping .card-front { animation: flipFront .5s ease forwards; }
@keyframes flipBack  { to{ transform: rotateY(-180deg); } }
@keyframes flipFront { to{ transform: rotateY(0deg); } }

/* Result badge on revealed card */
.result-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 10px; border-radius: 50px;
  font-size: .65rem; font-weight: 900; white-space: nowrap;
  animation: badgeIn .3s .5s ease backwards;
}
.result-badge--new {
  background: linear-gradient(90deg, var(--pink-deep), #FF6B9D);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(233,30,140,.5);
}
.result-badge--dup {
  background: #616161; color: var(--white);
}
@keyframes badgeIn { from{transform:translateX(-50%) scale(0)} to{transform:translateX(-50%) scale(1)} }

/* Confetti (legendary) */
.confetti-piece {
  position: fixed;
  width: 8px; height: 14px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
  pointer-events: none; z-index: 300;
}
@keyframes confettiFall {
  0%  { transform: translateY(-20px) rotate(0deg); opacity:1; }
  100%{ transform: translateY(100vh) rotate(720deg); opacity:0; }
}

/* ── Pack info section ────────────────────────────────────── */
.pack-info {
  text-align: center; padding: 20px;
}
.pack-info-title {
  font-family:'Pacifico',cursive; color:var(--white);
  font-size:1.5rem; margin-bottom:8px;
}
.pack-info-sub { color:rgba(255,255,255,.85); font-size:.9rem; font-weight:600; }

/* Summary after opening */
.pack-summary {
  background: var(--white); border-radius: 20px;
  padding: 20px; margin-top: 8px;
  box-shadow: var(--shadow-pink);
}
.summary-count {
  display: flex; gap: 12px; justify-content: center;
  margin-bottom: 16px;
}
.summary-chip {
  padding: 6px 16px; border-radius: 50px; font-weight:900; font-size:.9rem;
}
.summary-chip--new { background:var(--pink-pale); color:var(--pink-deep); }
.summary-chip--dup { background:#F5F5F5; color:#616161; }

/* Mini sticker list in summary */
.summary-stickers {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  margin-bottom: 16px;
}
.summary-item { text-align: center; }
.summary-item-img {
  width: 100%; aspect-ratio: 5/7;
  border-radius: 8px; object-fit:cover;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.4rem;
}
.summary-item-name {
  font-size: .5rem; font-weight: 800; color: var(--text-mid);
  margin-top: 2px; line-height: 1.2;
}