/* Acompanhamento: chapter 3. Layout from story.css, phone from phone.css. */

[data-scene="acompanhamento"] .phone-fit { padding: 16px 0 24px; }

/* the left column holds the card and, at the visit, the big line over it */
.ac-left { position: relative; align-self: center; }
#ac-card { transition: opacity .6s var(--ease); }
#ac-card.is-dim { opacity: 0; }
.ac-big {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-40%);
  margin: 0; max-width: 12ch; font: 400 var(--fs-xl)/1.02 var(--serif); letter-spacing: -.015em;
  opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), transform .9s var(--ease-expo), visibility 0s .7s;
}
.ac-big.is-on { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .7s var(--ease), transform .9s var(--ease-expo), visibility 0s; }
[data-scene="acompanhamento"] .ac-raw b { font-style: normal; font-weight: 600; color: #fff; }
.rm .ac-big { position: static; opacity: 1; visibility: visible; transform: none; margin-top: var(--s6); font-size: var(--fs-lg); }
.rm #ac-card.is-dim { opacity: 1; }
html:not(.js) .ac-big { position: static; opacity: 1; visibility: visible; transform: none; margin-top: var(--s7); }

/* the closing line under the card, after the proposal */
.ac-close { margin-top: var(--s4); font: 400 clamp(22px, 2.2vw, 30px)/1.15 var(--serif); letter-spacing: -.01em; }
.js .ac-close:not(.is-on) { display: none; }
.js .ac-close.is-on { animation: check-in .8s var(--ease-expo) both; }

/* the notice lines unfold inside one bubble */
.ac-brief > span { display: block; }
.ac-brief > .ac-l { margin-top: 6px; }
.ac-brief > .ac-l.is-on { animation: ac-line .55s var(--ease-expo) both; }
@keyframes ac-line { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#ac-chip1-row.is-enter { animation-delay: .1s; }

/* the recording's raw excerpts: grey, then dimmed when the notes arrive */
[data-scene="acompanhamento"] .ac-raw { color: rgba(233, 237, 239, .78); font-style: italic; transition: opacity .6s var(--ease); }
[data-scene="acompanhamento"] .ac-raw.is-dim { opacity: .35; }

/* the clean notes (Granola-style): lime bullets, one line at a time */
.ac-notes { display: block; }
.ac-notes p { margin: 0; }
.ac-notes ul { margin: 6px 0 4px; padding: 0; list-style: none; }
.ac-notes li { position: relative; padding-left: 16px; margin: 4px 0; }
.ac-notes li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(205, 245, 70, .15); }
.js .ac-notes li:not(.is-on) { display: none; }
.js .ac-notes li.is-on { animation: ac-line .5s var(--ease-expo) both; }
.js #ac-notes:not(.is-ready) .ac-nask, .js #ac-notes:not(.is-ready) .wa-btns { display: none; }
#ac-notes .ac-nask, #ac-notes .wa-btns { animation: ac-line .5s var(--ease-expo) both; }

#ac-chip-row.is-enter { animation-delay: .3s; }
#ac-chip-row .chip { box-shadow: 0 0 0 6px var(--signal-wash), 0 6px 24px rgba(205, 245, 70, .18); }

@media (max-width: 900px) {
  [data-scene="acompanhamento"] .phone-fit { padding: 0 0 38px; }
  /* on phones the big line sits over the top of the stage, above the locked phone */
  .ac-left { position: static; }
  .ac-big { position: absolute; left: var(--rail); right: var(--rail); top: calc(var(--header-h) + 56px); transform: none; font-size: 34px; max-width: none; z-index: 3; text-shadow: 0 2px 18px #060806; }
  .ac-big.is-on { transform: none; }
  .ac-close { font-size: 18px; margin-top: var(--s2); }
}