/* =========================================================
   ASTRUST — art.css
   Additive visuals only. Abstract art as the star,
   one human photo for warmth. Matches style.css language.
   Brand: vivid blue #127EC0 / warm orange #D87812
   ========================================================= */

/* ---------- Full-page live network background (canvas point-cloud) ----------
   Fixed, full-viewport layer that sits BEHIND all page content (z-index:0).
   Content is lifted above it (main / footer get z-index:1 in style.css) and the
   section backgrounds are made high-alpha translucent so this quiet network is
   subtly visible behind everything as you scroll — clearest in the open hero,
   only a whisper behind text. Never captures pointer events. */
#bgFx {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  /* Blueprint background is denser than the old network — keep it present but
     let body text win comfortably. */
  opacity: .84;
}
#bgFx canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* The blueprint draws its own isometric grid; hide the flat hero grid so they
   don't compete. */
.hero__grid { display: none !important; }
/* fainter + calmer on small screens so body text always wins */
@media (max-width: 600px) {
  #bgFx { opacity: .70; }
}
@media (prefers-reduced-motion: reduce) {
  #bgFx { opacity: .64; }
}

/* ---------- Message: human photo accent ---------- */
.message__figure {
  margin: clamp(2.6rem, 5vw, 3.8rem) auto 0;
  max-width: 760px;
  display: grid;
  gap: .8rem;
  justify-items: center;
}
.message__photo-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(15, 77, 122, .16);
}
/* soft brand-tinted frame + corner accent to echo the design language */
.message__photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(15, 77, 122, .06);
  pointer-events: none;
}
.message__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.message__caption {
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ---------- Subtle abstract accent behind the message ---------- */
.message { position: relative; overflow: hidden; }
.message > .container { position: relative; z-index: 1; }
.message__accent {
  position: absolute;
  right: -10vw;
  top: -8vw;
  width: min(46vw, 460px);
  height: min(46vw, 460px);
  z-index: 0;
  opacity: .5;
  pointer-events: none;
}
.message__accent .art-ring       { fill: none; stroke: rgba(18, 126, 192, .18); stroke-width: 1; }
.message__accent .art-ring--accent { stroke: rgba(18, 126, 192, .32); }
.message__accent .art-node       { fill: rgba(18, 126, 192, .3); }
.message__accent .art-node--accent { fill: rgba(216, 120, 18, .6); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .message__accent { display: none; }
}



/* =========================================================
   Scroll-driven motion for the mid / lower sections
   Decorative parallax layers (blobs + thin geometry) that
   drift at a different speed than the content. Subtle,
   behind the copy, GPU-friendly, reduced-motion safe.
   ========================================================= */

/* target sections become positioning contexts for their deco */
.business,
.company { position: relative; overflow: hidden; }
.business > .container,
.company > .container { position: relative; z-index: 1; }

/* decorative layer container: clipped to its section, behind content */
.sec-deco {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}

/* soft brand blobs */
.sec-deco__blob {
  position: absolute;
  width: min(42vw, 480px); height: min(42vw, 480px);
  border-radius: 50%;
  filter: blur(40px);
  will-change: transform;
}
.sec-deco__blob--blue   { background: radial-gradient(circle, rgba(18,126,192,.16), transparent 66%); }
.sec-deco__blob--orange { background: radial-gradient(circle, rgba(216,120,18,.14), transparent 66%); }
.sec-deco__blob--light  { background: radial-gradient(circle, rgba(126,186,222,.28), transparent 66%); }
.sec-deco__blob--tl { left: -14vw; top: -12vw; }
.sec-deco__blob--tr { right: -14vw; top: -13vw; }
.sec-deco__blob--bl { left: -12vw; bottom: -14vw; }
.sec-deco__blob--br { right: -12vw; bottom: -12vw; }

/* thin geometric line motifs */
.sec-deco__lines {
  position: absolute;
  width: min(34vw, 360px); height: auto;
  opacity: .6; will-change: transform;
}
.sec-deco__lines--tr { right: 3vw; top: 7vw; }
.sec-deco__lines--bl { left: 3vw; bottom: 6vw; }

/* ---------- Message photo: subtle in-frame parallax ---------- */
.message__photo-wrap { aspect-ratio: 16 / 9; }
.message__photo {
  position: absolute; left: 0; top: -9%;
  width: 100%; height: 118%;
  aspect-ratio: auto;
  object-fit: cover;
  will-change: transform;
}

/* ---------- Reveal: a touch more character, still professional ---------- */
.card.reveal,
.strength-card.reveal,
.ai-card.reveal,
.corp.reveal {
  transform: translateY(38px) scale(.984);
  will-change: transform, opacity;
}
.card.reveal.is-visible,
.strength-card.reveal.is-visible,
.ai-card.reveal.is-visible,
.corp.reveal.is-visible { transform: none; }

/* section heads lift a little further for a clearer entrance */
.section__head.reveal { transform: translateY(34px); }
.section__head.reveal.is-visible { transform: none; }

/* staggered entrance for the company cards */
.company__grid .corp.reveal:nth-child(2) { transition-delay: 90ms; }
.company__grid .corp.reveal:nth-child(3) { transition-delay: 180ms; }
.company__grid .corp.reveal:nth-child(4) { transition-delay: 270ms; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .sec-deco__blob { filter: blur(32px); opacity: .8; }
  .sec-deco__lines { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* freeze every decorative parallax layer at its resting position */
  .sec-deco__blob,
  .sec-deco__lines,
  .message__photo { transform: none !important; }
  .card.reveal,
  .strength-card.reveal,
  .ai-card.reveal,
  .corp.reveal,
  .section__head.reveal { transform: none; transition: none; }
}