/*
 * V53 / DECISION GATE + CONTROL STACK
 * Two audiences, one conversion contract: exact identity before scale.
 */

.route-choice--v53,
.route-choice {
  position: relative;
  overflow: hidden;
  padding: 150px 0 110px;
  background:
    radial-gradient(circle at 22% 46%, rgba(231,199,125,.06), transparent 27rem),
    radial-gradient(circle at 78% 50%, rgba(144,205,219,.045), transparent 30rem),
    #080a0a;
  isolation: isolate;
}

.route-choice::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .36;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(231,199,125,.055) 50%, transparent 50.1%),
    linear-gradient(transparent 49.9%, rgba(231,199,125,.04) 50%, transparent 50.1%);
  background-size: 10vw 10vw;
  content: "";
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 20%, #000 78%, transparent);
}

.route-heading { position: relative; z-index: 2; }
.route-heading::after {
  position: absolute;
  right: 0;
  bottom: -34px;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,199,125,.36));
  content: "";
}

.route-doors {
  position: relative;
  z-index: 1;
  gap: 1px;
  margin-top: 78px;
  border: 1px solid rgba(231,199,125,.1);
  background: rgba(231,199,125,.1);
  box-shadow: 0 50px 120px rgba(0,0,0,.36);
}

.route-door {
  min-height: 610px;
  padding: 38px 42px 40px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.018), transparent 38%),
    rgba(10,13,13,.96);
  transition: background .55s ease, box-shadow .55s ease;
}

.route-door::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: linear-gradient(135deg, rgba(231,199,125,.07), transparent 44%);
  content: "";
  transition: opacity .45s ease;
}

.route-door--fleet::after {
  background: linear-gradient(135deg, rgba(144,205,219,.055), transparent 44%);
}

.route-door:hover,
.route-door:focus-visible {
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(231,199,125,.28), 0 40px 100px rgba(0,0,0,.32);
}

.route-door--fleet:hover,
.route-door--fleet:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(144,205,219,.22), 0 40px 100px rgba(0,0,0,.32);
}

.route-door:hover::after,
.route-door:focus-visible::after { opacity: 1; }

.route-door .door-index,
.route-door > h3,
.route-door > p,
.route-door > b,
.door-assurance { position: relative; z-index: 3; }

.route-door > h3 { max-width: 54%; margin-top: auto; }
.route-door > p { max-width: 54%; }

.door-assurance {
  display: flex;
  width: 100%;
  gap: 8px;
  margin-bottom: 20px;
}

.door-assurance span {
  border: 1px solid rgba(231,199,125,.12);
  padding: 7px 9px;
  color: rgba(215,208,191,.44);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .15em;
  white-space: nowrap;
}

.route-door--fleet .door-assurance span { border-color: rgba(144,205,219,.12); }

.miner-identity,
.fleet-orchestration {
  position: absolute;
  z-index: 1;
  top: 70px;
  right: 6%;
  width: min(42%, 270px);
  aspect-ratio: 1;
}

.miner-identity {
  display: grid;
  place-items: center;
  transform: rotateX(57deg) rotateZ(-31deg);
  transform-style: preserve-3d;
}

.identity-orbit {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(231,199,125,.22);
  transform: rotate(45deg);
  transition: scale .7s cubic-bezier(.16,1,.3,1), rotate .7s cubic-bezier(.16,1,.3,1);
}

.identity-orbit--two {
  inset: 21%;
  border-color: rgba(144,205,219,.2);
  transform: rotate(18deg);
}

.route-door:hover .identity-orbit--one { scale: 1.08; rotate: 10deg; }
.route-door:hover .identity-orbit--two { scale: .92; rotate: -8deg; }

.identity-core {
  display: grid;
  width: 84px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255,227,166,.45);
  background: rgba(231,199,125,.1);
  box-shadow: 0 0 54px rgba(231,199,125,.13), inset 0 0 30px rgba(231,199,125,.06);
  transform: translateZ(25px) rotate(45deg);
}

.identity-core::before,
.identity-core::after {
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(231,199,125,.2);
  content: "";
}
.identity-core::after { inset: 22px; background: rgba(231,199,125,.08); }
.identity-core i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f4d58e;
  box-shadow: 0 0 18px #e7c77d;
}
.identity-core b,
.identity-core small {
  position: absolute;
  z-index: 2;
  font-size: 7px;
  letter-spacing: .15em;
  transform: rotate(-45deg);
}
.identity-core b { translate: 0 -13px; color: #f1dca9; }
.identity-core small { translate: 0 13px; color: rgba(202,195,179,.44); }

.identity-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(218,211,194,.42);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .13em;
  transform: rotateZ(31deg) rotateX(-57deg);
}
.identity-node i { color: rgba(231,199,125,.7); font-style: normal; }
.identity-node--model { top: 5%; left: 7%; }
.identity-node--board { top: 10%; right: -4%; }
.identity-node--file { bottom: 7%; right: -2%; }
.identity-node--test { bottom: 2%; left: 3%; }

.fleet-orchestration {
  perspective: 760px;
  transform: rotateX(60deg) rotateZ(-31deg);
  transform-style: preserve-3d;
}

.fleet-node-map {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
}

.fleet-node-map i {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid rgba(144,205,219,.15);
  background: rgba(144,205,219,.025);
  transition: background .3s ease, border-color .3s ease, translate .45s cubic-bezier(.16,1,.3,1);
}

.fleet-node-map i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(144,205,219,.42);
  content: "";
  translate: -50% -50%;
}

.route-door--fleet:hover .fleet-node-map i:nth-child(-n+8) {
  border-color: rgba(144,205,219,.48);
  background: rgba(144,205,219,.12);
  translate: 0 0 18px;
}

.fleet-wave {
  position: absolute;
  z-index: 2;
  inset: -8%;
  border: 1px solid rgba(144,205,219,.18);
  border-radius: 50%;
  opacity: 0;
}
.route-door--fleet:hover .fleet-wave--one { animation: fleetWave 2.2s ease-out infinite; }
.route-door--fleet:hover .fleet-wave--two { animation: fleetWave 2.2s ease-out .75s infinite; }
@keyframes fleetWave { 0% { scale: .35; opacity: .45; } 100% { scale: 1.15; opacity: 0; } }

.fleet-gate {
  position: absolute;
  z-index: 3;
  top: 39%;
  left: 17%;
  display: grid;
  width: 66%;
  gap: 5px;
  border: 1px solid rgba(144,205,219,.35);
  padding: 11px;
  background: rgba(7,11,12,.82);
  box-shadow: 0 20px 45px rgba(0,0,0,.42);
  text-align: center;
  transform: translateZ(28px) rotateZ(31deg) rotateX(-60deg);
}
.fleet-gate b,
.fleet-gate small { font-size: 6px; letter-spacing: .14em; }
.fleet-gate b { color: #b9dfe6; }
.fleet-gate small { color: rgba(185,223,230,.4); }

.route-continuity {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr max-content;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}
.route-continuity i { height: 1px; background: linear-gradient(90deg, transparent, rgba(231,199,125,.26), transparent); }
.route-continuity span,
.route-continuity b {
  color: rgba(213,207,193,.28);
  font-size: 6px;
  letter-spacing: .17em;
}
.route-continuity b { color: rgba(231,199,125,.5); }

.control-stack {
  padding-top: 165px;
  background:
    radial-gradient(circle at 78% 22%, rgba(231,199,125,.045), transparent 27rem),
    #050707;
}

.stack-intro {
  display: grid;
  grid-template-columns: 1.6fr .7fr;
  gap: 60px;
  align-items: end;
}
.stack-intro .eyebrow,
.stack-intro h2 { grid-column: 1; }
.stack-intro > p:last-child { grid-column: 2; grid-row: 1 / span 2; }

.stack-card {
  --stack-progress: 0;
  min-height: 510px;
  border-color: rgba(231,199,125,.12);
  background:
    linear-gradient(120deg, rgba(255,255,255,.022), transparent 42%),
    radial-gradient(circle at 78% 50%, rgba(231,199,125,.035), transparent 27rem),
    #0b0e0e;
  box-shadow: 0 -35px 100px rgba(0,0,0,.55);
  transition: border-color .45s ease, filter .45s ease;
}
.stack-card.is-current { border-color: rgba(231,199,125,.31); }
.stack-card--04.is-current,
.stack-card--05.is-current { border-color: rgba(144,205,219,.26); }

.stack-card::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,223,154,calc(.12 + var(--stack-progress) * .32)), transparent);
  content: "";
  transform: scaleX(var(--stack-progress));
  transform-origin: 0 50%;
}

.stack-card > .stack-copy {
  z-index: 3;
  max-width: 57%;
}
.stack-copy p { max-width: 610px; }

.stack-action {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 29px;
  border-top: 1px solid rgba(231,199,125,.14);
  padding-top: 14px;
  color: rgba(232,220,194,.57);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.stack-action b { color: #e7c77d; font-size: 14px; transition: translate .25s ease; }
.stack-action:hover b { translate: 6px; }

.stack-card > .stack-visual {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 7%;
  width: 35%;
  height: 62%;
  max-width: none;
  /* приказ 29.07: без fade - инфографика всегда плотная, иначе «пелена» на входе карты */
  opacity: 1;
  transform: translateY(calc(-46% + (1 - var(--stack-progress)) * 18px)) scale(calc(.94 + var(--stack-progress) * .06));
  transition: opacity .2s linear, transform .2s linear;
}
.stack-visual > em {
  position: absolute;
  right: 0;
  bottom: 0;
  color: rgba(214,207,192,.3);
  font-size: 6px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .18em;
}

.core-field {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: rotateX(61deg) rotateZ(-32deg);
  transform-style: preserve-3d;
}
.core-field > i {
  position: absolute;
  inset: calc(var(--ring, 0) * 11%);
  border: 1px solid rgba(231,199,125,calc(.26 - var(--ring, 0) * .035));
  transform: rotate(45deg) translateZ(calc(var(--ring, 0) * 7px));
}
.core-field > i:nth-child(1) { --ring: 0; }
.core-field > i:nth-child(2) { --ring: 1; }
.core-field > i:nth-child(3) { --ring: 2; }
.core-field > i:nth-child(4) { --ring: 3; background: rgba(231,199,125,.08); box-shadow: 0 0 60px rgba(231,199,125,.1); }
.stack-card.is-current .core-field > i { animation: coreBreath 4s ease-in-out calc(var(--ring) * -.42s) infinite; }
@keyframes coreBreath { 50% { translate: 0 0 13px; rotate: 6deg; } }
.core-field span {
  z-index: 2;
  display: grid;
  gap: 5px;
  text-align: center;
  transform: translateZ(45px) rotateZ(32deg) rotateX(-61deg);
}
.core-field b { color: #efd89f; font-size: 18px; font-weight: 400; letter-spacing: .12em; }
.core-field small { color: rgba(231,199,125,.42); font-size: 6px; letter-spacing: .18em; }

.match-path,
.verify-circuit {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}
.match-path span,
.verify-circuit span {
  display: grid;
  min-width: 82px;
  gap: 8px;
  border: 1px solid rgba(231,199,125,.14);
  padding: 20px 14px;
  background: rgba(5,8,8,.72);
  text-align: center;
}
.match-path span.is-resolved { border-color: rgba(231,199,125,.42); box-shadow: 0 0 45px rgba(231,199,125,.08); }
.match-path small,
.verify-circuit small { color: rgba(213,207,194,.35); font-size: 6px; letter-spacing: .14em; }
.match-path b,
.verify-circuit b { color: #ded4bd; font-size: 10px; letter-spacing: .1em; }
.match-path > i,
.verify-circuit > i { color: rgba(231,199,125,.5); font-size: 12px; font-style: normal; }
.stack-card.is-current .match-path span.is-resolved { animation: resolvedPulse 2.4s ease-in-out infinite; }
@keyframes resolvedPulse { 50% { box-shadow: 0 0 65px rgba(231,199,125,.17); } }

.profile-chart { width: 100%; height: 82%; overflow: visible; }
.profile-chart path { fill: none; vector-effect: non-scaling-stroke; }
.chart-grid { stroke: rgba(214,207,193,.08); stroke-width: 1; }
.profile-line { stroke-width: 1.3; stroke-dasharray: 620; stroke-dashoffset: calc(620 * (1 - var(--stack-progress))); }
.profile-line--eco { stroke: rgba(144,205,219,.32); }
.profile-line--balanced { stroke: #e7c77d; filter: drop-shadow(0 0 5px rgba(231,199,125,.35)); }
.profile-line--max { stroke: rgba(224,228,223,.27); }
.profile-legend { display: flex; justify-content: flex-end; gap: 20px; }
.profile-legend span { color: rgba(205,201,191,.3); font-size: 6px; letter-spacing: .15em; }
.profile-legend .is-active { color: #e7c77d; }

.thermal-fans {
  position: absolute;
  top: 10%;
  left: 2%;
  display: flex;
  gap: 18px;
}
.thermal-fans > i {
  position: relative;
  display: grid;
  width: 92px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(144,205,219,.2);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(144,205,219,.14) 0 8deg, transparent 8deg 24deg);
  font-style: normal;
}
.thermal-fans > i::after { width: 24px; aspect-ratio: 1; border: 1px solid rgba(231,199,125,.35); border-radius: 50%; background: #101414; content: ""; }
.stack-card.is-current .thermal-fans > i { animation: v53Fan 1.8s linear infinite; }
.stack-card.is-current .thermal-fans > i:nth-child(2) { animation-direction: reverse; animation-duration: 2.1s; }
@keyframes v53Fan { to { rotate: 1turn; } }

.thermal-gauges {
  position: absolute;
  right: 0;
  bottom: 4%;
  left: 0;
  display: grid;
  gap: 13px;
}
.thermal-gauges span { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 16px; }
.thermal-gauges small { color: rgba(205,201,191,.34); font-size: 6px; letter-spacing: .14em; }
.thermal-gauges b { color: #c7dfe2; font-size: 8px; letter-spacing: .08em; }
.thermal-gauges i { grid-column: 1 / -1; height: 2px; background: rgba(144,205,219,.08); }
.thermal-gauges i::after { display: block; width: calc(var(--level) * 100%); height: 100%; background: linear-gradient(90deg, #75b9c8, #e7c77d); box-shadow: 0 0 9px rgba(144,205,219,.25); content: ""; transform: scaleX(var(--stack-progress)); transform-origin: 0 50%; }

.rollout-map {
  position: absolute;
  inset: 4% 0 22%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  perspective: 700px;
  transform: rotateX(57deg) rotateZ(-26deg);
}
.rollout-map i { border: 1px solid rgba(144,205,219,.14); background: rgba(144,205,219,.025); }
.stack-card.is-current .rollout-map i:nth-child(-n+4) { background: rgba(231,199,125,.12); border-color: rgba(231,199,125,.4); animation: rolloutCell 2.8s ease-in-out infinite; }
.stack-card.is-current .rollout-map i:nth-child(n+5):nth-child(-n+8) { animation: rolloutCell 2.8s ease-in-out .8s infinite; }
@keyframes rolloutCell { 50% { translate: 0 0 14px; background: rgba(144,205,219,.12); border-color: rgba(144,205,219,.4); } }
.rollout-stages { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; }
.rollout-stages span { border: 1px solid rgba(144,205,219,.13); padding: 8px 10px; color: rgba(196,214,217,.4); font-size: 6px; letter-spacing: .13em; }
.rollout-stages span.is-live { border-color: rgba(231,199,125,.32); color: #e7c77d; }
.rollout-stages em { color: rgba(144,205,219,.22); font-size: 8px; font-style: normal; }

.verify-circuit { flex-wrap: wrap; align-content: center; }
.verify-circuit span { min-width: 74px; padding: 17px 10px; }
.verify-circuit .rollback { border-color: rgba(144,205,219,.24); }
.verify-circuit .return { flex-basis: 100%; margin-top: 4px; text-align: center; transform: rotate(18deg); }
.stack-card.is-current .verify-circuit > i:not(.return) { animation: verifyArrow 1.8s ease-in-out infinite; }
@keyframes verifyArrow { 50% { color: #f0d38e; translate: 4px; } }

@media (max-width: 900px) {
  .route-door { min-height: 560px; padding: 30px; }
  .route-door > h3,
  .route-door > p { max-width: 64%; }
  .miner-identity,
  .fleet-orchestration { right: 2%; width: 40%; }
  .stack-card > .stack-copy { max-width: 62%; }
  .stack-card > .stack-visual { right: 4%; width: 34%; }
  .match-path,
  .verify-circuit { gap: 7px; }
  .match-path span,
  .verify-circuit span { min-width: 65px; padding: 15px 8px; }
}

@media (max-width: 760px) {
  .route-choice { padding: 110px 0 90px; }
  .route-heading { display: block; }
  .route-heading h2 { margin-top: 18px; }
  .route-heading > p:last-child { margin-top: 22px; }
  .route-heading::after { display: none; }
  .route-doors { display: grid; grid-template-columns: 1fr; margin-top: 48px; }
  .route-door { min-height: 590px; padding: 27px 24px; }
  .route-door > h3,
  .route-door > p { max-width: 100%; }
  .route-door > h3 { margin-top: auto; font-size: 38px; }
  .miner-identity,
  .fleet-orchestration {
    top: 72px;
    right: 50%;
    width: 230px;
    translate: 50% 0;
  }
  .door-assurance { overflow: hidden; }
  .door-assurance span { flex: 1; padding: 7px 5px; text-align: center; }
  .route-continuity { grid-template-columns: 1fr; text-align: center; }
  .route-continuity i,
  .route-continuity span { display: none; }

  .control-stack { padding: 110px 0 100px; }
  .stack-intro { display: block; }
  .stack-intro > p:last-child { margin-top: 22px; }
  .stack-track { display: grid; gap: 14px; width: calc(100% - 36px); }
  .stack-card,
  .stack-card--01,
  .stack-card--02,
  .stack-card--03,
  .stack-card--04,
  .stack-card--05,
  .stack-card--06 {
    position: relative;
    top: auto;
    min-height: 650px;
    margin-top: 0;
    border-radius: 18px;
    padding: 28px 24px;
  }
  .stack-card > .stack-copy { align-self: flex-start; max-width: 100%; }
  .stack-card h3 { margin-top: 15px; font-size: 39px; }
  .stack-card p { font-size: 13px; }
  .stack-action { margin-top: 20px; }
  .stack-card > .stack-visual {
    top: auto;
    right: 24px;
    bottom: 42px;
    left: 24px;
    width: auto;
    height: 43%;
    opacity: 1;
    transform: none;
  }
  .stack-card > span { display: none; }
  .thermal-fans > i { width: 74px; }
  .profile-chart { height: 76%; }
}

@media (prefers-reduced-motion: reduce) {
  .identity-orbit,
  .fleet-node-map i,
  .core-field > i,
  .thermal-fans > i,
  .rollout-map i,
  .verify-circuit > i { animation: none !important; transition: none !important; }
}
[data-v53-break] { white-space: pre-line; }