/* ==================================================================
   HIGH SALIENCE — homepage immersive layer.
   Ported from the GetLayers "Vexon" template (portable master) and
   re-skinned to the High Salience style: graphite ground, signal-green
   accent, Schibsted Grotesk display, IBM Plex Mono readouts.
   Motion + composition preserved per the template contract; only the
   skin layer (colour, type, copy) changed.
================================================================== */

:root{
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-out-v:cubic-bezier(0,0,0.58,1);
  --ease-inout-strong:cubic-bezier(0.76,0,0.24,1);

  /* scene tint — mirrors the GPU vec3 literals in vexon.js */
  --halo-deep:#0d380a;      /* vec3(0.05,0.22,0.04) */
  --halo-mid:#80cc26;       /* vec3(0.50,0.80,0.15) */
  --halo-hot:#e0ffc7;       /* vec3(0.88,1.00,0.78) */
}


/* ==================================================================
   PARTICLE HALO — fixed background
================================================================== */
#orb-wrap{
  position:fixed;inset:0;z-index:0;transform-origin:center center;will-change:transform;
}
#orb{
  height:100%;width:100%;
  /* hot light plume above the halo — re-tinted to signal green */
  background:radial-gradient(60% 50% at 50% 22%, rgba(182,255,59,0.14), rgba(80,150,30,0.05) 40%, transparent 70%);
}
#orb canvas{display:block}

/* ==================================================================
   PAGE SHELL — content paints immediately; no gate, no loader
================================================================== */
#content{position:relative;z-index:10}

/* sections sit on solid ground; only the hero lets the halo through */
#content main > section{background:var(--bg);position:relative}
#content main > section.vx-hero{background:transparent}
#content .site-header{background:rgba(11,13,12,0.72)}
#content .site-footer{position:relative;z-index:10;background:var(--bg)}

/* ==================================================================
   HERO — Vexon composition: 8/4 grid, three-line display headline
================================================================== */
.vx-hero{
  display:flex;min-height:auto;align-items:center;
  padding:7rem 0 3.5rem;border-bottom:0 !important;
}
@media (min-width:768px){.vx-hero{min-height:100vh;padding:5rem 0}}
.vx-hero .wrap{width:100%;max-width:none;padding:0 28px}
@media (min-width:768px){.vx-hero .wrap{padding:0 2.5rem}}
.vx-grid{display:grid;width:100%;grid-template-columns:1fr}
@media (min-width:1024px){
  .vx-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem}
  .vx-l{grid-column:span 8/span 8}
  .vx-r{grid-column:span 4/span 4}
}
.vx-l{display:flex;flex-direction:column;justify-content:center}
.vx-eyebrow{
  margin-bottom:1.5rem;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.2em;color:var(--ink-dim);text-transform:uppercase;
}
@media (min-width:768px){.vx-eyebrow{font-size:11px}}
.vx-h1{
  font-family:var(--font-sans);font-size:9vw;line-height:.92;font-weight:700;
  text-transform:uppercase;letter-spacing:-.025em;color:var(--ink);
}
.vx-h1 .hero-line{white-space:nowrap}
@media (min-width:768px){.vx-h1{font-size:7vw}}
@media (min-width:1024px){.vx-h1{font-size:6vw}}
.hero-line{display:flex;align-items:center;gap:1rem}
.hero-line.mid{color:var(--ink-dim)}
.hero-line.dim .te{color:var(--ink-faint)}
@media (min-width:768px){.hero-line.mid{gap:2rem}}

/* text protection over the particle field: small type only — a blurred
   shadow on the display headline merges into a visible box behind it */
.vx-eyebrow,.vx-lead{text-shadow:0 1px 2px rgba(11,13,12,.9),0 1px 8px rgba(11,13,12,.7)}
@media (max-width:767px){
  /* the speckle field overwhelms small type at phone widths: dim it and lift the gray lines */
  #orb-wrap{opacity:.45}
  .hero-line.dim .te{color:var(--ink-dim)}
  .vx-eyebrow{color:var(--accent)}
}
.mask-r{
  display:inline-block;color:var(--ink);
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0.15),white 85%);
  mask-image:linear-gradient(to right,rgba(0,0,0,0.15),white 85%);
}
.mask-l{
  display:inline-block;color:var(--ink);
  -webkit-mask-image:linear-gradient(to right,white 15%,rgba(0,0,0,0.15));
  mask-image:linear-gradient(to right,white 15%,rgba(0,0,0,0.15));
}
/* the edge-fade motif is a desktop device; at phone sizes it costs words
   (must sit AFTER the base .mask-r/.mask-l rules to win the cascade) */
@media (max-width:767px){
  .mask-r,.mask-l{-webkit-mask-image:none;mask-image:none}
}
.glow-strong{color:var(--accent);filter:drop-shadow(0 0 20px rgba(182,255,59,0.35))}

.star{height:.8em;width:.8em;color:var(--accent);flex:none}
.star svg{height:100%;width:100%;fill:currentColor}

.vx-r{
  display:flex;flex-direction:column;justify-content:flex-end;gap:2rem;
  padding-top:3rem;padding-bottom:0;
}
@media (min-width:1024px){.vx-r{transform:translateY(58px);gap:3rem;padding-bottom:5rem}}
.readout-row{display:flex;align-items:center;justify-content:space-between}
.readout-a{
  font-size:1.875rem;line-height:2.25rem;font-weight:300;color:var(--ink-dim);letter-spacing:-.05em;
}
@media (min-width:768px){.readout-a{font-size:2.25rem;line-height:2.5rem}}
.readout-a b{font-family:var(--font-mono);font-weight:700;color:var(--accent)}
.readout-n{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--ink-dim);
}
@media (min-width:768px){.readout-n{font-size:11px}}
.vx-lead{
  max-width:22rem;font-size:.8rem;line-height:1.625;color:var(--ink-dim);
}
@media (min-width:768px){.vx-lead{font-size:.9rem}}
.vx-strip{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;color:var(--ink-faint)}
.vx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
@media (min-width:768px){.vx-cta{gap:1.5rem}}
.btn-frame{
  position:relative;overflow:hidden;border-radius:.25rem;background:rgba(5,6,5,.6);
  -webkit-backdrop-filter:blur(64px);backdrop-filter:blur(64px);
  padding:.75rem 1.5rem;font-size:.75rem;font-weight:500;letter-spacing:.025em;
  color:var(--ink);border:1px solid rgba(182,255,59,.4);display:inline-block;
  font-family:var(--font-mono);
  transition:background .15s ease,border-color .15s ease;
}
@media (min-width:768px){.btn-frame{padding:1rem 2rem;font-size:.8rem}}
.btn-frame:hover{background:rgba(182,255,59,.12);border-color:var(--accent)}
.btn-frame .tick{position:absolute;height:1rem;width:1rem;transition:transform .15s ease}
.btn-frame .tick.tr{top:0;right:0;border-top:2px solid rgba(182,255,59,.7);border-right:2px solid rgba(182,255,59,.7)}
.btn-frame .tick.bl{bottom:0;left:0;border-bottom:2px solid rgba(182,255,59,.7);border-left:2px solid rgba(182,255,59,.7)}
.btn-frame:hover .tick{transform:scale(1.1)}
.btn-frame span{position:relative;z-index:10;text-transform:uppercase;letter-spacing:.1em}
.btn-plain{
  font-size:.75rem;font-weight:500;letter-spacing:.1em;color:var(--ink);
  font-family:var(--font-mono);text-transform:uppercase;transition:opacity .15s ease;
}
@media (min-width:768px){.btn-plain{font-size:.8rem}}
.btn-plain:hover{opacity:.7}

@media (prefers-reduced-motion:reduce){
  #orb-wrap{transform:none !important}
}