/* Opening splash, login page only: a bid packet assembling itself in 3D -- CSS transforms, no library, no images.
   It is decoration over a page that must stay usable: the form is in the DOM and focusable the whole time, any key
   or click ends it, it ends itself after 2.6 s, it runs once per browser session, and prefers-reduced-motion skips
   the motion entirely. */
.splash {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: radial-gradient(1200px 700px at 50% 42%, #24314a 0%, #161d2c 55%, #10141f 100%);
  animation: splash-out .55s ease-in 2.05s forwards;
}
.splash-inner { display: grid; place-items: center; gap: 30px; transform: translateY(-2vh); }

/* the stage: a shallow perspective so the sheets read as paper on a desk, not a carousel */
.splash-stage { width: 300px; height: 240px; perspective: 1100px; perspective-origin: 50% 40%; }
.splash-deck {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: deck-turn 2.6s cubic-bezier(.22, .8, .2, 1) forwards;
}
.sheet {
  position: absolute; left: 50%; top: 50%; width: 172px; height: 222px; margin: -111px 0 0 -86px;
  border-radius: 3px; background: linear-gradient(160deg, #fdfcf8 0%, #efece2 100%);
  box-shadow: 0 18px 30px rgba(0, 0, 0, .45); transform-style: preserve-3d;
  opacity: 0; animation: sheet-in .85s cubic-bezier(.2, .9, .25, 1) forwards;
}
/* each sheet lands on its own step of the stack -- the packet building up, one document at a time */
.sheet:nth-child(1) { animation-delay: .10s; --lift: 0px;  --tilt: 0deg;   --slide: 0px; }
.sheet:nth-child(2) { animation-delay: .26s; --lift: 17px; --tilt: -2.4deg; --slide: 9px; }
.sheet:nth-child(3) { animation-delay: .42s; --lift: 34px; --tilt: 2.1deg;  --slide: -8px; }
.sheet:nth-child(4) { animation-delay: .58s; --lift: 51px; --tilt: -1.4deg; --slide: 5px; }
.sheet:nth-child(5) { animation-delay: .74s; --lift: 68px; --tilt: 1.7deg;  --slide: -4px; }
/* the top sheet is the priced one: the accent edge and a peso line */
.sheet:nth-child(5) { background: linear-gradient(160deg, #fffefb 0%, #f4f1e7 100%); box-shadow: 0 22px 38px rgba(0, 0, 0, .5), 0 0 0 1px rgba(47, 93, 138, .35); }

/* ruled lines: a document's text, abstracted */
.sheet::before {
  content: ""; position: absolute; left: 17px; right: 17px; top: 40px; height: 112px;
  background: repeating-linear-gradient(to bottom, #c9c4b4 0 1px, transparent 1px 14px);
  opacity: .75;
}
.sheet::after {   /* the header band */
  content: ""; position: absolute; left: 17px; top: 20px; width: 70px; height: 7px; border-radius: 1px; background: #2f5d8a; opacity: .8;
}
.sheet .amount {
  position: absolute; left: 17px; right: 17px; bottom: 21px; height: 11px; border-radius: 1px;
  background: linear-gradient(90deg, #2f5d8a 0 62%, transparent 62%); opacity: .55;
}
.sheet:nth-child(5) .amount { background: linear-gradient(90deg, #3f7d5c 0 78%, transparent 78%); opacity: .95; }

.splash-word {
  font: 800 34px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; opacity: 0; animation: word-in .7s ease-out .85s forwards;
}
.splash-word b { color: #7fb2e0; font-weight: 800; }
.splash-line {
  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .03em; color: #9fb0c8; text-align: center;
  opacity: 0; animation: word-in .7s ease-out 1.15s forwards;
}
.splash-skip {
  position: fixed; right: 18px; bottom: 16px; font: 12px system-ui, sans-serif; letter-spacing: .08em;
  color: #7f8ca3; text-transform: uppercase; opacity: 0; animation: word-in .5s ease-out 1.5s forwards;
}
.splash-skip .on-touch { display: none; }
@media (hover: none), (pointer: coarse) {   /* a phone has no keys to press */
  .splash-skip .on-keys { display: none; }
  .splash-skip .on-touch { display: inline; }
}

@keyframes sheet-in {
  from { opacity: 0; transform: translate3d(calc(var(--slide) * 6), 130px, -260px) rotateX(74deg) rotate(var(--tilt)); }
  to   { opacity: 1; transform: translate3d(var(--slide), calc(var(--lift) * -1), calc(var(--lift) * 1.6)) rotateX(58deg) rotate(var(--tilt)); }
}
@keyframes deck-turn {
  from { transform: rotateY(-26deg) rotateX(4deg) scale(.96); }
  60%  { transform: rotateY(6deg) rotateX(2deg) scale(1); }
  to   { transform: rotateY(-4deg) rotateX(3deg) scale(1); }
}
@keyframes word-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }

/* dismissed by a key, a click, or the script: gone at once, and it must never trap the page */
.splash.is-done { animation: none; opacity: 0; visibility: hidden; transition: opacity .28s ease-in; }

@media (prefers-reduced-motion: reduce) {
  .splash, .splash-deck, .sheet, .splash-word, .splash-line, .splash-skip { animation-duration: .01ms; animation-delay: 0s; }
  .sheet { opacity: 1; transform: translate3d(var(--slide), calc(var(--lift) * -1), 0) rotateX(58deg) rotate(var(--tilt)); }
}
@media (max-width: 560px) {
  .splash-stage { transform: scale(.68); width: 240px; height: 190px; }
  .splash-inner { gap: 16px; }
  .splash-word { font-size: 24px; letter-spacing: .16em; }
  .splash-line { font-size: 12px; padding: 0 22px; }
}