html[data-prototype-focus="background-directions"]
  .landing-view
  > :not([data-checkpoint="14"]) {
  display: none;
}

.background-directions {
  --bd-progress: 0;
  --bd-intro-opacity: 1;
  --bd-intro-y: 0vh;
  --bd-intro-scale: 1;
  --bd-particle-opacity: 1;
  --bd-photo-opacity: 0;
  --bd-image-scale: 1.14;
  --bd-line-opacity: 0;
  --bd-seam-top: 60%;
  --bd-seam-bottom: 40%;
  --bd-gold-clip: polygon(0 0, 0 0, 0 100%, 0 100%);
  --bd-silver-clip: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  position: relative;
  height: 330vh;
  height: 330svh;
  background: #e3e6e7;
}

.background-directions-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #e3e6e7;
  color: #111;
  isolation: isolate;
}

.background-directions-color {
  position: absolute;
  z-index: 0;
  inset: -8%;
  background-position: center;
  background-size: 150% 150%;
  animation: background-directions-drift 13s ease-in-out infinite alternate;
  pointer-events: none;
  transition: opacity 350ms ease;
}

.background-directions-color::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 48%, transparent 0 28%, rgb(255 255 255 / 12%) 72%, rgb(255 255 255 / 32%) 100%);
  content: "";
}

.background-directions-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--bd-particle-opacity);
  pointer-events: none;
}

.background-directions-intro {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(7rem, 15vh, 10rem) var(--header-gutter) clamp(4rem, 8vh, 6rem);
  opacity: var(--bd-intro-opacity);
  pointer-events: none;
  transform: translate3d(0, var(--bd-intro-y), 0) scale(var(--bd-intro-scale));
}

.background-directions-kicker,
.background-directions-source,
.background-directions-statement,
.background-directions-scroll,
.background-directions-product figcaption {
  margin: 0;
}

.background-directions-kicker {
  position: absolute;
  top: clamp(8.7rem, 22vh, 11.5rem);
  font-size: clamp(0.54rem, 0.67vw, 0.7rem);
  font-weight: 760;
  letter-spacing: 0.24em;
}

.background-directions-source {
  display: grid;
  justify-items: center;
  gap: clamp(1.65rem, 4vh, 3.2rem);
  text-align: center;
}

.background-directions-source span:first-child {
  font-size: clamp(5.8rem, 14.6vw, 14.8rem);
  font-weight: 750;
  letter-spacing: -0.092em;
  line-height: 0.77;
  white-space: nowrap;
}

.background-directions-statement {
  position: absolute;
  top: 67.5%;
  left: 50%;
  font-size: clamp(1.45rem, 3vw, 3.35rem);
  font-weight: 590;
  letter-spacing: -0.07em;
  line-height: 1;
  text-align: center;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.background-directions-stage[data-enhanced="true"] .background-directions-source {
  opacity: 0;
}

.background-directions-scroll {
  position: absolute;
  bottom: clamp(1.6rem, 3.6vh, 2.5rem);
  left: 50%;
  color: rgb(17 17 17 / 46%);
  font-size: 0.44rem;
  font-weight: 740;
  letter-spacing: 0.17em;
  transform: translateX(-50%);
}

.background-directions-products {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  background: transparent;
  opacity: var(--bd-photo-opacity);
  pointer-events: none;
}

.background-directions-product {
  position: absolute;
  inset: 0;
  overflow: hidden;
  margin: 0;
  background: #dfe0df;
}

.background-directions-gold {
  clip-path: var(--bd-gold-clip);
}

.background-directions-silver {
  clip-path: var(--bd-silver-clip);
}

.background-directions-product img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--bd-image-scale));
}

.background-directions-product::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(5 7 6 / 5%), transparent 26% 72%, rgb(5 7 6 / 22%));
  content: "";
}

.background-directions-product figcaption {
  position: absolute;
  z-index: 1;
  right: clamp(1rem, 2.1vw, 2rem);
  bottom: clamp(1.1rem, 2.2vw, 2rem);
  left: clamp(1rem, 2.1vw, 2rem);
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: clamp(0.44rem, 0.54vw, 0.58rem);
  font-weight: 720;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 1rem rgb(0 0 0 / 42%);
}

.background-directions-product figcaption strong {
  font: inherit;
}

.background-directions-fold-line {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: rgb(255 255 255 / 76%);
  clip-path: polygon(
    calc(var(--bd-seam-top) - 0.65px) 0,
    calc(var(--bd-seam-top) + 0.65px) 0,
    calc(var(--bd-seam-bottom) + 0.65px) 100%,
    calc(var(--bd-seam-bottom) - 0.65px) 100%
  );
  filter: drop-shadow(-1px 0 2px rgb(15 18 17 / 16%));
  opacity: var(--bd-line-opacity);
}

.background-directions-panel {
  position: absolute;
  z-index: 12;
  right: clamp(0.8rem, 1.8vw, 1.5rem);
  bottom: clamp(0.9rem, 2.2vh, 1.4rem);
  display: grid;
  width: min(24rem, 34vw);
  grid-template-columns: auto 1fr 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgb(18 20 19 / 13%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 0.7rem 2.4rem rgb(18 20 19 / 10%);
  color: #111;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.background-directions-effect {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
  border: 1px solid rgb(17 17 17 / 12%);
  border-radius: 0.65rem;
}

.background-directions-effect button {
  min-height: 2.1rem;
  padding: 0 0.58rem;
  border: 0;
  background: transparent;
  color: #111;
  cursor: pointer;
  font-size: 0.48rem;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.background-directions-effect button[aria-pressed="true"] {
  background: #111;
  color: #fff;
}

.background-directions-panel label {
  display: grid;
  gap: 0.38rem;
  min-width: 0;
}

.background-directions-panel label span {
  display: flex;
  justify-content: space-between;
  color: #626866;
  font-size: 0.48rem;
  font-weight: 650;
}

.background-directions-panel output {
  color: #111;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.background-directions-panel input[type="range"] {
  width: 100%;
  height: 0.25rem;
  margin: 0;
  accent-color: #111;
  cursor: ew-resize;
}

.background-directions-controls {
  position: absolute;
  z-index: 12;
  bottom: clamp(0.9rem, 2.2vh, 1.4rem);
  left: clamp(0.8rem, 1.8vw, 1.5rem);
  display: grid;
  grid-template-columns: 2.7rem minmax(16rem, 22rem) 2.7rem;
  overflow: hidden;
  border: 1px solid rgb(18 20 19 / 13%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 0.7rem 2.4rem rgb(18 20 19 / 10%);
  color: #111;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.background-directions-controls button {
  display: grid;
  min-height: 3.3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  place-items: center;
}

.background-directions-controls button:hover,
.background-directions-controls button:focus-visible {
  background: #111;
  color: #fff;
  outline: 0;
}

.background-directions-controls output {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 0.48rem 0.85rem 0.52rem;
  border-right: 1px solid rgb(18 20 19 / 10%);
  border-left: 1px solid rgb(18 20 19 / 10%);
  line-height: 1;
}

.background-directions-controls output span {
  color: #7b817f;
  font-size: 0.42rem;
  font-weight: 740;
  letter-spacing: 0.13em;
}

.background-directions-controls output strong {
  margin-top: 0.22rem;
  overflow: hidden;
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.09em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.background-directions-controls output small {
  margin-top: 0.28rem;
  overflow: hidden;
  color: #666c6a;
  font-size: 0.52rem;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.background-directions-stage[data-background-direction="0"] .background-directions-color {
  background-image:
    radial-gradient(circle at 30% 46%, rgb(205 231 243 / 78%), transparent 43%),
    radial-gradient(circle at 72% 54%, rgb(226 214 241 / 68%), transparent 46%),
    linear-gradient(128deg, #f7f9f8, #e7eef2);
}

.background-directions-stage[data-background-direction="1"] .background-directions-color {
  background-image:
    radial-gradient(circle at 18% 62%, rgb(212 191 242 / 73%), transparent 42%),
    radial-gradient(circle at 78% 36%, rgb(170 225 235 / 72%), transparent 45%),
    linear-gradient(132deg, #f6f3f8, #e7f0f2);
}

.background-directions-stage[data-background-direction="2"] .background-directions-color {
  background-image:
    radial-gradient(circle at 23% 38%, rgb(247 196 214 / 68%), transparent 40%),
    radial-gradient(circle at 74% 61%, rgb(174 215 236 / 76%), transparent 47%),
    linear-gradient(122deg, #f8f4f5, #e8eff3);
}

.background-directions-stage[data-background-direction="3"] .background-directions-color {
  background-image:
    radial-gradient(circle at 26% 57%, rgb(174 215 241 / 82%), transparent 44%),
    radial-gradient(circle at 72% 39%, rgb(217 195 241 / 76%), transparent 45%),
    linear-gradient(138deg, #eef6f8, #f6f2f8);
}

.background-directions-stage[data-background-direction="4"] .background-directions-color {
  background-image:
    radial-gradient(circle at 21% 45%, rgb(185 226 239 / 78%), transparent 42%),
    radial-gradient(circle at 76% 58%, rgb(212 196 240 / 80%), transparent 47%),
    radial-gradient(circle at 53% 18%, rgb(255 255 255 / 72%), transparent 38%),
    linear-gradient(#e9f1f4, #e9f1f4);
}

.background-directions-stage[data-background-direction="5"] .background-directions-color {
  background-image:
    radial-gradient(circle at 28% 36%, rgb(205 180 241 / 78%), transparent 41%),
    radial-gradient(circle at 73% 64%, rgb(179 214 238 / 72%), transparent 47%),
    linear-gradient(126deg, #f4f1f8, #e7eff4);
}

.background-directions-stage[data-background-direction="6"] .background-directions-color {
  background-image:
    radial-gradient(circle at 18% 41%, rgb(247 191 211 / 70%), transparent 39%),
    radial-gradient(circle at 76% 58%, rgb(171 218 237 / 78%), transparent 46%),
    linear-gradient(132deg, #f7f1f4, #e6eff3);
}

.background-directions-stage[data-background-direction="7"] .background-directions-color {
  background-image:
    radial-gradient(circle at 24% 58%, rgb(158 225 229 / 75%), transparent 42%),
    radial-gradient(circle at 76% 37%, rgb(200 207 242 / 72%), transparent 46%),
    linear-gradient(128deg, #eaf6f4, #eef0f8);
}

.background-directions-stage[data-background-direction="8"] .background-directions-color {
  background-image:
    radial-gradient(circle at 29% 37%, rgb(221 196 235 / 72%), transparent 41%),
    radial-gradient(circle at 69% 65%, rgb(171 208 229 / 78%), transparent 47%),
    linear-gradient(142deg, #f5f1f5, #e4edf2);
}

.background-directions-stage[data-background-direction="9"] .background-directions-color {
  background-image:
    radial-gradient(circle at 20% 55%, rgb(143 223 231 / 74%), transparent 42%),
    radial-gradient(circle at 78% 42%, rgb(197 178 239 / 78%), transparent 46%),
    radial-gradient(circle at 50% 76%, rgb(255 255 255 / 64%), transparent 38%),
    linear-gradient(#e7eff3, #e7eff3);
}

.background-directions-stage[data-background-direction="10"] .background-directions-color {
  background-image:
    radial-gradient(circle at 32% 48%, rgb(188 225 241 / 76%), transparent 43%),
    radial-gradient(circle at 72% 47%, rgb(227 209 239 / 74%), transparent 47%),
    radial-gradient(circle at 52% 25%, rgb(255 255 255 / 76%), transparent 35%),
    linear-gradient(#eaf1f4, #eaf1f4);
}

.background-directions-stage[data-background-direction="11"] .background-directions-color {
  background-image:
    radial-gradient(circle at 17% 52%, rgb(188 219 241 / 68%), transparent 42%),
    radial-gradient(circle at 73% 34%, rgb(207 178 239 / 82%), transparent 43%),
    radial-gradient(circle at 62% 78%, rgb(179 227 226 / 58%), transparent 38%),
    linear-gradient(#eef0f6, #eef0f6);
}

.background-directions-stage[data-background-direction="12"] .background-directions-color {
  background-image:
    radial-gradient(circle at 22% 61%, rgb(244 197 216 / 72%), transparent 42%),
    radial-gradient(circle at 77% 39%, rgb(177 218 240 / 78%), transparent 45%),
    radial-gradient(circle at 50% 30%, rgb(226 214 244 / 58%), transparent 37%),
    linear-gradient(#f2f3f7, #f2f3f7);
}

.background-directions-stage[data-background-direction="13"] .background-directions-color {
  background-image:
    radial-gradient(circle at 22% 43%, rgb(167 214 241 / 80%), transparent 43%),
    radial-gradient(circle at 74% 60%, rgb(195 204 239 / 76%), transparent 47%),
    linear-gradient(128deg, #e6f1f6, #f2f0f7);
}

.background-directions-stage[data-background-direction="14"] .background-directions-color {
  background-image:
    radial-gradient(circle at 15% 35%, rgb(243 200 220 / 68%), transparent 38%),
    radial-gradient(circle at 51% 73%, rgb(169 224 231 / 70%), transparent 44%),
    radial-gradient(circle at 83% 27%, rgb(203 184 242 / 74%), transparent 40%),
    linear-gradient(#f2f4f6, #f2f4f6);
}

.background-directions-stage[data-background-direction="15"] .background-directions-color {
  background-image:
    radial-gradient(circle at 31% 41%, rgb(211 187 241 / 80%), transparent 43%),
    radial-gradient(circle at 73% 59%, rgb(169 215 239 / 76%), transparent 47%),
    linear-gradient(136deg, #f0edf7, #e6f0f5);
}

.background-directions-stage[data-background-direction="16"] .background-directions-color {
  background-image:
    radial-gradient(circle at 24% 56%, rgb(197 222 241 / 74%), transparent 42%),
    radial-gradient(circle at 75% 43%, rgb(229 199 229 / 70%), transparent 46%),
    linear-gradient(124deg, #edf4f7, #f5eff4);
}

.background-directions-stage[data-background-direction="17"] .background-directions-color {
  background-image:
    radial-gradient(circle at 18% 47%, rgb(158 218 238 / 78%), transparent 42%),
    radial-gradient(circle at 80% 53%, rgb(216 197 241 / 76%), transparent 46%),
    linear-gradient(122deg, #e8f3f7, #f1eef8);
}

.background-directions-stage[data-background-direction="18"] .background-directions-color {
  background-image:
    radial-gradient(circle at 25% 47%, rgb(227 188 231 / 76%), transparent 42%),
    radial-gradient(circle at 74% 51%, rgb(178 216 240 / 76%), transparent 47%),
    linear-gradient(126deg, #f5eef6, #e6f0f5);
}

.background-directions-stage[data-background-direction="19"] .background-directions-color {
  background-image:
    radial-gradient(circle at 16% 58%, rgb(172 228 230 / 72%), transparent 41%),
    radial-gradient(circle at 49% 26%, rgb(245 202 220 / 66%), transparent 38%),
    radial-gradient(circle at 82% 53%, rgb(194 176 241 / 78%), transparent 44%),
    linear-gradient(132deg, #edf7f5, #f5f0f6);
}

/* ORIGINAL COLOR STUDIES · restored for direct comparison */
.background-directions-stage[data-background-direction="20"] .background-directions-color {
  background-image: radial-gradient(circle at 46% 48%, #fbfbf8 0 22%, #e2e7e8 58%, #c8d0d2 100%);
}

.background-directions-stage[data-background-direction="21"] .background-directions-color {
  background-image:
    radial-gradient(circle at 22% 54%, rgb(255 210 221 / 62%), transparent 42%),
    radial-gradient(circle at 76% 40%, rgb(174 224 229 / 68%), transparent 45%),
    linear-gradient(125deg, #f7f3f2, #e6e8ec);
}

.background-directions-stage[data-background-direction="22"] .background-directions-color {
  background-image:
    radial-gradient(circle at 48% 42%, rgb(255 255 255 / 88%), transparent 38%),
    radial-gradient(circle at 18% 72%, rgb(165 214 228 / 42%), transparent 42%),
    linear-gradient(135deg, #d9e7eb, #eef4f5 54%, #cbdadd);
}

.background-directions-stage[data-background-direction="23"] .background-directions-color {
  background-image:
    radial-gradient(circle at 18% 58%, rgb(255 199 128 / 48%), transparent 39%),
    radial-gradient(circle at 52% 22%, rgb(207 166 247 / 38%), transparent 42%),
    radial-gradient(circle at 82% 62%, rgb(103 219 229 / 48%), transparent 43%),
    linear-gradient(#edf1f0, #edf1f0);
}

.background-directions-stage[data-background-direction="24"] .background-directions-color {
  background-image:
    radial-gradient(circle at 28% 44%, rgb(196 220 238 / 72%), transparent 45%),
    radial-gradient(circle at 75% 55%, rgb(221 207 239 / 72%), transparent 46%),
    linear-gradient(120deg, #f5f7f6, #dfe9ed);
}

.background-directions-stage[data-background-direction="25"] .background-directions-color {
  background-image:
    radial-gradient(circle at 30% 56%, rgb(245 207 139 / 55%), transparent 43%),
    radial-gradient(circle at 72% 35%, rgb(255 251 232 / 88%), transparent 44%),
    linear-gradient(135deg, #eee1c9, #f6f2e8);
}

.background-directions-stage[data-background-direction="26"] .background-directions-color {
  background-image:
    radial-gradient(circle at 22% 35%, rgb(247 184 199 / 52%), transparent 39%),
    radial-gradient(circle at 74% 65%, rgb(181 218 231 / 65%), transparent 44%),
    linear-gradient(135deg, #f1edf0, #e0e8eb);
}

.background-directions-stage[data-background-direction="27"] .background-directions-color {
  background-image:
    radial-gradient(circle at 50% 44%, rgb(255 255 255 / 82%), transparent 35%),
    radial-gradient(circle at 18% 60%, rgb(184 204 213 / 58%), transparent 43%),
    radial-gradient(circle at 82% 56%, rgb(214 199 216 / 54%), transparent 44%),
    linear-gradient(#dfe4e6, #dfe4e6);
}

.background-directions-stage[data-background-direction="28"] .background-directions-color {
  background-image:
    linear-gradient(118deg, rgb(255 255 255 / 72%), transparent 38%),
    radial-gradient(circle at 68% 48%, rgb(175 188 193 / 55%), transparent 48%),
    linear-gradient(135deg, #d9ddde, #f5f5f1 52%, #c7ced0);
}

.background-directions-stage[data-background-direction="29"] .background-directions-color {
  background-image:
    radial-gradient(circle at 24% 55%, rgb(117 221 230 / 50%), transparent 43%),
    radial-gradient(circle at 76% 42%, rgb(201 185 239 / 58%), transparent 46%),
    linear-gradient(125deg, #e9f0ef, #dfe9ee);
}

.background-directions-stage[data-background-direction="30"] .background-directions-color {
  background-image:
    radial-gradient(circle at 32% 48%, rgb(255 243 219 / 76%), transparent 45%),
    radial-gradient(circle at 74% 52%, rgb(192 208 214 / 62%), transparent 46%),
    linear-gradient(120deg, #f4eee2, #e2e8e9);
}

.background-directions-stage[data-background-direction="31"] .background-directions-color {
  background-image:
    radial-gradient(circle at 20% 52%, rgb(126 222 226 / 48%), transparent 42%),
    radial-gradient(circle at 78% 38%, rgb(203 172 241 / 52%), transparent 44%),
    radial-gradient(circle at 55% 75%, rgb(255 255 255 / 68%), transparent 42%),
    linear-gradient(#e7eef0, #e7eef0);
}

.background-directions-stage[data-background-direction="32"] .background-directions-color {
  background-image:
    radial-gradient(circle at 26% 60%, rgb(236 200 140 / 58%), transparent 43%),
    radial-gradient(circle at 72% 38%, rgb(190 202 207 / 64%), transparent 46%),
    linear-gradient(125deg, #eee4d4, #e3e7e7);
}

.background-directions-stage[data-background-direction="33"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 50% 48%, rgb(255 255 255 / 92%) 0 18%, transparent 52%),
    linear-gradient(125deg, #d5dcde, #f4f4f0 55%, #cbd3d5);
}

.background-directions-stage[data-background-direction="34"] .background-directions-color {
  background-image:
    radial-gradient(circle at 15% 35%, rgb(255 193 216 / 42%), transparent 37%),
    radial-gradient(circle at 52% 72%, rgb(190 227 231 / 56%), transparent 44%),
    radial-gradient(circle at 84% 28%, rgb(206 187 239 / 45%), transparent 39%),
    linear-gradient(#edf1ef, #edf1ef);
}

.background-directions-stage[data-background-direction="35"] .background-directions-color {
  background-image:
    radial-gradient(circle at 32% 42%, rgb(215 194 239 / 55%), transparent 44%),
    radial-gradient(circle at 72% 58%, rgb(181 214 231 / 62%), transparent 46%),
    linear-gradient(135deg, #e9e8ef, #eef3f3);
}

.background-directions-stage[data-background-direction="36"] .background-directions-color {
  background-image:
    radial-gradient(circle at 25% 56%, rgb(233 201 154 / 55%), transparent 43%),
    radial-gradient(circle at 76% 44%, rgb(189 203 210 / 68%), transparent 47%),
    linear-gradient(120deg, #eee6d8, #e1e7e8);
}

.background-directions-stage[data-background-direction="37"] .background-directions-color {
  background-image:
    radial-gradient(circle at 22% 44%, rgb(169 224 204 / 52%), transparent 42%),
    radial-gradient(circle at 76% 58%, rgb(193 206 231 / 62%), transparent 46%),
    linear-gradient(130deg, #e8f0eb, #e2e8ed);
}

.background-directions-stage[data-background-direction="38"] .background-directions-color {
  background-image:
    radial-gradient(circle at 26% 48%, rgb(245 190 203 / 55%), transparent 42%),
    radial-gradient(circle at 74% 50%, rgb(176 198 207 / 66%), transparent 47%),
    linear-gradient(125deg, #eee4e5, #dfe6e8);
}

.background-directions-stage[data-background-direction="39"] .background-directions-color {
  background-image:
    radial-gradient(circle at 18% 55%, rgb(235 199 135 / 54%), transparent 42%),
    radial-gradient(circle at 82% 46%, rgb(166 193 205 / 62%), transparent 44%),
    linear-gradient(106deg, #efe2ca 0 39%, #f4f3ef 49%, #d9e2e4 62% 100%);
}

/* EARLY DIRECTION STUDIES · restored without the retired metal-macro set */
.background-directions-stage[data-background-direction="40"] .background-directions-color {
  background-image:
    radial-gradient(circle at 18% 42%, rgb(207 191 163 / 24%), transparent 38%),
    radial-gradient(circle at 82% 55%, rgb(194 202 204 / 20%), transparent 42%),
    linear-gradient(#f3f2ee, #f3f2ee);
}

.background-directions-stage[data-background-direction="41"] .background-directions-color {
  background-image: linear-gradient(112deg, #f4ead8 0 48%, #d9dde0 52% 100%);
}

.background-directions-stage[data-background-direction="42"] .background-directions-color {
  background-image:
    radial-gradient(circle at 24% 45%, rgb(192 145 67 / 20%), transparent 40%),
    radial-gradient(circle at 78% 55%, rgb(190 205 215 / 14%), transparent 44%),
    linear-gradient(#080909, #080909);
}

.background-directions-stage[data-background-direction="43"] .background-directions-color {
  background-image:
    radial-gradient(circle at 48% 44%, rgb(255 255 255 / 70%), transparent 36%),
    radial-gradient(circle at 72% 62%, rgb(113 122 126 / 28%), transparent 46%),
    linear-gradient(#dfe3e5, #dfe3e5);
}

.background-directions-stage[data-background-direction="44"] .background-directions-color {
  background-image:
    radial-gradient(circle at 44% 43%, rgb(255 253 244 / 72%), transparent 39%),
    radial-gradient(circle at 76% 62%, rgb(145 109 61 / 18%), transparent 46%),
    linear-gradient(#eee3cf, #eee3cf);
}

.background-directions-stage[data-background-direction="45"] .background-directions-color {
  background-color: #dfe7e8;
  background-image:
    linear-gradient(rgb(45 71 76 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(45 71 76 / 8%) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 75%), transparent 46%);
  background-size: 2rem 2rem, 2rem 2rem, auto;
}

.background-directions-stage[data-background-direction="46"] .background-directions-color {
  background:
    linear-gradient(#faf9f6, #faf9f6) padding-box,
    linear-gradient(90deg, transparent 3.5%, rgb(17 17 17 / 13%) 3.5% 3.58%, transparent 3.58% 96.42%, rgb(17 17 17 / 13%) 96.42% 96.5%, transparent 96.5%) border-box;
  box-shadow: inset 0 0 0 1px rgb(17 17 17 / 8%);
}

.background-directions-stage[data-background-direction="47"] .background-directions-color {
  background-image:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% 46%, #2b2d2c, #111212 72%);
}

.background-directions-stage[data-background-direction="48"] .background-directions-color {
  background-image:
    radial-gradient(circle at 18% 60%, rgb(255 189 96 / 34%), transparent 34%),
    radial-gradient(circle at 52% 22%, rgb(195 136 255 / 25%), transparent 34%),
    radial-gradient(circle at 82% 62%, rgb(87 218 231 / 38%), transparent 36%),
    linear-gradient(#eef0ef, #eef0ef);
}

.background-directions-stage[data-background-direction="49"] .background-directions-color {
  background-image:
    radial-gradient(circle at 18% 42%, rgb(48 118 117 / 25%), transparent 42%),
    radial-gradient(circle at 82% 55%, rgb(177 134 73 / 12%), transparent 44%),
    linear-gradient(#102025, #102025);
}

.background-directions-stage[data-background-direction="50"] .background-directions-color {
  background-color: #e8d8bd;
  background-image:
    repeating-linear-gradient(90deg, rgb(83 51 28 / 3%) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 42%, rgb(255 249 231 / 76%), transparent 52%);
}

.background-directions-stage[data-background-direction="51"] .background-directions-color {
  background-image:
    radial-gradient(circle at 26% 62%, rgb(148 205 221 / 20%), transparent 42%),
    radial-gradient(circle at 68% 36%, rgb(255 255 255 / 45%), transparent 38%),
    linear-gradient(#edf3f5, #edf3f5);
}

.background-directions-stage[data-background-direction="52"] .background-directions-color {
  background-image:
    linear-gradient(90deg, transparent 0 17.7%, rgb(167 33 32 / 72%) 17.7% 18.05%, transparent 18.05%),
    radial-gradient(circle at 64% 48%, rgb(175 38 38 / 14%), transparent 38%),
    linear-gradient(#f1eee8, #f1eee8);
}

.background-directions-stage[data-background-direction="53"] .background-directions-color {
  background-image:
    radial-gradient(circle at 38% 38%, rgb(255 255 255 / 48%), transparent 38%),
    radial-gradient(circle at 68% 64%, rgb(35 38 37 / 16%), transparent 45%),
    linear-gradient(#d7d7d2, #d7d7d2);
}

.background-directions-stage[data-background-direction="54"] .background-directions-color {
  background-image:
    radial-gradient(circle at 46% 44%, rgb(195 141 53 / 32%), transparent 38%),
    radial-gradient(circle at 76% 62%, rgb(86 52 23 / 18%), transparent 44%),
    linear-gradient(#0d0b09, #0d0b09);
}

.background-directions-stage[data-background-direction="55"] .background-directions-color {
  background-image:
    radial-gradient(circle at 25% 50%, rgb(255 213 221 / 36%), transparent 34%),
    radial-gradient(circle at 72% 42%, rgb(191 228 230 / 42%), transparent 38%),
    linear-gradient(120deg, #f8f5f2, #e8e9ec);
}

.background-directions-stage[data-background-direction="56"] .background-directions-color {
  background-color: #ece9e1;
  background-image: radial-gradient(rgb(17 17 17 / 10%) 0.7px, transparent 0.7px);
  background-size: 7px 7px;
}

.background-directions-stage[data-background-direction="57"] .background-directions-color {
  background-image: linear-gradient(90deg, #eee1c9 0 50%, #dce4e7 50% 100%);
}

.background-directions-stage[data-background-direction="58"] .background-directions-color {
  background-image: radial-gradient(ellipse at 50% 48%, #f2f0e9 0 18%, #8b8a85 35%, #161717 72%);
}

.background-directions-stage[data-background-direction="59"] .background-directions-color {
  background-image: linear-gradient(106deg, #f2e4cb 0 39%, #f7f6f2 39.2% 56%, #d8dfe1 56.2% 100%);
}

/* ASYMMETRIC OPAL STUDIES · composition 49 refined with palettes 02–06 */
.background-directions-stage[data-background-direction="60"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 17% 62%, rgb(209 181 244 / 64%), transparent 36%),
    radial-gradient(ellipse at 54% 19%, rgb(178 211 244 / 52%), transparent 34%),
    radial-gradient(ellipse at 83% 65%, rgb(145 227 232 / 62%), transparent 39%),
    linear-gradient(#f1f3f7, #f1f3f7);
}

.background-directions-stage[data-background-direction="61"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 23% 28%, rgb(247 190 214 / 64%), transparent 37%),
    radial-gradient(ellipse at 74% 21%, rgb(205 181 241 / 48%), transparent 32%),
    radial-gradient(ellipse at 67% 72%, rgb(157 218 239 / 66%), transparent 42%),
    linear-gradient(#f5f1f5, #f5f1f5);
}

.background-directions-stage[data-background-direction="62"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 14% 70%, rgb(138 207 239 / 66%), transparent 36%),
    radial-gradient(ellipse at 48% 18%, rgb(210 194 244 / 54%), transparent 34%),
    radial-gradient(ellipse at 87% 54%, rgb(176 222 241 / 70%), transparent 41%),
    radial-gradient(ellipse at 52% 63%, rgb(255 255 255 / 58%), transparent 28%),
    linear-gradient(#eaf2f6, #eaf2f6);
}

.background-directions-stage[data-background-direction="63"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 18% 42%, rgb(211 177 244 / 68%), transparent 38%),
    radial-gradient(ellipse at 52% 76%, rgb(173 205 241 / 55%), transparent 37%),
    radial-gradient(ellipse at 84% 26%, rgb(153 225 233 / 57%), transparent 35%),
    linear-gradient(#f0eef7, #f0eef7);
}

.background-directions-stage[data-background-direction="64"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 28% 10%, rgb(217 188 242 / 64%), transparent 35%),
    radial-gradient(ellipse at 73% 33%, rgb(179 205 243 / 58%), transparent 37%),
    radial-gradient(ellipse at 34% 84%, rgb(145 225 231 / 64%), transparent 40%),
    radial-gradient(ellipse at 82% 82%, rgb(242 201 221 / 36%), transparent 31%),
    linear-gradient(#eef3f5, #eef3f5);
}

.background-directions-stage[data-background-direction="65"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 9% 43%, rgb(229 188 229 / 58%), transparent 35%),
    radial-gradient(ellipse at 49% 58%, rgb(166 216 240 / 65%), transparent 43%),
    radial-gradient(ellipse at 89% 35%, rgb(203 187 243 / 54%), transparent 35%),
    linear-gradient(#f4f1f6, #f4f1f6);
}

.background-directions-stage[data-background-direction="66"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 20% 72%, rgb(184 203 243 / 65%), transparent 39%),
    radial-gradient(ellipse at 58% 24%, rgb(246 193 217 / 48%), transparent 34%),
    radial-gradient(ellipse at 87% 65%, rgb(151 226 232 / 58%), transparent 38%),
    linear-gradient(#eff2f7, #eff2f7);
}

.background-directions-stage[data-background-direction="67"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 16% 22%, rgb(169 216 241 / 68%), transparent 37%),
    radial-gradient(ellipse at 59% 64%, rgb(215 181 243 / 63%), transparent 43%),
    radial-gradient(ellipse at 91% 28%, rgb(185 225 239 / 50%), transparent 33%),
    linear-gradient(#edf2f7, #edf2f7);
}

.background-directions-stage[data-background-direction="68"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 12% 57%, rgb(142 226 232 / 65%), transparent 41%),
    radial-gradient(ellipse at 60% 16%, rgb(242 192 216 / 44%), transparent 31%),
    radial-gradient(ellipse at 84% 69%, rgb(202 181 243 / 59%), transparent 37%),
    radial-gradient(ellipse at 48% 54%, rgb(255 255 255 / 52%), transparent 25%),
    linear-gradient(#edf5f5, #edf5f5);
}

.background-directions-stage[data-background-direction="69"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 6% 74%, rgb(136 204 239 / 62%), transparent 38%),
    radial-gradient(ellipse at 42% 39%, rgb(255 255 255 / 74%), transparent 31%),
    radial-gradient(ellipse at 79% 19%, rgb(208 180 243 / 61%), transparent 36%),
    radial-gradient(ellipse at 93% 74%, rgb(166 218 239 / 52%), transparent 31%),
    linear-gradient(#e8f1f6, #e8f1f6);
}

.background-directions-stage[data-background-direction="70"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 18% 25%, rgb(246 190 216 / 58%), transparent 38%),
    radial-gradient(ellipse at 56% 61%, rgb(162 222 235 / 60%), transparent 41%),
    radial-gradient(ellipse at 89% 37%, rgb(210 184 242 / 54%), transparent 35%),
    linear-gradient(#f4f1f6, #f4f1f6);
}

.background-directions-stage[data-background-direction="71"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 5% 56%, rgb(210 179 242 / 62%), transparent 40%),
    radial-gradient(ellipse at 48% 18%, rgb(188 205 243 / 50%), transparent 34%),
    radial-gradient(ellipse at 77% 72%, rgb(144 225 232 / 64%), transparent 41%),
    radial-gradient(ellipse at 96% 29%, rgb(235 198 222 / 38%), transparent 29%),
    linear-gradient(#f0f1f6, #f0f1f6);
}

.background-directions-stage[data-background-direction="72"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 16% 61%, rgb(180 218 242 / 48%), transparent 46%),
    radial-gradient(ellipse at 53% 18%, rgb(229 190 235 / 46%), transparent 41%),
    radial-gradient(ellipse at 85% 67%, rgb(159 227 232 / 48%), transparent 47%),
    radial-gradient(ellipse at 48% 64%, rgb(247 199 219 / 34%), transparent 36%),
    linear-gradient(#f4f4f6, #f4f4f6);
}

.background-directions-stage[data-background-direction="73"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 21% 73%, rgb(137 205 241 / 68%), transparent 39%),
    radial-gradient(ellipse at 48% 16%, rgb(198 217 244 / 46%), transparent 31%),
    radial-gradient(ellipse at 84% 47%, rgb(214 181 243 / 63%), transparent 40%),
    linear-gradient(#eaf1f7, #eaf1f7);
}

.background-directions-stage[data-background-direction="74"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 12% 36%, rgb(255 255 255 / 82%), transparent 35%),
    radial-gradient(ellipse at 47% 73%, rgb(178 211 242 / 58%), transparent 40%),
    radial-gradient(ellipse at 83% 24%, rgb(208 178 242 / 62%), transparent 38%),
    radial-gradient(ellipse at 92% 78%, rgb(150 220 234 / 40%), transparent 31%),
    linear-gradient(#edf1f6, #edf1f6);
}

.background-directions-stage[data-background-direction="75"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 14% 67%, rgb(244 193 218 / 53%), transparent 40%),
    radial-gradient(ellipse at 48% 17%, rgb(205 180 242 / 55%), transparent 36%),
    radial-gradient(ellipse at 84% 62%, rgb(143 226 232 / 58%), transparent 40%),
    radial-gradient(ellipse at 55% 64%, rgb(171 211 242 / 38%), transparent 32%),
    linear-gradient(#f2f2f6, #f2f2f6);
}

.background-directions-stage[data-background-direction="76"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 8% 28%, rgb(171 217 241 / 54%), transparent 34%),
    radial-gradient(ellipse at 41% 73%, rgb(244 191 217 / 46%), transparent 36%),
    radial-gradient(ellipse at 78% 18%, rgb(207 179 243 / 53%), transparent 34%),
    radial-gradient(ellipse at 92% 72%, rgb(145 225 231 / 56%), transparent 35%),
    linear-gradient(#f7f7f7, #f7f7f7);
}

.background-directions-stage[data-background-direction="77"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 14% 63%, rgb(153 213 241 / 62%), transparent 42%),
    radial-gradient(ellipse at 56% 18%, rgb(225 191 234 / 50%), transparent 35%),
    radial-gradient(ellipse at 86% 67%, rgb(198 177 241 / 60%), transparent 41%),
    linear-gradient(#eef2f6, #eef2f6);
}

.background-directions-stage[data-background-direction="78"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 13% 46%, rgb(151 224 232 / 55%), transparent 37%),
    radial-gradient(ellipse at 48% 13%, rgb(244 194 217 / 48%), transparent 32%),
    radial-gradient(ellipse at 83% 56%, rgb(205 179 242 / 57%), transparent 39%),
    radial-gradient(ellipse at 44% 81%, rgb(174 214 241 / 43%), transparent 34%),
    linear-gradient(#f1f4f6, #f1f4f6);
}

.background-directions-stage[data-background-direction="79"] .background-directions-color {
  background-image:
    radial-gradient(ellipse at 18% 60%, rgb(181 211 244 / 64%), transparent 35%),
    radial-gradient(ellipse at 52% 22%, rgb(213 180 244 / 58%), transparent 34%),
    radial-gradient(ellipse at 82% 62%, rgb(145 225 232 / 66%), transparent 37%),
    radial-gradient(ellipse at 56% 78%, rgb(246 193 218 / 38%), transparent 29%),
    linear-gradient(#eef2f5, #eef2f5);
}

@keyframes background-directions-drift {
  0% {
    background-position: 42% 48%;
    transform: scale(1.01);
  }
  100% {
    background-position: 58% 52%;
    transform: scale(1.06);
  }
}

@media (max-width: 48rem) {
  .background-directions {
    height: 290vh;
    height: 290svh;
  }

  .background-directions-source span:first-child {
    font-size: clamp(4rem, 22.5vw, 6.3rem);
    letter-spacing: -0.105em;
  }

  .background-directions-statement {
    font-size: clamp(1.35rem, 7.1vw, 2rem);
  }

  .background-directions-kicker {
    top: 18vh;
    font-size: 0.48rem;
  }

  .background-directions-scroll {
    display: none;
  }

  .background-directions-controls {
    right: 0.8rem;
    bottom: 0.7rem;
    left: 0.8rem;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  }

  .background-directions-panel {
    right: 0.8rem;
    bottom: 4.8rem;
    left: 0.8rem;
    width: auto;
    grid-template-columns: auto 1fr 1fr;
  }

  .background-directions-product figcaption {
    right: 0.7rem;
    bottom: 0.8rem;
    left: 0.7rem;
    font-size: 0.39rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .background-directions-color {
    animation: none;
  }
}