/* =====================================================================
   RHG · Chroma: the colour of the transitions (chroma.js). Main experience only.
   Every rule lives under [data-rhg-main-experience] (the Home's scene, section.hero#inicio): nothing here reaches
   the bar, the blog or anything outside the scene, and nothing applies by itself: the nodes exist only inside the
   layers chroma.js creates, and they are hidden (opacity 0) until the scroll timeline shows them.
   No filters, no blend modes, no backdrop-filter, no box-shadow: soft radial gradients on small nodes, opacity,
   transform, colour. Copper stays the main accent; the green is a secondary, deep, mineral, desaturated one.
   ===================================================================== */
[data-rhg-main-experience]{
  /* the one secondary accent, a mineral green family (round 3, from the brief's: saturation 38 to 48%, never lime,
     emerald, cyan or teal): base (the far fields), mid (fields' rims, points), light (active points, line highlights).
     Two more tones of the family are derived inside chroma.js only: deep #102A23 (the background fields) and
     highlight #4B8B70 (cores). The copper is the site's own (--cognac-lite). */
  --rhg-transition-green:#1E5444;
  --rhg-transition-green-dim:#153B31;
  --rhg-transition-green-light:#34745D;
}

/* a layer: placed by chroma.js inside the element whose motion it follows (its box is the unit of every position
   and drift: %, cqw, cqh). It takes no events and paints nothing itself (a still layer may carry a mask with soft
   holes at the copy: chroma.js, inline). */
[data-rhg-main-experience] .rhg-chroma{ position:absolute; inset:0; pointer-events:none; container-type:size; }
[data-rhg-main-experience] .rhg-chroma.is-clip{ overflow:hidden; }

/* a node: a point, a spark (core and halo), the one brief main spark, a light, a haze.
   x, y: its place in % of the layer; d (or w, h): its size; s: its scale. Its offset, all tweened by the timeline:
   tx, ty: a drift in % of the layer (cqw, cqh) and dx, dy one in px, both as far along as kx, ky (0 to 1; k for
   both when they are not given); mx, my: its place along the object's path (% of the layer, a follow light);
   fx, fy: how far it lags behind the object (vw, vh). */
[data-rhg-main-experience] .rhg-chroma__n{ position:absolute; left:calc(var(--x, 50) * 1%); top:calc(var(--y, 50) * 1%);
  width:var(--w, var(--d, 2px)); height:var(--h, var(--d, 2px)); margin:calc(var(--h, var(--d, 2px)) / -2) 0 0 calc(var(--w, var(--d, 2px)) / -2);
  border-radius:50%; pointer-events:none; opacity:0; visibility:hidden;
  transform:translate3d(
    calc((var(--tx, 0) * var(--kx, var(--k, 0)) + var(--mx, 0)) * 1cqw + var(--dx, 0) * var(--kx, var(--k, 0)) * 1px + var(--fx, 0) * 1vw),
    calc((var(--ty, 0) * var(--ky, var(--k, 0)) + var(--my, 0)) * 1cqh + var(--dy, 0) * var(--ky, var(--k, 0)) * 1px + var(--fy, 0) * 1vh), 0)
    scale(var(--s, 1)); }
/* a spark's opacity is its own (o, the timeline's) */
[data-rhg-main-experience] .rhg-chroma__n[data-e]{ visibility:visible; opacity:var(--o, 0); }
/* round 3: the large round-2 lights on their own compositor layers (their opacity and drift never repaint the stage) */
[data-rhg-main-experience] .rhg-chroma__n--light, [data-rhg-main-experience] .rhg-chroma__n--haze{ will-change:transform, opacity; }

/* the colours a node can take: the three greens, copper, desaturated gold, warm off-white.
   c: the body, hot: the core (always the same family, a little lighter: never a white hot spot) */
[data-rhg-main-experience] .rhg-chroma [data-c="green"]{ --rhgc-c:var(--rhg-transition-green); --rhgc-hot:var(--rhg-transition-green-light); }
[data-rhg-main-experience] .rhg-chroma [data-c="green-dim"]{ --rhgc-c:var(--rhg-transition-green-dim); --rhgc-hot:var(--rhg-transition-green); }
[data-rhg-main-experience] .rhg-chroma [data-c="green-light"]{ --rhgc-c:var(--rhg-transition-green-light); --rhgc-hot:color-mix(in srgb, var(--rhg-transition-green-light) 72%, #e2d6c3); }
[data-rhg-main-experience] .rhg-chroma [data-c="copper"]{ --rhgc-c:#c08a57; --rhgc-hot:#e6c39b; }
[data-rhg-main-experience] .rhg-chroma [data-c="gold"]{ --rhgc-c:#c9a468; --rhgc-hot:#efdfbf; }
[data-rhg-main-experience] .rhg-chroma [data-c="warm"]{ --rhgc-c:#e2d6c3; --rhgc-hot:#f4ede2; }

/* point: 1.5 to 3.5 px seen (the node is larger so its edge falls off softly) */
[data-rhg-main-experience] .rhg-chroma__n--point{
  background:radial-gradient(circle closest-side, var(--rhgc-hot) 0%, var(--rhgc-c) 34%, color-mix(in srgb, var(--rhgc-c) 30%, transparent) 62%, transparent 100%); }
/* spark: a core (cp: its share of the node) and its halo */
[data-rhg-main-experience] .rhg-chroma__n--medium, [data-rhg-main-experience] .rhg-chroma__n--main{
  background:radial-gradient(circle closest-side, var(--rhgc-hot) 0%, var(--rhgc-hot) calc(var(--cp, 24%) * .45), var(--rhgc-c) var(--cp, 24%),
    color-mix(in srgb, var(--rhgc-c) 34%, transparent) calc(var(--cp, 24%) + 14%), color-mix(in srgb, var(--rhgc-c) 10%, transparent) 64%, transparent 100%); }
/* light behind an object: a slightly lighter heart (its source), soft falloff to nothing at its edge; a localized haze:
   flatter and wider */
[data-rhg-main-experience] .rhg-chroma__n--light.is-tint{ background:none; }
[data-rhg-main-experience] .rhg-chroma__tint{ position:absolute; inset:0; will-change:opacity; }
[data-rhg-main-experience] .rhg-chroma__n--light, [data-rhg-main-experience] .rhg-chroma__n--light > .rhg-chroma__tint{ border-radius:0;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--rhgc-c) 64%, var(--rhgc-hot)) 0%, var(--rhgc-c) 20%, color-mix(in srgb, var(--rhgc-c) 60%, transparent) 38%,
    color-mix(in srgb, var(--rhgc-c) 24%, transparent) 64%, color-mix(in srgb, var(--rhgc-c) 7%, transparent) 84%, transparent 100%); }
[data-rhg-main-experience] .rhg-chroma__n--haze{ border-radius:0;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--rhgc-c) 88%, transparent) 0%, color-mix(in srgb, var(--rhgc-c) 58%, transparent) 36%,
    color-mix(in srgb, var(--rhgc-c) 22%, transparent) 66%, transparent 100%); }

/* reduced motion: chroma.js builds the calm variant (a short local change of light, one or two still points, no drift);
   if the setting changes on a built scene, nothing drifts or scales until it is rebuilt */
@media (prefers-reduced-motion: reduce){
  [data-rhg-main-experience] .rhg-chroma__n{ transform:none !important; }
}
/* no scroll scene (reduced motion at load, no script): nothing of this exists */
.is-still [data-rhg-main-experience] .rhg-chroma, html:not(.js) [data-rhg-main-experience] .rhg-chroma{ display:none; }

/* =====================================================================
   ROUND 3 · CHROMATIC FIELDS (chroma.js RHGChroma.field)
   A field group's layer (.rhgf) lives inside the element whose space it colours; its fields (.rhgf-f) are pre-rendered
   gradients on their own compositor layers, moved only by transform and opacity (GSAP, from the scroll timeline). No
   filter, blend mode, backdrop-filter, mask or box-shadow. (Round 4: no particles here any more.)
   ===================================================================== */
[data-rhg-main-experience] .rhgf{ position:absolute; inset:0; pointer-events:none; }
[data-rhg-main-experience] .rhgf-f{ position:absolute; left:0; top:0; display:block; pointer-events:none; opacity:0; visibility:hidden;
  will-change:transform, opacity; transform-origin:50% 50%; backface-visibility:hidden; }
/* round 4: the fields' DOM particles (.rhgf-g groups, .rhgf-p points / dust / bokeh, .rhgf-s sparks) and their twinkle
   keyframes are removed: every transition's particles are atmos.js' depth field, drawn on two canvases (below). */

/* =====================================================================
   ROUND 4 · ATMOS (atmos.js RHGAtmos): the transitions' particles as one depth field, drawn from the scene's time on
   two canvases that atmos.js places, per transition, in the scene's own layers (far: behind the moving object; near:
   in front of it, under the copy and the bar). They take no events, paint nothing at rest (hidden while no transition
   window holds the scene, released once it is well away from them), and never draw inside the copy, the bar or the controls.
   ===================================================================== */
[data-rhg-main-experience] .rhg-atmos{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; pointer-events:none; }
.is-still [data-rhg-main-experience] .rhg-atmos, html:not(.js) [data-rhg-main-experience] .rhg-atmos{ display:none; }
.is-still [data-rhg-main-experience] .rhgf, html:not(.js) [data-rhg-main-experience] .rhgf{ display:none; }