/**
 * Custom Battery Blueprint Block Styles
 * Clean container + SVG structure. Background, border, and shadow are
 * controlled by Gutenberg block settings or parent wrapper containers.
 */

.ae-custom-battery-blueprint,
.wp-block-ae-custom-battery-blueprint {
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 640;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg-canvas);
  border: 1px solid var(--border-outer);
  border-radius: 20px;
  box-shadow: var(--box-shadow);
  overflow: hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
  box-sizing: border-box;
  --p: 1; /* 1 = Exploded, 0 = Assembled */
}

/* In WordPress editor canvas */
.editor-styles-wrapper .ae-custom-battery-blueprint,
.editor-styles-wrapper .wp-block-ae-custom-battery-blueprint,
.block-editor-block-list__block[data-type="ae/custom-battery-blueprint"],
.ae-blueprint-ssr-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* THEME: LIGHT (Default crisp white canvas, clean navy blueprint) */
.ae-custom-battery-blueprint[data-theme="light"],
.wp-block-ae-custom-battery-blueprint[data-theme="light"] {
  --bg-canvas: #ffffff;
  --border-outer: #e2e8f0;
  --box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.06);
  --wire-primary: #0284c7;
  --wire-navy: #1b3562;
  --wire-subtle: rgba(2, 132, 199, 0.4);
  --wire-dashed: rgba(2, 132, 199, 0.45);
  --foil-grad-0: #f8fafc;
  --foil-grad-1: #ffffff;
  --foil-grad-2: #cbd5e1;
  --foil-side: #e2e8f0;
  --foil-front: #cbd5e1;
  --shell-fill: rgba(248, 250, 252, 0.85);
  --shell-grad-0: rgba(248, 250, 252, 0.95);
  --shell-grad-1: rgba(241, 245, 249, 0.7);
  --grid-dot: rgba(2, 132, 199, 0.1);
  --pin-bg: #ffffff;
  --pin-text: #1b3562;
  --pin-border: rgba(2, 132, 199, 0.35);
  --pin-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  --logo-color: #1b3562;
}

/* THEME: DARK (Default deep navy canvas, neon cyan isometric wires) */
.ae-custom-battery-blueprint[data-theme="dark"],
.wp-block-ae-custom-battery-blueprint[data-theme="dark"] {
  --bg-canvas: #0b1120;
  --border-outer: rgba(56, 189, 248, 0.18);
  --box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
  --wire-primary: #38bdf8;
  --wire-navy: #38bdf8;
  --wire-subtle: rgba(56, 189, 248, 0.35);
  --wire-dashed: rgba(56, 189, 248, 0.45);
  --foil-grad-0: rgba(56, 189, 248, 0.08);
  --foil-grad-1: rgba(255, 255, 255, 0.22);
  --foil-grad-2: rgba(56, 189, 248, 0.04);
  --foil-side: rgba(56, 189, 248, 0.06);
  --foil-front: rgba(56, 189, 248, 0.03);
  --shell-fill: rgba(14, 165, 233, 0.04);
  --shell-grad-0: rgba(14, 165, 233, 0.08);
  --shell-grad-1: rgba(2, 132, 199, 0.02);
  --grid-dot: rgba(56, 189, 248, 0.14);
  --pin-bg: rgba(11, 18, 33, 0.92);
  --pin-text: #38bdf8;
  --pin-border: rgba(56, 189, 248, 0.45);
  --pin-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  --logo-color: #38bdf8;
}

/* Blueprint SVG Canvas */
.wp-block-ae-custom-battery-blueprint svg.ae-blueprint-svg,
.wp-block-ae-custom-battery-blueprint svg.exploded-canvas {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Technical Strokes */
.wp-block-ae-custom-battery-blueprint .w-p {
  stroke: var(--wire-primary);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wp-block-ae-custom-battery-blueprint .w-n {
  stroke: var(--wire-navy);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wp-block-ae-custom-battery-blueprint .w-sub {
  stroke: var(--wire-subtle);
  fill: none;
  stroke-width: 0.8;
}
.wp-block-ae-custom-battery-blueprint .w-dash {
  stroke: var(--wire-dashed);
  stroke-dasharray: 4 4;
  stroke-width: 1;
}
.wp-block-ae-custom-battery-blueprint .w-gold {
  stroke: #eab308;
  fill: rgba(234, 179, 8, 0.35);
  stroke-width: 1.2;
}
.wp-block-ae-custom-battery-blueprint .w-copper {
  stroke: #d97706;
  fill: rgba(217, 119, 6, 0.25);
  stroke-width: 1.2;
}
.wp-block-ae-custom-battery-blueprint .w-pcb {
  stroke: #059669;
  fill: rgba(5, 150, 105, 0.07);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wp-block-ae-custom-battery-blueprint .w-cable-r {
  stroke: #dc2626;
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
}
.wp-block-ae-custom-battery-blueprint .w-cable-b {
  stroke: #1e293b;
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
}

/* Smooth Motion Transformations */
.wp-block-ae-custom-battery-blueprint .part {
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
  cursor: pointer;
}

.ae-custom-battery-blueprint[data-scroll-scrub="true"] .part,
.wp-block-ae-custom-battery-blueprint[data-scroll-scrub="true"] .part {
  transition: transform 0.15s ease-out, opacity 0.3s ease;
}

.wp-block-ae-custom-battery-blueprint .part:hover .w-p,
.wp-block-ae-custom-battery-blueprint .part:hover .w-n,
.wp-block-ae-custom-battery-blueprint .part:hover .w-pcb {
  stroke: #0ea5e9;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.5));
}

/* State Transformations via CSS Variable --p (0 = Assembled, 1 = Exploded) */
.ae-custom-battery-blueprint.is-assembled,
.wp-block-ae-custom-battery-blueprint.is-assembled,
.ae-custom-battery-blueprint.state-assembled,
.wp-block-ae-custom-battery-blueprint.state-assembled {
  --p: 0;
}

.wp-block-ae-custom-battery-blueprint #cell-stack-group {
  transform: translate(0, 0);
}
.wp-block-ae-custom-battery-blueprint #bms-group {
  transform: translate(calc(var(--p) * -95px), calc(var(--p) * 52px));
}
.wp-block-ae-custom-battery-blueprint #front-shell-group {
  transform: translate(calc(var(--p) * -190px), calc(var(--p) * 105px));
}
.wp-block-ae-custom-battery-blueprint #side-shell-group {
  transform: translate(calc(var(--p) * 125px), calc(var(--p) * 68px));
}
.wp-block-ae-custom-battery-blueprint #top-cover-group {
  transform: translate(0, calc(var(--p) * -85px));
}
.wp-block-ae-custom-battery-blueprint #back-chassis-group {
  transform: translate(calc(var(--p) * 105px), calc(var(--p) * -57px));
}
.wp-block-ae-custom-battery-blueprint #bottom-plate-group {
  transform: translate(0, calc(var(--p) * 60px));
}

/* Alignment Projection Guides */
.wp-block-ae-custom-battery-blueprint .proj-guides {
  opacity: calc((var(--p) - 0.2) / 0.8);
  transition: opacity 0.8s ease;
}

/* Interactive Pins */
.wp-block-ae-custom-battery-blueprint .pin {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: calc((var(--p) - 0.4) * 2);
  pointer-events: auto;
  transition: opacity 0.6s ease, transform 0.25s ease;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.ae-custom-battery-blueprint.is-assembled .pin,
.wp-block-ae-custom-battery-blueprint.is-assembled .pin,
.ae-custom-battery-blueprint.state-assembled .pin,
.wp-block-ae-custom-battery-blueprint.state-assembled .pin {
  pointer-events: none;
  opacity: 0;
}

.wp-block-ae-custom-battery-blueprint .pin-dot {
  position: relative;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-block-ae-custom-battery-blueprint .pin-circle {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
}

.wp-block-ae-custom-battery-blueprint .pin-ripple {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(239, 68, 68, 0.6);
  border-radius: 50%;
  animation: aeBlueprintRipple 2s infinite ease-out;
}

@keyframes aeBlueprintRipple {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

.wp-block-ae-custom-battery-blueprint .pin-tag {
  background: var(--pin-bg);
  border: 1px solid var(--pin-border);
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pin-text);
  white-space: nowrap;
  box-shadow: var(--pin-shadow);
  transition: all 0.2s ease;
  line-height: 1.3;
}

.wp-block-ae-custom-battery-blueprint .pin:hover .pin-tag {
  border-color: #0284c7;
  color: #0284c7;
  transform: scale(1.05);
}

/* Mobile Responsive Optimization */
@media (max-width: 768px) {
  .wp-block-ae-custom-battery-blueprint .pin-tag {
    font-size: 10px;
    padding: 3px 8px;
  }
}