/* Cross-link motion on Traybite, borrowed from AlienGuards and toned down.
   Enhances the existing sister card, footer family strip, and the compact contextual module.
   No layout shift. Respects prefers-reduced-motion. */
@font-face{
  font-family:Quantico;
  src:url("quantico-bi.woff2") format("woff2");
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

/* —— Homepage navy sister card: AG reveal, glow, logo bob, button sheen —— */
.sister-sec .sister{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(720px 200px at 88% 130%,rgba(145,220,31,.16),transparent 68%),
    var(--navy,#0B1F3A);
}
.sister-sec .sister-logo{
  position:relative;
  z-index:1;
}
.sister-sec .sister-logo img{
  will-change:transform;
}
.sister-sec .sister-tx,
.sister-sec .sister .btn{position:relative;z-index:1}

/* Quantico italic eyebrow — AG type cue, small and quiet */
.sister-sec .sister .eyebrow{
  font:italic 700 12px/1.2 Quantico,var(--font),sans-serif;
  letter-spacing:.12em;
}

/* Toned-down AG logo bob, only while in view */
@keyframes tb-ag-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes tb-ag-sheen{
  0%,78%{transform:translateX(-130%)}
  100%{transform:translateX(130%)}
}
@keyframes tb-ag-glow{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
.sister.is-live .sister-logo img{
  animation:tb-ag-bob 6s ease-in-out 0.4s infinite;
}

/* Button sheen + a soft green ring on hover (AG .ag-btn sheen / glow, quieter) */
.sister-sec .sister .btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.sister-sec .sister .btn::after{
  content:"";
  position:absolute;
  inset:-20% -40%;
  background:linear-gradient(105deg,transparent 30%,rgba(145,220,31,.28) 50%,transparent 70%);
  transform:translateX(-130%);
  pointer-events:none;
  z-index:1;
}
.sister.is-live .sister .btn::after{
  animation:tb-ag-sheen 5.8s ease-in-out 1.2s infinite;
}
.sister-sec .sister .btn:hover{
  box-shadow:0 0 0 1px rgba(145,220,31,.35),0 10px 28px -10px rgba(145,220,31,.28);
}

/* AG-style scroll reveal (ag-rv: 2rem / .8s / cubic-bezier(.2,.7,.2,1)), applied only after JS */
@media (prefers-reduced-motion:no-preference){
  [data-tb-xlink].is-pending{
    opacity:0;
    transform:translate3d(0,1.8rem,0);
  }
  [data-tb-xlink].is-in{
    opacity:1;
    transform:none;
    transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),
                transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s);
  }
  .sister.is-pending .sister-logo,
  .sister.is-pending .sister-tx,
  .sister.is-pending .btn{
    opacity:0;
    transform:translate3d(0,1.2rem,0);
  }
  .sister.is-in .sister-logo,
  .sister.is-in .sister-tx,
  .sister.is-in .btn{
    opacity:1;
    transform:none;
    transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),
                transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s);
  }
  .sister.is-in .sister-logo{--d:.05s}
  .sister.is-in .sister-tx{--d:.13s}
  .sister.is-in .btn{--d:.22s}
}

/* —— Footer family strip: quieter AG cues —— */
.family .family__heading{
  font:italic 700 13px/1.2 Quantico,var(--font),sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.family__link{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  text-underline-offset:3px;
}
.family__arr{
  width:13px;
  height:13px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
  transform:translateY(1px);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.family__link::after{
  content:"";
  position:absolute;
  left:0;right:18px;bottom:-2px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.family__link:hover,
.family__link:focus-visible{
  color:#4F8B16;
  text-decoration:none;
}
.family__link:hover::after,
.family__link:focus-visible::after{transform:scaleX(1)}
.family__link:hover .family__arr,
.family__link:focus-visible .family__arr{transform:translate(4px,1px)}

/* —— Compact contextual module (product / cart) —— */
.sb-xctx{
  padding:8px 0 0;
}
.sb-xctx__in{
  max-width:var(--max,1312px);
  margin:0 auto;
  padding:0 var(--s5,40px) 8px;
}
.sb-xctx__row{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:16px 18px;
  border:1px solid var(--line,#E8EBF0);
  border-radius:16px;
  background:
    radial-gradient(420px 120px at 100% 100%,rgba(145,220,31,.08),transparent 70%),
    var(--surface,#F7F8FA);
  text-decoration:none;
  color:inherit;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;
}
.sb-xctx__row:hover,
.sb-xctx__row:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(145,220,31,.2),0 16px 32px -24px rgba(11,31,58,.3);
  outline:none;
}
.sb-xctx__logo{
  display:block;
  height:28px;
  width:auto;
  max-width:108px;
}
.sb-xctx.is-live .sb-xctx__logo{animation:tb-ag-bob 6s ease-in-out infinite}
.sb-xctx__copy{
  flex:1 1 auto;
  min-width:0;
  font-size:15px;
  color:var(--muted,#5C6778);
  line-height:1.45;
}
.sb-xctx__copy b{color:var(--navy,#0B1F3A);font-weight:600}
.sb-xctx__go{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:italic 700 13px/1 Quantico,var(--font),sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy,#0B1F3A);
  white-space:nowrap;
  padding-bottom:3px;
}
.sb-xctx__go::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.sb-xctx__row:hover .sb-xctx__go,
.sb-xctx__row:focus-visible .sb-xctx__go{color:#4F8B16}
.sb-xctx__row:hover .sb-xctx__go::after,
.sb-xctx__row:focus-visible .sb-xctx__go::after{transform:scaleX(1)}
.sb-xctx__arr{
  width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.sb-xctx__row:hover .sb-xctx__arr,
.sb-xctx__row:focus-visible .sb-xctx__arr{transform:translateX(4px)}

.sb-xctx--cart .sb-xctx__in{
  max-width:960px;
  padding:24px 0 0;
}
@media (max-width:760px){
  .sb-xctx__in{padding-left:var(--s3,24px);padding-right:var(--s3,24px)}
  .sb-xctx__row{gap:12px}
  .sb-xctx__go{width:100%}
  .sb-xctx--cart .sb-xctx__in{padding:20px 0 0}
}

@media (prefers-reduced-motion:reduce){
  [data-tb-xlink],
  [data-tb-xlink].is-pending,
  [data-tb-xlink].is-in,
  .sister.is-pending .sister-logo,
  .sister.is-pending .sister-tx,
  .sister.is-pending .btn,
  .sister.is-in .sister-logo,
  .sister.is-in .sister-tx,
  .sister.is-in .btn,
  .sister-sec .sister-logo img,
  .sb-xctx__logo,
  .sb-xctx__row,
  .family__arr,
  .sb-xctx__arr,
  .family__link::after,
  .sb-xctx__go::after,
  .sister-sec .sister .btn::after{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
  .family__link:hover::after,
  .sb-xctx__row:hover .sb-xctx__go::after{transform:scaleX(1) !important}
}