/* Hyper-White Living Rubik backdrop | site-wide glass treatment. All styles scoped to the feature. */
/* A single page-wide base prevents a visible WebGL rectangle during scrolling or resizing. */
html { background-color: #030509; }
body.vp-rubik-enabled {
  background-color: #030509 !important;
  background-image: radial-gradient(ellipse at 76% 40%, rgba(180, 197, 218, .025), transparent 64%);
  background-attachment: fixed;
  isolation: isolate;
}
#vp-rubik-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  contain: layout style paint;
}
/* Mask the entire WebGL result, including its postprocessing surface. Its edge now
   dissolves into the same page background, even if a compositor writes opaque alpha. */
#vp-rubik-scene canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .43;
  -webkit-mask-image: radial-gradient(ellipse 66% 80% at 77% 63%, #000 0%, rgba(0,0,0,.94) 31%, rgba(0,0,0,.55) 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 66% 80% at 77% 63%, #000 0%, rgba(0,0,0,.94) 31%, rgba(0,0,0,.55) 62%, transparent 100%);
}
/* Keep all live content above the fixed rendering layer. */
body.vp-rubik-enabled > main,
body.vp-rubik-enabled > footer {
  position: relative;
  z-index: 2;
}
body.vp-rubik-enabled > .vp-lightbox { z-index: 1000; }
body.vp-rubik-enabled .vp-shell { position: relative; z-index: 2; }
body.vp-rubik-enabled #vp-navigation-root { position: relative; z-index: 70; }
body.vp-rubik-enabled .framer-grid-lines { opacity: .48; }

/* Hyper-White frosted-glass editorial surfaces: luminance is restrained for readability. */
body.vp-rubik-enabled .spotlight-card {
  background: linear-gradient(146deg, rgba(255,255,255,.115), rgba(255,255,255,.018) 34%, transparent 72%), rgba(7, 11, 18, .57);
  border-color: rgba(235, 252, 255, .18);
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 12px 36px rgba(0,0,0,.24);
  -webkit-backdrop-filter: blur(17px) saturate(135%);
  backdrop-filter: blur(17px) saturate(135%);
}
body.vp-rubik-enabled .spotlight-card:hover,
body.vp-rubik-enabled .spotlight-card:focus-within {
  border-color: rgba(220,250,255,.3);
}
body.vp-rubik-enabled .vp-card {
  background: linear-gradient(147deg, rgba(255,255,255,.105), rgba(255,255,255,.014) 41%, transparent), rgba(8, 12, 19, .63);
  border-color: rgba(231,244,255,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.11), 0 16px 35px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(19px) saturate(125%);
  backdrop-filter: blur(19px) saturate(125%);
}
/* Text-rich surfaces and navigation keep a denser tint for contrast. */
body.vp-rubik-enabled main .spotlight-card div[class~="bg-pitch/80"],
body.vp-rubik-enabled main .spotlight-card div[class~="bg-pitch/90"],
body.vp-rubik-enabled main .spotlight-card div[class~="bg-pitch/60"],
body.vp-rubik-enabled main .spotlight-card p[class~="bg-pitch/60"] {
  background-color: rgba(7, 10, 16, .70);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
/* Text-rich surfaces, navigation, and expandable controls use denser material. */
body.vp-rubik-enabled .vp-nav,
body.vp-rubik-enabled .framer-pill-nav {
  background: rgba(7, 10, 17, .80);
  border-color: rgba(238,250,255,.2);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}
body.vp-rubik-enabled .vp-card p,
body.vp-rubik-enabled .vp-copy,
body.vp-rubik-enabled .spotlight-card p { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
body.vp-rubik-enabled footer.bg-pitch,
body.vp-rubik-enabled .vp-footer {
  background: rgba(3, 5, 10, .66) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
/* Tiny explicit accessibility control: does not intercept backdrop or site gestures. */
#vp-rubik-toggle {
  position: fixed;
  z-index: 75;
  left: 15px;
  bottom: max(15px, env(safe-area-inset-bottom));
  padding: 8px 12px;
  border: 1px solid rgba(210,238,239,.19);
  border-radius: 999px;
  background: rgba(6,11,18,.86);
  color: #e3edef;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font: 500 11px/1.3 Inter, Arial, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
#vp-rubik-toggle:hover,
#vp-rubik-toggle:focus-visible { border-color: rgba(217,255,252,.48); color: white; }
#vp-rubik-toggle:focus-visible { outline: 2px solid #67e8f9; outline-offset: 3px; }
@media (max-width: 930px) {
  #vp-rubik-scene canvas { opacity: .34; }
  body.vp-rubik-enabled .spotlight-card { background-color: rgba(7, 11, 18, .70); }
}
@media (max-width: 680px) {
  #vp-rubik-scene canvas {
    opacity: .29;
    -webkit-mask-image: radial-gradient(ellipse 75% 69% at 62% 62%, #000 0%, rgba(0,0,0,.87) 37%, transparent 100%);
    mask-image: radial-gradient(ellipse 75% 69% at 62% 62%, #000 0%, rgba(0,0,0,.87) 37%, transparent 100%);
  }
  body.vp-rubik-enabled .spotlight-card,
  body.vp-rubik-enabled .vp-card { background-color: rgba(8, 11, 18, .80); }
  #vp-rubik-toggle { padding: 7px 10px; font-size: 10px; left: 10px; bottom: 10px; }
}
@media (prefers-reduced-transparency: reduce) {
  body.vp-rubik-enabled .spotlight-card,
  body.vp-rubik-enabled .vp-card { background: rgba(8,10,15,.96); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-contrast: more) {
  #vp-rubik-scene canvas { opacity: .12; }
  body.vp-rubik-enabled .spotlight-card,
  body.vp-rubik-enabled .vp-card { background: rgba(4,6,10,.96); border-color: rgba(255,255,255,.47); }
}
@media print {
  html, body.vp-rubik-enabled { background: #fff !important; }
  #vp-rubik-scene, #vp-rubik-toggle { display: none !important; }
  body.vp-rubik-enabled .spotlight-card, body.vp-rubik-enabled .vp-card { -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
}