/* ============================================================
   visuals.css - premium visual-media treatment layer
   Loaded AFTER styles.css (and motion.css where present).
   Self-contained: all animations are CSS keyframes that run on
   their own, so it works on service pages that do not load
   motion.css / motion.js. Everything is gated by
   prefers-reduced-motion. Reuses the styles.css :root brand tokens.
   ============================================================ */

/* ---------- Mesh hero backdrop -------------------------------
   A subtle animated grid + drifting brand-red blobs that sits
   behind hero text (z-index 0; hero .container is z-index 1). */
.mesh-hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.mesh-hero .mesh-grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(164, 30, 30, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164, 30, 30, 0.07) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 28%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 28%, #000 0%, transparent 72%);
}
.mesh-hero .mesh-blob {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  will-change: transform;
}
.mesh-hero .mesh-blob.b1 {
  top: -140px; left: 8%;
  background: radial-gradient(circle, rgba(164, 30, 30, 0.55), transparent 65%);
  animation: mesh-drift-a 20s ease-in-out infinite;
}
.mesh-hero .mesh-blob.b2 {
  top: -80px; right: 6%;
  background: radial-gradient(circle, rgba(196, 43, 43, 0.38), transparent 65%);
  animation: mesh-drift-b 26s ease-in-out infinite;
}
@keyframes mesh-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, 30px) scale(1.12); }
}
@keyframes mesh-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-36px, 24px) scale(1.08); }
}

/* ---------- Signature visual band ----------------------------
   Full-width framed stage for a page's one signature diagram.
   Mirrors the .service-row-visual idiom (dark card, red top line). */
.signature-visual {
  position: relative;
  max-width: 880px;
  margin: 8px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(164, 30, 30, 0.14), transparent 60%),
    var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}
.signature-visual::before {  /* red top hairline, brand signature */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--brand-red), var(--brand-red-light), transparent);
  z-index: 2;
}
.signature-visual svg { display: block; width: 100%; height: 100%; }
.signature-caption {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-top: 14px;
}
@media (max-width: 768px) {
  .signature-visual { aspect-ratio: 4 / 3; }
}

/* Reusable SVG animation primitives (used by inline signature SVGs) */
.sig-draw {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  animation: sig-draw 1.6s ease forwards;
  animation-delay: var(--d, 0s);
}
@keyframes sig-draw { to { stroke-dashoffset: 0; } }

.sig-pop {
  opacity: 0;
  transform: scale(0.6);
  transform-box: fill-box;
  transform-origin: center;
  animation: sig-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes sig-pop { to { opacity: 1; transform: scale(1); } }

.sig-flow {  /* a data dot traveling a path via offset-path (set inline) */
  animation: sig-flow 2.6s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes sig-flow {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.sig-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: sig-pulse 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes sig-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.18); }
}

/* ---------- Duotone media ------------------------------------
   Brand red/black duotone over any photo so real photography
   matches the dark tech brand. Wrap an <img> in .duotone-media. */
.duotone-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
}
.duotone-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* SVG feColorMatrix duotone (renders identically in every engine incl. headless).
     Requires the #gm-duotone filter def in the page (see snippet in the page's hidden SVG). */
  filter: url(#gm-duotone) contrast(1.04);
}
.duotone-media::after {   /* subtle warm highlight glow for depth (no blend-mode dependency) */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 16%, rgba(255, 120, 90, 0.12), transparent 55%);
  pointer-events: none;
}

/* ---------- Cinematic video band -----------------------------
   Muted autoplay loop, red-graded, gradient-masked into the dark
   sections above/below. Provide a poster on the <video>. */
.media-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-deep);
}
.media-band .hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.05);
}
.media-band::before { /* red duotone grade */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(164, 30, 30, 0.30), rgba(10, 10, 12, 0.55));
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
.media-band::after { /* top+bottom fade into the dark page */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg-dark) 0%, transparent 18%, transparent 82%, var(--bg-dark) 100%);
  pointer-events: none;
  z-index: 1;
}
.media-band .media-band-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  padding: 0 24px;
}

/* ---------- Full-width photo band (duotone group photo) ------ */
.photo-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-deep);
}
.photo-band > img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 480px;
  object-fit: cover;
  object-position: center 32%;
  display: block;
}
.photo-band::after {  /* darken for text legibility, heavier on the left */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10,10,12,0.88) 0%, rgba(10,10,12,0.5) 46%, rgba(10,10,12,0.22) 100%),
    linear-gradient(to bottom, rgba(10,10,12,0.35), rgba(10,10,12,0.55));
}
.photo-band-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.photo-band-copy h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  max-width: 620px;
}
.photo-band-copy p {
  color: var(--text-secondary);
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.6;
  max-width: 540px;
  margin: 0;
}

/* ---------- Homepage service-row minis --------------------------
   These signature diagrams live inside .service-row-visual, whose parent
   .motion-card-enter starts at opacity:0 and animates in on scroll. Nested
   entrance keyframes are unreliable there, so render the diagram at its final
   visible state (the row's own cardEntrance supplies the entrance motion).
   Continuous life (sig-pulse / sig-flow) is kept. Service-page signature
   bands are NOT inside .service-row-visual, so they keep the full draw-in. */
.service-row-visual .sig-draw { animation: none; stroke-dashoffset: 0; }
.service-row-visual .sig-pop  { animation: none; opacity: 1; transform: none; }

/* ---------- Reduced motion: freeze everything ---------------- */
@media (prefers-reduced-motion: reduce) {
  .mesh-hero .mesh-blob,
  .sig-draw, .sig-pop, .sig-flow, .sig-pulse {
    animation: none !important;
  }
  .sig-draw { stroke-dashoffset: 0; }
  .sig-pop  { opacity: 1; transform: none; }
  .media-band .hero-video { /* browsers already honor this, but be explicit */ }
}