@layer components {
  /* Leather base: layered gradients to mimic depth + wear */
  .leather-footer {
    color: rgb(243 235 221); /* bone */
    background:
      /* subtle highlight sweep */
      radial-gradient(1200px 400px at 30% 0%, rgba(255,255,255,.08), transparent 60%),
      /* edge darkening */
      radial-gradient(900px 500px at 70% 120%, rgba(0,0,0,.45), transparent 60%),
      /* leather tone */
      linear-gradient(180deg, #3b231a 0%, #2a1913 35%, #1b110e 100%);
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(0,0,0,.55);
    box-shadow:
      0 -20px 60px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.06);
  }

  /* Leather grain/noise overlay */
  .leather-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background:
      radial-gradient(circle at 20% 10%, rgba(255,255,255,.12), transparent 45%),
      radial-gradient(circle at 70% 30%, rgba(0,0,0,.18), transparent 50%),
      radial-gradient(circle at 40% 80%, rgba(255,255,255,.06), transparent 55%);
    mix-blend-mode: overlay;
  }

  /* Vignette + slight "wear" */
  .leather-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .35;
    background:
      radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%);
  }

  /* Stitch seam bar at the top */
  .leather-stitch {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 22px;
    /* seam base */
    background:
      linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.10)),
      linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.65);
  }

  /* The stitched thread itself (two dashed lines) */
  .leather-stitch::before,
  .leather-stitch::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    height: 2px;
    opacity: .9;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(243,235,221,.75) 0px,
        rgba(243,235,221,.75) 10px,
        rgba(243,235,221,0) 10px,
        rgba(243,235,221,0) 18px
      );
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.55));
  }

  .leather-stitch::before { top: 7px; }
  .leather-stitch::after  { top: 13px; opacity: .65; }
}