/* Codex Artificialis — Pack Opening & Sealed Arcanum */

/* ===== PACK OVERLAY ===== */
.pack-overlay {
  z-index: var(--z-pack);
}

.pack-overlay__content {
  position: relative;
  z-index: 1;
}

/* ===== ADD TO CODEX BUTTON ===== */
.reveal__add-btn {
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-xl);
  background: transparent;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.reveal__add-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--gold);
}

/* ===== SEALED ARCANUM ===== */
.sealed-pack {
  position: relative;
  width: 280px;
  aspect-ratio: var(--card-ratio);
  border-radius: var(--radius-lg);
  cursor: pointer;
  animation: packBreathe 3s ease-in-out infinite;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.sealed-pack:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.2);
}

/* Pack surface */
.sealed-pack__surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, #1A0A2E, #0a0a0a);
  border: 1px solid rgba(212, 175, 55, 0.2);
  overflow: hidden;
}

/* Vellum grain layer */
.sealed-pack__surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(2px);
}

/* Glass morphism overlay */
.sealed-pack__glass {
  position: absolute;
  inset: 8%;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.08);
  backdrop-filter: blur(1px);
}

/* Sigil */
.sealed-pack__sigil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 120px;
  height: 120px;
}

.sealed-pack__sigil-circle {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50%;
}

.sealed-pack__sigil-circle:nth-child(2) {
  inset: 12%;
  border-style: dashed;
  border-color: rgba(212, 175, 55, 0.15);
  animation: rotateSlow 20s linear infinite;
}

.sealed-pack__sigil-circle:nth-child(3) {
  inset: 25%;
  border-color: rgba(212, 175, 55, 0.2);
  animation: rotateSlow 15s linear infinite reverse;
}

.sealed-pack__sigil-eye {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold-glow);
}

.sealed-pack__sigil-eye::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--gold);
}

/* Title text */
.sealed-pack__title {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--gold-dim);
  white-space: nowrap;
}

.sealed-pack__subtitle {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.4);
  white-space: nowrap;
}

.sealed-pack__tagline {
  position: absolute;
  bottom: 24%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  color: rgba(212, 175, 55, 0.25);
  white-space: nowrap;
}

/* Wax seal */
.sealed-pack__seal {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, #8B0000, #4A0000);
  border-radius: 48% 52% 46% 54% / 50% 46% 54% 50%;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.sealed-pack:hover .sealed-pack__seal {
  animation: sealPulse 1.5s ease-in-out infinite;
}

.sealed-pack__seal-emboss {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

.sealed-pack__seal-emboss::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  margin: 6px auto 0;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

@keyframes packBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.008); }
}

@keyframes sealPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

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

/* ===== PACK OPENING ANIMATION ===== */
.sealed-pack.is-opening .sealed-pack__seal {
  animation: sealCrack 800ms ease-out forwards;
}

@keyframes sealCrack {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.1); }
  70% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(0); opacity: 0; }
}

.sealed-pack.is-opening .sealed-pack__surface {
  animation: packShatter 1000ms ease-out 400ms forwards;
}

@keyframes packShatter {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.1); }
}

.sealed-pack.is-opening .sealed-pack__glass {
  animation: glassShatter 800ms ease-out 500ms forwards;
}

@keyframes glassShatter {
  0% { opacity: 1; clip-path: inset(0); }
  100% { opacity: 0; clip-path: inset(50% 50%); }
}

/* ===== REVEAL CARDS ===== */
.reveal-area {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}

.reveal-card {
  width: 160px;
  aspect-ratio: var(--card-ratio);
  perspective: 800px;
  cursor: pointer;
}

.reveal-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 600ms ease-out;
  transform-style: preserve-3d;
}

.reveal-card.is-flipped .reveal-card__inner {
  transform: rotateY(180deg);
}

.reveal-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Card back */
.reveal-card__back {
  background: linear-gradient(135deg, #1A0A2E, #0D0D0D);
  border: 1px solid rgba(212, 175, 55, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reveal-card__back-sigil {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reveal-card__back-sigil::before {
  content: '';
  width: 12px;
  height: 12px;
  background: rgba(212, 175, 55, 0.15);
  border-radius: 50%;
}

/* Card front */
.reveal-card__front {
  transform: rotateY(180deg);
}

.reveal-card__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reveal label */
.reveal-card__label {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.reveal-card.is-flipped .reveal-card__label {
  opacity: 1;
}

.reveal-card__label--new {
  color: var(--gold);
}

.reveal-card__label--new-tier {
  color: var(--cyan);
}

.reveal-card__label--duplicate {
  color: var(--text-muted);
}

/* Reveal glow */
.reveal-card.is-flipped .reveal-card__front {
  animation: revealGlow 600ms ease-out;
}

@keyframes revealGlow {
  0% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.6); }
  100% { box-shadow: none; }
}

/* Staggered entry */
.reveal-card {
  opacity: 0;
  transform: translateY(20px);
  animation: revealEntry 400ms ease-out forwards;
}

.reveal-card:nth-child(1) { animation-delay: 100ms; }
.reveal-card:nth-child(2) { animation-delay: 200ms; }
.reveal-card:nth-child(3) { animation-delay: 300ms; }
.reveal-card:nth-child(4) { animation-delay: 400ms; }
.reveal-card:nth-child(5) { animation-delay: 500ms; }

@keyframes revealEntry {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== ADD TO CODEX BUTTON ===== */
.reveal__add-btn {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-sm) var(--space-xl);
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  color: var(--gold);
  cursor: pointer;
  margin-top: var(--space-xl);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.reveal__add-btn:hover {
  background: rgba(212, 175, 55, 0.25);
  box-shadow: 0 0 20px var(--gold-glow);
}

/* ===== ALTAR PACK DISPLAY ===== */
.altar-packs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.altar-pack-mini {
  position: relative;
  width: 60px;
  aspect-ratio: var(--card-ratio);
  background: linear-gradient(to bottom, #1A0A2E, #0a0a0a);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--transition-fast);
  overflow: hidden;
}

.altar-pack-mini:hover {
  transform: translateY(-2px);
}

.altar-pack-mini + .altar-pack-mini {
  margin-left: -10px;
}

/* Emerging circuit/root traces across pack surface */
.altar-pack-mini__circuit {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

/* Wave 1 — dense rhizome mesh, emerges from bottom-left */
.altar-pack-mini__circuit::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* nodes */
    radial-gradient(circle 2px at 30% 35%, rgba(212,175,55,0.5), transparent 3px),
    radial-gradient(circle 2px at 65% 70%, rgba(212,175,55,0.45), transparent 3px),
    radial-gradient(circle 1.5px at 50% 50%, rgba(212,175,55,0.4), transparent 2px),
    radial-gradient(circle 1.5px at 15% 75%, rgba(212,175,55,0.35), transparent 2px),
    radial-gradient(circle 1.5px at 80% 25%, rgba(212,175,55,0.35), transparent 2px),
    /* horizontal branches */
    linear-gradient(0deg,   transparent 20%, rgba(212,175,55,0.3) 21%, transparent 22%),
    linear-gradient(0deg,   transparent 34%, rgba(212,175,55,0.28) 35%, transparent 36%),
    linear-gradient(0deg,   transparent 50%, rgba(212,175,55,0.22) 51%, transparent 52%),
    linear-gradient(0deg,   transparent 69%, rgba(212,175,55,0.3) 70%, transparent 71%),
    linear-gradient(0deg,   transparent 84%, rgba(212,175,55,0.2) 85%, transparent 86%),
    /* vertical branches */
    linear-gradient(90deg,  transparent 15%, rgba(212,175,55,0.25) 16%, transparent 17%),
    linear-gradient(90deg,  transparent 42%, rgba(212,175,55,0.28) 43%, transparent 44%),
    linear-gradient(90deg,  transparent 65%, rgba(212,175,55,0.22) 66%, transparent 67%),
    linear-gradient(90deg,  transparent 82%, rgba(212,175,55,0.2) 83%, transparent 84%),
    /* diagonal dendrites */
    linear-gradient(40deg,  transparent 28%, rgba(212,175,55,0.22) 29%, transparent 30%),
    linear-gradient(125deg, transparent 45%, rgba(212,175,55,0.2) 46%, transparent 47%),
    linear-gradient(65deg,  transparent 55%, rgba(212,175,55,0.18) 56%, transparent 57%),
    linear-gradient(155deg, transparent 18%, rgba(212,175,55,0.2) 19%, transparent 20%),
    linear-gradient(110deg, transparent 72%, rgba(212,175,55,0.15) 73%, transparent 74%);
  clip-path: circle(0% at 25% 80%);
  animation: circuitEmerge1 2.8s ease-out infinite;
}

/* Wave 2 — different mesh, emerges from top-right */
.altar-pack-mini__circuit::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* nodes */
    radial-gradient(circle 2px at 70% 40%, rgba(212,175,55,0.5), transparent 3px),
    radial-gradient(circle 2px at 35% 65%, rgba(212,175,55,0.45), transparent 3px),
    radial-gradient(circle 1.5px at 45% 20%, rgba(212,175,55,0.4), transparent 2px),
    radial-gradient(circle 1.5px at 85% 80%, rgba(212,175,55,0.35), transparent 2px),
    radial-gradient(circle 1.5px at 20% 30%, rgba(212,175,55,0.35), transparent 2px),
    /* horizontal branches */
    linear-gradient(0deg,   transparent 28%, rgba(212,175,55,0.28) 29%, transparent 30%),
    linear-gradient(0deg,   transparent 42%, rgba(212,175,55,0.25) 43%, transparent 44%),
    linear-gradient(0deg,   transparent 58%, rgba(212,175,55,0.3) 59%, transparent 60%),
    linear-gradient(0deg,   transparent 76%, rgba(212,175,55,0.22) 77%, transparent 78%),
    linear-gradient(0deg,   transparent 90%, rgba(212,175,55,0.2) 91%, transparent 92%),
    /* vertical branches */
    linear-gradient(90deg,  transparent 22%, rgba(212,175,55,0.25) 23%, transparent 24%),
    linear-gradient(90deg,  transparent 48%, rgba(212,175,55,0.22) 49%, transparent 50%),
    linear-gradient(90deg,  transparent 72%, rgba(212,175,55,0.28) 73%, transparent 74%),
    linear-gradient(90deg,  transparent 88%, rgba(212,175,55,0.18) 89%, transparent 90%),
    /* diagonal dendrites */
    linear-gradient(140deg, transparent 35%, rgba(212,175,55,0.2) 36%, transparent 37%),
    linear-gradient(30deg,  transparent 60%, rgba(212,175,55,0.22) 61%, transparent 62%),
    linear-gradient(75deg,  transparent 25%, rgba(212,175,55,0.18) 26%, transparent 27%),
    linear-gradient(165deg, transparent 50%, rgba(212,175,55,0.2) 51%, transparent 52%),
    linear-gradient(100deg, transparent 38%, rgba(212,175,55,0.15) 39%, transparent 40%);
  clip-path: circle(0% at 75% 20%);
  animation: circuitEmerge2 2.8s ease-out infinite 1.4s;
}

@keyframes circuitEmerge1 {
  0%  { clip-path: circle(0%   at 25% 80%); opacity: 0; }
  8%  { opacity: 0.9; }
  40% { clip-path: circle(90%  at 25% 80%); opacity: 0.8; }
  55% { opacity: 0; }
  100%{ clip-path: circle(90%  at 25% 80%); opacity: 0; }
}

@keyframes circuitEmerge2 {
  0%  { clip-path: circle(0%   at 75% 20%); opacity: 0; }
  8%  { opacity: 0.85; }
  40% { clip-path: circle(90%  at 75% 20%); opacity: 0.75; }
  55% { opacity: 0; }
  100%{ clip-path: circle(90%  at 75% 20%); opacity: 0; }
}

/* Conjured pack (teal variant) */
.altar-pack-mini--conjured {
  border-color: rgba(0, 191, 255, 0.2);
  background: linear-gradient(to bottom, #0A1A2E, #0a0a0a);
}

.altar-pack-mini--conjured .altar-pack-mini__circuit::before {
  background:
    radial-gradient(circle 2px at 30% 35%, rgba(0,191,255,0.5), transparent 3px),
    radial-gradient(circle 2px at 65% 70%, rgba(0,191,255,0.45), transparent 3px),
    radial-gradient(circle 1.5px at 50% 50%, rgba(0,191,255,0.4), transparent 2px),
    radial-gradient(circle 1.5px at 15% 75%, rgba(0,191,255,0.35), transparent 2px),
    radial-gradient(circle 1.5px at 80% 25%, rgba(0,191,255,0.35), transparent 2px),
    linear-gradient(0deg,   transparent 20%, rgba(0,191,255,0.3) 21%, transparent 22%),
    linear-gradient(0deg,   transparent 34%, rgba(0,191,255,0.28) 35%, transparent 36%),
    linear-gradient(0deg,   transparent 50%, rgba(0,191,255,0.22) 51%, transparent 52%),
    linear-gradient(0deg,   transparent 69%, rgba(0,191,255,0.3) 70%, transparent 71%),
    linear-gradient(0deg,   transparent 84%, rgba(0,191,255,0.2) 85%, transparent 86%),
    linear-gradient(90deg,  transparent 15%, rgba(0,191,255,0.25) 16%, transparent 17%),
    linear-gradient(90deg,  transparent 42%, rgba(0,191,255,0.28) 43%, transparent 44%),
    linear-gradient(90deg,  transparent 65%, rgba(0,191,255,0.22) 66%, transparent 67%),
    linear-gradient(90deg,  transparent 82%, rgba(0,191,255,0.2) 83%, transparent 84%),
    linear-gradient(40deg,  transparent 28%, rgba(0,191,255,0.22) 29%, transparent 30%),
    linear-gradient(125deg, transparent 45%, rgba(0,191,255,0.2) 46%, transparent 47%),
    linear-gradient(65deg,  transparent 55%, rgba(0,191,255,0.18) 56%, transparent 57%),
    linear-gradient(155deg, transparent 18%, rgba(0,191,255,0.2) 19%, transparent 20%),
    linear-gradient(110deg, transparent 72%, rgba(0,191,255,0.15) 73%, transparent 74%);
}

.altar-pack-mini--conjured .altar-pack-mini__circuit::after {
  background:
    radial-gradient(circle 2px at 70% 40%, rgba(0,191,255,0.5), transparent 3px),
    radial-gradient(circle 2px at 35% 65%, rgba(0,191,255,0.45), transparent 3px),
    radial-gradient(circle 1.5px at 45% 20%, rgba(0,191,255,0.4), transparent 2px),
    radial-gradient(circle 1.5px at 85% 80%, rgba(0,191,255,0.35), transparent 2px),
    radial-gradient(circle 1.5px at 20% 30%, rgba(0,191,255,0.35), transparent 2px),
    linear-gradient(0deg,   transparent 28%, rgba(0,191,255,0.28) 29%, transparent 30%),
    linear-gradient(0deg,   transparent 42%, rgba(0,191,255,0.25) 43%, transparent 44%),
    linear-gradient(0deg,   transparent 58%, rgba(0,191,255,0.3) 59%, transparent 60%),
    linear-gradient(0deg,   transparent 76%, rgba(0,191,255,0.22) 77%, transparent 78%),
    linear-gradient(0deg,   transparent 90%, rgba(0,191,255,0.2) 91%, transparent 92%),
    linear-gradient(90deg,  transparent 22%, rgba(0,191,255,0.25) 23%, transparent 24%),
    linear-gradient(90deg,  transparent 48%, rgba(0,191,255,0.22) 49%, transparent 50%),
    linear-gradient(90deg,  transparent 72%, rgba(0,191,255,0.28) 73%, transparent 74%),
    linear-gradient(90deg,  transparent 88%, rgba(0,191,255,0.18) 89%, transparent 90%),
    linear-gradient(140deg, transparent 35%, rgba(0,191,255,0.2) 36%, transparent 37%),
    linear-gradient(30deg,  transparent 60%, rgba(0,191,255,0.22) 61%, transparent 62%),
    linear-gradient(75deg,  transparent 25%, rgba(0,191,255,0.18) 26%, transparent 27%),
    linear-gradient(165deg, transparent 50%, rgba(0,191,255,0.2) 51%, transparent 52%),
    linear-gradient(100deg, transparent 38%, rgba(0,191,255,0.15) 39%, transparent 40%);
}

/* Countdown */
.altar__countdown {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* Conjure button */
.altar__conjure-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid rgba(0, 191, 255, 0.3);
  border-radius: var(--radius-sm);
  color: var(--cyan-dim);
  background: rgba(0, 191, 255, 0.08);
  cursor: pointer;
  margin-top: var(--space-sm);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.altar__conjure-btn:hover {
  background: rgba(0, 191, 255, 0.15);
  box-shadow: 0 0 12px rgba(0, 191, 255, 0.15);
}

.altar__conjure-btn:disabled {
  opacity: 0.3;
  cursor: default;
}