/* =========================================================
   Motion fixes: marquees with edge fade + difference cycle
   Loaded last to win specificity fights
   ========================================================= */

/* ---- Marquee chips (hero) ---- */
.hero-chip-marquee{
  position:relative;
  width:min(100%,520px)!important;
  height:40px!important;
  margin-bottom:28px!important;
  overflow:hidden!important;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%)!important;
}
.hero-chip-marquee__track{
  display:flex!important;
  flex-wrap:nowrap!important;
  width:max-content!important;
  gap:0!important;
  will-change:transform;
  /* JS drives the loop — CSS animation caused empty gaps when it restarted */
  animation:none!important;
}
.hero-chip-marquee__group{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:12px!important;
  flex:0 0 auto!important;
  flex-shrink:0!important;
  padding-right:12px!important;
}
.hero-chip{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  user-select:none!important;
  transition:none!important;
  transform:none!important;
}
.hero-chip-marquee,
.hero-chip-marquee *{
  pointer-events:none!important;
  user-select:none!important;
}

/* ---- Trusted strip marquee ---- */
.hero-trusted__marquee{
  position:relative;
  overflow:hidden!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)!important;
}
.hero-trusted__track{
  display:flex!important;
  flex-wrap:nowrap!important;
  width:max-content!important;
  gap:0!important;
  will-change:transform;
  animation:none!important;
}
.hero-trusted__group{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:clamp(1.25rem,3vw,2rem)!important;
  flex:0 0 auto!important;
  flex-shrink:0!important;
  padding-right:clamp(1.25rem,3vw,2rem)!important;
}
.hero-trusted__item{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}

@keyframes marqueeScroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* Pause marquees only when user prefers reduced motion */
/* NÃO forçar transform:none — o JS anima com setProperty important */

/* ---- Difference tabs: dark active + orange load bar + cycle ---- */
.difference-console{
  overflow:hidden;
}
.difference-tabs{
  overflow:hidden;
}
.difference-tab{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  background:transparent!important;
  transition:color .25s ease!important;
}
.difference-tab::before,
.difference-tab::after{
  display:none!important;
  animation:none!important;
}

/* full dark fill behind active tab */
.difference-tab__fill{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:#151310!important;
  transform:scaleY(0)!important;
  transform-origin:top center!important;
  pointer-events:none!important;
  transition:none!important;
}
.difference-tab.is-active .difference-tab__fill{
  transform:scaleY(1)!important;
  animation:diffTabDrop .45s cubic-bezier(.22,1,.36,1) both!important;
}

/* orange progress bar along bottom while active */
.difference-tab__bar{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:3px!important;
  z-index:3!important;
  background:#ff6a00!important;
  transform:scaleX(0)!important;
  transform-origin:left center!important;
  pointer-events:none!important;
}
.difference-tab.is-active.is-loading .difference-tab__bar{
  animation:diffBarLoad var(--diff-cycle,5s) linear forwards!important;
}

.difference-tab > *:not(.difference-tab__fill):not(.difference-tab__bar){
  position:relative;
  z-index:2;
}
.difference-tab.is-active,
.difference-tab.is-active .difference-tab__n,
.difference-tab.is-active .difference-tab__copy,
.difference-tab.is-active .difference-tab__copy strong,
.difference-tab.is-active .difference-tab__copy small{
  color:#fff!important;
}

/* leave animation: slide up & fade */
.difference-tab.is-leaving .difference-tab__fill{
  animation:diffTabLeave .4s cubic-bezier(.22,1,.36,1) forwards!important;
}
.difference-tab.is-leaving{
  color:rgba(21,17,14,.45)!important;
}

/* Right panel transitions */
.difference-stage{
  position:relative;
  overflow:hidden;
}
.difference-panel{
  animation:none!important;
}
.difference-panel.is-active:not([hidden]){
  animation:diffPanelIn .5s cubic-bezier(.22,1,.36,1) both!important;
}
.difference-panel.is-exiting{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  animation:diffPanelOut .4s cubic-bezier(.22,1,.36,1) forwards!important;
  pointer-events:none;
}

@keyframes diffBarLoad{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes diffTabDrop{
  from{transform:scaleY(0);opacity:.6}
  to{transform:scaleY(1);opacity:1}
}
@keyframes diffTabLeave{
  from{transform:scaleY(1);opacity:1}
  to{transform:scaleY(0);opacity:0}
}
@keyframes diffPanelIn{
  from{opacity:0;transform:translate3d(28px,12px,0) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes diffPanelOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translate3d(-18px,-16px,0)}
}

@media (prefers-reduced-motion:reduce){
  .difference-tab.is-active .difference-tab__fill,
  .difference-tab.is-active.is-loading .difference-tab__bar,
  .difference-tab.is-leaving .difference-tab__fill,
  .difference-panel.is-active:not([hidden]),
  .difference-panel.is-exiting{animation:none!important}
  .difference-tab.is-active .difference-tab__fill{transform:scaleY(1)!important}
  .difference-tab.is-active.is-loading .difference-tab__bar{transform:scaleX(1)!important}
}

.hero-trusted{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}
.hero-chip-marquee{
  /* keep fade mask; cancel entrance opacity trap */
  opacity:1!important;
  transform:none!important;
}