/* The news bar above the nav (src/components/NewsBar.astro): heatmaps.
   Near black, as the Black Friday bar's black look; the heat in the
   Analytics hero's colours (HeatDefs.astro, heat.ts's reachColour). */
.news {
  --news-h: 40px;
  --news-seen: 0%;
  --news-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --news-scroll: linear-gradient(90deg, #ff8074 0%, #ffb74d 25%, #ffe066 50%, #8ee4a5 75%, #8fb5ff 100%);
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  color: #fff;
  background:
    radial-gradient(45% 160% at 50% 150%, rgb(35 71 255 / .2) 0%, rgb(35 71 255 / 0) 70%),
    linear-gradient(180deg, #131519 0%, #0b0c0f 100%);
  font: 400 13.5px/1.4 var(--font-ui);
  letter-spacing: -.004em;
}
.news::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 200px 200px;
  opacity: .12;
}
.news.is-closing { transition: height .26s cubic-bezier(.2, .8, .3, 1); }

/* the bar's own click heatmap (news.js), under the drawer too: news.js
   makes it as tall as the bar with the drawer open */
.news__heat {
  position: absolute; top: 0; left: 0; z-index: 0;
  display: block; width: 100%; height: var(--news-h);
  pointer-events: none;
  opacity: .6; mix-blend-mode: screen;
}

.news__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  min-height: var(--news-h);
}
.news__toggle {
  flex: 1; min-width: 0; min-height: var(--news-h);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 36px;
  background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit;
  text-align: left; cursor: pointer;
  text-shadow: 0 0 10px rgb(11 12 15 / .6), 0 1px 2px rgb(11 12 15 / .5);
}
.news__pill {
  flex: none;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(#17191e, #17191e) padding-box, linear-gradient(90deg, #8fb5ff, #8ee4a5, #ffe066, #ffb74d, #ff8074) border-box;
  font: 500 11.5px/1 var(--font-ui); color: #fff;
  text-shadow: none;
}
.news__msg { min-width: 0; color: rgb(255 255 255 / .84); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news__msg b { font-weight: 500; color: #fff; }
.news__msg--mid, .news__msg--short { display: none; }

.news__more {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  font-weight: 500; color: rgb(255 255 255 / .86);
  transition: color .15s ease;
}
.news__more svg { width: 15px; height: 15px; transition: transform .22s ease; }
.news__toggle:hover .news__more { color: #fff; }
.news__toggle:hover .news__more svg { transform: translateY(1px); }
.news.is-open .news__more { color: #fff; }
.news.is-open .news__more svg { transform: rotate(180deg); }

.news__close {
  position: absolute; top: calc(var(--news-h) / 2); right: calc(var(--gutter) - 6px);
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px;
  background: none; color: rgb(255 255 255 / .6); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.news__close svg { width: 16px; height: 16px; }
.news__close:hover { background: rgb(255 255 255 / .1); color: #fff; }

.news__toggle:focus-visible, .news__close:focus-visible, .news__go:focus-visible {
  outline: 2px solid #fff; outline-offset: -2px;
}
.news__go:focus-visible { outline-offset: 2px; }

/* the bottom edge: how far this visitor has scrolled, in the scroll map's colours */
.news__depth {
  position: absolute; left: 0; right: 0; top: calc(var(--news-h) - 2px); z-index: 1;
  height: 2px; background: rgb(255 255 255 / .06);
  pointer-events: none;
}
.news__depth b {
  position: absolute; inset: 0;
  background: var(--news-scroll);
  clip-path: inset(0 calc(100% - var(--news-seen)) 0 0);
  transition: clip-path .6s cubic-bezier(.2, .8, .3, 1);
}

.news__drawer {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .34s cubic-bezier(.2, .8, .3, 1), visibility .34s;
}
.news.is-open .news__drawer { grid-template-rows: 1fr; visibility: visible; }
.news__drawer-in { min-height: 0; overflow: hidden; }

.news__body {
  display: grid; grid-template-columns: minmax(0, 1fr) 470px 214px; gap: 48px;
  align-items: center;
  padding-top: 24px; padding-bottom: 28px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .3, 1);
}
.news.is-open .news__body { opacity: 1; transform: none; transition-delay: .06s; }

.news__eyebrow {
  margin: 0 0 10px; width: fit-content;
  font: 500 12.5px/1.2 var(--font-ui);
  background: linear-gradient(90deg, #ff8074, #ffe066); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.news__title {
  margin: 0; max-width: 440px;
  font: 300 24px/1.2 var(--font-display); letter-spacing: -.014em;
  text-wrap: balance;
}
.news__sub {
  margin: 10px 0 0; max-width: 440px;
  font: 400 13.5px/1.55 var(--font-ui); color: rgb(255 255 255 / .72);
  text-wrap: pretty;
}

/* the drawer's words over its heat, as the bar's */
.news__title, .news__sub, .news__view figcaption, .news__you {
  text-shadow: 0 0 10px rgb(11 12 15 / .6), 0 1px 2px rgb(11 12 15 / .5);
}

/* the three pictures: the Analytics hero's page, drawn small */
.news__views { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 14px; align-items: start; }
.news__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.news__view { margin: 0; min-width: 0; }
.news__shot {
  position: relative; overflow: hidden;
  aspect-ratio: 1000 / 660; border-radius: 8px;
  background: #16181d;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
}
.news__shot > svg { display: block; width: 100%; height: 100%; border-radius: inherit; }
.news__view figcaption { margin-top: 9px; display: grid; gap: 2px; }
.news__view figcaption b { font: 500 12.5px/1.3 var(--font-ui); color: #fff; }
.news__view figcaption span { font: 400 12px/1.35 var(--font-ui); color: rgb(255 255 255 / .6); text-wrap: pretty; }

.np-paper { fill: #17191e; }
.np-bone  { fill: rgb(255 255 255 / .09); }
.np-ink   { fill: rgb(255 255 255 / .2); }
.np-card  { fill: rgb(255 255 255 / .035); stroke: rgb(255 255 255 / .08); stroke-width: 4; }
.np-field { fill: rgb(255 255 255 / .03); stroke: rgb(255 255 255 / .2); stroke-width: 5; }
.np-blue  { fill: #4f6fff; }
.np-star  { fill: rgb(255 205 90 / .6); }
.np-photo { fill: rgb(255 255 255 / .05); }

.news__mark { --mark: #ff5c7a; transform-box: fill-box; transform-origin: center; }
.news__mark--dead { --mark: #f5a524; }
.news__circle { fill: color-mix(in oklab, var(--mark) 18%, transparent); stroke: var(--mark); stroke-width: 8; }
.news__mark--dead .news__circle { stroke-dasharray: 16 11; }
.news__dot { fill: var(--mark); }
.news__ring {
  fill: none; stroke: var(--mark); stroke-width: 8;
  transform-box: fill-box; transform-origin: center;
}
.news.is-open .news__ring { animation: news-ring 1.6s ease-out infinite; }
@keyframes news-ring { from { opacity: .8; scale: 1; } to { opacity: 0; scale: 2; } }

.news__view--scroll .news__shot { background: none; box-shadow: none; overflow: visible; }
.news__strip { position: relative; height: 100%; aspect-ratio: 1000 / 1800; }
.news__page {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 6px; background: #16181d;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
}
.news__page svg { display: block; width: 100%; height: 100%; }
.news__map { position: absolute; inset: 0; opacity: .6; }
.news__fold {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed rgb(255 255 255 / .75);
}
.news__reach {
  position: absolute; top: 0; bottom: 0; left: 100%;
  margin: 0; padding: 0; list-style: none;
}
.news__reach li {
  position: absolute; left: 0;
  display: flex; align-items: center; gap: 5px;
  padding-left: 0;
  font: 500 10px/1 var(--news-mono); color: rgb(255 255 255 / .78);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transform: translateY(1px);
}
.news__reach li i { display: block; width: 8px; height: 1px; opacity: .9; }

/* the drawer's pictures come in as it opens */
.news.is-open .news__blobs { animation: news-develop 1.2s .12s cubic-bezier(.2, .8, .3, 1) both; }
.news.is-open .news__mark { animation: news-pop .45s calc(.3s + var(--k) * .14s) cubic-bezier(.3, 1.4, .5, 1) both; }
.news.is-open .news__map { animation: news-wipe 1s .2s cubic-bezier(.4, 0, .2, 1) both; }
.news.is-open .news__reach li { animation: news-fade .3s calc(.25s + var(--k) * .15s) ease both; }
@keyframes news-develop { from { opacity: 0; } }
@keyframes news-pop { from { opacity: 0; scale: .3; } }
@keyframes news-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes news-fade { from { opacity: 0; } }

/* your visit so far (news.js counts it, nothing leaves the browser) */
.news__buy { display: flex; flex-direction: column; align-items: flex-start; }
.news__you { width: 100%; }
.news__you-title { margin: 0 0 6px; font: 500 12.5px/1.2 var(--font-ui); color: rgb(255 255 255 / .6); }
.news__seen { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.news__pct { font: 300 40px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.news__seen > span + span { font: 400 13px/1.3 var(--font-ui); color: rgb(255 255 255 / .6); }
.news__counts { margin: 12px 0 0; display: grid; gap: 4px; }
.news__counts div { display: flex; justify-content: space-between; gap: 16px; }
.news__counts dt { font: 400 12.5px/1.4 var(--font-ui); color: rgb(255 255 255 / .62); }
.news__counts dd {
  margin: 0; min-width: 2ch; text-align: right;
  font: 500 12px/1.45 var(--news-mono); color: #fff; font-variant-numeric: tabular-nums;
}
.news__counts dd.is-bump { animation: news-bump .7s ease-out; }
@keyframes news-bump { from { color: #ffe066; } }
.news__note { margin: 8px 0 16px; font: 400 11.5px/1.4 var(--font-ui); color: rgb(255 255 255 / .45); }
.news__go {
  background: #fff; color: var(--ink-nav);
  box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 10px 24px -10px rgb(0 0 0 / .6);
}
.news__go:hover { background: #ededf0; }

.news.is-idle .news__ring { animation-play-state: paused; }

@media (max-width: 1140px) {
  .news__msg--long { display: none; }
  .news__msg--mid { display: inline; }
  .news__body { grid-template-columns: minmax(0, 1fr) 420px 200px; gap: 36px; }
}

@media (max-width: 960px) {
  .news__body { grid-template-columns: minmax(0, 1fr) 200px; gap: 24px 40px; }
  .news__copy { grid-column: 1 / -1; }
  .news__title, .news__sub { max-width: 560px; }
}

@media (max-width: 900px) {
  body:has(.news:not([hidden])) .nav__links { max-height: calc(100dvh - 64px - 52px); }
}

@media (max-width: 720px) {
  .news { --news-h: 52px; font-size: 13px; }
  .news__toggle { justify-content: flex-start; gap: 10px; padding: 0 36px 0 0; }
  .news__pill, .news__msg--mid { display: none; }
  .news__msg--short { display: flex; flex-direction: column; line-height: 1.3; }
  .news__msg--short > span:first-child { font-weight: 500; color: #fff; }
  .news__msg--short > span + span { font-size: 12px; }
  .news__more { font-size: 0; }
  .news__more svg { width: 16px; height: 16px; }
  .news__body { grid-template-columns: 1fr; gap: 22px; padding-top: 20px; padding-bottom: 22px; }
  .news__title { font-size: 21px; }
  .news__views { gap: 10px; }
  .news__view figcaption span { display: none; }
  .news__buy { display: grid; grid-template-columns: 1fr; }
  .news__go { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .news__drawer, .news__body, .news__more svg, .news__depth b { transition: none; }
  .news.is-open :is(.news__blobs, .news__mark, .news__map, .news__reach li, .news__ring),
  .news__counts dd.is-bump { animation: none; }
}