/* Cosmic card component. Tokens live in cosmic_tokens.css; spec in docs/design-system. */

.cc { position: relative; width: var(--cc-card-w); height: var(--cc-card-h); flex-shrink: 0; perspective: 1000px; }
.cc.deal { animation: cc-deal var(--cc-dur-deal) var(--cc-ease-spring) both; }
.cc { scroll-margin-top: 96px; }
.cc:target .cc-face { animation: cc-target 1200ms var(--cc-ease-spring) both; }
@keyframes cc-target { 0% { box-shadow: var(--cc-card-shadow), 0 0 0 0 rgba(231,233,234,.9) } 100% { box-shadow: var(--cc-card-shadow), 0 0 0 24px rgba(231,233,234,0) } }
.cc-hit { position: absolute; inset: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cc-hit:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: 4px; border-radius: 22px; }
.cc-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--cc-dur-tilt) ease-out; }
.cc-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--cc-dur-flip) var(--cc-ease-flip); }
.cc.flipped .cc-flip { transform: rotateY(180deg); }
.cc-face { position: absolute; inset: 0; border-radius: var(--cc-card-radius); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--cc-card-shadow), 0 0 50px var(--glow, transparent); }
.cc-face.back { transform: rotateY(180deg); overflow: hidden; }
.cc-rim-clip { position: absolute; inset: 0; border-radius: var(--cc-card-radius); overflow: hidden; }
.cc-rim { position: absolute; left: -50%; top: -30%; width: 200%; height: 160%; background: var(--rim); }
.cc-rim.spin { animation: cc-spin var(--cc-dur-rim) linear infinite; }
.cc-inner { position: absolute; inset: var(--cc-rim-width); border-radius: calc(var(--cc-card-radius) - var(--cc-rim-width)); overflow: hidden; background: #04040a; }
/* The sky fills the card; the text sits on a scrim at the bottom. */
.cc-art { position: absolute; inset: 0; }
.cc-art svg { display: block; width: 100%; height: 100%; }
.cc.locked .cc-art { filter: grayscale(1) brightness(.55); }
.cc-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 17%, transparent 44%, rgba(0,0,0,.82) 70%, #000 100%); }
/* An inner frame that grows with rarity: a hairline, then corners, then holo for EPIC and SINGULAR. */
.cc-frame { position: absolute; inset: 9px; border-radius: 13px; border: 1.5px solid var(--frame-line, rgba(255,255,255,.08)); background: var(--frame, none) border-box; opacity: .8; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); }
.cc-frame i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--accent, transparent); }
.cc-frame i:nth-child(1) { left: -1px; top: -1px; border-width: 1.5px 0 0 1.5px; border-top-left-radius: 13px; }
.cc-frame i:nth-child(2) { right: -1px; top: -1px; border-width: 1.5px 1.5px 0 0; border-top-right-radius: 13px; }
.cc-frame i:nth-child(3) { left: -1px; bottom: -1px; border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 13px; }
.cc-frame i:nth-child(4) { right: -1px; bottom: -1px; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: 13px; }
.cc-top { position: absolute; left: 20px; right: 20px; top: 20px; display: flex; justify-content: space-between; align-items: center; font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .12em; }
.cc-num { color: rgba(231,233,234,.72); }
.cc-tag { padding: 3px 8px; border-radius: 99px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cc-tag span { background: var(--tag); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.cc-lock { position: absolute; left: 0; right: 0; top: 0; height: 56%; display: flex; align-items: center; justify-content: center; }
.cc-foil { position: absolute; inset: 0; background: var(--cc-foil); background-size: 300% 300%; background-position: var(--fx, 50%) var(--fy, 30%); mix-blend-mode: color-dodge; opacity: var(--foil, 0); pointer-events: none; }
.cc-text { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; flex-direction: column; }
.cc-kicker { font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--kick, var(--cc-text-muted)); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-title { font-weight: 800; font-size: 52px; letter-spacing: -.05em; line-height: .95; padding-bottom: 2px; white-space: nowrap; background: var(--fig, none); -webkit-background-clip: text; background-clip: text; color: var(--fig-color, var(--cc-text)); }
.cc-title.is-word { font-size: 30px; letter-spacing: -.035em; line-height: 1; white-space: normal; }
.cc.locked .cc-title { color: var(--cc-text-muted); }
.cc-unit { margin-top: 7px; font-family: var(--cc-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cc-text); }
.cc-desc { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; line-height: 1.4; color: rgba(231,233,234,.62); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-foot { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .08em; color: var(--cc-text-muted); }
.cc-foot .row { display: flex; justify-content: space-between; }
.cc-foot .hint { color: var(--cc-text-dim); }
.cc-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.cc-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--cc-violet), var(--cc-cyan)); transform-origin: left; animation: cc-fill 1400ms var(--cc-ease-out) 600ms both; }
.cc-glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .15; transition: opacity 200ms; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 45%); }
.cc.hover .cc-glare { opacity: .7; }
.cc-shine { position: absolute; top: -20%; left: 0; width: 44px; height: 140%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); animation: cc-shine 5s ease-in-out infinite both; pointer-events: none; }
/* The back: number and title, then the moment the card was earned (cards/_moment), loaded on the first flip. */
.cc-back { position: absolute; inset: var(--cc-rim-width); border-radius: calc(var(--cc-card-radius) - var(--cc-rim-width)); background: #05050a; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.cc:has(.cc-open) .cc-back { padding-bottom: 58px; }
.cc-back-top { display: flex; justify-content: space-between; font-family: var(--cc-font-mono); font-size: 9px; letter-spacing: .14em; color: var(--cc-text-muted); }
.cc-back-top b { font-weight: 500; color: var(--kick); }
.cc-back-title { font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height: 1.1; color: var(--cc-text); }
.cc-moment { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.cc-back-k { margin-bottom: 7px; font-family: var(--cc-font-mono); font-size: 9px; letter-spacing: .14em; color: var(--kick); }
.cc-vis { position: relative; }
.cc-story { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--cc-text-muted); }
.cc-story b { font-weight: 600; color: var(--cc-text); }
.cc-facts { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc-facts div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cc-facts dt { font-family: var(--cc-font-mono); font-size: 8.5px; letter-spacing: .12em; color: var(--cc-text-dim); }
.cc-facts dd { margin: 0; font-family: var(--cc-font-mono); font-size: 13px; font-weight: 600; color: var(--cc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-back-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--cc-divider); display: flex; justify-content: space-between; font-family: var(--cc-font-mono); font-size: 9px; letter-spacing: .12em; color: var(--cc-text-muted); }
.cc-earn { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--cc-text); }
.cc-goal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cc-goal b { font-size: 30px; font-weight: 800; letter-spacing: -.04em; color: var(--cc-text); }
.cc-goal span, .cc-togo { font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .08em; color: var(--cc-text-muted); }
.cc-togo { margin-top: 8px; color: var(--cc-cyan); }
.cc-moment-wait { display: flex; gap: 6px; padding-top: 6px; }
.cc-moment-wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--cc-text-dim); animation: cc-twinkle 1.2s ease-in-out infinite both; }
.cc-moment-wait i:nth-child(2) { animation-delay: .2s; } .cc-moment-wait i:nth-child(3) { animation-delay: .4s; }
/* Moment pictures. */
.mo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mo-line { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.mo-t { font-family: var(--cc-font-mono); font-size: 8px; letter-spacing: .06em; fill: var(--cc-text-muted); }
.mo-dim { fill: #3a3e44; } .mo-hi { fill: var(--cc-text); }
.mo-big { font-family: var(--cc-font-mono); font-size: 12px; font-weight: 600; fill: var(--cc-text); }
.mo-seat { font-family: var(--cc-font-mono); font-size: 7px; font-weight: 700; fill: #000; }
.mo-post { border: 1px solid var(--cc-border); border-radius: 12px; padding: 9px 11px; }
.mo-post p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--cc-text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mo-when { font-family: var(--cc-font-mono); font-size: 9px; letter-spacing: .08em; color: var(--cc-text-muted); }
.mo-empty { font-size: 12px; line-height: 1.4; color: var(--cc-text-dim); }

/* The sealed back: a warp jump, slow at rest, faster under the pointer (warp_controller) and in the reveal's charge. */
.cc-sealed { position: absolute; inset: var(--cc-rim-width); border-radius: calc(var(--cc-card-radius) - var(--cc-rim-width)); overflow: hidden; background: radial-gradient(circle at 50% 48%, #0e0b22 0%, #000 70%); display: flex; align-items: center; justify-content: center; }
.cc-warp { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-warp line { stroke-linecap: round; animation: cc-warp calc(var(--d, 1.6s) * 8) linear infinite; animation-delay: var(--dl, 0s); }
@keyframes cc-warp { to { stroke-dashoffset: -260 } }
.rv-card.is-charge .cc-warp line { animation-duration: var(--d, 1.6s); }
.cc-warp-core { position: relative; width: 64px; height: 64px; border-radius: 50%; background: #000; border: 1px solid var(--hl, #e7e9ea); box-shadow: 0 0 16px -2px var(--hl, #e7e9ea); display: flex; align-items: center; justify-content: center; color: var(--cc-text); transition: box-shadow .5s, transform .5s var(--cc-ease-spring); }
.cc-warp-core .ah-mark { display: block; }
.cc-sealed.is-jumping .cc-warp-core { box-shadow: 0 0 34px 2px var(--hl, #e7e9ea); transform: scale(1.06); }
.cc-sealed-label { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--cc-text-muted); }
.cc.sealed .cc-face { box-shadow: var(--cc-card-shadow), 0 0 60px var(--glow, transparent); }

/* The sky's moving parts (CardArt::Motion, CardsHelper#card_motion): each its own element, only moved or faded, so
   the GPU animates it and the still scene under it is never repainted. A shelf at rest only twinkles and pulses;
   the rays, the shock ring, the spinning rim and the shine run when a card is live: hovered, in the reveal, or on
   its own page (.is-live). */
.cc-fx { position: absolute; inset: 0; pointer-events: none; }
.cc-fx > * { position: absolute; will-change: transform, opacity; }
.cc-fx svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-tw { border-radius: 50%; background: #fff; translate: -50% -50%; animation: cc-twinkle 3s ease-in-out infinite both; }
.fx-pulse { animation: cc-pulse 2.6s ease-in-out infinite; }
.fx-spin { animation: cc-spin 90s linear infinite; }
.fx-shock { animation: cc-shock 3s cubic-bezier(.1,.8,.2,1) infinite both; }
.fx-spin, .fx-shock, .cc-rim.spin, .cc-shine { animation-play-state: paused; }
:is(.cc.hover, .rv, .is-live) :is(.fx-spin, .fx-shock, .cc-rim.spin, .cc-shine) { animation-play-state: running; }

/* Cards out of view keep their state but stop burning frames. */
[data-offscreen] :is(.fx-tw, .fx-pulse, .fx-spin, .fx-shock, .cc-shine, .cc-rim.spin, .cc-warp line) { animation-play-state: paused; }

/* Page */
.cc-starfield { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(40% 30% at 15% 10%, rgba(139,92,246,.14), transparent 70%), radial-gradient(35% 30% at 85% 80%, rgba(62,230,214,.08), transparent 70%); }
.cc-starfield::after { content: ""; position: absolute; inset: 0; opacity: .035; mix-blend-mode: overlay; background-repeat: repeat; background-size: 180px 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.cc-progress { height: 6px; border-radius: 6px; background: var(--cc-track); overflow: hidden; }
.cc-progress i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--cc-violet), var(--cc-magenta), var(--cc-amber), var(--cc-cyan)); transform-origin: left; animation: cc-fill 1400ms var(--cc-ease-out) 600ms both; }
.cc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* How many times a post card was earned. */
.cc-x { padding: 3px 7px; border-radius: 99px; background: var(--cc-text); color: #05050a; font-weight: 700; letter-spacing: .04em; }

/* "open card" on the back of an earned card: the way to its own page, shown once the card is flipped. */
.cc-open { position: absolute; left: 50%; bottom: 18px; z-index: 3; transform: translateX(-50%); padding: 8px 14px; border: 1px solid var(--cc-border); border-radius: 99px; background: #05050a; font-family: var(--cc-font-mono); font-size: 11px; letter-spacing: .08em; color: var(--cc-text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 200ms 150ms; }
.cc.flipped .cc-open { opacity: 1; pointer-events: auto; }
.cc-open:hover { background: var(--cc-track); }