/* Motion + "path to priesthood" for the ordination band (homepage EN/ES) and /pray-for-deacons.
   Script: /ordination-motion.js. Everything here is skipped for prefers-reduced-motion. */

/* ---------- scroll reveal ---------- */
.om [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
.om [data-reveal="left"]{transform:translateX(-30px)}
.om [data-reveal="right"]{transform:translateX(30px)}
.om [data-reveal="zoom"]{transform:scale(.94)}
.om [data-reveal].in{opacity:1;transform:none}

/* ---------- path to priesthood ---------- */
.ord-path{grid-column:1/-1;margin:clamp(18px,3vw,30px) auto 0;width:100%;max-width:820px;text-align:center}
.ord-path-msg{font:600 clamp(1.5rem,3.2vw,2.3rem)/1.15 var(--f-display);color:#fff;letter-spacing:-.01em}
.ord-path-msg em{color:var(--gold);font-style:italic}
.ord-path-sub{margin-top:8px;color:#c9d5dd;font-size:1rem}
.on-light .ord-path-msg{color:var(--teal)} .on-light .ord-path-sub{color:var(--muted)}
.ord-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.ord-steps::before,.ord-steps::after{content:"";position:absolute;top:27px;left:16.66%;height:3px;border-radius:3px}
.ord-steps::before{right:16.66%;background:rgba(210,154,82,.25)}
.ord-steps::after{width:0;background:linear-gradient(90deg,#f0d394,var(--gold));box-shadow:0 0 14px rgba(210,154,82,.7);transition:width 1.8s cubic-bezier(.3,.7,.2,1) .3s}
.ord-path.in .ord-steps::after{width:33.33%}
.ord-steps li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.ord-dot{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.35rem;line-height:1;
  background:#1b2c3c;border:2px solid rgba(210,154,82,.45);color:rgba(230,194,122,.7);transition:transform .6s,background .6s,border-color .6s,color .6s}
.on-light .ord-dot{background:#fff}
.ord-steps b{font:700 .8rem/1.2 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-top:4px}
.on-light .ord-steps b{color:var(--teal)}
.ord-steps small{font-size:.86rem;color:#b9c7d1}
.on-light .ord-steps small{color:var(--muted)}
.ord-steps .done .ord-dot{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.ord-path.in .ord-steps .now .ord-dot{background:linear-gradient(160deg,#f0d394,#d29a52);border-color:#f0d394;color:var(--ink);transform:scale(1.14);animation:ordPulse 2.4s ease-in-out 2s infinite}
.ord-steps .now b{color:var(--gold)}
.ord-steps .next .ord-dot{border-style:dashed}
@keyframes ordPulse{0%,100%{box-shadow:0 0 0 0 rgba(210,154,82,.55)}50%{box-shadow:0 0 0 14px rgba(210,154,82,0)}}

/* ---------- photo arches: gentle tilt + light sweep ---------- */
.om .ord-arch,.om .pd-arch{position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
.om .ord-arch::after,.om .pd-arch::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,240,200,.45) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 7s ease-in-out 1.5s infinite}
.om .ord-man:nth-child(2) .ord-arch::after,.om li:nth-child(2) .pd-arch::after{animation-delay:2.6s}
@keyframes sweep{0%,70%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}

/* ---------- background art with slow drift (Ken Burns) ---------- */
.om-art{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.om-art img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:.38;transform:scale(1.08);animation:drift 26s ease-in-out infinite alternate}
.om-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,30,41,.96) 0%,rgba(19,30,41,.82) 40%,rgba(19,30,41,.45) 100%)}
@keyframes drift{from{transform:scale(1.08) translate(0,0)}to{transform:scale(1.16) translate(-2%,-1.5%)}}

/* ---------- floating embers (candle sparks) ---------- */
.om-embers{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.om-embers i{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#ffe7a8,#d29a52 60%,transparent 70%);
  opacity:0;animation:rise var(--t,9s) linear var(--d,0s) infinite;left:var(--x,50%)}
@keyframes rise{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:.9}100%{transform:translate(var(--dx,20px),-460px) scale(1.1);opacity:0}}

/* ---------- count-up numbers pop ---------- */
.om .pd-tally b.bump{animation:bump .5s ease}
@keyframes bump{50%{transform:scale(1.25)}}

/* ---------- buttons: soft gold shine on hover ---------- */
.om .btn-gold{position:relative;overflow:hidden}
.om .btn-gold::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s}
.om .btn-gold:hover::after{left:130%}

@media (max-width:560px){.ord-dot{width:46px;height:46px;font-size:1.1rem}.ord-steps::before,.ord-steps::after{top:22px}.ord-steps b{font-size:.7rem;letter-spacing:.12em}.ord-steps small{font-size:.76rem}}
@media (prefers-reduced-motion:reduce){
  .om [data-reveal]{opacity:1;transform:none;transition:none}
  .om-art img,.om .ord-arch::after,.om .pd-arch::after,.om-embers,.ord-path.in .ord-steps .now .ord-dot{animation:none}
  .om-embers{display:none}
  .ord-steps::after{transition:none}
}