/* Optional effects, separate from structure. Content remains visible without JS. */
@media(prefers-reduced-motion:no-preference) {
  .m31f[data-effect=reveal] .m31f-reveal {
    animation:m31f-arrive .6s ease-out both
  }

  @keyframes m31f-arrive {
    from {
      opacity:.25;
      transform:translateY(18px)
    }

    to {
      opacity:1;
      transform:none
    }

  }

  .m31f[data-effect=hover] .m31f-link,.m31f[data-effect=hover] .m31f-btn {
    transition:background-color .2s,transform .2s
  }

  .m31f[data-effect=hover] .m31f-link:focus-visible {
    transform:translateY(-3px)
  }

}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .m31f[data-effect=hover] .m31f-link:hover,.m31f[data-effect=hover] .m31f-btn:hover {
    transform:translateY(-3px)
  }

}

@media(prefers-reduced-motion:reduce) {
  .m31f * {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }

}

/* Photo effects crop inside the original image rectangle, including old section effects. */
@property --m31-photo-zoom{syntax:"<number>";inherits:false;initial-value:1}
.render-section:is([data-effect="image-crop"],[data-effect="hover"]) img:not([data-element-effect]){--m31-photo-zoom:1;transform-origin:50% 50%!important;transform:scale(var(--m31-photo-zoom))!important;clip-path:inset(calc(50% - 50% / var(--m31-photo-zoom)))!important;transition:--m31-photo-zoom var(--duration,700ms) ease!important}
@media(hover:hover){.render-section[data-effect="image-crop"] img:not([data-element-effect]):hover{--m31-photo-zoom:1.055}.render-section[data-effect="hover"] img:not([data-element-effect]):hover{--m31-photo-zoom:1.02}}
@media(prefers-reduced-motion:reduce){.render-section:is([data-effect="image-crop"],[data-effect="hover"]) img{--m31-photo-zoom:1!important;clip-path:inset(0)!important;transform:none!important;transition:none!important}}