/* Ascend Faith — shared motion layer (website + app UI kits).
   Pairs with motion/motion.jsx (window.AF_MOTION). Token-driven: easing/durations come from tokens/spacing.css.
   Everything here degrades to static under prefers-reduced-motion. */

/* Lenis smooth scroll (website only) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Words pull-up (ported from 21st.dev PrismaHero WordsPullUp) ---------- */
.afm-words{display:inline-flex;flex-wrap:wrap}
.afm-word{display:inline-block;position:relative;overflow:hidden;padding-top:.06em;margin-top:-.06em;vertical-align:top}
.afm-word>span{display:inline-block;transform:translateY(105%);opacity:0;transition:transform .9s var(--ease-ascend) var(--wd,0ms),opacity .6s var(--ease-out) var(--wd,0ms)}
.afm-words.is-in .afm-word>span{transform:none;opacity:1}
.afm-mark-sup{align-self:flex-start;width:.26em;height:.26em;margin:.1em 0 0 .06em;object-fit:contain;filter:drop-shadow(0 0 .12em rgba(255,208,82,.55));opacity:0;transform:scale(.4) rotate(-20deg);transition:opacity .6s var(--ease-out) var(--wd,0ms),transform 1s var(--ease-bounce) var(--wd,0ms)}
.afm-words.is-in .afm-mark-sup{opacity:1;transform:none}

/* Screen-reader copy for split/animated text (the animated words are aria-hidden) */
.afm-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Keyboard focus — visible gold ring on every custom control */
.afm-pill:focus-visible,.ah-notch__item:focus-visible,.ah-textlink:focus-visible,.word-card:focus-visible,.glass-row:focus-visible,.v2-switch:focus-visible,.replay:focus-visible{outline:2px solid #ffd052;outline-offset:3px}

/* ---------- Scroll reveal (works inside any scroll container, incl. phone screens) ---------- */
.afm-rv{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .6s var(--ease-out) var(--d,0ms),transform .9s var(--ease-ascend) var(--d,0ms)}
.afm-rv.in{opacity:1;transform:none}

/* ---------- Floating iconic figures ---------- */
.afm-float-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.afm-fig{position:absolute;color:var(--accent-gold-bright,#ffd052);opacity:var(--o,.5);will-change:transform;filter:drop-shadow(0 0 10px rgba(255,208,82,.35))}
.afm-fig>svg{display:block;width:100%;height:100%;animation:afmBob var(--dur,7s) var(--ease-in-out) var(--delay,0s) infinite alternate}
@keyframes afmBob{0%{transform:translateY(0) rotate(calc(var(--r,6deg) * -1))}100%{transform:translateY(calc(var(--amp,18px) * -1)) rotate(var(--r,6deg))}}
@keyframes afmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-.08em)}}

/* ---------- Light rays (rotating god-rays behind art) ---------- */
.afm-rays{position:absolute;inset:-40%;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,208,82,.16) 0deg 4deg,transparent 4deg 18deg);-webkit-mask:radial-gradient(circle at 50% 50%,#000 0,transparent 60%);mask:radial-gradient(circle at 50% 50%,#000 0,transparent 60%);animation:afmSpin 60s linear infinite}
@keyframes afmSpin{to{transform:rotate(360deg)}}

/* ---------- Grain + vignette overlays ---------- */
.afm-noise{position:absolute;inset:0;pointer-events:none;background-image:var(--texture-grain);background-size:220px;mix-blend-mode:overlay;opacity:.7;animation:afmGrain .9s steps(3) infinite}
@keyframes afmGrain{0%{background-position:0 0}33%{background-position:-40px 30px}66%{background-position:30px -50px}100%{background-position:0 0}}
.afm-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.65) 100%)}

/* ---------- Ken Burns idle drift ---------- */
.afm-kenburns{animation:afmKen 24s var(--ease-in-out) infinite alternate}
@keyframes afmKen{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}

/* ---------- Drifting clouds ---------- */
.afm-drift{animation:afmDrift 40s linear infinite alternate}
@keyframes afmDrift{from{transform:scale(1.15) translateX(-3%)}to{transform:scale(1.15) translateX(3%)}}

/* ---------- Tilt card (pointer 3D + gold glare) ---------- */
.afm-tilt{position:relative;transform-style:preserve-3d;transition:transform .5s var(--ease-ascend);will-change:transform}
.afm-tilt__glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--ease-out);background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,208,82,.22),transparent 45%);mix-blend-mode:screen;z-index:4}
.afm-tilt:hover .afm-tilt__glare{opacity:1}

/* ---------- Glass chip / panel ---------- */
.afm-glass{background:rgba(17,17,17,.46);border:1px solid rgba(247,247,243,.14);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 20px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
[data-theme="light"] .afm-glass{background:rgba(247,244,236,.62);border-color:rgba(17,17,17,.1)}

/* ---------- Pill CTA (from PrismaHero "Join the lab") ---------- */
.afm-pill{display:inline-flex;align-items:center;gap:10px;padding:5px 5px 5px 22px;border:0;border-radius:999px;background:var(--accent-gold-bright,#ffd052);color:#0a0a0a;font:600 15px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:gap .45s var(--ease-bounce),box-shadow .4s var(--ease-out),transform .45s var(--ease-bounce);box-shadow:0 0 0 0 rgba(255,208,82,.0)}
.afm-pill:hover{gap:16px;box-shadow:0 0 40px rgba(255,208,82,.35);transform:translateY(-2px)}
.afm-pill:active{transform:scale(.96)}
.afm-pill__dot{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#0a0a0a;color:#f1ebdd;transition:transform .45s var(--ease-bounce)}
.afm-pill:hover .afm-pill__dot{transform:scale(1.1) rotate(-12deg)}
.afm-pill__dot .af-icon{font-size:18px}
.afm-pill--ghost{background:transparent;color:var(--fg-1);box-shadow:inset 0 0 0 1px var(--border-strong,rgba(247,247,243,.35))}
.afm-pill--ghost .afm-pill__dot{background:var(--fg-1);color:var(--bg-page)}

/* ---------- Gold shimmer text ---------- */
.afm-shimmer{background:linear-gradient(100deg,#d4a72c 0%,#ffd052 30%,#fff3c4 45%,#ffd052 60%,#d4a72c 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:afmShimmer 5s var(--ease-in-out) infinite}
@keyframes afmShimmer{0%{background-position:100% 0}100%{background-position:-120% 0}}

/* ---------- Particle burst (Amen / RSVP) ---------- */
.afm-burst{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:9999}
.afm-burst i{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffd052;box-shadow:0 0 8px rgba(255,208,82,.8);animation:afmBurst .9s var(--ease-out) forwards}
.afm-burst b{position:absolute;transform:translate(-50%,-50%);font:600 12px/1 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:#ffd052;white-space:nowrap;animation:afmWord 1.1s var(--ease-ascend) forwards}
@keyframes afmBurst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
@keyframes afmWord{0%{opacity:0;transform:translate(-50%,-30%)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-260%)}}

/* ---------- Splash (app) ---------- */
.afm-splash{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#0a0a0a;color:#f7f7f3;animation:afmSplashOut .7s var(--ease-in-out) 2.1s forwards}
.afm-splash__ring{position:absolute;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,208,82,.35);animation:afmRing 2.2s var(--ease-out) .2s both}
.afm-splash__mark{width:84px;height:84px;animation:afmRise 1.1s var(--ease-ascend) .1s both;filter:drop-shadow(0 0 24px rgba(255,208,82,.45))}
.afm-splash__name{font:400 22px/1 var(--font-display);letter-spacing:.32em;text-transform:uppercase}
.afm-splash__sub{font:600 10px/1 var(--font-ui);letter-spacing:.3em;text-transform:uppercase;color:#c9c4b9;opacity:0;animation:afmFade .8s var(--ease-out) 1.1s forwards}
@keyframes afmRise{from{transform:translateY(60px) scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes afmRing{from{transform:scale(.3);opacity:0}40%{opacity:1}to{transform:scale(2.4);opacity:0}}
@keyframes afmFade{to{opacity:1}}
@keyframes afmSplashOut{to{opacity:0;visibility:hidden}}

/* ---------- Live pulse ---------- */
.afm-pulse{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live,#c0564c)}
.afm-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:afmPulse 1.6s var(--ease-out) infinite}
@keyframes afmPulse{to{transform:scale(3);opacity:0}}

/* ---------- Scroll progress (website) ---------- */
.afm-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#d4a72c,#ffd052);z-index:900;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .afm-word>span,.afm-rv{opacity:1!important;transform:none!important;transition:none!important}
  .afm-fig>svg,.afm-rays,.afm-noise,.afm-kenburns,.afm-drift,.afm-shimmer,.afm-pulse::after{animation:none!important}
  .afm-mark-sup{opacity:1!important;transform:none!important}
  .afm-splash{display:none}
}