/* Reveal mode: new cards opened one at a time. Spec: docs/reveal-mode.md */

.rv { position: fixed; inset: 0; overflow: hidden; overflow: clip; background: #000; color: var(--cc-text); }
.rv [hidden] { display: none !important; }
.rv-mono { font-family: var(--cc-font-mono); font-size: 11px; letter-spacing: .12em; color: var(--cc-text-muted); }
.rv-fade { animation: rv-fade 600ms ease-out both; }
@keyframes rv-fade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.rv-wash { position: absolute; inset: 0; opacity: 0; background: var(--wash, none); transition: opacity 700ms ease; pointer-events: none; }
.rv-aurora { position: absolute; left: -10%; right: -10%; top: -20%; height: 70%; opacity: 0; filter: blur(30px); pointer-events: none; transition: opacity 900ms;
  background: radial-gradient(40% 50% at 30% 50%, rgba(139,92,246,.35), transparent 70%), radial-gradient(35% 45% at 65% 40%, rgba(62,230,214,.25), transparent 70%), radial-gradient(30% 40% at 50% 70%, rgba(255,79,163,.25), transparent 70%);
  animation: rv-aurora 8s ease-in-out infinite alternate; }
.rv-aurora.on { opacity: 1; }
@keyframes rv-aurora { 0% { transform: translate(-4%, 0) scale(1) } 100% { transform: translate(4%, -3%) scale(1.12) } }

.rv-tap { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: transparent; cursor: pointer; }
.rv-tap:focus-visible { outline: none; }

.rv-top { position: absolute; left: 48px; right: 48px; top: 30px; z-index: 5; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.rv-dot { width: 18px; height: 3px; border-radius: 3px; background: var(--cc-border); transition: background 400ms; }
.rv-dot.on { background: var(--cc-text); }
.rv-skip { pointer-events: auto; min-height: 40px; padding: 0 4px; border: 0; background: transparent; color: var(--cc-text-muted); font-family: var(--cc-font-mono); font-size: 12px; letter-spacing: .08em; cursor: pointer; }
.rv-skip:hover { color: var(--cc-text); }
.rv-skip:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: 4px; border-radius: 6px; }

/* Intro */
.rv-intro { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; pointer-events: none; }
.rv-stack { position: relative; width: var(--cc-card-w); height: var(--cc-card-h); animation: rv-breathe 2.4s ease-in-out infinite; }
.rv-stack-card { position: absolute !important; inset: 0; transform: translate(calc(var(--i) * 3px), calc(var(--i) * -2px)) rotate(calc((var(--i) - 1.5) * 2.5deg)); }
@keyframes rv-breathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.025) } }

/* Stage */
.rv-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rv-card { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.rv-scale { position: absolute; left: -130px; top: -200px; width: var(--cc-card-w); height: var(--cc-card-h); transform: scale(1.25); perspective: 1400px; }
.rv-shake, .rv-draw { position: absolute; inset: 0; }
.rv-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); }
.rv-face { position: absolute !important; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rv-back { transform: rotateY(180deg); }
.rv-card.is-up .rv-flip { transform: rotateY(0deg); }

.rv-card.is-draw .rv-draw { animation: rv-draw var(--draw-ms, 350ms) var(--cc-ease-spring) both; }
@keyframes rv-draw { 0% { transform: translate(min(330px, 30vw), 260px) scale(.28) rotate(10deg); opacity: .4 } 100% { transform: none; opacity: 1 } }

.rv-card.is-charge .rv-shake { animation: rv-tremble 70ms linear infinite; }
.rv-card.is-charge[data-rarity="EPIC"] .rv-shake, .rv-card.is-charge[data-rarity="SINGULAR"] .rv-shake { animation: rv-shake 60ms linear infinite; }
@keyframes rv-tremble { 0%, 100% { transform: none } 25% { transform: translate(1px, -1px) rotate(.4deg) } 50% { transform: translate(-1px, 1px) rotate(-.4deg) } 75% { transform: translate(1px, 1px) rotate(.2deg) } }
@keyframes rv-shake { 0%, 100% { transform: none } 25% { transform: translate(3px, -2px) } 50% { transform: translate(-3px, 2px) } 75% { transform: translate(2px, 3px) } }

.rv-card.is-charge .rv-back .cc-face { animation: var(--charge-anim) var(--charge-ms, 500ms) linear both; }
.rv-card[data-rarity="RARE"] { --charge-anim: rv-ch-rare; }
.rv-card[data-rarity="EPIC"] { --charge-anim: rv-ch-epic; }
.rv-card[data-rarity="SINGULAR"] { --charge-anim: rv-ch-singular; }
@keyframes rv-ch-rare { from { box-shadow: 0 0 0 0 rgba(29,155,240,0) } to { box-shadow: 0 0 70px 18px rgba(62,230,214,.55) } }
@keyframes rv-ch-epic { from { box-shadow: 0 0 0 0 rgba(255,79,163,0) } to { box-shadow: 0 0 90px 26px rgba(255,79,163,.6) } }
@keyframes rv-ch-singular { 0% { box-shadow: 0 0 0 0 rgba(139,92,246,0) } 50% { box-shadow: 0 0 80px 20px rgba(255,79,163,.5) } 100% { box-shadow: 0 0 130px 40px rgba(139,92,246,.75) } }

.rv-rays { position: absolute; left: 50%; top: 46%; width: 840px; height: 840px; margin: -420px 0 0 -420px; border-radius: 50%; opacity: 0; transition: opacity 900ms;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.14) 0deg 2deg, transparent 2deg 12deg, rgba(255,181,71,.12) 12deg 14deg, transparent 14deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 62%); mask-image: radial-gradient(circle, #000 10%, transparent 62%);
  animation: cc-spin 14s linear infinite; }
.rv-rays.on { opacity: 1; }

.rv-burst { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.rv-burst .p-arm { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.rv-burst .p { position: absolute; left: -3px; top: 0; border-radius: 50%; animation: rv-p 1000ms cubic-bezier(.1,.8,.3,1) both; }
@keyframes rv-p { 0% { transform: translateY(-120px) scale(1); opacity: 1 } 100% { transform: translateY(-330px) scale(0); opacity: 0 } }
.rv-burst .ring { position: absolute; left: -170px; top: -170px; width: 340px; height: 340px; border-radius: 50%; border: 2px solid; animation: rv-ring 1000ms cubic-bezier(.1,.8,.2,1) both; }
@keyframes rv-ring { 0% { opacity: .95; transform: scale(.35) } 100% { opacity: 0; transform: scale(2.6) } }

.rv-flash { position: absolute; left: 50%; top: 46%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.4) 25%, transparent 60%); }
.rv-flash.go { animation: rv-flash 650ms ease-out both; }
@keyframes rv-flash { 0% { opacity: 0 } 30% { opacity: .9 } 100% { opacity: 0 } }

.rv-caption { position: absolute; left: 16px; right: 16px; top: calc(46% + 280px); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; pointer-events: none; }
.rv-caption-title { font-weight: 800; font-size: 26px; letter-spacing: -.02em; animation: rv-type 700ms steps(24, end) both; }
.rv-caption-title .tier { font-family: var(--cc-font-mono); font-size: 13px; font-weight: 600; letter-spacing: .14em; background: var(--tag); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes rv-type { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }

/* Tray and remaining stack */
.rv-tray { position: absolute; left: 48px; bottom: 36px; z-index: 2; display: flex; gap: 10px; pointer-events: none; }
.rv-mini { position: relative; display: block; width: 40px; height: 62px; border-radius: 7px; overflow: hidden; background: var(--rim); box-shadow: 0 0 18px var(--glow, transparent); }
.rv-mini::after { content: ""; position: absolute; inset: 1px; border-radius: 6px; background: #07070d; }
.rv-tray .rv-mini { animation: rv-pop 420ms cubic-bezier(.3,1.8,.5,1) both; }
@keyframes rv-pop { 0% { transform: scale(0) } 100% { transform: scale(1) } }
.rv-left { position: absolute; right: 48px; bottom: 36px; z-index: 2; display: flex; align-items: center; gap: 14px; pointer-events: none; }
.rv-left-stack { position: relative; width: 40px; height: 62px; }
.rv-left-stack .rv-mini { position: absolute; inset: 0; }

/* Summary */
.rv-summary { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 16px; overflow: hidden; overflow: clip; }
.rv-fan { display: flex; justify-content: center; align-items: flex-end; height: 280px; transform-origin: bottom center; }
.rv-fan-card { position: relative; width: 170px; height: 262px; margin: 0 -14px; transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg)); animation: rv-rise 800ms var(--cc-ease-spring) both; }
.rv-fan-card .cc { transform: scale(.654); transform-origin: top left; }
@keyframes rv-rise { 0% { opacity: 0; translate: 0 120px; scale: .6 } 100% { opacity: 1; translate: 0 0; scale: 1 } }
.rv-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 99px; font-weight: 800; font-size: 15px; transition: background 160ms, transform 160ms var(--cc-ease-pop); }
.rv-btn:active { transform: scale(.94); }
.rv-btn-white { background: var(--cc-button-bg); color: var(--cc-button-text); }
.rv-btn-white:hover { background: var(--cc-button-bg-hover); }
.rv-btn-ghost { border: 1px solid var(--cc-border); color: var(--cc-text); }
.rv-btn-ghost:hover { background: #16181c; }
.rv-btn-danger { border: 1px solid rgba(255,79,163,.45); color: #ff4fa3; }
.rv-btn-danger:hover { background: rgba(255,79,163,.1); }

/* "N new cards" pill on the collection page */
.rv-notice { position: fixed; left: 50%; top: 20px; z-index: 40; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: 99px; background: var(--cc-button-bg); color: var(--cc-button-text); font-weight: 800; font-size: 14px; box-shadow: 0 10px 40px rgba(139,92,246,.45); animation: rv-drop 700ms var(--cc-ease-spring) both; }
.rv-notice-dot { width: 8px; height: 8px; border-radius: 50%; background: conic-gradient(#8b5cf6, #ff4fa3, #ffb547, #3ee6d6, #1d9bf0, #8b5cf6); animation: cc-pulse 1.6s ease-in-out infinite; }
@keyframes rv-drop { 0% { opacity: 0; translate: -50% -40px } 100% { opacity: 1; translate: -50% 0 } }

@media (max-width: 700px) {
  .rv-scale { transform: scale(1); }
  .rv-top { left: 16px; right: 16px; top: 16px; }
  .rv-tray { left: 16px; bottom: 16px; }
  .rv-left { right: 16px; bottom: 16px; }
  .rv-caption { top: calc(46% + 220px); }
  .rv-fan-card { width: 110px; height: 170px; margin: 0 -10px; }
  .rv-fan-card .cc { transform: scale(.423); }
}