/* ============================================================
   memview.css — anime variant hero ("key visual")
   A full-bleed illustration decoded by the hex shader. Its lower edge
   dissolves into the page background; a giant mono masthead sits on the
   seam. A vertical tagline (hitokoto) hangs from the top-left, and a vim
   statusline closes the frame.
   Tokens come from redesign.css :root (+ the inline accent tokens).
   ============================================================ */

/* ------------------------------------------------------------------
   FRAME
   ------------------------------------------------------------------ */
.home-banner-variant-anime .home-banner-container {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  font-family: var(--font-sans);
  container-type: inline-size;
  container-name: kv;
  /* left edge of the navbar's content column — the whole poster hangs off it */
  --kv-x: max(1.5rem, calc((100cqw - 1200px) / 2 + 1.5rem));
  --kv-status: 28px;
}

/* legibility shade under the transparent navbar */
.home-banner-variant-anime .home-banner-container::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 9rem;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 62%, transparent) 0%,
    color-mix(in srgb, var(--bg) 22%, transparent) 55%,
    transparent 100%);
}

/* ------------------------------------------------------------------
   ILLUSTRATION
   ------------------------------------------------------------------ */
.hbs-illust-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.hbs-illust-panel .kv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 28%;
}
.hbs-illust-panel .kv-img-dark { display: none; }
html[data-theme="dark"] .hbs-illust-panel .kv-img-light { display: none; }
html[data-theme="dark"] .hbs-illust-panel .kv-img-dark { display: block; }

/* shader pending: keep the static image back so the decode reads as the
   entrance; reveal it late in case the shader never starts */
.hbs-illust-panel[data-shader="pending"]:not([data-hex-active]) .kv-img {
  opacity: 0;
  animation: kv-img-late .7s ease 2.4s forwards;
}
@keyframes kv-img-late { to { opacity: 1; } }
.hbs-illust-panel[data-hex-active] .kv-img { visibility: hidden; }

/* no shader: fake the dissolve with a plain fade into the page */
.hbs-illust-panel:not([data-shader])::after,
.hbs-illust-panel[data-shader="off"]::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 14%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    var(--bg) 10%,
    color-mix(in srgb, var(--bg) 70%, transparent) 42%,
    transparent 100%);
}
.hbs-illust-panel[data-shader="off"] .kv-img { opacity: 1; animation: none; }

/* shader canvas */
#hex-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  border: 0;
}
#hex-hero-canvas.hex-boot-pending { opacity: 0; }

/* legacy home-banner.styl: blur while pulling, fade out in reading mode */
.page-container.home-banner-pulling .home-banner-variant-anime .home-banner-background,
.page-container .home-banner-variant-anime .home-banner-background { filter: none !important; }
.page-container.home-banner-reading .home-banner-variant-anime .home-banner-background {
  opacity: 1;
  pointer-events: auto;
}
.page-container.home-banner-pulling .home-banner-variant-anime .home-banner-container {
  transform: none;
}

/* ------------------------------------------------------------------
   MASTHEAD
   ------------------------------------------------------------------ */
.kv-title {
  position: absolute;
  left: var(--kv-x);
  right: var(--kv-x);
  bottom: calc(var(--kv-status) + clamp(1.25rem, 5vh, 3.25rem));
  z-index: 10;
  pointer-events: none;
  transform: translateY(calc(var(--banner-pull-progress, 0) * -28px));
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}

.kv-sub {
  margin: 0 0 clamp(.6rem, 1.6vh, 1.1rem) .12em;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--text-2);
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.kv-sub-mark { color: var(--accent); }
/* no masthead: the subtitle is alone on the dissolve band, so cut it out of
   the hex with a plate of page colour instead of letting digits run through */
.kv-title-bare {
  bottom: calc(var(--kv-status) + .65rem);
}
.kv-title-bare .kv-sub {
  display: inline-block;
  margin: 0;
  padding: .3rem .65rem .32rem .5rem;
  background: var(--bg);
  color: var(--text-2);
}
.kv-title-bare .kv-social { margin-top: .5rem; }

.kv-mast {
  --kv-w: calc(100cqw - 2 * var(--kv-x));
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: min(15rem, calc(var(--kv-w) / (var(--n, 11) * .57 + .9)));
  line-height: .84;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--text);
  font-feature-settings: 'liga' 0, 'calt' 0, 'zero' 0;
  font-variant-ligatures: none;
}

/* one orchestrated moment: the name is typed in while the shader decodes */
.kv-word {
  display: inline-block;
  animation: kv-type .95s steps(var(--n, 11), end) .45s both;
}
.kv-cursor {
  display: inline-block;
  width: .5em;
  height: .72em;
  margin-left: .08em;
  background: var(--accent);
  vertical-align: baseline;
  /* the caret rides the typed edge. Animated through margin, not transform:
     a transform animation here got its own compositor layer and painted a
     strip of the statusline background over the top of the WebGL canvas. */
  animation:
    kv-run .95s steps(var(--n, 11), end) .45s both,
    kv-blink 1.1s steps(1, end) 1.6s infinite;
}
@keyframes kv-type {
  from { clip-path: inset(-.2em 100% -.2em 0); }
  to   { clip-path: inset(-.2em 0 -.2em 0); }
}
@keyframes kv-run {
  from { margin-left: calc(.08em - var(--n, 11) * (1ch - .03em)); }
  to   { margin-left: .08em; }
}
@keyframes kv-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.kv-social {
  display: flex;
  gap: .9rem;
  margin-top: 1rem;
  pointer-events: auto;
}
.kv-social a {
  color: var(--text-mute);
  font-size: 15px;
  text-decoration: none;
  transition: color .15s ease;
}
.kv-social a:hover,
.kv-social a:focus-visible { color: var(--accent); }

/* ------------------------------------------------------------------
   VERTICAL TAGLINE (hitokoto) — an obi hung off the left edge of the
   frame, outside the content column, so it frames the picture instead of
   competing with it. A low-chroma band keeps the line readable over any
   part of the illustration; only the seal carries the accent.
   ------------------------------------------------------------------ */
.kv-tagline {
  --kv-obi: color-mix(in srgb, var(--accent) 30%, #141418);
  --kv-obi-ink: #efe6ea;
  --kv-obi-mute: color-mix(in srgb, #efe6ea 62%, transparent);
  position: absolute;
  top: calc(4rem + clamp(.5rem, 2vh, 1.25rem));
  left: clamp(.75rem, 1.4vw, 1.5rem);
  z-index: 10;
  margin: 0;
  padding: 1rem .4rem 1.9rem .35rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: block;
  background: color-mix(in srgb, var(--kv-obi) 90%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--kv-obi-ink);
}
html:not([data-theme="dark"]) .kv-tagline {
  --kv-obi: color-mix(in srgb, var(--accent) 10%, #fff);
  --kv-obi-ink: #2a1f25;
  --kv-obi-mute: color-mix(in srgb, #2a1f25 58%, transparent);
}
/* the band's seal: the same block cursor as the navbar prompt */
.kv-tagline::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: .8rem;
  width: .4rem;
  height: .4rem;
  margin-left: -.2rem;
  background: var(--accent);
}
.kv-tagline .hk-text {
  margin: 0;
  max-inline-size: min(42vh, 23rem);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .3em;
  color: var(--kv-obi-ink);
  quotes: none;
}
.kv-tagline .hk-from {
  margin: 0;
  margin-inline-start: 3.2em;
  max-inline-size: min(34vh, 19rem);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .18em;
  color: var(--kv-obi-mute);
}
.kv-tagline .hk-from:empty { display: none; }

/* the fallback / API sentence is not CJK: set it horizontally instead */
.kv-tagline[data-latin] {
  writing-mode: horizontal-tb;
  max-width: 28ch;
  padding: .8rem 1rem .9rem;
}
.kv-tagline[data-latin]::after { display: none; }
.kv-tagline[data-latin] .hk-text {
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: 0;
  max-inline-size: none;
}
.kv-tagline[data-latin] .hk-from {
  margin: .45rem 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .02em;
}

/* masthead switched off (home_banner.masthead: false): keep the title for
   screen readers and the outline */
.kv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   NAVBAR on top of the poster
   (beats redesign.css' grey band: rgba(20,18,25,.28) !important)
   ------------------------------------------------------------------ */
html[data-page="home"][data-home="anime"]:not([data-scrolled]) body .navbar {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-page="home"][data-home="anime"]:not([data-scrolled]) body .navbar .brand .path,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) body .navbar .brand .prompt,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) body .navbar .nav-links a,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) body .navbar .nav-link-button,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) body .navbar .icon-btn {
  color: var(--text);
  text-shadow: none;
}
html[data-page="home"][data-home="anime"]:not([data-scrolled]) body .navbar .nav-links a[aria-current]::before,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) body .navbar .nav-link-group[data-active="true"] > .nav-link-button::before,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) body .navbar .brand .cursor {
  background: var(--accent);
  color: var(--accent);
}

/* ------------------------------------------------------------------
   PARTICLES (non-shader fallback)
   ------------------------------------------------------------------ */
.home-banner-variant-anime .home-banner-container .hero-particles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   VIM STATUSLINE
   ------------------------------------------------------------------ */
.home-banner-statusline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--kv-status, 28px);
  padding: 0 var(--kv-x, 1.5rem);
  background: var(--bg);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: .01em;
  font-feature-settings: 'liga' 0, 'calt' 0;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: color .15s ease;
  --_pull: var(--banner-pull-progress, 0);
}
.home-banner-statusline:hover,
.home-banner-statusline:focus-visible { color: var(--text); }
.home-banner-statusline:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* pull progress fills the line from the left */
.home-banner-statusline::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  height: 1px;
  width: calc(var(--_pull) * 100%);
  background: var(--accent);
  pointer-events: none;
  transition: width .08s linear;
}
.hbs-left,
.hbs-right {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.hbs-left  { overflow: hidden; min-width: 0; }
.hbs-right { flex-shrink: 0; }
.hbs-mode {
  margin-right: .9em;
  padding: 0 .6em;
  line-height: 18px;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: #141418;
  background: var(--accent);
}
.hbs-path  { color: var(--text); font-weight: 500; }
.hbs-count { color: var(--text-2); }
.hbs-since { color: var(--text-faint); }
.hbs-sep   { color: var(--text-faint); margin: 0 .55em; }
.hbs-key {
  margin-right: .4em;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 0 4px;
  font-size: 10.5px;
  line-height: 15px;
}
.hbs-readlabel { color: var(--text-faint); }
.hbs-pct       { color: var(--text-2); }

/* pointer inspector (hexHero.js fills this slot) */
.hbs-inspect {
  display: flex;
  align-items: center;
  gap: .6em;
  min-width: 0;
  opacity: 0;
  transition: opacity .15s ease;
  color: var(--text-mute);
}
.hbs-inspect[data-on] { opacity: 1; }
.hbs-inspect .hi-hex   { color: var(--accent); font-weight: 600; }
.hbs-inspect .hi-sep   { color: var(--text-faint); }
.hbs-inspect .hi-color { color: var(--text-2); }
.hbs-inspect .hi-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1px solid var(--border);
}

/* stand-alone inspector (when the slot is missing) */
#hex-inspector {
  position: fixed;
  pointer-events: none;
  z-index: 40;
  display: none;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
  transform: translate(14px, -110%);
}
#hex-inspector[data-on] { display: block; }
#hex-inspector .hi-hex { color: var(--accent); }

/* crosshair over the decoded image */
.home-banner-container:has(#hex-hero-canvas) { cursor: crosshair; }
.home-banner-container:has(#hex-hero-canvas) .kv-tagline,
.home-banner-container:has(#hex-hero-canvas) .home-banner-statusline { cursor: default; }
.home-banner-container:has(#hex-hero-canvas) .home-banner-statusline { cursor: pointer; }

/* ------------------------------------------------------------------
   NARROW SCREENS
   ------------------------------------------------------------------ */
@container kv (max-width: 760px) {
  .hbs-inspect,
  .hbs-since,
  .hbs-since + .hbs-sep,
  .hbs-readlabel { display: none; }
}

@media (max-width: 640px) {
  .home-banner-variant-anime .home-banner-container {
    --kv-x: 1.1rem;
    min-height: 32rem;
  }
  /* two-line masthead: size by the longest word */
  .kv-mast {
    white-space: normal;
    font-size: min(8rem, calc(var(--kv-w) / (var(--nw, 6) * .57 + .9)));
    line-height: .88;
  }
  .kv-word { animation: none; clip-path: none; display: inline; }
  .kv-cursor { animation: kv-blink 1.1s steps(1, end) .6s infinite; }
  .kv-tagline { top: calc(3.5rem + .5rem); left: .6rem; padding: .85rem .3rem 1.6rem .28rem; }
  .kv-tagline::after { bottom: .65rem; width: .34rem; height: .34rem; margin-left: -.17rem; }
  .kv-tagline .hk-text {
    font-size: 13px;
    letter-spacing: .24em;
    max-inline-size: 36vh;
  }
  .kv-tagline .hk-from { font-size: 10.5px; max-inline-size: 28vh; }
  .hbs-mode { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kv-word,
  .kv-cursor { animation: none; clip-path: none; transform: none; }
  .hbs-illust-panel[data-shader="pending"]:not([data-hex-active]) .kv-img {
    animation: none;
    opacity: 1;
  }
}

/* ------------------------------------------------------------------
   LEGACY GUARDS
   ------------------------------------------------------------------ */
.home-banner-variant-anime .home-banner-container .description { display: none !important; }
.home-banner-variant-anime .home-banner-container > .hitokoto { display: none; }
.home-banner-variant-anime .home-banner-background.transition-fade:not(.hbs-illust-panel) { display: none !important; }
.home-banner-variant-anime .home-banner-content-shell { display: none !important; }
.home-banner-variant-anime .home-banner-social-row { display: none !important; }