/* ==========================================================================
   1. BANNER  —  indigo flows left to right, under a twill screen
   ========================================================================== */
.fbi-dn-banner{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--indigo-800);
  padding:clamp(26px,3.4vw,40px) 0;
  color:#fff;
}
/* Twice the banner's width, carrying the palette twice. Sliding from -50%
   to 0 lands on an identical frame, so the loop has no seam. */
.fbi-dn-banner__flow{
  position:absolute; top:0; bottom:0; left:0; width:200%; z-index:0;
  background:linear-gradient(90deg,
    var(--indigo-900) 0%,  var(--indigo-700) 8.33%, var(--indigo-500) 16.66%,
    var(--indigo-600) 25%, var(--indigo-800) 33.33%, var(--indigo-700) 41.66%,
    var(--indigo-900) 50%, var(--indigo-700) 58.33%, var(--indigo-500) 66.66%,
    var(--indigo-600) 75%, var(--indigo-800) 83.33%, var(--indigo-700) 91.66%,
    var(--indigo-900) 100%);
  animation:fbi-dn-pan 30s linear infinite;
  will-change:transform;
}
@keyframes fbi-dn-pan{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}
/* the copper thread, drifting the other way */
.fbi-dn-banner__flow--copper{
  background:linear-gradient(90deg,
    transparent 0%, var(--copper) 12.5%, transparent 25%,
    var(--copper-lt) 37.5%, transparent 50%, var(--copper) 62.5%,
    transparent 75%, var(--copper-lt) 87.5%, transparent 100%);
  opacity:.24; mix-blend-mode:screen; filter:blur(46px);
  animation-duration:49s; animation-direction:reverse;
}
/* the tell: printing sat under a halftone dot screen, denim sits under twill */
.fbi-dn-banner__twill{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:repeating-linear-gradient(63deg,
    rgba(255,255,255,.10) 0 1px, transparent 1px 6px);
  mix-blend-mode:overlay;
}
.fbi-dn-banner__veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(96deg, rgba(6,11,26,.62) 0%, rgba(6,11,26,.30) 48%, rgba(6,11,26,.06) 100%);
}
.fbi-dn-banner__inner{position:relative; z-index:3;}

.fbi-dn-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px 7px 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32);
  font-family:var(--h-font); font-size:.76rem; font-weight:600;
  letter-spacing:.06em; color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.fbi-dn-chip__dot{
  width:7px; height:7px; border-radius:50%; background:var(--copper-lt);
  box-shadow:0 0 0 4px rgba(224,146,90,.28);
}
/* .fbi-dn h1 (0,1,1) outranks a lone class, so this needs the extra ancestor */
.fbi-dn .fbi-dn-banner__title{
  color:#fff; font-size:clamp(1.9rem,3.9vw,2.85rem); font-weight:700;
  margin:14px 0 0; letter-spacing:-.03em;
}
.fbi-dn-banner__tag{
  font-family:var(--h-font); font-size:clamp(.98rem,1.4vw,1.15rem); font-weight:400;
  color:rgba(255,255,255,.92); margin-top:8px;
}
@media (max-width:600px){
.fbi-dn-banner__flow--copper{display:none;}
}
@media (prefers-reduced-motion:reduce){
.fbi-dn-banner__flow{transform:translateX(-25%);}
}