/* =====================================================================
   fx.css : motion + premium polish for JO ROYALTY.
   Same colors, fonts, layout and branding as app.css. Only transform and
   opacity are animated (GPU friendly, no layout jank).
   Everything here switches off automatically for prefers-reduced-motion.
   ===================================================================== */

/* ---------- 1) Lenis smooth scroll (official rules, inlined because the CSP allows no external CSS) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- 2) page-load veil: short (about 0.9 s). Pure CSS failsafe: it hides itself even if JS never runs ---------- */
#fxLoader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#0B0B0D;pointer-events:none;animation:fxVeil .45s ease 1.6s forwards}
#fxLoader img{width:min(150px,38vw);border-radius:50%;box-shadow:0 0 0 1px #D4AF3799,0 0 60px -10px #D4AF3799;animation:fxLogo 1.1s cubic-bezier(.22,.8,.24,1) both}
#fxLoader.done{animation:fxVeil .45s ease forwards}
@keyframes fxVeil{to{opacity:0;visibility:hidden}}
@keyframes fxLogo{from{opacity:0;transform:scale(.82)}60%{opacity:1}to{opacity:1;transform:scale(1)}}

/* ---------- 3) scroll reveals (added by fx.js; content is only hidden once fx.js is running) ---------- */
html.fx-on .fx-r{opacity:0;transform:translate3d(0,26px,0);transition:opacity .7s cubic-bezier(.22,.8,.24,1),transform .7s cubic-bezier(.22,.8,.24,1);transition-delay:var(--d,0s);will-change:opacity,transform}
html.fx-on .fx-r.in{opacity:1;transform:none}
/* fx.js removes .fx-r/.in right after the reveal so the hover transforms below work normally */

/* ---------- 4) card hover: lift + gold glow (same gold as the brand) ---------- */
.card.app,.card.svc,.cta{transition:transform .35s cubic-bezier(.22,.8,.24,1),border-color .35s,box-shadow .35s}
@media(hover:hover){
  .card.svc:hover,.card.app:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 22px 50px -26px #D4AF37cc,0 0 0 1px #D4AF3733}
  .card.cta:hover{box-shadow:0 22px 50px -30px #D4AF3799}
}
.svc .pic{overflow:hidden}   /* the image inside is moved by fx.js (parallax) */

/* ---------- 5) buttons: animated sheen (gold buttons) ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:not(.ghost):not(.g)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-120%)}
@media(hover:hover){.btn:not(.ghost):not(.g):hover::after{transform:translateX(120%);transition:transform .7s ease}}
.btn:active{transform:scale(.97)}

/* ---------- 6) page entrance (fx.js adds .fx-e with a --ed delay: logo > title > text > cards/buttons) ---------- */
html.fx-on:not(.fx-ready) .head .mark,html.fx-on:not(.fx-ready) .head .tag{opacity:0}   /* header waits for the load veil to lift */
html.fx-on .fx-e{animation:fxEnter .8s cubic-bezier(.22,.8,.24,1) var(--ed,0s) both}
@keyframes fxEnter{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}

/* ---------- 7) stars + reviews ---------- */
.stars{position:relative;display:inline-block;width:calc(var(--s,16px)*5 + 8px);height:var(--s,16px);vertical-align:middle;direction:ltr}
.stars .row5{display:flex;gap:2px;height:100%}.stars svg{width:var(--s,16px);height:var(--s,16px);flex:none;display:block}
.stars .bg svg{fill:#2A2A30}.stars .fg svg{fill:var(--gold);filter:drop-shadow(0 0 3px #D4AF3766)}
.stars .fg{position:absolute;top:0;left:0;height:100%;overflow:hidden;width:calc(var(--p,0)*1%);transition:width 1s cubic-bezier(.22,.8,.24,1)}
.stars .fg .row5{width:calc(var(--s,16px)*5 + 8px)}
.stars.big{--s:26px}
.rsum{display:inline-flex;align-items:center;gap:8px;margin-top:10px;background:none;border:0;padding:2px 0;color:var(--mute);cursor:pointer;font-size:13px}
button.rsum:hover{color:var(--soft)}.rsum b{color:var(--soft);font-weight:700}
.rsum.static{cursor:inherit;margin-top:8px}
.rv-head{display:flex;gap:18px;align-items:center;margin:6px 0 16px}
.rv-avg{font:700 40px/1 Cinzel,Cairo,serif;color:var(--soft)}
.rv-form{display:grid;gap:12px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.stin{display:inline-flex;gap:4px;direction:ltr;width:max-content}
.stin button{background:none;border:0;padding:3px;cursor:pointer;line-height:0;border-radius:8px;transition:transform .2s}
.stin svg{width:34px;height:34px;fill:#2A2A30;transition:fill .2s,filter .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.stin button.on svg{fill:var(--gold);filter:drop-shadow(0 0 6px #D4AF3788)}
.stin button.hv svg{transform:scale(1.18)}
.rv-count{font-size:12px;color:var(--mute);text-align:end}
.rv-list{display:grid;gap:14px}
.rv{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#0f0f12;animation:up .6s cubic-bezier(.22,.8,.24,1) both;animation-delay:calc(var(--i,0)*70ms)}
.rv .top{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.rv .nm{font-weight:700}.rv .dt{font-size:12px;color:var(--mute)}.rv p{margin-top:8px;white-space:pre-line;overflow-wrap:anywhere}
.rv .rep{margin-top:12px;margin-inline-start:14px;padding:10px 14px;border-inline-start:2px solid var(--gold);background:#D4AF3712;border-radius:0 10px 10px 0}
[dir=rtl] .rv .rep{border-radius:10px 0 0 10px}
.badge-admin{display:inline-block;background:linear-gradient(180deg,var(--soft),var(--gold));color:var(--ink);font:700 11px/1 Cairo,sans-serif;padding:3px 9px;border-radius:99px;margin-inline-end:8px;letter-spacing:.04em}
#rvdlg{width:min(640px,94vw)}

/* ---------- 8) reduced motion: show everything immediately, no veil, no transforms ---------- */
@media(prefers-reduced-motion:reduce){
  #fxLoader{display:none}
  html.fx-on .fx-r{opacity:1;transform:none;transition:none}
  html.fx-on .fx-e{animation:none}
  .stars .fg{transition:none}.rv{animation:none}
  .card.svc:hover,.card.app:hover{transform:none}
}

/* small stars inside review cards */
.stars.sm{--s:14px}

/* ---------- 9) applications showcase: logo, name under it, slowly moving with light animations ---------- */
.amq{position:relative;overflow:hidden;padding:12px 0 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.amq-track{display:flex;align-items:flex-start;width:max-content;max-width:100%;margin:0 auto;direction:ltr}
.amq.run .amq-track{max-width:none;margin:0;animation:amqMove var(--dur,40s) linear infinite;will-change:transform}
.amq.run:hover .amq-track,.amq.run.pause .amq-track,.amq.run:focus-within .amq-track{animation-play-state:paused}
@keyframes amqMove{to{transform:translate3d(-50%,0,0)}}
.atile,.agrid .atile{flex:none;width:140px;margin:0 11px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;border-radius:20px;color:var(--fg,#F2EFE6);text-decoration:none;animation:aFloat 6s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.9s)}
.alogo{position:relative;overflow:hidden;width:96px;height:96px;border-radius:26px;border:1px solid #D4AF3766;background:#0f0f12;display:grid;place-items:center;box-shadow:0 12px 30px -16px #D4AF37aa;animation:aGlow 4.5s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.7s);transition:transform .35s cubic-bezier(.22,.8,.24,1),border-color .35s}
.alogo img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none}
.alogo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#ffffff44 50%,transparent 65%);transform:translateX(-130%);animation:aShine 6s ease-in-out infinite;animation-delay:calc(var(--i,0)*.7s)}
.aname{font:600 15px/1.35 Cairo,Inter,sans-serif;color:var(--soft,#E8C766);max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;unicode-bidi:plaintext;transition:color .3s,letter-spacing .3s}
.atile.noimg{justify-content:center;height:96px;box-sizing:border-box;padding:0 12px;border:1px solid #D4AF3755;background:#141418}
.atile .rsum{margin-top:-4px;font-size:12px}
@media(hover:hover){.atile:hover .alogo{transform:scale(1.08);border-color:var(--gold,#D4AF37)}.atile:hover .aname{color:#fff}}
.atile:focus-visible{outline:2px solid var(--gold,#D4AF37);outline-offset:2px}
.agrid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 8px}
@keyframes aFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes aGlow{0%,100%{box-shadow:0 12px 30px -16px #D4AF3766}50%{box-shadow:0 16px 40px -10px #D4AF37d0}}
@keyframes aShine{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
@media(max-width:640px){.atile,.agrid .atile{width:112px;margin:0 8px}.alogo{width:78px;height:78px;border-radius:21px}.aname{font-size:13.5px}}
@media(prefers-reduced-motion:reduce){
  .amq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .amq-track,.amq.run .amq-track{animation:none;transform:none}
  .atile,.alogo,.alogo::after{animation:none}
}

/* ---- honest ratings: "New" chip, verified badge, rate box, trust counters ---- */
.newb{border:1px solid #D4AF3788;color:var(--soft);border-radius:99px;font-size:11px;font-weight:700;padding:0 10px;letter-spacing:.08em;text-transform:uppercase;line-height:20px}
.vbadge{margin-inline-start:8px;font-size:12px;font-weight:600;color:#6fd49a;white-space:nowrap}
.rrate{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rrate .stin svg{width:28px;height:28px}.rrate .rtxt{margin-top:8px;resize:vertical}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 34px}
.trust div{min-width:150px;flex:1 1 150px;max-width:230px;text-align:center;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,#1a1a1f,#121215)}
.trust b{display:block;font-size:26px;line-height:1.2;color:var(--soft);font-variant-numeric:tabular-nums}.trust .tstar{color:var(--gold);font-style:normal}
.trust span{font-size:13px;color:var(--mute)}

/* ---- unified cards (apps, services, content): picture > name > brief > price > rating; the whole card opens its page ---- */
.uc{position:relative;display:flex;flex-direction:column;transition:transform .25s,border-color .25s}
.uc .bd{flex:1;display:flex;flex-direction:column}
.uc h3{margin:0}.uc h3 a{color:inherit;text-decoration:none}
.uc .stretch::after{content:"";position:absolute;inset:0;z-index:1}
.uc .rsum{position:relative;z-index:2;margin-top:auto;padding-top:10px}
.uc .price{margin-top:auto;padding-top:10px}.uc .price+.rsum{margin-top:0;padding-top:6px}
.uc .cs{position:relative;z-index:2}.uc .csb,.uc .csd{z-index:3}
.uc .cl{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svc .pic.lg img{object-fit:contain;padding:22px;box-sizing:border-box}
@media(hover:hover){.uc:hover{transform:translateY(-4px);border-color:#D4AF3799}}
.uc:focus-within{border-color:var(--gold,#D4AF37)}
.dpimg{display:block;width:100%;max-height:460px;object-fit:contain;border-radius:16px;border:1px solid var(--line);background:#0f0f12}
.feat.big{font-size:16px;gap:8px;color:var(--fg,#F2EFE6)}
@media(prefers-reduced-motion:reduce){.uc{transition:none}.uc:hover{transform:none}}
.w.sec{padding-inline:20px}