/* Progressive enhancement: headings stay visible without JavaScript or observers.
   No text splitting, filters or persistent transforms: the final text stays sharp. */
.trielia-title {
  --trielia-title-rise: 28px;
  --trielia-title-tilt: 5deg;
  --trielia-title-duration: 850ms;
}
h1.trielia-title {
  --trielia-title-rise: 38px;
  --trielia-title-tilt: 7deg;
  --trielia-title-duration: 1000ms;
}
h3.trielia-title {
  --trielia-title-rise: 18px;
  --trielia-title-tilt: 3deg;
  --trielia-title-duration: 720ms;
}
.trielia-title-entering {
  transform-origin: 50% 100%;
  animation: trielia-title-arrive var(--trielia-title-duration) cubic-bezier(.16, 1, .3, 1) var(--trielia-title-delay, 0ms) both;
}
@keyframes trielia-title-arrive {
  from {
    opacity: .08;
    transform: perspective(900px) translateY(var(--trielia-title-rise)) rotateX(var(--trielia-title-tilt));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Same choreography on touch screens, with a smaller travel distance. */
@media (max-width: 700px) {
  .trielia-title { --trielia-title-rise: 22px; }
  h1.trielia-title { --trielia-title-rise: 28px; }
  h3.trielia-title { --trielia-title-rise: 16px; }
}
@media (prefers-reduced-motion: reduce), print {
  .trielia-title-entering {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}