/* ============================================================
   RipRift — Interactive Pack Demo (demo.css)
   Namespaced: .demo (interactive opener)
   Relies on base.css tokens & components.
   ============================================================ */

/* ---------------- INTERACTIVE DEMO ---------------- */
.demo { position: relative; }

.demo-stage {
  position: relative;
  width: min(560px, 94vw);
  height: 540px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.demo-stage.is-shaking { animation: demo-shake 0.3s var(--ease); }
@keyframes demo-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -1px); }
  80% { transform: translate(3px, 1px); }
}

/* Pedestal / floor */
.demo-pedestal {
  position: absolute;
  bottom: 84px; left: 50%;
  width: 340px; height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(7, 85, 115, 0.55), transparent 66%);
  filter: blur(22px);
  pointer-events: none;
}
.demo-rings {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -46%);
  pointer-events: none;
}
.demo-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(63, 193, 232, 0.10);
  border-radius: 50%;
}
.demo-ring.r1 { width: 300px; height: 300px; }
.demo-ring.r2 { width: 440px; height: 440px; border-color: rgba(63, 193, 232, 0.06); }

/* ---- Interactive pack ---- */
.demo-pack {
  --progress: 0;
  position: absolute;
  top: 50%; left: 50%;
  width: 200px;
  aspect-ratio: var(--pack-ar);
  transform: translate(-50%, -50%);
  z-index: 5;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  border-radius: 12px;
  animation: demo-float 6s var(--ease) infinite;
}
.demo-pack:active { cursor: grabbing; }
.demo-pack.is-dragging { animation: demo-jitter 0.12s linear infinite; }
.demo-pack.is-open { animation: none; pointer-events: none; }
.demo-pack.is-hidden { opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); }
@keyframes demo-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 7px)); }
}
@keyframes demo-jitter {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25% { transform: translate(calc(-50% - 1.5px), -50%) rotate(-0.5deg); }
  75% { transform: translate(calc(-50% + 1.5px), -50%) rotate(0.5deg); }
}

/* Two stacked faces make one pack; clip splits them at 24%. Both faces carry
   the full pack artwork at the same size, so the seam lines up exactly. */
.pack-face {
  position: absolute; inset: 0;
  background: var(--pack-src) center / 100% 100% no-repeat;
  filter: drop-shadow(0 22px 30px rgba(2, 8, 9, 0.42));
}

.demo-pack-top {
  clip-path: inset(0 0 76% 0);
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--progress) * -10px)) rotate(calc(var(--progress) * -2deg));
  transition: transform 0.08s linear;
  z-index: 3;
}
.demo-pack-bottom { clip-path: inset(24% 0 0 0); z-index: 2; }

.demo-pack.is-open .demo-pack-top {
  transition: transform 0.7s var(--ease), opacity 0.6s var(--ease);
  transform: translate(-58%, -168%) rotate(-40deg);
  opacity: 0;
}
.demo-pack.is-open .demo-pack-bottom {
  transition: transform 0.7s var(--ease), opacity 0.6s var(--ease);
  transform: translate(46%, 150%) rotate(30deg);
  opacity: 0;
}

/* glowing tear seam */
.demo-seam {
  position: absolute; left: 6%; right: 6%; top: 24%;
  height: 2px; z-index: 6;
  transform: scaleX(var(--progress));
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(127, 212, 234, 0.95) 20%, #eaffff 50%, rgba(127, 212, 234, 0.95) 80%, transparent);
  box-shadow: 0 0 12px rgba(127, 212, 234, 0.9), 0 0 24px rgba(63, 193, 232, 0.5);
  opacity: calc(0.2 + var(--progress) * 0.8);
  pointer-events: none;
}
.demo-pack.is-open .demo-seam { opacity: 0; transition: opacity 0.3s var(--ease); }

/* burst on open */
.demo-burst {
  position: absolute; top: 50%; left: 50%;
  width: 260px; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.3);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 212, 234, 0.9) 0%, rgba(7, 85, 115, 0.45) 34%, transparent 66%);
  opacity: 0; z-index: 4; pointer-events: none;
}
.demo-burst.fire { animation: demo-burst 0.55s var(--ease); }
@keyframes demo-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  40% { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

/* ---- Cards ---- */
.demo-cards {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; z-index: 7;
  transform: translate(0, -12px);
}
.demo-card {
  --tx: 0px; --ty: 0px; --rot: 0deg; --delay: 0s;
  position: absolute; top: 0; left: 0;
  width: 112px; aspect-ratio: 63 / 88;
  transform: translate(calc(-50% + var(--tx)), 46px) scale(0.7);
  opacity: 0;
  cursor: pointer;
}
.demo-card.risen {
  transform: translate(calc(-50% + var(--tx)), var(--ty)) rotate(var(--rot)) scale(1);
  opacity: 1;
  transition: transform 0.6s var(--ease), opacity 0.5s var(--ease);
  transition-delay: var(--delay);
}
.demo-card.is-next .demo-card-inner { box-shadow: 0 0 0 1px rgba(63, 193, 232, 0.5); border-radius: 12px; }
.demo-card.is-next::after {
  content: ""; position: absolute; inset: -6px; border-radius: 16px;
  border: 1px solid rgba(63, 193, 232, 0.4);
  animation: demo-pulse 1.6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes demo-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.98); }
  50% { opacity: 0.8; transform: scale(1.02); }
}

.demo-card-inner {
  display: block;
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.45s var(--ease);
}
.demo-card-inner.is-revealed { transform: rotateY(180deg); }
.demo-face {
  display: block;
  position: absolute; inset: 0; width: 100%; height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.demo .demo-face.rc-card { width: 100%; }
.demo-face-front { transform: rotateY(180deg); }

/* pre-reveal glow */
.demo-card-glow {
  position: absolute; top: 50%; left: 50%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 193, 232, 0.8), rgba(7, 85, 115, 0.35) 42%, transparent 68%);
  filter: blur(8px);
  opacity: 0; z-index: -1; pointer-events: none;
}
.demo-card.fx-preglow .demo-card-glow { animation: demo-preglow 0.6s var(--ease) forwards; }
.demo-card.fx-preglow-strong .demo-card-glow { animation: demo-preglow-strong 0.7s var(--ease) forwards; }
@keyframes demo-preglow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes demo-preglow-strong {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.35); }
}
.demo-card.fx-edge .demo-face-front { box-shadow: inset 0 0 0 1px rgba(127, 212, 234, 0.8), 0 0 22px -4px rgba(63, 193, 232, 0.6); }

/* particle burst */
.demo-particle {
  position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(127, 212, 234, 0.95);
  box-shadow: 0 0 8px rgba(127, 212, 234, 0.9);
  pointer-events: none;
  animation: demo-particle 0.7s var(--ease) forwards;
}
@keyframes demo-particle {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(0.2); }
}

/* ---- Hint + actions ---- */
.demo-hint {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px; font-weight: 500;
  transition: opacity 0.4s var(--ease);
}
.demo-hint .drag-arrow {
  width: 26px; height: 8px; position: relative;
}
.demo-hint .drag-arrow::before {
  content: "→"; position: absolute; inset: 0;
  color: var(--teal-bright); font-size: 14px; line-height: 8px;
  animation: demo-arrow 1.5s var(--ease) infinite;
}
@keyframes demo-arrow {
  0%, 100% { transform: translateX(-4px); opacity: 0.3; }
  50% { transform: translateX(4px); opacity: 1; }
}
.demo-hint .t-swipe { display: none; }
.demo-hint.is-hidden { opacity: 0; pointer-events: none; }

.demo-actions {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: max-content;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.demo-actions.show { opacity: 1; pointer-events: auto; }
.demo-result {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  text-align: center;
}
.demo-result .r-rarity { color: var(--teal-bright); }
.demo-result.rarity-legendary .r-rarity { color: #E9C68A; }
.demo-result.rarity-epic .r-rarity { color: #7EDCEF; }

@media (pointer: coarse) {
  .demo-hint .t-drag { display: none; }
  .demo-hint .t-swipe { display: inline; }
  .demo-hint .drag-arrow { display: none; }
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 560px) {
  .demo-stage { height: 480px; }
  .demo-pack { width: 168px; }
  .demo-card { width: 78px; }
  .demo-pedestal { width: 260px; }
  .demo-ring.r1 { width: 240px; height: 240px; }
  .demo-ring.r2 { width: 350px; height: 350px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-pack { animation: none; }
  .demo-seam { display: none; }
}