/* workspace/starcode/css/cosmos-discovery.css
   SC-DISCOVERY: the beat after a survey scan pays out (js/scan-discovery.js).
   The word lands across the screen, a card holds a silhouette, and the tap
   bursts it into focus with a chime, a scale pulse, and a shine running the
   card's own border. Sits above the scan overlay (10000) and its reward
   lines (10001): it is the last thing in that sequence and nothing may
   cover it. Rarity is a colour, carried on the layer as data-rarity and
   read by the tokens below, so one word changes the whole card's mood. */
.discovery-layer {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(ellipse at center, rgba(4, 7, 13, 0.74) 0%, rgba(2, 3, 8, 0.95) 70%);
  opacity: 0;
  transition: opacity 0.32s ease;
  /* The card takes every tap for as long as it is on the screen, fade-out
     included -- [hidden] below is what stops it, and that only lands once
     the fade has finished. A tap that reached the orrery behind a card the
     player can still see would select a body and open its info panel. */
  pointer-events: auto;
  touch-action: none;
  /* Default (common) rarity tokens; each tier overrides them below. */
  --rar: 190, 205, 225;
  --rar-2: 150, 170, 200;
}
.discovery-layer[data-rarity="uncommon"] { --rar: 74, 222, 128; --rar-2: 34, 180, 110; }
.discovery-layer[data-rarity="rare"] { --rar: 96, 165, 250; --rar-2: 56, 120, 235; }
.discovery-layer[data-rarity="legendary"] { --rar: 251, 191, 36; --rar-2: 244, 114, 60; }
.discovery-layer.on { opacity: 1; }
.discovery-layer[hidden] { display: none; }
/* The word: punches in big, the same family and weight as the capture
   celebration's lines so the two read as one voice. */
.discovery-word {
  font-family: var(--font-data);
  font-weight: 700;
  letter-spacing: 6px;
  font-size: clamp(28px, 7.5vw, 64px);
  color: #e8f4ff;
  text-shadow: 0 0 22px rgba(125, 211, 252, 0.6), 0 2px 12px rgba(0, 0, 0, 0.85);
  opacity: 0;
  animation: discoveryWord 0.5s cubic-bezier(0.16, 0.84, 0.34, 1) forwards;
}
@keyframes discoveryWord {
  0%   { opacity: 0; transform: scale(0.86); letter-spacing: 16px; }
  100% { opacity: 1; transform: scale(1); letter-spacing: 6px; }
}
/* The card: closed until the word has had its beat. The frame inside is the
   generator page itself, so the specimen on screen is the real build. */
.discovery-card {
  position: relative;
  width: min(58vmin, 344px);
  height: min(58vmin, 344px);
  border-radius: 20px;
  background: rgba(6, 10, 18, 0.72);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(var(--rar), 0.25);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.16, 0.84, 0.34, 1);
}
.discovery-layer.carded .discovery-card { opacity: 1; transform: scale(1); }
/* The shine: a rarity-tinted sweep rotating around the card's own edge. It
   is a masked conic ring, so it lights the border and nothing else. */
.discovery-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg,
    rgba(var(--rar), 0) 0deg, rgba(var(--rar), 0.15) 60deg,
    rgba(var(--rar), 0.95) 100deg, rgba(255, 255, 255, 0.9) 118deg,
    rgba(var(--rar), 0.95) 136deg, rgba(var(--rar), 0.15) 176deg,
    rgba(var(--rar), 0) 240deg, rgba(var(--rar), 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: discoveryShine 3.4s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes discoveryShine { to { transform: rotate(1turn); } }
/* One pulse on the reveal, so the card reads as popping off the page. */
.discovery-card.pulse { animation: discoveryPulse 0.62s cubic-bezier(0.22, 1.3, 0.36, 1); }
@keyframes discoveryPulse {
  0%   { transform: scale(1); }
  32%  { transform: scale(1.11); }
  62%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}
.discovery-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  /* Silhouette: the real build, flattened to a shape. The lift is set
     inline by js/scan-discovery.js on the tap -- one source of truth for
     the filter, transitioned by this rule. A CSS animation here as well
     would out-rank that inline value and it would never come off. */
  filter: brightness(0) contrast(3) blur(1px);
  transform: scale(1.04);
  transition: filter 0.55s ease, transform 0.55s cubic-bezier(0.16, 0.84, 0.34, 1);
}
.discovery-card.revealed .discovery-frame { transform: scale(1); }
/* The burst: shards thrown out from the middle of the card on the reveal.
   Each carries its own angle, reach and size from js/scan-discovery.js. */
.discovery-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.discovery-burst i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgb(var(--rar));
  box-shadow: 0 0 10px 2px rgba(var(--rar), 0.85);
  opacity: 0;
}
.discovery-burst.go i { animation: discoveryShard 0.78s cubic-bezier(0.12, 0.7, 0.3, 1) forwards; }
@keyframes discoveryShard {
  0%   { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(0.3); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(var(--s)); }
}
/* A single white flash behind the shards, so the reveal reads as light
   rather than as confetti. */
.discovery-burst.go::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.92) 0%, rgba(var(--rar), 0.4) 32%, transparent 62%);
  animation: discoveryFlash 0.62s ease-out forwards;
}
@keyframes discoveryFlash {
  0%   { opacity: 0.95; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.5); }
}
/* The readout under the card: rarity, then what it IS, then its own name.
   All three stay out of the way until the specimen has been identified. */
.discovery-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 0 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.42s ease 0.18s, transform 0.42s ease 0.18s;
}
.discovery-layer.identified .discovery-info { opacity: 1; transform: translateY(0); }
.discovery-rarity {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.4em;
  padding: 4px 12px 4px 14px;
  border-radius: 99px;
  color: rgb(var(--rar));
  border: 1px solid rgba(var(--rar), 0.5);
  background: rgba(var(--rar), 0.1);
  text-shadow: 0 0 14px rgba(var(--rar), 0.7);
}
.discovery-type {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 38px);
  letter-spacing: 0.2em;
  color: #f2f8ff;
  text-shadow: 0 0 20px rgba(var(--rar), 0.55), 0 2px 12px rgba(0, 0, 0, 0.9);
}
.discovery-name {
  font-family: var(--font-data);
  font-size: clamp(13px, 3vw, 19px);
  letter-spacing: 0.12em;
  color: rgba(219, 232, 255, 0.82);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}
/* The way on. Only there once the thing has been identified. */
.discovery-log {
  font-family: var(--font-data);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.26em;
  padding: 13px 30px;
  border-radius: 12px;
  cursor: pointer;
  color: #06101c;
  background: linear-gradient(180deg, rgb(var(--rar)) 0%, rgb(var(--rar-2)) 100%);
  border: 0;
  box-shadow: 0 10px 30px rgba(var(--rar), 0.4), 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.38s ease 0.34s, transform 0.38s cubic-bezier(0.16, 0.84, 0.34, 1) 0.34s;
}
.discovery-layer.identified .discovery-log { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.discovery-log:hover { filter: brightness(1.12); }
.discovery-log:active { transform: translateY(1px) scale(0.98); }
.discovery-hint {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.34em;
  color: rgba(168, 178, 198, 0.6);
  min-height: 1.2em;
}
.discovery-layer.identified .discovery-hint { display: none; }
@media (prefers-reduced-motion: reduce) {
  .discovery-word { animation: none; opacity: 1; }
  .discovery-card { transition: opacity 0.2s ease; transform: none; }
  .discovery-card.pulse { animation: none; }
  .discovery-card::before { animation: none; }
  .discovery-frame { transition: none; }
  .discovery-burst.go i, .discovery-burst.go::after { animation: none; opacity: 0; }
}