/* Liquid glass for the header and the controls floating over the 3D model.
   Every browser gets frosted glass (blur, tint, bright edge). In Chromium, html.liquid adds the
   #m7-glass SVG filter from glass.js, which refracts the backdrop like Apple's glass. */
.m7-header, .hero__copy, .tnav__group, .tnav__reset, .compass, .tpanel, .tinfo {
  --glass-tint: rgb(255 255 255 / .5);
  background: var(--glass-tint) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgb(255 255 255 / .6) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -1px 0 rgb(255 255 255 / .3), inset 1px 0 0 rgb(255 255 255 / .25), inset -1px 0 0 rgb(255 255 255 / .25), 0 8px 28px rgb(20 30 50 / .18) !important;
}
html.liquid :is(.m7-header, .hero__copy, .tnav__group, .tnav__reset, .compass, .tpanel, .tinfo) {
  -webkit-backdrop-filter: blur(4px) url(#m7-glass) saturate(180%) brightness(1.06);
  backdrop-filter: blur(4px) url(#m7-glass) saturate(180%) brightness(1.06);
}
/* Text-heavy surfaces get a denser tint so copy stays readable over the terrain. */
.m7-header { --glass-tint: rgb(255 255 255 / .66); border-width: 0 0 1px !important; box-shadow: inset 0 -1px 0 rgb(255 255 255 / .5), 0 4px 18px rgb(20 30 50 / .08) !important; }
.hero__copy, .tinfo { --glass-tint: rgb(255 255 255 / .7); border-radius: var(--radius-md); }
.tinfo__head { background: rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: rgb(255 255 255 / .6); }
.tnav__group button, .tnav__group button:hover { background: transparent; }

:root[data-theme="dark"] :is(.m7-header, .hero__copy, .tnav__group, .tnav__reset, .compass, .tpanel, .tinfo) { --glass-tint: rgb(28 32 40 / .62); border-color: rgb(255 255 255 / .16) !important; }
:root[data-theme="dark"] .tinfo__head { background: rgb(28 32 40 / .6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.m7-header, .hero__copy, .tnav__group, .tnav__reset, .compass, .tpanel, .tinfo) { --glass-tint: rgb(28 32 40 / .62); border-color: rgb(255 255 255 / .16) !important; }
  :root:not([data-theme="light"]) .tinfo__head { background: rgb(28 32 40 / .6); }
}
/* Reduced transparency: solid surfaces, no blur or refraction. */
@media (prefers-reduced-transparency: reduce) {
  .m7-header, .hero__copy, .tnav__group, .tnav__reset, .compass, .tpanel, .tinfo, .tinfo__head { background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* Hero buttons and Site & Access "View on 3D model" (.m7-btn--glass): tinted liquid glass, same refraction filter, with a brighter rim and specular sheen. */
:is(.hero__copy :is(.m7-btn--primary, .m7-btn--secondary), .m7-btn--glass) {
  position: relative; overflow: hidden; border: 1px solid rgb(255 255 255 / .7);
  -webkit-backdrop-filter: blur(10px) saturate(190%); backdrop-filter: blur(10px) saturate(190%);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .95), inset 0 -2px 4px rgb(255 255 255 / .25), inset 0 0 0 1px rgb(255 255 255 / .15), 0 6px 18px rgb(20 30 50 / .18);
}
html.liquid :is(.hero__copy :is(.m7-btn--primary, .m7-btn--secondary), .m7-btn--glass) {
  -webkit-backdrop-filter: blur(2px) url(#m7-glass) saturate(190%); backdrop-filter: blur(2px) url(#m7-glass) saturate(190%);
}
.hero__copy .m7-btn--primary { background: linear-gradient(180deg, rgb(238 244 150 / .78), rgb(207 216 87 / .62)); color: #263247; }
:is(.hero__copy .m7-btn--secondary, .m7-btn--glass.m7-btn--secondary) { background: linear-gradient(180deg, rgb(72 86 122 / .88), rgb(38 50 71 / .82)); color: #fff; border-color: rgb(255 255 255 / .45); }
:is(.hero__copy :is(.m7-btn--primary, .m7-btn--secondary), .m7-btn--glass)::after {
  content: ""; position: absolute; inset: 1px 1px 50% 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0));
}
:is(.hero__copy :is(.m7-btn--primary, .m7-btn--secondary), .m7-btn--glass):hover { transform: translateY(-1px); box-shadow: inset 0 1px 1px rgb(255 255 255 / 1), inset 0 -2px 4px rgb(255 255 255 / .3), 0 8px 22px rgb(20 30 50 / .24); }
@media (prefers-reduced-transparency: reduce) {
  .hero__copy .m7-btn--primary { background: var(--lime) !important; }
  :is(.hero__copy .m7-btn--secondary, .m7-btn--glass.m7-btn--secondary) { background: var(--storm) !important; }
  :is(.hero__copy :is(.m7-btn--primary, .m7-btn--secondary), .m7-btn--glass) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}