/* Indian Tribe — the ground below the landing
 * -----------------------------------------------------------------------------
 * The landing keeps its cream ceremony. From the preview screen down the world
 * changes: a rose watercolour wash with a mandala drawn on it in white line
 * work, constant across every section — the writing changes, the ground does
 * not. What moves is where the mandala sits: bottom on the preview, then top
 * right, then left, then bottom right, section by section.
 *
 * Two treatments, switched by the Ground A/B toggle:
 *   A  the colour runs through — the wash is pale, and each time a section
 *      arrives a flood of the wordmark's colours sweeps the mandala and drains
 *      away again, leaving the line work behind
 *   B  the colour is underneath — a permanent wash seeps up through the line
 *      work, and the discs turn against each other the whole time
 *
 * Both share: the discs turn in alternating directions, scroll drives how fast,
 * and the pointer wets the lattice so colour spreads through it like gulaal.
 */

:root{
  --rose-0:  #fdf6f5;
  --rose-1:  #f9e7e8;
  --rose-2:  #f2d2d8;
  --rose-3:  #e7b9c4;
  --peach:   #fbeadd;
  --mauve:   #ecd9e6;
  --ink-rose:#3b2a2e;
  --ground:transparent;
  --onGround:#3b2a2e;

  /* written per frame by ground.js */
  --gx:  50%;
  --gy:  118%;
  --gs:  1;
  --gspin: 0deg;
  --gwet: 0;
}

/* ── the wash ────────────────────────────────────────────────────────────── */

.ground{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:var(--groundK, 0);
  transform:translateZ(0);
  /* Paper, not rose: the same --paper / --paper-2 / --paper-3 the landing and
     portfolio.html are built on, so the ground reads as one continuous stock
     across every page instead of shifting pink below the fold. */
  background:
    radial-gradient(105% 78% at 82% 6%,  rgba(247,243,237,.80) 0%, rgba(247,243,237,0) 54%),
    radial-gradient( 92% 72% at 14% 26%, rgba(235,228,215,.55) 0%, rgba(235,228,215,0) 56%),
    radial-gradient(120% 96% at 50% 114%, rgba(222,213,196,.50) 0%, rgba(222,213,196,0) 58%),
    radial-gradient(104% 84% at 50% 44%, rgba(252,250,246,1)   0%, rgba(252,250,246,0) 68%),
    linear-gradient(166deg, #f7f3ed 0%, #f4f0e8 42%, #ebe4d7 100%);
}

/* the softest cloud drift, so the wash is not a flat print */
.ground::after{
  content:"";
  position:absolute; inset:-10%;
  background:
    radial-gradient(46% 38% at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    radial-gradient(40% 34% at 72% 62%, rgba(222,213,196,.42), rgba(222,213,196,0) 72%);
  animation:groundDrift 44s ease-in-out infinite alternate;
}
@keyframes groundDrift{
  from{ transform:translate3d(-1.5%, -1%, 0) scale(1.02); }
  to  { transform:translate3d( 1.5%,  1.5%, 0) scale(1.06); }
}

/* ── the mandala ─────────────────────────────────────────────────────────── */

.mandala{
  position:fixed;
  left:0; top:0;
  z-index:1;
  width:var(--gw, 92vmin); height:var(--gw, 92vmin);
  pointer-events:none;
  /* The art and the colour that soaks into it want different weights: the
     drawing has to sit *in* the ground the way the landing's line work does,
     while the wet cells need to be seen. So the wrapper carries the page-level
     fade and each layer carries its own. */
  opacity:var(--groundK, 0);
  transform:translate3d(calc(var(--gx) - 50%), calc(var(--gy) - 50%), 0) scale(var(--gs));
  transform-origin:50% 50%;
  transition:none;
}
.mandala > .m-art{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  object-fit:contain;
  /* halved: the mandala reads as a watermark under the work, not a pattern */
  opacity:var(--gopacity, .08);
  transform:rotate(var(--gspin, 0deg));
}
.mandala .m-svg{ overflow:visible; }


/* the colour layer, cut to the shape of the drawing: what takes colour is the
   artwork's own line work, not a disc laid over the top of it */
.mandala .m-ink{
  display: none !important;
}

/* The discs only turn while you are scrolling, so at rest this repaints
   nothing at all. They are promoted for the length of a spin and let go again —
   which is what will-change is actually for. */
.mandala .rg{
  transform-box:view-box;
  transform-origin:500px 500px;
}
.mandala.is-spinning .rg{ will-change:transform; }

.mandala .mo{
  fill:none;
  stroke:rgba(255,255,255,.95);
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;
}
.mandala .mo.thin{ stroke-width:1.1; stroke:rgba(255,255,255,.72); }
.mandala .mo.dot { fill:rgba(255,255,255,.85); stroke:none; }


/* ── the mandala switch ──────────────────────────────────────────────────── */
/* the one variant still worth seeing both ways; written by js/ab.js */
html[data-mandala="off"] .mandala{ display:none; }