/** SSS Gold Standard profile-effects layer contract v4.1.0. */
html.sss-effects-active,
html.sss-effects-active body {
  overflow-x: hidden !important;
}

.sss-effects-container {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: strict !important;
  z-index:20 !important;
  pointer-events: none !important;
  user-select: none !important;
  touch-action: none !important;
  visibility: hidden !important;
}

#sss-identity-effects-root {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  contain: strict !important;
  pointer-events: none !important;
  user-select: none !important;
  touch-action: none !important;
  z-index: 65 !important;
}

#sss-identity-effects-root[data-sss-identity-mode="studio"] {
  z-index: 62 !important;
}

#sss-identity-effects-root > [data-sss-identity-channel] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#sss-identity-effects-root > [data-sss-identity-channel="reactive"] {
  z-index: 1 !important;
}

#sss-identity-effects-root > [data-sss-identity-channel="aura"] {
  z-index: 2 !important;
}

#sss-identity-effects-root > [data-sss-identity-channel="cursor"] {
  z-index: 3 !important;
}

#sss-identity-effects-root canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  pointer-events: none !important;
}

html.sss-identity-reactive [data-sss-reactive-target="true"] {
  --sss-reactive-x: 0px;
  --sss-reactive-y: 0px;
  --sss-reactive-scroll: 0px;
}

/*
 * Use the individual translate property rather than transform. This composes
 * with profile/theme transforms instead of replacing them. Targets that
 * already use the individual translate property are marked "preserve" by the
 * runtime and receive glow/click feedback without positional movement.
 */
html.sss-identity-reactive [data-sss-reactive-target="true"][data-sss-reactive-motion="true"] {
  translate: var(--sss-reactive-x) calc(var(--sss-reactive-y) + var(--sss-reactive-scroll));
  will-change: translate;
}

html.sss-identity-reactive .sss-reactive-target-overlay {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  border: 1px solid transparent !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0;
  pointer-events: none !important;
  z-index: 2;
  transition: opacity 160ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 140ms ease;
  transform: scale(1);
  transform-origin: center;
  will-change: opacity, border-color, box-shadow, transform;
}

html.sss-identity-reactive :is(
  [data-sss-reactive-hover="true"],
  [data-sss-reactive-focus="true"]
) > .sss-reactive-target-overlay {
  opacity: 1;
  border-color: color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 72%, transparent) !important;
  box-shadow: 0 0 calc(12px + 20px * var(--sss-reactive-glow, .3)) color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 48%, transparent) !important;
}

html.sss-identity-reactive [data-sss-reactive-focus="true"] > .sss-reactive-target-overlay {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 76%, white 8%),
    0 0 calc(14px + 22px * var(--sss-reactive-glow, .3)) color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 48%, transparent) !important;
}

html.sss-identity-reactive-subtle :is([data-sss-reactive-hover="true"], [data-sss-reactive-focus="true"]) > .sss-reactive-target-overlay {
  box-shadow: 0 8px 28px color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 24%, transparent) !important;
}

html.sss-identity-reactive-neon :is([data-sss-reactive-hover="true"], [data-sss-reactive-focus="true"]) > .sss-reactive-target-overlay {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 58%, white 10%),
    0 0 14px color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 70%, transparent),
    0 0 34px color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 38%, transparent) !important;
}

html.sss-identity-reactive-glitch :is([data-sss-reactive-hover="true"], [data-sss-reactive-focus="true"], [data-sss-reactive-pressed="true"]) > .sss-reactive-target-overlay {
  box-shadow:
    -3px 0 0 rgba(255, 34, 119, .42),
    3px 0 0 rgba(0, 229, 255, .42),
    0 0 24px color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 30%, transparent) !important;
}

html.sss-identity-reactive-cosmic :is([data-sss-reactive-hover="true"], [data-sss-reactive-focus="true"]) > .sss-reactive-target-overlay {
  box-shadow:
    0 0 16px color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 42%, transparent),
    0 0 42px rgba(119, 84, 255, .24),
    inset 0 0 30px rgba(65, 215, 255, .08) !important;
}

html.sss-identity-reactive-calm :is([data-sss-reactive-hover="true"], [data-sss-reactive-focus="true"]) > .sss-reactive-target-overlay {
  box-shadow: 0 12px 42px color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 28%, transparent) !important;
}

html.sss-identity-reactive-chaotic :is([data-sss-reactive-hover="true"], [data-sss-reactive-focus="true"], [data-sss-reactive-pressed="true"]) > .sss-reactive-target-overlay {
  box-shadow:
    -2px -1px 18px rgba(255, 53, 154, .34),
    2px 1px 24px rgba(48, 228, 255, .38),
    0 0 38px color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 34%, transparent) !important;
}

html.sss-identity-reactive [data-sss-reactive-pressed="true"] > .sss-reactive-target-overlay {
  opacity: 1;
  transform: scale(.985);
  background: color-mix(in srgb, var(--sss-reactive-color, #66e6c2) 5%, transparent) !important;
}

html.sss-identity-reactive-glitch .sss-identity-ripple {
  border-color: #30e4ff !important;
  box-shadow: -4px 0 0 rgba(255, 53, 154, .48), 4px 0 0 rgba(48, 228, 255, .48) !important;
}

html.sss-identity-reactive-calm .sss-identity-ripple {
  border-width: 1px !important;
  filter: blur(1px);
}

html.sss-identity-reactive-chaotic .sss-identity-ripple {
  border-style: double !important;
  border-width: 3px !important;
}

html.sss-effects-active .sss-effects-container {
  visibility: visible !important;
}

.sss-effects-container[data-sss-effect-mode="studio"],
html.sss-effects-studio .sss-effects-container {
  z-index:8 !important;
}

/* Sparse decoration may cross profile cards; immersive worlds stay beneath them. */
html.sss-effects-active .sss-effects-container[data-sss-effect-layer="foreground"],
html.sss-effects-active .sss-effects-container[data-sss-effect-layer="edge"],
html.sss-effects-active .sss-effects-container[data-sss-effect-layer="identity"] {
  z-index: 60 !important;
}

html.sss-effects-active .sss-effects-container[data-sss-effect-layer="foreground-soft"] {
  z-index: 45 !important;
}

.sss-effects-container > [data-sss-effect-stage],
.sss-effects-container > [data-sss-effect-canvas],
.sss-effects-container > canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  pointer-events: none !important;
}

.sss-effects-container[data-sss-effect-layer="foreground-soft"] > [data-sss-effect-stage],
.sss-effects-container[data-sss-effect-layer="foreground-soft"] > [data-sss-effect-canvas],
.sss-effects-container[data-sss-effect-layer="foreground-soft"] > canvas {
  opacity: 0.68;
}

html.sss-effects-active :where(
  #item-header,
  #item-body,
  .profile-header,
  .profile-content,
  .profile-body,
  .widget-box,
  .content-grid,
  .sss-profile-effect-content
) {
  position: relative;
  z-index: 40;
}

html.sss-effects-active :where(
  .sss-studio-shell,
  [data-sss-studio],
  .sss-studio-modal,
  .sss-studio-toast,
  .sss-save-status,
  [role="dialog"]
) {
  position: relative;
  z-index: 100 !important;
}

@media (prefers-reduced-motion: reduce) {
	.sss-effects-container [data-sss-effect-stage],
	#sss-identity-effects-root [data-sss-effect-stage],
	html.sss-identity-reactive .sss-reactive-target-overlay {
    transition: none !important;
  }
}