/* Path to Priesthood: Magic UI-style motion and interaction layer.
   Works on top of the existing #roadmap markup (steps list + stage card). */

#roadmap{position:relative;isolation:isolate;overflow:hidden}
#roadmap .rm-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%}
#roadmap::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(700px circle at 85% 20%,rgba(210,154,82,.13),transparent 65%),radial-gradient(520px circle at 10% 90%,rgba(58,122,150,.18),transparent 70%)}

/* Head: title shimmer + play control */
#roadmap .head h2 .rm-shine{background:linear-gradient(100deg,#fff 0%,#fff 40%,#F3C98B 50%,#fff 60%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rm-shine 7s ease-in-out infinite}
@keyframes rm-shine{0%,15%{background-position:120% 0}55%,100%{background-position:-120% 0}}
.rm-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:6px}
.rm-play{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;cursor:pointer;padding:11px 18px 11px 12px;border-radius:999px;border:1.5px solid rgba(210,154,82,.6);color:var(--white,#fff);font:800 .78rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;background:rgba(210,154,82,.08);transition:background .2s,border-color .2s,transform .2s}
.rm-play:hover{background:rgba(210,154,82,.2);border-color:var(--gold,#D29A52);transform:translateY(-1px)}
.rm-play:focus-visible{outline:2px solid var(--gold,#D29A52);outline-offset:3px}
.rm-play .ic{width:26px;height:26px;border-radius:50%;background:var(--gold,#D29A52);display:grid;place-items:center;position:relative}
.rm-play .ic::before{content:"";width:0;height:0;border-left:8px solid var(--ink,#131E29);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.rm-play[aria-pressed="true"] .ic::before{width:8px;height:9px;border:0;margin:0;background:linear-gradient(90deg,var(--ink,#131E29) 0 3px,transparent 3px 5px,var(--ink,#131E29) 5px 8px)}
.rm-hint{font-size:.85rem;color:#9FB3C0}
.rm-hint kbd{font:700 .75rem/1 var(--f-body);border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:2px 6px;color:#D5E0E7}
@media (hover:none){.rm-hint .k{display:none}}

/* Rail: animated progress line + comet */
#roadmap .steps::before{transform-origin:top;transform:scaleY(var(--rm-draw,1));transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
#roadmap .steps .rm-fill{position:absolute;left:19px;top:20px;width:2px;height:var(--rm-h,0px);background:linear-gradient(180deg,#F3C98B,var(--gold,#D29A52));border-radius:2px;transition:height .7s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 12px rgba(243,201,139,.55);pointer-events:none;z-index:0}
#roadmap .steps .rm-fill::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,#F3C98B 45%,rgba(210,154,82,0) 72%);filter:blur(.3px);animation:rm-glow 1.8s ease-in-out infinite}
@keyframes rm-glow{50%{transform:scale(1.5);opacity:.6}}
#roadmap .steps .rm-comet{position:absolute;left:16px;width:8px;height:60px;top:20px;border-radius:8px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.85),transparent);opacity:0;pointer-events:none;z-index:1;animation:rm-comet 3.4s linear infinite}
@keyframes rm-comet{0%{transform:translateY(-60px);opacity:0}15%{opacity:.8}85%{opacity:.8}100%{transform:translateY(var(--rm-h,0px));opacity:0}}
#roadmap .steps li{position:relative;z-index:2}
#roadmap .steps .dot{z-index:2}

/* Step buttons */
#roadmap .steps button{transition:color .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
#roadmap .steps button:hover{transform:translateX(6px);color:#fff}
#roadmap .steps button:hover .dot{border-color:var(--gold,#D29A52);box-shadow:0 0 0 5px rgba(210,154,82,.12)}
#roadmap .steps .dot{transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
#roadmap .steps button[aria-current="step"] .dot{transform:scale(1.12)}
#roadmap .steps button[aria-current="step"] .dot::before,#roadmap .steps button[aria-current="step"] .dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--gold,#D29A52);animation:rm-ripple 2.4s ease-out infinite;pointer-events:none}
#roadmap .steps button[aria-current="step"] .dot::after{animation-delay:1.2s}
@keyframes rm-ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
#roadmap .steps button.done .dot{background:linear-gradient(rgba(210,154,82,.18),rgba(210,154,82,.18)),var(--teal,#1F3446);font-size:0}
#roadmap .steps button.done .dot .rm-check{display:block}
#roadmap .steps .dot .rm-check{display:none;width:13px;height:7px;border-left:2.5px solid var(--gold,#D29A52);border-bottom:2.5px solid var(--gold,#D29A52);transform:translate(-1px,-3px) rotate(-45deg)}
#roadmap .steps button.done b{color:#E6EDF1}
/* autoplay timer ring on the current dot */
#roadmap .steps .rm-timer{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg);pointer-events:none;opacity:0;transition:opacity .3s}
#roadmap.rm-playing .steps button[aria-current="step"] .rm-timer{opacity:1}
#roadmap .steps .rm-timer circle{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:157}
#roadmap.rm-playing .steps button[aria-current="step"] .rm-timer circle{animation:rm-timer var(--rm-dur,5200ms) linear forwards}
@keyframes rm-timer{to{stroke-dashoffset:0}}
/* entrance */
#roadmap.rm-armed .steps li{opacity:0;transform:translateX(-14px)}
#roadmap.rm-in .steps li{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms + 150ms)}

/* Stage card: border beam + spotlight + animated content */
#roadmap .stage{isolation:isolate;overflow:hidden;border-radius:14px;box-shadow:0 30px 70px -40px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.06)}
#roadmap .stage::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:3;pointer-events:none;background:conic-gradient(from var(--rm-a,0deg),transparent 0 72%,#D29A52 84%,#F3C98B 91%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rm-beam 7s linear infinite}
@property --rm-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes rm-beam{to{--rm-a:360deg}}
#roadmap .stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(340px circle at var(--mx,70%) var(--my,30%),rgba(210,154,82,.16),transparent 70%)}
#roadmap .stage:hover::after{opacity:1}
#roadmap .stage > *{position:relative;z-index:1}
#roadmap .stage .rm-ghost{position:absolute;right:-10px;bottom:-34px;z-index:0;font:700 clamp(9rem,18vw,15rem)/1 var(--f-display);color:transparent;-webkit-text-stroke:1.5px rgba(210,154,82,.13);pointer-events:none;user-select:none;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#roadmap .stage .meter{height:5px}
#roadmap .stage .meter i{background:linear-gradient(90deg,var(--gold,#D29A52),#F3C98B);position:relative;transition:width .7s cubic-bezier(.2,.7,.2,1)}
#roadmap .stage .meter i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-100%);animation:rm-sweep 2.6s ease-in-out infinite}
@keyframes rm-sweep{60%,100%{transform:translateX(100%)}}
#roadmap .stage .num{display:inline-block;overflow:hidden;line-height:1}
#roadmap .stage .num .rm-digit{display:inline-block}
#roadmap .stage.rm-fwd .num .rm-digit{animation:rm-roll-up .6s cubic-bezier(.2,.8,.2,1) both}
#roadmap .stage.rm-back .num .rm-digit{animation:rm-roll-down .6s cubic-bezier(.2,.8,.2,1) both}
#roadmap .stage .num .rm-digit:nth-child(2){animation-delay:.06s}
@keyframes rm-roll-up{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes rm-roll-down{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
#roadmap .stage .rm-anim{animation:rm-blur-in .65s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0) * 70ms + 80ms)}
#roadmap .stage.rm-back .rm-anim{animation-name:rm-blur-in-down}
@keyframes rm-blur-in{from{opacity:0;filter:blur(8px);transform:translateY(14px)}to{opacity:1;filter:none;transform:none}}
@keyframes rm-blur-in-down{from{opacity:0;filter:blur(8px);transform:translateY(-14px)}to{opacity:1;filter:none;transform:none}}
#roadmap .stage .chip{transition:transform .2s,background .2s}
#roadmap .stage .chip:hover{transform:translateY(-2px)}

/* Next-step actions inside the card */
#roadmap .rm-next{display:grid;gap:10px;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin-top:2px}
#roadmap .rm-next small{font:700 .7rem/1 var(--f-label,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#9FB3C0}
#roadmap .rm-next .row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
#roadmap .rm-go{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:8px;background:var(--gold,#D29A52);color:var(--ink,#131E29);text-decoration:none;font:800 .8rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:13px 18px;border-radius:var(--r,4px);transition:transform .2s,box-shadow .2s}
#roadmap .rm-go::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-130%);animation:rm-btn 3.2s ease-in-out infinite}
@keyframes rm-btn{55%,100%{transform:translateX(130%)}}
#roadmap .rm-go:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(210,154,82,.8)}
#roadmap .rm-fam{color:#D5E0E7;font-weight:700;font-size:.9rem;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.3);padding-block:4px}
#roadmap .rm-fam:hover{border-bottom-color:var(--gold,#D29A52);color:#fff}
#roadmap .rm-go:focus-visible,#roadmap .rm-fam:focus-visible{outline:2px solid var(--gold,#D29A52);outline-offset:3px}

@media (max-width:900px){#roadmap .stage .rm-ghost{font-size:9rem}}
@media (prefers-reduced-motion:reduce){
  #roadmap .rm-sky,#roadmap .steps .rm-comet{display:none}
  #roadmap .head h2 .rm-shine{animation:none;color:#fff;background:none}
  #roadmap .stage::before,#roadmap .stage .meter i::after,#roadmap .rm-go::after,#roadmap .steps .rm-fill::after{animation:none}
  #roadmap .steps button[aria-current="step"] .dot::before,#roadmap .steps button[aria-current="step"] .dot::after{display:none}
  #roadmap .stage .rm-anim,#roadmap .stage .num .rm-digit{animation:none!important}
  #roadmap.rm-armed .steps li{opacity:1;transform:none}
  #roadmap .steps .rm-fill,#roadmap .steps button,#roadmap .steps .dot{transition:none}
}