/* WinShaders — Web Demo (WinUI 3 window) */

body.is-web-demo {
  /* Footer menu overhang (44px) + 10px clearance → min inset on all sides */
  --ws-demo-inset: 54px;
  /* Cap window width so large desktops keep side atmosphere (like legal pages) */
  --ws-demo-max-width: 1100px;
  overflow: hidden;
  height: 100dvh;
}

body.is-web-demo .header,
body.is-web-demo .footer {
  z-index: 120;
}

body.is-web-demo .footer-menu__panel {
  z-index: 130;
}

/* ── Stage inset ──────────────────────────────────────────────────────────
   Footer menu panel: 36px links + 0.25rem×2 padding = 44px.
   Gap above trigger: 0.5rem = 8px. Trigger centered in 48px footer → panel
   bottom sits at footer top, so overhang into content = 44px.
   Clearance: 44px + 10px = 54px min inset; also match site 5vw gutters.
   Window is centred with a max-width so wide monitors don’t stretch it edge-to-edge. */
.ws-demo-stage {
  position: fixed;
  top: calc(var(--header-h) + max(var(--ws-demo-inset), 5dvh));
  right: max(var(--ws-demo-inset), 5vw);
  bottom: calc(var(--footer-h) + max(var(--ws-demo-inset), 5dvh));
  left: max(var(--ws-demo-inset), 5vw);
  z-index: 10;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
}

/* ── Window shell ───────────────────────────────────────────────────────── */

.winshaders-window {
  --ws-window-bg: #F3F3F3;
  --ws-window-border: rgba(0, 0, 0, 0.08);
  --ws-window-shadow: 0 8px 32px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  --ws-chrome-text: #1A1A1A;
  --ws-chrome-muted: rgba(26, 26, 26, 0.55);
  --ws-chrome-divider: rgba(0, 0, 0, 0.08);
  --ws-toggle-hover: rgba(0, 0, 0, 0.04);
  --ws-canvas-bg: #0B0F14;
  --ws-dot-inactive: rgba(26, 26, 26, 0.45);
  --ws-dot-active: var(--accent);

  flex: 0 1 auto;
  width: 100%;
  max-width: var(--ws-demo-max-width);
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid var(--ws-window-border);
  background: var(--ws-window-bg);
  box-shadow: var(--ws-window-shadow);
  overflow: hidden;
  margin-inline: auto;
}

html[data-theme="dark"] .winshaders-window {
  --ws-window-bg: #1E293B;
  --ws-window-border: rgba(255, 255, 255, 0.06);
  --ws-window-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.28);
  --ws-chrome-text: #F8FAFC;
  --ws-chrome-muted: #94A3B8;
  --ws-chrome-divider: rgba(255, 255, 255, 0.06);
  --ws-toggle-hover: rgba(255, 255, 255, 0.04);
  --ws-canvas-bg: #0B0F19;
  --ws-dot-inactive: #64748B;
  --ws-dot-active: #818CF8;
}

/* ── Window header ──────────────────────────────────────────────────────── */

.ws-window__header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  /* Top-align so chevrons sit on the title row, not over the dots */
  align-items: start;
  min-height: 72px;
  padding: 10px 8px 12px;
  border-bottom: 1px solid var(--ws-chrome-divider);
  background: var(--ws-window-bg);
}

.ws-window__title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ws-window__title {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(0.95rem, 2.2vw, 1.125rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ws-chrome-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ws-window__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ws-window__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--ws-chrome-muted);
  transition: color 0.15s ease, transform 0.15s ease;
}

.ws-window__dot:hover {
  color: var(--ws-chrome-text);
  transform: scale(1.08);
}

.ws-window__dot.is-active {
  color: var(--ws-dot-active);
}

.ws-window__dot:not(.is-active) {
  color: var(--ws-dot-inactive);
}

.ws-window__dot .ws-icon {
  display: block;
  width: 12px;
  height: 12px;
}

.ws-window__status {
  margin: 0;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--ws-chrome-muted);
  opacity: 0.72;
  white-space: nowrap;
  user-select: none;
}

.ws-window__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  /* Match title line height so chevrons don’t sit over the dots */
  height: 32px;
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ws-chrome-text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ws-window__nav:hover {
  background: var(--ws-toggle-hover);
}

.ws-window__nav:active {
  transform: scale(0.96);
}

.ws-icon {
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ws-icon--chevron-left,
.ws-icon--chevron-right {
  width: 28px;
  height: 28px;
}

.ws-icon--chevron-left {
  -webkit-mask-image: url("../assets/web-demo/icons/chevron-left.svg");
  mask-image: url("../assets/web-demo/icons/chevron-left.svg");
}

.ws-icon--chevron-right {
  -webkit-mask-image: url("../assets/web-demo/icons/chevron-right.svg");
  mask-image: url("../assets/web-demo/icons/chevron-right.svg");
}

.ws-icon--speaker-mute,
.ws-icon--speaker-on,
.ws-icon--flash-off,
.ws-icon--flash-on {
  width: 28px;
  height: 28px;
}

.ws-icon--speaker-mute {
  -webkit-mask-image: url("../assets/web-demo/icons/speaker-mute.svg");
  mask-image: url("../assets/web-demo/icons/speaker-mute.svg");
}

.ws-icon--speaker-on {
  -webkit-mask-image: url("../assets/web-demo/icons/speaker-on.svg");
  mask-image: url("../assets/web-demo/icons/speaker-on.svg");
}

.ws-icon--flash-off {
  -webkit-mask-image: url("../assets/web-demo/icons/flash-off.svg");
  mask-image: url("../assets/web-demo/icons/flash-off.svg");
}

.ws-icon--flash-on {
  -webkit-mask-image: url("../assets/web-demo/icons/flash-on.svg");
  mask-image: url("../assets/web-demo/icons/flash-on.svg");
}

.ws-icon--dot {
  width: 12px;
  height: 12px;
}

.ws-icon--dot-regular {
  -webkit-mask-image: url("../assets/web-demo/icons/circle-regular.svg");
  mask-image: url("../assets/web-demo/icons/circle-regular.svg");
}

.ws-icon--dot-filled {
  -webkit-mask-image: url("../assets/web-demo/icons/circle-filled.svg");
  mask-image: url("../assets/web-demo/icons/circle-filled.svg");
}

/* ── Viewport / canvas ──────────────────────────────────────────────────── */

.ws-window__viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--ws-canvas-bg);
  overflow: hidden;
}

.ws-window__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.ws-window__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  font-family: var(--font);
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.72);
  text-align: center;
  pointer-events: none;
  user-select: none;
}

/* CSS atmosphere when WebGL is missing or Orbitals itself fails */
.ws-window__viewport--css-fallback {
  background:
    radial-gradient(ellipse 80% 60% at 28% 38%, rgba(34, 211, 238, 0.2), transparent 55%),
    radial-gradient(ellipse 70% 50% at 78% 68%, rgba(56, 189, 248, 0.14), transparent 50%),
    radial-gradient(ellipse 50% 40% at 52% 18%, rgba(148, 163, 184, 0.1), transparent 45%),
    linear-gradient(160deg, #070b12 0%, #0f172a 45%, #111827 100%);
  background-size: 140% 140%, 160% 160%, 120% 120%, 100% 100%;
  animation: ws-demo-fallback-drift 18s ease-in-out infinite alternate;
}

.ws-window__viewport--css-fallback .ws-window__canvas,
.ws-window__viewport--css-fallback .ws-window__placeholder {
  visibility: hidden;
}

@keyframes ws-demo-fallback-drift {
  0% {
    background-position: 0% 20%, 100% 80%, 40% 0%, 0% 0%;
  }
  100% {
    background-position: 100% 60%, 0% 20%, 70% 100%, 0% 0%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-window__viewport--css-fallback {
    animation: none;
    background-position: 40% 40%, 60% 60%, 50% 30%, 0% 0%;
  }
}

/* ── Command bar ───────────────────────────────────────────────────────── */

.ws-window__commandbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 88px;
  padding: 12px 16px;
  border-top: 1px solid var(--ws-chrome-divider);
  background: var(--ws-window-bg);
}

.ws-window__toggles {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.ws-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 56px;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ws-chrome-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.ws-toggle:hover:not(:disabled) {
  background: var(--ws-toggle-hover);
  color: var(--ws-chrome-text);
}

.ws-toggle[data-active="true"] {
  color: var(--accent);
}

.ws-toggle:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.ws-toggle__label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Keep both icons painted (opacity) so mask SVGs load on page open.
   display:none deferred speaker-on / flash-on until first toggle → blank icon. */
.ws-toggle__icon-wrap {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.ws-toggle__icon--off,
.ws-toggle__icon--on {
  display: block;
}

.ws-toggle__icon--on {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.ws-toggle[data-active="true"] .ws-toggle__icon--off {
  opacity: 0;
}

.ws-toggle[data-active="true"] .ws-toggle__icon--on {
  opacity: 1;
}

.ws-window__separator {
  flex: 0 0 1px;
  align-self: stretch;
  width: 1px;
  margin: 4px 0;
  background: var(--ws-chrome-divider);
}

.ws-window__sliders {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-width: 0;
}

.ws-slider-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 28px;
}

.ws-slider__label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ws-chrome-muted);
  user-select: none;
}

/* ── Sliders (WinUI 3 inspired) ─────────────────────────────────────────── */

.ws-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

.ws-slider:focus {
  outline: none;
}

.ws-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.ws-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
}

.ws-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
}

.ws-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ws-window-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.ws-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ws-window-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

/* Hue — multicolor track */
.ws-slider--hue {
  --hue-thumb-color: hsl(var(--hue-value, 0), 85%, 55%);
}

.ws-slider--hue::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    hsl(0, 90%, 55%) 0%,
    hsl(60, 90%, 55%) 17%,
    hsl(120, 90%, 45%) 33%,
    hsl(180, 90%, 45%) 50%,
    hsl(240, 90%, 58%) 67%,
    hsl(300, 90%, 55%) 83%,
    hsl(360, 90%, 55%) 100%
  );
}

.ws-slider--hue::-moz-range-track {
  background: linear-gradient(
    90deg,
    hsl(0, 90%, 55%) 0%,
    hsl(60, 90%, 55%) 17%,
    hsl(120, 90%, 45%) 33%,
    hsl(180, 90%, 45%) 50%,
    hsl(240, 90%, 58%) 67%,
    hsl(300, 90%, 55%) 83%,
    hsl(360, 90%, 55%) 100%
  );
}

.ws-slider--hue::-webkit-slider-thumb {
  background: radial-gradient(circle at 50% 50%, var(--hue-thumb-color) 0 42%, var(--ws-window-bg) 44% 100%);
}

.ws-slider--hue::-moz-range-thumb {
  background: radial-gradient(circle at 50% 50%, var(--hue-thumb-color) 0 42%, var(--ws-window-bg) 44% 100%);
}

/* Speed — accent fill */
.ws-slider--speed {
  --speed-pct: 50%;
}

.ws-slider--speed::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    var(--accent) 0 var(--speed-pct),
    rgba(128, 128, 128, 0.28) var(--speed-pct) 100%
  );
}

.ws-slider--speed::-moz-range-track {
  background: linear-gradient(
    90deg,
    var(--accent) 0 var(--speed-pct),
    rgba(128, 128, 128, 0.28) var(--speed-pct) 100%
  );
}

html[data-theme="dark"] .ws-slider--speed::-webkit-slider-runnable-track,
html[data-theme="dark"] .ws-slider--speed::-moz-range-track {
  background: linear-gradient(
    90deg,
    var(--accent) 0 var(--speed-pct),
    rgba(255, 255, 255, 0.2) var(--speed-pct) 100%
  );
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .ws-window__header {
    grid-template-columns: 44px 1fr 44px;
    min-height: 64px;
  }

  .ws-window__nav {
    width: 44px;
    height: 30px;
  }

  .ws-window__title-block {
    gap: 5px;
  }

  .ws-window__commandbar {
    flex-wrap: wrap;
    gap: 12px;
    min-height: auto;
    padding: 10px 12px 14px;
  }

  .ws-window__separator {
    display: none;
  }

  .ws-window__toggles {
    flex: 1 1 100%;
    justify-content: center;
  }

  .ws-window__sliders {
    flex: 1 1 100%;
  }
}