/* ==========================================================================
   INFRAVIZE — Visual asset integration
   Hero artwork, CAD/BIM/calculation overlays, product hotspots,
   engineering-route animation system, background treatments.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Logo sizing (real artwork, object-fit: contain, untouched proportions)
   ------------------------------------------------------------------------- */
.nav-logo {
  align-items: center;
}
.nav-logo img,
.footer-brand .nav-logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
  display: block;
}
@media (min-width: 640px) {
  .nav-logo img, .footer-brand .nav-logo img { height: 42px; }
}
.nav-inner { min-height: 78px; align-items: center; }
.nav-links { align-items: center; }
@media (min-width: 901px) {
  .nav-links { gap: var(--sp-5); }
}
.footer-brand .nav-logo { margin-bottom: var(--sp-3); }

/* -------------------------------------------------------------------------
   Engineering-route animation system (reusable)
   ------------------------------------------------------------------------- */
.engineering-route {
  fill: none;
  stroke: var(--c-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(61,139,253,0.5));
}
.engineering-route.is-cyan { stroke: var(--c-cyan); filter: drop-shadow(0 0 3px rgba(70,225,200,0.5)); }

.engineering-node {
  fill: var(--c-blue);
  filter: drop-shadow(0 0 4px rgba(61,139,253,0.7));
}
.engineering-node.is-cyan { fill: var(--c-cyan); filter: drop-shadow(0 0 4px rgba(70,225,200,0.7)); }
.engineering-node-pulse { animation: nodePulse 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes nodePulse { 0%, 100% { opacity: 0.5; r: 3.4; } 50% { opacity: 1; r: 4.6; } }

@media (prefers-reduced-motion: no-preference) {
  .route-draw {
    stroke-dasharray: var(--route-len, 600);
    stroke-dashoffset: var(--route-len, 600);
    animation: routeDraw var(--route-dur, 9s) cubic-bezier(0.45,0,0.2,1) infinite;
  }
}
@keyframes routeDraw {
  0%   { stroke-dashoffset: var(--route-len, 600); opacity: 0.35; }
  8%   { opacity: 1; }
  45%  { stroke-dashoffset: 0; opacity: 1; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  92%  { opacity: 0.35; }
  100% { stroke-dashoffset: var(--route-len, 600); opacity: 0.35; }
}

/* -------------------------------------------------------------------------
   Image frame: edge-fade / emerge-from-background treatment
   ------------------------------------------------------------------------- */
.visual-frame {
  position: relative;
  isolation: isolate;
}
.visual-frame img { width: 100%; height: auto; display: block; }

.visual-frame.fade-edges img {
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 46%, black 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 82% at 50% 46%, black 62%, transparent 100%);
}
.visual-frame.fade-left img {
  -webkit-mask-image: linear-gradient(to right, transparent, black 14%, black 100%);
  mask-image: linear-gradient(to right, transparent, black 14%, black 100%);
}
.visual-frame.fade-bottom img {
  -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
}

.visual-glow {
  position: absolute;
  inset: -12%;
  z-index: -1;
  background: radial-gradient(circle at 50% 45%, rgba(61,139,253,0.20), rgba(70,225,200,0.08) 42%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.visual-frame .overlay-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.visual-frame .overlay-svg .hit-target { pointer-events: auto; cursor: pointer; }

/* -------------------------------------------------------------------------
   Hotspots (CAD / BIM / product hover points)
   ------------------------------------------------------------------------- */
.hotspot {
  position: absolute;
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
}
.hotspot::before {
  content: '';
  position: absolute; inset: 7px;
  border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: 0 0 0 4px rgba(70,225,200,0.16);
  transition: box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.hotspot::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid rgba(70,225,200,0.55);
  border-radius: 50%;
  animation: hotspotPulse 2.8s ease-in-out infinite;
}
.hotspot:hover::before, .hotspot:focus-visible::before, .hotspot.is-active::before {
  background: var(--c-blue); box-shadow: 0 0 0 6px rgba(61,139,253,0.22);
}
@keyframes hotspotPulse { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .hotspot::after { animation: none; } }

.hotspot-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: var(--f-mono);
  font-size: var(--fs-000);
  color: var(--c-ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  z-index: 5;
}
.hotspot:hover .hotspot-tip, .hotspot:focus-visible .hotspot-tip, .hotspot.is-active .hotspot-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero-art { position: relative; }
.hero-art .visual-glow { animation: glowDrift 12s ease-in-out infinite; }
@keyframes glowDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(1.5%, -1.5%) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .hero-art .visual-glow { animation: none; } }

.hero-art-tilt { transition: transform 220ms ease-out; will-change: transform; }

.hero-status-strip {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line-soft);
}
.hero-status-strip .stat {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: var(--fs-000); color: var(--c-ink-faint); letter-spacing: 0.04em;
}
.hero-status-strip .stat .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-cyan); flex: none; box-shadow: 0 0 6px rgba(70,225,200,0.8); animation: nodePulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-status-strip .stat .dot { animation: none; } }

/* -------------------------------------------------------------------------
   Capability visual blocks (CAD / BIM / Calculations)
   ------------------------------------------------------------------------- */
.capability-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; padding: var(--sp-7) 0; }
.capability-block:nth-child(even) { direction: rtl; }
.capability-block:nth-child(even) > * { direction: ltr; }
@media (max-width: 900px) {
  .capability-block { grid-template-columns: 1fr; direction: ltr !important; gap: var(--sp-4); padding: var(--sp-6) 0; }
  .capability-block > * { direction: ltr !important; }
  .capability-block .visual-frame { order: -1; }
}
.capability-block .card-index { margin-bottom: var(--sp-2); }
.capability-block h3 { margin-bottom: var(--sp-3); }

/* Discipline selector tabs over BIM visual */
.discipline-selectors { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.discipline-btn {
  font-family: var(--f-mono); font-size: var(--fs-000); letter-spacing: 0.05em;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--c-line);
  background: transparent; color: var(--c-ink-dim);
  transition: all var(--dur-1) var(--ease);
}
.discipline-btn:hover { border-color: var(--c-blue-dim); color: var(--c-ink); }
.discipline-btn[aria-pressed="true"] { background: rgba(61,139,253,0.12); border-color: var(--c-blue); color: var(--c-blue); }

.bim-overlay-region { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.bim-overlay-region.is-active { opacity: 1; }

/* Calculation overlay */
.calc-overlay {
  position: absolute; z-index: 3;
  background: rgba(10,13,18,0.86);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--f-mono);
  backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(6px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.calc-overlay.is-visible { opacity: 1; transform: translateY(0); }
.calc-overlay .k { font-size: var(--fs-000); color: var(--c-ink-faint); letter-spacing: 0.05em; }
.calc-overlay .v { font-size: var(--fs-0); color: var(--c-cyan); margin-top: 2px; }
.calc-status {
  position: absolute; z-index: 3; bottom: var(--sp-3); left: var(--sp-3);
  font-family: var(--f-mono); font-size: var(--fs-000); letter-spacing: 0.06em; color: var(--c-blue);
  opacity: 0; transition: opacity 400ms var(--ease);
  display: flex; align-items: center; gap: 6px;
}
.calc-status.is-visible { opacity: 1; }
.calc-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.product-card-thumb {
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.product-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease); }
.product-card:hover .product-card-thumb img { transform: scale(1.03); }

/* -------------------------------------------------------------------------
   Product visual (FireCAD)
   ------------------------------------------------------------------------- */
.product-feature { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-6); align-items: center; }
@media (max-width: 980px) { .product-feature { grid-template-columns: 1fr; } }
.product-feature .capability-indicators { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.product-feature .capability-indicators li {
  font-family: var(--f-mono); font-size: var(--fs-000); color: var(--c-ink-dim);
  border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 6px 11px;
}
.product-status-cycle {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-4); font-family: var(--f-mono); font-size: var(--fs-000);
}
.product-status-cycle span { color: var(--c-ink-faint); position: relative; padding: 4px 0; }
.product-status-cycle span.is-active { color: var(--c-cyan); }
.product-status-cycle .sep { color: var(--c-line); }

/* -------------------------------------------------------------------------
   Custom automation input/output flow (6.png)
   ------------------------------------------------------------------------- */
.flow-diagram { position: relative; }
.flow-io { display: flex; flex-direction: column; gap: var(--sp-2); }
.flow-io-btn {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: var(--fs-00); color: var(--c-ink-dim);
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  padding: 10px 14px; background: var(--c-bg-1);
  transition: all var(--dur-1) var(--ease); cursor: pointer; text-align: left;
}
.flow-io-btn::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-ink-faint); transition: background var(--dur-1) var(--ease); flex: none; }
.flow-io-btn:hover, .flow-io-btn.is-active { border-color: var(--c-blue); color: var(--c-ink); background: var(--c-bg-2); }
.flow-io-btn:hover::before, .flow-io-btn.is-active::before { background: var(--c-cyan); box-shadow: 0 0 6px rgba(70,225,200,0.8); }
.flow-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); align-items: start; margin-top: var(--sp-5); }
@media (max-width: 900px) { .flow-columns { grid-template-columns: 1fr; } }
.flow-columns .label { display: block; margin-bottom: var(--sp-2); }

/* -------------------------------------------------------------------------
   Background image treatment (engineering-background.png)
   ------------------------------------------------------------------------- */
.bg-engineering { position: relative; overflow: hidden; }
.bg-engineering::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--bg-eng-image);
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  z-index: 0;
}
.bg-engineering::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--c-bg) 0%, rgba(10,13,18,0.75) 45%, var(--c-bg) 100%);
  z-index: 0;
}
.bg-engineering > .container { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   Mobile: text-first ordering, hover effects off
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .product-feature .visual-frame { order: -1; }
  .flow-diagram .visual-frame { order: -1; }
}
@media (hover: none) {
  .hero-art-tilt { transform: none !important; }
}