/* =========================================================================
   Hyperwealth marketing hero — the attractor's layout.

   Append to styles.css (or ship as its own file; if separate, remember the
   1-year Cache-Control that firebase.json puts on css and js, and add ?v= to
   the link tag).

   Nothing here overrides an existing production rule. The only production
   change is in index.html: the three .stars divs are replaced by these
   elements. The .stars/.stars2/.stars3 CSS stays where it is — about.html
   and app.html still use it.
   ========================================================================= */

:root {
    /* OWNER: how far the field sits above where its box would otherwise put
       it. Tuned against the wordmark's cap line at production's own type
       scale — 82px at >=1440px, where .brand is 7rem. Below that breakpoint
       the type is smaller and the same 82px still reads. */
    --hw-hero-lift: 82px;
}

/* OWNER, 2026-08-15: stop the accent rotating. Overridden here rather than
   edited in styles.css, so that file stays untouched and about.html/app.html
   keep the rotation they have today.

   The 30s turn cost 43% of the frame budget — 66fps with it, 116 without, on
   an otherwise identical page — and it is not visible. Measured directly:
   across 7.5s, a *quarter* of the cycle and the largest change it ever makes,
   the accent moved pixels by at most 4/255 in any channel, mean 0.76. The
   gradient, the box and the colours are all unchanged; only the rotation goes. */
.background-accent { animation: none; }

/* The background stars, drawn into one canvas instead of three animated
   layers. Same positions, same colours, same 5s/7s/9s periods — see
   hero-attractor.js. Measured in the design lab, the three CSS layers cost
   about half the frame budget before the attractor drew anything: folding
   them into a canvas took the hero from 32-58fps to 108-121. */
#hw-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* The attractor. OWNER: "Centred · damped" — the large top-cropped field on
   the page's own axis, so the wordmark sits inside it with the turquoise tail
   running down past the button. */
#hw-field {
    position: absolute;
    left: 50%;
    top: calc(-16vh - var(--hw-hero-lift));
    width: min(78vw, 1080px);
    height: 96vh;
    transform: translateX(-50%);
    opacity: 0.88;                   /* OWNER */
    pointer-events: none;
    animation: hw-field-in 1.4s ease-out 0.25s backwards;
}

canvas#hw-field { display: block; }

/* A from-only keyframe, so the field animates out of 0 into the opacity above
   rather than needing that value repeated here. It arrives with the type
   (.brand fades in over 1.2s) instead of being there before it. */
@keyframes hw-field-in { from { opacity: 0; } }

/* Keeps the wordmark legible where the field crosses it. The gradient itself
   is written by hero-attractor.js from the wordmark's measured box — the type
   is clamp()ed and changes size at two breakpoints, so a fixed centre drifts
   off it. OWNER: 0.35. It was 0.62 when the field sat across the type; once
   the field was lifted, the heavier scrim was only darkening the threads that
   reach down to the cap line, which are what tie the form to the wordmark. */
#hw-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
}

/* Motion off: the field holds a fixed, fully-formed pose — hero-attractor.js
   stops advancing the clock and stops the camera, and still draws, so this is
   a still image rather than a blank canvas. The stars stop with it. */
@media (prefers-reduced-motion: reduce) {
    #hw-field { animation: none; }
}

/* No mobile override, deliberately. The same box and the same lift were
   verified at 390x844 in the lab: the form clears the wordmark, the type
   reads, and the CTA sits on clean ground. If you find you want one, tune it
   against a real device rather than assuming — the numbers above were all
   arrived at by measuring, and a guessed breakpoint would be the one part of
   this file nobody had looked at. */