/* Thanos AI Gold website: motion + futuristic layer. Loaded after the page's own styles.
   Everything that hides content before it animates is scoped to html.fx, which fx.js sets only
   when JavaScript runs and the visitor hasn't asked for reduced motion. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");
:root{--mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --ease:cubic-bezier(.16,.84,.24,1)}

/* ---------- more space ---------- */
html{background:var(--bg)}
body{background:transparent}
section{padding-block:clamp(84px,10vw,150px)}
.head{margin-bottom:clamp(48px,6vw,80px); max-width:820px}
.grid2{gap:clamp(48px,7vw,120px)}
.stats{margin-top:clamp(56px,7vw,96px); gap:20px}
.engines{gap:22px}
.balances{gap:22px}
h2{font-size:clamp(32px,4.4vw,56px); line-height:1.08}
.lead{font-size:clamp(17px,1.7vw,21px)}
.alt{background:linear-gradient(180deg, rgba(11,16,32,.72), rgba(7,10,20,.35))}
.card,.engine,.stat,.bal,details,.table-wrap{background:rgba(14,19,36,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}

/* ---------- living background ---------- */
#fx-bg{position:fixed; inset:0; z-index:-1; pointer-events:none}
#fx-glow{position:fixed; left:0; top:0; width:640px; height:640px; margin:-320px 0 0 -320px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(214,170,88,.075) 0%, rgba(214,170,88,.03) 35%, transparent 65%); mix-blend-mode:screen; will-change:transform}
#fx-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:70; transform-origin:0 50%; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-hi)); box-shadow:0 0 14px rgba(243,212,143,.7)}

/* ---------- header melts into the hero ---------- */
header{transition:background .5s var(--ease), border-color .5s, backdrop-filter .5s}
html.fx header.top{background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none}

/* ---------- hero ---------- */
.hero{min-height:100svh; display:flex; align-items:center}
.hero .wrap{width:100%}
.hero h1{font-size:clamp(42px,5.4vw,76px); letter-spacing:-.025em}
@media (min-width:1001px){.hero-mark{width:min(360px,100%)}}
.hero h1 em{background:linear-gradient(100deg, #b8863a 0%, #f6dc9c 30%, #fff3d0 45%, #d6aa58 60%, #f3d48f 100%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:fx-shimmer 6s linear infinite}
@keyframes fx-shimmer{to{background-position:-220% 0}}
.hero-mark{animation:fx-float 8s ease-in-out infinite}
@keyframes fx-float{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-14px) rotate(.6deg)}}
.hero .eyebrow, .eyebrow{font-family:var(--mono); font-weight:500; letter-spacing:.18em}
.scroll-cue{position:absolute; left:50%; bottom:28px; z-index:2; width:24px; height:40px; margin-left:-12px; border:1px solid var(--line); border-radius:14px}
.scroll-cue::after{content:""; position:absolute; left:50%; top:8px; width:2px; height:8px; margin-left:-1px; border-radius:2px; background:var(--gold-hi); animation:fx-cue 2s var(--ease) infinite}
@keyframes fx-cue{0%{opacity:0; transform:translateY(0)} 30%{opacity:1} 100%{opacity:0; transform:translateY(14px)}}

/* ---------- section index: mono number + huge outline numeral ---------- */
.eyebrow .idx{display:inline-block; margin-right:14px; padding:4px 8px; border:1px solid var(--line); border-radius:6px; color:var(--gold-hi); letter-spacing:.08em}
.has-idx{position:relative; isolation:isolate}
.has-idx::before{content:attr(data-idx); position:absolute; z-index:-1; top:-.5em; left:-.06em; pointer-events:none;
  font:700 clamp(130px,19vw,260px)/1 var(--sans); letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px rgba(214,170,88,.22)}

/* ---------- trust strip becomes a slow marquee ---------- */
.trust{overflow:hidden}
html.fx .trust ul.marquee{display:flex; flex-wrap:nowrap; width:max-content; max-width:none; gap:64px; padding:26px 0; animation:fx-marquee 46s linear infinite}
html.fx .trust ul.marquee li{white-space:nowrap}
html.fx .trust:hover ul.marquee{animation-play-state:paused}
@keyframes fx-marquee{to{transform:translateX(-50%)}}

/* ---------- reveal on scroll ---------- */
html.fx .rv{opacity:0; transform:translate3d(0,48px,0); filter:blur(10px);
  transition:opacity 1.1s var(--ease), transform 1.2s var(--ease), filter 1.1s var(--ease); transition-delay:var(--d,0s)}
html.fx .rv.in{opacity:1; transform:none; filter:none}
html.fx .frame.rv{transform:perspective(1400px) rotateX(16deg) translate3d(0,80px,0) scale(.94); transform-origin:50% 100%}
html.fx .frame.rv.in{transform:perspective(1400px) rotateX(0) translate3d(0,0,0) scale(1)}
html.fx .split .w{display:inline-block; opacity:0; transform:translate3d(0,.55em,0) rotateX(-50deg); transform-origin:50% 100%; filter:blur(6px);
  transition:opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); transition-delay:calc(var(--wi) * 55ms + var(--d,0s))}
html.fx .split.in .w{opacity:1; transform:none; filter:none}

/* table rows slide in one by one, drawdown bars draw themselves */
html.fx .table-wrap tbody tr{opacity:0; transform:translate3d(-24px,0,0); transition:opacity .8s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--i) * 90ms + .35s)}
html.fx .table-wrap.in tbody tr{opacity:1; transform:none}
.ddbar{display:block; height:4px; margin:9px 0 0 auto; width:min(140px,100%); background:rgba(227,129,138,.12); border-radius:4px; overflow:hidden}
.ddbar i{display:block; height:100%; width:var(--w); background:linear-gradient(90deg,#9d4651,var(--fall)); box-shadow:0 0 10px rgba(227,129,138,.5)}
html.fx .ddbar i{width:0; transition:width 1.6s var(--ease); transition-delay:calc(var(--i) * 90ms + .7s)}
html.fx .table-wrap.in .ddbar i{width:var(--w)}

/* image frames: a light sweep after they land */
.frame{position:relative; cursor:zoom-in}
.frame:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
.frame::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 35%, rgba(255,236,190,.16) 50%, transparent 65%); transform:translateX(-120%)}
html.fx .frame.in::after{animation:fx-sheen 1.8s .9s var(--ease) forwards}
@keyframes fx-sheen{to{transform:translateX(120%)}}

/* ---------- cards: lift + light that follows the pointer ---------- */
.engine,.stat,.bal,details{position:relative; transition:border-color .35s, transform .35s var(--ease), box-shadow .35s}
.engine::after,.stat::after,.bal::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(214,170,88,.14), transparent 60%)}
.engine:hover,.stat:hover,.bal:hover{transform:translateY(-6px); border-color:var(--line); box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(214,170,88,.12)}
.engine:hover::after,.stat:hover::after,.bal:hover::after{opacity:1}
.stat b{font-variant-numeric:tabular-nums}
.gallery button{transition:border-color .3s, transform .45s var(--ease), box-shadow .45s}
.gallery button:hover{transform:perspective(900px) rotateX(5deg) translateY(-6px) scale(1.02); box-shadow:0 26px 60px rgba(0,0,0,.55)}

/* recommended balance card: a slowly turning gold edge */
.bal.rec{border-color:transparent; background:linear-gradient(rgba(14,19,36,.92),rgba(14,19,36,.92)) padding-box,
  conic-gradient(from var(--ang,0deg), rgba(214,170,88,.15), var(--gold-hi), rgba(214,170,88,.15) 40%, rgba(214,170,88,.15)) border-box; border:1px solid transparent}
@property --ang{syntax:"<angle>"; inherits:false; initial-value:0deg}
html.fx .bal.rec{animation:fx-spin 6s linear infinite}
@keyframes fx-spin{to{--ang:360deg}}

/* nav "Get it on MQL5": dark text like the other gold buttons */
.links a.btn-gold, .links a.btn-gold:hover{color:#1a1206}

/* gold primary buttons breathe */
html.fx .hero .btn-gold, html.fx .band .btn-gold{animation:fx-breathe 3.6s ease-in-out infinite}
@keyframes fx-breathe{0%,100%{box-shadow:0 6px 24px rgba(214,170,88,.28), inset 0 1px 0 rgba(255,255,255,.5)} 50%{box-shadow:0 8px 40px rgba(214,170,88,.55), inset 0 1px 0 rgba(255,255,255,.5)}}

/* ---------- fewer boxes: open layouts with hairlines that draw in ---------- */
.engine,.stat,.sizing > div,.bal:not(.rec),details{background:none; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
.engine{padding:30px 0 0; border-top:1px solid var(--line2)}
.engine .tag{position:static; display:block; margin-bottom:14px; font-family:var(--mono); font-weight:500}
.engine h3{font-size:22px; font-weight:400}
.engines{gap:52px 44px}
.engine.ai{background:none; border:0; border-top:1px solid var(--line)}
.engine.ai h3{color:var(--gold-hi)}
.engine::before,.sizing > div::before,.bal:not(.rec)::before,details::before{content:""; position:absolute; top:-1px; left:0; height:1px; width:100%;
  background:linear-gradient(90deg, var(--gold-hi), rgba(214,170,88,.25) 60%, transparent); transition:width 1.6s var(--ease); transition-delay:calc(var(--d,0s) + .2s)}
html.fx .engine.rv::before,html.fx .sizing > div.rv::before,html.fx .bal.rv::before,html.fx details.rv::before{width:0}
html.fx .engine.rv.in::before,html.fx .sizing > div.rv.in::before,html.fx .bal.rv.in::before,html.fx details.rv.in::before{width:100%}
.engine:hover,.stat:hover,.bal:not(.rec):hover{transform:none; box-shadow:none}
.engine::after,.stat::after,.bal:not(.rec)::after{display:none}
.stat{padding:0 0 0 22px; border-left:1px solid var(--line)}
.stat b{font-size:clamp(44px,5vw,64px); font-weight:200}
.sizing{gap:36px 28px; margin-top:28px}
.sizing > div{position:relative; padding:22px 0 0; border-top:1px solid var(--line2)}
.bal:not(.rec){padding:26px 0 0; border-top:1px solid var(--line2)}
.faq{gap:0}
details{position:relative; padding:0; border-top:1px solid var(--line2)}
details:last-child{border-bottom:1px solid var(--line2)}
summary{padding:24px 40px 24px 0; font-size:18px; font-weight:400}
summary::after{top:22px}
.table-wrap{border-color:transparent; background:linear-gradient(180deg, rgba(14,19,36,.55), rgba(14,19,36,.15))}

/* ---------- drifting light orbs (move with the scroll) ---------- */
.fx-orb{position:fixed; z-index:-2; pointer-events:none; width:70vmax; height:70vmax; left:0; top:0; border-radius:50%; filter:blur(90px); will-change:transform; opacity:.16}
.fx-orb.a{background:radial-gradient(circle, rgba(214,170,88,.9), rgba(214,170,88,0) 62%)}
.fx-orb.b{background:radial-gradient(circle, rgba(70,96,170,.75), rgba(70,96,170,0) 62%); opacity:.14}

/* ---------- images keep moving while they're on screen ---------- */
html.fx .frame{translate:0 calc(var(--sp,0) * -46px); rotate:x calc(var(--sp,0) * 7deg); transition:translate .2s linear, rotate .2s linear, opacity 1.1s var(--ease), transform 1.2s var(--ease), filter 1.1s var(--ease)}

@media (max-width:1000px){
  .hero{min-height:auto}
  section{padding-block:clamp(64px,16vw,96px)}
  html.fx .rv, html.fx .split .w{filter:none}
  html.fx .rv{transition-duration:.8s}
  .hero .wrap{padding-block:72px 96px}
  .has-idx::before{font-size:clamp(110px,30vw,170px); top:-.42em}
}
@media (pointer:coarse){#fx-glow{display:none}}
@media (prefers-reduced-motion:reduce){
  .hero h1 em,.hero-mark,.scroll-cue::after,.bal.rec{animation:none!important}
}