/* A separate layer keeps the original baseline and other experiments intact. */
.emblem-light{display:none;pointer-events:none}
.wave-foreground{display:none;pointer-events:none}
.hero[data-identity="refined"] .identity h1{z-index:2}
.hero[data-identity="refined"] .hero-footer{z-index:3}
.hero[data-identity="refined"] .wave-foreground{
  display:block;position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(9,17,17,.6),transparent 35%),linear-gradient(rgba(23,32,32,.2),rgba(23,32,32,.2)),url("assets/field.webp") center / cover no-repeat;
  mask:url("assets/wave-depth.svg") center / cover no-repeat;mask-mode:luminance;
  opacity:.65
}
/* WebGL composites the stationary emblem below the moving strands in one pass. */
.hero[data-identity="refined"][data-renderer="webgl2"] .emblem,
.hero[data-identity="refined"][data-renderer="webgl2"] .emblem-light,
.hero[data-identity="refined"][data-renderer="webgl2"] .wave-foreground{visibility:hidden}
.hero[data-identity="refined"] .identity h1{width:66.6667%;max-width:138svh}
.hero[data-identity="refined"] .wordmark{opacity:1}
.hero[data-identity="refined"] .emblem,
.hero[data-identity="refined"] .emblem-light{
  position:absolute;left:50%;top:50%;width:min(56vw,78.53svh);max-width:none;
  height:auto;max-height:none;aspect-ratio:180.8933 / 142.349684;
  transform:translate(-50%,-50%);pointer-events:none
}
.hero[data-identity="refined"] .emblem{opacity:calc(.11 + var(--emblem-near,0)*.055)}
.hero[data-identity="refined"] .emblem-light{
  display:block;opacity:var(--emblem-reveal,0);
  background:radial-gradient(circle var(--emblem-radius,180px) at var(--emblem-x,50%) var(--emblem-y,50%),rgba(246,233,195,.95),rgba(220,203,151,.66) 32%,rgba(204,189,141,.16) 67%,rgba(204,189,141,0) 100%);
  -webkit-mask:url("assets/emblem.svg") center / 100% 100% no-repeat;
  mask:url("assets/emblem.svg") center / 100% 100% no-repeat
}
@media(max-width:700px){
  .hero[data-identity="refined"] .identity h1{width:82%;max-width:none;top:48%}
  .hero[data-identity="refined"] .emblem,
  .hero[data-identity="refined"] .emblem-light{width:min(88vw,69.89svh);top:48%}
}
@media(prefers-reduced-motion:reduce){
  .hero[data-identity="refined"][data-renderer="webgl2"] .emblem,
  .hero[data-identity="refined"][data-renderer="webgl2"] .wave-foreground{visibility:visible}
  .hero[data-identity="refined"] .emblem{opacity:.11}
  .hero[data-identity="refined"] .emblem-light{display:none}
}