/* The character and what goes with her: her canvas (full screen in the hero, small in the corner as a
   guide in the middle sections, back for "Let's talk"), the hero's headline and cards, and her speech
   bubble. */

#scene {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; transform-origin: 100% 100%; transition: transform 1.1s var(--ease), opacity .6s ease;
}
html.her-in-corner #scene { transform: translate(3%, 4%) scale(.27); }
html[data-chapter="talk"] #scene { transform: translate(14%, 6%) scale(.86); }
/* over her, the cursor is a hand (a click on her is a tap: character.js) */
html.over-her, html.over-her body, html.over-her .stage, html.over-her .chapters, html.over-her .chapter { cursor: pointer; }

.loading {
  position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}

/* ---------------------------------------------------------------- the hero */
/* a big hello across her chest, and under it what to do next. It crosses her white shirt as well as the
   jacket and the background, so the letters get a dark edge and a soft shadow to stay readable on all three */
.hello {
  position: absolute; left: 0; right: 0; bottom: 11vh; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  font: italic 400 clamp(64px, 15vw, 250px)/.9 var(--serif); letter-spacing: -.03em; color: #fff8f0; white-space: nowrap;
  text-shadow: 0 0 1px rgba(31, 36, 51, .55), 0 1px 3px rgba(31, 36, 51, .45), 0 3px 18px rgba(31, 36, 51, .45),
    0 8px 44px rgba(31, 36, 51, .25);
  pointer-events: none; transition: opacity .6s ease;
}
.hello-word { color: #f2c98e; }             /* soft gold, like her earrings (the line under it stays white) */
.hello-sub { margin-top: .35em; font-size: clamp(20px, 2.6vw, 40px); line-height: 1.1; letter-spacing: 0; }

/* the cards about her, one more each step down, either side of her */
.pop {
  position: absolute; top: var(--y); width: min(300px, 22vw); z-index: 3;   /* (above the headline where they meet) */
  padding: 18px 20px; border-radius: 18px; background: var(--card);
  box-shadow: 0 18px 50px rgba(31, 36, 51, .16), 0 2px 6px rgba(31, 36, 51, .08);
  opacity: 0; transform: translateY(22px) scale(.97);
  transition: opacity .8s ease, transform .9s var(--ease);
}
.pop[data-side="left"] { left: 4vw; }
.pop[data-side="right"] { right: 4vw; }
.pop.is-on { opacity: 1; transform: none; }
.pop-count { position: absolute; top: 18px; right: 20px; font: 600 11px/1 var(--sans); letter-spacing: .08em;
  color: var(--ink-soft); opacity: .6; font-variant-numeric: tabular-nums; }
.pop-kicker { margin-bottom: 8px; font: 600 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pop-body { font-size: 14px; line-height: 1.5; }

/* the headline and cards step aside once the hero is over */
html:not([data-chapter="hero"]) .hello,
html:not([data-chapter="hero"]) .pop { opacity: 0 !important; pointer-events: none; }

/* ---------------------------------------------------------------- her speech bubble */
/* beside her face (speech-bubble.js places it each frame): a soft rounded bubble whose corner nearest her
   face stays sharp, like a speech bubble's tail; under her chin on a narrow screen, with a small tail up */
.her-say {
  position: fixed; left: 0; top: 0; z-index: 25; max-width: min(250px, 72vw); padding: 11px 16px 12px;
  border-radius: 20px; background: var(--card); color: var(--ink);
  font: 500 15px/1.4 var(--sans); text-wrap: balance;
  box-shadow: 0 12px 32px rgba(70, 40, 30, .16), 0 1px 3px rgba(70, 40, 30, .1), inset 0 0 0 1px rgba(31, 36, 51, .05);
  opacity: 0; scale: .82; transition: opacity .16s ease, scale .45s cubic-bezier(.2, 1.35, .4, 1); pointer-events: none;
}
.her-say.is-on { opacity: 1; scale: 1; pointer-events: auto; }
.her-say[data-side="right"] { border-bottom-left-radius: 5px; transform-origin: 0 100%; }
.her-say[data-side="left"] { border-bottom-right-radius: 5px; transform-origin: 100% 100%; }
.her-say[data-side="below"] { transform-origin: 50% 0; }
.her-say[data-side="below"]::before {
  content: ""; position: absolute; top: -5px; left: calc(50% - 6px); width: 12px; height: 12px;
  background: inherit; rotate: 45deg; border-radius: 3px 0 0 0;
}
.her-say p { position: relative; }
.her-say-action {
  display: inline-block; margin: 9px 0 2px; padding: 8px 14px; border-radius: 999px; background: var(--mauve);
  color: #fff; font: 600 13px/1 var(--sans); text-decoration: none;
}
.her-say-action:hover { background: #8a4552; }
/* the z z z while she dozes */
.her-say[data-tone="sleep"] { padding: 4px 10px; background: transparent; box-shadow: none; font: italic 400 26px/1 var(--serif); color: var(--ink-soft); }
.her-say[data-tone="sleep"]::before { display: none; }
.her-say[data-tone="sleep"] p { animation: zzz 2.6s ease-in-out infinite; }
@keyframes zzz { 0%, 100% { translate: 0 0; opacity: .45; } 50% { translate: 8px -10px; opacity: 1; } }

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 1000px) {
  .hello { bottom: 200px; }                  /* (above the cards) */
  /* one card at a time, in the same place: the last one slides away upward, then the next comes up from
     below (scrolling back, the other way round) */
  .pop, .pop[data-side] { left: 16px; right: 16px; top: auto; bottom: 24px; width: auto;
    transition: opacity .35s ease, transform .5s var(--ease); }
  .pop.is-current { transition-delay: .12s; }
  .pop.is-on:not(.is-current) { opacity: 0; transform: translateY(-18px) scale(.98); }
}
@media (max-width: 900px) {
  /* the guide hides on small screens, and comes back for "let's talk" */
  html.her-in-corner #scene { opacity: 0; }
  html[data-chapter="talk"] #scene { transform: translate(18%, 30%) scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .pop, .pop.is-on:not(.is-current) { transform: none; }
}