/* ============================================================
   Home — Blueprint section (combined Why ACT + technical drawing)
   Absorbs the prior .why section's content. Layout:
     ┌─────────────────────────────────────┐
     │  TITLE + LEDE       │  DRAWING/PHOTO │
     │  (left col)         │  (right col)   │
     ├─────────────────────────────────────┤
     │  150+   17   5   6  (stats counter) │
     └─────────────────────────────────────┘
   Surface: dark navy-deep (paper-blueprint atmosphere). The
   drawing auto-plays on IO entry (NOT scroll-scrubbed), photo
   cross-fades at the end of the timeline, stats count up in
   parallel. All logic in initBlueprint().
   ============================================================ */

.blueprint {
  position: relative;
  background: var(--c-navy-deep);
  color: var(--c-bone);
  padding-block: var(--section-py);
  padding-inline: clamp(24px, 5vw, 96px);
  overflow: hidden;
  isolation: isolate;
}

/* Faint architect's-paper grid overlay — adds tactile texture
   without competing with the SVG or the stats. */
.blueprint::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(241, 242, 242, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 242, 242, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.7;
}

/* ============================================================
   TOP HALF — 2-column copy + stage
   ============================================================ */

.blueprint__grid {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

@media (min-width: 1024px) {
  .blueprint__grid {
    grid-template-columns: 5fr 7fr;
  }
}

/* ---- Copy column (title + lede) ---- */

.blueprint__eyebrow {
  color: rgba(241, 242, 242, 0.65);
  margin: 0 0 32px;
}
.blueprint__eyebrow::before { background: currentColor; }

.blueprint__heading {
  font-family: var(--ff-display);
  font-variation-settings: var(--fvar-display);
  /* Sized as a primary section heading now that this absorbs the
     Why ACT title. Larger than the original "Drawn first." treatment. */
  font-size: clamp(44px, 6vw, 104px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--c-bone);
  margin: 0;
}

.blueprint__sub {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: rgba(241, 242, 242, 0.82);
  max-width: 52ch;
  margin-block-start: 28px;
}

.blueprint__meta {
  font-family: var(--ff-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241, 242, 242, 0.55);
  margin-block-start: clamp(32px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.blueprint__meta-key { opacity: 0.6; }
.blueprint__meta-val {
  color: var(--c-orange);
  font-weight: 600;
  letter-spacing: 0.10em;
}
.blueprint__meta-sep {
  opacity: 0.3;
  margin-inline: 4px;
}

/* ---- Stage column (SVG + photo cross-fade) ---- */

.blueprint__stage {
  position: relative;
  aspect-ratio: 12 / 7.5;
  width: 100%;
  border: 1px solid rgba(241, 242, 242, 0.10);
  background: rgba(18, 63, 109, 0.20);
  overflow: hidden;
}

.blueprint__stage::before,
.blueprint__stage::after {
  content: '';
  position: absolute;
  inset-block-start: 12px;
  width: 16px;
  height: 16px;
  border-block-start: 1px solid rgba(241, 242, 242, 0.35);
  pointer-events: none;
  z-index: 2;
}
.blueprint__stage::before {
  inset-inline-start: 12px;
  border-inline-start: 1px solid rgba(241, 242, 242, 0.35);
}
.blueprint__stage::after {
  inset-inline-end: 12px;
  border-inline-end: 1px solid rgba(241, 242, 242, 0.35);
}

.blueprint__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(1.02);
  transform-origin: center;
  will-change: opacity, transform;
}

.blueprint__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.78) brightness(0.92);
}

.blueprint__svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.blueprint__svg [data-blueprint-path] {
  fill: none;
  stroke: rgba(241, 242, 242, 0.78);
  stroke-width: 1.25;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.blueprint__svg circle[data-blueprint-path] {
  stroke: rgba(247, 148, 29, 0.85);
  stroke-width: 1.5;
}

/* Window-light overlay rects (Enhancement B). Inserted by JS as
   siblings of the window stroke rects, screen-blended so the
   navy ground brightens to a warm interior-light hue. */
.blueprint__svg .blueprint__window-light {
  fill: var(--c-orange);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ============================================================
   STATUS LABEL (Enhancement C)
   ============================================================ */

.blueprint__status {
  position: absolute;
  inset-inline-end: 16px;
  inset-block-end: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(13, 46, 81, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(241, 242, 242, 0.18);
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241, 242, 242, 0.92);
  white-space: nowrap;
  pointer-events: none;
}

.blueprint__status-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--c-orange);
  flex-shrink: 0;
  animation: blueprint-status-pulse 2.4s ease-in-out infinite;
}

@keyframes blueprint-status-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.blueprint__status-key { opacity: 0.6; }

.blueprint__status-text {
  position: relative;
  display: inline-block;
  min-inline-size: 16ch;
}

.blueprint__status-text [data-status-variant] {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.blueprint__status-text [data-status-variant="drawing"]  { opacity: 1; }
.blueprint__status-text [data-status-variant="executed"] { opacity: 0; }

.blueprint__status[data-state="executed"] .blueprint__status-text [data-status-variant="drawing"]  { opacity: 0; }
.blueprint__status[data-state="executed"] .blueprint__status-text [data-status-variant="executed"] { opacity: 1; }

/* ============================================================
   BOTTOM HALF — STATS COUNTER ROW
   4 stats, single horizontal row on desktop, 2x2 on tablet,
   single column on mobile. Same visual register as home Why ACT
   stats so users who knew that section recognize the metric set.
   ============================================================ */

.blueprint__stats {
  position: relative;
  z-index: 1;
  list-style: none;
  padding-inline-start: 0;
  margin-block: clamp(64px, 8vw, 120px) 0;
  max-width: 1400px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 48px);
  padding-block-start: clamp(40px, 5vw, 64px);
  border-block-start: 1px solid rgba(241, 242, 242, 0.18);
}

@media (min-width: 600px) {
  .blueprint__stats { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .blueprint__stats { grid-template-columns: repeat(4, 1fr); }
}

.blueprint__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.blueprint__stat-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.blueprint__stat-number {
  font-family: var(--ff-display);
  font-variation-settings: var(--fvar-display);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-bone);
  font-variant-numeric: tabular-nums;
}

.blueprint__stat-suffix {
  font-family: var(--ff-display);
  font-variation-settings: var(--fvar-display);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 600;
  line-height: 1;
  color: var(--c-orange);
}

.blueprint__stat-label {
  font-family: var(--ff-sans);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(241, 242, 242, 0.62);
  margin-block-start: var(--sp-2);
  max-inline-size: 22ch;
}

/* ============================================================
   PRE-ANIMATION STATES (JS-only)
   Copy column cascade + stats fade-up. SVG dasharray is set
   imperatively in initBlueprint() because it depends on each
   path's intrinsic length.
   ============================================================ */

.js .blueprint__heading[data-mask] .mask__inner { transform: translateY(100%); }
.js .blueprint__eyebrow,
.js .blueprint__sub,
.js .blueprint__meta { opacity: 0; }
.js .blueprint__stat { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  .js .blueprint__heading[data-mask] .mask__inner { transform: none; }
  .js .blueprint__eyebrow,
  .js .blueprint__sub,
  .js .blueprint__meta { opacity: 1; }
  .js .blueprint__stat { opacity: 1; transform: none; }

  /* All paths fully drawn, photo visible at final state */
  .blueprint__svg [data-blueprint-path] {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .blueprint__photo { opacity: 1 !important; transform: none !important; }
  .blueprint__svg { opacity: 0.15 !important; }
  .blueprint__svg .blueprint__window-light { display: none; }

  /* Status label settles to executed under reduced-motion */
  .blueprint__status-dot { animation: none; opacity: 1; }
  .blueprint__status-text [data-status-variant] { transition: none; }
  .blueprint__status .blueprint__status-text [data-status-variant="drawing"]  { opacity: 0; }
  .blueprint__status .blueprint__status-text [data-status-variant="executed"] { opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1023px) {
  .blueprint__stage { aspect-ratio: 4 / 3; }
}

@media (max-width: 600px) {
  .blueprint__meta {
    font-size: 11px;
    gap: 6px;
  }
}