/* Insight (a prototype, so far only on the unlinked lab page; insight.js). The things to find are small and quiet:
   bone skulls (Madman's Knowledge) and one violet orb (Great One's Wisdom), breathing a faint arcane violet so a
   careful eye catches them. Insight itself is the site's insight violet, as the Homebase is */
.kb { fill: #ddd3bd; } .kd { fill: #2a2433; } .iv { fill: #9b8ff0; } .iV { fill: #e4dffd; }

.mk { display: inline-grid; place-items: center; padding: 4px; margin: 0; background: none; border: 0; cursor: pointer;
  vertical-align: middle; opacity: .5; filter: drop-shadow(0 0 4px rgb(155 143 240 / .45)); transition: opacity .3s, filter .3s; }
.mk svg { width: 24px; height: auto; display: block; }
.mk.wisdom svg { width: 22px; }
.mk:hover, .mk:focus-visible { opacity: 1; filter: drop-shadow(0 0 8px rgb(155 143 240 / .9)); outline: none; }
.mk[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mk { animation: mk-breathe 4.5s ease-in-out infinite; }
  .mk:hover, .mk:focus-visible { animation: none; }
  @keyframes mk-breathe { 0%, 100% { opacity: .38; } 50% { opacity: .62; } }
}

/* the counter in the top bar: there from the start, dimmed at 0, a button that opens the readout */
.insight-c { display: inline-flex; align-items: center; gap: 7px; color: #cdc6fa; font: 400 24px/1 var(--title); cursor: pointer;
  padding: 2px 10px 2px 6px; border: 1px solid rgb(155 143 240 / .35); background: rgb(155 143 240 / .07); transition: opacity .4s; }
.insight-c svg { width: 26px; height: auto; display: block; filter: drop-shadow(0 0 5px rgb(155 143 240 / .6)); }
.insight-c:hover, .insight-c:focus-visible { border-color: rgb(155 143 240 / .7); outline: none; }
.insight-c.zero { opacity: .42; border-color: rgb(155 143 240 / .18); background: none; }
.insight-c.zero svg { filter: none; }
.insight-c.zero:hover, .insight-c.zero:focus-visible { opacity: .8; }

/* the readout: what has been found, and one line, under the eye */
.insight-pop { position: fixed; z-index: 30; display: grid; gap: 6px; min-width: 220px; max-width: min(300px, calc(100vw - 16px));
  padding: 12px 16px 10px; background: rgb(8 8 12 / .96); border: 1px solid rgb(155 143 240 / .4); box-shadow: 0 8px 30px rgb(0 0 0 / .6); }
.insight-pop[hidden] { display: none; }
.insight-pop b { font: 400 24px/1 var(--title); color: #e4dffd; letter-spacing: .04em; }
.insight-pop span { font: 500 11px/1.3 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.insight-pop q { font: italic 400 13px/1.5 var(--mono); color: #cdc6fa; quotes: none; padding-top: 6px; border-top: 1px solid rgb(155 143 240 / .2); }
.insight-pop a { font: 600 12.5px/1.4 var(--mono); color: #e4dffd; letter-spacing: .04em; }
.insight-pop a:hover { color: #fff; }

/* where the items lie: inline in a line of text, or on a line of their own */
.month-end, .prose-end, .narrow-mk { margin: 18px 0 0; text-align: center; }
.aside-mk { padding-left: 8px; }
.narrow-mk { display: none; }
@media (max-width: 900px) { .narrow-mk { display: block; } }
.first-sight { display: inline-block; width: 1px; height: 1px; }

/* the Messengers' hint note, stirring after the first find until it is read */
.note.stir { filter: drop-shadow(0 0 6px rgb(155 143 240 / .9)); }
@media (prefers-reduced-motion: no-preference) {
  .note.stir { animation: note-stir 1.6s ease-in-out infinite; }
  @keyframes note-stir { 0%, 100% { filter: drop-shadow(0 0 3px rgb(155 143 240 / .5)); } 50% { filter: drop-shadow(0 0 10px rgb(155 143 240 / 1)); } }
}
@media (prefers-reduced-motion: no-preference) {
  .insight-c.bump { animation: ic-bump 1.1s ease-out; }
  @keyframes ic-bump { 0% { box-shadow: 0 0 0 rgb(155 143 240 / 0); }
    18% { color: #fff; box-shadow: 0 0 18px rgb(155 143 240 / .9); border-color: #cdc6fa; }
    100% { box-shadow: 0 0 0 rgb(155 143 240 / 0); } }
}

/* the pick-up notice: a dark plate across the lower middle of the screen, the item's icon and name, and its worth */
.insight-got { position: fixed; z-index: 40; left: 50%; bottom: 9vh; transform: translateX(-50%); display: flex; align-items: center;
  gap: 14px; min-width: min(420px, calc(100vw - 32px)); padding: 12px 22px; pointer-events: none;
  background: linear-gradient(90deg, rgb(8 8 12 / .2), rgb(8 8 12 / .94) 18%, rgb(8 8 12 / .94) 82%, rgb(8 8 12 / .2)); }
.insight-got::before, .insight-got::after { content: ""; position: absolute; left: 4%; right: 4%; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(214 180 106 / .7), transparent); }
.insight-got::before { top: 0; } .insight-got::after { bottom: 0; }
.insight-got[hidden] { display: none; }
.ig-icon svg { width: 30px; height: auto; display: block; filter: drop-shadow(0 0 6px rgb(155 143 240 / .7)); }
.ig-name { flex: 1; font: 400 26px/1 var(--title); color: #f3ead9; letter-spacing: .04em; }
.ig-gain { font: 500 12px/1 var(--mono); color: #cdc6fa; text-transform: uppercase; letter-spacing: .14em; }
@media (prefers-reduced-motion: no-preference) {
  .insight-got.show { animation: ig-in 3.4s ease-out both; }
  @keyframes ig-in { 0% { opacity: 0; transform: translate(-50%, 8px); } 10%, 78% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); } }
}

/* crossing a tier: a violet bruise at the edges of the screen, for a moment */
html.insight-shift body::after { content: ""; position: fixed; inset: 0; z-index: 39; pointer-events: none;
  box-shadow: inset 0 0 160px 40px rgb(70 40 140 / .55); animation: ins-shift 1.8s ease-out forwards; }
@keyframes ins-shift { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* 8 Insight: the Amygdala. One clings to the cathedral in the Wrapped's Yharnam skyline (amygdala_clinging), drawn in
   the city's black; one reaches up from the bottom of the landing page's first screen (amygdala_peeking), a shade
   lighter than the night with a faint violet rim so it can be made out, and gone once the page scrolls */
/* the sky layer is four times the city's height (22% of the glass) with the same bottom edge and slice, so the two
   scale together and it stays on the cathedral */
.boot .bm-amyg { position: absolute; left: 0; bottom: 0; width: 100%; height: 88%; pointer-events: none; }
.amyg { color: #050509; opacity: 0; }
/* the eye holes in its head: a faint ember in each, as in the game's art */
.amyg-eye { fill: #d0602e; stroke: none; opacity: .75; }
/* in the boot it can't be seen until there's a sky behind it: its body is the city's black, and the sky comes up from
   black over the first few seconds. So it emerges once the clouds are in, and its eyes open after that */
@media (prefers-reduced-motion: no-preference) {
  html.insight-8 .boot.on .amyg { animation: amyg-emerge 5s ease-in 4.5s forwards; }
  html.insight-8 .boot.on .amyg-eye { opacity: 0; animation: amyg-eyes 2.5s ease-out 8.5s forwards; }
  @keyframes amyg-emerge { to { opacity: 1; } }
  @keyframes amyg-eyes { 0% { opacity: 0; } 40% { opacity: .9; } 100% { opacity: .75; } }
}
@media (prefers-reduced-motion: reduce) { html.insight-8 .amyg { opacity: 1; } }
.land-amyg .amyg-eye { opacity: .55; }
.land-amyg { display: none; position: fixed; right: 3vw; bottom: -4px; z-index: -1; width: clamp(240px, 28vw, 420px); height: auto;
  color: #150f24; filter: drop-shadow(0 0 7px rgb(155 143 240 / .35)); pointer-events: none; transition: opacity .6s; }
html.insight-8 .land-amyg { display: block; }
body.scrolled .land-amyg { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.insight-8 .land-amyg { animation: amyg-rise 4s ease-out both; }
  @keyframes amyg-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 560px) { .land-amyg { display: none !important; } }

/* 15 Insight: the blood moon over the landing page (moon_face, tinted and glowing as in wrapped-bloodmoon.css), high
   behind the hero on the right */
.land-moon { display: none; position: absolute; z-index: -1; top: 84px; right: max(16px, calc((100% - 1180px) / 2 + 16px));
  width: clamp(110px, 13vw, 210px); pointer-events: none; }
html.insight-15 .land-moon { display: block; }
.land-moon .bm-moon { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate; opacity: .6;
  box-shadow: 0 0 36px rgb(232 96 58 / .45), 0 0 110px rgb(196 52 34 / .28), 0 0 240px rgb(160 30 24 / .16); }
.land-moon .bm-moon svg { display: block; width: 100%; height: 100%; }
.land-moon .bm-moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: multiply;
  background: radial-gradient(circle at 46% 44%, #ffe0c2 0%, #f8a070 24%, #e2572f 52%, #b52a1c 78%, #6e1210 100%); }
@media (prefers-reduced-motion: no-preference) {
  html.insight-15 .land-moon { animation: land-moon-rise 6s cubic-bezier(.16, .6, .28, 1) both; }
  @keyframes land-moon-rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
}

/* the lane pages' two tiles seen at 8 Insight, under the three highlights, in the arcane violet */
.stats.three.lane-deep { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.lane-deep b { color: #cdc6fa; text-shadow: 0 0 14px rgb(155 143 240 / .4); }
@media (max-width: 900px) { .stats.three.lane-deep { grid-template-columns: 1fr; } }

/* the Hunter's Nightmare: every lesson, lane by lane */
.nightmare .wu-head h1 { color: #e4dffd; text-shadow: 0 0 30px rgb(155 143 240 / .35); }
.nm-lane { margin-top: 40px; }
.nm-lane h2 { font-size: 40px; color: #f3ead9; }
.nm-lane ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.nm-lane li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding: 8px 10px;
  border-left: 2px solid transparent; }
.nm-lane li:hover { background: rgb(155 143 240 / .05); border-left-color: rgb(155 143 240 / .5); }
.nm-l { color: var(--fg); } .nm-l code { font: 400 .9em/1.4 var(--mono); color: #cdc6fa; }
.nm-d { font: 500 11.5px/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
@media (max-width: 700px) { .nm-lane li { grid-template-columns: 1fr; gap: 4px; } }
[data-insight-below][hidden] { display: none !important; }

/* held back until their tier */
[data-insight-min][hidden] { display: none !important; }