/* ============================================================================
   board3d.css — "circuit board assembling itself" 3D animation
   LuxuryLifts · Reverse-Engineering page eye-candy.
   Pure CSS 3D transforms + SVG (no libraries). One 18s master cycle:
     traces draw → pads/silkscreen appear → components drop in waves →
     current flows → board dissolves upward → rebuilds. Seamless loop.
   Brand tokens mirror landing.css (--brass #8A6A24, gold #c9a24a,
   brass-grad #E3C572/#B68F3C/#C7A24A, dark panels #101218/#0a0c10).
   Reduced motion: everything static in the fully-assembled state.
   ========================================================================== */

.b3d{
  /* brand tokens — inherit site vars when present, hard fallbacks otherwise */
  --b3d-gold: #c9a24a;                                /* matches .circuit-bg traces */
  --b3d-gold-hi: #f0d488;                             /* matches .flow current dots */
  --b3d-gold-soft: #E7CB78;                           /* matches .indicator text */
  --b3d-brass: var(--brass, #8A6A24);
  --b3d-grad: var(--brass-grad, linear-gradient(135deg,#E3C572 0%,#B68F3C 55%,#C7A24A 100%));
  --b3d-metal: var(--metal, linear-gradient(100deg,#cfd3da 0%,#eef1f5 16%,#c2c7d0 36%,#e9ecf1 58%,#cbd0d8 80%,#eef1f5 100%));
  --b3d-ink: #101218;                                 /* dark panel, as .indicator */
  --b3d-edge: #0a0c10;                                /* darker rim, as .ld-readout */
  --b3d-silk: #9aa3b1;                                /* steel/muted silkscreen */
  --bw: min(92vw, 560px);                             /* board width unit for labels */

  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 8 / 5;                                /* reserved space → no layout shift */
  display: grid;
  place-items: center;
  pointer-events: none;
  user-select: none;
}

/* soft gold ambience behind the board (same radial trick as .circuit-bg) */
.b3d::before{
  content:""; position:absolute; inset:-6% -4%;
  background:
    radial-gradient(60% 55% at 50% 58%, rgba(201,162,74,.14), transparent 70%),
    radial-gradient(40% 35% at 68% 30%, rgba(201,162,74,.08), transparent 65%);
  filter: blur(2px);
}

.b3d-scene{
  width: min(88%, 560px);
  perspective: 1150px;
  perspective-origin: 50% 34%;
}
.b3d-float{ transform-style: preserve-3d; will-change: transform;
  animation: b3dBreathe 9s ease-in-out infinite; }
.b3d-board{
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 320;
  transform-style: preserve-3d;
  transform: rotateX(54deg) rotateZ(-12deg);
  animation: b3dTiltIn 1.5s cubic-bezier(.2,.7,.2,1) both;
  will-change: transform;
}
/* board thickness + cast shadow (a dark slab 5px beneath the face) */
.b3d-board::before{
  content:""; position:absolute; inset:0; border-radius:12px;
  background: var(--b3d-edge);
  transform: translateZ(-5px);
  box-shadow: 0 34px 60px rgba(6,8,12,.55), 0 8px 22px rgba(6,8,12,.5);
}
.b3d-face{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.b3d-face text{
  font-family:'Space Grotesk','Inter',-apple-system,sans-serif;
  font-weight:600; letter-spacing:.14em; fill:var(--b3d-silk);
}

/* ── SVG board layers ─────────────────────────────────────────────────── */
.b3d-ring{ stroke:var(--b3d-brass); opacity:.22; }
.b3d-holes circle{ fill:var(--b3d-edge); stroke:rgba(201,162,74,.4); stroke-width:2; }
.b3d-fingers rect{ fill:var(--b3d-gold); opacity:.85; }

.b3d-t path{
  fill:none; stroke:var(--b3d-gold); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1 1; stroke-dashoffset:0;          /* base = fully drawn */
}
.b3d-t1 path{ animation: b3dTrace1 18s linear infinite; }
.b3d-t2 path{ animation: b3dTrace2 18s linear infinite; }
.b3d-t3 path{ animation: b3dTrace3 18s linear infinite; }

.b3d-pads{ animation: b3dPads 18s ease-in-out infinite; }
.b3d-pads .pad{ fill:var(--b3d-gold-hi); filter:drop-shadow(0 0 4px rgba(240,212,136,.85)); }
.b3d-pads .via{ fill:none; stroke:var(--b3d-gold); stroke-width:1.6; }
.b3d-pads .stub{ fill:var(--b3d-gold); }
.b3d-pads .silk{ fill:none; stroke:var(--b3d-silk); stroke-width:1; stroke-dasharray:4 4; opacity:.55; }

.b3d-flow{ fill:var(--b3d-gold-hi); animation: b3dFlow 18s linear infinite; }
.b3d-flow circle{ filter:drop-shadow(0 0 6px rgba(240,212,136,.9)); }   /* same glow as controllers page */

/* ── components (HTML divs floating above the board plane) ────────────── */
.b3d-comp{
  position:absolute; transform: translateZ(var(--h, 3px)); opacity:1;   /* base = assembled */
  border-radius:2px; box-shadow: 0 2px 7px rgba(0,0,0,.5);
  backface-visibility:hidden;
}
.b3d-da{ animation: b3dDropA 18s ease-in-out infinite; }
.b3d-db{ animation: b3dDropB 18s ease-in-out infinite; }
.b3d-dc{ animation: b3dDropC 18s ease-in-out infinite; }
.b3d-dd{ animation: b3dDropD 18s ease-in-out infinite; }
.b3d-de{ animation: b3dDropE 18s ease-in-out infinite; }

/* microcontroller — QFP, laser-etched brand mark */
.b3d-mcu{
  left:35%; top:36.875%; width:13.333%; height:20%; --h:9px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2%;
  background:
    radial-gradient(circle at 13% 15%, rgba(240,212,136,.8) 0 4.5%, transparent 6%),
    linear-gradient(145deg,#2a2e38,#161920 58%,#101218);
  border-radius:8%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 10px rgba(0,0,0,.55);
}
.b3d-mcu span{
  font:700 clamp(8px, calc(var(--bw) * .028), 15px)/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.08em; color:var(--b3d-gold-soft);
}
.b3d-mcu i{
  font:600 clamp(5px, calc(var(--bw) * .015), 9px)/1 'Inter',sans-serif;
  font-style:normal; letter-spacing:.22em; color:var(--b3d-silk);
}

/* RS-485 transceiver — SOIC-8 */
.b3d-soic{
  left:64.167%; top:45.3125%; width:9.167%; height:9.375%; --h:6px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(150deg,#272b34,#14161b 65%);
  border-radius:10%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 8px rgba(0,0,0,.5);
}
.b3d-soic span{
  font:700 clamp(6px, calc(var(--bw) * .018), 11px)/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.12em; color:var(--b3d-gold-soft); opacity:.9;
}

/* DB9 serial connector — brushed metal shell, 9 pin holes, 2 screw posts */
.b3d-db9{
  left:89.583%; top:35%; width:8.75%; height:30%; --h:8px;
  background: var(--b3d-metal);
  border-radius:14% / 5%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset 0 -2px 5px rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.55);
}
.b3d-db9::before{
  content:""; position:absolute; inset:15% 20% 15% 20%;
  border-radius:30% / 10%;
  background:
    radial-gradient(circle at 36% 12%, #0d1015 0 5.5%, transparent 7%),
    radial-gradient(circle at 36% 31%, #0d1015 0 5.5%, transparent 7%),
    radial-gradient(circle at 36% 50%, #0d1015 0 5.5%, transparent 7%),
    radial-gradient(circle at 36% 69%, #0d1015 0 5.5%, transparent 7%),
    radial-gradient(circle at 36% 88%, #0d1015 0 5.5%, transparent 7%),
    radial-gradient(circle at 66% 21%, #0d1015 0 5.5%, transparent 7%),
    radial-gradient(circle at 66% 40%, #0d1015 0 5.5%, transparent 7%),
    radial-gradient(circle at 66% 60%, #0d1015 0 5.5%, transparent 7%),
    radial-gradient(circle at 66% 79%, #0d1015 0 5.5%, transparent 7%),
    linear-gradient(160deg,#3a4049,#22262e);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.b3d-db9::after{ /* jack screws, brass */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(22% 4.2% at 50% 6%, #E3C572 0 62%, #8A6A24 78%, rgba(0,0,0,0) 100%),
    radial-gradient(22% 4.2% at 50% 94%, #E3C572 0 62%, #8A6A24 78%, rgba(0,0,0,0) 100%);
}

/* 2×5 SWD pin header — gold pins in a dark shroud */
.b3d-hdr{
  left:27.083%; top:13.75%; width:12.5%; height:5%; --h:7px;
  background:
    repeating-linear-gradient(90deg, transparent 0 4%, #E3C572 4% 10%, #B68F3C 10% 12%, transparent 12% 20%),
    linear-gradient(180deg,#1d2129,#101218);
  border-radius:8%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 7px rgba(0,0,0,.5);
}

/* electrolytic capacitors — top view: sleeve ring + vent cross */
.b3d-cap{
  border-radius:50%; --h:11px;
  background: radial-gradient(circle at 32% 28%, #4c525e, #1a1d24 60%, #0d0f14 100%);
  box-shadow: inset 0 0 0 2px rgba(201,162,74,.42), inset 0 2px 4px rgba(255,255,255,.1), 0 3px 9px rgba(0,0,0,.55);
}
.b3d-cap::after{
  content:""; position:absolute; inset:20%; border-radius:50%;
  background:
    linear-gradient(0deg, transparent 45%, rgba(0,0,0,.55) 45% 55%, transparent 55%),
    linear-gradient(90deg, transparent 45%, rgba(0,0,0,.55) 45% 55%, transparent 55%);
}
.b3d-cap1{ left:77.5%; top:11.25%; width:6.667%; height:10%; }
.b3d-cap2{ left:70%; top:20%; width:5.417%; height:8.125%; --h:9px; }

/* crystal — metal capsule */
.b3d-xtal{
  left:50%; top:58.125%; width:5.417%; height:3.75%; --h:5px;
  background: var(--b3d-metal);
  border-radius:999px;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.5);
}

/* SMD passives — gold end caps, dark body (resistor) / tan body (cap) */
.b3d-r{
  width:3.75%; height:2.8125%; --h:3px; border-radius:12%;
  background: linear-gradient(90deg,#E3C572 0 17%, #2b2f38 17% 83%, #E3C572 83%);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.b3d-rc{ background: linear-gradient(90deg,#E3C572 0 17%, #6e5a33 17% 83%, #E3C572 83%); }
.b3d-p1{ left:19.167%; top:66.875%; }
.b3d-p2{ left:52.917%; top:27.5%; }
.b3d-p3{ left:55.833%; top:70%; }
.b3d-p4{ left:23.333%; top:73.75%; }
.b3d-p5{ left:62.5%; top:16.875%; }

/* ── master 18s cycle ─────────────────────────────────────────────────────
   0–28%  traces route in (3 staggered groups)
   26–33% pads + silkscreen fade up
   32–66% components drop in five waves (A→E), tiny settle bounce
   66–90% current flows along live traces, pads pulse
   92–97% everything lifts away / traces fade  → 100% bare board again  */

@keyframes b3dTiltIn{
  from{ transform: rotateX(14deg) rotateZ(-2deg) translateY(26px); opacity:0; }
  to  { transform: rotateX(54deg) rotateZ(-12deg); opacity:1; }
}
@keyframes b3dBreathe{
  0%,100%{ transform: rotateX(0deg) rotateZ(0deg) translateY(0); }
  50%    { transform: rotateX(3deg) rotateZ(1.6deg) translateY(-5px); }
}

@keyframes b3dTrace1{
  0%      { stroke-dashoffset:1.02; opacity:1; }
  2%      { stroke-dashoffset:1.02; }
  14%     { stroke-dashoffset:0; }
  91%     { stroke-dashoffset:0; opacity:1; }
  96%,100%{ stroke-dashoffset:0; opacity:0; }
}
@keyframes b3dTrace2{
  0%,9%   { stroke-dashoffset:1.02; opacity:1; }
  21%     { stroke-dashoffset:0; }
  91%     { stroke-dashoffset:0; opacity:1; }
  96%,100%{ stroke-dashoffset:0; opacity:0; }
}
@keyframes b3dTrace3{
  0%,16%  { stroke-dashoffset:1.02; opacity:1; }
  28%     { stroke-dashoffset:0; }
  91%     { stroke-dashoffset:0; opacity:1; }
  96%,100%{ stroke-dashoffset:0; opacity:0; }
}

@keyframes b3dPads{
  0%,26%  { opacity:0; }
  33%     { opacity:1; }
  58%     { opacity:.7; }
  68%     { opacity:1; }
  78%     { opacity:.7; }
  90%     { opacity:1; }
  95%,100%{ opacity:0; }
}
@keyframes b3dFlow{
  0%,64%  { opacity:0; }
  68%     { opacity:1; }
  88%     { opacity:1; }
  92%,100%{ opacity:0; }
}

@keyframes b3dDropA{
  0%,32%  { opacity:0; transform: translateZ(calc(var(--h,3px) + 74px)); }
  34.5%   { opacity:1; }
  37%     { transform: translateZ(calc(var(--h,3px) - 2.5px)); }
  39%     { transform: translateZ(var(--h,3px)); }
  90%     { opacity:1;  transform: translateZ(var(--h,3px)); }
  95%,100%{ opacity:0; transform: translateZ(calc(var(--h,3px) + 74px)); }
}
@keyframes b3dDropB{
  0%,39%  { opacity:0; transform: translateZ(calc(var(--h,3px) + 74px)); }
  41.5%   { opacity:1; }
  44%     { transform: translateZ(calc(var(--h,3px) - 2.5px)); }
  46%     { transform: translateZ(var(--h,3px)); }
  90%     { opacity:1;  transform: translateZ(var(--h,3px)); }
  95%,100%{ opacity:0; transform: translateZ(calc(var(--h,3px) + 74px)); }
}
@keyframes b3dDropC{
  0%,46%  { opacity:0; transform: translateZ(calc(var(--h,3px) + 84px)); }
  48.5%   { opacity:1; }
  51%     { transform: translateZ(calc(var(--h,3px) - 3px)); }
  53%     { transform: translateZ(var(--h,3px)); }
  90%     { opacity:1;  transform: translateZ(var(--h,3px)); }
  95%,100%{ opacity:0; transform: translateZ(calc(var(--h,3px) + 84px)); }
}
@keyframes b3dDropD{
  0%,53%  { opacity:0; transform: translateZ(calc(var(--h,3px) + 74px)); }
  55.5%   { opacity:1; }
  58%     { transform: translateZ(calc(var(--h,3px) - 2.5px)); }
  60%     { transform: translateZ(var(--h,3px)); }
  90%     { opacity:1;  transform: translateZ(var(--h,3px)); }
  95%,100%{ opacity:0; transform: translateZ(calc(var(--h,3px) + 74px)); }
}
@keyframes b3dDropE{
  0%,60%  { opacity:0; transform: translateZ(calc(var(--h,3px) + 74px)); }
  62.5%   { opacity:1; }
  65%     { transform: translateZ(calc(var(--h,3px) - 2.5px)); }
  67%     { transform: translateZ(var(--h,3px)); }
  90%     { opacity:1;  transform: translateZ(var(--h,3px)); }
  95%,100%{ opacity:0; transform: translateZ(calc(var(--h,3px) + 74px)); }
}

/* pause everything while scrolled off-screen (class toggled by board3d.js) */
.b3d.b3d-paused *{ animation-play-state: paused !important; }

/* ── reduced motion: static, fully-assembled board ───────────────────── */
@media (prefers-reduced-motion: reduce){
  .b3d, .b3d *{ animation: none !important; }
  .b3d-flow{ display:none; }               /* SMIL current dots off */
  .b3d-board{ transform: rotateX(54deg) rotateZ(-12deg); opacity:1; }
}