/* Blueprint layer (2026-10-31): drafting grid in the hero, dimension lines on headings and
   cards, corner brackets on hover, ink-in reveal. Decoration only; loads after site.css.
   :is(x, #_#_#_) matches site.css's own specificity trick. JS only adds classes and an SVG. */
:root {
  --bp-ink: 15, 23, 42;             /* navy, as --color-primary */
  --bp-gold: 202, 138, 4;           /* as --color-accent-hover */
  --bp-line: rgba(var(--bp-ink), .28);
  --bp-ease: cubic-bezier(.2, .8, .2, 1);
  --bp-arrow-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M8 1L1 4.5L8 8M.5 0v9' fill='none' stroke='%23ca8a04'/%3E%3C/svg%3E");
  --bp-arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M1 1l7 3.5L1 8M8.5 0v9' fill='none' stroke='%23ca8a04'/%3E%3C/svg%3E");
}

/* ---- Hero: self-drawing drafting grid + cursor crosshair ---- */
.bp-hero > .container { position: relative; z-index: 2; }
.bp-grid, .bp-cross { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.bp-grid { width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(120% 90% at 60% 40%, #000 35%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 60% 40%, #000 35%, transparent 85%); }
.bp-grid line { stroke: rgba(var(--bp-ink), .07); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: bp-draw 1.6s var(--bp-ease) forwards; animation-delay: var(--d, 0s); }
.bp-grid line.bp-major { stroke: rgba(var(--bp-ink), .13); }
.bp-grid line.bp-gold { stroke: rgba(var(--bp-gold), .45); }
.bp-cross { overflow: hidden; opacity: 0; transition: opacity .3s ease; }
.bp-hero:hover .bp-cross { opacity: 1; }
.bp-cross i { position: absolute; left: 0; top: 0; background: rgba(var(--bp-gold), .38); will-change: transform; }
.bp-cross .bp-x { width: 100%; height: 1px; transform: translateY(var(--cy, -10px)); }
.bp-cross .bp-y { width: 1px; height: 100%; transform: translateX(var(--cx, -10px)); }
.bp-cross .bp-o { width: 13px; height: 13px; background: none; border: 1px solid rgba(var(--bp-gold), .7);
  border-radius: 50%; transform: translate(calc(var(--cx, -20px) - 6px), calc(var(--cy, -20px) - 6px)); }

/* The stats card is drawn as a framed detail: fixed corner brackets */
.hero-stats-card { position: relative; }
.hero-stats-card::before { content: ""; position: absolute; inset: -7px; pointer-events: none; opacity: .9; }

/* ---- Dimension lines under section headings ---- */
.section-title::after {
  content: ""; display: block; width: min(240px, 70%); height: 9px; margin: .9rem 0 0;
  background: var(--bp-arrow-l) left center / 9px 9px no-repeat, var(--bp-arrow-r) right center / 9px 9px no-repeat,
    linear-gradient(rgba(var(--bp-gold), .8), rgba(var(--bp-gold), .8)) center / calc(100% - 4px) 1px no-repeat;
  transform-origin: center; transition: transform .9s var(--bp-ease);
}
/* Centred only where the heading text itself is centred (JS adds .bp-c), so it never floats over left-aligned text */
.section-title.bp-c::after { margin-inline: auto; }

/* ---- Cards: dimension line above, brackets on hover, drafting-paper lift ---- */
:is(.bg-card-hover, .project-card, #_#_#_) { position: relative; }
:is(.bg-card-hover, #_#_#_)::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: -13px; height: 9px; pointer-events: none; opacity: .55;
  background: var(--bp-arrow-l) left center / 9px 9px no-repeat, var(--bp-arrow-r) right center / 9px 9px no-repeat,
    linear-gradient(var(--bp-line), var(--bp-line)) center / calc(100% - 4px) 1px no-repeat;
}
/* 8 short strokes = 4 corner brackets */
.hero-stats-card::before, :is(.bg-card-hover, .project-card, #_#_#_)::before {
  --c: rgba(var(--bp-gold), .9); --l: 16px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) left top / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) right top / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) left bottom / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) right bottom / 1.5px var(--l);
  background-repeat: no-repeat;
}
:is(.bg-card-hover, .project-card, #_#_#_)::before {
  content: ""; position: absolute; inset: 6px; z-index: 3; pointer-events: none; border-radius: 4px;
  opacity: 0; transform: scale(1.06); transition: opacity .18s ease, transform .28s cubic-bezier(.3, 1.6, .5, 1);
}
@media (hover: hover) and (pointer: fine) {
  :is(.bg-card-hover, .project-card, #_#_#_) { transition: transform .35s var(--bp-ease), box-shadow .35s var(--bp-ease), border-color .2s ease; }
  :is(.bg-card-hover, .project-card, #_#_#_):hover {
    transform: translateY(-5px);
    border-color: rgba(var(--bp-ink), .22) !important;
    box-shadow: 6px 6px 0 rgba(var(--bp-ink), .06), 0 1px 0 rgba(var(--bp-ink), .08), 0 22px 34px -22px rgba(var(--bp-ink), .45) !important;
    background-image: linear-gradient(rgba(var(--bp-ink), .028) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--bp-ink), .028) 1px, transparent 1px);
    background-size: 22px 22px;
  }
  :is(.bg-card-hover, .project-card, #_#_#_):hover::before { opacity: 1; transform: none; }
}

/* ---- Ink-in reveal (JS sets .bp-ink only on elements still below the fold) ---- */
.bp-trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.bp-trace rect { fill: none; stroke: rgba(var(--bp-ink), .55); stroke-width: 1.2; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.bp-ink { background-color: transparent !important; box-shadow: none !important; border-color: transparent !important; }
.bp-ink > :not(.bp-trace) { opacity: 0; }
.bp-ink.bp-drawn .bp-trace rect { stroke-dashoffset: 0; transition: stroke-dashoffset .75s var(--bp-ease); }
.bp-fill { transition: background-color .5s ease, box-shadow .6s ease, border-color .5s ease; }
.bp-fill > * { transition: opacity .55s ease .05s; }
.bp-dim.section-title::after { transform: scaleX(0); }
.bp-dim.bp-on.section-title::after { transform: none; }

@keyframes bp-draw { to { stroke-dashoffset: 0; } }

/* No motion at all, site-wide, when the visitor asks for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bp-grid line { stroke-dashoffset: 0; }
  .bp-cross { display: none; }
  .bp-ink > :not(.bp-trace) { opacity: 1; }
  .bp-trace { display: none; }
  .bp-dim.section-title::after { transform: none; }
}
@media print { .bp-grid, .bp-cross, .bp-trace { display: none !important; } .bp-ink > * { opacity: 1 !important; } }