/* "Then vs Now" section animation (homepage). Driven by assets/then-now.js, which sets data-fx on #then-now.
   Live search types itself -> cursor clicks your listing -> AI streams its answer -> a gold card lifts out of the
   list and lands as "Named first". ~11.6s, plays once on scroll-in. No data-fx (reduced motion / no JS) = static design. */
.fx-cursor,.fx-fly,.fx-dots{display:none}
#then-now[data-fx] .tn{position:relative}
/* Hold every animation at frame 0 until the stage scrolls into view. */
#then-now[data-fx]:not(.fx-play) *,#then-now[data-fx]:not(.fx-play) *::before,#then-now[data-fx]:not(.fx-play) *::after{animation-play-state:paused!important}

@keyframes fxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fxOut{to{opacity:0}}
@keyframes fxPop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes fxFromRight{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes fxWipe{from{clip-path:inset(-20px 100% -20px -20px)}to{clip-path:inset(-20px -20px -20px -20px)}}
@keyframes fxWipeV{from{clip-path:inset(-20px -20px 100% -20px)}to{clip-path:inset(-20px -20px -20px -20px)}}
@keyframes fxRing{0%{box-shadow:0 0 0 0 rgba(242,190,68,.8)}100%{box-shadow:0 0 0 22px rgba(242,190,68,0)}}
@keyframes fxDim{to{filter:grayscale(1) opacity(.38)}}
@keyframes fxUnderline{to{background-size:100% 2px}}
@keyframes fxShine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes fxFly{
  0%{opacity:0;transform:none}
  8%{opacity:1;transform:translateY(-6px) scale(1.03)}
  55%{transform:translate(calc(var(--dx)*.55),calc(var(--dy)*.55 - 80px)) scale(1.08)}
  100%{opacity:1;transform:translate(var(--dx),var(--dy));width:var(--w1);height:var(--h1)}}
@keyframes fxLand{0%{opacity:0}1%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:none}}
@keyframes fxBit{from{opacity:0}to{opacity:1}}
@keyframes fxFocus{to{border-color:var(--blue);box-shadow:0 0 0 4px rgba(57,198,242,.22)}}
@keyframes fxCursor{0%{opacity:0;transform:translate(90px,150px)}15%{opacity:1}100%{opacity:1;transform:none}}
@keyframes fxClick{50%{transform:scale(.78)}100%{transform:none}}
@keyframes fxDotsShow{0%{opacity:0}10%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes fxBounce{from{transform:translateY(3px);opacity:.35}to{transform:translateY(-3px);opacity:1}}
@keyframes fxStrike{from{transform:scaleX(0)}to{transform:scaleX(1)}}

#then-now[data-fx] .gcap em{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 2px;padding-bottom:3px}
#then-now[data-fx] .fx-bit{animation:fxBit .06s linear both}
#then-now[data-fx] .searchbar{animation:fxFocus .3s ease .2s both}
#then-now[data-fx] .res{animation:fxUp .35s ease calc(2s + var(--i)*.08s) both,fxDim .7s ease 9.2s both}
#then-now[data-fx] .res.you{animation:fxUp .35s ease calc(2s + var(--i)*.08s) both,fxRing .9s ease-out 4.05s both,fxDim .5s ease 8.3s both}
#then-now[data-fx] .fx-cursor{display:block;position:absolute;z-index:3;width:28px;height:28px;left:56%;top:calc(var(--cy) - 6px);filter:drop-shadow(0 4px 6px rgba(13,30,47,.3));
  animation:fxCursor 1.1s cubic-bezier(.4,0,.2,1) 2.8s both,fxClick .28s ease 4s,fxOut .3s ease 8s forwards}
#then-now[data-fx] .pos{animation:fxPop .4s ease 4.3s both,fxDim .7s ease 9.2s both}
#then-now[data-fx] .tn>div:first-child .gcap{animation:fxUp .5s ease 4.5s both}
#then-now[data-fx] .fat svg.h{animation:fxWipe .6s cubic-bezier(.6,0,.2,1) 4.7s both}
#then-now[data-fx] .fat svg.v{animation:fxWipeV .6s cubic-bezier(.6,0,.2,1) 4.7s both}
#then-now[data-fx] .tn>div:nth-child(3) .glabel{animation:fxUp .5s ease 4.9s both}
#then-now[data-fx] .answer{animation:fxUp .5s ease 5s both}
#then-now[data-fx] .bubble-q{animation:fxFromRight .4s cubic-bezier(.2,.9,.3,1.2) 5.4s both}
#then-now[data-fx] .ans{position:relative;animation:fxUp .35s ease 5.8s both}
#then-now[data-fx] .fx-dots{display:inline-flex;gap:6px;position:absolute;left:18px;top:18px;animation:fxDotsShow 1s linear 5.8s both}
#then-now[data-fx] .fx-dots i{width:9px;height:9px;border-radius:50%;background:var(--blue);animation:fxBounce .35s ease-in-out infinite alternate}
#then-now[data-fx] .fx-dots i:nth-child(2){animation-delay:.12s}
#then-now[data-fx] .fx-dots i:nth-child(3){animation-delay:.24s}
#then-now[data-fx] .fx-a .fx-bit{display:inline-block;animation:fxUp .3s ease both}
#then-now[data-fx] .fx-fly{display:flex;position:absolute;z-index:5;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;border-radius:12px;padding:10px 14px;font-weight:700;font-size:15px;background:var(--gold);color:#fff;white-space:nowrap;overflow:hidden;transform-origin:0 0;
  box-shadow:0 18px 40px rgba(217,164,45,.55);animation:fxFly 1.15s cubic-bezier(.55,0,.2,1) 8.1s both,fxOut .2s linear 9.3s forwards}
#then-now[data-fx] .fx-fly small{font-weight:600;font-size:13px;opacity:.9}
#then-now[data-fx] .nm.gold{position:relative;overflow:hidden;animation:fxLand .5s ease-out 9.25s both}
#then-now[data-fx] .nm.gold::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);animation:fxShine .9s ease 9.5s both}
#then-now[data-fx] .nm.other{animation:fxFromRight .45s ease 9.7s both}
#then-now[data-fx] .nm.gone{position:relative;animation:fxUp .4s ease 10s both}
#then-now[data-fx] .nm.gone::after{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;background:#AEBBC8;transform-origin:left;animation:fxStrike .5s ease 10.4s both}
#then-now[data-fx] .tn>div:nth-child(3) .gcap{animation:fxUp .5s ease 10.6s both}
#then-now[data-fx] .gcap em{animation:fxUnderline .6s ease 11s both}