/* site/assets/motion.css — entrance: title letters fall into the header, then the cards
   drop like solid blocks and land with a small squash. Pure CSS: no JS, CSP-safe.
   fill-mode is `backwards` (not `both`) so the cards' :hover transform works afterwards. */

/* Running letter index across the four words: WELCOME(0-6) TO(7-8) EZRA(9-12) DOMAIN(13-18) */
.word:nth-child(1) { --w: 0; }  .word:nth-child(2) { --w: 7; }
.word:nth-child(3) { --w: 9; }  .word:nth-child(4) { --w: 13; }
.word > span:nth-child(1) { --n: 0; } .word > span:nth-child(2) { --n: 1; }
.word > span:nth-child(3) { --n: 2; } .word > span:nth-child(4) { --n: 3; }
.word > span:nth-child(5) { --n: 4; } .word > span:nth-child(6) { --n: 5; }
.word > span:nth-child(7) { --n: 6; }
.card:nth-child(1) { --c: 0; } .card:nth-child(2) { --c: 1; } .card:nth-child(3) { --c: 2; }
.card:nth-child(4) { --c: 3; } .card:nth-child(5) { --c: 4; } .card:nth-child(6) { --c: 5; }
/* Earlier (landed) cards stack above later (falling) ones: a block slides down BEHIND the
   row already in place and shows through the gaps, instead of smearing across it. */
.card { z-index: calc(10 - var(--c)); }

@keyframes fall {
  0%   { transform: translateY(-115vh); animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
  72%  { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  82%  { transform: translateY(0) scale(1.06, .9); }   /* impact */
  91%  { transform: translateY(-4%) scale(.98, 1.03); }
  100% { transform: translateY(0) scale(1, 1); }
}
/* Cards fall a shorter way: they are clipped to the deck, so a long fall would be invisible. */
@keyframes drop {
  0%   { transform: translateY(-75vh); animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
  70%  { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  80%  { transform: translateY(0) scale(1.03, .94); }  /* heavier block, smaller bounce */
  90%  { transform: translateY(-2%) scale(.99, 1.02); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }

.word > span {
  transform-origin: 50% 100%;
  animation: fall .75s backwards;
  animation-delay: calc(150ms + (var(--w) + var(--n)) * 45ms);
}
.strap { animation: settle .6s ease 1.2s backwards; }
.card {
  transform-origin: 50% 100%;
  animation: drop .7s backwards;
  animation-delay: calc(1.35s + var(--c) * 130ms);
}
.foot { animation: settle .6s ease 2.2s backwards; }

/* Returning from our own pages (links to /#home): the visitor has seen the entrance already,
   so show the page settled. Pure CSS (:target + :has), keeps the no-JS CSP. */
html:has(#home:target) .word > span, html:has(#home:target) .card,
html:has(#home:target) .strap, html:has(#home:target) .foot { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .word > span, .card, .strap, .foot { animation: none; }
}