/* The floating document mess — shared by the landing hero and the login page.
   Tokens from app.css. Every chip wanders on its own; no pointer input. */

.mess { position: absolute; inset: 0 0 70px 0; z-index: 1; pointer-events: none; user-select: none; }
.mess--fixed { position: fixed; inset: 0; z-index: 0; }
/* login: let the body background show through, keep the card above the chips */
.mess--fixed ~ .so-wrap { background: transparent; }
.mess--fixed ~ .so-wrap .so-card { position: relative; z-index: 1; }

.chip { position: absolute; top: var(--y); white-space: nowrap; will-change: transform;
  /* negative delays start every chip mid-cycle; backwards guards any positive
     delay from snapping out of the base position when its animation kicks in */
  animation: chipFloat var(--t, 4.5s) ease-in-out var(--d, 0s) infinite alternate backwards;
  filter: drop-shadow(0 18px 22px rgba(13, 23, 41, 0.10)); }
@keyframes chipFloat {
  0%   { transform: rotate(var(--r, 0deg)) translate(0px, -28px); }
  30%  { transform: rotate(calc(var(--r, 0deg) + 3deg)) translate(22px, 12px); }
  60%  { transform: rotate(calc(var(--r, 0deg) - 2.5deg)) translate(-20px, 26px); }
  100% { transform: rotate(calc(var(--r, 0deg) + 1.5deg)) translate(14px, -20px); }
}

.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: #E9F0FC; border: 1px solid #CFDDF7; color: #17418F; font-size: 13.5px; font-weight: 600;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #1F55C4; }
.file {
  display: inline-block; background: #FFFFFF; border: 1px solid #E5EAF1; border-radius: 11px; padding: 11px 15px; text-align: left;
}
.file .meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.file .type { font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; font-weight: 600; letter-spacing: 0.07em; background: #EDF1F6; color: #54637B; border-radius: 4px; padding: 2.5px 6px; }
.file .size { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: #9AA7B9; }
.file .name { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #33415C; }
.warn {
  display: inline-block; background: #FAF0DA; border: 1px solid #F0DFB6; color: #8A5E10; border-radius: 9px; padding: 9px 15px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
}

@media (max-width: 1150px) { .chip.far { display: none; } }
/* Phones keep the mess — it is the whole point of the hero — but only the few
   chips that read at this size, re-anchored above and below the copy (a narrow
   hero has no side margins to hide in) and drifting less so nothing clips out. */
@media (max-width: 780px) {
  .chip { display: none; }
  .chip.mob { display: block; top: var(--my, var(--y)); animation-name: chipFloatSm;
    filter: drop-shadow(0 12px 16px rgba(13, 23, 41, 0.09)); }
  .chip.mob .pill { padding: 7px 13px; font-size: 12px; }
  .chip.mob .file { padding: 9px 12px; border-radius: 9px; }
  .chip.mob .file .meta { gap: 6px; margin-bottom: 4px; }
  .chip.mob .file .name { font-size: 10.5px; }
  .chip.mob .warn { padding: 7px 12px; font-size: 9px; letter-spacing: 0.08em; }
}
@keyframes chipFloatSm {
  0%   { transform: rotate(var(--r, 0deg)) translate(0px, -13px); }
  30%  { transform: rotate(calc(var(--r, 0deg) + 3deg)) translate(10px, 6px); }
  60%  { transform: rotate(calc(var(--r, 0deg) - 2.5deg)) translate(-9px, 12px); }
  100% { transform: rotate(calc(var(--r, 0deg) + 1.5deg)) translate(6px, -9px); }
}
@media (prefers-reduced-motion: reduce) { .chip { animation: none; } }