/**
 * THE PHASE SYSTEM
 *
 * Three devices from one idea — the Coherence motif. Together they are what should make
 * a single screenshot recognisable as Heliosync rather than as another premium
 * technology site. Roughly forty lines of CSS, no dependency, no image.
 *
 * Expressed purely in tokens, so switching theme re-resolves them with no component
 * needing to know a theme exists.
 *
 * This file also carries THE METALS — the gold and platinum ramps the mark is struck
 * from. They live here rather than in tokens.css because they are gradients rather than
 * colours: a token answers "what colour is this", and a metal has no answer to that
 * question. It is a ramp across a shape, and the shape is part of the definition.
 */

/* ── The metals ───────────────────────────────────────────────────────────────
   Two ramps, each declared once and read by the wordmark, the emblem's CSS layer and
   anything else that needs to be made of the same stuff.

   Vertical rather than diagonal, and that is a structural decision rather than a
   stylistic one: HELIO is set as two spans (H and LI) with a substituted glyph between
   them, so a horizontal ramp would restart at every span boundary and the metal would
   read as three unrelated pieces. A vertical ramp is identical in every span, which is
   also how metallic type has always been cut.

   New custom properties introduced by this file:
     --metal-gold          the gold ramp, for HELIO and any gold-struck text
     --metal-silver        the platinum ramp, for SYNC
     --metal-gold-mid      the ramp's midpoint as a flat colour, for hairline glyphs
     --metal-silver-mid    ditto, platinum
     --emblem-glow         the halo colour under .brand:hover
   Every one of them is redeclared under Horizon below. */
:root {
  --metal-gold: linear-gradient(180deg,
    #FFF3CF 6%, #F0D077 22%, #D4AF37 48%, #BE9330 70%, #A17C26 90%);
  --metal-silver: linear-gradient(180deg,
    #FFFFFF 6%, #E9ECF0 22%, #C2C8D0 48%, #A8B0BA 70%, #8E97A2 90%);
  --metal-gold-mid: #D4AF37;
  --metal-silver-mid: #C2C8D0;
  --emblem-glow: rgb(212 175 55 / 0.55);
}

/* Horizon is where a metal goes wrong. Every stop of the Cosmos gold clears 4.9:1 on
   the deep ground; on bone-100 the same ramp runs from 1.4:1 to 3.1:1, and the wordmark
   is set at 1rem, which is not large text and therefore owes 4.5:1 at every stop.
   So the light-theme metals are compressed rather than reflected: a narrow ramp around
   the interactive bronze, dark enough throughout to carry the contrast, with just
   enough travel to still read as a struck surface rather than as flat type. */
:root[data-theme='horizon'] {
  --metal-gold: linear-gradient(180deg,
    #8A6C1D 6%, #7A6019 42%, #66500F 72%, #52400C 92%);
  --metal-silver: linear-gradient(180deg,
    #5E6672 6%, #4E5661 42%, #3E4650 72%, #333A43 92%);
  --metal-gold-mid: #7A6019;
  --metal-silver-mid: #4E5661;
  --emblem-glow: rgb(122 96 25 / 0.34);
}

/* ── Device 1 · The phase rule ───────────────────────────────────────────────
   Two interfering frequencies: ticks at 7px against an envelope at 124px. The beat
   between them is the fingerprint. Replaces every hairline divider on the site. */
.phase-rule {
  display: block;
  height: 1px;
  width: 100%;
  color: var(--accent-decorative);
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0 2px,
    transparent 2px 7px
  );
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0, rgb(0 0 0 / 0.08) 62px, #000 124px);
  mask-image: repeating-linear-gradient(90deg, #000 0, rgb(0 0 0 / 0.08) 62px, #000 124px);
  opacity: 0.85;
  border: 0;
}

.phase-rule[data-tone='sync'] { color: var(--sync-muted); }

/* Full-bleed rules fade at both ends so they never butt against the viewport edge.
   Two masks composited: the beat pattern intersected with an end-taper. */
.phase-rule--tapered {
  -webkit-mask-image:
    repeating-linear-gradient(90deg, #000 0, rgb(0 0 0 / 0.08) 62px, #000 124px),
    linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:
    repeating-linear-gradient(90deg, #000 0, rgb(0 0 0 / 0.08) 62px, #000 124px),
    linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ── The emblem ───────────────────────────────────────────────────────────────
   heliosync_emblem() returns the drawn mark: a lune crescent, eleven tapered rays, two
   chisel-cut slabs and a tapered orbit blade carrying its node. Its metal arrives as
   gradients inside the SVG, because CSS has no way to say "gold" about a shape.

   site.css still owns the emblem's flat description — one gold, one platinum, both from
   tokens — and it loads AFTER this file, so those declarations still win on specificity
   ties. They are left in place deliberately: they are the correct rendering of a mark
   drawn as thin lines, which is what any future caller passing plain .emblem markup
   gets. They cannot reach the rich mark's metal because every leaf shape in it carries
   its own fill and stroke as presentation attributes, and a presentation attribute beats
   a value inherited from a parent element.

   The one property that does reach through is `opacity`. It is not inherited — it
   applies to the group box itself — so site.css's 0.9 on the rays and 0.85 on the orbit
   would dim the metal. These two selectors are a class deeper and take it back. */
.emblem--rich .emblem__rays,
.emblem--rich .emblem__orbit { opacity: 1; }

/* The rotations themselves are NOT redeclared here. They live in site.css
   (.emblem__rays 48s forward, .emblem__orbit-group 26s reverse, both gated behind
   prefers-reduced-motion) and they bind to group classes this markup still provides.
   Duplicating them would mean two definitions drifting apart on the next edit. */

/* Hover lights the mark rather than moving it — the sun gains a corona. Two shadows:
   a tight one that defines the edge and a wide one that reads as spill. The transition
   is declared on the emblem rather than on .brand so it cannot contest motion.css's
   ownership of [data-hover] transitions. */
.brand .emblem {
  transition: filter var(--duration-deliberate) var(--ease-standard);
}

.brand:hover .emblem,
.brand:focus-visible .emblem {
  filter:
    drop-shadow(0 0 4px var(--emblem-glow))
    drop-shadow(0 0 14px var(--emblem-glow));
}

@media (prefers-reduced-motion: reduce) {
  .brand .emblem { transition-duration: 1ms; }
}

/* Horizon needs the metals outlined, not restated.
   Platinum on bone-100 is the failure case: the ramp's top half is within a few points
   of the ground and the slab loses its left edge entirely. The fix is a hairline in the
   ink colour rather than a darker fill, because replacing the fill would throw away the
   ramp — and the ramp is the whole point. Same treatment for the orbit blade, which is
   brightest exactly where it crosses the lightest part of the page.

   The crescent gets a fainter version: brand gold measures 1.9:1 on ivory, which is
   allowed for a decorative shape but still reads soft, and 0.3 of an alpha is enough to
   give it an edge without turning it into a sticker. The bloom is nearly extinguished —
   a gold glow on ivory is a smudge. */
:root[data-theme='horizon'] .emblem--rich .hs-silver {
  stroke: rgb(26 24 20 / 0.55);
  stroke-width: 0.5;
}

:root[data-theme='horizon'] .emblem--rich .hs-orbit {
  stroke: rgb(26 24 20 / 0.45);
  stroke-width: 0.45;
}

:root[data-theme='horizon'] .emblem--rich .hs-crescent {
  stroke: rgb(26 24 20 / 0.3);
  stroke-width: 0.35;
}

:root[data-theme='horizon'] .emblem--rich .hs-bloom { opacity: 0.14; }

/* ── The wordmark ─────────────────────────────────────────────────────────────
   H≡LI⊙SYNC. Every dimension derives from --wm-size, so one font-size scales the
   lockup, its letterspacing and both substituted glyphs together.

   HELIO is struck in gold and SYNC in platinum — the same two metals as the emblem,
   which is what makes the lockup and the mark read as one object rather than as a logo
   next to some type. The letters stay letters: real glyphs in --font-display, painted
   through background-clip, never outlined into paths. Converting them would cost the
   accessible name, the font stack and every future change of either.

   The flat declarations below are the fallback and are not dead code — a browser
   without background-clip:text keeps them, and they resolve through
   --accent-interactive rather than a literal gold for a contrast reason: brand gold
   measures 9.57:1 on Cosmos but 1.92:1 on Horizon. The interactive token is gold on the
   dark ground and bronze on the light one. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 0.28em;
  font-size: var(--wm-size, 1.05rem);
  line-height: 1;
}

.wordmark__lockup { display: inline-block; }

.wordmark__marks {
  display: inline-flex;
  align-items: center;
  gap: 0.055em;
  font-family: var(--font-display);
  font-weight: var(--weight-displayHeavy);
  letter-spacing: 0.13em;
  line-height: 1;
  white-space: nowrap;
}

.wordmark__helio { color: var(--accent-interactive); }
.wordmark__sync  { color: var(--text-primary); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .wordmark__helio,
  .wordmark__sync {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .wordmark__helio { background-image: var(--metal-gold); }
  .wordmark__sync  { background-image: var(--metal-silver); }
}

/* The ramp is painted over the inline box, which is the font's content area and taller
   than the caps — so the caps only ever sample its middle. The stops above are set at
   6/22/48/70/90 rather than 0/20/50/76/100 for exactly that reason: pulled in at both
   ends, the cap band sees the whole travel of the metal instead of its middle third.
   Sizing the background to the cap height instead would be more direct and is a trap:
   with `no-repeat` any ink outside the background area clips to nothing, and a font
   whose metrics differ by a hundredth of an em loses the bottom of its letters. */

/* Forced-colors mode replaces the palette but not the transparent fill, which would
   leave the lockup as a blank gap in the header. Hand the letters back to the system. */
@media (forced-colors: active) {
  .wordmark__helio,
  .wordmark__sync {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}

/* Optically matched to the cap height rather than the em box — at 0.72em the bars and
   the ring sit on the same baseline as the letterforms beside them. */
.wordmark__glyph {
  display: block;
  height: 0.72em;
  width: auto;
  overflow: visible;
  flex: 0 0 auto;
}

/* The substituted glyphs are hairlines, and a hairline cannot carry a ramp — at
   1.7 units of stroke there is no room for one to travel. They take the metal's
   midpoint instead, which is the colour the ramp reads as from a step back. */
.wm-e {
  stroke: var(--metal-gold-mid);
  stroke-width: 1.7;
  stroke-linecap: butt;
  fill: none;
}
.wm-o-ring { fill: none; stroke: var(--metal-gold-mid); stroke-width: 1.7; }
.wm-o-core { fill: var(--metal-gold-mid); stroke: none; }

.wordmark__tagline {
  font-family: var(--font-body);
  font-weight: var(--weight-bodyMedium);
  font-size: 0.34em;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: 0.12em;
}

/* ── Device 2 · The coherence bar ────────────────────────────────────────────
   N ticks carrying a phase. Platinum and scattered when drifting; gold and aligned
   when locked. Heights arrive as an inline --h.

   `height` is deliberately absent from the transition list. It is a layout property,
   and twenty-two ticks relaying out every frame is a real cost for an effect nothing
   drives — colour and opacity are what the `phase` hover actually changes. */
.cbar {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
}

.cbar i {
  width: 2px;
  height: calc(var(--h, 50) * 1%);
  border-radius: 1px;
  background: var(--sync-muted);
  opacity: 0.55;
  transition:
    background-color var(--duration-deliberate) var(--ease-standard),
    opacity var(--duration-deliberate) var(--ease-standard);
}

.cbar[data-locked='true'] i {
  background: var(--accent-decorative);
  opacity: 1;
}

.cbar--sm { height: 13px; }
.cbar--lg { height: 44px; gap: 3px; }
.cbar--lg i { width: 3px; }

/* ── Device 3 · Phase-locked entrance ────────────────────────────────────────
   Groups arrive the way the field locks — converging rather than queueing. Delay
   follows sin(i·π/n), so the ends land first and the middle resolves last. It lives
   in motion.css as the `phase` reveal role, driven by the reveal script.

   Documented here rather than silently omitted, because the Phase System is defined as
   three devices and a reader finding only two would reasonably conclude one was dropped. */