/* The trailer at the top of the landing (templates/public/_landing_trailer.html,
 * played by landing_trailer.js).
 *
 * Everything is sized in container units, so the whole picture scales as one
 * and nothing wraps differently at another width. The page serves it in its
 * last frame (the classes on .tr); the script takes them off, then puts them
 * back one by one: is-win (the interface opens), is-hits (the passages),
 * is-ai (the assistants), is-case (the case as a chronology). Under reduced
 * motion the last frame stays.
 */
.tr {
  --ink: #0B1433;
  --marine: #0B1F4D;
  --line: #DEDCD6;
  width: 100%;
  container-type: inline-size;
  font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
}
.tr__stage {
  position: relative;
  aspect-ratio: 16 / 11.6;
  /* No frame of its own: the interface floats on the page, it is the only card. */
  font-size: 2.4cqw;
  line-height: 1.3;
  color: var(--ink);
}

/* ── 1. Files into the mark ──────────────────────────────────── */
.tr__drop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.6s ease, transform 0.7s ease;
}
.tr.is-win .tr__drop { opacity: 0; transform: scale(1.18); pointer-events: none; }
.tr__logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 21cqw;
  height: 21cqw;
  border-radius: 24%;
  background: #FFFFFF;
  box-shadow: 0 2.4cqw 5cqw -2cqw rgba(11, 31, 77, 0.45), 0 0 0 1px var(--line);
  transition: transform 0.35s ease;
}
.tr__logo img { width: 62%; height: auto; }
.tr.is-bump .tr__logo { transform: scale(1.09); }
.tr__ok {
  position: absolute;
  right: -1.6cqw;
  top: -1.6cqw;
  display: grid;
  place-items: center;
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 50%;
  background: #169F65;
  color: #FFFFFF;
  font-size: 0.9em;
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.tr.is-ok .tr__ok { transform: scale(1); }
.tr__ring {
  position: absolute;
  width: 21cqw;
  height: 21cqw;
  border-radius: 28%;
  border: 2px solid rgba(43, 93, 215, 0.5);
  opacity: 0;
}
.tr.is-bump .tr__ring { animation: tr-ring 0.8s ease-out; }
@keyframes tr-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

.tr__file {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  max-width: 30cqw;
  padding: 0.55em 0.85em;
  border: 1px solid var(--line);
  border-radius: 1em;
  background: #FFFFFF;
  box-shadow: 0 1.2cqw 2.6cqw -1.4cqw rgba(11, 20, 51, 0.35);
  font-size: 0.86em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqw));
  transition: opacity 0.45s ease, transform 0.9s cubic-bezier(0.55, 0, 0.75, 0.35);
}
.tr__file b { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.tr__file i { font-size: 1.15em; }
.tr__file img { width: 1.25em; height: 1.1em; }
/* The icon is the kind of file, and the colour too (as in the application):
   a PDF red, a Word file blue, a mail or a deck amber. A file that comes from a
   drive shows the drive's logo instead of an icon. */
.tr__file[data-kind="pdf"] i { color: #C32324; }
.tr__file[data-kind="doc"] i { color: #2B5DD7; }
.tr__file[data-kind="mail"] i,
.tr__file[data-kind="ppt"] i { color: #D98E04; }
.tr__file[data-kind="brand"] i,
.tr__file:not([data-kind="brand"]) img { display: none; }
.tr__file.is-show { opacity: 1; }
.tr__file.is-in { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }

/* ── 2. The interface ───────────────────────────────────────── */
.tr__win {
  position: absolute;
  inset: 5cqw 12.5cqw 5cqw 4.6cqw;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 2.4cqw;
  background: #FFFFFF;
  box-shadow: 0 2.4cqw 5cqw -2.4cqw rgba(11, 20, 51, 0.3);
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.6s ease 0.1s, transform 0.7s ease 0.1s;
}
.tr.is-win .tr__win { opacity: 1; transform: none; }
.tr__bar {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.7cqw 2cqw;
  border-bottom: 1px solid #F1EFEA;
}
.tr__mini { width: 5.6cqw; height: 5.6cqw; border-radius: 22%; }
.tr__search {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  flex: 1;
  min-width: 0;
  padding: 0.7em 1em;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #FBFAF7;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tr.is-typing .tr__search { border-color: #2B5DD7; box-shadow: 0 0 0 0.6cqw rgba(43, 93, 215, 0.16); }
.tr__search i { color: #959FB2; font-size: 0.85em; }
.tr__typed { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tr__caret { width: 2px; height: 1.1em; margin-left: -0.5em; background: #2B5DD7; opacity: 0; }
.tr.is-typing .tr__caret { opacity: 1; animation: tr-blink 0.9s steps(2, start) infinite; }
@keyframes tr-blink { to { visibility: hidden; } }

.tr__body { position: relative; flex: 1; min-height: 0; padding: 2cqw; }
.tr__pane { position: absolute; inset: 2cqw; display: flex; flex-direction: column; gap: 1.4cqw; transition: opacity 0.5s ease; }
.tr__pane--case { opacity: 0; }
.tr.is-case .tr__pane--case { opacity: 1; }
.tr.is-case .tr__pane--hits { opacity: 0; }

.tr__hit {
  padding: 1.1em 1.2em;
  border: 1px solid #EEEDE8;
  border-radius: 1.2em;
  background: #FBFAF7;
  opacity: 0;
  transform: translateY(1.6cqw);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.tr__hit.is-in { opacity: 1; transform: none; }
.tr__hit--dim.is-in { opacity: 0.55; }
.tr__hit b { display: block; font-size: 0.9em; }
.tr__hit p { margin: 0.25em 0 0; font-size: 0.82em; line-height: 1.45; color: #3B4860; }
.tr__hit mark { padding: 0 0.2em; border-radius: 0.3em; background: #FFEEC3; color: inherit; }

/* The case, as a chronology */
.tr__case-head { display: flex; align-items: center; gap: 1.2cqw; padding-bottom: 1.2cqw; }
.tr__case-head > i { display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; border-radius: 1.4cqw; background: #E3EDFF; color: #224AA9; font-size: 0.9em; }
.tr__case-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr__live { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.3em 0.8em; border-radius: 999px; background: #ECFBF2; color: #0E653F; font-size: 0.8em; font-weight: 700; }
.tr__live span { width: 0.6em; height: 0.6em; border-radius: 50%; background: #169F65; box-shadow: 0 0 0 0 rgba(22, 159, 101, 0.5); animation: tr-live 1.8s ease-out infinite; }
@keyframes tr-live { to { box-shadow: 0 0 0 0.8em rgba(22, 159, 101, 0); } }
.tr__rail { position: relative; display: grid; gap: 1.1cqw; padding-left: 3cqw; }
.tr__rail::before { content: ""; position: absolute; left: 0.7cqw; top: 0.5cqw; bottom: 0.5cqw; width: 2px; background: #DEDCD6; }
.tr__ev {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.4cqw;
  padding: 0.7em 1em;
  border: 1px solid #EEEDE8;
  border-radius: 1em;
  background: #FFFFFF;
  opacity: 0;
  transform: translateX(-1.4cqw);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.tr__ev::before { content: ""; position: absolute; left: -3.05cqw; top: 50%; width: 1.3cqw; height: 1.3cqw; margin-top: -0.65cqw; border-radius: 50%; background: #FFFFFF; border: 2px solid #0B1F4D; }
.tr__ev.is-in { opacity: 1; transform: none; }
.tr__ev time { flex: 0 0 11cqw; font-size: 0.82em; font-weight: 700; color: #224AA9; }
.tr__ev b { font-size: 0.92em; font-weight: 600; }
.tr__ev--due time { color: #C32324; }
.tr__ev--due::before { border-color: #C32324; background: #FFE2DD; }

/* ── 3. The assistants ──────────────────────────────────────── */
.tr__ai {
  position: absolute;
  right: 2.6cqw;
  top: 17cqw;
  display: grid;
  gap: 1.4cqw;
  pointer-events: none;
}
.tr__bot {
  display: grid;
  place-items: center;
  width: 8.6cqw;
  height: 8.6cqw;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1.4cqw 2.8cqw -1.2cqw rgba(11, 20, 51, 0.4);
  opacity: 0;
  transform: translateX(9cqw) scale(0.8);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.3, 1.3, 0.5, 1);
  transition-delay: calc(var(--i) * 0.16s);
}
.tr__bot img { width: 54%; height: 54%; }
.tr.is-ai .tr__bot { opacity: 1; transform: none; }
.tr__wire { display: none; }
.tr__bubble {
  position: absolute;
  left: 7.4cqw;
  bottom: 8cqw;
  max-width: 56cqw;
  margin: 0;
  padding: 0.7em 1.1em;
  border-radius: 1.2em 1.2em 1.2em 0.3em;
  background: var(--marine);
  color: #FFFFFF !important;
  font-size: 0.9em;
  box-shadow: 0 1.6cqw 3cqw -1.4cqw rgba(11, 31, 77, 0.6);
  opacity: 0;
  transform: translateY(1.6cqw);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.tr.is-ask .tr__bubble { opacity: 1; transform: none; }
.tr.is-case .tr__bubble { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .tr * { transition: none !important; animation: none !important; }
}

/* Where each file starts, and the order the assistants plug in. These were
   inline style attributes; the page's CSP does not allow them. */
.tr__file--pdf   { --x: -30; --y: -17; }
.tr__file--doc   { --x: 28;  --y: -20; }
.tr__file--mail  { --x: -31; --y: 19; }
.tr__file--drive { --x: 29;  --y: 21; }
.tr__bot--0 { --i: 0; }
.tr__bot--1 { --i: 1; }
.tr__bot--2 { --i: 2; }

/* Who the story is told to: a small label over the interface, which changes with it. */
.tr__aud {
  position: absolute;
  top: 1.3cqw;
  right: 12.5cqw;
  display: inline-flex;
  align-items: center;
  gap: 0.9cqw;
  padding: 0.55cqw 1.7cqw 0.55cqw 1.3cqw;
  border: 1px solid #DDE7FB;
  border-radius: 999px;
  background: #EEF3FF;
  color: #1A377E;
  font-size: 1.7cqw;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.8cqw);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}
.tr__aud::before { content: ""; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #2B5DD7; }
.tr.is-win .tr__aud { opacity: 1; transform: none; }
.tr.is-leaving .tr__aud { opacity: 0; }
.tr__stage { transition: opacity 0.7s ease; }
.tr.is-leaving .tr__stage { opacity: 0; }