/* A technical campus on warm paper, sharing the Operations scene's visual language. */
.technology-page .technology-hero {
  grid-template-columns: .78fr 1.22fr;
  gap: 0;
  padding-block: 38px 35px;
  min-height: 670px;
}

.technology-engine.technology-blueprint-scene {
  position: relative;
  isolation: isolate;
  height: 600px;
  min-width: 0;
  width: calc(100% + 5%);
  margin: 0 -3% 0 -2%;
  background: radial-gradient(ellipse at 51% 61%, #dce2d32e, transparent 67%);
}

.technology-blueprint-scene canvas[data-technology-canvas] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .75s ease;
}

.technology-blueprint-scene[data-ready="true"] canvas[data-technology-canvas] { opacity: 1; }

.technology-blueprint-skeleton {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .7s ease, visibility 0s .7s;
}

.technology-engine .technology-blueprint-skeleton svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  opacity: .65;
  animation: technology-campus-breathe 2.5s ease-in-out infinite;
}

.technology-blueprint-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, #ffffff70 49%, transparent 76%);
  transform: translateX(-110%);
  animation: technology-campus-sweep 2.7s ease-in-out infinite;
}

.technology-blueprint-scene:not([data-ready="loading"]) .technology-blueprint-skeleton {
  opacity: 0;
  visibility: hidden;
}

.technology-blueprint-scene:not([data-ready="loading"]) .technology-blueprint-skeleton::after,
.technology-blueprint-scene:not([data-ready="loading"]) .technology-blueprint-skeleton svg { animation: none; }

.technology-blueprint-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .65s ease, visibility 0s .65s;
}

.technology-engine .technology-blueprint-fallback > svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  margin: 0;
}

.technology-blueprint-scene[data-ready="fallback"] .technology-blueprint-fallback {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* The fallback holds a clear static composition if WebGL is unavailable. */
.technology-blueprint-fallback * { animation: none !important; }

.technology-blueprint-labels {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .65s ease, visibility 0s .65s;
}

.technology-blueprint-scene[data-ready="true"] .technology-blueprint-labels {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.technology-blueprint-labels [data-tech-site] {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  min-height: 44px;
  max-width: 146px;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid #7b96a84d;
  border-radius: 3px;
  background: #f6f3eff0;
  color: #405967;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 450;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.technology-blueprint-labels [data-tech-site]:hover {
  background: #fffefa;
  color: #225f94;
  border-color: #527c9f;
}

.technology-blueprint-labels [data-tech-site]:focus-visible {
  outline: 2px solid #355c89;
  outline-offset: 4px;
  background: #fffefa;
}

.technology-blueprint-labels [data-tech-site] > span:last-child { font-size: 11px; opacity: .6; }
.technology-blueprint-labels [data-tech-site="ai"] { left: 20%; top: 18%; }
.technology-blueprint-labels [data-tech-site="api"] { left: 72%; top: 15%; }
.technology-blueprint-labels [data-tech-site="standards"] { left: 85%; top: 47%; }
.technology-blueprint-labels [data-tech-site="security"] { left: 17%; top: 47%; }
.technology-blueprint-labels [data-tech-site="translation"] { left: 28%; top: 80%; }
.technology-blueprint-labels [data-tech-site="transport"] { left: 77%; top: 80%; }
.technology-blueprint-labels [data-tech-site="core"] {
  left: 50%;
  top: 29%;
  padding-inline: 12px;
  border: 1px solid #bccacb;
  background: #fffdf8;
  color: #285d3b;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 5px 14px #314a5310;
}

.technology-engine svg.technology-blueprint-leaders {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity .65s ease;
}

.technology-blueprint-scene[data-ready="true"] svg.technology-blueprint-leaders { opacity: 1; }
.technology-blueprint-leaders path {
  fill: none;
  stroke: #527ea1;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--blueprint, 0));
  opacity: calc(var(--blueprint, 0) * .72);
}

.technology-blueprint-scene .tech-pause { right: 18px; bottom: 6px; min-width: 44px; width: 44px; height: 44px; }
.technology-blueprint-scene[data-ready="loading"] .tech-pause { opacity: 0; visibility: hidden; }
.technology-blueprint-scene[data-ready="fallback"] :is(canvas, .technology-blueprint-labels, .technology-blueprint-leaders, .tech-pause) { display: none; }
.technology-blueprint-scene[data-playing="false"] .technology-blueprint-skeleton * { animation-play-state: paused; }
.technology-blueprint-scene[data-playing="false"] .technology-blueprint-skeleton::after { animation-play-state: paused; }

@keyframes technology-campus-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .8; } }
@keyframes technology-campus-sweep { to { transform: translateX(110%); } }

@media (min-width: 1500px) {
  .technology-page .technology-hero { min-height: 740px; }
  .technology-engine.technology-blueprint-scene { height: 650px; }
}

@media (min-width: 961px) and (max-width: 1100px) {
  .technology-page .technology-hero { grid-template-columns: .83fr 1.17fr; min-height: 610px; }
  .technology-engine.technology-blueprint-scene { height: 540px; }
  .technology-blueprint-labels [data-tech-site] { font-size: 12px; padding-inline: 7px; gap: 4px; }
  .technology-blueprint-labels [data-tech-site="core"] { font-size: 13px; }
}

@media (max-width: 960px) {
  .technology-page .technology-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 38px 6% 30px;
    gap: 10px;
  }
  .technology-page .technology-hero-copy { max-width: 680px; }
  .technology-page .technology-hero-copy > p:not(.tech-kicker) { max-width: 590px; }
  .technology-engine.technology-blueprint-scene { height: 570px; width: 106%; margin: 0 -3%; }
}

@media (max-width: 600px) {
  .technology-page .technology-hero { padding-top: 33px; gap: 10px; }
  .technology-engine.technology-blueprint-scene { height: clamp(420px, 104vw, 450px); width: 112%; margin: 0 -6%; }
  .technology-blueprint-labels [data-tech-site] { min-height: 44px; max-width: 116px; padding: 8px 7px; gap: 4px; font-size: 12px; white-space: normal; }
  .technology-blueprint-labels [data-tech-site] > span:last-child { font-size: 10px; flex-shrink: 0; }
  .technology-blueprint-labels [data-tech-site="standards"] { left: 84%; }
  .technology-blueprint-labels [data-tech-site="core"] { font-size: 13px; padding-inline: 10px; }
  .technology-blueprint-scene .tech-pause { right: 10px; bottom: 0; }
}

@media (max-width: 360px) {
  .technology-blueprint-labels [data-tech-site] { max-width: 100px; padding-inline: 6px; gap: 3px; }
  .technology-blueprint-labels [data-tech-site="security"] { left: 16%; }
}

@media (prefers-reduced-motion: reduce) {
  .technology-blueprint-skeleton::after { display: none; }
  .technology-engine .technology-blueprint-skeleton svg { animation: none; }
  .technology-blueprint-scene :is(canvas, .technology-blueprint-skeleton, .technology-blueprint-labels, .technology-blueprint-leaders, .technology-blueprint-fallback) { transition: none !important; }
}