/* Tasteful, slow Roman motion for Faith Fit pages.
   Decorative only: transform/opacity, pointer-events stay clear, reduced-motion off. */
#rm-dust{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.55;
}

#app.view.in{animation:rmPage .9s cubic-bezier(.22,.7,.2,1) both}

@keyframes rmPage{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

.rm-reveal{
  opacity:0;
  transform:translateY(16px);
}
.rm-reveal.rm-in{
  animation:rmReveal .9s cubic-bezier(.22,.7,.2,1) both;
  animation-delay:var(--rm-d,0s);
}
@keyframes rmReveal{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* Animate the existing roman.css laurel under .pad>h2 / .pad>h1. Do not replace it. */
.pad>h2.rm-title:not(.rm-in)::after,
.pad>h1.rm-title:not(.rm-in)::after,
.sh.rm-title:not(.rm-in)::after,
.nfh h1.rm-title:not(.rm-in)::after{
  transform:scaleX(0);transform-origin:left center;opacity:0;
}
.pad>h2.rm-title.rm-in::after,
.pad>h1.rm-title.rm-in::after,
.sh.rm-title.rm-in::after,
.nfh h1.rm-title.rm-in::after{
  transform-origin:left center;
  animation:rmUnder 1s cubic-bezier(.22,.7,.2,1) .12s both;
}
.nfh h1.rm-title{position:relative;display:inline-block}
.nfh h1.rm-title::after{
  content:"";display:block;width:100%;max-width:300px;height:18px;margin-top:8px;
  background:url(img/roman/laurel.svg) 0 50%/auto 18px no-repeat,linear-gradient(90deg,rgba(201,162,74,.7),transparent) 0 50%/100% 1px no-repeat;
  pointer-events:none;
}
@keyframes rmUnder{
  from{transform:scaleX(0);opacity:0}
  to{transform:scaleX(1);opacity:1}
}

.rm-shimmer{position:relative;overflow:hidden}
.rm-shimmer::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(110deg,transparent 28%,rgba(232,207,138,.22) 48%,transparent 68%);
  transform:translateX(-130%);
  animation:rmShimmer 5.5s ease-in-out 1.4s infinite;
}
@keyframes rmShimmer{
  0%,72%{transform:translateX(-130%)}
  100%{transform:translateX(130%)}
}

.rm-lift{transition:transform .7s cubic-bezier(.22,.7,.2,1),box-shadow .7s cubic-bezier(.22,.7,.2,1),border-color .7s}
@media (hover:hover) and (pointer:fine){
  .rm-lift:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(201,162,74,.2)}
  a.btn.rm-lift:hover,button.btn.rm-lift:hover,button.rm-lift.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(201,162,74,.22)}
}
.rm-lift:active{transform:translateY(-1px) scale(.99);transition-duration:.4s}

.rm-float{animation:rmFloat 8s ease-in-out infinite}
.rm-float:nth-child(2n){animation-delay:-2.4s}
.rm-float:nth-child(3n){animation-delay:-4.8s}
.rm-float.rm-off{animation-play-state:paused}
@keyframes rmFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

.rm-ring{position:relative}
.rm-ring::before{
  content:"";position:absolute;inset:-10px;border-radius:inherit;
  pointer-events:none;z-index:0;
  box-shadow:0 0 0 1px rgba(201,162,74,.28),0 0 22px rgba(201,162,74,.22),inset 0 0 18px rgba(201,162,74,.08);
  animation:rmRing 2.4s ease-in-out infinite;
  opacity:.55;
}
.ck-face.rm-ring::before,.ck-big.rm-ring::before{
  border-radius:50%;
  inset:-16px;
}
.rm-ring.rm-off::before{animation-play-state:paused}
@keyframes rmRing{
  0%,100%{opacity:.35;transform:scale(.97)}
  50%{opacity:.85;transform:scale(1)}
}

.ckc svg path,.tk svg path,.wp svg path,.rm-ci-mark svg path{
  stroke-dasharray:28;
  stroke-dashoffset:28;
}
.ck.on .ckc svg path,.dn .tk svg path,.wp.full svg path,.rm-ci-mark.rm-in svg path{
  animation:rmCheck .95s cubic-bezier(.22,.7,.2,1) both;
}
@keyframes rmCheck{
  from{stroke-dashoffset:28}
  to{stroke-dashoffset:0}
}

.rm-ci-mark{
  display:inline-flex;vertical-align:middle;margin-left:.45rem;
  width:22px;height:22px;pointer-events:none;
  color:var(--or,#c9a24a);
}
.rm-ci-mark svg{width:22px;height:22px;display:block}


.exl a.rm-reveal{transform:translateY(10px)}
.cat.rm-lift,.exl a.rm-lift{transition:transform .7s cubic-bezier(.22,.7,.2,1),box-shadow .7s,border-color .7s,background-color .7s}
.lockp .lockic{display:inline-block;transform-origin:center;animation:rmLock 2.4s ease-in-out infinite;pointer-events:none}
.lockp.rm-off .lockic, .lockic.rm-off{animation-play-state:paused}
@keyframes rmLock{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(201,162,74,0))}
  50%{transform:scale(1.06);filter:drop-shadow(0 0 10px rgba(201,162,74,.45))}
}
.gal img,.gal picture{opacity:0;transform:translateY(12px)}
.gal.rm-in img,.gal.rm-in picture{animation:rmReveal .9s cubic-bezier(.22,.7,.2,1) both}
.gal.rm-in img:nth-child(2),.gal.rm-in picture:nth-child(2){animation-delay:.12s}
.gal.rm-in img:nth-child(3),.gal.rm-in picture:nth-child(3){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){
  #rm-dust{display:none}
  #app.view.in,.rm-reveal,.rm-reveal.rm-in,
  .pad>h2.rm-title::after,.pad>h1.rm-title::after,.sh.rm-title::after,.nfh h1.rm-title::after,
  .rm-shimmer::after,
  .rm-float,.rm-ring::before,.lockp .lockic,.gal img,.gal picture,.ck.on .ckc svg path,.dn .tk svg path,
  .wp.full svg path,.rm-ci-mark.rm-in svg path{
    animation:none!important;transition:none!important;
  }
  .rm-reveal,.rm-reveal.rm-in,.gal img,.gal picture{opacity:1;transform:none}
  .lockp .lockic{transform:none;filter:none}
  .pad>h2.rm-title::after,.pad>h1.rm-title::after,.sh.rm-title::after,.nfh h1.rm-title::after{transform:none;opacity:1}
  .ckc svg path,.tk svg path,.wp svg path,.rm-ci-mark svg path{stroke-dashoffset:0}
  .rm-lift:hover,.rm-lift:active{transform:none;box-shadow:none}
}