/* SentralTech security process graphics — integrated layout and motion pass */

.solution-process-graphic {
  --process-cycle: 12s;
  isolation: isolate;
  border-color: rgb(100 172 205 / 36%);
  background:
    radial-gradient(circle at 52% 0%, color-mix(in srgb, var(--solution-accent) 8%, transparent), transparent 35%),
    linear-gradient(rgb(100 173 204 / 7%) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgb(100 173 204 / 7%) 1px, transparent 1px) 0 0 / 40px 40px,
    #061521;
  box-shadow: 0 30px 74px rgb(3 19 31 / 20%);
}

.solution-process-graphic::after {
  content: "";
  z-index: 0;
  pointer-events: none;
  position: absolute;
  top: 61px;
  left: 0;
  width: 30%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--solution-accent), transparent);
  animation: security-process-head-scan var(--process-cycle) linear infinite;
}

.solution-process-graphic__head {
  z-index: 2;
  background: rgb(3 17 28 / 88%);
}

/* Keep long German compounds inside their assigned hero/FAQ columns. */
.service-page .inner-hero__copy h1,
.service-page .seo-faq summary {
  min-width: 0;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.solution-process-map {
  z-index: 1;
  gap: clamp(14px, 1.45vw, 20px);
  overflow: clip;
}

.solution-process-terminal {
  overflow: hidden;
  min-height: 152px;
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}

.solution-process-terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background: linear-gradient(115deg, color-mix(in srgb, var(--solution-accent) 8%, transparent), transparent 48%);
}

.solution-process-terminal > * {
  z-index: 1;
  position: relative;
}

.solution-process-terminal--outcome::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  opacity: 0.22;
  transform-origin: left;
  background: var(--solution-accent);
  animation: security-process-outcome var(--process-cycle) var(--ease-standard) infinite;
}

.solution-process-steps li {
  isolation: isolate;
  transform: none;
  transition:
    border-color var(--motion-normal) var(--ease-standard),
    background-color var(--motion-normal) var(--ease-standard);
}

.solution-process-steps li > * {
  z-index: 1;
  position: relative;
}

.solution-process-steps li::before {
  animation: security-process-step var(--process-cycle) var(--ease-standard) infinite;
  animation-delay: calc(var(--step-index) * 0.9s);
}

.solution-process-step__index {
  background: #061827;
  animation: security-process-index var(--process-cycle) var(--ease-standard) infinite;
  animation-delay: calc(var(--step-index) * 0.9s);
}

@media (any-hover: hover) and (any-pointer: fine) {
  .solution-process-steps li:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--solution-accent) 54%, #45677b);
    background: color-mix(in srgb, var(--solution-accent) 6%, #041522);
  }

  .solution-process-steps li:hover::before {
    opacity: 0.65;
  }
}

/* 01 — Penetration test: one controlled path through a reserved scope lane. */
.solution-process-map--attack-path {
  grid-template-columns: minmax(170px, 0.72fr) 126px minmax(360px, 1.7fr) minmax(180px, 0.76fr);
}

.solution-process-motif--scope {
  width: 126px;
}

.solution-process-motif__probe {
  animation-duration: var(--process-cycle);
}

/* 02 — Awareness: the decision node owns its gap and never covers a card. */
.solution-process-map--decision-tree {
  grid-template-columns: minmax(210px, 0.86fr) minmax(360px, 1.55fr) 64px minmax(180px, 0.72fr);
}

.solution-process-decision {
  width: 64px;
  height: 64px;
}

.solution-process-decision::before {
  top: 14px;
  left: 14px;
}

.solution-process-decision span {
  z-index: 2;
}

.solution-process-decision i {
  top: 32px;
  left: -14px;
  width: 18px;
}

.solution-process-decision i:last-child {
  right: -14px;
}

.solution-process-message__preview::after {
  animation-duration: var(--process-cycle);
}

/* 03 — Managed Defense: keep every signal lane inside the available width. */
.solution-process-map--signal-convergence {
  grid-template-columns: minmax(140px, 0.58fr) 112px 120px 58px minmax(300px, 1.5fr) minmax(160px, 0.7fr);
  gap: clamp(10px, 1.15vw, 15px);
}

.solution-process-sources span {
  min-width: 0;
}

.solution-process-triage {
  width: 120px;
  min-height: 120px;
  padding: 10px 6px;
}

.solution-process-triage small {
  letter-spacing: 0.06em;
}

.solution-process-response {
  min-width: 58px;
  letter-spacing: 0.05em;
}

.solution-process-sources i,
.solution-process-response i {
  animation-duration: var(--process-cycle);
}

/* 04 — Incident Response: status is a real grid row, not an overlay. */
.solution-process-map--incident-timeline {
  grid-template-areas:
    "status status status"
    "origin steps outcome";
  grid-template-columns: minmax(170px, 0.7fr) minmax(420px, 1.8fr) minmax(180px, 0.74fr);
  align-items: stretch;
  padding-top: clamp(24px, 3vw, 36px);
}

.solution-process-map--incident-timeline > .solution-process-incident__status {
  grid-area: status;
  position: relative;
  inset: auto;
  min-width: 0;
  min-height: 24px;
  white-space: nowrap;
}

.solution-process-map--incident-timeline > .solution-process-terminal--origin {
  grid-area: origin;
}

.solution-process-map--incident-timeline > .solution-process-steps--incident {
  grid-area: steps;
}

.solution-process-map--incident-timeline > .solution-process-terminal--outcome {
  grid-area: outcome;
}

.solution-process-incident__status span {
  animation-duration: var(--process-cycle);
}

/* 05 — NIS2 / ISO: wider labels and a contained matrix. */
.solution-process-map--control-matrix {
  grid-template-columns: minmax(180px, 0.74fr) 96px minmax(390px, 1.58fr) minmax(185px, 0.76fr);
}

.solution-process-matrix__axes {
  min-width: 0;
}

.solution-process-steps--matrix li::after {
  animation-duration: var(--process-cycle);
  animation-delay: calc(1.4s + var(--step-index) * 0.9s);
}

/* 06 — Darknet: filtering remains wide without forcing the whole page wider. */
.solution-process-map--signal-filter {
  grid-template-columns: minmax(185px, 0.72fr) minmax(0, 2fr) minmax(180px, 0.7fr);
}

.solution-process-filter__journey {
  grid-template-columns: minmax(180px, 1fr) 88px minmax(180px, 1fr);
}

.solution-process-filter__gate i {
  animation-duration: var(--process-cycle);
}

/* 07 — Workshop: reserve the core's own column instead of floating it above steps. */
.solution-process-map--defense-loop {
  grid-template-columns: minmax(175px, 0.7fr) minmax(450px, 1.75fr) minmax(185px, 0.74fr);
}

.solution-process-loop {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 0;
}

.solution-process-loop__core {
  position: relative;
  inset: auto;
  place-self: center;
  transform: none;
}

.solution-process-steps--loop {
  gap: 12px;
}

.solution-process-loop__core i {
  animation-duration: var(--process-cycle);
}

@keyframes security-process-head-scan {
  0%, 8% {
    opacity: 0;
    transform: translateX(-110%);
  }
  18%, 74% {
    opacity: 0.7;
  }
  88%, 100% {
    opacity: 0;
    transform: translateX(430%);
  }
}

@keyframes security-process-step {
  0%, 16%, 48%, 100% { opacity: 0; }
  23%, 35% { opacity: 0.82; }
  42% { opacity: 0.18; }
}

@keyframes security-process-index {
  0%, 16%, 48%, 100% {
    transform: scale(1);
    box-shadow: none;
  }
  23%, 35% {
    transform: scale(1.06);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--solution-accent) 12%, transparent);
  }
}

@keyframes security-process-outcome {
  0%, 52%, 100% {
    opacity: 0.22;
    transform: scaleX(0.18);
  }
  66%, 84% {
    opacity: 0.9;
    transform: scaleX(1);
  }
}

/* Earlier responsive transition eliminates the 1041–1100 px overflow band. */
@media (max-width: 1120px) {
  .solution-process-map,
  .solution-process-map--attack-path,
  .solution-process-map--decision-tree,
  .solution-process-map--signal-convergence,
  .solution-process-map--incident-timeline,
  .solution-process-map--control-matrix,
  .solution-process-map--signal-filter,
  .solution-process-map--defense-loop {
    grid-template-columns: minmax(0, 1fr);
  }

  .solution-process-map--incident-timeline {
    grid-template-areas:
      "status"
      "origin"
      "steps"
      "outcome";
  }

  .solution-process-sources {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .solution-process-sources span {
    justify-content: center;
    padding: 8px 4px;
    text-align: center;
    border: 1px solid rgb(99 216 255 / 20%);
  }

  .solution-process-sources::before,
  .solution-process-sources span::after {
    display: none;
  }

  .solution-process-sources::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 20px;
    background: rgb(99 216 255 / 30%);
  }

  .solution-process-sources i {
    right: 6px;
  }

  .solution-process-motif--scope {
    justify-self: center;
  }

  .solution-process-decision {
    width: 100%;
    height: 48px;
  }

  .solution-process-decision::before {
    top: 8px;
    left: calc(50% - 16px);
    width: 32px;
    height: 32px;
  }

  .solution-process-decision i,
  .solution-process-decision i:last-child {
    left: 50%;
    right: auto;
    width: 1px;
    height: 8px;
  }

  .solution-process-decision i {
    top: 0;
  }

  .solution-process-decision i:last-child {
    top: auto;
    bottom: 0;
  }

  .solution-process-triage {
    justify-self: center;
  }

  .solution-process-triage::before,
  .solution-process-triage::after {
    left: 50%;
    width: 1px;
    height: 20px;
  }

  .solution-process-triage::before {
    top: -20px;
    right: auto;
    display: none;
  }

  .solution-process-triage::after {
    top: 100%;
  }

  .solution-process-response {
    justify-self: center;
    width: 48px;
    min-height: 48px;
    border-right: 0;
    writing-mode: horizontal-tb;
  }

  .solution-process-response::before {
    inset: 0 auto 0 50%;
    width: 1px;
    height: auto;
  }

  .solution-process-response i {
    top: -4px;
    left: calc(50% - 4px);
    animation-name: solution-response-y;
  }

  .solution-process-matrix__axes {
    grid-template-rows: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-right: 0;
    writing-mode: horizontal-tb;
  }

  .solution-process-matrix__axes span {
    min-height: 36px;
    border-right: 1px solid rgb(124 165 255 / 16%);
    border-bottom: 0;
  }

  .solution-process-matrix__axes span:last-child {
    border-right: 0;
  }

  .solution-process-loop {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .solution-process-filter__journey {
    grid-template-columns: minmax(0, 1fr);
  }

  .solution-process-filter__gate {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    min-height: 86px;
    border: 1px solid rgb(170 145 255 / 35%);
    border-inline: 0;
  }

  .solution-process-filter__gate::before,
  .solution-process-filter__gate::after {
    display: none;
  }

  .solution-process-filter__gate span {
    z-index: 1;
    justify-self: center;
    padding: 4px 6px;
    background: #061521;
    position: relative;
  }

  .solution-process-filter__gate i {
    inset: 8px auto 8px calc(50% - 1px);
    width: 2px;
    height: auto;
    transform-origin: top;
    animation-name: solution-filter-y;
  }
}

@media (max-width: 720px) {
  .solution-process-graphic::after {
    top: 67px;
  }

  .solution-process-map {
    gap: 14px;
    padding: 18px 16px 20px;
  }

  .solution-process-terminal {
    min-height: 0;
  }

  .solution-process-motif--scope {
    --scope-route-y: 64%;
    width: 100%;
    min-height: 84px;
    border-right: 0;
    border-bottom: 1px dashed rgb(255 154 120 / 42%);
  }

  .solution-process-motif--scope::before {
    top: var(--scope-route-y);
    left: 9%;
    right: 9%;
  }

  .solution-process-motif--scope small {
    top: 6px;
    right: 8px;
    bottom: auto;
    writing-mode: horizontal-tb;
  }

  .solution-process-motif__boundary {
    top: calc(var(--scope-route-y) - 4px);
    left: 12%;
    right: 12%;
    width: auto;
    height: 8px;
    border: 0;
    border-left: 1px solid var(--solution-accent);
    border-right: 1px solid var(--solution-accent);
  }

  .solution-process-motif__probe {
    top: calc(var(--scope-route-y) - 4px);
    left: 9%;
    animation-name: security-process-mobile-pulse;
  }

  .solution-process-motif__target {
    top: calc(var(--scope-route-y) - 21px);
    right: 9%;
  }

  .solution-process-decision {
    width: 100%;
    height: 48px;
  }

  .solution-process-decision::before {
    top: 8px;
    left: calc(50% - 16px);
    width: 32px;
    height: 32px;
  }

  .solution-process-decision i,
  .solution-process-decision i:last-child {
    left: 50%;
    right: auto;
    width: 1px;
    height: 8px;
  }

  .solution-process-decision i {
    top: 0;
  }

  .solution-process-decision i:last-child {
    top: auto;
    bottom: 0;
  }

  .solution-process-map--incident-timeline {
    padding-top: 18px;
  }

  .solution-process-map--incident-timeline > .solution-process-incident__status {
    display: grid;
    grid-template-columns: auto minmax(12px, 1fr) auto;
    gap: 8px;
  }

  .solution-process-incident__status::after {
    grid-column: 2;
    grid-row: 1;
    order: initial;
  }

  .solution-process-incident__status small {
    grid-column: 1;
    grid-row: 1;
  }

  .solution-process-incident__status b {
    grid-column: 3;
    grid-row: 1;
  }

  .solution-process-incident__status span {
    display: none;
  }

  .solution-process-steps--incident::before {
    left: 26px;
  }

  .solution-process-loop {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .solution-process-loop__core {
    width: 98px;
    height: 98px;
  }

  .solution-process-steps--loop {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-top: 0;
  }
}

@media (max-width: 420px) {
  .solution-process-map--control-matrix .solution-process-matrix__axes {
    grid-template-rows: repeat(3, auto);
    grid-template-columns: minmax(0, 1fr);
  }

  .solution-process-map--control-matrix .solution-process-matrix__axes span {
    justify-content: flex-start;
    min-height: 32px;
    padding-inline: 10px;
    border-right: 0;
    border-bottom: 1px solid rgb(124 165 255 / 16%);
  }

  .solution-process-map--control-matrix .solution-process-matrix__axes span:last-child {
    border-bottom: 0;
  }

  .solution-process-map--signal-filter .solution-process-filter__gate {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding-block: 8px;
  }

  .solution-process-map--signal-filter .solution-process-filter__gate i {
    display: none;
  }
}

@keyframes security-process-mobile-pulse {
  0%, 100% { opacity: 0.46; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .solution-process-graphic::after,
  .solution-process-terminal--outcome::after,
  .solution-process-steps li::before,
  .solution-process-step__index,
  .solution-process-motif__probe {
    animation: none !important;
  }

  .solution-process-graphic::after {
    display: none;
  }

  .solution-process-terminal--outcome::after {
    opacity: 0.72;
    transform: scaleX(1);
  }

  .solution-process-steps li::before {
    opacity: 0.12;
  }

  .solution-process-step__index,
  .solution-process-motif__probe {
    transform: none;
  }
}

@media (max-width: 1120px) and (prefers-reduced-motion: reduce) {
  .solution-process-response i {
    transform: translateY(48px);
  }
}

@media (forced-colors: active) {
  .solution-process-graphic,
  .solution-process-terminal,
  .solution-process-steps li,
  .solution-process-step__index,
  .solution-process-filter__gate {
    border-color: CanvasText;
  }

  .solution-process-graphic::after,
  .solution-process-terminal::before,
  .solution-process-terminal--outcome::after,
  .solution-process-steps li::before {
    display: none;
  }
}