/* Only component surfaces and their states. No layout / image / copy changes. */
html[data-ui-components] { --glass-ink: #163d36; --glass-edge: #ffffffdd; --glass-accent: #187d6c; }

/* React Bits Star Border, adapted to the existing entry button dimensions.
   Renderer attribution and license: vendor/LICENSE-react-bits.txt. */
html[data-ui-components] #enter-scene.tourism-enter {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  justify-content: center;
  gap: 0;
  min-height: 78px;
  padding: 16px 24px;
  color: #243653;
  background: linear-gradient(135deg, #f7faff, #e4ecf9 80%);
  box-shadow: inset 0 1px 0 #fff, 0 5px 15px #33496a24;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: box-shadow .24s ease, transform .24s ease;
}
html[data-ui-components] #enter-scene::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #8b9fc569;
  pointer-events: none;
}
html[data-ui-components] #enter-scene .star-border__light {
  position: absolute;
  top: -32px;
  left: -32px;
  z-index: -1;
  width: calc(100% + 64px);
  height: calc(100% + 64px);
  max-width: none;
  pointer-events: none;
}
html[data-ui-components] #enter-scene:disabled { color: #5b6c86; cursor: progress; }
html[data-ui-components] #enter-scene:disabled .star-border__light { opacity: .35; }
html[data-ui-components] #enter-scene:active:not(:disabled) { transform: translateY(1px) scale(.985); }

/* Existing navigation items stay exactly where they are. */
html[data-ui-components] :is(.home-nav, .header-nav) > button {
  position: relative;
  isolation: isolate;
  text-decoration: none;
  transition: color .2s ease;
}
html[data-ui-components] :is(.home-nav, .header-nav) > button::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 8px -12px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(180deg, #ffffffed, #e3eeea99);
  box-shadow: inset 0 0 0 1px #ffffffc9, 0 0 0 1px #8ea59a38, 0 3px 8px #263e3310;
  transition: opacity .2s ease, transform .2s ease;
  transform: scale(.94);
  pointer-events: none;
}
html[data-ui-components] .home-nav > button:first-child::before,
html[data-ui-components] .header-nav > button.nav-active::before {
  opacity: 1; transform: scale(1);
}
html[data-ui-components] .header-nav > button.nav-active::after { display: none; }
html[data-ui-components] .header-nav > button.nav-active { color: #175d4e; }

/* The same frosted surface on secondary controls; original sizes retained. */
html[data-ui-components] :is(.contact-button, .home-menu-toggle, .scene-quick-actions > button, .scene-tools > button),
html[data-ui-components] #modal.product-modal :is(.icon-button, .tool-reset, #modal-close) {
  color: #27483d;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffffdd, #e3eee9b0);
  box-shadow: inset 0 0 0 1px #ffffffe6, 0 0 0 1px #809c8d30, 0 4px 13px #1d392117;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
html[data-ui-components] .contact-button { border-color: transparent; }
html[data-ui-components] #browse-nav.browse-nav {
  background: linear-gradient(145deg, #ffffffe8, #e4eeebaa);
  box-shadow: inset 0 1px 1px #fff, 0 0 0 1px #ffffff8c, 0 10px 24px #233b2e24;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
html[data-ui-components] #browse-nav > button {
  color: #234d40;
  background: linear-gradient(180deg, #fff, #dcebe5e6);
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px #1e4d3412;
  transition: background .2s, box-shadow .2s, transform .2s;
}
html[data-ui-components] #browse-nav > button:disabled { opacity: .4; box-shadow: none; }

/* Reuse the existing media-tab indicator. Its leading edge moves first. */
html[data-ui-components] #modal.product-modal .media-tabs {
  background: linear-gradient(145deg, #cedbd4cc, #ffffffe8);
  box-shadow: inset 0 1px 4px #1d433e14, 0 0 0 1px #ffffffd9, 0 3px 10px #173d3412;
  border-radius: 999px;
}
html[data-ui-components] #modal.product-modal .media-tabs:has([data-mode=model])::before {
  inset: 2px calc(50% + 0px) 2px 2px;
  width: auto;
  transform: none;
  border-radius: 999px;
  background: linear-gradient(145deg, #3f8b77, #1d584a);
  box-shadow: inset 0 1px 1px #9adbc68c, 0 0 0 1px #21634d30, 0 2px 5px #143f3a26;
  transition: left .30s cubic-bezier(.16,1,.3,1), right .40s cubic-bezier(.16,1,.3,1) .045s;
}
html[data-ui-components] #modal.product-modal .photo-mode .media-tabs:has([data-mode=model])::before {
  left: calc(50% + 0px);
  right: 2px;
  transform: none;
  transition: right .30s cubic-bezier(.16,1,.3,1), left .40s cubic-bezier(.16,1,.3,1) .045s;
}
html[data-ui-components] #modal.product-modal .media-tabs button { color: #435a4f; border-radius: 999px; }
html[data-ui-components] #modal.product-modal .media-tabs:has([data-mode=model]) button[aria-selected=true] { color: #fff; }
html[data-ui-components] #modal.product-modal .media-tabs:has([data-mode=model]) button { background: transparent; box-shadow: none; }
html[data-ui-components] #modal.product-modal.scene-product-card:not(.viewer-expanded) .media-tabs,
html[data-ui-components] #modal.product-modal.scene-product-card:not(.viewer-expanded) .media-tabs button { border-radius: 999px; }

/* Purchase remains primary; cooperation stays secondary. */
html[data-ui-components] #modal.product-modal .action-pair > .primary {
  color: #fff;
  border-color: #276a58;
  background: linear-gradient(150deg, #3d8e76, #195846);
  box-shadow: inset 0 1px 0 #a7e6d2a0, 0 2px 5px #133d2c24;
}
html[data-ui-components] #modal.product-modal .action-pair > .secondary {
  color: #235843;
  border-color: #85aa9a9e;
  background: linear-gradient(180deg, #ffffffed, #e6f0e9b8);
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px #133d2c0c;
}
html[data-ui-components] #modal.product-modal .action-pair > .button { border-radius: 12px; }

html[data-ui-components] :is(#enter-scene, .home-nav > button, .header-nav > button, .contact-button, .home-menu-toggle, #browse-nav > button):focus-visible,
html[data-ui-components] #modal.product-modal :is(.media-tabs button, .button, .icon-button, #modal-close):focus-visible {
  outline: 2px solid #167d64; outline-offset: 4px;
}
html[data-ui-components] :is(.contact-button, .home-menu-toggle, #browse-nav > button):active:not(:disabled) { transform: translateY(1px) scale(.98); }
@media (hover: hover) and (pointer: fine) {
  html[data-ui-components] #enter-scene:hover:not(:disabled):not(:active) {
    filter: none;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 #fff, 0 8px 20px #33496a30;
  }
  html[data-ui-components] :is(.home-nav, .header-nav) > button:hover::before { opacity: 1; transform: scale(1); }
  html[data-ui-components] :is(.contact-button, .home-menu-toggle, #browse-nav > button):hover:not(:disabled),
  html[data-ui-components] #modal.product-modal :is(.button, .icon-button, #modal-close):hover:not(:disabled) { filter: none; box-shadow: inset 0 1px 1px #fff9, 0 0 0 1px #6d9e8955, 0 5px 14px #13493126; }
}
html[data-ui-components] #enter-scene:focus-visible { outline-color: #4d70c5; }
@media (max-width:700px) {
  html[data-ui-components] #enter-scene.tourism-enter { min-height: 60px; padding: 11px 20px; }
}
/* Match the scene's phone/touch profile, including phone landscape.
   Keep the fixed glass highlights; avoid filtering every moving 3D frame. */
@media (max-width:700px), (pointer:coarse) and (max-width:1100px) {
  html[data-ui-components] #enter-scene.tourism-enter,
  html[data-ui-components] :is(.contact-button, .home-menu-toggle, .scene-quick-actions > button, .scene-tools > button),
  html[data-ui-components] #modal.product-modal :is(.icon-button, .tool-reset, #modal-close),
  html[data-ui-components] #browse-nav.browse-nav,
  html[data-ui-components] #modal::backdrop,
  html[data-ui-components] #modal.product-modal .contact-dialog::backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion:reduce) {
  html[data-ui-components] :is(#enter-scene, #enter-scene *, .home-nav > button, .header-nav > button, .contact-button, .home-menu-toggle, #browse-nav > button),
  html[data-ui-components] #enter-scene::before,
  html[data-ui-components] :is(.home-nav, .header-nav) > button::before,
  html[data-ui-components] #modal.product-modal :is(.button, .icon-button, .media-tabs button),
  html[data-ui-components] #modal.product-modal .media-tabs::before { transition: none !important; }
}