/* l12: cloned from Manodo Home L12 Swing Tag.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="l12"][data-palette="own"] {
  --paper: #4A2545;
  --ink: #F4F0E6;
  --accent: #D9A441;
  --accent2: #C2A6BD;
  --desk: #54314F;
  --line: #5E3D58;
  --bord: #765A6F;
  --faint: #806679;
  --strike: #8E7685;
  --mut: #BEAFB2;
  --soft: #CFC3C3;
  --stone: #62415C;
  --papermut: #7A5E72;
  --pmut2: #957E8C;
  --inkline: #DED6D1;
  --glass: rgba(74,37,69,0.94);
  --scrim: rgba(244,240,230,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(--paper);
}

/* 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="l12"] body { background: var(--paper-3); }
[data-design="l12"] :is(header, footer, section:not([class])) a { color: var(--ink); text-decoration: none; }
[data-design="l12"] :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="l12"]: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="l12"] .dc-l12-h0:hover { background: var(--accent); color: var(--paper) }
[data-design="l12"] .dc-l12-h1:hover { background: var(--ink) }

/* The ambient layer: above the sheet's own ground, below everything on it. */
[data-design="l12"] .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="l12"] .dc-ins { overflow: hidden; }


/* -- the ambient layer ------------------------------------------------------
   The engine stamps --spin inline on each mandala, so the rates are reset with
   !important rather than by re-emitting the markup. Primes, in seconds: four
   turns whose cycle lengths share no factor never return to the same relative
   angle, which is what stops a slow counter-rotation reading as a wheel. */
[data-design="l12"] .dc-orn__sky { position: absolute; inset: 0; }
[data-design="l12"] .dc-orn__sky--a .bloom__a { --spin: 197s !important; }
[data-design="l12"] .dc-orn__sky--a .bloom__b { --spin: 271s !important; }
[data-design="l12"] .dc-orn__sky--b .bloom__a { --spin: 331s !important; }
[data-design="l12"] .dc-orn__sky--b .bloom__b { --spin: 439s !important; }

/* The medallion: held at the optical centre, turning against everything else.
   Rotated through the rotate property so the centring translate on transform
   survives, the way the anchored blooms keep theirs. */
[data-design="l12"] .dc-orn__medal {
  position: absolute; left: 50%; top: 34%;
  width: clamp(220px, 27vw, 440px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: calc(.075 * var(--pattern-intensity, 1));
  animation: dc-l12-turn 613s linear infinite reverse;
  will-change: rotate;
}
[data-design="l12"] .dc-orn__medal svg { width: 100%; height: 100%; display: block; }
@keyframes dc-l12-turn { to { rotate: 360deg; } }

/* -- the inserted bel band --------------------------------------------------
   Foreground ornament, so it is allowed to be seen: the tone class holds the
   four inks of the polychrome ramp and only its opacity is lifted. The band
   takes the hero's own horizontal padding so the rule lines up with the frame
   above it. */
[data-design="l12"] .dc-l12-vine {
  padding: 0 clamp(20px, 3.4vw, 52px) clamp(34px, 4.4vw, 60px);
}
[data-design="l12"] .dc-l12-vine__frame {
  position: relative;
  padding-block: clamp(8px, 1.1vw, 16px);
  border-block: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
[data-design="l12"] .dc-l12-vine .belband { margin-inline: clamp(44px, 6vw, 86px); }
[data-design="l12"] .dc-l12-vine .belband > span {
  opacity: calc(.72 * var(--pattern-intensity, 1));
}

/* The konia sit at each end of the run, so the vine reads as a hem between two
   corner pieces rather than as a line that simply stops. */
[data-design="l12"] .dc-l12-vine__konia {
  position: absolute; top: 50%;
  width: clamp(34px, 4.4vw, 62px); aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: calc(.6 * var(--pattern-intensity, 1));
}
[data-design="l12"] .dc-l12-vine__konia--l { left: 0; }
[data-design="l12"] .dc-l12-vine__konia--r { right: 0; }
[data-design="l12"] .dc-l12-vine__konia .konia {
  position: static; width: 100%; height: 100%; display: block;
}

/* The travelling stroke. pathLength 1000 is already on both strands, so the
   dash numbers are the same whatever the real geometry measures: the head
   arrives, the drawing is held while it is read, and then the tail follows the
   head out the same way it came in. The soft casing runs a beat behind the
   fine line, which is what gives the stroke a hand behind it. */
[data-design="l12"] .dc-l12-vine .kl-line {
  stroke-dasharray: 1000;
  animation: dc-l12-draw 24s cubic-bezier(.42,0,.32,1) infinite;
}
[data-design="l12"] .dc-l12-vine .kl-line--under { animation-delay: -.62s; }
@keyframes dc-l12-draw {
  0%   { stroke-dashoffset: 1000; }
  32%  { stroke-dashoffset: 0; }
  68%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1000; }
}

/* A stroke animation that never finishes is a line that is never there, so at
   rest the band gets the completed drawing rather than a frozen fragment. */
@media (prefers-reduced-motion: reduce) {
  [data-design="l12"] .dc-l12-vine .kl-line {
    animation: none !important; stroke-dashoffset: 0 !important;
  }
  [data-design="l12"] .dc-orn__medal { animation: none !important; rotate: none !important; }
}