/* ==========================================================================
   BUILT TO COMPOUND — CONNECTED ARC
   Persistent 4-module scene, continuous camera travel, layered glass.
   ========================================================================== */

.bdmc-section {
  --bdmc-blue: #2E8BFF;
  --bdmc-cyan: #58C9FF;
  position: relative;
  /* Overrides the sitewide `section{padding:10rem 4rem}` default, which this
     section never meant to inherit -- .bdmc-pin owns all internal spacing via
     its own padding below. Left unset, this added 160px above and below the
     pin's fixed viewport that .bdmc-pin never accounted for, which both
     wasted the entry approach as dead space and pushed .bdmc-final off the
     bottom of the screen for the whole pin duration. Height/min-height are
     the ScrollTrigger-tuned scroll distance and are untouched by this. */
  padding: 0;
  height: 380vh;
  min-height: 1200px;
  background:
    radial-gradient(circle at 50% 56%, rgba(46,139,255,.07), transparent 32%),
    radial-gradient(circle at 48% 48%, rgba(255,140,0,.085), transparent 36%),
    var(--bg, #050507);
  isolation: isolate;
}

.bdmc-pin {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  align-items: center;
  justify-items: center;
  padding: clamp(76px, 9vh, 105px) 4vw 32px;
  background: transparent;
}

.bdmc-grid-bg {
  position: absolute;
  inset: -12%;
  background-image:
    linear-gradient(rgba(255,140,0,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,139,255,.026) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(1100px) rotateX(61deg) translateY(19%);
  transform-origin: 50% 65%;
  -webkit-mask-image: radial-gradient(ellipse 76% 66% at 50% 54%, #000 30%, transparent 86%);
  mask-image: radial-gradient(ellipse 76% 66% at 50% 54%, #000 30%, transparent 86%);
  opacity: .78;
  pointer-events: none;
}

.bdmc-aurora {
  position: absolute;
  width: min(1000px, 82vw);
  height: 430px;
  left: 50%;
  top: 55%;
  transform: translate(-50%,-50%);
  background:
    radial-gradient(ellipse at 25% 50%, rgba(255,140,0,.15), transparent 42%),
    radial-gradient(ellipse at 75% 48%, rgba(46,139,255,.14), transparent 44%);
  filter: blur(52px);
  opacity: .72;
  pointer-events: none;
}

.bdmc-header {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 780px;
  padding-inline: 22px;
}

.bdmc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--amber, #FF8C00);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.bdmc-eyebrow::before,
.bdmc-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,140,0,.7));
}
.bdmc-eyebrow::after { transform: scaleX(-1); }

.bdmc-heading {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(38px, 5.4vw, 74px);
  line-height: .9;
  letter-spacing: .018em;
  color: var(--white, #F0EDE8);
  text-transform: uppercase;
  margin: 0 0 13px;
  text-wrap: balance;
}

.bdmc-intro {
  max-width: 670px;
  margin: 0 auto;
  font-family: var(--font-body, sans-serif);
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.65;
  color: rgba(240,237,232,.61);
  text-wrap: balance;
}

.bdmc-stage {
  position: relative;
  z-index: 3;
  width: min(1180px, 90vw);
  height: clamp(420px, 51vh, 510px);
  perspective: 1500px;
  transform-style: preserve-3d;
  contain: layout paint;
}

.bdmc-arc {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.bdmc-flow {
  position: absolute;
  inset: 9% 2% 6%;
  width: 96%;
  height: 85%;
  overflow: visible;
  z-index: 1;
  opacity: .88;
  pointer-events: none;
}
.bdmc-flow-base,
.bdmc-flow-live {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.bdmc-flow-base {
  stroke: rgba(255,255,255,.09);
  stroke-width: 1.4;
  stroke-dasharray: 4 10;
}
.bdmc-flow-live {
  stroke: url(#bdmc-flow-gradient);
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 12px rgba(255,140,0,.42)) drop-shadow(0 0 22px rgba(46,139,255,.2));
  will-change: stroke-dashoffset, opacity;
}

.bdmc-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 264px;
  height: 264px;
  transform: translate(-50%,-50%) translateZ(-150px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 48% 45%, rgba(255,255,255,.12), transparent 20%),
    radial-gradient(circle, rgba(255,140,0,.34), rgba(46,139,255,.14) 46%, transparent 72%);
  border: 1px solid rgba(255,140,0,.46);
  box-shadow:
    0 0 0 18px rgba(255,140,0,.03),
    0 0 90px rgba(255,140,0,.26),
    0 0 150px rgba(46,139,255,.14);
  will-change: transform, opacity;
}

.bdmc-core::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1px solid rgba(111,216,255,.36);
  box-shadow: 0 0 40px rgba(46,139,255,.2) inset;
}

.bdmc-core-ring,
.bdmc-core-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.bdmc-core-ring--one {
  width: 82%;
  height: 82%;
  border: 1px dashed rgba(255,140,0,.42);
  animation: bdmcSpin 24s linear infinite;
}
.bdmc-core-ring--two {
  width: 56%;
  height: 56%;
  border: 1px solid rgba(111,216,255,.38);
  animation: bdmcSpinReverse 17s linear infinite;
}
.bdmc-core-dot {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 35% 30%, #fff, #FFC268 32%, #FF8C00 64%, #2E8BFF);
  box-shadow: 0 0 24px rgba(255,140,0,.85), 0 0 46px rgba(46,139,255,.4);
}

@keyframes bdmcSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes bdmcSpinReverse { to { transform: translate(-50%,-50%) rotate(-360deg); } }

.bdmc-card {
  --bdm-spot-x: 50%;
  --bdm-spot-y: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(350px, 31vw, 420px);
  min-height: 232px;
  padding: 25px 26px 23px;
  border-radius: 15px;
  color: var(--white, #F0EDE8);
  border: 1px solid rgba(255,255,255,.1);
  border-top: 2px solid color-mix(in srgb, var(--card-accent) 70%, transparent);
  background:
    radial-gradient(circle at var(--bdm-spot-x) var(--bdm-spot-y), color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 48%),
    linear-gradient(148deg, rgba(255,255,255,.08), rgba(13,15,26,.76) 38%, rgba(6,7,12,.95) 75%);
  box-shadow:
    0 10px 24px rgba(0,0,0,.32),
    0 30px 78px rgba(0,0,0,.4),
    0 0 46px -18px color-mix(in srgb, var(--card-accent) 55%, transparent),
    0 1px 0 rgba(255,255,255,.09) inset;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  contain: layout paint;
  pointer-events: auto;
}

.bdmc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(105deg, color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 32%);
  opacity: .58;
  pointer-events: none;
}

.bdmc-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -18px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-accent) 25%, transparent);
  filter: blur(18px);
  opacity: .12;
  pointer-events: none;
}

.bdmc-card-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  border: 1px solid color-mix(in srgb, var(--card-accent) 78%, transparent);
  box-shadow:
    0 0 56px color-mix(in srgb, var(--card-accent) 30%, transparent),
    0 0 0 1px rgba(255,255,255,.06) inset;
  will-change: opacity;
}

.bdmc-card-index,
.bdmc-card-tag {
  display: block;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
}
.bdmc-card-index {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .13em;
  color: var(--card-accent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 55%, transparent);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 8px;
}
.bdmc-card-tag {
  font-size: 10px;
  letter-spacing: .23em;
  color: rgba(240,237,232,.46);
  margin-bottom: 11px;
}
.bdmc-card-title {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(30px, 3vw, 38px);
  line-height: .95;
  letter-spacing: .035em;
  color: var(--white, #F0EDE8);
}
.bdmc-card-copy {
  position: relative;
  z-index: 1;
  max-width: 47ch;
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-size: 13px;
  line-height: 1.62;
  color: rgba(240,237,232,.63);
  text-align: left;
}

.bdmc-labels {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  z-index: 8;
  pointer-events: none;
}
.bdmc-label {
  justify-self: center;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(240,237,232,.38);
  transition: color .2s;
}
.bdmc-label-num { margin-right: 5px; color: var(--label-accent, var(--amber)); }
.bdmc-label--site { --label-accent:#FF8C00; }
.bdmc-label--ads { --label-accent:#FFA500; }
.bdmc-label--seo { --label-accent:#2E8BFF; }
.bdmc-label--growth { --label-accent:#FF6B00; }

.bdmc-final {
  position: relative;
  z-index: 10;
  min-height: 26px;
  opacity: 0;
  transform: translateY(10px);
  text-align: center;
  will-change: transform, opacity;
}
.bdmc-final-line {
  font-family: var(--font-mono, monospace);
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--amber, #FF8C00);
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(255,140,0,.35);
}

@media (max-width: 1024px) and (min-width: 769px) {
  .bdmc-stage { width: 94vw; }
  .bdmc-card { width: min(390px, 40vw); }
}

@media (max-width: 768px) {
  .bdmc-section {
    height: auto;
    min-height: 0;
    padding: 72px 0;
  }
  .bdmc-pin {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding: 0 20px;
    overflow: visible;
  }
  .bdmc-grid-bg { inset: 0; transform: none; opacity: .35; }
  .bdmc-aurora { width: 100%; height: 60%; top: 50%; filter: blur(70px); opacity: .40; }
  .bdmc-header { padding: 0; }
  .bdmc-heading { font-size: clamp(36px, 12vw, 56px); }
  .bdmc-intro { font-size: 14px; max-width: 42ch; }
  .bdmc-stage { width: 100%; height: auto; perspective: none; contain: none; }
  .bdmc-flow,
  .bdmc-core,
  .bdmc-labels { display: none; }
  .bdmc-arc {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .bdmc-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 520px;
    min-height: 0;
    margin: 0 auto;
    transform: none !important;
    opacity: 1 !important;
    backdrop-filter: blur(8px);
  }
  .bdmc-card::after { opacity: .08; }
  .bdmc-card-glow { opacity: .22 !important; }
  .bdmc-final { opacity: 1 !important; transform: none !important; margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .bdmc-section {
    height: auto;
    min-height: 0;
    padding: 72px 0;
  }
  .bdmc-pin {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding: 0 20px;
    overflow: visible;
  }
  .bdmc-core-ring { animation: none !important; }
  .bdmc-flow,
  .bdmc-core,
  .bdmc-labels { display: none; }
  .bdmc-stage { width: 100%; height: auto; perspective: none; contain: none; }
  .bdmc-arc { position: relative; inset: auto; display: flex; flex-direction: column; gap: 16px; }
  .bdmc-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    max-width: 520px;
    min-height: 0;
    margin: 0 auto;
    transform: none !important;
    opacity: 1 !important;
  }
  .bdmc-card-glow { opacity: .18 !important; }
  .bdmc-final { opacity: 1 !important; transform: none !important; }
}