/* HM Trading — motion layer (anim.js adds the elements these rules style) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fxVtOut .35s ease both}
::view-transition-new(root){animation:fxVtIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes fxVtOut{to{opacity:0;transform:scale(.985);filter:blur(4px)}}
@keyframes fxVtIn{from{opacity:0;transform:translateY(14px)}}

/* intro loader (once per visit) */
.fx-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#0b0906;pointer-events:none}
.fx-intro .lg{position:relative;width:92px;height:92px;display:grid;place-items:center;border-radius:26px;background:linear-gradient(135deg,#f9d976,#e8b53a 45%,#b8860b);color:#2a1c00;font:900 30px/1 -apple-system,Inter,sans-serif;letter-spacing:-.04em;animation:fxPop .7s cubic-bezier(.2,1.4,.3,1) both;box-shadow:0 0 0 0 rgba(242,193,78,.6),0 30px 80px -10px rgba(242,193,78,.55)}
.fx-intro .lg:after{content:"";position:absolute;inset:-14px;border-radius:34px;border:2px solid transparent;border-top-color:#f2c14e;border-right-color:#f2c14e;animation:fxSpin .9s linear infinite}
.fx-intro .tx{position:absolute;top:calc(50% + 74px);left:0;right:0;text-align:center;color:#f2c14e;font:700 12px/1 -apple-system,Inter,sans-serif;letter-spacing:.5em;text-transform:uppercase;animation:fxFadeUp .6s .25s both}
.fx-intro.out{animation:fxCurtain .75s cubic-bezier(.7,0,.2,1) forwards}
.fx-intro.out .lg{animation:fxZoomOut .6s cubic-bezier(.7,0,.2,1) forwards}
@keyframes fxPop{from{transform:scale(.3) rotate(-25deg);opacity:0}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxFadeUp{from{opacity:0;transform:translateY(10px)}}
@keyframes fxCurtain{to{clip-path:inset(0 0 100% 0)}}
@keyframes fxZoomOut{to{transform:scale(2.4);opacity:0}}

/* scroll progress */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#b8860b,#f9d976,#fff6d1,#f2c14e);box-shadow:0 0 12px rgba(242,193,78,.8)}

/* cursor glow + ring (desktop) */
.fx-glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(closest-side,rgba(242,193,78,.18),transparent);transition:opacity .4s;will-change:transform}
html[data-theme=dark] .fx-glow{background:radial-gradient(closest-side,rgba(242,193,78,.13),transparent)}
.fx-ring{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid rgba(200,144,26,.75);pointer-events:none;z-index:9998;transition:width .25s,height .25s,margin .25s,background .25s,border-color .25s,opacity .3s;will-change:transform;mix-blend-mode:multiply}
html[data-theme=dark] .fx-ring{mix-blend-mode:screen;border-color:rgba(249,217,118,.8)}
.fx-ring.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(242,193,78,.16);border-color:transparent}
.fx-dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#c8901a;pointer-events:none;z-index:9998;will-change:transform}
.fx-ring.down{width:22px;height:22px;margin:-11px 0 0 -11px}

/* gold dust canvas */
.fx-dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}

/* card spotlight + shine */
.fx-host{isolation:isolate}
.fx-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;overflow:hidden;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(242,193,78,.20),transparent 45%)}
.fx-spot:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,246,209,.55) 50%,transparent 65%);transform:translateX(-120%)}
.fx-host:hover>.fx-spot{opacity:1}
.fx-host.fx-seen>.fx-spot{opacity:1}
.fx-host.fx-seen>.fx-spot:after{animation:fxSweep 1.3s .2s cubic-bezier(.4,0,.2,1) forwards}
.fx-host.fx-done>.fx-spot{opacity:0}
.fx-host:hover>.fx-spot{opacity:1}
@keyframes fxSweep{to{transform:translateX(120%)}}
.fx-tilt{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .35s!important;transform-style:preserve-3d}

/* split-word headings */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.fx-w>span{display:inline-block;transform:translateY(105%) rotate(4deg);opacity:0;transition:transform .9s cubic-bezier(.2,.9,.2,1),opacity .6s;transition-delay:calc(var(--i)*55ms)}
.fx-split.fx-on .fx-w>span{transform:none;opacity:1}

/* scramble eyebrow + growing line */
.eyebrow.fx-ey:before{width:0;transition:width .9s .1s cubic-bezier(.2,.8,.2,1)}
.eyebrow.fx-ey.fx-on:before{width:24px}

/* marquee */
.fx-marq{position:relative;margin:40px 0 0;padding:14px 0;overflow:hidden;transform:rotate(-1.6deg);background:var(--grad);box-shadow:0 20px 50px -20px rgba(184,134,11,.6);z-index:2}
.fx-marq.b{transform:rotate(1.2deg);margin-top:-6px;background:#16130c;box-shadow:none;z-index:1}
html[data-theme=dark] .fx-marq.b{background:#1b1710}
.fx-marq .tr{display:flex;width:max-content;animation:fxMarq 32s linear infinite}
.fx-marq.b .tr{animation-direction:reverse;animation-duration:40s}
.fx-marq:hover .tr{animation-play-state:paused}
.fx-marq span{flex:none;padding:0 26px;font:850 clamp(16px,2vw,22px)/1.2 -apple-system,Inter,sans-serif;letter-spacing:-.01em;color:#2a1c00;white-space:nowrap}
.fx-marq.b span{color:#f2c14e}
.fx-marq span i{font-style:normal;opacity:.55;margin-left:26px}
@keyframes fxMarq{to{transform:translateX(-50%)}}

/* giant outline word that slides with scroll */
.fx-big{position:relative;overflow:hidden;margin:80px 0 0;pointer-events:none;user-select:none}
.fx-big div{white-space:nowrap;font:900 clamp(80px,15vw,220px)/.9 -apple-system,Inter,sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(184,134,11,.35);will-change:transform}
html[data-theme=dark] .fx-big div{-webkit-text-stroke-color:rgba(249,217,118,.22)}
.fx-big div b{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0}

/* FAQ smooth open */
details>p{transform-origin:top;animation:none}
details.fx-opening>p{animation:fxOpen .45s cubic-bezier(.2,.8,.2,1)}
@keyframes fxOpen{from{opacity:0;transform:translateY(-8px)}}
summary:after{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
details[open] summary:after{transform:rotate(180deg)}
details{transition:border-color .3s,box-shadow .3s,transform .3s}
details:hover{border-color:rgba(224,165,38,.45);transform:translateX(4px)}

/* ripple */
.fx-rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.55);transform:scale(0);animation:fxRip .65s ease-out forwards;z-index:3}
@keyframes fxRip{to{transform:scale(1);opacity:0}}

/* back to top */
.fx-top{position:fixed;right:18px;bottom:18px;width:50px;height:50px;border-radius:50%;border:0;padding:0;cursor:pointer;z-index:55;background:var(--card-s);box-shadow:0 14px 34px -12px rgba(120,80,0,.55);display:grid;place-items:center;opacity:0;transform:translateY(20px) scale(.8);transition:.35s cubic-bezier(.2,.8,.2,1);color:var(--acc);font:900 18px/1 sans-serif}
.fx-top.on{opacity:1;transform:none}
.fx-top:hover{transform:translateY(-4px)}
.fx-top svg{position:absolute;inset:0;transform:rotate(-90deg)}
.fx-top circle{fill:none;stroke-width:3}
.fx-top .bg{stroke:var(--line2)}.fx-top .fg{stroke:url(#fxg);stroke-linecap:round;stroke-dasharray:144.5;stroke-dashoffset:144.5}

/* nav link underline + sticky nav shrink */
nav .links a:not(.btn){position:relative}
nav .links a:not(.btn):after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
nav .links a:not(.btn):hover:after{transform:scaleX(1);transform-origin:left}
nav{transition:box-shadow .3s,background .3s}
nav.fx-scrolled{box-shadow:0 12px 40px -18px rgba(80,55,0,.35)}
nav .wrap{transition:height .3s}
nav.fx-scrolled .wrap{height:58px}

/* section titles: gold underline that draws in */
.fx-uline{display:block;height:3px;width:0;margin:18px auto 0;border-radius:3px;background:var(--grad);transition:width 1.1s .3s cubic-bezier(.2,.8,.2,1)}
.fx-uline.fx-on{width:90px}
.center .fx-uline{margin-left:auto;margin-right:auto}

/* hero heading glow pulse on gradient words */
.hero2 h1 .grad-text{filter:drop-shadow(0 6px 22px rgba(242,193,78,.35))}

/* floating badge bounce for live dots */
.dot.on,.badge.ok .dot,#hdot{animation:fxPulse 1.6s ease-out infinite}
@keyframes fxPulse{0%{box-shadow:0 0 0 0 rgba(15,159,110,.55)}100%{box-shadow:0 0 0 10px rgba(15,159,110,0)}}

/* footer gold line */
footer{position:relative}
footer:before{content:"";position:absolute;top:-1px;left:0;height:2px;width:30%;background:linear-gradient(90deg,transparent,#f2c14e,transparent);animation:fxRun 5s linear infinite}
@keyframes fxRun{from{left:-30%}to{left:100%}}

@media(max-width:820px){.fx-big{margin:50px 0 0}.fx-top{width:44px;height:44px;right:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.fx-intro,.fx-glow,.fx-ring,.fx-dot,.fx-dust{display:none!important}.fx-w>span{transform:none;opacity:1}}

.btn[data-fxm]{transition:translate .35s cubic-bezier(.2,.8,.2,1),transform .25s,box-shadow .25s,filter .25s}

/* Gold Wave ribbon (replaces the two marquee bands) */
.fx-wave{position:relative;height:250px;margin:6px 0 10px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-wave svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fx-wave-glow{position:absolute;left:10%;right:10%;top:30%;bottom:20%;background:radial-gradient(ellipse at center,rgba(242,193,78,.28),transparent 70%);filter:blur(20px);animation:fxBreath 5s ease-in-out infinite}
@keyframes fxBreath{50%{opacity:.45;transform:scaleX(1.1)}}
.fx-wave .wf{fill:none;stroke:url(#fxwg);stroke-width:2.5;filter:url(#fxglow)}
.fx-wave .wb{fill:none;stroke:rgba(184,134,11,.3);stroke-width:1.2;stroke-dasharray:3 9}
.fx-wave .wt-f{font:900 46px/1 -apple-system,BlinkMacSystemFont,Inter,"Segoe UI",sans-serif;letter-spacing:.02em;fill:url(#fxwg);filter:drop-shadow(0 6px 14px rgba(184,134,11,.35))}
.fx-wave .wt-b{font:800 30px/1 -apple-system,BlinkMacSystemFont,Inter,"Segoe UI",sans-serif;letter-spacing:.08em;fill:none;stroke:rgba(168,116,10,.4);stroke-width:1}
html[data-theme=dark] .fx-wave .wt-b{stroke:rgba(249,217,118,.3)}
html[data-theme=dark] .fx-wave .wb{stroke:rgba(249,217,118,.25)}
.fx-wave .orb{fill:#fffbe6;filter:url(#fxglow)}
@media(max-width:820px){.fx-wave{height:180px}.fx-wave .wt-f{font-size:30px}.fx-wave .wt-b{font-size:20px}}