/* ============================================================
   TAVDI — textile: Patola ikat, Bandhani, Kutchi aabhla.
   Built from gradients and inline SVG so they scale, recolour
   with the theme, and cost nothing to download.
   ============================================================ */

/* ------------------------------------------------------------
   પટોળા — Patola (Patan double-ikat)
   The rattanchok grid: interlocking diamonds on a strict lattice.
   Two overlaid conic/linear layers give the "dyed before weaving"
   softness at the diamond edges that a hard SVG path can't.
   ------------------------------------------------------------ */
.ikat {
  --ikat-a: var(--patola);
  --ikat-b: var(--kesar);
  --ikat-size: 46px;
  --ikat-alpha: .16;
  background-image:
    repeating-conic-gradient(
      from 45deg,
      color-mix(in oklab, var(--ikat-a) calc(var(--ikat-alpha) * 100%), transparent) 0% 25%,
      transparent 0% 50%
    ),
    repeating-conic-gradient(
      from 45deg,
      color-mix(in oklab, var(--ikat-b) calc(var(--ikat-alpha) * 62%), transparent) 0% 25%,
      transparent 0% 50%
    );
  background-size: var(--ikat-size) var(--ikat-size),
                   calc(var(--ikat-size) / 2) calc(var(--ikat-size) / 2);
  background-position: 0 0, calc(var(--ikat-size) / 4) calc(var(--ikat-size) / 4);
}

/* The full motif — elephant/parrot lattice abstracted to its
   geometric skeleton. Used behind large panels. */
.ikat-panel {
  background-color: var(--bg-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23D4145A' stroke-width='1.6' stroke-opacity='.28'%3E%3Cpath d='M60 4 106 60 60 116 14 60Z'/%3E%3Cpath d='M60 24 86 60 60 96 34 60Z'/%3E%3Cpath d='M60 44 70 60 60 76 50 60Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F5A623' stroke-width='1.3' stroke-opacity='.24'%3E%3Cpath d='M0 60 14 60M106 60 120 60M60 0 60 4M60 116 60 120'/%3E%3Cpath d='M0 0 14 14M120 0 106 14M0 120 14 106M120 120 106 106'/%3E%3C/g%3E%3Ccircle cx='60' cy='60' r='3.4' fill='%23F2C14E' fill-opacity='.5'/%3E%3Ccircle cx='0' cy='0' r='2.4' fill='%23D4145A' fill-opacity='.45'/%3E%3Ccircle cx='120' cy='0' r='2.4' fill='%23D4145A' fill-opacity='.45'/%3E%3Ccircle cx='0' cy='120' r='2.4' fill='%23D4145A' fill-opacity='.45'/%3E%3Ccircle cx='120' cy='120' r='2.4' fill='%23D4145A' fill-opacity='.45'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* ------------------------------------------------------------
   બાંધણી — Bandhani (Kutch / Jamnagar tie-dye)
   Thousands of tied knots resist the dye: rings of tiny dots,
   never perfectly aligned. The offset rows are the point.
   ------------------------------------------------------------ */
.bandhani {
  --bnd: var(--haldi);
  --bnd-size: 34px;
  --bnd-alpha: .22;
  background-image:
    radial-gradient(circle at 50% 50%,
      color-mix(in oklab, var(--bnd) calc(var(--bnd-alpha) * 100%), transparent) 0 1.6px,
      transparent 2.4px),
    radial-gradient(circle at 50% 50%,
      color-mix(in oklab, var(--patola) calc(var(--bnd-alpha) * 78%), transparent) 0 1.3px,
      transparent 2px);
  background-size: var(--bnd-size) var(--bnd-size), var(--bnd-size) var(--bnd-size);
  background-position: 0 0, calc(var(--bnd-size) / 2) calc(var(--bnd-size) / 2);
}

/* ------------------------------------------------------------
   કચ્છી આભલા — Kutchi mirror-work.
   Small mirrors catching the burner. Only on hero-adjacent
   surfaces; it sparkles and would be noise at scale.
   ------------------------------------------------------------ */
.aabhla {
  background-image:
    radial-gradient(circle at 20% 30%, rgb(233 226 212 / .13) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 18%, rgb(242 193 78 / .14) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 44% 78%, rgb(233 226 212 / .1) 0 1.7px, transparent 2.8px),
    radial-gradient(circle at 88% 64%, rgb(212 20 90 / .13) 0 1.9px, transparent 3px);
  background-size: 180px 180px, 220px 220px, 160px 160px, 260px 260px;
}

/* ------------------------------------------------------------
   Ambient warmth — the burner throwing light into the room.
   Sits behind content, never above it.
   ------------------------------------------------------------ */
.emberlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 46% at 18% 8%,  rgb(255 107 26 / .16), transparent 68%),
    radial-gradient(50% 40% at 88% 26%, rgb(212 20 90 / .14), transparent 66%),
    radial-gradient(70% 50% at 50% 108%, rgb(245 166 35 / .1), transparent 72%);
}
[data-theme="light"] .emberlight {
  background:
    radial-gradient(58% 46% at 18% 8%,  rgb(222 85 16 / .1), transparent 68%),
    radial-gradient(50% 40% at 88% 26%, rgb(184 13 76 / .09), transparent 66%),
    radial-gradient(70% 50% at 50% 108%, rgb(196 120 11 / .09), transparent 72%);
}

/* ------------------------------------------------------------
   Rules and dividers woven from the ikat border
   ------------------------------------------------------------ */
.weft-rule {
  height: 9px;
  border: 0;
  margin: 0;
  background-image:
    linear-gradient(90deg,
      var(--patola) 0 8px, transparent 8px 16px,
      var(--kesar) 16px 24px, transparent 24px 32px);
  background-size: 32px 100%;
  clip-path: polygon(
    0 50%, 4.16% 0, 8.33% 50%, 12.5% 100%, 16.66% 50%, 20.83% 0, 25% 50%,
    29.16% 100%, 33.33% 50%, 37.5% 0, 41.66% 50%, 45.83% 100%, 50% 50%,
    54.16% 0, 58.33% 50%, 62.5% 100%, 66.66% 50%, 70.83% 0, 75% 50%,
    79.16% 100%, 83.33% 50%, 87.5% 0, 91.66% 50%, 95.83% 100%, 100% 50%,
    100% 100%, 0 100%);
  opacity: .55;
}

.hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

/* Corner ticks — where warp meets weft on the loom frame */
.tick-frame { position: relative; }
.tick-frame::before,
.tick-frame::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--accent);
  opacity: .55;
  pointer-events: none;
}
.tick-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.tick-frame::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Grain — the cart's tin sheeting, keeps flat fills from
   looking like flat fills */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}