:root {
  --bf-progress: 0;
  --bf-pointer-x: 50%;
  --bf-pointer-y: 50%;
  --bf-shift-x: 0px;
  --bf-shift-y: 0px;
  --bf-shift-x-neg: 0px;
  --bf-shift-y-neg: 0px;
  --bf-shift-x-far: 0px;
  --bf-shift-y-far: 0px;
  --bf-velocity: 0;
  --bf-accent: var(--sand);
}

body[data-bf-route="origo"] { --bf-accent: #a58d70; }
body[data-bf-route="forma"] { --bf-accent: #854e38; }
body[data-bf-route="lumen"] { --bf-accent: #d8bf7b; }
body[data-bf-route="endure"] { --bf-accent: #77766f; }

.bf-depth-field {
  position: fixed;
  inset: 0;
  z-index: 78;
  pointer-events: none;
  overflow: hidden;
  opacity: .72;
  mix-blend-mode: multiply;
}

.bf-depth-field::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42vw 42vw at var(--bf-pointer-x) var(--bf-pointer-y), color-mix(in srgb, var(--bf-accent) 10%, transparent), transparent 67%),
    repeating-linear-gradient(90deg, transparent 0 calc(12.5vw - 1px), rgba(28,28,26,.025) calc(12.5vw - 1px) 12.5vw);
  transition: opacity .4s ease;
}

.bf-depth-field i {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--bf-accent) 22%, transparent);
  border-radius: 50%;
  transform: translate3d(var(--bf-shift-x), var(--bf-shift-y), 0);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}

.bf-depth-field i:nth-child(1) { width: 38vw; height: 38vw; left: -19vw; top: 19vh; }
.bf-depth-field i:nth-child(2) { width: 22vw; height: 22vw; right: -8vw; top: 58vh; border-style: dashed; }
.bf-depth-field i:nth-child(3) { width: 7px; height: 7px; left: 63vw; top: 16vh; background: var(--bf-accent); border: 0; }

.bf-scroll-meter {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: rgba(28,28,26,.08);
}

.bf-scroll-meter span {
  display: block;
  width: calc(var(--bf-progress) * 100%);
  height: 100%;
  background: var(--bf-accent);
  transform-origin: left;
  transition: width .08s linear;
}

.bf-edge-index {
  position: fixed;
  z-index: 81;
  left: 13px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translateY(-50%) rotate(-90deg) translateX(-50%);
  transform-origin: left top;
  pointer-events: none;
  color: currentColor;
  mix-blend-mode: difference;
  filter: invert(1);
  opacity: .38;
}

.bf-edge-index b,.bf-edge-index span { font: 8px/1 var(--mono); letter-spacing: .2em; white-space: nowrap; }
.bf-edge-index b { font-weight: 400; }
.bf-edge-index span { opacity: .55; }

.bf-reveal {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 36px, 0);
  transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1.15s cubic-bezier(.22,1,.36,1), filter 1s ease;
  transition-delay: var(--bf-delay, 0ms);
}

.bf-reveal.is-visible { opacity: 1; filter: blur(0); transform: translate3d(0,0,0); }

.discipline-hero,.work-open,.about-hero,.inquiry-composition {
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.discipline-hero::before,.work-open::before,.about-hero::before,.inquiry-composition::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12%;
  background:
    radial-gradient(ellipse at 72% 32%, color-mix(in srgb, var(--bf-accent) 24%, transparent), transparent 38%),
    repeating-radial-gradient(circle at 72% 32%, transparent 0 48px, color-mix(in srgb, var(--bf-accent) 13%, transparent) 49px 50px);
  transform: translate3d(var(--bf-shift-x-neg), var(--bf-shift-y-neg), 0) scale(1.05);
  transition: transform .35s ease-out;
  opacity: .55;
}

.discipline-instrument { perspective: 900px; }
.discipline-instrument i {
  transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .7s ease;
  transform: translate3d(var(--bf-shift-x), var(--bf-shift-y), 0);
}
.discipline-instrument i:nth-child(2) { transform: translate3d(var(--bf-shift-x-neg), var(--bf-shift-y-neg), 0); }
.discipline-instrument i:nth-child(3) { transform: translate3d(var(--bf-shift-x-far), var(--bf-shift-y-far), 0); }

.model-list article,.about-belief,.register article,.held-record {
  position: relative;
  transition: transform .55s cubic-bezier(.22,1,.36,1), background-color .4s ease, color .4s ease;
}
.model-list article::after,.register article::after,.held-record::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid transparent;
  transition: border-color .4s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.model-list article:hover,.register article:hover,.held-record:hover { transform: translate3d(10px,-4px,0); }
.model-list article:hover::after,.register article:hover::after,.held-record:hover::after { border-color: color-mix(in srgb, var(--bf-accent) 44%, transparent); transform: translate(-7px,7px); }

.discipline-model,.about-belief,.archive-note,.practice-principles {
  background-image:
    linear-gradient(115deg, transparent 0 64%, color-mix(in srgb, var(--bf-accent) 8%, transparent) 64% 65%, transparent 65%),
    radial-gradient(circle at 14% 82%, color-mix(in srgb, var(--bf-accent) 12%, transparent), transparent 26%);
}

.button-link,.text-link,.approved-record { --bf-magnet-x: 0px; --bf-magnet-y: 0px; transform: translate3d(var(--bf-magnet-x),var(--bf-magnet-y),0); transition: transform .35s cubic-bezier(.22,1,.36,1); }

@media (max-width: 820px) {
  .bf-edge-index { display: none; }
  .bf-depth-field { opacity: .42; }
  .bf-depth-field i:nth-child(1) { width: 90vw; height: 90vw; left: -60vw; }
  .bf-depth-field i:nth-child(2) { width: 55vw; height: 55vw; right: -34vw; }
  .discipline-hero::before,.work-open::before,.about-hero::before,.inquiry-composition::before { opacity: .34; }
}

@media (prefers-reduced-motion: reduce) {
  .bf-reveal { opacity: 1; filter: none; transform: none; transition: none; }
  .bf-depth-field i,.discipline-hero::before,.work-open::before,.about-hero::before,.inquiry-composition::before { transform: none; transition: none; }
  .button-link,.text-link,.approved-record { transform: none !important; }
}