/* terracotta: cloned from Manodo Home L05 Ruled Stack.dc.html. Generated by tools/clone.js. */

/* The brief's own ground, which is what the design was drawn on.
 *
 * Two vocabularies on purpose. The brief's markup reads its own names (--desk,
 * --bord, --papermut); the site's chrome, the shared sections appended under
 * the brief, hover states and focus outlines read the site's names
 * (--accent-ink, --on-accent, --line-2, --well). The first cut of this block
 * carried only the brief's names, and every consumer of the other vocabulary
 * quietly resolved to nothing: hovers that never changed, buttons whose text
 * did not paint, wells with no ground. A palette is only a palette here if
 * BOTH vocabularies resolve, and the site's names are derived from the brief's
 * own values so the two cannot disagree.
 *
 * Deliberately NOT :root-scoped. On a normal page these attributes sit on the
 * html element and nothing changes; on the sampler, one page carries all seven
 * themes at once, each section wrapped in a div bearing its own theme's
 * data-design and data-palette, and custom properties cascade from whatever
 * element defines them. :root would have pinned every theme's colours to the
 * one document. */
[data-design="terracotta"][data-palette="own"] {
  --paper: #F0E3D3;
  --ink: #3A241B;
  --accent: #C96F4A;
  --accent2: #9C6238;
  --desk: #E5D8C8;
  --line: #DACCBD;
  --bord: #C1B1A3;
  --faint: #B6A698;
  --strike: #A79789;
  --mut: #746156;
  --soft: #624E43;
  --stone: #D7C8B9;
  --papermut: #BDAE9F;
  --pmut2: #A08F82;
  --inkline: #523D33;
  --glass: rgba(240,227,211,0.94);
  --scrim: rgba(58,36,27,0.72);
  --paper-2:   color-mix(in srgb, var(--paper) 55%, var(--desk));
  --paper-3:   var(--desk);
  --well:      var(--stone);
  --well-dim:  color-mix(in srgb, var(--stone) 82%, var(--ink));
  --ink-2:     var(--inkline);
  --line-2:    var(--bord);
  --accent-2:  var(--accent2);
  --accent-ink: var(--accent);
  --on-accent: var(--ink);
}

/* The brief's own base rules, which lived in its <helmet> and were otherwise
   lost with it: the desk tone outside the sheet, and plain ink links that turn
   accent on hover. Scoped to the cloned surfaces (the chrome and the brief's
   own unclassed sections); the shared sections keep the site's styling, and
   anything the brief set inline still wins outright. */
:root[data-design="terracotta"] body { background: var(--paper-3); }
[data-design="terracotta"] :is(header, footer, section:not([class])) a { color: var(--ink); text-decoration: none; }
[data-design="terracotta"] :is(header, footer, section:not([class])) a:hover { color: var(--accent); }

/* The same names, driven by whichever of the 24 palettes is chosen, so the
   colour switcher works on cloned markup without touching a single style="". */
[data-design="terracotta"]:not([data-palette="own"]) {
  --accent2: var(--accent-2);
  --desk: var(--paper-3);
  --bord: var(--line-2);
  --papermut: var(--faint);
  --pmut2: var(--strike);
  --inkline: var(--ink-2);
  --glass: color-mix(in srgb, var(--paper) 94%, transparent);
  --scrim: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* style-hover="..." is an authoring attribute no browser implements. These are
   the brief's own hover declarations, moved into rules that actually fire. */
[data-design="terracotta"] .dc-terracotta-h0:hover { background: var(--accent); color: var(--paper) }
[data-design="terracotta"] .dc-terracotta-h1:hover { background: var(--ink); color: var(--paper) }
[data-design="terracotta"] .dc-terracotta-h2:hover { background: var(--paper); color: var(--ink) }

/* The ambient layer: above the sheet's own ground, below everything on it. */
[data-design="terracotta"] .dc-orn {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: -1;
}
/* An inserted ornament band clips its own overhang so a vine that runs off the
   edge cannot widen the page. */
[data-design="terracotta"] .dc-ins { overflow: hidden; }

[data-design="terracotta"] .dc-orn .bloom span { animation: dc-terra-breathe 11s ease-in-out infinite; }
@keyframes dc-terra-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }

/* ---- the ambient ground -------------------------------------------------- */

/* No rotation reaches this design. The engine's spin lives on .bloom span and
   on the per-band [data-motion] rules; both are replaced here rather than
   slowed, because a slow rotation is still a rotation. The pulse is on the
   scale property, not on transform, so the anchor translate the bloom carries
   on its own transform survives untouched. */
[data-design="terracotta"] .dc-orn .bloom span {
  animation: dc-terracotta-swell 11s ease-in-out infinite;
  will-change: scale;
}
[data-design="terracotta"] .dc-orn .bloom__b { animation-delay: -3.7s; }
[data-design="terracotta"] .dc-orn .mz,
[data-design="terracotta"] .dc-orn .mz-rings,
[data-design="terracotta"] .dc-orn .mz--core,
[data-design="terracotta"] .dc-orn .kl,
[data-design="terracotta"] .dc-orn .kl-line { animation: none; }

/* The lattice wash. Oversized on every side so no edge of the tiling is ever
   in frame, and it breathes from its own centre rather than drifting: a drift
   is travel, and this design does not travel. */
[data-design="terracotta"] .dc-tc-jaal {
  position: absolute; top: -14%; left: -14%;
  width: 128%; height: 128%; display: block;
  opacity: calc(.035 * var(--pattern-intensity, 1));
  animation: dc-terracotta-swell 11s ease-in-out infinite -5.5s;
}
[data-design="terracotta"] .dc-tc-jaal svg { width: 100%; height: 100%; display: block; }

/* Corners. The konia SVG positions itself absolutely under the shared rules,
   which would collapse it inside a wrapper of its own, so it is put back into
   flow and the wrapper does the placing. */
[data-design="terracotta"] .dc-tc-konia {
  position: absolute; display: block;
  width: clamp(72px, 9vw, 148px); aspect-ratio: 1;
  animation: dc-terracotta-swell 11s ease-in-out infinite;
}
[data-design="terracotta"] .dc-tc-konia svg {
  position: static; width: 100%; height: 100%; display: block;
}
[data-design="terracotta"] .dc-tc-konia--tl { top: clamp(10px, 1.6vw, 22px); left: clamp(10px, 1.6vw, 22px); }
[data-design="terracotta"] .dc-tc-konia--tr { top: clamp(10px, 1.6vw, 22px); right: clamp(10px, 1.6vw, 22px); animation-delay: -2.75s; }
[data-design="terracotta"] .dc-tc-konia--bl { bottom: clamp(10px, 1.6vw, 22px); left: clamp(10px, 1.6vw, 22px); animation-delay: -5.5s; }
[data-design="terracotta"] .dc-tc-konia--br { bottom: clamp(10px, 1.6vw, 22px); right: clamp(10px, 1.6vw, 22px); animation-delay: -8.25s; }

/* Three buti set off the reading column, so the middle of the sheet stays
   clear and the ornament reads at the margins. */
[data-design="terracotta"] .dc-tc-buti {
  position: absolute; display: block;
  width: clamp(40px, 5.2vw, 82px); aspect-ratio: 1;
  animation: dc-terracotta-swell 11s ease-in-out infinite;
}
[data-design="terracotta"] .dc-tc-buti svg { width: 100%; height: 100%; display: block; }
[data-design="terracotta"] .dc-tc-buti--a { top: 24%; left: 3.5%; animation-delay: -1.8s; }
[data-design="terracotta"] .dc-tc-buti--b { top: 52%; right: 4%;  animation-delay: -6.4s; }
[data-design="terracotta"] .dc-tc-buti--c { top: 78%; left: 6%;   animation-delay: -9.2s; }

/* ---- the inserted bands -------------------------------------------------- */

/* The horizontal padding is the brief's own, so a band lines up with the
   panels above and below it rather than sitting in its own margin. */
[data-design="terracotta"] .dc-tc-band {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2.4vw, 30px);
  padding: clamp(4px, 1vw, 12px) clamp(20px, 3.4vw, 48px) clamp(26px, 3.4vw, 46px);
}

/* The roundel. Foreground ornament, so it is allowed to be seen: the tone
   class is kept for its four inks and its ambient opacity is overridden. */
[data-design="terracotta"] .dc-tc-roundel {
  display: block; flex: 0 0 auto;
  width: clamp(132px, 20vw, 232px); aspect-ratio: 1;
  opacity: calc(.88 * var(--pattern-intensity, 1));
  animation: dc-terracotta-swell 11s ease-in-out infinite;
}
[data-design="terracotta"] .dc-tc-roundel svg { width: 100%; height: 100%; display: block; }
/* A rangoli is laid all at once and left. Its bands hold still; the pulse is
   on the whole flower, which is the design's one motion. */
[data-design="terracotta"] .dc-tc-band .mz,
[data-design="terracotta"] .dc-tc-band .mz-rings,
[data-design="terracotta"] .dc-tc-band .mz--core { animation: none; }

/* The hairline the roundel is threaded onto. It fades out toward the edges so
   the band never reads as a boxed rule across the page. */
[data-design="terracotta"] .dc-tc-rule {
  display: block; flex: 1 1 auto; height: 2px; max-width: 30%;
  border-radius: 999px;
  opacity: calc(.55 * var(--pattern-intensity, 1));
}
[data-design="terracotta"] .dc-tc-rule--l { background: linear-gradient(90deg, transparent, var(--accent)); }
[data-design="terracotta"] .dc-tc-rule--r { background: linear-gradient(270deg, transparent, var(--accent)); }

/* The threshold kolam. One closed strand, drawn on slowly, held, then the
   tail follows the head out the way it came in. */
[data-design="terracotta"] .dc-tc-kolam {
  display: block; flex: 0 0 auto;
  width: clamp(168px, 25vw, 296px); aspect-ratio: 1;
  opacity: calc(.9 * var(--pattern-intensity, 1));
}
[data-design="terracotta"] .dc-tc-kolam svg { width: 100%; height: 100%; display: block; }
[data-design="terracotta"] .dc-tc-kolam .kl { animation: none; }
[data-design="terracotta"] .dc-tc-kolam .kl-line {
  stroke-dasharray: 1000;
  animation: dc-terracotta-chalk 26s cubic-bezier(.42,0,.32,1) infinite;
}
/* The broad chalky underline runs a shade ahead of the fine one, which is what
   gives a rice-flour line its soft leading edge. */
[data-design="terracotta"] .dc-tc-kolam .kl-line--under { animation-delay: -1.1s; }
/* The pulli go down first and the strand is walked around them afterwards,
   which is the order it is actually done in. */
[data-design="terracotta"] .dc-tc-kolam .kl-dots circle {
  animation: dc-terracotta-pulli 26s ease-out infinite;
}
[data-design="terracotta"] .dc-tc-kolam .kl-dots circle:nth-child(3n)   { animation-delay: -.55s; }
[data-design="terracotta"] .dc-tc-kolam .kl-dots circle:nth-child(3n+1) { animation-delay: -1.1s; }

@keyframes dc-terracotta-swell {
  0%, 100% { scale: 1; }
  50%      { scale: 1.045; }
}
@keyframes dc-terracotta-chalk {
  0%   { stroke-dashoffset: 1000; }   /* nothing on the step yet */
  42%  { stroke-dashoffset: 0; }      /* the loop closes */
  76%  { stroke-dashoffset: 0; }      /* held, while it is read */
  100% { stroke-dashoffset: -1000; }  /* the tail follows the head out */
}
@keyframes dc-terracotta-pulli {
  0%, 2%   { transform: scale(0); opacity: 0; }
  9%       { transform: scale(1.35); opacity: 1; }
  14%, 74% { transform: scale(1); opacity: .72; }
  100%     { transform: scale(1); opacity: 0; }
}

/* The global reduce rule halts .dc-orn. The inserted bands are separate
   sections and have to be halted here, and a drawing animation that is merely
   stopped is a line that was never finished, so the strand is left complete. */
@media (prefers-reduced-motion: reduce) {
  [data-design="terracotta"] .dc-tc-roundel,
  [data-design="terracotta"] .dc-tc-kolam,
  [data-design="terracotta"] .dc-tc-kolam .kl,
  [data-design="terracotta"] .dc-tc-kolam .kl-line,
  [data-design="terracotta"] .dc-tc-kolam .kl-dots circle {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    scale: 1 !important;
    transform: none !important;
  }
  [data-design="terracotta"] .dc-tc-kolam .kl-dots circle { opacity: .7 !important; }
}