/* Hero valuation card — ported from docs/design/SkyFlip Hero.dc.html
   (owner's animation: NBT decodes, comps land, median + confidence build,
   prices count up; 8s loop).

   CSP is self-only, so everything lives here; the design's mint accent is
   mapped to the site's amber. IMPORTANT DEGRADATION CONTRACT: every
   element's STATIC style is the FINISHED card — all hidden/zero states
   exist only inside keyframes, and keyframes apply only under .hv-run
   (added by hero.js at its own clock epoch, keeping CSS and JS in phase).
   No JS, JS error, or prefers-reduced-motion => complete static card. */

.hero-flex {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(36px, 5vw, 72px);
}
.hero-flex .hero-inner { flex: 1 1 400px; min-width: 280px; }

.hv-wrap { position: relative; flex: 0 1 440px; width: min(440px, 100%); min-width: 0; z-index: 1; }
.hv-glow {
  position: absolute; inset: 10px; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 90px 12px rgba(217, 148, 74, 0.35); opacity: 0;
}
.hv-card {
  position: relative; background: linear-gradient(180deg, #131a26, #0c121c);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 20px 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  font-size: 13px;
}

.hv-k { font-size: 10px; letter-spacing: 0.14em; color: var(--faint); }
.hv-acc { color: var(--accent); }
.hv-col { display: flex; flex-direction: column; gap: 5px; }
.hv-col.hv-right { align-items: flex-end; text-align: right; }

.hv-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 13px; border-bottom: 1px solid var(--border); margin-bottom: 13px;
}
.hv-name { font-size: 16px; font-weight: 700; color: var(--cream); }
.hv-stars { color: var(--accent); }
.hv-ask { font-size: 14px; font-weight: 700; color: var(--cream); }

/* Decode blob: statically collapsed (the finished card has moved past
   decoding); the keyframe opens and closes it during the loop. */
.hv-blob-wrap { overflow: hidden; max-height: 0; opacity: 0; margin-bottom: 0; }
.hv-blob-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.hv-blob {
  font-size: 10.5px; line-height: 1.6; color: var(--faint);
  word-break: break-all; user-select: none;
}

.hv-rows { display: flex; flex-direction: column; gap: 8px; padding-bottom: 13px; }
.hv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.hv-row .hv-k { align-self: center; }
.hv-val { display: flex; gap: 8px; align-items: center; color: var(--cream); }
.hv-tick { color: var(--accent); font-weight: 700; width: 12px; }

.hv-comps-sec { padding: 13px 0; border-top: 1px solid var(--border); }
.hv-mb { display: block; margin-bottom: 10px; }
.hv-comps { display: flex; gap: 8px; margin-bottom: 14px; }
.hv-comp {
  flex: 1; border: 1px dashed #3a4556; border-radius: 7px; padding: 7px 9px;
}
.hv-cp { font-size: 12px; font-weight: 700; color: var(--dim); }
.hv-cs { font-size: 9.5px; color: var(--faint); margin-top: 2px; }

.hv-hist { position: relative; }
.hv-strip { display: flex; align-items: flex-end; gap: 3px; height: 30px; transform-origin: bottom; }
.hv-strip span { flex: 1; background: rgba(242, 232, 216, 0.10); border-radius: 1px; }
.hv-strip .b1 { height: 4px; } .hv-strip .b2 { height: 7px; } .hv-strip .b3 { height: 11px; }
.hv-strip .b4 { height: 16px; background: rgba(242, 232, 216, 0.12); }
.hv-strip .b5 { height: 22px; background: var(--accent); opacity: 0.3; }
.hv-strip .b6 { height: 28px; background: var(--accent); opacity: 0.42; }
.hv-strip .b7 { height: 24px; background: var(--accent); opacity: 0.3; }
.hv-strip .b8 { height: 17px; background: rgba(242, 232, 216, 0.12); }
.hv-strip .b9 { height: 11px; } .hv-strip .b10 { height: 7px; }
.hv-strip .b11 { height: 4px; } .hv-strip .b12 { height: 3px; }
.hv-dot {
  position: absolute; bottom: -5px; width: 7px; height: 7px; margin-left: -3px;
  border-radius: 50%; background: var(--dim);
}
.hv-dot1 { left: 28%; } .hv-dot2 { left: 46%; } .hv-dot3 { left: 61%; }
.hv-median {
  position: absolute; left: 46%; top: -4px; bottom: -8px; width: 2px; margin-left: -1px;
  background: var(--accent); border-radius: 1px; transform-origin: bottom;
  box-shadow: 0 0 8px rgba(217, 148, 74, 0.5);
}
.hv-axis {
  display: flex; justify-content: space-between; margin-top: 12px;
  font-size: 9.5px; color: var(--faint);
}

.hv-conf-sec { padding: 13px 0 2px; border-top: 1px solid var(--border); }
.hv-conf-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.hv-conf-num { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.hv-bar { height: 6px; background: rgba(242, 232, 216, 0.07); border-radius: 3px; overflow: hidden; }
.hv-fill {
  height: 100%; width: 92%; background: var(--accent); border-radius: 3px;
  box-shadow: 0 0 12px rgba(217, 148, 74, 0.5);
}

.hv-prices { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 16px; }
.hv-price { font-size: 22px; font-weight: 700; color: var(--cream); min-width: 100px; }
.hv-profit { color: var(--accent); text-align: right; }

/* ---------- the loop (only when hero.js arms it) ---------- */
.hv-run { --hv-loop: 8s; }
.hv-run .hv-glow   { animation: hvGlow var(--hv-loop) ease infinite; }
.hv-run .hv-card   { animation: hvCard var(--hv-loop) ease infinite; }
.hv-run .hv-blob-wrap { animation: hvBlob var(--hv-loop) ease infinite; }
.hv-run .hv-row1   { animation: hvRow1 var(--hv-loop) ease infinite; }
.hv-run .hv-row2   { animation: hvRow2 var(--hv-loop) ease infinite; }
.hv-run .hv-row3   { animation: hvRow3 var(--hv-loop) ease infinite; }
.hv-run .hv-row4   { animation: hvRow4 var(--hv-loop) ease infinite; }
.hv-run .hv-comp1  { animation: hvComp1 var(--hv-loop) ease infinite; }
.hv-run .hv-comp2  { animation: hvComp2 var(--hv-loop) ease infinite; }
.hv-run .hv-comp3  { animation: hvComp3 var(--hv-loop) ease infinite; }
.hv-run .hv-strip  { animation: hvStrip var(--hv-loop) ease infinite; }
.hv-run .hv-dot1   { animation: hvDot1 var(--hv-loop) ease infinite; }
.hv-run .hv-dot2   { animation: hvDot2 var(--hv-loop) ease infinite; }
.hv-run .hv-dot3   { animation: hvDot3 var(--hv-loop) ease infinite; }
.hv-run .hv-median { animation: hvMedian var(--hv-loop) ease infinite; }
.hv-run .hv-medtag { animation: hvMedTag var(--hv-loop) ease infinite; }
.hv-run .hv-fill   { animation: hvConf var(--hv-loop) ease infinite; }
.hv-run .hv-prices { animation: hvPrices var(--hv-loop) ease infinite; }
.hv-run .hv-profit { animation: hvProfit var(--hv-loop) ease infinite; }

@keyframes hvCard {
  0% { opacity: 0; transform: translateY(-46px) scale(0.985); }
  5.5% { opacity: 1; transform: translateY(3px) scale(1); }
  8% { transform: translateY(0); }
  94% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes hvGlow {
  0%, 74% { opacity: 0; }
  82% { opacity: 1; }
  92% { opacity: 0.6; }
  97%, 100% { opacity: 0; }
}
@keyframes hvBlob {
  0% { opacity: 0; max-height: 84px; margin-bottom: 14px; transform: translateY(-6px); }
  6% { opacity: 0; transform: translateY(-6px); }
  10% { opacity: 1; transform: translateY(0); }
  42% { opacity: 1; max-height: 84px; margin-bottom: 14px; }
  48%, 100% { opacity: 0; max-height: 0; margin-bottom: 0; }
}
@keyframes hvRow1 { 0%, 17% { opacity: 0; transform: translateX(-12px); } 20% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; } }
@keyframes hvRow2 { 0%, 23% { opacity: 0; transform: translateX(-12px); } 26% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; } }
@keyframes hvRow3 { 0%, 29% { opacity: 0; transform: translateX(-12px); } 32% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; } }
@keyframes hvRow4 { 0%, 35% { opacity: 0; transform: translateX(-12px); } 38% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; } }
@keyframes hvComp1 { 0%, 43% { opacity: 0; transform: translateX(46px); } 47% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; } }
@keyframes hvComp2 { 0%, 46% { opacity: 0; transform: translateX(46px); } 50% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; } }
@keyframes hvComp3 { 0%, 49% { opacity: 0; transform: translateX(46px); } 53% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; } }
@keyframes hvStrip { 0%, 50% { transform: scaleY(0); } 56% { transform: scaleY(1); } 100% { transform: scaleY(1); } }
@keyframes hvDot1 { 0%, 52% { opacity: 0; transform: scale(0.3); } 54% { opacity: 1; transform: scale(1); } 100% { opacity: 1; } }
@keyframes hvDot2 { 0%, 54% { opacity: 0; transform: scale(0.3); } 56% { opacity: 1; transform: scale(1); } 100% { opacity: 1; } }
@keyframes hvDot3 { 0%, 56% { opacity: 0; transform: scale(0.3); } 58% { opacity: 1; transform: scale(1); } 100% { opacity: 1; } }
@keyframes hvMedian { 0%, 55% { opacity: 0; transform: scaleY(0); } 59% { opacity: 1; transform: scaleY(1); } 100% { opacity: 1; } }
@keyframes hvMedTag { 0%, 57% { opacity: 0; } 61% { opacity: 1; } 100% { opacity: 1; } }
@keyframes hvConf { 0%, 58% { width: 0%; } 64% { width: 94.5%; } 66.5% { width: 92%; } 100% { width: 92%; } }
@keyframes hvPrices { 0%, 62% { opacity: 0; transform: translateY(10px); } 66% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; } }
@keyframes hvProfit {
  0%, 78% { transform: scale(1); text-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  81% { transform: scale(1.07); text-shadow: 0 0 22px rgba(217, 148, 74, 0.5); }
  85% { transform: scale(1); }
  92% { text-shadow: 0 0 10px rgba(217, 148, 74, 0.5); }
  100% { text-shadow: 0 0 0 rgba(0, 0, 0, 0); }
}

@media (max-width: 760px) {
  .hv-wrap { flex-basis: 100%; }
  .hv-price { font-size: 19px; }
}