/* Small state changes that make each page's scroll story legible. */
body.type-folio .approval-row {
  border-radius: 4px;
  padding-inline: 10px;
  margin-inline: -10px;
  transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
body.type-folio .approval-row.is-current {
  background: #f2f5ff;
  transform: translateX(7px);
  box-shadow: inset 3px 0 #6477d9;
}
body.type-folio .workflow.is-walkthrough .approval { will-change: transform; }

body.type-morrow .ritual .ritual-intro { align-self: start; position: sticky; top: 145px; }
body.type-morrow .ritual details { transition: border-color .35s ease, color .35s ease; }
body.type-morrow .ritual details.is-current { border-color: #8a987a; }
body.type-morrow .ritual details.is-current summary > span {
  color: #65765e;
  transform: translateX(4px);
  transition: transform .35s ease, color .35s ease;
}
body.type-morrow .hero-product-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 57% 50%;
}
body.type-morrow .hero-art::before {
  z-index: 1;
  background: linear-gradient(90deg, #25311c33 0%, transparent 58%), linear-gradient(0deg, #25311c35, transparent 27%);
}
body.type-morrow .hero-art::after { z-index: 1; }
body.type-morrow .botanical-ring { z-index: 2; border-color: #f4f0dc70; }
body.type-morrow .art-caption { color: #fffdf5; }

body.type-offscript .schedule-row { transition: background-color .3s ease, transform .3s ease; }
body.type-offscript .schedule-row.is-current {
  background: #caff19;
  color: #171a15;
  transform: translateX(8px);
}
body.type-offscript .schedule-row.is-current .type { border-color: #171a15; }

body.type-still .day-events li { transition: color .3s ease, transform .3s ease; }
body.type-still .day-events li.is-current { color: #5b3048; transform: translateX(6px); }
body.type-still .day-events li.is-current time { color: #a65f7e; }

body.type-sumi .menu-photo img { transition: opacity .22s ease, transform .5s ease; }
body.type-sumi .menu-photo.is-changing img { opacity: .25; transform: scale(1.025); }

@media (max-width: 800px) {
  body.type-morrow .ritual .ritual-intro { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  body[class*="type-"] .approval-row,
  body[class*="type-"] .ritual details,
  body[class*="type-"] .ritual summary > span,
  body[class*="type-"] .schedule-row,
  body[class*="type-"] .day-events li,
  body[class*="type-"] .menu-photo img { transition: none; }
}