/* ==========================================================================
   3. THE FADE SCALE  —  signature: raw indigo to snow, and who does it
   ========================================================================== */
.fbi-dn-fade{background:var(--paper); padding:clamp(56px,7vw,92px) 0;}
.fbi-dn-fade__head{max-width:680px; margin-bottom:38px;}

/* the swatch. Denim is an indigo warp over a white weft; abrasion strips
   indigo off the warp and lets the weft show — so as the shade lifts, the
   twill line gets *more* visible, not less. That is why --warp rises. */
.fbi-dn-cloth{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg); box-shadow:var(--shadow-3);
  aspect-ratio:16/6;
  background:linear-gradient(160deg, var(--sh1,#1B2A4A), var(--sh2,#131E36));
  transition:background 1.1s cubic-bezier(.4,.1,.2,1);
}
.fbi-dn-cloth__twill{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(63deg,
    rgba(255,255,255,var(--warp,.05)) 0 2px, transparent 2px 6px);
  transition:background-image 1.1s cubic-bezier(.4,.1,.2,1);
}
/* soft wear along the twill — whiskers and knee highs, abstracted */
.fbi-dn-cloth__wear{
  position:absolute; inset:-14%;
  transform:rotate(-6deg);
  background:
    radial-gradient(ellipse 26% 5%  at 20% 30%, rgba(255,255,255,.85), transparent 72%),
    radial-gradient(ellipse 20% 4%  at 63% 22%, rgba(255,255,255,.7),  transparent 72%),
    radial-gradient(ellipse 30% 6%  at 44% 60%, rgba(255,255,255,.8),  transparent 72%),
    radial-gradient(ellipse 18% 4%  at 82% 68%, rgba(255,255,255,.6),  transparent 72%),
    radial-gradient(ellipse 22% 5%  at 12% 74%, rgba(255,255,255,.65), transparent 72%);
  opacity:var(--wear,0);
  transition:opacity 1.1s cubic-bezier(.4,.1,.2,1);
}
/* the frost, only at the last step */
.fbi-dn-cloth__snow{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) .8px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,.7)  .6px, transparent 1.4px);
  background-size:11px 11px, 17px 17px;
  background-position:0 0, 5px 8px;
  opacity:var(--snow,0);
  transition:opacity 1.1s cubic-bezier(.4,.1,.2,1);
}
.fbi-dn-cloth__seam{
  position:absolute; left:0; right:0; top:22px; height:0; z-index:2;
  border-top:2px dashed rgba(224,146,90,.75);
  opacity:.9;
}
.fbi-dn-cloth__seam--b{top:auto; bottom:22px;}

/* the rail of steps */
.fbi-dn-rail{position:relative; margin-top:30px;}
.fbi-dn-rail__line{
  position:absolute; left:0; right:0; top:9px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--indigo-800),var(--indigo-500) 55%,var(--indigo-100));
}
.fbi-dn-steps{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px;
}
.fbi-dn .fbi-dn-step,
.fbi-dn .fbi-dn-step:hover,
.fbi-dn .fbi-dn-step:focus,
.fbi-dn .fbi-dn-step:active{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  background:none; border:0; box-shadow:none; padding:0; border-radius:0;
  cursor:pointer; text-align:left; font-family:var(--b-font); color:inherit;
}
.fbi-dn-step__dot{
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--indigo-300);
  box-shadow:0 0 0 5px #fff;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.fbi-dn-step:hover .fbi-dn-step__dot{border-color:var(--copper); transform:scale(1.15);}
.fbi-dn-step[aria-pressed="true"] .fbi-dn-step__dot{
  background:var(--copper); border-color:var(--copper); transform:scale(1.15);
}
.fbi-dn-step__label{
  font-family:var(--h-font); font-size:.86rem; font-weight:500; color:var(--ink-soft);
  transition:color .25s ease;
}
.fbi-dn-step:hover .fbi-dn-step__label{color:var(--copper);}
.fbi-dn-step[aria-pressed="true"] .fbi-dn-step__label{color:var(--indigo-900); font-weight:600;}

/* the caption that changes with the step */
.fbi-dn-say{
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end;
  margin-top:38px; padding-top:26px; border-top:1px solid var(--line);
}
.fbi-dn-say__num{
  font-family:var(--h-font); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--copper);
}
.fbi-dn-say__name{
  font-family:var(--h-font); font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:600;
  color:var(--navy-900); margin-top:8px; letter-spacing:-.02em;
}
.fbi-dn-say__desc{color:var(--ink-soft); font-size:.94rem; margin-top:8px; max-width:56ch;}
.fbi-dn .fbi-dn-say__go,
.fbi-dn .fbi-dn-say__go:hover{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  padding:12px 22px; border-radius:var(--r-sm); cursor:pointer;
  background:var(--indigo-700); color:#fff; border:0; box-shadow:var(--shadow-2);
  font-family:var(--h-font); font-size:.86rem; font-weight:600;
  transition:background .22s ease, transform .22s ease, opacity .22s ease;
}
.fbi-dn .fbi-dn-say__go:hover{background:var(--indigo-900); transform:translateY(-2px);}
.fbi-dn-say__go svg{width:15px; height:15px;}
.fbi-dn-say__go[hidden]{display:none;}
.fbi-dn-fade__foot{
  margin-top:22px; font-size:.82rem; color:var(--ink-soft);
  border-left:2px solid var(--line); padding-left:14px; max-width:70ch;
}
@media (max-width:980px){
.fbi-dn-cloth{aspect-ratio:16/9;}
.fbi-dn-say{grid-template-columns:1fr;}
}
@media (max-width:700px){
.fbi-dn-steps{grid-template-columns:repeat(2,1fr); gap:22px 8px;}
.fbi-dn-rail__line{display:none;}
}
@media (max-width:600px){
.fbi-dn-cloth{aspect-ratio:4/3;}
.fbi-dn-steps{grid-template-columns:1fr;}
}