/* ==========================================================================
   BrooksCorp corporate site — site layer
   --------------------------------------------------------------------------
   Extends the BrooksCorp Design Framework (BCDF). This file contains only
   reusable site components (hero, capability cards, reveal motion, counters,
   marquee, prose). It reads BCDF tokens exclusively — no raw hex values,
   per the design standard. Gradient stops come from the theme file.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Brand lockup (inline SVG logo)
   --------------------------------------------------------------------------- */
.bcs-lockup { display: inline-flex; align-items: center; }
.bcs-lockup svg { display: block; height: 40px; width: auto; }
.bc-footer .bcs-lockup svg { height: 44px; }
.bcs-lockup .lk-ink { fill: var(--bc-brand-600); }
.bc-logo--inverse .lk-ink,
.bcs-lockup--inverse .lk-ink { fill: var(--bc-white); }

/* ---------------------------------------------------------------------------
   2. Hero — animated gradient field + node network
   --------------------------------------------------------------------------- */
.bcs-hero {
  position: relative;
  overflow: hidden;
  background: var(--bc-brand-700);
  color: var(--bc-white);
}
.bcs-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.bcs-hero__bg .orb {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  animation: bcs-drift 16s ease-in-out infinite alternate;
}
.bcs-hero__bg .orb--a { width: 560px; height: 560px; left: -160px; top: -200px;
  background: var(--bcs-grad-c); }
.bcs-hero__bg .orb--b { width: 480px; height: 480px; right: -120px; top: 10%;
  background: var(--bcs-grad-b); opacity: .34; animation-delay: -6s; }
.bcs-hero__bg .orb--c { width: 420px; height: 420px; left: 32%; bottom: -240px;
  background: var(--bc-brand-400); animation-delay: -11s; }
@keyframes bcs-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(60px,40px,0) scale(1.12); }
}
.bcs-hero__grid {
  position: absolute; inset: 0; opacity: .16;
  background-image:
    linear-gradient(var(--bc-brand-300) 1px, transparent 1px),
    linear-gradient(90deg, var(--bc-brand-300) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 25%, transparent 75%);
}
.bcs-hero__net { position: absolute; inset: 0; width: 100%; height: 100%; }
.bcs-hero__net .net-line {
  stroke: var(--bc-accent-300); stroke-width: 1; opacity: .35;
  stroke-dasharray: 6 10; animation: bcs-dash 30s linear infinite;
}
.bcs-hero__net .net-node { fill: var(--bc-accent-300); opacity: .8; }
.bcs-hero__net .net-node--pulse { animation: bcs-pulse 3.2s ease-in-out infinite; }
@keyframes bcs-dash  { to { stroke-dashoffset: -480; } }
@keyframes bcs-pulse { 0%,100% { opacity: .25; } 50% { opacity: .95; } }

.bcs-hero__inner {
  position: relative; display: grid; grid-template-columns: 1.15fr .85fr;
  gap: var(--bc-s-10); align-items: center;
  padding-block: var(--bc-s-12) var(--bc-s-11); min-height: 560px;
}
.bcs-hero h1 {
  font-size: clamp(2.4rem, 5vw, var(--bc-fs-display));
  color: var(--bc-white); line-height: var(--bc-lh-tight);
  letter-spacing: -0.02em; margin: 0 0 var(--bc-s-5);
}
.bcs-hero h1 em {
  font-style: normal;
  background: linear-gradient(92deg, var(--bcs-grad-a), var(--bc-accent-300) 55%, var(--bc-info));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bcs-hero__lead {
  font-size: var(--bc-fs-lg); line-height: var(--bc-lh-base);
  color: var(--bc-brand-100); max-width: 54ch; margin: 0 0 var(--bc-s-7);
}
.bcs-hero__badge {
  display: inline-flex; align-items: center; gap: var(--bc-s-2);
  border: 1px solid var(--bc-border); border-color: rgba(255,255,255,.22);
  color: var(--bc-accent-200); border-radius: var(--bc-r-pill);
  padding: 6px 14px; font-size: var(--bc-fs-xs); font-weight: var(--bc-fw-semi);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--bc-s-5);
  background: rgba(255,255,255,.05);
}
.bcs-hero__cta { display: flex; gap: var(--bc-s-4); flex-wrap: wrap; }

/* Floating stack of "product surface" cards on the right of the hero */
.bcs-stack { position: relative; min-height: 420px; }
.bcs-stack__card {
  position: absolute; background: var(--bc-bg-surface); color: var(--bc-text-body);
  border-radius: var(--bc-r-card); box-shadow: var(--bc-sh-xl);
  padding: var(--bc-s-5) var(--bc-s-6); width: min(320px, 78%);
  animation: bcs-float 7s ease-in-out infinite;
}
.bcs-stack__card .bc-eyebrow { color: var(--bc-accent-700); }
.bcs-stack__card--a { top: 4%;  right: 8%;  z-index: 3; }
.bcs-stack__card--b { top: 36%; left: 0;    z-index: 2; animation-delay: -2.4s; }
.bcs-stack__card--c { bottom: 0; right: 2%; z-index: 1; animation-delay: -4.8s; }
@keyframes bcs-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.bcs-stack__row { display: flex; align-items: center; justify-content: space-between;
  gap: var(--bc-s-4); }
.bcs-stack__icon {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--bcs-gradient); color: var(--bc-white);
}

/* ---------------------------------------------------------------------------
   3. Scroll reveal
   --------------------------------------------------------------------------- */
.bcs-reveal { opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.bcs-reveal.is-visible { opacity: 1; transform: none; }
.bcs-reveal[data-reveal-delay="1"] { transition-delay: .08s; }
.bcs-reveal[data-reveal-delay="2"] { transition-delay: .16s; }
.bcs-reveal[data-reveal-delay="3"] { transition-delay: .24s; }
.bcs-reveal[data-reveal-delay="4"] { transition-delay: .32s; }
.bcs-reveal[data-reveal-delay="5"] { transition-delay: .40s; }

/* ---------------------------------------------------------------------------
   4. Capability cards
   --------------------------------------------------------------------------- */
.bcs-cap { display: flex; flex-direction: column; gap: var(--bc-s-3);
  padding: var(--bc-s-7); height: 100%; }
.bcs-cap__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--bc-brand-600); color: var(--bc-accent-300);
  margin-bottom: var(--bc-s-2); transition: var(--bc-transition);
}
.bc-card--interactive:hover .bcs-cap__icon {
  background: var(--bcs-gradient); color: var(--bc-white);
  transform: scale(1.06) rotate(-3deg);
}
.bcs-cap h4 { margin: 0; }
.bcs-cap p { margin: 0; }
.bcs-cap__more {
  margin-top: auto; padding-top: var(--bc-s-3);
  display: inline-flex; align-items: center; gap: var(--bc-s-2);
  color: var(--bc-accent-700); font-weight: var(--bc-fw-semi);
  font-size: var(--bc-fs-sm);
}

/* ---------------------------------------------------------------------------
   5. Stats band with animated counters
   --------------------------------------------------------------------------- */
.bcs-stats { background: var(--bc-brand-600); color: var(--bc-white);
  position: relative; overflow: hidden; }
.bcs-stats .bc-pattern-layer { opacity: .35; }
.bcs-stats__grid {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--bc-s-6); padding-block: var(--bc-s-9);
}
.bcs-stat { text-align: center; }
.bcs-stat__value {
  font-family: var(--bc-font-display); font-weight: var(--bc-fw-bold);
  font-size: 2.75rem; line-height: 1.1; font-variant-numeric: tabular-nums;
  background: linear-gradient(92deg, var(--bcs-grad-a), var(--bc-accent-200));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bcs-stat__label { margin-top: var(--bc-s-2); color: var(--bc-brand-100);
  font-size: var(--bc-fs-sm); }

/* ---------------------------------------------------------------------------
   6. Technology marquee
   --------------------------------------------------------------------------- */
.bcs-marquee { overflow: hidden; border-block: 1px solid var(--bc-border-subtle);
  background: var(--bc-grey-25); padding-block: var(--bc-s-5); }
.bcs-marquee__track {
  display: flex; gap: var(--bc-s-9); width: max-content;
  animation: bcs-marquee 36s linear infinite;
}
.bcs-marquee:hover .bcs-marquee__track { animation-play-state: paused; }
.bcs-marquee__item {
  display: inline-flex; align-items: center; gap: var(--bc-s-2);
  color: var(--bc-text-muted); font-family: var(--bc-font-display);
  font-weight: var(--bc-fw-semi); font-size: var(--bc-fs-base); white-space: nowrap;
}
.bcs-marquee__item .bc-i { color: var(--bc-accent-500); }
@keyframes bcs-marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------------
   7. Split feature rows (What we do)
   --------------------------------------------------------------------------- */
.bcs-split { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--bc-s-10); align-items: center; }
.bcs-split--flip .bcs-split__media { order: 2; }
.bcs-split__media { border-radius: var(--bc-r-lg); overflow: hidden;
  box-shadow: var(--bc-sh-lg); background: var(--bc-brand-700); }
.bcs-split__media svg, .bcs-split__media img { display: block; width: 100%; height: auto; }
.bcs-checks { list-style: none; margin: var(--bc-s-5) 0 0; padding: 0;
  display: grid; gap: var(--bc-s-3); }
.bcs-checks li { display: flex; gap: var(--bc-s-3); align-items: flex-start;
  font-size: var(--bc-fs-base); color: var(--bc-text-body); }
.bcs-checks .bc-i { color: var(--bc-support-400); flex: none; margin-top: 2px; }

/* ---------------------------------------------------------------------------
   8. Prose (legal / long-form pages)
   --------------------------------------------------------------------------- */
.bcs-prose { max-width: 820px; margin-inline: auto; }
.bcs-prose h2 { font-size: var(--bc-fs-h3); margin: var(--bc-s-8) 0 var(--bc-s-3); }
.bcs-prose h2:first-child { margin-top: 0; }
.bcs-prose p, .bcs-prose li { color: var(--bc-text-body); line-height: var(--bc-lh-base); }
.bcs-prose ul { padding-left: 1.2em; display: grid; gap: var(--bc-s-2); }
.bcs-prose .bcs-updated { color: var(--bc-text-muted); font-size: var(--bc-fs-sm);
  margin-bottom: var(--bc-s-7); }

/* Page header band for inner pages */
.bcs-pagehead { background: var(--bc-brand-700); color: var(--bc-white);
  position: relative; overflow: hidden; }
.bcs-pagehead__inner { position: relative; padding-block: var(--bc-s-10) var(--bc-s-9); }
.bcs-pagehead h1 { color: var(--bc-white); font-size: clamp(2rem, 4vw, var(--bc-fs-h1));
  margin: var(--bc-s-3) 0 var(--bc-s-3); }
.bcs-pagehead p { color: var(--bc-brand-100); max-width: 62ch; margin: 0; }
.bcs-pagehead .bcs-hero__grid { opacity: .12; }

/* ---------------------------------------------------------------------------
   9. Contact
   --------------------------------------------------------------------------- */
.bcs-contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bc-s-8);
  align-items: start; }
.bcs-map { border-radius: var(--bc-r-card); overflow: hidden;
  box-shadow: var(--bc-sh-sm); border: 1px solid var(--bc-border-subtle); }
.bcs-map iframe { display: block; width: 100%; height: 320px; border: 0; }
.bcs-contact__row { display: flex; gap: var(--bc-s-3); align-items: flex-start;
  padding-block: var(--bc-s-3); }
.bcs-contact__row .bc-i { color: var(--bc-accent-700); flex: none; margin-top: 2px; }

/* ---------------------------------------------------------------------------
   10. Values / about grid
   --------------------------------------------------------------------------- */
.bcs-value { padding: var(--bc-s-6); }
.bcs-value__no {
  font-family: var(--bc-font-display); font-weight: var(--bc-fw-bold);
  font-size: var(--bc-fs-h3);
  background: var(--bcs-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------------------------------------------------------------------
   10b. Nav — scroll elevation + mobile panel
   --------------------------------------------------------------------------- */
.bc-nav { transition: box-shadow .25s ease; }
.bc-nav.is-scrolled { box-shadow: var(--bc-sh-md); }
@media (max-width: 767px) {
  .bc-nav__links.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 72px;
    background: var(--bc-bg-surface); border-bottom: 1px solid var(--bc-border);
    box-shadow: var(--bc-sh-lg); padding: var(--bc-s-4) var(--bc-s-6);
    gap: 0; margin: 0;
  }
  .bc-nav__links.is-open .bc-nav__link {
    padding: var(--bc-s-4) 0; border-bottom: 1px solid var(--bc-border-subtle);
  }
  .bc-nav__links.is-open .bc-nav__link:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   11. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .bcs-hero__inner { grid-template-columns: 1fr; padding-block: var(--bc-s-10); }
  .bcs-stack { display: none; }
  .bcs-split { grid-template-columns: 1fr; gap: var(--bc-s-7); }
  .bcs-split--flip .bcs-split__media { order: 0; }
  .bcs-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .bcs-contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bcs-stats__grid { gap: var(--bc-s-7); }
  .bcs-hero__cta .bc-btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   12. Reduced motion — kill all decorative animation
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bcs-hero__bg .orb, .bcs-stack__card, .bcs-marquee__track,
  .bcs-hero__net .net-line, .bcs-hero__net .net-node--pulse { animation: none; }
  .bcs-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------------
   13. Utilities
   --------------------------------------------------------------------------- */
[hidden] { display: none !important; }
@media (max-width: 480px) { .bcs-lockup svg { height: 32px; } }