/* ==========================================================================
   BLUEPRINT SYSTEM — BlueGrid Studio's signature visual language.
   "Building Digital Architecture": an animated grid, glowing connection
   points, blueprint corner brackets, and a cursor-reactive light layer that
   ties every page together into one continuous, engineered surface.
   Loaded on every page, after style.css / page css, before the page script.
========================================================================== */

:root{
  --bp-line: rgba(0,91,252,0.09);
  --bp-line-strong: rgba(0,91,252,0.16);
  --bp-glow: rgba(0,91,252,0.35);
  --bp-cell: 64px;
}

/* ---------- BANNER BLUEPRINT GRID (homepage hero + project banners only) ----------
   Applied via class="bp-banner" on a *contained* section — the grid, glow
   blobs and cursor spotlight all live inside that one element instead of
   the whole page, so it reads as "this is where the product is being
   built" rather than a page-wide texture. */
.bp-banner{ position:relative; isolation:isolate; overflow:hidden; }
.bp-banner::before{
  content:'';
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(var(--bp-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-line) 1px, transparent 1px);
  background-size: var(--bp-cell) var(--bp-cell);
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 40%, transparent 90%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 40%, transparent 90%);
  animation: bpGridDrift 26s linear infinite;
}
@keyframes bpGridDrift{
  0%{ background-position: center top; }
  100%{ background-position: calc(50% + var(--bp-cell)) calc(0% + var(--bp-cell)); }
}
.bp-banner::after{
  content:'';
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(520px 420px at var(--mx, 20%) var(--my, 15%), var(--bp-glow), transparent 62%),
    radial-gradient(420px 360px at 85% 70%, rgba(0,91,252,0.10), transparent 60%);
  opacity:0.6;
}
@media (max-width:900px){ .bp-banner::before{ background-size: 40px 40px; } }
@media (prefers-reduced-motion: reduce){ .bp-banner::before{ animation:none; } }

/* ---------- BLUEPRINT LABEL (eyebrow upgrade) ----------
   Turns each section's eyebrow into a small architectural tag: a live
   pulsing node instead of a static tick. */
.eyebrow{ font-family: var(--mono, 'Courier New', monospace); position:relative; }
.eyebrow::after{
  content:'';
  width:6px; height:6px; border-radius:50%;
  background:var(--accent1);
  box-shadow:0 0 0 0 rgba(0,91,252,0.55);
  animation: bpPulse 2.4s ease-out infinite;
  flex-shrink:0;
}
@keyframes bpPulse{
  0%{ box-shadow:0 0 0 0 rgba(0,91,252,0.5); }
  70%{ box-shadow:0 0 0 8px rgba(0,91,252,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,91,252,0); }
}

/* ---------- BLUEPRINT CORNER BRACKETS ----------
   Applied to the studio's core "panel" components — cards read like
   floating interface modules pulled from a technical drawing rather than
   flat rectangles. Pure CSS, no extra markup required. */
.svc-card, .service-card, .project-card, .bento-card, .tech-tile,
.story-card, .facts-card, .testimonial-card, .industry-tile, .case-featured,
.value-card, .team-card{
  position:relative;
}
.svc-card::after, .service-card::after, .project-card::after, .bento-card::after,
.tech-tile::after, .story-card::after, .facts-card::after, .testimonial-card::after{
  content:'';
  position:absolute; top:10px; left:10px; right:10px; bottom:10px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(var(--bp-corner, transparent), transparent) top left / 16px 2px no-repeat,
    linear-gradient(var(--bp-corner, transparent), transparent) top left / 2px 16px no-repeat,
    linear-gradient(var(--bp-corner, transparent), transparent) top right / 16px 2px no-repeat,
    linear-gradient(var(--bp-corner, transparent), transparent) top right / 2px 16px no-repeat,
    linear-gradient(var(--bp-corner, transparent), transparent) bottom left / 16px 2px no-repeat,
    linear-gradient(var(--bp-corner, transparent), transparent) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--bp-corner, transparent), transparent) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--bp-corner, transparent), transparent) bottom right / 2px 16px no-repeat;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .4s ease;
}
.svc-card:hover::after, .service-card:hover::after, .project-card:hover::after,
.bento-card:hover::after, .tech-tile:hover::after, .story-card:hover::after,
.facts-card:hover::after, .testimonial-card:hover::after, .industry-tile:hover::after,
.case-featured:hover::after, .value-card:hover::after, .team-card:hover::after{
  --bp-corner: var(--accent1);
  opacity:1;
}

/* ---------- BLUEPRINT SECTION CONNECTORS ----------
   Small vertical thread + glowing node used between major sections so the
   page reads as one continuous build rather than stacked blocks. */
.blueprint-connector{
  display:none !important;
  gap:6px; padding:36px 0;
  color: var(--text-muted);
}
.blueprint-connector .bp-line{
  width:1px; height:46px;
  background:linear-gradient(180deg, transparent, var(--bp-line-strong) 30%, var(--bp-line-strong) 70%, transparent);
  position:relative;
  overflow:hidden;
}
.blueprint-connector .bp-line::after{
  content:'';
  position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:linear-gradient(180deg, transparent, var(--accent1), transparent);
  animation: bpLineTravel 3.2s ease-in-out infinite;
}
@keyframes bpLineTravel{
  0%{ top:-100%; }
  60%{ top:100%; }
  100%{ top:100%; }
}
.blueprint-connector .bp-node{
  width:8px; height:8px; border-radius:50%;
  background:var(--bg);
  border:1.5px solid var(--accent1);
  box-shadow:0 0 0 4px rgba(0,91,252,0.08);
}
.blueprint-connector .bp-coord{
  font-family:'Courier New', monospace;
  font-size:11px; letter-spacing:0.08em; color:var(--text-muted);
  opacity:.7;
}

/* ---------- BLUEPRINT GRADIENT BUTTON ENHANCEMENTS ----------
   Adds a light-trail sweep + soft pulsing ring on top of the existing
   gradient / magnetic / arrow-swap button system — no markup changes. */
.btn{ overflow:hidden; isolation:isolate; }
.btn::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 45%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.btn:hover::before{ transform:translateX(120%); }
.btn > *{ position:relative; z-index:1; }
.btn-ripple{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.55);
  transform:scale(0); opacity:.7;
  animation:bpRipple .6s ease-out forwards;
  pointer-events:none; z-index:0;
}
@keyframes bpRipple{ to{ transform:scale(1); opacity:0; } }

/* ---------- BLUEPRINT DIVIDER RULE (thin technical hairline) ---------- */
.blueprint-rule{
  height:1px; width:100%;
  background:repeating-linear-gradient(90deg, var(--bp-line-strong) 0 8px, transparent 8px 16px);
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .eyebrow::after, .blueprint-connector .bp-line::after{ animation:none; }
}

/* ==========================================================================
   BRAND LOADER — "Building Digital Architecture"
   0–20%   dark navy + blueprint grid fades in and draws itself
   20–40%  glowing nodes appear, thin connecting lines animate between them
   40–60%  the BlueGrid mark draws stroke-by-stroke, then fills with the
           brand gradient
   60–80%  tagline fades in
   80–100% the whole blueprint expands and fades, morphing into the page
   Total runtime ~2.6s, timed with CSS animation-delay so it plays
   automatically on paint — site-chrome.js only needs to hide/remove the
   loader once it's finished and then kick off the hero-line reveal.
========================================================================== */
.loader{
  flex-direction:column;
  gap:0;
}
.loader-grid{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(0,91,252,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,91,252,0.16) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 0%, transparent 72%);
          mask-image:radial-gradient(circle at 50% 46%, #000 0%, transparent 72%);
  opacity:0;
  animation: bpLoaderGrid 2.6s ease forwards;
}
@keyframes bpLoaderGrid{
  0%{ opacity:0; transform:scale(0.96); }
  10%{ opacity:1; transform:scale(1); }
  82%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.14); }
}
.loader-box{
  position:relative; z-index:2;
  width:170px; height:170px;
  display:flex; align-items:center; justify-content:center;
  border-radius:22px;
  border:1px solid rgba(77,141,255,0.45);
  box-shadow:0 0 40px rgba(0,91,252,0.12), inset 0 0 30px rgba(0,91,252,0.06);
  opacity:0; transform:scale(.4);
  animation: bpBoxDraw .8s cubic-bezier(.2,.8,.2,1) forwards .3s;
}
@keyframes bpBoxDraw{
  0%{ opacity:0; transform:scale(.4); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1); }
}
.loader-box::before, .loader-box::after{
  content:'';
  position:absolute; width:16px; height:16px;
  opacity:0; animation: bpBoxCorner .4s ease forwards 1s;
}
.loader-box::before{ top:-1px; left:-1px; border-top:2px solid #4d8dff; border-left:2px solid #4d8dff; border-radius:6px 0 0 0; }
.loader-box::after{ bottom:-1px; right:-1px; border-bottom:2px solid #4d8dff; border-right:2px solid #4d8dff; border-radius:0 0 6px 0; }
@keyframes bpBoxCorner{ to{ opacity:1; } }
@media (max-width:640px){ .loader-box{ width:120px; height:120px; } }
.loader-logo{
  position:relative; z-index:3;
  width:56%; height:auto;
  filter:drop-shadow(0 0 18px rgba(0,91,252,0.35));
}
.loader-logo .logo-outline{
  stroke:#4d8dff; stroke-width:2.2;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation: bpLogoDraw 1.25s ease forwards 1.1s;
}
@keyframes bpLogoDraw{
  0%{ stroke-dashoffset:1; opacity:1; }
  92%{ stroke-dashoffset:0; opacity:1; }
  100%{ stroke-dashoffset:0; opacity:0; }
}
.loader-logo .logo-fill{
  opacity:0;
  animation: bpLogoFill .5s ease forwards 1.7s;
}
@keyframes bpLogoFill{ to{ opacity:1; } }
.loader-tagline{
  position:relative; z-index:3;
  margin-top:26px;
  font-size:14px; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.78);
  font-family:'Courier New', monospace;
  opacity:0;
  animation: bpTagline 2.6s ease forwards;
}
@media (max-width:480px){
  .loader-tagline{ font-size:11.5px; letter-spacing:0.12em; padding:0 16px; text-align:center; }
}
@keyframes bpTagline{
  0%, 74%{ opacity:0; transform:translateY(8px); filter:blur(0); }
  80%{ opacity:1; transform:translateY(0); filter:blur(0); }
  92%{ opacity:1; transform:translateY(0); filter:blur(0); }
  100%{ opacity:0; transform:translateY(-6px); filter:blur(2px); }
}
.loader-logo{
  animation: bpLogoDissolve .4s ease forwards 2.2s;
}
@keyframes bpLogoDissolve{ to{ opacity:0; transform:scale(1.08); filter:blur(3px); } }

/* Fast path for return visits within the same session — near-instant,
   no grid draw / node connect / logo draw, just a quick brand flash. */
.loader--fast .loader-grid,
.loader--fast .loader-box,
.loader--fast .loader-box::before,
.loader--fast .loader-box::after,
.loader--fast .logo-outline,
.loader--fast .logo-fill,
.loader--fast .loader-tagline,
.loader--fast .loader-logo{
  animation-duration:.01s !important;
  animation-delay:0s !important;
}

@media (prefers-reduced-motion: reduce){
  .loader-grid, .loader-box, .loader-box::before, .loader-box::after, .logo-outline, .logo-fill, .loader-tagline{
    animation-duration:.01s !important; animation-delay:0s !important;
  }
}