/* SCIF Hero 3D — canvas stage + legibility vignette. Tokens only (tokens.css). Prefix: hx- */
:where([data-hero3d]){position:relative}
[data-hero3d]{
  overflow:hidden;isolation:isolate;contain:paint;
  background:
    radial-gradient(70% 60% at 64% 58%, var(--surface) 0%, transparent 70%),
    radial-gradient(120% 100% at 50% 100%, var(--bg-2) 0%, var(--bg) 60%);
}
.hx-canvas{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none;transition:opacity var(--t) linear}
/* legibility: keep the left ~45% calm for overlaid copy, fade the floor into the next section */
[data-hero3d]::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 84%, transparent) 30%, color-mix(in srgb, var(--bg) 45%, transparent) 45%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 18%, transparent 78%, var(--bg) 100%),
    radial-gradient(130% 110% at 64% 55%, transparent 55%, color-mix(in srgb, var(--bg) 70%, transparent) 100%);
}
/* blueprint scan texture */
[data-hero3d]::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg, var(--line-2) 0 1px, transparent 1px 4px);
  mask-image:radial-gradient(60% 60% at 64% 55%, #000 0%, transparent 100%);
  -webkit-mask-image:radial-gradient(60% 60% at 64% 55%, #000 0%, transparent 100%);
}
@media (max-width:759px){
  [data-hero3d]::after{
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 34%, color-mix(in srgb, var(--bg) 20%, transparent) 50%, transparent 60%, transparent 84%, var(--bg) 100%);
  }
  [data-hero3d]::before{mask-image:radial-gradient(80% 45% at 50% 70%, #000 0%, transparent 100%);-webkit-mask-image:radial-gradient(80% 45% at 50% 70%, #000 0%, transparent 100%)}
}
/* no Canvas 2D: static blueprint */
.hx-fallback{
  background:
    radial-gradient(45% 40% at 64% 58%, var(--cyan-soft) 0%, transparent 70%),
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 44px),
    var(--bg);
}

/* optional layout helpers: stage + sibling copy overlay */
.hx-hero{position:relative;min-height:92vh;min-height:92svh;display:flex;align-items:center;background:var(--bg);color:var(--ink)}
.hx-hero > [data-hero3d]{position:absolute;inset:0}
.hx-copy{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);padding-block:clamp(72px,12vh,140px)}
.hx-copy > *{max-width:min(40rem,45vw)}
.hx-eyebrow{font:500 12px/1.4 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:0 0 20px;display:flex;align-items:center;gap:10px}
.hx-eyebrow::before{content:"";width:28px;height:1px;background:var(--cyan);box-shadow:var(--glow-cyan)}
.hx-title{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,5.6vw,80px);line-height:.98;letter-spacing:-.01em;margin:0 0 22px;color:var(--ink)}
.hx-title em{font-style:normal;color:var(--cyan)}
.hx-lede{font:400 clamp(16px,1.25vw,19px)/1.6 var(--font-body);color:var(--ink-2);margin:0}
@media (max-width:759px){
  .hx-hero{align-items:flex-start}
  .hx-copy{padding-block:56px 0}
  .hx-copy > *{max-width:100%}
}

/* ---- building variant (data-hero3d="building"): a whole site, so the pool of light
   sits lower and wider and the copy gutter is a touch narrower. */
[data-hero3d="building"]{
  background:
    radial-gradient(76% 64% at 62% 64%, var(--surface) 0%, transparent 72%),
    radial-gradient(120% 100% at 50% 100%, var(--bg-2) 0%, var(--bg) 62%);
}
[data-hero3d="building"]::after{
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 26%, color-mix(in srgb, var(--bg) 40%, transparent) 42%, transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 60%, transparent) 0%, transparent 20%, transparent 76%, var(--bg) 100%),
    radial-gradient(140% 118% at 62% 60%, transparent 56%, color-mix(in srgb, var(--bg) 68%, transparent) 100%);
}
[data-hero3d="building"]::before{
  mask-image:radial-gradient(66% 62% at 62% 60%, #000 0%, transparent 100%);
  -webkit-mask-image:radial-gradient(66% 62% at 62% 60%, #000 0%, transparent 100%);
}
@media (max-width:759px){
  [data-hero3d="building"]::after{
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 32%, color-mix(in srgb, var(--bg) 18%, transparent) 50%, transparent 62%, transparent 84%, var(--bg) 100%);
  }
  [data-hero3d="building"]::before{mask-image:radial-gradient(84% 46% at 50% 66%, #000 0%, transparent 100%);-webkit-mask-image:radial-gradient(84% 46% at 50% 66%, #000 0%, transparent 100%)}
}