/* ═══════════════════════════════════════════════════════════
   artist.css — shared styles for all 70 Seeds artist pages
   ═══════════════════════════════════════════════════════════ */

/* ── Script fonts (self-hosted in /fonts) ────────────────── */
/* unicode-range means a page only downloads these when its copy
   actually has Hebrew or Arabic. JS wraps those runs in
   .script-he / .script-ar (see appendScriptRuns in artist.js). */
@font-face {
  font-family: 'Miriam Libre';
  src: url('../fonts/Miriam_Libre/MiriamLibre-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Kawkab Mono';
  src: url('../fonts/Kawkab_Mono/KawkabMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Kawkab Mono';
  src: url('../fonts/Kawkab_Mono/KawkabMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;                    /* scroll lock: page never scrolls */
  font-family: 'Lexend', Arial, sans-serif;
  background: #1a1008;
}

/* ── Dirt background ─────────────────────────────────────── */
#bg {
  position: fixed; inset: 0;
  z-index: 0;
  overflow: hidden;
  /* PNG fallback while canvas loads */
  background: #1a1008;
}

#bg canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;   /* clicks pass through to #click-catcher */
  user-select: none;
  -webkit-user-select: none;
}

/* ── Click catcher ───────────────────────────────────────── */
/* Full-viewport transparent div at low z-index.
   Kept as a z-index spacer. Corner actions are now handled
   directly by .corner-btn elements at z-index 15. */
#click-catcher {
  position: fixed; inset: 0;
  z-index: 5;
  cursor: default;
}

/* ── Seed SVG (full screen) ──────────────────────────────── */
#seed-svg {
  position: fixed; inset: 0;
  /* 100% of the visible window, NOT 100vh: on mobile 100vh includes the area
     behind the browser's address bar, which made the seed taller than the
     splat's clip (splat-layer + clip use the visible window / innerHeight)
     and left a seed-shaped green sliver under splats. */
  width: 100%; height: 100%;
  z-index: 10;
  pointer-events: none;               /* clicks pass through to click-catcher */
  display: block;
}

/* ── Corner button wrappers ──────────────────────────────── */
/* Wrappers are sized by their content (the .corner-stack inside).
   pointer-events: none on wrapper; the stack is the hitbox. */
.corner-arrow-wrap {
  position: fixed;
  z-index: 15;
  pointer-events: none;
}

/* Bottom wraps stay bottom-anchored: when a counter appears below
   the label, the wrap grows upward and the green button raises so
   the black bar stays fully on-screen. */
#arrow-tl { top:    2.5vh; left:  2.5vw; }
#arrow-tr { top:    2.5vh; right: 2.5vw; }
#arrow-bl { bottom: 2.5vh; left:  2.5vw; }
#arrow-br { bottom: 2.5vh; right: 2.5vw; }

.corner-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  pointer-events: auto;
  cursor: pointer;
}

/* Breathe animation — animates font-size so the layout box
   (and therefore pointer-events hit area) tracks the visual. */
@keyframes btn-breathe {
  0%, 100% { font-size: var(--btn-font-base, 60px); }
  50%       { font-size: calc(var(--btn-font-base, 60px) * 1.12); }
}

.corner-btn {
  display:         block;
  font-family:     monospace;
  font-size:       var(--btn-font-base, 60px);
  line-height:     1;
  /* padding = 1/6 em each side: with line-height:1 this gives
     total height = font + 2*(font/6) = 8/6 * font = 8 cellH,
     text fraction = 6/8 = 75% — matching background proportions. */
  padding:         0.167em;
  text-align:      center;
  color:           #1A0F0C;
  background:      #81BB52;
  white-space:     nowrap;
  user-select:     none;
  -webkit-user-select: none;
  animation:       btn-breathe 3.5s ease-in-out infinite;
}
.corner-stack:hover .corner-btn {
  color:      #81BB52;
  background: #1A0F0C;
}

/* Page index — only shown when this mode is active and has 2+ pages.
   Same width as the label (stack stretch); type centered on the label. */
.corner-counter {
  display:         none;
  font-family:     monospace;
  font-size:       var(--btn-font-base, 60px);
  line-height:     1;
  padding:         0.167em;
  text-align:      center;
  color:           #81BB52;
  background:      #1A0F0C;
  white-space:     nowrap;
  user-select:     none;
  -webkit-user-select: none;
}
.corner-counter.visible {
  display: block;
}

/* ── Seed content area ───────────────────────────────────── */
/* Inset so text stays well within the bean outline.
   Padding inside each mode provides additional clearance. */
#seed-content {
  position: fixed;
  inset: 20%;
  z-index: 20;
  pointer-events: auto;
  cursor: default;
  overflow: hidden;                   /* only inner text div scrolls */
  display: flex;
  flex-direction: column;
  font-family: monospace;
}
/* Splat slides: content box must not steal orbit drags (corners stay z 15). */
#seed-content.splat-pass-through {
  pointer-events: none;
}

/* ── Content modes ───────────────────────────────────────── */
.content-mode {
  display: none;
  width: 100%; height: 100%;
  flex-direction: column;
}
.content-mode.active { display: flex; }

/* Text mode */
#mode-text {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.6em 1em 1.5em;
}

/* Art image mode */
#mode-art {
  align-items: center;
  justify-content: center;
}
#mode-art img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Ephemera mode */
#mode-ephemera {
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #1C0F0C;
  font-size: clamp(12px, 2.2vmin, 20px);
  font-weight: 700;
  padding: 1em;
}
#mode-ephemera:not(:has(img)) {
  opacity: 0.5;
}
#ephemera-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mode-ephemera img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
}
/* media.image_scale: a scaled still may extend past the content box (into the seed) */
#seed-content.ephemera-scaled { overflow: visible; }
#seed-content.ephemera-scaled #mode-ephemera img { pointer-events: none; }

/* ── Text field styles ───────────────────────────────────── */
/* Text color = bean outline color (#1C0F0C), on green gradient seed */

.field { margin-bottom: calc(1em * var(--text-fit, 1)); }
.field:last-child { margin-bottom: 0; }
.field p + p { margin-top: calc(0.7em * var(--text-fit, 1)); }

#text-inner { --text-fit: 1; }

/* Page headline: artist name (1/3, 2/3), "… Imagines 2070" (3/3) */
.field-artist-name p,
.field-dream-title p {
  font-size:   calc(clamp(16px, 3.8vmin, 30px) * var(--text-fit, 1));
  font-weight: 700;
  line-height: 1.2;
  color:       #1C0F0C;
}

/* Artwork title (2/3): same size as the section titles (Artwork Description), bold italic */
.field-artwork-works p.work-title {
  font-size:   calc(clamp(14px, 2.8vmin, 22px) * var(--text-fit, 1));
  font-weight: 700;
  font-style:  italic;
  line-height: 1.25;
  color:       #1C0F0C;
}

/* Section titles (Biography, Artist Statement, Artwork Description) */
.field-artist-bio-title p,
.field-artist-statement-title p,
.field-artwork-description-title p {
  font-size:   calc(clamp(14px, 2.8vmin, 22px) * var(--text-fit, 1));
  font-weight: 700;
  line-height: 1.25;
  color:       #1C0F0C;
}

/* Location / artwork medium → caption */
.field-artist-location p,
.field-artwork-works p.work-info {
  font-size:   calc(clamp(11px, 2vmin, 16px) * var(--text-fit, 1));
  font-weight: 400;
  line-height: 1.45;
  color:       #1C0F0C;
  opacity:     0.78;
}

/* Bio / statement / description / dream → body text */
.field-artist-bio p,
.field-artist-statement p,
.field-artwork-description p,
.field-artwork-works p.work-text,
.field-dream-answer p {
  font-size:   calc(clamp(11px, 1.9vmin, 16px) * var(--text-fit, 1));
  font-weight: 400;
  line-height: 1.65;
  color:       #1C0F0C;
}

/* 2/3 works list: medium sits directly under its title */
.field-artwork-works .work p + p { margin-top: 0; }
.field-artwork-works .work + .work { margin-top: calc(0.7em * var(--text-fit, 1)); }

/* 3/3 answer: the background's monospace, highlighted in that artist's
   bgColor / textColor from artist/dirt_text/artists_v2.json */
.field-dream-answer.highlighted p { font-family: monospace; }
.field-dream-answer .hl {
  background: var(--hl-bg);
  color:      var(--hl-fg);
  padding:    0.12em 0.3em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Inline markup from JSON (artist.js appendInline) */
.field a {
  color:           inherit;
  text-decoration: underline;
  overflow-wrap:   anywhere;
}
.field a:hover { opacity: 0.65; }
.script-he { font-family: 'Miriam Libre', 'Lexend', Arial, sans-serif; }
.script-ar { font-family: 'Kawkab Mono', monospace; font-style: normal; }

/* Numbered subheads inside a body field ("1. Tree Stumps") */
.field p.subhead {
  font-size:   calc(clamp(12px, 2.2vmin, 18px) * var(--text-fit, 1));
  font-weight: 700;
  line-height: 1.3;
}


/* ── Splat TV-screen ─────────────────────────────────────── */
/* Injected by ensureSplatScreenDom() on splat artists + workshop.
   z 12 = above seed fill (10), below outline overlay (13) and
   corners (15). Clip-path is set in JS from the live seed path. */
#splat-layer {
  position: fixed;
  inset: 0;
  z-index: 12;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
}
#splat-layer.active {
  pointer-events: auto;
}
#splat-layer canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

#seed-outline-overlay {
  position: fixed;
  inset: 0;
  width: 100%;              /* same box as #splat-layer (see #seed-svg) */
  height: 100%;
  z-index: 13;
  pointer-events: none;
  display: none;
}
#seed-outline-overlay.visible,
body.splat-workshop.seed-preview #seed-outline-overlay {
  display: block;
}

#splat-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  pointer-events: none;
}
#splat-layer.loading #splat-loading {
  display: flex;
}

/* Library chrome — never on artist pages or the workshop seed screen. */
.progressBarOuterContainer,
[class*="spinnerOuterContainer"] {
  display: none !important;
}

.splat-loading-ring {
  width:  calc(var(--btn-font-base, 48px) * 2.4);
  height: calc(var(--btn-font-base, 48px) * 2.4);
  display: block;
}
.splat-loading-track,
.splat-loading-arc {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}
.splat-loading-track { stroke: #1C0F0C; opacity: 0.35; }
.splat-loading-arc {
  stroke: #81BB52;
  transform-origin: 32px 32px;
  transform: rotate(-90deg);
}
#splat-layer.loading-indeterminate .splat-loading-arc {
  animation: splat-loading-spin 3.5s linear infinite;
}
@keyframes splat-loading-spin {
  to { transform: rotate(270deg); }
}
.splat-loading-label {
  font-family: monospace;
  font-size:   calc(var(--btn-font-base, 48px) * 0.42);
  line-height: 1;
  color:       #1C0F0C;
  letter-spacing: 0.04em;
  animation: splat-loading-breathe 3.5s ease-in-out infinite;
}
@keyframes splat-loading-breathe {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

/* Screen-reader only */
.sr-only {
  position:  absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow:  hidden;
  clip:      rect(0,0,0,0);
  white-space: nowrap;
  border:    0;
}