/* Lynked Up Marketing — motion layer (Dean 11-10: 1 scroll reveals, 3 hover tilt+glow, 4 moving hero, 5 price shine).
   Uses the separate translate/scale properties so it never fights the existing transform hovers/floats. */

/* 1. Scroll reveals */
html.fx-on .fx{opacity:0;translate:0 34px;transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--fx-d,0s)}
html.fx-on .fx.fx-l{translate:-40px 0}
html.fx-on .fx.fx-r{translate:40px 0}
html.fx-on .fx.fx-z{translate:0 20px;scale:.96;transition-property:opacity,translate,scale}
html.fx-on .fx.fx-in{opacity:1;translate:0 0;scale:1}

/* 3. Hover tilt + light that follows the mouse */
@media (hover:hover) and (pointer:fine){
  .fx-tilt{transform-style:preserve-3d;will-change:transform}
  .fx-tilt.fx-hov{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)!important;transition:transform .12s ease-out,box-shadow .25s!important;box-shadow:0 30px 60px -26px rgba(10,14,28,.45)}
  .fx-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:3;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),rgba(120,140,255,.10) 35%,transparent 60%);mix-blend-mode:soft-light}
  .light .fx-glow,.card:not(.feature) .fx-glow{mix-blend-mode:normal;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(76,110,245,.13),rgba(255,122,48,.06) 40%,transparent 65%)}
  .fx-hov>.fx-glow{opacity:1}
  .btn.b-hot{position:relative;overflow:hidden}
  .btn.b-hot::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none}
  .btn.b-hot:hover::after{left:120%}
}

/* 4. Moving hero: pieces arrive one after another (transitions on translate/scale, so the existing float keeps running), then drift with the mouse */
html.fx-on .fx-hero>*,html.fx-on .stage>*{opacity:0;translate:0 26px;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1),scale .8s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--fx-d,0s)}
html.fx-on .stage>.toast{scale:.6;translate:0 30px}
html.fx-on .fx-hero.fx-go>*,html.fx-on .stage.fx-go>*{opacity:1;translate:0 0;scale:1}
html.fx-on .stage.fx-par>*{transition:translate .6s cubic-bezier(.2,.7,.2,1),opacity .3s;transition-delay:0s}
html.fx-on .stage:not(.fx-bars) .bars i::after{width:0}
.stage .bars i::after{transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.stage .ring{transition:background .1s}
.fx-ping{position:absolute;inset:-5px;border-radius:17px;border:2px solid #19c37d;opacity:0;pointer-events:none;animation:fx-ping 1.6s ease-out 2.6s 3}
@keyframes fx-ping{0%{opacity:.85;scale:1}100%{opacity:0;scale:1.14}}

/* 5. Most-popular price card: a soft moving shine + glowing edge */
.price.hot{position:relative;animation:fx-glowpulse 4s ease-in-out infinite}
@keyframes fx-glowpulse{0%,100%{box-shadow:0 30px 60px -30px rgba(3,64,215,.8),0 0 0 0 rgba(255,122,48,0)}50%{box-shadow:0 30px 70px -26px rgba(123,92,255,.85),0 0 34px -6px rgba(255,122,48,.45)}}
.price.hot .fx-shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2}
.price.hot .fx-shine::before{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);animation:fx-shine 5s ease-in-out 1.5s infinite}
@keyframes fx-shine{0%{left:-60%}35%{left:130%}100%{left:130%}}
.price.hot::before{content:"";position:absolute;inset:-2px;border-radius:24px;padding:2px;pointer-events:none;z-index:4;background:conic-gradient(from var(--fx-a,0deg),#ff7a30,#7b5cff,#22c1ee,#ff7a30);-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);animation:fx-spin 6s linear infinite}
@property --fx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fx-spin{to{--fx-a:360deg}}

@media (prefers-reduced-motion:reduce){
  html.fx-on .fx,html.fx-on .fx-hero>*,html.fx-on .stage>*{opacity:1!important;translate:none!important;scale:none!important;transition:none!important}
  html.fx-on .stage .bars i::after{width:var(--w)!important}
  .price.hot,.price.hot .fx-shine::before,.price.hot::before,.fx-ping{animation:none!important}
}

/* safety net: if a device stalls the entrance, everything is shown after 3.5s */
html.fx-on .fx-hero.fx-done>*,html.fx-on .stage.fx-done>*{opacity:1!important;scale:1!important;transition-property:translate!important}
html.fx-on .stage.fx-done .bars i::after{width:var(--w)!important;transition:none!important}
/* the "Most popular" ribbon sits above the moving edge (Dean 11-10: line went through it) */
.price.hot .ribbon{z-index:6}