/* Poster-only layout: base image + name overlay */

/* Kill any decorative pseudo-elements from global style.css (the "dot" row) */
.shareCard::before,
.shareCard::after{
  content: none !important;
  display: none !important;
}

.shareCard{
  width: 540px;
  height: 1080px;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

.openState{
  position:absolute;
  inset:0;
}

.posterImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
}

/* Closed state (card box) */
.closedState{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:
    radial-gradient(900px 600px at 50% 20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 600px at 20% 85%, rgba(159,214,255,.10), transparent 55%),
    linear-gradient(135deg, rgba(8,12,22,.88), rgba(12,18,34,.88));
}

.closedText{ text-align:center; padding: 0 26px; }
.closedTitle{ font-weight:900; font-size:22px; letter-spacing:.5px; color: rgba(255,255,255,.92); }
.closedSub{ margin-top:8px; font-size:14px; color: rgba(255,255,255,.70); line-height:1.4; }

.chest{ position:relative; width:170px; height:140px; }
.chestGlow{
  position:absolute; inset:-30px -40px;
  background: radial-gradient(circle at 50% 55%, rgba(78,205,196,.35), transparent 60%);
  filter: blur(6px);
  opacity:.85;
}
.chestBody{
  position:absolute; left:18px; right:18px; bottom:0; height:86px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.chestLid{
  position:absolute; left:22px; right:22px; top:14px; height:56px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  transform-origin: 50% 100%;
}
.chestLock{
  position:absolute; left:50%; transform:translateX(-50%);
  top:58px; width:38px; height:38px;
  background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(159,214,255,.85));
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

/* Reveal animation (stronger "open box → pull card") */
.shareCard.revealing{ perspective: 900px; }
.shareCard.revealing .chest{ animation: chestBounce .45s ease-in-out both; }
.shareCard.revealing .chestLid{ animation: lidOpen .55s cubic-bezier(.2,.9,.2,1) both; }
.shareCard.revealing .chestGlow{ animation: glowBurst .75s ease-out both; }
.shareCard.revealing .chestLock{ animation: lockPop .55s ease-out both; }

/* closed state fades slightly later, so the lid/glow are visible */
.shareCard.revealing .closedState{ animation: fadeOut .35s ease forwards; animation-delay: .55s; }

/* card appears as if sliding out */
.shareCard.revealing .openState{ display:block !important; animation: cardSlideOut .75s cubic-bezier(.12,.9,.18,1) both; }

@keyframes chestBounce{
  0%{ transform: translateY(0) }
  30%{ transform: translateY(-6px) }
  60%{ transform: translateY(2px) }
  100%{ transform: translateY(0) }
}
@keyframes lidOpen{
  0%{ transform: rotateX(0deg) }
  70%{ transform: rotateX(-62deg) }
  100%{ transform: rotateX(-55deg) }
}
@keyframes glowBurst{
  0%{ opacity:.25; transform: scale(.9) }
  35%{ opacity:1; transform: scale(1.08) }
  100%{ opacity:.55; transform: scale(1.18) }
}
@keyframes lockPop{
  0%{ transform: translateX(-50%) scale(1) }
  55%{ transform: translateX(-50%) scale(1.12) }
  100%{ transform: translateX(-50%) scale(1) }
}
@keyframes fadeOut{
  to{ opacity:0; transform: scale(.985); }
}
@keyframes cardSlideOut{
  0%{ opacity:0; transform: translateY(22px) rotateX(16deg) scale(.98); filter: blur(1px); }
  45%{ opacity:1; transform: translateY(0) rotateX(0deg) scale(1); filter: blur(0px); }
  100%{ opacity:1; transform: translateY(-6px) rotateX(0deg) scale(1); }
}

/* Name position (match sample “章人丹”) */
.nameOverlay{
  position:absolute;
  left: 46px;
  bottom: 168px; /* sits on the gray strip */
  z-index: 5;

  font-weight: 900;
  font-size: 64px;
  letter-spacing: 2px;

  color: #d57f92; /* dusty pink */
  text-shadow: 0 2px 0 rgba(255,255,255,.25);

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Card number position (placeholder; adjust when new card set arrives) */
.noOverlay{
  position:absolute;
  right: 44px;
  bottom: 168px;
  z-index: 5;

  font-weight: 800;
  font-size: 28px;
  letter-spacing: 1px;
  color: rgba(213,127,146,.9);
  text-shadow: 0 2px 0 rgba(255,255,255,.22);
  font-family: var(--mono);
}