/* fx.css — motion & interaction layer on top of theme-minimal.css.
   Everything is scoped under html.fx (added by fx.js), so without the script
   the site looks exactly as before. Reduced-motion users get no animation. */

@property --fx-a{syntax:'<angle>';initial-value:0deg;inherits:false}

/* ── hero: slow-turning light beam + cursor-lit dot grid ── */
.fx .hero{isolation:isolate;overflow-x:clip}
.fx-beam{position:absolute;left:50%;top:-180px;width:1100px;height:760px;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--fx-a) at 50% 50%,transparent 0deg,rgba(164,139,240,.22) 40deg,transparent 95deg,transparent 180deg,rgba(195,180,246,.12) 225deg,transparent 280deg);
  filter:blur(70px);opacity:.75;animation:fxTurn 22s linear infinite;
  -webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent);mask-image:radial-gradient(closest-side,#000 35%,transparent)}
.fx-grid{position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(300px circle at var(--hx,50%) var(--hy,30%),#000,transparent 75%);
  mask-image:radial-gradient(300px circle at var(--hx,50%) var(--hy,30%),#000,transparent 75%);
  opacity:.55;transition:opacity .4s ease}
@keyframes fxTurn{to{--fx-a:360deg}}

/* ── headline: words drift in out of a blur ── */
.fx-w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(14px);
  animation:fxWord .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + .25s)}
@keyframes fxWord{to{opacity:1;filter:blur(0);transform:none}}

/* ── cards: a border + soft glow that follows the cursor ── */
.fx :is(.why-card,.comm-card,.hiw-step,.hc-box,.an-feat,.hm-chip,.info-box,.stat-card,.card2){position:relative;isolation:isolate}
.fx :is(.why-card,.comm-card,.hiw-step,.hc-box,.an-feat,.hm-chip,.info-box,.stat-card,.card2)::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--fx-x,-999px) var(--fx-y,-999px),rgba(195,180,246,.75),rgba(164,139,240,.25) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fx :is(.why-card,.comm-card,.hiw-step,.hc-box,.an-feat,.hm-chip,.info-box,.stat-card,.card2)::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(380px circle at var(--fx-x,-999px) var(--fx-y,-999px),rgba(164,139,240,.09),transparent 65%)}
.fx :is(.why-card,.comm-card,.hiw-step,.hc-box,.an-feat,.hm-chip,.info-box,.stat-card,.card2):hover::before,
.fx :is(.why-card,.comm-card,.hiw-step,.hc-box,.an-feat,.hm-chip,.info-box,.stat-card,.card2):hover::after{opacity:1}
/* the how-it-works panel clips its steps; let the step glow show inside it */
.fx .hiw-step{border-radius:0}

/* ── hero preview: a light that runs around its border, plus gentle 3D tilt ── */
.fx .hero-demo{border-color:transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,
    conic-gradient(from var(--fx-a),rgba(255,255,255,.06) 0deg,rgba(195,180,246,.85) 50deg,rgba(255,255,255,.06) 110deg,rgba(255,255,255,.06) 360deg) border-box;
  animation:fxTurn 6s linear infinite;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
.fx .hero-demo.fx-tilting{transition:transform .08s linear}

/* ── primary buttons: a light sweep on hover ── */
.fx .btn-primary{position:relative;overflow:hidden;isolation:isolate}
.fx .btn-primary::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent 35%,rgba(164,139,240,.38) 50%,transparent 65%);transform:translateX(-110%)}
.fx .btn-primary:hover::after{transform:translateX(110%);transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.fx .btn{transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.fx .btn:active{transform:scale(.97)}

/* ── section titles: a faint sheen passes once as they scroll in ── */
.fx .sec-title{background:linear-gradient(100deg,var(--text) 40%,#c3b4f6 50%,var(--text) 60%) 100% 0/250% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.fx .fx-shine .sec-title,.fx .sec-title.fx-shine{animation:fxShine 1.6s cubic-bezier(.3,.6,.3,1) .2s both!important}
@keyframes fxShine{from{background-position:100% 0}to{background-position:0% 0}}

/* ── nav: hairline that lights up under the bar once you scroll ── */
.fx .nav-pill{transition:border-color .3s ease,background-color .3s ease}
.fx .nav.scrolled .nav-pill{border-color:rgba(164,139,240,.22)}

@media (hover:none){
  .fx-grid{display:none}
}

/* ── optimizer: drop zone comes alive while a file is dragged over it ── */
.fx .drop-zone.dragover{transform:scale(1.015);border-style:solid!important;border-color:transparent!important;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    conic-gradient(from var(--fx-a),rgba(164,139,240,.15),rgba(195,180,246,.95) 60deg,rgba(52,211,153,.7) 140deg,rgba(164,139,240,.15) 220deg) border-box!important;
  animation:fxTurn 2.4s linear infinite;box-shadow:0 0 0 6px rgba(164,139,240,.06),0 20px 60px -20px rgba(164,139,240,.35)}
.fx .drop-zone.dragover .dz-ico{animation:fxLift 1s cubic-bezier(.3,.6,.3,1) infinite alternate}
@keyframes fxLift{to{transform:translateY(-6px)}}

/* ── optimizer: success moment when a patch finishes ── */
.fx .result-box.active .result-head{animation:fxPop .55s cubic-bezier(.2,.9,.3,1.2) both;position:relative;overflow:hidden}
.fx .result-box.active .result-head::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(52,211,153,.18) 50%,transparent 70%);transform:translateX(-110%);
  animation:fxSweep 1.1s cubic-bezier(.3,.6,.3,1) .35s forwards}
.fx .result-box.active .result-check{position:relative;animation:fxPop .5s cubic-bezier(.2,.9,.3,1.4) .1s both}
.fx .result-box.active .result-check::before,.fx .result-box.active .result-check::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(52,211,153,.6);animation:fxRing 1s cubic-bezier(.2,.7,.2,1) .2s both;pointer-events:none}
.fx .result-box.active .result-check::after{animation-delay:.38s}
.fx .result-box.active .result-size,.fx .result-box.active .result-video,.fx .result-box.active .result-actions{animation:fxRise .6s cubic-bezier(.2,.7,.2,1) both}
.fx .result-box.active .result-size{animation-delay:.2s}
.fx .result-box.active .result-video{animation-delay:.3s}
@keyframes fxPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes fxRing{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(2.2)}}
@keyframes fxSweep{to{transform:translateX(110%)}}
@keyframes fxRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}


/* ── apps strip scrolls slowly; pauses on hover ── */
.fx .apps-track{animation:fxMarquee 38s linear infinite}
.fx .apps-marquee:hover .apps-track{animation-play-state:paused}
@keyframes fxMarquee{to{transform:translateX(-50%)}}

/* ── how it works: steps light up in order along a progress line ── */
.fx .hiw-steps{position:relative}
.fx .hiw-steps::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;transform-origin:left;transform:scaleX(0);z-index:3;
  background:linear-gradient(90deg,rgba(164,139,240,.2),#a48bf0 60%,#c3b4f6);transition:transform 1.6s cubic-bezier(.4,.1,.2,1)}
.fx .hiw-steps.fx-lit::before{transform:scaleX(1)}
.fx .hiw-step .hiw-n{transition:background-color .4s ease,color .4s ease,box-shadow .4s ease}
.fx .hiw-steps.fx-lit .hiw-step .hiw-n{background:#a48bf0;color:#0c0c0e;box-shadow:0 0 0 4px rgba(164,139,240,.15)}
.fx .hiw-steps.fx-lit .hiw-step:nth-child(1) .hiw-n{transition-delay:.15s}
.fx .hiw-steps.fx-lit .hiw-step:nth-child(2) .hiw-n{transition-delay:.7s}
.fx .hiw-steps.fx-lit .hiw-step:nth-child(3) .hiw-n{transition-delay:1.25s}
@media (max-width:760px){
  .fx .hiw-steps::before{width:2px;height:100%;transform:scaleY(0);transform-origin:top}
  .fx .hiw-steps.fx-lit::before{transform:scaleY(1)}
}

/* ── scroll progress hairline under the nav ── */
.fx .nav-pill::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(164,139,240,0),#a48bf0 30%,#c3b4f6);transform-origin:left;transform:scaleX(var(--fx-p,0));opacity:.9}

/* ── page cross-fade (View Transitions) ── */
::view-transition-old(root){animation:fxVtOut .22s ease both}
::view-transition-new(root){animation:fxVtIn .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes fxVtOut{to{opacity:0;filter:blur(4px)}}
@keyframes fxVtIn{from{opacity:0;filter:blur(6px);transform:translateY(8px)}}

/* ── command menu ── */
.fx-cmd-hint{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px;border-radius:9px;background:transparent;
  border:1px solid var(--border);color:var(--text-faint);font:500 12px var(--font);cursor:pointer;transition:border-color .15s ease,color .15s ease}
.fx-cmd-hint:hover{border-color:var(--border-strong);color:var(--text-dim)}
.fx-cmd-hint .ic{font-size:13px;margin-right:4px}
.fx-cmd kbd,.fx-cmd-hint kbd{font:500 11px var(--font);padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text-dim)}
@media(max-width:820px){.fx-cmd-hint{display:none}}
.fx-cmd{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding:14vh 16px 16px}
.fx-cmd[hidden]{display:none}
.fx-cmd-backdrop{position:absolute;inset:0;background:rgba(6,6,8,.6);backdrop-filter:blur(6px);opacity:0;transition:opacity .18s ease}
.fx-cmd-box{position:relative;width:min(560px,100%);border-radius:16px;border:1px solid var(--border-strong);background:rgba(20,20,24,.96);
  box-shadow:0 30px 90px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;
  opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.fx-cmd.show .fx-cmd-backdrop{opacity:1}
.fx-cmd.show .fx-cmd-box{opacity:1;transform:none}
.fx-cmd-search{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-faint)}
.fx-cmd-search .ic{font-size:16px;flex:none}
.fx-cmd-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font:500 15.5px var(--font)}
.fx-cmd-search input::placeholder{color:var(--text-faint)}
.fx-cmd-list{list-style:none;max-height:min(52vh,380px);overflow:auto;padding:6px}
.fx-cmd-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--text-dim);font-size:14px;cursor:pointer}
.fx-cmd-list li .ic{font-size:15px;color:var(--text-faint);flex:none}
.fx-cmd-list li.on{background:rgba(164,139,240,.12);color:var(--text)}
.fx-cmd-list li.on .ic{color:#c3b4f6}
.fx-cmd-list li.fx-cmd-empty{cursor:default;color:var(--text-faint);justify-content:center}
.fx-cmd-foot{display:flex;gap:16px;justify-content:flex-end;padding:9px 14px;border-top:1px solid var(--border);font-size:12px;color:var(--text-faint)}
.fx-cmd-foot kbd{margin-right:3px}