/* Scroll life (js/scroll-life.js): the hidden start state, and the entrances drawn on pseudo-elements.
   Nothing here applies until the script has marked an element, so the page reads fine without it. */

.life-wait { opacity: 0; }

/* The Kalamkari cloth is laid down under the notebook. */
.writing-desk.life-css-wait::before { opacity: 0; }
.writing-desk.life-css-play::before { animation: life-cloth 1.3s cubic-bezier(.16, 1, .3, 1) .15s both; }
@keyframes life-cloth {
  from { opacity: 0; translate: -36px 34px; rotate: -10deg; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

/* The stamp lands on the project brief, and the zari band runs along its top. */
#contact .contact-brief.life-css-wait::after { opacity: 0; }
#contact .contact-brief.life-css-play::after { animation: life-stamp .7s cubic-bezier(.34, 1.56, .64, 1) .75s both; }
#contact .contact-brief.life-css-wait::before { clip-path: inset(0 100% 0 0); }
#contact .contact-brief.life-css-play::before { animation: life-zari 1.1s cubic-bezier(.65, 0, .35, 1) .35s both; }
@keyframes life-stamp {
  0% { opacity: 0; scale: 1.9; rotate: 16deg; }
  60% { opacity: 1; scale: .9; rotate: -3deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes life-zari {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Reduced motion, access mode and print: everything simply shows. */
@media (prefers-reduced-motion: reduce) {
  .life-wait { opacity: 1 !important; }
  .life-css-wait::before, .life-css-wait::after, .life-css-play::before, .life-css-play::after { opacity: 1 !important; clip-path: none !important; animation: none !important; }
}
@media print {
  .life-wait { opacity: 1 !important; }
  .life-css-wait::before, .life-css-wait::after { opacity: 1 !important; clip-path: none !important; }
}
html[data-access="on"] .life-wait { opacity: 1 !important; }