/* =====================================================================
   REAL HOLDING GROUP · the dotted tiles of the intro and the Home (16 oct)
   After Room & Pillar's hero: three rows of rounded fields of fine dots laid out on a 1400 x 685 plan
   (phones: 900 x 534), seen through one soft round light near the middle of the screen, so they fade
   out towards the edges. Same proportions and distribution as the reference, in the RHG palette.
   Only on the intro, inside its charcoal, and fainter than the reference (it leaves with the charcoal;
   nothing of it stays on the Home). tex.js only lets the light and the plan drift a few pixels with
   the pointer; nothing here moves on its own.
   ===================================================================== */
.tex{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.tex__grid{ position:absolute; top:50%; left:min(1.389vw, 22.24px); right:min(1.389vw, 22.24px); height:min(47.569vw, 761.59px);
  transform:translate3d(var(--tx, 0px), calc(-50% + var(--ty, 0px)), 0);
  -webkit-mask-image:var(--tex-light); mask-image:var(--tex-light);
  --tex-r:min(40.28vw, 644.6px); --tex-x:48.86%; --tex-y:47.45%;
  --tex-light:radial-gradient(circle var(--tex-r) at calc(var(--tex-x) + var(--mx, 0px)) calc(var(--tex-y) + var(--my, 0px)),
    rgba(0,0,0,.973) 0%, rgba(0,0,0,.973) 3.4%, rgba(0,0,0,.965) 6.9%, rgba(0,0,0,.95) 12.1%, rgba(0,0,0,.92) 17.2%,
    rgba(0,0,0,.88) 22.4%, rgba(0,0,0,.82) 27.6%, rgba(0,0,0,.745) 32.8%, rgba(0,0,0,.65) 37.9%, rgba(0,0,0,.55) 43.1%,
    rgba(0,0,0,.44) 48.3%, rgba(0,0,0,.337) 53.4%, rgba(0,0,0,.243) 58.6%, rgba(0,0,0,.165) 63.8%, rgba(0,0,0,.106) 69%,
    rgba(0,0,0,.063) 74.1%, rgba(0,0,0,.035) 79.3%, rgba(0,0,0,.02) 84.5%, rgba(0,0,0,.008) 89.7%, rgba(0,0,0,.004) 94.8%, rgba(0,0,0,0) 100%); }
.tex__row{ position:absolute; left:0; right:0; height:calc(var(--rh) / 685 * 100%); }
.tex__row--a{ top:0; }
.tex__row--b{ top:50%; transform:translateY(-50%); }
.tex__row--c{ bottom:0; }
.tex__tile{ position:absolute; top:0; bottom:0; left:calc(var(--l) / 1399 * 100%); width:calc(var(--w) / 1399 * 100%);
  border-radius:min(2.222vw, 35.58px);
  background-image:radial-gradient(circle, rgba(241,237,231,.15) .5px, rgba(241,237,231,0) .5px); background-size:3px 3px; }

/* phones and tablets: the wider plan, each field shaded from one side into the charcoal */
@media (max-width:1024px){
  .tex__grid{ top:48.03%; left:max(-61.333vw, -429.95px); right:auto; width:min(240vw, 1682.4px); height:min(142.4vw, 998.22px);
    --tex-r:min(154.67vw, 1084px); --tex-x:48.99%; --tex-y:60.79%; }
  .tex__row{ height:calc(var(--rhm) / 534 * 100%); }
  .tex__tile{ left:calc(var(--lm) / 900 * 100%); width:calc(var(--wm) / 900 * 100%); border-radius:min(5.49vw, 38.48px);
    background-image:linear-gradient(var(--a), rgba(31,30,29,0) var(--f), rgba(31,30,29,.9) var(--t)),
      radial-gradient(circle, rgba(241,237,231,.11) .5px, rgba(241,237,231,0) .5px);
    background-size:100% 100%, 3px 3px; }
}