/* ━━━ 面料质感底纹 ━━━
   给 <image-slot> 的空态（未拖图时）铺上与礼服面料对应的 CSS 织物纹理。
   通过 ::part(frame) 作用于组件内部画框；拖入照片后图片自动覆盖纹理。
   在祖先元素上标 data-fabric="satin|lace|tulle|velvet|brocade|couture" 即可。 */

[data-fabric] image-slot::part(frame) { background-color: var(--ivory); }

/* 缎 · 斜向流光 */
[data-fabric="satin"] image-slot::part(frame) {
  background:
    linear-gradient(118deg,
      color-mix(in srgb, var(--ivory) 90%, #fff) 0%,
      color-mix(in srgb, #fff 78%, var(--ivory)) 26%,
      color-mix(in srgb, var(--ivory) 70%, var(--gold)) 50%,
      color-mix(in srgb, #fff 82%, var(--ivory)) 70%,
      color-mix(in srgb, var(--ivory) 88%, #fff) 100%);
}

/* 蕾丝 · 金线点阵网格 */
[data-fabric="lace"] image-slot::part(frame) {
  background-color: var(--ivory);
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--gold) 26%, transparent) 1.4px, transparent 2px),
    radial-gradient(circle, color-mix(in srgb, var(--gold) 15%, transparent) 1px, transparent 1.6px);
  background-size: 24px 24px, 24px 24px;
  background-position: 0 0, 12px 12px;
}

/* 纱 · 细点雾面 + 轻盈竖向渐隐 */
[data-fabric="tulle"] image-slot::part(frame) {
  background-color: color-mix(in srgb, var(--ivory) 92%, #fff);
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--gold) 20%, transparent) 1px, transparent 1.5px),
    linear-gradient(180deg, color-mix(in srgb, #fff 65%, transparent), transparent 62%);
  background-size: 10px 10px, 100% 100%;
}

/* 丝绒 · 柔深绒面 */
[data-fabric="velvet"] image-slot::part(frame) {
  background:
    radial-gradient(135% 95% at 50% 0%,
      color-mix(in srgb, var(--ivory) 62%, var(--accent-deep)) 0%,
      color-mix(in srgb, var(--ivory) 82%, var(--ink)) 66%,
      color-mix(in srgb, var(--ivory) 72%, var(--ink)) 100%);
}

/* 织锦 / 刺绣 · 织金菱格 */
[data-fabric="brocade"] image-slot::part(frame) {
  background-color: color-mix(in srgb, var(--ivory) 84%, var(--gold));
  background-image:
    repeating-linear-gradient(45deg, transparent 0 13px, color-mix(in srgb, var(--gold) 17%, transparent) 13px 14.5px),
    repeating-linear-gradient(-45deg, transparent 0 13px, color-mix(in srgb, var(--gold) 17%, transparent) 13px 14.5px);
}

/* 高定 · 缎光 + 金竖纹 */
[data-fabric="couture"] image-slot::part(frame) {
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--gold) 8%, transparent) 7px 8px),
    linear-gradient(125deg,
      color-mix(in srgb, var(--ivory) 86%, #fff),
      #fff 38%,
      color-mix(in srgb, var(--gold) 26%, var(--ivory)) 60%,
      color-mix(in srgb, var(--ivory) 88%, #fff) 100%);
}