/* Scene 5, moving in: the mess (a FINAL-final spreadsheet, a scanned PDF, a forwarded paste)
   pulls together and resolves into one clean journey, at night over Marine Drive, out of focus. */

.sc--moving { color: var(--bone); background: var(--cocoa); isolation: isolate; }
.motion .sc--moving { height: 100svh; min-height: 600px; }
.sc--moving { min-height: max(100svh, 760px); }

/* the ground: Mumbai at night through the office window, defocused; it settles into the fares' warm dark at the foot */
.mv-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.mv-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 62%; transform: scale(1.04); }
.mv-bg__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(28, 21, 18, .82) 0%, rgba(28, 21, 18, .5) 34%, rgba(28, 21, 18, .12) 62%, rgba(28, 21, 18, .2) 100%),
    linear-gradient(180deg, var(--cocoa) 0%, rgba(28, 21, 18, .55) 9%, rgba(28, 21, 18, 0) 26%, rgba(28, 21, 18, 0) 66%, var(--cocoa) 100%);
}
.mv-cr {
  position: absolute; right: var(--gut); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(18px, 2.4vw, 34px)); max-width: calc(50vw - var(--gut) - 170px);
  font-family: var(--f-mono); font-size: var(--t-lab); line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); text-align: right;
}
.mv-cr span { white-space: nowrap; }
.mv-cr span + span::before { content: "· "; }

.mv-hl {
  position: absolute; left: var(--gut); top: clamp(104px, 14svh, 150px); z-index: 2;
  font-size: clamp(44px, 6.4vw, 136px); font-weight: 520; font-stretch: 125%; line-height: .9; letter-spacing: -.04em;
}
.mv-hl__a, .mv-hl__b { display: block; white-space: nowrap; }
.mv-hl__b { color: var(--dusk); }

/* the caption at display scale, in the quarter the mess leaves empty */
.mv-cap { position: absolute; left: var(--gut); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(30px, 6svh, 70px)); width: min(34vw, 560px); font-size: var(--t-cap); line-height: 1.42; font-stretch: 108%; }
.mv-cap .cap__k { color: var(--dusk); }
.mv-say { margin: 0 0 1.1em; font-size: clamp(22px, 2.15vw, 40px); font-weight: 500; font-stretch: 112%; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.mv-say__a { color: var(--bone-2); }
.mv-say__b { color: var(--bone); }
.mv-cap .cap__t { max-width: 34ch; color: var(--bone-2); }

/* the stage for the mess and the journey */
.mess, .clean-at { --zone-l: 40%; }
.mess { position: absolute; left: var(--zone-l); right: var(--gut); top: clamp(92px, 13svh, 140px); bottom: clamp(104px, 14svh, 150px); pointer-events: none; }
.mess__in { position: absolute; will-change: transform, opacity, filter; }
.mess__x { position: relative; color: #1b1a1d; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 8px 18px rgba(0, 0, 0, .35); will-change: transform, opacity, filter; }

/* the spreadsheet */
.mess__in--xls { left: 8%; top: 4%; width: min(31vw, 460px); }
.mess__x--xls { background: #fbfaf7; border-radius: 6px; overflow: hidden; transform: rotate(-5deg); font-family: var(--f-mono); }
.xls__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #e9e6df; border-bottom: 1px solid #d4d0c6; font-size: 11px; color: #4a4741; white-space: nowrap; overflow: hidden; }
.xls__bar i { flex: none; width: 14px; height: 14px; border-radius: 3px; background: #8d8a83; box-shadow: inset 0 0 0 3px #e9e6df, inset 0 0 0 4px #8d8a83; }
.xls__bar span { overflow: hidden; text-overflow: ellipsis; }
.xls__g { display: grid; grid-template-columns: 22px .7fr 1.5fr 1fr .8fr; font-size: clamp(9px, .74vw, 12px); }
.xls__g span { min-height: 2.3em; padding: .55em .6em; border-right: 1px solid #e4e1da; border-bottom: 1px solid #e4e1da; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xls__g .xh { background: #f1efea; color: #8d8a83; text-align: center; padding-left: 0; padding-right: 0; }
.xls__g .xhi { background: #fdf0a6; }
.xls__g .xred { color: #c0392b; font-weight: 500; }

/* the scanned PDF */
.mess__in--pdf { right: 0; top: 30%; width: min(17vw, 250px); }
.mess__x--pdf { aspect-ratio: .77; padding: 22px 20px; background: #f7f5f0; border-radius: 3px; transform: rotate(7deg); font-size: 11px; }
.mess__x--pdf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(0, 0, 0, .05), transparent 40%), radial-gradient(120% 80% at 100% 100%, rgba(120, 100, 70, .12), transparent 60%); pointer-events: none; }
.pdf__tag { display: inline-block; padding: 2px 6px; border-radius: 2px; background: #b8431f; color: #fff; font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; }
.pdf__t { margin-top: 12px; font: 400 clamp(14px, 1.2vw, 19px)/1.1 var(--f-agency); }
.pdf__ref { margin: 6px 0 14px; font-family: var(--f-mono); font-size: 9px; color: #77746d; }
.pdf__ln { display: block; height: 5px; width: var(--w); margin: 0 0 9px; border-radius: 2px; background: #dcd8cf; }
.pdf__name { position: absolute; left: 20px; right: 20px; bottom: 16px; font-family: var(--f-mono); font-size: 9px; color: #8d8a83; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the forwarded paste */
.mess__in--wa { left: 20%; bottom: 3%; width: min(23vw, 330px); }
.mess__x--wa { padding: 12px 14px 10px; background: #efe8db; border-radius: 4px 14px 14px 14px; transform: rotate(-2.5deg); font-size: clamp(12px, .95vw, 15px); line-height: 1.38; }
.mess__x--wa::before { content: ""; position: absolute; left: -7px; top: 0; border: 8px solid transparent; border-top-color: #efe8db; border-right-color: #efe8db; border-width: 0 8px 10px 0; }
.wa__fw { display: flex; align-items: center; gap: 6px; font-size: .84em; font-style: italic; color: #77746d; margin-bottom: 4px; }
.wa__fw::before { content: ""; width: 12px; height: 9px; background: currentColor; clip-path: polygon(0 100%, 0 55%, 55% 55%, 55% 15%, 100% 55%, 55% 95%, 55% 75%, 15% 75%, 15% 100%); }
.wa__time { margin-top: 4px; text-align: right; font-size: .76em; color: #8d8a83; }

/* the one clean journey */
/* the wrapper holds the position; the card itself is free to move */
.clean-at { position: absolute; z-index: 3; left: calc(var(--zone-l) + (100% - var(--zone-l) - var(--gut)) / 2); top: 52%; width: min(36vw, 540px); translate: -50% -50%; }
.clean {
  position: relative; width: 100%; margin: 0; container-type: inline-size;
  padding: clamp(18px, 1.9vw, 28px) clamp(20px, 2.1vw, 30px) clamp(18px, 1.8vw, 26px); border-radius: clamp(10px, .9vw, 14px); background: #f3ecdf; color: #1b1a1d;
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .75), 0 10px 24px rgba(0, 0, 0, .35);
}
.clean * { box-sizing: border-box; }
.clean__top { display: flex; justify-content: space-between; align-items: center; font-size: max(9px, 2cqw); }
.clean__st { display: inline-flex; align-items: center; gap: 1.4cqw; font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(27, 26, 29, .6); }
.clean__st::before { content: ""; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #3f7a55; box-shadow: 0 0 0 .8cqw rgba(63, 122, 85, .16); }
.clean__t { margin-top: 5cqw; font: italic 400 max(28px, 9cqw)/.95 var(--f-agency); letter-spacing: -.02em; }
.clean__s { margin-top: 1.6cqw; font-size: max(11px, 2.6cqw); color: rgba(27, 26, 29, .62); }
.clean__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6cqw; margin-top: 5cqw; }
.clean__l li { display: grid; gap: 1.8cqw; }
.clean__l img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.2cqw; }
.clean__l span { display: grid; gap: .5cqw; font-family: var(--f-mono); font-size: max(9px, 2cqw); letter-spacing: .06em; color: rgba(27, 26, 29, .58); }
.clean__l b { font-family: var(--f-wide); font-size: max(12px, 2.9cqw); font-weight: 600; letter-spacing: 0; color: #1b1a1d; }
.clean__f { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1cqw 3cqw; margin-top: 4.4cqw; padding-top: 3cqw; border-top: 1px solid rgba(27, 26, 29, .14); font-family: var(--f-mono); font-size: max(9px, 2cqw); letter-spacing: .08em; text-transform: uppercase; color: rgba(27, 26, 29, .62); }
.clean__f span::before { content: "\2713\00a0\00a0"; color: #3f7a55; }

/* without motion: the mess sits small and calm beside the result */
html:not(.motion) .mess__x--xls { transform: rotate(-5deg) scale(.86); opacity: .5; }
html:not(.motion) .mess__x--pdf { transform: rotate(7deg) scale(.86); opacity: .5; }
html:not(.motion) .mess__x--wa { transform: rotate(-2.5deg) scale(.86); opacity: .5; }

@media (orientation: portrait), (max-width: 860px) {
  .mv-hl { font-size: clamp(42px, 12.4vw, 92px); }
  .mv-cap .cap__k, .mv-cap .cap__t, .mv-say__a, .mv-cr { display: none; }
  .mv-cap { right: var(--gut); width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
  .mv-say { margin: 0; font-size: clamp(18px, 5vw, 26px); }
  .mv-bg img { object-position: 30% 60%; }
  .mv-bg__veil { background: linear-gradient(180deg, var(--cocoa) 0%, rgba(28, 21, 18, .6) 9%, rgba(28, 21, 18, .25) 30%, rgba(28, 21, 18, .35) 60%, var(--cocoa) 100%); }
  .mess, .clean-at { --zone-l: var(--gut); }
  .mess { top: calc(clamp(104px, 14svh, 150px) + clamp(42px, 12.4vw, 92px) * 1.9 + 48px); bottom: calc(env(safe-area-inset-bottom, 0px) + 108px); }
  /* inset a little, so the tilted pieces never cross the screen's edge while they drift */
  .mess__in--xls { left: 6px; top: 0; width: min(80vw, 420px); }
  .mess__in--pdf { right: 12px; top: 32%; width: min(38vw, 220px); }
  .mess__in--wa { left: 0; bottom: 0; width: min(70vw, 330px); }
  .mess__x--wa { font-size: 13px; }
  .clean-at { width: calc(100% - var(--gut) * 2); max-width: 480px; top: calc(50% + clamp(42px, 12.4vw, 92px) * .7); }
  /* still page: the faded pieces stay above the caption */
  html:not(.motion) .mess { bottom: calc(env(safe-area-inset-bottom, 0px) + 168px); }
}