/* Cross-link motion on AlienGuards, borrowed from Traybite and kept restrained.
   Enhances the existing .ag-sister section and footer row, plus the compact PDP/cart module.
   No layout shift. Respects prefers-reduced-motion. */

/* Traybite .rv fade-up: 18px, .85s, cubic-bezier(.16,1,.3,1) */
@media (prefers-reduced-motion:no-preference){
  [data-ag-xlink].is-pending{
    opacity:0;
    transform:translateY(18px);
  }
  [data-ag-xlink].is-in{
    opacity:1;
    transform:none;
    transition:opacity .85s cubic-bezier(.16,1,.3,1) var(--d,0s),
                transform .85s cubic-bezier(.16,1,.3,1) var(--d,0s);
  }
  .ag-sister.is-pending .ag-sister__logo-link,
  .ag-sister.is-pending .ag-sister__text,
  .ag-sister.is-pending .ag-sister__eyebrow,
  .ag-sister.is-pending .ag-sister__copy,
  .ag-sister.is-pending .ag-h2{
    opacity:0;
    transform:translateY(16px);
  }
  .ag-sister.is-in .ag-sister__logo-link,
  .ag-sister.is-in .ag-sister__text,
  .ag-sister.is-in .ag-sister__eyebrow,
  .ag-sister.is-in .ag-sister__copy,
  .ag-sister.is-in .ag-h2{
    opacity:1;
    transform:none;
    transition:opacity .85s cubic-bezier(.16,1,.3,1) var(--d,0s),
                transform .85s cubic-bezier(.16,1,.3,1) var(--d,0s);
  }
  .ag-sister.is-in .ag-sister__logo-link{--d:.08s}
  .ag-sister.is-in .ag-sister__eyebrow{--d:.12s}
  .ag-sister.is-in .ag-sister__text .ag-h2,
  .ag-sister.is-in .ag-h2{--d:.2s}
  .ag-sister.is-in .ag-sister__copy{--d:.3s}
}

/* Traybite hero product float — slow 9s, 8px — on the Traybite mark */
@keyframes tb-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.ag-sister.is-live .ag-sister__logo{
  animation:tb-float 9s ease-in-out 1.1s infinite;
}

/* Traybite tile hover: lift 3px + soft shadow. Quiet on a dark band. */
.ag-sister--section .ag-sister__row,
.ag-xctx__row{
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.ag-sister--section .ag-sister__row:hover,
.ag-xctx__row:hover,
.ag-xctx__row:focus-visible{
  transform:translateY(-3px);
}

/* Traybite arrow nudge on the Traybite text link */
.ag-sister__copy a.ag-g,
.ag-xctx__go{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.ag-sister__copy a.ag-g .ag-x-arr,
.ag-xctx__arr{
  width:1.5rem;
  height:1.5rem;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .25s ease;
}
.ag-sister__copy a.ag-g:hover .ag-x-arr,
.ag-sister__copy a.ag-g:focus-visible .ag-x-arr,
.ag-xctx__row:hover .ag-xctx__arr,
.ag-xctx__row:focus-visible .ag-xctx__arr{
  transform:translateX(4px);
}
.ag-sister__copy a.ag-g::after,
.ag-xctx__go::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-.15em;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.ag-sister__copy a.ag-g:hover::after,
.ag-sister__copy a.ag-g:focus-visible::after,
.ag-xctx__row:hover .ag-xctx__go::after,
.ag-xctx__row:focus-visible .ag-xctx__go::after{
  transform:scaleX(1);
}

/* Compact contextual (PDP / cart) — same copy, quieter than the homepage h2 */
.ag-xctx{
  background:#060607;
  border-top:1px solid var(--line,#26262A);
  border-bottom:1px solid var(--line,#26262A);
}
.ag-xctx__in{
  max-width:1240px;
  margin:0 auto;
  padding:2.2rem 32px;
}
.ag-xctx__row{
  display:flex;
  align-items:center;
  gap:2.4rem;
  flex-wrap:wrap;
  text-decoration:none;
  color:inherit;
  outline:none;
}
.ag-xctx__row:focus-visible{outline:2px solid #fff;outline-offset:6px}
.ag-xctx__logo{
  display:block;
  height:4.4rem;
  width:auto;
}
.ag-xctx.is-live .ag-xctx__logo{animation:tb-float 9s ease-in-out 1.1s infinite}
.ag-xctx__copy{
  flex:1 1 auto;
  min-width:0;
}
.ag-xctx__eyebrow{
  margin:0 0 .4rem;
  font:italic 700 1.15rem/1.2 var(--accent,"Quantico","Arial Narrow",sans-serif);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
}
.ag-xctx__line{
  margin:0;
  color:var(--muted,#A3A3AB);
  font-size:1.5rem;
  line-height:1.5;
}
.ag-xctx__go{
  flex:0 0 auto;
  font:italic 700 1.3rem/1 var(--accent,"Quantico","Arial Narrow",sans-serif);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
  padding-bottom:.35rem;
}
.ag-xctx__row:hover .ag-xctx__go,
.ag-xctx__row:focus-visible .ag-xctx__go{color:var(--ag-green,#91DC1F)}

@media (max-width:749px){
  .ag-xctx__in{padding:2rem 20px}
  .ag-xctx__row{gap:1.4rem}
  .ag-xctx__go{width:100%}
}

@media (prefers-reduced-motion:reduce){
  [data-ag-xlink],
  [data-ag-xlink].is-pending,
  [data-ag-xlink].is-in,
  .ag-sister.is-pending .ag-sister__logo-link,
  .ag-sister.is-pending .ag-sister__text,
  .ag-sister.is-pending .ag-sister__eyebrow,
  .ag-sister.is-pending .ag-sister__copy,
  .ag-sister.is-pending .ag-h2,
  .ag-sister.is-in .ag-sister__logo-link,
  .ag-sister.is-in .ag-sister__text,
  .ag-sister.is-in .ag-sister__eyebrow,
  .ag-sister.is-in .ag-sister__copy,
  .ag-sister.is-in .ag-h2,
  .ag-sister__logo,
  .ag-xctx__logo,
  .ag-sister__row,
  .ag-xctx__row,
  .ag-x-arr,
  .ag-xctx__arr,
  .ag-sister__copy a.ag-g::after,
  .ag-xctx__go::after{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
  .ag-sister__copy a.ag-g:hover::after,
  .ag-xctx__row:hover .ag-xctx__go::after{transform:scaleX(1) !important}
}