/* Speech-bubble presentation, shared by every surface that draws lettering.
   ADR 0019 put the bubble GEOMETRY in one module (static/js/comic-bubbles.js);
   this is the matching half for its LOOK, extracted out of the parallax
   stylesheet on 2026-08-22 so the page/webtoon viewer can draw the same balloon
   instead of growing a second, drifting copy of it. */

:root {
  --bubble-fill: #FBF6EA;   /* warm cream paper (bubble-demo.html) */
  --bubble-ink: #1B1612;    /* near-black ink for text + outline */
  --bubble-outline: #1B1612;
}

/* ---- Speech bubbles -------------------------------------------------- */

/* The bubble is a transparent, shrink-to-fit box; the SVG draws the balloon
   (cream fill + ink outline + soft shadow) behind the serif text — the
   bubble-demo.html look, made parametric in renderer.js. */
.bubble {
  position: absolute;
  z-index: 10;
  display: inline-block;       /* shrink-wrap the text so the SVG can size to it */
}

/* SVG balloon: sits behind the text, top-left aligned to the text box; overflow
   visible lets the teardrop tail + thought lobes spill past the box edge. The
   soft drop-shadow replaces the old hard comic offset. */
.bubble__shape {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.34));
}

.bubble__text {
  position: relative;
  z-index: 1;
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--bubble-ink);
  text-align: center;
}
.bubble__text em { font-style: italic; }

/* Narration = dark film-subtitle plate: light text, smaller italic, bottom of
   the panel (positioned via the manifest). */
.bubble[data-kind="narration"] .bubble__text {
  font-weight: 500;
  font-style: italic;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  color: #F4ECDA;
}
.bubble[data-kind="thought"] .bubble__text { font-style: italic; }

/* Title = bare serif caps over the cover, no balloon. */
.bubble[data-kind="title"] .bubble__text {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FBF6EA;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

/* (Removed the scroll-driven view() fade-in: on a snapped full-screen panel the
   per-element view timeline left lower bubbles stuck mid-animation — partially
   transparent and soft. Bubbles now render at full opacity always.) */

/* Balloon-less lettering: the words sit directly on the art. The halo (drawn as
   a text stroke UNDER the fill, via paint-order) is the only thing keeping them
   readable over a busy drawing — without it this kind is unusable, which is why
   the pre-existing "title" kind never served for dialogue. */
.bubble[data-kind="plain"] .bubble__text {
  font-weight: 700;
  text-align: center;
  color: var(--bubble-ink);
  paint-order: stroke fill;
}