/* Chapter 4, Memória. Layout, the camera, and what each beat shows.
 *
 * Beats (local s, see scenes/memoria.js):
 *   0.2  fold     the bar's chips fly into the dark screen, it lights up on
 *                 Juliana's record, lime labels + "Três serviços. Uma memória."
 *   0.45 / 0.7    camera pans to the conversation, then the visit audio
 *                 (only when the screen is zoomed: phones, short laptops)
 *   0.9  base     tab "Base", the sobrado fact lights up; line under the laptop
 *   1.5  agenda   tab "Agenda", the week's named visits check in
 *   2.1  who      "Quem faz…" and the note replace the line; the laptop dims
 *
 * End states are the default styles. Under `.js`, whatever has not happened
 * yet is hidden (visibility, so screen readers wait too), and JS adds the
 * on-* classes to .memoria as the beats fire. Without JS, or with reduced
 * motion, the scene becomes a static sequence (bottom of this file). */

.memoria { --k: .62; }                   /* screen scale; JS measures the real one */
.memoria .stage { display: flex; }
.me-icons { position: absolute; width: 0; height: 0; overflow: hidden; }

.me-grid {
  --me-gut: calc(var(--rail) + 150px);   /* side room at rest: the labels hang outside the screen */
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 20px var(--rail) 40px;
}
.me-big {
  font: 400 clamp(34px, min(4.2vw, 6.8svh), 60px)/1.02 var(--serif); letter-spacing: -.015em;
  text-align: center; margin-bottom: var(--s4);
}

/* the view: the box the laptop sits in, and the camera's frame */
.me-view {
  position: relative; flex: 1 1 auto; min-height: 0;
  width: calc(100% + 2 * var(--rail)); margin: 0 calc(-1 * var(--rail));
  container-type: size; overflow: hidden;
  transform: translateY(calc((1 - var(--rise, 1)) * 48px));
}
.me-view .lt {
  /* fit the device inside the view, leaving the side room */
  --lt-w: min(100cqw - 2 * var(--me-gut), 100cqh * 1.6577);
  position: absolute; left: calc(50cqw - var(--lt-w) / 2); top: calc(50cqh - var(--lt-w) * .3016);
  /* camera: JS sets --cx/--cy/--cz to centre a region of the screen at a legible size */
  transform-origin: 0 0;
  transform: translate(var(--cx, 0px), var(--cy, 0px)) scale(var(--cz, 1));
  transition: transform .85s var(--ease-expo), opacity .6s var(--ease);
}

/* screens: three full app screens stacked; one shows at a time */
.scr { position: absolute; inset: 0; transition: opacity .35s var(--ease); }

/* captions under the laptop share one cell, so swapping them never moves the laptop */
.me-cap { display: grid; justify-items: center; text-align: center; margin-top: var(--s4); max-width: 72rem; }
.me-cap > * { grid-area: 1 / 1; }
.me-line2 { font: 400 clamp(21px, min(2.2vw, 3.6svh), 30px)/1.2 var(--serif); letter-spacing: -.01em; max-width: 62ch; }
.me-who-l { font: 400 clamp(20px, min(1.95vw, 3.3svh), 28px)/1.22 var(--serif); letter-spacing: -.01em; }
.me-who-k { color: var(--muted); }
.me-note { margin-top: var(--s2); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.memoria .demo-note { right: var(--rail); bottom: var(--s4); }

/* ---------- the lead page (logical px) ---------- */
.me-cols { display: grid; grid-template-columns: 330px 452px minmax(0, 1fr); gap: 32px; align-items: start; }

.me-hist { position: relative; display: flex; flex-direction: column; gap: 17px; padding-left: 30px; margin: 0; }
.me-hist::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: 14px; width: 1px; background: var(--hair-2); }
.h-row { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.h-row::before {                          /* timeline node */
  content: ""; position: absolute; left: -27px; top: 10px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--canvas); border: 2px solid var(--muted);
}
.h-sep { display: none; }                 /* the " · " of the copy line; the pill already separates date and text */
.h-d {
  display: inline-flex; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--raised);
  color: var(--ink-2); font-size: 16.5px; font-weight: 500; line-height: 1.3; letter-spacing: .02em; white-space: nowrap;
}
.h-t { font-size: 21px; line-height: 1.36; }
.h-row--next .h-t { color: var(--faint); }
.h-row--next::before { top: 7px; border-style: dashed; border-color: var(--faint); }
.h-row.is-linked .h-d { color: var(--signal); border-color: rgba(205, 245, 70, .5); background: rgba(205, 245, 70, .08); }
.h-row.is-linked::before { border-color: var(--signal); }

.me-conv { display: flex; flex-direction: column; gap: 12px; }
.me-conv-head { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; font-size: 19px; }
.me-conv-head b { font-weight: 500; }
.me-hl {
  background: var(--signal); color: var(--on-signal); padding: 1px 5px; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.me-player { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; background: var(--raised); border-radius: 2px; }
.me-play { width: 38px; height: 38px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--canvas); }
.me-play .ku-ico { width: 18px; height: 18px; margin-left: 2px; }
.me-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; min-width: 0; }
.me-wave i { flex: 1; height: calc(var(--h, .5) * 100%); background: var(--muted); border-radius: 1px; }
.me-dur { font: 500 15px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--muted); }
.me-note-row { margin: 0; padding: 14px 0 0; font-size: 19.5px; line-height: 1.42; }
.me-note-row + .me-note-row { margin-top: 14px; border-top: 1px solid var(--hair); }
.me-note-row b { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }

/* ---------- the Base tab ---------- */
.me-base-cols { display: grid; grid-template-columns: 700px minmax(0, 1fr); gap: 36px; align-items: start; }
.me-facts { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.me-fact { position: relative; isolation: isolate; padding: 26px 30px; border: 1px solid var(--hair); background: var(--surface); border-radius: 2px; }
.me-fact-t { margin: 0; font-size: 26px; line-height: 1.35; color: var(--ink-2); }
.me-fact-t b { font-weight: 600; color: var(--ink); }
.me-fact-src { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-size: 20px; line-height: 1.3; color: var(--ink-2); }
.me-fact.is-hi { border-color: rgba(205, 245, 70, .35); }
.me-fact.is-hi .me-fact-t { color: var(--ink); font-size: 30px; }
.me-fact.is-hi::before {                  /* the highlight: lime wash with a lime rule, swept in at the beat */
  content: ""; position: absolute; inset: -1px; z-index: -1; transform-origin: left center;
  background: linear-gradient(90deg, rgba(205, 245, 70, .16), rgba(205, 245, 70, .06));
  border-left: 5px solid var(--signal);
}
.me-src-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 20px; }
.me-src-head b { font-weight: 500; }
.me-src .ku-msg { max-width: 100%; font-size: 21px; }

/* ---------- the Agenda tab: narrow weekdays, the weekend holds the visits ---------- */
.me-week { display: grid; grid-template-columns: repeat(5, 84px) minmax(0, 1fr); gap: 8px; }
.me-wkend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.me-week .ku-day { min-height: 600px; }
.me-wkend .ku-day-h { color: var(--ink); }
.me-visits { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ku-visit > span { grid-column: 2; }
.me-rec { box-shadow: 0 0 0 2px var(--signal); }  /* Marcos: the visit from the pains, now with its record */
.me-rec-a { color: var(--signal); }

/* ---------- lime labels: Kima's annotations, in screen coordinates ---------- */
.me-notes {
  position: absolute; left: 0; top: 0; z-index: 3; width: 1440px; height: 900px; pointer-events: none;
  transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(var(--k)); transform-origin: 0 0;
}
.me-lab {
  position: absolute; top: var(--y, 0px); right: calc(1440px + 54px); /* right edge 54px left of the screen */
  transform: translateY(-50%);
  padding: 8px 13px; border-radius: 8px; white-space: nowrap;
  font: 600 17px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal); background: rgba(205, 245, 70, .12); border: 1.5px solid rgba(205, 245, 70, .42);
}
.me-lab::after {                          /* hairline to the row's date pill */
  content: ""; position: absolute; top: 50%; left: calc(100% + 10px); width: calc(var(--px, 300px) + 40px); height: 1.5px;
  background: linear-gradient(90deg, rgba(205, 245, 70, .75), rgba(205, 245, 70, .35)); transform-origin: left center;
}
/* zoomed in (phones, short laptops): the outside is off camera, so the label sits at the row's right end */
.is-zoomed .me-lab { right: auto; left: calc(var(--pr, 120px) + 14px); font-size: 19px; }
.is-zoomed .me-lab::after { display: none; }

/* ---------- beat states (hidden until their beat, with JS) ---------- */
.memoria.no-anim *, .memoria.no-anim *::before, .memoria.no-anim *::after { transition: none !important; animation: none !important; }

/* 0.2 fold: the dark screen lights up under the landing chips */
.js .memoria .scr { visibility: hidden; opacity: 0; }
.js .memoria.on-lead .scr-lead { visibility: visible; opacity: 1; transition: opacity .45s var(--ease) .46s; } /* lights as the chips arrive */
.js .memoria .me-big { visibility: hidden; opacity: 0; transform: translateY(14px); }
.js .memoria.on-lead .me-big {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .6s var(--ease) .62s, transform .9s var(--ease-expo) .62s, visibility 0s .62s;
}
.js .memoria .me-big .lime { opacity: 0; }
.js .memoria.on-lead .me-big .lime { opacity: 1; transition: opacity .6s var(--ease) .98s; }
.js .memoria .me-lab { visibility: hidden; opacity: 0; margin-left: -12px; }
.js .memoria .me-lab::after { transform: scaleX(0); }
.js .memoria.on-lead .me-lab {
  visibility: visible; opacity: 1; margin-left: 0;
  transition: opacity .45s var(--ease) calc(.86s + var(--i) * 80ms), margin-left .6s var(--ease-expo) calc(.86s + var(--i) * 80ms), visibility 0s calc(.86s + var(--i) * 80ms);
}
.js .memoria.on-lead .me-lab::after { transform: none; transition: transform .6s var(--ease-expo) calc(1s + var(--i) * 80ms); }
.js .memoria.on-lead.is-zoomed .me-lab { transition-delay: calc(1.55s + var(--i) * 80ms); }
/* on phones the camera leaves the history at 0.45: the labels go with it */
@media (max-width: 700px) {
  .js .memoria.on-conv.is-zoomed .me-lab { visibility: hidden; opacity: 0; transition: opacity .2s var(--ease), visibility 0s .2s; }
}

/* a chip landing on its row: one lime pulse */
@keyframes me-land {
  0% { background: var(--signal); color: var(--on-signal); box-shadow: 0 0 0 0 rgba(205, 245, 70, .55); }
  55% { box-shadow: 0 0 0 16px rgba(205, 245, 70, 0); }
}
.h-d.is-flash, .me-hl.is-flash { animation: me-land .9s var(--ease-expo); }

/* 0.9 base: tab switch, the fact's highlight sweeps in, the line under the laptop */
.js .memoria.on-base .scr-lead { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }  /* faded, then hidden: frees its layer */
.js .memoria.on-base .scr-base { visibility: visible; opacity: 1; transition: opacity .35s var(--ease) .05s; }
.js .memoria.on-base .me-lab { visibility: hidden; opacity: 0; transition: opacity .2s var(--ease), visibility 0s .2s; }
.js .memoria .me-fact.is-hi::before { transform: scaleX(0); }
.js .memoria.on-base .me-fact.is-hi::before { transform: none; transition: transform .8s var(--ease-expo) .4s; }
.js .memoria .me-line2 { visibility: hidden; opacity: 0; transform: translateY(10px); }
.js .memoria.on-base .me-line2 {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .6s var(--ease) .55s, transform .8s var(--ease-expo) .55s, visibility 0s .55s;
}

/* 1.5 agenda: tab switch, the visits check in one by one, Marcos's record lights */
.js .memoria.on-agenda .scr-base { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.js .memoria.on-agenda .scr-agenda { visibility: visible; opacity: 1; transition: opacity .35s var(--ease) .05s; }
.js .memoria .ku-visit { opacity: 0; transform: translateY(12px); }
.js .memoria.on-agenda .ku-visit {
  opacity: 1; transform: none;
  transition: opacity .45s var(--ease) calc(.3s + var(--i) * 75ms), transform .6s var(--ease-expo) calc(.3s + var(--i) * 75ms);
}
.js .memoria .me-rec { box-shadow: 0 0 0 0 rgba(205, 245, 70, 0); }
.js .memoria.on-agenda .me-rec { box-shadow: 0 0 0 2px var(--signal); transition: box-shadow .6s var(--ease) 1s; }

/* 2.1 who: the line gives way to "Quem faz", the laptop dims */
/* replaced, not unsaid: it fades but stays readable to screen readers */
.js .memoria.on-agenda .me-line2,
.js .memoria.on-who .me-line2 { opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.js .memoria .me-who { visibility: hidden; opacity: 0; transform: translateY(12px); }
.js .memoria.on-who .me-who {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .6s var(--ease) .25s, transform .8s var(--ease-expo) .25s, visibility 0s .25s;
}
.js .memoria .me-note { opacity: 0; }
.js .memoria.on-who .me-note { opacity: 1; transition: opacity .6s var(--ease) .6s; }
.js .memoria.on-who .lt { opacity: .5; }

/* ---------- sizes ---------- */
@media (max-width: 1100px) {
  .me-grid { --me-gut: calc(var(--rail) + 110px); }
}
@media (max-width: 900px) {
  .me-grid { --me-gut: var(--rail); }  /* always zoomed here, so the labels sit on the rows */
}
@media (max-width: 700px) {
  .me-grid { --me-gut: 16px; padding: var(--s4) var(--rail) var(--s6); }
  .me-big { font-size: clamp(30px, 9.4vw, 40px); line-height: 1.04; margin-bottom: var(--s3); }
  .me-cap { margin-top: var(--s3); }
  .me-line2 { font-size: 21px; }
  .me-who-l { font-size: 19.5px; }
  .me-note { font-size: 12.5px; }
  .memoria .demo-note { left: var(--rail); right: var(--rail); bottom: var(--s3); text-align: center; line-height: 1.5; }
  .me-grid { padding-bottom: 64px; }
  /* the zoomed laptop bleeds to the screen edges; soften the top and bottom crop */
  .me-view {
    -webkit-mask-image: linear-gradient(transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(transparent, #000 5%, #000 95%, transparent);
  }
}

/* ---------- static sequence: reduced motion and no JS ----------
 * No pin, no camera, no laptop frame: the three screens stand as windows in
 * reading order, each followed by its line: lead page, Base, the line under
 * it, Agenda, who does it. The labels sit inside the lead window. */
.rm .memoria, html:not(.js) .memoria { --k: .23; }
@media (min-width: 600px) { .rm .memoria, html:not(.js) .memoria { --k: .38; } }
@media (min-width: 900px) { .rm .memoria, html:not(.js) .memoria { --k: .52; } }
@media (min-width: 1200px) { .rm .memoria, html:not(.js) .memoria { --k: .64; } }
.rm .me-grid, html:not(.js) .me-grid { display: grid; justify-items: center; gap: var(--s6); height: auto; padding-top: var(--s9); }
.rm .memoria :is(.me-view, .lt, .lt-lid, .lt-screen, .me-cap), html:not(.js) .memoria :is(.me-view, .lt, .lt-lid, .lt-screen, .me-cap) { display: contents; }
.rm .memoria :is(.lt-notch, .lt-glare, .lt-hinge, .lt-base), html:not(.js) .memoria :is(.lt-notch, .lt-glare, .lt-hinge, .lt-base) { display: none; }
.rm .memoria .scr, html:not(.js) .memoria .scr {
  position: relative; inset: auto; width: calc(1440px * var(--k)); height: calc(900px * var(--k));
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--hair-2), 0 40px 80px -40px #000;
}
/* reduced motion fires every beat, so the later beats would hide the earlier
 * screens and lines; in the static sequence everything stays (hence !important) */
.rm .memoria :is(.scr, .me-line2, .me-who, .me-note, .me-lab, .me-big .lime) { visibility: visible !important; opacity: 1 !important; }
.rm .memoria .me-cap > *, html:not(.js) .memoria .me-cap > * { grid-area: auto; }
.rm .memoria .me-big { order: 1; } .rm .memoria .scr-lead { order: 2; } .rm .memoria .scr-base { order: 3; }
.rm .memoria .me-line2 { order: 4; } .rm .memoria .scr-agenda { order: 5; } .rm .memoria .me-who { order: 6; }
html:not(.js) .memoria .me-big { order: 1; } html:not(.js) .memoria .scr-lead { order: 2; } html:not(.js) .memoria .scr-base { order: 3; }
html:not(.js) .memoria .me-line2 { order: 4; } html:not(.js) .memoria .scr-agenda { order: 5; } html:not(.js) .memoria .me-who { order: 6; }
.rm .memoria .me-lab { right: auto; left: calc(var(--pr, 120px) + 14px); font-size: 19px; }
.rm .memoria .me-lab::after { display: none; }
.rm .memoria .demo-note, html:not(.js) .memoria .demo-note { position: static; order: 7; }
html:not(.js) .memoria .me-notes { display: none; }  /* without JS the label rows cannot be measured */