/* ==========================================================================
   The bear's line — everything that skins it lives in this file.

   Treatment A (CEO-approved, Lumi's board A): the phrase is large lettering set
   straight on the sky. No box, no tail. In the day a soft cream glow keeps it
   readable over clouds and the sun; at night a soft dark shadow does the same
   for cream lettering.

   Markup: index.html, `.bubble > .bubble__text#bubbleText` (home) and
   `.first__bubble > .bubble__text#frBubbleText` (first run). The words are set
   from js/app.js (`setBubble`), never carry markup, and sit in a polite live
   region, so a change of treatment is a CSS-only change here.

   Size: 34px (night 30px). A longer phrase steps down through .is-m, .is-s, .is-xs
   (js/app.js `sizeBubble`), so up to about 56 characters stays within two lines
   and nothing runs into the bear's ears. A third line is the most it gets.
   ========================================================================== */

:root {
  --phrase-ink: #3a2616;
  --phrase-glow: 0 0 10px rgba(255, 247, 230, 0.95), 0 0 3px rgba(255, 247, 230, 0.9);
  --phrase-size: 30px;
  --phrase-size-m: 27px;
  --phrase-size-s: 24px;
  --phrase-size-xs: 22px;
}
/* Night, and the stormy sky: cream lettering on a dark sky, shadowed. */
body[data-sky="night"],
body[data-sky="stormy"] {
  --phrase-ink: #f4efe6;
  --phrase-glow: 0 0 3px #0c1624, 0 0 7px rgba(12, 22, 36, 0.95), 0 0 12px rgba(12, 22, 36, 0.9), 0 0 20px rgba(12, 22, 36, 0.8), 0 2px 4px rgba(12, 22, 36, 0.95);
}
body[data-sky="night"] {
  --phrase-size: 30px;
  --phrase-size-m: 27px;
  --phrase-size-s: 24px;
  --phrase-size-xs: 22px;
}

/* The container: its place in the column, above the bear so that on a short
   phone he tucks behind the words. */
.bubble {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  width: min(100%, 560px);
  margin: 10px auto 0;
  padding: 0 16px;
}

.bubble__text {
  margin: 0;
  /* Room for the glow, which would be cut off at the box edge, taken back with a
     negative margin so the layout does not move. */
  padding: 12px 14px;
  margin: -12px -14px;
  max-height: calc(3 * 1.08em + 24px);
  overflow: hidden;
  color: var(--phrase-ink);
  font-family: var(--font);
  font-size: var(--phrase-size);
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
  text-shadow: var(--phrase-glow);
  transition: color 900ms ease;
}
.bubble__text.is-m { font-size: var(--phrase-size-m); }
.bubble__text.is-s { font-size: var(--phrase-size-s); }
.bubble__text.is-xs { font-size: var(--phrase-size-xs); }

/* Narrow phones (a 320-wide SE): smaller lettering, so a line holds more and the
   phrase stays to two lines and clear of the bear's ears. */
@media (max-width: 340px) {
  :root { --phrase-size: 26px; --phrase-size-m: 24px; --phrase-size-s: 22px; --phrase-size-xs: 20px; }
  body[data-sky="night"] { --phrase-size: 26px; --phrase-size-m: 24px; --phrase-size-s: 22px; --phrase-size-xs: 20px; }
}

/* ---------------------------------------------------------------- first run */

.first__bubble {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 40px);
  left: 0; right: 0;
  margin: 0 auto;
}
.first__bubble .bubble__text { font-size: 36px; }
.first__bubble .bubble__text.is-m { font-size: 32px; }
.first__bubble .bubble__text.is-s { font-size: 28px; }
.first__bubble .bubble__text.is-xs { font-size: 25px; }
.first[data-view="type"] .first__bubble {
  top: calc(env(safe-area-inset-top) + 20px);
  left: 64px; right: 0; width: auto; padding: 0 16px 0 8px;
}
.first[data-view="type"] .first__bubble .bubble__text { font-size: 26px; text-align: left; }

/* The layouts that move the line into a column (tablet and phone landscape, iPad
   portrait) are in css/layouts.css. */