/* Preloader: page hidden until boot.js sets data-orthogamer-preload-done */
html:not([data-orthogamer-preload-done="true"]){overflow:hidden!important;height:100%!important}
html:not([data-orthogamer-preload-done="true"]) body{overflow:hidden!important;height:100%!important}
/* Lenis must NOT unlock a second scrollport while the gray cover is up */
html:not([data-orthogamer-preload-done="true"]).lenis,
html:not([data-orthogamer-preload-done="true"]).lenis body,
html:not([data-orthogamer-preload-done="true"]).lenis-smooth,
html:not([data-orthogamer-preload-done="true"]).lenis-smooth body{
  overflow:hidden!important;
  height:100%!important;
  max-height:100%!important;
}
html:not([data-orthogamer-preload-done="true"]) .pl-white-overlay{
  opacity:1!important;
  display:block!important;
  visibility:visible!important;
  background:var(--pl-panel-gray,#c8c8c8)!important;
  pointer-events:all!important;
  z-index:9050!important;
  position:fixed!important;
  inset:0!important;
}
html:not([data-orthogamer-preload-done="true"]) body>div:has(>main),
html:not([data-orthogamer-preload-done="true"]) body>div:has(>main)>main{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html[data-orthogamer-preload-done="true"] body{
  overflow-x:hidden!important;
  overflow-y:visible!important;
}

/* Offline force-reveal + native scroll unlock for / static mirror */

/* ALWAYS unlock document scrolling after preload (do not wait for JS data attrs).
   Dual overflow:auto on html+body with height:auto was creating a flaky
   scrollport on Windows/Chrome — use the classic html=viewport, body=content model. */
html[data-orthogamer-preload-done="true"] {
  height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
  background: #0c0c0c !important;
}

html[data-orthogamer-preload-done="true"] body {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
  position: relative !important;
  background: #0c0c0c !important;
}

/* Kill Lenis / smooth-scroll leftovers — only AFTER preload unlocks */
html[data-orthogamer-preload-done="true"].lenis,
html[data-orthogamer-preload-done="true"].lenis body,
html[data-orthogamer-preload-done="true"].lenis-smooth,
html[data-orthogamer-preload-done="true"].lenis-smooth body {
  height: auto !important;
  overflow-y: auto !important;
}

html[data-orthogamer-offline-reveal="true"] main,
html[data-orthogamer-offline-reveal="true"] #sticky-wrap,
html[data-orthogamer-offline-reveal="true"] .hero-section,
html[data-orthogamer-offline-reveal="true"] main section {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  filter: none !important;
  max-height: none !important;
}

html[data-orthogamer-offline-reveal="true"] main,
html[data-orthogamer-offline-reveal="true"] #sticky-wrap {
  height: auto !important;
  overflow: visible !important;
}

/* Lightweight replacement for scroll-triggered entrances unavailable in the
   captured Next.js runtime. */
.offline-scroll-bound {
  transform: translate3d(0, 2.5rem, 0) !important;
  opacity: 0 !important;
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 700ms ease !important;
  will-change: transform, opacity;
}

.offline-scroll-bound.offline-scroll-visible {
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .offline-scroll-bound,
  .offline-scroll-bound.offline-scroll-visible {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* Hero: one viewport stage; do not clip the rest of the page */
html[data-orthogamer-offline-reveal="true"] .hero-section {
  position: relative !important;
  min-height: 100dvh !important;
  height: auto !important;
  overflow: visible !important;
}

html[data-orthogamer-offline-reveal="true"] .main-banner {
  position: relative !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

html[data-orthogamer-offline-reveal="true"] #sticky-wrap {
  mix-blend-mode: normal !important;
  position: relative;
  z-index: 2;
}

/* Keep Menu/Sound inverting over light panels; leave the color logo unblended. */
#nav.site-header,
.site-header {
  mix-blend-mode: normal !important;
}
.header-controls,
#nav .header-controls,
#nav .flex.items-center.gap-2 {
  mix-blend-mode: difference !important;
}

html[data-offline-menu="open"] #sound-toggle,
html[data-offline-menu="open"] .main-toggle,
html[data-offline-menu="open"] .menu-toggle {
  color: #111 !important;
  border-color: #111 !important;
}

html[data-offline-menu="open"] #sound-toggle {
  background: rgba(17, 17, 17, 0.08) !important;
}

html[data-offline-menu="open"] .main__humburger span {
  background-color: #111 !important;
}

html[data-orthogamer-offline-reveal="true"] .hero-section [style*="visibility:hidden"],
html[data-orthogamer-offline-reveal="true"] .hero-section [style*="visibility: hidden"],
html[data-orthogamer-offline-reveal="true"] main [style*="visibility:hidden"]:not(.awards-logo-list *),
html[data-orthogamer-offline-reveal="true"] main [style*="visibility: hidden"]:not(.awards-logo-list *) {
  visibility: visible !important;
}

html[data-orthogamer-offline-reveal="true"] .hero-section [style*="opacity:0"],
html[data-orthogamer-offline-reveal="true"] .hero-section [style*="opacity: 0"],
html[data-orthogamer-offline-reveal="true"] main [style*="opacity:0"]:not(.awards-logo-list *),
html[data-orthogamer-offline-reveal="true"] main [style*="opacity: 0"]:not(.awards-logo-list *),
html[data-orthogamer-offline-reveal="true"] .arrow-sprite,
html[data-orthogamer-offline-reveal="true"] .button_wrapper .arrow-sprite {
  opacity: 1 !important;
}

/* Preloader teardown is handled by orthogamer-boot.js after the local
   animation finishes — do not hide pl-* here when orthogamer-ready flips early
   (React sets ready while its duplicate loader is inside a hidden wrapper). */

/* Desktop menu open state */
html[data-offline-menu="open"] .menu-wrapper.fixed {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 60 !important;
}

html[data-offline-menu="open"] #desktopMenuRef {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  clip-path: circle(150% at 95% 5%) !important;
}

html[data-offline-menu="closed"] .menu-wrapper.fixed {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#nav.site-header,
.site-header,
.main-toggle,
.menu-toggle {
  z-index: 50;
}

.site-header.fixed {
  position: fixed !important;
}

.main-toggle,
.menu-toggle {
  cursor: pointer !important;
  pointer-events: auto !important;
}