/* BEELABS / BESPOKE.JS CAROUSEL — no impress.js camera, no build tools.
   Fixed photographic world + six true HTML screens rotating in a perspective scene. */
body.carousel-mode { overflow:hidden; background: #060a18; }
body.carousel-mode #carousel-deck {
  position:fixed!important; inset:0!important; top:0!important; left:0!important;
  width:100vw!important; height:100dvh!important; margin:0!important;
  transform:none!important; perspective:1800px;
  transform-style:preserve-3d; isolation:isolate; z-index:20;
  pointer-events:none;
}
/* bespoke.from() simply manages which direct child is active; styling is ours. */
body.carousel-mode #carousel-deck > .step {
  position:absolute!important; top:50%!important; left:50%!important;
  width:1200px!important; height:675px!important;
  margin:0!important; transform-origin:50% 50%!important;
  transform-style:preserve-3d; backface-visibility:visible;
  will-change:transform,opacity;
  transition:transform 960ms cubic-bezier(.20,.78,.17,1),
             opacity 710ms ease, filter 720ms ease;
  pointer-events:none; isolation:isolate;
}
body.carousel-mode #carousel-deck > .step.screen-step {
  opacity:var(--carousel-opacity,0); filter:blur(var(--carousel-blur,0px));
  z-index:var(--carousel-layer,1)!important;
  transform:translate3d(calc(-50% + var(--carousel-x,0px)),calc(-50% + var(--carousel-y,0px)),var(--carousel-z,0px))
            rotateY(var(--carousel-angle,0deg)) scale(var(--carousel-scale,.2))!important;
}
body.carousel-mode #carousel-deck > .step.screen-step.is-selected {
  opacity:1!important;filter:none!important;
  pointer-events:auto; z-index:180!important;
}
/* Orbit first, then expand toward 90% of the usable viewport. */
body.carousel-mode #carousel-deck > .step.screen-step[data-placement="active"] {
  --carousel-x:0px;--carousel-y:0px;--carousel-z:125px;--carousel-angle:0deg;
  --carousel-opacity:1;--carousel-blur:0px;--carousel-layer:60;
}
body.carousel-mode #carousel-deck > .step.screen-step[data-placement="away"] {pointer-events:none}
body.carousel-mode .screen-step.is-selected .screen-shell {
  box-shadow:0 28px 120px #030411df,0 0 42px #dd51e440,inset 0 1px #ffffff35;
  border-color:#ce9cf7c7; backdrop-filter:blur(10px);
}
body.carousel-mode .screen-step .screen-preview {opacity:.9!important;visibility:visible;pointer-events:none!important}
body.carousel-mode .screen-step .screen-content {opacity:0!important;visibility:hidden;pointer-events:none!important;transition:opacity 350ms ease}
body.carousel-mode .screen-step.is-focused .screen-preview {opacity:0!important;visibility:hidden!important;pointer-events:none!important}
body.carousel-mode .screen-step.is-focused .screen-content {opacity:1!important;visibility:visible!important;pointer-events:auto!important}
body.carousel-mode .screen-step.is-selected .panel-body {overflow-y:auto;overscroll-behavior:contain}
body.carousel-mode .screen-step.is-selected a,
body.carousel-mode .screen-step.is-selected button {pointer-events:auto!important}
/* Miniatures are clickable anywhere on their surfaces. The shell's clickable
   hitbox is not scaled separately; it belongs to its actual carousel step. */
body.carousel-mode .screen-step.is-neighbor {pointer-events:auto!important;cursor:pointer}
body.carousel-mode .screen-step.is-neighbor .screen-shell {background:#0b0b26b8;cursor:pointer}
body.carousel-mode .screen-step.is-neighbor .screen-content {inert:true}
body.carousel-mode .screen-step.is-neighbor .screen-preview strong {font-size:72px}
body.carousel-mode .step-arrival {
  position:absolute!important;inset:0!important;top:0!important;left:0!important;
  width:100%!important;height:100%!important;margin:0!important;
  transform:none!important;pointer-events:none;z-index:5!important;
  opacity:0;visibility:hidden;transition:opacity 650ms ease,visibility 650ms;
}
body.carousel-mode[data-current="arrival"] .step-arrival {opacity:1;visibility:visible}
body.carousel-mode .step-arrival button {pointer-events:auto}
body.carousel-mode .entry-point {display:none!important}
body.carousel-mode .arrival-invitation {bottom:clamp(92px,10vh,145px);left:auto;right:clamp(28px,8vw,160px);transform:none;z-index:10}
body.carousel-mode .viewport-hero {z-index:90;transition:opacity 470ms ease,visibility 470ms}
body.carousel-mode:not([data-current="arrival"]) .viewport-hero {opacity:0!important;visibility:hidden!important}
body.carousel-mode .background-stage {z-index:0!important;display:block!important}
body.carousel-mode .background-stage .world-plane {opacity:1!important}
body.carousel-mode .background-tint {opacity:.33!important}
body.carousel-mode[data-current="arrival"] .background-tint {opacity:.06!important}
body.carousel-mode .site-header {z-index:210}
body.carousel-mode .scene-rail,body.carousel-mode .footer-hud {z-index:200}
body.carousel-mode .scene-menu {z-index:240}
body.carousel-mode .mobile-hero-statement {display:none!important}
body.carousel-mode .step-arrival:before {display:none}
body.carousel-mode .screen-step.is-selected .screen-preview,
body.carousel-mode .screen-step.is-focused .screen-preview {cursor:default}
/* A small progress rail underneath the central panel. */
.carousel-caption {position:fixed;z-index:120;top:100px;left:50%;transform:translateX(-50%);color:#f2dfff;
  font:10px var(--mono);letter-spacing:.16em;pointer-events:none;text-shadow:0 2px 12px #050417;
  opacity:0;transition:opacity .35s}
body.carousel-mode:not([data-current="arrival"]) .carousel-caption {opacity:.8}
body.carousel-mode .panel-body {scrollbar-width:thin}
@media(min-width:901px) and (max-height:740px) {
 body.carousel-mode .viewport-hero {bottom:100px}
 body.carousel-mode .arrival-invitation {bottom:85px}
}
/* True document flow: all seven sections remain navigable on small devices. */
body.reading-mode .background-stage {display:block!important}
body.reading-mode #carousel-deck {z-index:12}
body.reading-mode .step {scroll-margin-top:92px}
body.reading-mode .screen-content {visibility:visible!important}
body.reading-mode .screen-preview {display:none!important}
body.reading-mode .screen-step .screen-content {pointer-events:auto!important}
body.reading-mode .screen-step .panel-body {overflow:visible}
@media(prefers-reduced-motion:reduce) {
 body.carousel-mode #carousel-deck > .step,body.carousel-mode .viewport-hero {
   transition-duration:1ms!important;
 }
 body.carousel-mode .background-stage .world-plane {transition-duration:1ms!important}
}
/* Higher specificity wins over leftover impress-era !important effects. */
body.carousel-mode #carousel-deck > .step.screen-step {
 opacity:var(--carousel-opacity,0)!important;
 filter:blur(var(--carousel-blur,0px))!important;
 visibility:visible!important;
}
body.carousel-mode #carousel-deck > .step.screen-step.is-selected {opacity:1!important;filter:none!important}
body.carousel-mode #carousel-deck > .step.screen-step[data-placement="away"] {opacity:var(--carousel-opacity,0)!important}
body.carousel-mode #carousel-deck > .step.screen-step.is-focused .screen-content {opacity:1!important;visibility:visible!important}
body.carousel-mode #carousel-deck > .step.screen-step.is-focused .screen-preview {opacity:0!important;visibility:hidden!important}

/* V10: high-resolution focus surface. The carousel itself continues to use
   transforms during rotation/zoom, but the resting content is reflowed at the
   final visible size using CSS zoom — no scaled texture or GPU text blur. */
#crisp-stage[hidden] { display: none !important; }
#crisp-stage {
  position: fixed; inset: 0; z-index: 175;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none;
}
#crisp-stage .crisp-frame {
  flex: none; position: relative;
  overflow: visible; pointer-events: auto;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}
#crisp-stage .crisp-frame > .screen-shell {
  display: block;
  width: 1200px !important;
  height: 675px !important;
  zoom: var(--crisp-zoom, 1);
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  backface-visibility: visible !important;
  will-change: auto !important;
  box-shadow: 0 28px 120px #030411df, 0 0 42px #dd51e440,
              inset 0 1px #ffffff35;
  border-color: #ce9cf7c7;
}
#crisp-stage .screen-preview { display: none !important; }
#crisp-stage .screen-content {
  opacity: 1 !important; visibility: visible !important;
  pointer-events: auto !important; transition: none !important;
}
#crisp-stage .panel-body {overflow-y: auto; overscroll-behavior: contain;}
#crisp-stage a, #crisp-stage button {pointer-events: auto !important;}
/* Keep the underlying selected carousel plane hidden once the sharp surface
   appears. Neighbours/background remain part of the same 3D composition. */
body.crisp-focus.carousel-mode #carousel-deck > .screen-step.is-selected {
  opacity: 0 !important; pointer-events: none !important;
}
@media(max-width:900px) {
  #crisp-stage {display:none!important;}
}