/*! xKeryB Attraction Field v1.0 | Copyright (c) 2026 xKeryB. All rights reserved. See /COPYRIGHT.txt.
 * Canvas owns atmosphere, forms, molecules, particles and near-camera optics.
 * CSS composites formula fragments, grain and the existing interface.
 */
:root {
  --xk-black: #020102;
  --xk-warm-black: #060103;
  --xk-wine: #360812;
  --xk-ruby: #a11d46;
  --xk-rose: #d04470;
  --xk-champagne: #f1c8b5;
}
html.xkeryb-attraction-enabled,
html.xkeryb-attraction-enabled body:not(.error-page) { background: var(--xk-black) !important; }
html.xkeryb-attraction-enabled body:not(.error-page) { isolation: isolate; }
html.xkeryb-attraction-booting,
html.xkeryb-attraction-booting body:not(.error-page) {
  background: var(--xk-black) !important;
}
html.xkeryb-attraction-booting body:not(.error-page) > .background-photo,
html.xkeryb-attraction-booting body:not(.error-page) > .background-photo::before,
html.xkeryb-attraction-booting body:not(.error-page) > .background-photo::after,
html.xkeryb-attraction-booting body:not(.error-page)::before,
html.xkeryb-attraction-booting body:not(.error-page)::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
  animation: none !important;
}
.xkeryb-attraction-scene {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  background: #020102;
  opacity: 0;
  transition: opacity 720ms cubic-bezier(.22, .61, .36, 1);
}
body.xkeryb-attraction-mounted .xkeryb-attraction-scene { opacity: 1; }
html[data-xkeryb-navigation="continuing"] .xkeryb-attraction-scene {
  opacity: 1;
  transition: none;
}
.xkeryb-attraction-canvas,
.xkeryb-attraction-motion-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  transform: translateZ(0) scale(1.003);
  transform-origin: center;
  backface-visibility: hidden;
}
.xkeryb-attraction-motion-canvas {
  transform: translateZ(0) scale(1.003);
}
html[data-xkeryb-performance-profile="balanced-v1"][data-background-motion="on"]
  .xkeryb-attraction-scene--balanced .xkeryb-attraction-canvas {
  will-change: transform;
  animation: xk-balanced-depth-breathe 18s ease-in-out infinite alternate;
  animation-delay: var(--xkeryb-motion-phase-delay, 0s);
}
@keyframes xk-balanced-depth-breathe {
  0% { transform: translate3d(-.18%, .12%, 0) scale(1.014); }
  48% { transform: translate3d(.22%, -.16%, 0) scale(1.022); }
  100% { transform: translate3d(-.08%, -.24%, 0) scale(1.017); }
}
.xkeryb-attraction-vignette,
.xkeryb-attraction-grain,
.xkeryb-formula-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.xkeryb-attraction-vignette {
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 43%, transparent 0 25%, rgba(2, 0, 1, .08) 56%, rgba(0, 0, 0, .48) 126%),
    linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 18% 72%, rgba(0, 0, 0, .36));
}
.xkeryb-attraction-grain {
  z-index: 4;
  opacity: .048;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
}
.xkeryb-formula-field {
  z-index: 3;
  overflow: hidden;
  perspective: 900px;
}
.xkeryb-formula {
  position: absolute;
  left: var(--formula-left);
  top: var(--formula-top);
  display: block;
  width: max-content;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  will-change: transform;
}
.xkeryb-formula-inner {
  --formula-scale: 1;
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 92px;
  color: rgba(255, 224, 212, .86);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 420;
  line-height: 1;
  letter-spacing: .23em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(208, 68, 112, .48), 0 0 30px rgba(118, 18, 46, .3);
  mix-blend-mode: screen;
  filter: blur(var(--formula-blur, 0)) brightness(.84);
  opacity: var(--formula-opacity, .4);
  transform: scale(var(--formula-scale)) rotateZ(var(--formula-tilt, 0deg)) rotateY(var(--formula-yaw, 0deg));
}
.xkeryb-formula-inner::before {
  content: "";
  width: 38px;
  height: 1px;
  margin-bottom: 2px;
  background: linear-gradient(90deg, rgba(244, 181, 197, .78), rgba(208, 68, 112, .2), transparent);
  box-shadow: 44px 0 0 -0.25px rgba(241, 200, 181, .28);
}
.xkeryb-formula-name { font-size: 7.5px; font-weight: 620; }
.xkeryb-formula-code { color: rgba(244, 181, 197, .75); font-size: 8.5px; letter-spacing: .14em; }
.xkeryb-formula-signal { color: rgba(208, 68, 112, .72); font-size: 5px; letter-spacing: .28em; }

.xkeryb-formula[data-formula="dopamine"] {
  --formula-left: .9%; --formula-top: 21%; --formula-opacity: .5;
  --formula-tilt: -8.5deg; --formula-yaw: 14deg; --formula-duration: 16s;
}
.xkeryb-formula[data-formula="serotonin"] {
  --formula-left: 91.6%; --formula-top: 12%; --formula-opacity: .44;
  --formula-tilt: 7deg; --formula-yaw: -17deg; --formula-duration: 19s; --formula-delay: -8s;
}
.xkeryb-formula[data-formula="adrenaline"] {
  --formula-left: 88.9%; --formula-top: 58%; --formula-opacity: .38;
  --formula-blur: .25px; --formula-tilt: -5.5deg; --formula-yaw: 8deg; --formula-duration: 22s; --formula-delay: -13s;
}
.xkeryb-formula[data-formula="estradiol"] {
  --formula-left: .4%; --formula-top: 71.7%; --formula-opacity: .46;
  --formula-tilt: -4.5deg; --formula-yaw: 13deg; --formula-duration: 18s; --formula-delay: -5s;
}
.xkeryb-formula[data-formula="testosterone"] {
  --formula-left: 91.9%; --formula-top: 73.4%; --formula-opacity: .48;
  --formula-tilt: 4.5deg; --formula-yaw: -13deg; --formula-duration: 20s; --formula-delay: -11s;
}
.xkeryb-formula[data-formula="progesterone"] {
  --formula-left: 1.3%; --formula-top: 36.5%; --formula-opacity: .4;
  --formula-blur: .2px; --formula-tilt: 6.2deg; --formula-yaw: -9deg; --formula-duration: 24s; --formula-delay: -15s;
}
.xkeryb-formula[data-formula="oxytocin"] {
  --formula-left: 31.8%; --formula-top: .9%; --formula-opacity: .36;
  --formula-tilt: 3.4deg; --formula-yaw: -7deg; --formula-duration: 21s; --formula-delay: -9s;
}
.xkeryb-formula[data-formula="cgmp"] {
  --formula-left: 20.5%; --formula-top: 18.5%; --formula-opacity: .3;
  --formula-tilt: -7.5deg; --formula-yaw: 12deg; --formula-duration: 19s; --formula-delay: -6s;
  --formula-drift-x0: -5px; --formula-drift-y0: 4px; --formula-drift-z0: 0px; --formula-rock0: -1.4deg;
  --formula-drift-x1: 3px; --formula-drift-y1: -4px; --formula-drift-z1: 7px; --formula-rock1: 2.2deg;
  --formula-drift-x2: 7px; --formula-drift-y2: -2px; --formula-drift-z2: 2px; --formula-rock2: -.6deg;
}
.xkeryb-formula[data-formula="sildenafil"] {
  --formula-left: 72.5%; --formula-top: 25.5%; --formula-opacity: .29;
  --formula-blur: .15px; --formula-tilt: 6.5deg; --formula-yaw: -14deg; --formula-duration: 23s; --formula-delay: -14s; --formula-direction: alternate-reverse;
  --formula-drift-x0: 5px; --formula-drift-y0: -4px; --formula-drift-z0: 2px; --formula-rock0: 1.5deg;
  --formula-drift-x1: -3px; --formula-drift-y1: 5px; --formula-drift-z1: 5px; --formula-rock1: -2.1deg;
  --formula-drift-x2: -7px; --formula-drift-y2: 2px; --formula-drift-z2: 0px; --formula-rock2: .5deg;
}
.xkeryb-formula[data-formula="alprostadil"] {
  --formula-left: 73.5%; --formula-top: 60%; --formula-opacity: .26;
  --formula-tilt: 1.5deg; --formula-yaw: 6deg; --formula-duration: 26.5s; --formula-delay: -10s;
  --formula-drift-x0: -2px; --formula-drift-y0: -6px; --formula-drift-z0: 1px; --formula-rock0: -2deg;
  --formula-drift-x1: 3px; --formula-drift-y1: 1px; --formula-drift-z1: 8px; --formula-rock1: 1deg;
  --formula-drift-x2: -1px; --formula-drift-y2: 7px; --formula-drift-z2: 3px; --formula-rock2: 2.5deg;
}
.xkeryb-formula[data-formula="tadalafil"] {
  --formula-left: 17%; --formula-top: 74%; --formula-opacity: .27;
  --formula-blur: .1px; --formula-tilt: -2.7deg; --formula-yaw: -9deg; --formula-duration: 21.5s; --formula-delay: -17s;
  --formula-drift-x0: 6px; --formula-drift-y0: 2px; --formula-drift-z0: 3px; --formula-rock0: 1.2deg;
  --formula-drift-x1: -4px; --formula-drift-y1: -5px; --formula-drift-z1: 8px; --formula-rock1: -1.6deg;
  --formula-drift-x2: -7px; --formula-drift-y2: 4px; --formula-drift-z2: 1px; --formula-rock2: .4deg;
}
.xkeryb-formula:is(
  [data-formula="cgmp"],
  [data-formula="sildenafil"],
  [data-formula="alprostadil"],
  [data-formula="tadalafil"]
) .xkeryb-formula-inner {
  filter: blur(var(--formula-blur, 0)) brightness(.92);
}

/* Replace the legacy outlined circles in content surfaces with quiet optical
 * blooms. Their gradients become transparent well before overflow clipping,
 * so no cut rim or visible endpoint survives at any responsive size. */
html.xkeryb-attraction-enabled body.theme-design-system.xkeryb-attraction-mounted:not(.legal-body):not(.error-page) .content-hero-v13::after {
  right: -8%;
  bottom: -34%;
  width: clamp(250px, 38%, 470px);
  height: clamp(240px, 68%, 430px);
  border: 0 !important;
  border-radius: 43% 57% 62% 38% / 55% 39% 61% 45%;
  background:
    radial-gradient(ellipse at 32% 28%, color-mix(in srgb, var(--v13-accent) 10%, transparent), transparent 38%),
    radial-gradient(ellipse at 68% 62%, color-mix(in srgb, var(--v13-accent) 6%, transparent), transparent 69%) !important;
  box-shadow: none !important;
  opacity: .46;
  transform: rotate(-13deg);
}
html.xkeryb-attraction-enabled body.theme-design-system.xkeryb-attraction-mounted.library-page-v2 .library-card::after {
  right: -12%;
  bottom: -26%;
  width: 64%;
  aspect-ratio: 1.18;
  border: 0 !important;
  border-radius: 47% 53% 41% 59% / 58% 42% 58% 42%;
  background: radial-gradient(ellipse at 42% 38%, color-mix(in srgb, var(--library-card-accent) 9%, transparent), transparent 68%) !important;
  box-shadow: none !important;
  opacity: .42;
  transform: rotate(-17deg);
}

/* Hard-neutralize every previous background owner retained in base bundles. */
body.xkeryb-attraction-mounted:not(.error-page) > .background-photo,
body.xkeryb-attraction-mounted:not(.error-page) > .background-photo::before,
body.xkeryb-attraction-mounted:not(.error-page) > .background-photo::after,
body.xkeryb-attraction-mounted:not(.error-page)::before,
body.xkeryb-attraction-mounted:not(.error-page)::after {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
  animation: none !important;
  transform: none !important;
}
body.xkeryb-attraction-mounted:not(.error-page) :is(
  .ambient-canvas, .spatial-bg-canvas, .spatial-field-canvas,
  .floating-lines-canvas, .letter-glitch-canvas,
  .xkeryb-environment, .xkeryb-environment-depth
) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.xkeryb-attraction-mounted:not(.error-page) :is(.profile-page, .editorial-page, .legal-page) {
  position: relative;
  z-index: 2;
}
body.xkeryb-attraction-mounted:not(.error-page) :is(.site-signature, .language-picker, .theme-switcher, .article-reading-progress) { z-index: 20; }

/* The shell catches reflected crimson; platform cards keep brand colors. */
html.xkeryb-attraction-enabled body.theme-design-system.xkeryb-attraction-mounted .profile-card {
  background: linear-gradient(145deg, rgba(8, 1, 4, .2), rgba(3, 1, 2, .12)) !important;
  border-color: rgba(184, 43, 82, .44) !important;
  box-shadow:
    0 28px 84px rgba(0, 0, 0, .7),
    0 0 62px rgba(118, 18, 46, .24),
    inset 0 1px rgba(255, 224, 212, .055),
    inset 0 -1px rgba(161, 29, 70, .08);
  backdrop-filter: blur(3px) saturate(.93);
}
html.xkeryb-attraction-enabled body.theme-design-system.xkeryb-attraction-mounted.editorial-body .editorial-shell,
html.xkeryb-attraction-enabled body.theme-design-system.xkeryb-attraction-mounted.legal-body .legal-content {
  background: rgba(5, 1, 3, .81) !important;
  border-color: rgba(184, 43, 82, .35) !important;
  box-shadow: 0 26px 84px rgba(0, 0, 0, .58), 0 0 52px rgba(81, 11, 29, .2);
  backdrop-filter: blur(8px) saturate(.9);
}
html.xkeryb-attraction-enabled[data-site-theme] body.theme-design-system.xkeryb-attraction-mounted .article-hero {
  background:
    radial-gradient(ellipse at 88% 12%, rgba(208, 68, 112, .12), transparent 34%),
    linear-gradient(145deg, rgba(20, 3, 7, .78), rgba(5, 1, 3, .76)) !important;
  border-color: rgba(161, 29, 70, .32) !important;
}

@media (max-width: 699px) {
  .xkeryb-attraction-grain { opacity: .034; }
  .xkeryb-attraction-vignette { background: radial-gradient(ellipse at 50% 39%, transparent 0 26%, rgba(2, 0, 1, .1) 65%, rgba(0, 0, 0, .46) 124%); }
  html.xkeryb-attraction-enabled body.theme-design-system.xkeryb-attraction-mounted .profile-card { backdrop-filter: blur(2px) saturate(.94); }
}
@media (max-width: 699px), (pointer: coarse) {
  .xkeryb-formula-inner { --formula-scale: .78; }
  .xkeryb-formula[data-formula="dopamine"] { --formula-left: 2%; --formula-top: 10%; --formula-opacity: .36; }
  .xkeryb-formula[data-formula="serotonin"] { --formula-left: calc(100% - 128px); --formula-top: 14%; --formula-opacity: .32; }
  .xkeryb-formula[data-formula="estradiol"] { --formula-left: 2%; --formula-top: 72%; --formula-opacity: .28; }
  .xkeryb-formula[data-formula="progesterone"] { --formula-left: calc(100% - 132px); --formula-top: 78%; --formula-opacity: .27; }
  .xkeryb-formula[data-formula="adrenaline"],
  .xkeryb-formula[data-formula="testosterone"],
  .xkeryb-formula[data-formula="oxytocin"] { display: none; }
}
@media (max-width: 959px), (pointer: coarse) {
  .xkeryb-formula[data-formula="cgmp"],
  .xkeryb-formula[data-formula="sildenafil"],
  .xkeryb-formula[data-formula="alprostadil"],
  .xkeryb-formula[data-formula="tadalafil"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-background-motion="on"]) .xkeryb-attraction-scene { transition: none; }
  html:not([data-background-motion="on"]) .xkeryb-formula-inner { animation: none !important; }
  html:not([data-background-motion="on"]) .xkeryb-attraction-grain { opacity: .032; }
  html:not([data-background-motion="on"]) .xkeryb-attraction-scene--balanced .xkeryb-attraction-canvas { animation: none !important; }
}
html[data-background-motion="off"] .xkeryb-formula-inner { animation-play-state: paused !important; }
html[data-background-motion="off"] .xkeryb-attraction-scene--balanced .xkeryb-attraction-canvas { animation-play-state: paused !important; }