/* ============================================================
   Ballish Base ($BALLISH) . anatomy specimen page
   Black void + Base-blue chart + white text. Field-study aesthetic.
   ============================================================ */

:root{
  --bg:#000000;
  --ink:#ffffff;
  --paper:#f0ebe0;       /* warm off-white for paper-strips and labels */
  --bb:#1d6cff;          /* Base-blue chart color (matches mockup) */
  --bb-2:#3b86ff;
  --dim:#9aa0ad;
  --hairline:rgba(255,255,255,0.18);
  --hairline-soft:rgba(255,255,255,0.08);
  --leader:rgba(255,255,255,0.32);
  --leader-active:rgba(255,255,255,0.72);
  --rise:1;
  --f-display:'Familjen Grotesk',system-ui,-apple-system,sans-serif;
  --f-body:'Albert Sans',system-ui,-apple-system,sans-serif;
  --f-mono:'Roboto Mono',ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-weight:400;line-height:1.55;
  min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 38% at 50% 36%, rgba(29,108,255,0.12), transparent 70%),
    repeating-linear-gradient(0deg,transparent 0,transparent 38px,rgba(255,255,255,0.018) 38px,rgba(255,255,255,0.018) 39px);
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:transparent;border:0;color:inherit;cursor:pointer;}

/* ============================================================
   FIG-REF corner annotation (dex)
   ============================================================ */
.fig-ref{
  position:fixed;display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:.74rem;color:var(--ink);
  z-index:20;
}
.ref-dex{top:18px;right:22px;}
.ref-tag{
  font-family:var(--f-body);font-style:italic;font-weight:500;
  color:var(--dim);font-size:.72rem;
}
.ref-label{
  font-family:var(--f-body);font-style:italic;font-weight:500;color:var(--dim);
}
.ref-label::after{
  content:" .";color:var(--dim);
}
.ref-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:.74rem;color:var(--bb);
  border-bottom:1px solid currentColor;padding-bottom:1px;
  transition:color .12s ease,border-color .12s ease;
}
.ref-link:hover{color:var(--bb-2);}
.ref-ico{width:18px;height:18px;color:currentColor;}
.ref-link.is-disabled{color:var(--dim);}

/* ============================================================
   STAGE (hero: wordmark + chart + wordmark)
   ============================================================ */
.stage{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2.6vw,42px);
  padding:clamp(72px,11vh,130px) clamp(20px,4vw,60px) clamp(30px,4vh,52px);
  max-width:1500px;margin:0 auto;
  flex-wrap:nowrap;
}
.wordmark{
  flex:0 0 auto;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.2rem,6.8vw,6.4rem);
  letter-spacing:-.028em;line-height:1;
  user-select:none;
}
.wordmark-left{color:var(--ink);}
.wordmark-right{color:var(--bb);}

.chart-wrap{
  position:relative;
  flex:0 0 auto;
  aspect-ratio:1000/800;
  width:clamp(420px,46vw,680px);
  max-height:64vh;
}
.chart-svg{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;
}
.chart-line{
  stroke-dasharray:6000;
  stroke-dashoffset:6000;
  animation:drawLine 3s cubic-bezier(.55,.05,.3,1) .25s forwards;
  filter:drop-shadow(0 0 18px rgba(29,108,255,0.35));
}
.chart-line.is-redraw{
  animation:drawLine 2.6s cubic-bezier(.55,.05,.3,1) 0s forwards;
}
@keyframes drawLine{
  0%   { stroke-dashoffset:6000; }
  100% { stroke-dashoffset:0;    }
}

.apex{
  filter:drop-shadow(0 0 14px rgba(29,108,255,0.4));
  opacity:0;
  animation:apexIn .55s ease 2.55s forwards;
}
.is-redraw .apex,
.chart-line.is-redraw ~ .apex{
  animation:apexIn .55s ease 2.1s forwards;
}
@keyframes apexIn{ to { opacity:1; } }

.lashes line{
  stroke:var(--bb);stroke-width:14;stroke-linecap:round;
  opacity:0;animation:lashIn .35s ease 2.1s forwards;
}
.lashes line:nth-child(1){animation-delay:1.9s;}
.lashes line:nth-child(2){animation-delay:1.95s;}
.lashes line:nth-child(3){animation-delay:2.0s;}
.lashes line:nth-child(4){animation-delay:2.05s;}
.lashes line:nth-child(5){animation-delay:2.4s;}
.lashes line:nth-child(6){animation-delay:2.45s;}
.lashes line:nth-child(7){animation-delay:2.5s;}
.lashes line:nth-child(8){animation-delay:2.55s;}
@keyframes lashIn{ to { opacity:1; } }

.leaders .leader{
  stroke:var(--leader);stroke-width:1.4;stroke-dasharray:5 6;
  opacity:0;transition:stroke .25s ease;
  animation:leaderIn .4s ease 2.7s forwards;
}
.leaders .leader[data-key="a"]{animation-delay:2.6s;}
.leaders .leader[data-key="b"]{animation-delay:2.7s;}
.leaders .leader[data-key="c"]{animation-delay:2.8s;}
.leaders .leader[data-key="d"]{animation-delay:2.9s;}
@keyframes leaderIn{ to { opacity:1; } }
/* leader-dots live in their own group AFTER the chart-line so they paint on top */
.leader-dots .leader-dot{
  fill:#ffffff;stroke:#0a0a14;stroke-width:2.4;
  opacity:0;animation:leaderIn .4s ease forwards;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.6));
}
.leader-dots .leader-dot[data-key="a"]{animation-delay:3.05s;}
.leader-dots .leader-dot[data-key="b"]{animation-delay:3.15s;}
.leader-dots .leader-dot[data-key="c"]{animation-delay:3.25s;}
.leader-dots .leader-dot[data-key="d"]{animation-delay:3.35s;}

.ball-hit{ cursor:pointer; transition:transform .35s cubic-bezier(.34,1.56,.64,1); outline:none; }
/* keyboard-tab focus: subtle white halo via filter, no bounding rectangle */
.ball-hit:focus-visible{ outline:none; filter:drop-shadow(0 0 12px rgba(255,255,255,.75)); }
.ball-hit.is-bounce{ animation:ballSquish .55s cubic-bezier(.22,1.7,.36,1); }
@keyframes ballSquish{
  0%   { transform:translateY(0)     scale(1,1); }
  30%  { transform:translateY(18px)  scale(1.18,0.78); }
  60%  { transform:translateY(-14px) scale(.9,1.15); }
  100% { transform:translateY(0)     scale(1,1); }
}

/* callouts anchored to the four corners of the chart-wrap */
.callout{
  position:absolute;
  font-family:var(--f-body);font-size:.84rem;line-height:1.3;
  color:var(--ink);max-width:170px;
  opacity:0;animation:calloutIn .4s ease 3.05s forwards;
  pointer-events:none;
}
.callout[data-key="a"]{ top:2px;    left:2px;   text-align:left;  animation-delay:2.95s; }
.callout[data-key="b"]{ bottom:6px; left:2px;   text-align:left;  animation-delay:3.05s; }
.callout[data-key="c"]{ bottom:6px; right:2px;  text-align:right; animation-delay:3.15s; }
.callout[data-key="d"]{ top:2px;    right:2px;  text-align:right; animation-delay:3.25s; }
@keyframes calloutIn{ to { opacity:1; } }
.callout em{
  display:block;font-family:var(--f-body);font-style:italic;font-weight:500;
  font-size:.7rem;color:var(--dim);margin-bottom:2px;
}
.callout b{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:.98rem;color:var(--ink);letter-spacing:-.005em;
}
.callout i{
  display:block;font-family:var(--f-body);font-style:italic;font-size:.76rem;
  color:var(--dim);margin-top:2px;line-height:1.3;
}

/* field-correspondent paper-strip . own band below the stage */
.strip-band{
  display:flex;justify-content:center;
  padding:clamp(28px,4.5vh,56px) 24px 0;
}
.paper-strip{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--paper);color:#1a1a1a;
  padding:9px 18px 10px;font-family:var(--f-mono);font-size:.8rem;
  position:relative;
  transform:rotate(-1.4deg);
  box-shadow:0 14px 28px -14px rgba(0,0,0,.85),inset 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .18s ease,box-shadow .18s ease;
}
.paper-strip::before,.paper-strip::after{
  content:"";position:absolute;top:-7px;width:34px;height:14px;
  background:rgba(241,234,140,.78);
  border-radius:1px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.paper-strip::before{left:-10px;transform:rotate(-12deg);}
.paper-strip::after{right:-10px;transform:rotate(8deg);}
.paper-strip:hover{transform:rotate(-0.4deg) translateY(-2px);}
.strip-tag{
  font-family:var(--f-body);font-style:italic;font-weight:500;color:#666;
  font-size:.72rem;
}
.strip-tag::after{content:" .";color:#666;}
.strip-handle{font-family:var(--f-mono);color:#0e0e0e;font-weight:500;}
.strip-ico{width:24px;height:18px;color:#1a1a1a;}
.paper-strip.is-disabled{filter:grayscale(.4) opacity(.7);cursor:default;}

/* ============================================================
   TAXONOMY (lab note + counter + redraw + acquire tag + jar)
   ============================================================ */
.taxonomy{
  max-width:1100px;margin:clamp(56px,8vh,96px) auto 0;
  padding:0 clamp(20px,5vw,60px);
  display:flex;flex-direction:column;gap:36px;
}
.tx-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:28px 32px;
  justify-content:center;
}
.lab-note{
  font-family:var(--f-body);font-style:italic;font-weight:400;
  font-size:1.05rem;color:var(--ink);max-width:760px;text-align:center;
  line-height:1.5;letter-spacing:.001em;
}

.tx-row-2{ justify-content:space-between; gap:22px; }
.metric{
  display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:200px;
}
.metric-key{
  font-family:var(--f-body);font-style:italic;font-size:.78rem;color:var(--dim);
}
.metric-val{
  font-family:var(--f-display);font-weight:700;font-size:2.4rem;color:var(--ink);
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;
  transition:color .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);
}
.metric-val.is-pop{color:var(--bb);transform:scale(1.12);}
.metric-sub{
  font-family:var(--f-mono);font-size:.7rem;color:var(--dim);margin-top:6px;
}

.redraw-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-body);font-weight:500;font-size:.95rem;color:var(--ink);
  padding:11px 18px;
  border:1px dashed var(--hairline);border-radius:0;
  transition:border-color .12s ease,color .12s ease;
}
.redraw-btn:hover{border-color:var(--ink);color:var(--bb);}
.redraw-btn svg{width:18px;height:18px;color:currentColor;}

/* price-tag: hexagonal-corner acquire-specimen tag */
.price-tag{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--bb);color:#fff;
  padding:13px 22px 13px 30px;
  position:relative;
  clip-path:polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
  transition:transform .14s ease,filter .14s ease;
}
.price-tag-eye{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:#0b0b0b;
}
.price-tag:hover{transform:translateY(-2px);filter:brightness(1.08);}
.price-tag-body{display:flex;flex-direction:column;line-height:1.1;}
.price-tag-kicker{
  font-family:var(--f-body);font-style:italic;font-size:.7rem;color:rgba(255,255,255,.78);
}
.price-tag-name{
  font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
}
.price-tag-ico{width:18px;height:18px;color:#fff;flex:0 0 auto;}
.price-tag.is-disabled{background:#3a3a3a;filter:grayscale(.5);cursor:default;}

/* specimen jar with wraparound CA label */
.tx-row-jar{
  justify-content:center;gap:34px;padding-top:14px;
  border-top:1px solid var(--hairline-soft);
}
.jar{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  padding:0;background:transparent;
  width:220px;height:320px;
  transition:transform .14s ease;
}
.jar:hover{transform:translateY(-3px);}
.jar-svg{position:absolute;inset:0;width:100%;height:100%;}
.jar-label{
  position:absolute;left:8px;right:8px;top:110px;
  padding:14px 8px 12px;
  background:var(--paper);color:#1a1a1a;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.05);
}
.jar-label::before,.jar-label::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 6px,transparent 6px 12px);
}
.jar-label::before{top:0;}
.jar-label::after{bottom:0;}
.jl-kick{
  font-family:var(--f-body);font-style:italic;font-size:.72rem;color:#5d5d5d;
}
.jl-ca{
  font-family:var(--f-mono);font-size:.84rem;color:#0c0c0c;font-weight:500;
  letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.jl-hint{
  font-family:var(--f-body);font-style:italic;font-size:.68rem;color:#6e6e6e;
  margin-top:2px;
}
.jar.is-copied .jar-label{background:#d8f0e0;}
.jar.is-copied .jl-hint{color:#3e7a52;}

.binomial{
  display:flex;flex-direction:column;gap:4px;max-width:260px;
}
.b-genus{
  font-family:var(--f-display);font-style:italic;font-weight:700;font-size:1.6rem;
  letter-spacing:-.015em;color:var(--ink);line-height:1;
}
.b-species{
  font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.4rem;
  color:var(--bb);line-height:1;margin-top:2px;
}
.b-meta{
  font-family:var(--f-mono);font-size:.7rem;color:var(--dim);margin-top:8px;line-height:1.5;
}

/* ============================================================
   METHODOLOGY
   ============================================================ */
.method{
  max-width:760px;margin:clamp(56px,8vh,90px) auto 0;
  padding:0 clamp(20px,5vw,60px);
}
.method-kicker{
  font-family:var(--f-body);font-style:italic;font-size:.74rem;color:var(--dim);
  margin-bottom:10px;letter-spacing:.02em;
}
.method-body{
  font-family:var(--f-body);font-weight:400;font-size:1rem;color:var(--ink);
  margin-bottom:14px;line-height:1.65;
}
.method-body em{
  font-family:var(--f-display);font-style:italic;font-weight:500;color:var(--bb);
  letter-spacing:-.005em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  max-width:880px;margin:clamp(60px,9vh,120px) auto 0;
  padding:32px clamp(20px,5vw,60px) 70px;
  border-top:1px solid var(--hairline-soft);
  text-align:center;
}
.foot-line{
  font-family:var(--f-body);font-size:.86rem;color:var(--dim);margin-bottom:6px;
}
.foot-line b{font-family:var(--f-display);font-style:italic;font-weight:500;color:var(--ink);}
.foot-disc{font-size:.74rem;color:#5b6075;margin-top:6px;}

/* ============================================================
   FLOATING RISERS (+1 confirmations)
   ============================================================ */
.risers{position:fixed;inset:0;pointer-events:none;z-index:40;}
.riser{
  position:absolute;
  font-family:var(--f-display);font-weight:700;color:var(--bb);
  font-size:1.3rem;letter-spacing:-.01em;
  animation:riserUp 1.4s cubic-bezier(.22,.7,.3,1) forwards;
  filter:drop-shadow(0 0 12px rgba(29,108,255,.45));
}
@keyframes riserUp{
  0%   { transform:translateY(0)    scale(.7); opacity:0; }
  20%  { transform:translateY(-8px) scale(1);  opacity:1; }
  100% { transform:translateY(-110px) scale(1.05); opacity:0; }
}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:50;
  transform:translate(-50%,160%);
  max-width:min(380px,90vw);
  background:var(--paper);color:#0c0c0c;
  padding:11px 18px;
  font-family:var(--f-mono);font-size:.82rem;
  box-shadow:0 14px 28px -10px rgba(0,0,0,.5);
  transition:transform .35s cubic-bezier(.2,.9,.25,1);
}
.toast.show{transform:translate(-50%,0);}

/* ============================================================
   FOCUS
   ============================================================ */
a:focus-visible,button:focus-visible{outline:1.5px dashed var(--ink);outline-offset:4px;}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .chart-line,.apex,.lashes line,.leaders .leader,.callout{
    animation:none!important;opacity:1!important;stroke-dashoffset:0!important;
  }
  .ball-hit.is-bounce{animation:none!important;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .stage{
    grid-template-columns:1fr;
    gap:18px;padding-top:80px;
    text-align:center;
  }
  .wordmark{font-size:clamp(3rem,12vw,5rem);}
  .chart-wrap{width:min(90vw,520px);margin:0 auto;}
  .paper-strip{bottom:-48px;}
  .ref-dex{top:10px;right:14px;font-size:.66rem;}
  .ref-link{font-size:.7rem;}
  .callout{max-width:130px;}
  .callout b{font-size:.86rem;}
  .callout i{font-size:.68rem;}
  .tx-row-2{flex-direction:column;align-items:center;}
  .tx-row-jar{flex-direction:column;}
  .binomial{align-items:center;text-align:center;}
}

@media (max-width:560px){
  .wordmark{font-size:clamp(2.6rem,11vw,4.4rem);}
  .chart-wrap{width:min(94vw,440px);}
  .callout{max-width:110px;font-size:.7rem;}
  .callout b{font-size:.78rem;}
  .callout i{font-size:.64rem;}
}