/* Slide 3: three architectural planes, independent of the stakeholder graph.
   All layout dimensions use the deck's 1600 x 900 design coordinates. */
.platform .ambient-sphere-v10{opacity:.16}
.platform .ambient-orbit-field{opacity:.1}
.platform-architecture{
  position:absolute;left:82px;right:82px;top:370px;height:350px;
  display:grid;grid-template-columns:425px minmax(0,1fr);gap:32px;
  isolation:isolate;z-index:5;
}
.architecture-explainer{display:flex;flex-direction:column;gap:9px;align-self:center}
.architecture-kicker{margin:0 0 5px;font:700 10px/1.3 var(--font);letter-spacing:.13em;color:#81bdcc}
.architecture-step{
  appearance:none;width:100%;min-height:100px;display:flex;align-items:flex-start;gap:16px;
  padding:15px 17px;text-align:left;cursor:pointer;
  border:1px solid #84d6e32e;border-radius:3px;
  background:linear-gradient(125deg,#11405299,#0a2b3c80);color:#cce9ee;
  transition:background .45s,border-color .45s,box-shadow .45s,translate .45s;
}
.architecture-index{font:500 15px/1.5 var(--display);color:#8cc5d1;min-width:22px}
.architecture-copy{display:block;flex:1}
.architecture-copy>strong{display:block;font:500 21px/1.2 var(--display);letter-spacing:-.035em}
.architecture-copy>span{display:block;margin-top:6px;font:400 13px/1.5 var(--font);color:#a9c8d3}
.architecture-indicator{flex:none;width:6px;height:6px;border:1px solid #83bfcc;border-radius:50%;margin-top:9px}
.architecture-step:hover{border-color:#a0e7f08c}
.architecture-step:focus-visible{outline:2px solid #d7ffff;outline-offset:4px}
.slide.platform .architecture-step[aria-pressed="true"]{
  background:linear-gradient(120deg,#c4f6f5,#a6e4eb);color:#0b3443;
  border-color:#ddffff;translate:5px 0;
  box-shadow:0 12px 30px #00000029,0 0 25px #a0e9ee14;
}
.architecture-step[aria-pressed="true"] .architecture-index,
.architecture-step[aria-pressed="true"] .architecture-copy>span{color:#245566}
.architecture-step[aria-pressed="true"] .architecture-indicator{background:#176c7e;border-color:#176c7e;box-shadow:0 0 0 4px #176c7e1a}
.architecture-visual{min-width:0;height:350px;align-self:center;position:relative}
.architecture-stack{display:block;width:100%;height:100%;overflow:visible}
.architecture-column{fill:none;stroke:#a6e9f0;stroke-width:1;stroke-dasharray:3 6;opacity:.3}
.architecture-transfer{fill:none;stroke:#dbffff;stroke-width:2;stroke-dasharray:10 64;stroke-linecap:round;opacity:.8}
.architecture-plane{fill:url(#architectureGlass);stroke:#7fc6d6;stroke-opacity:.62;stroke-width:1.2;stroke-linejoin:round;transition:fill .55s,stroke .55s,stroke-opacity .55s}
.architecture-fascia{fill:url(#architectureEdge);stroke:#80c6d533;stroke-width:1}
.architecture-layer{opacity:0;visibility:hidden;transform-box:fill-box;transform-origin:center;transition:translate .55s cubic-bezier(.2,.8,.2,1),filter .55s}
.architecture-link{opacity:0;visibility:hidden}
.architecture-trace{fill:none;stroke:#8ed5df;stroke-width:.7;opacity:.18}
.architecture-traffic{fill:none;stroke:#dcffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:17 1180;opacity:.65}
.architecture-ports{fill:#b3f4f6;filter:drop-shadow(0 0 5px #b2f9fc99)}
.architecture-plane-kicker{font:700 10px var(--font);letter-spacing:.13em;fill:#a1ccd7;text-anchor:middle}
.architecture-plane-title{font:500 19px var(--display);letter-spacing:-.015em;fill:#d7f5f7;text-anchor:middle}
.architecture-plane-detail{font:400 12.5px var(--font);fill:#bddbe3;text-anchor:middle}
.architecture-layer-number{font:500 14px var(--display);fill:#8fc8d6;text-anchor:middle}
.platform-architecture[data-active-layer="0"] [data-layer="0"],
.platform-architecture[data-active-layer="1"] [data-layer="1"],
.platform-architecture[data-active-layer="2"] [data-layer="2"]{translate:0 -7px;filter:drop-shadow(0 8px 16px #69dbe438)}
.platform-architecture[data-active-layer="0"] [data-layer="0"] .architecture-plane,
.platform-architecture[data-active-layer="1"] [data-layer="1"] .architecture-plane,
.platform-architecture[data-active-layer="2"] [data-layer="2"] .architecture-plane{fill:#235e70;stroke:#c4fcff;stroke-opacity:1;stroke-width:1.8}
.platform-architecture[data-active-layer="0"] [data-layer="0"] .architecture-plane-title,
.platform-architecture[data-active-layer="1"] [data-layer="1"] .architecture-plane-title,
.platform-architecture[data-active-layer="2"] [data-layer="2"] .architecture-plane-title{fill:#edffff}
@keyframes architectureTraffic{from{stroke-dashoffset:1197}to{stroke-dashoffset:0}}
@keyframes architectureConnect{from{stroke-dashoffset:74}to{stroke-dashoffset:0}}
@keyframes architectureReveal{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes architectureLinkReveal{from{opacity:0}to{opacity:1}}
/* A layer enters with its matching list highlight and remains until wraparound. */
.slide.platform.active .architecture-layer[data-layer="0"],
.slide.platform.active .platform-architecture[data-active-layer="1"] [data-layer="1"],
.slide.platform.active .platform-architecture[data-active-layer="2"] .architecture-layer{visibility:visible;animation:architectureReveal .65s cubic-bezier(.2,.8,.2,1) both}
.slide.platform.active .platform-architecture[data-active-layer="1"] [data-connect="1"],
.slide.platform.active .platform-architecture[data-active-layer="2"] .architecture-link{visibility:visible;animation:architectureLinkReveal .65s ease both}
@media(prefers-reduced-motion:no-preference){
  .slide.platform.active .architecture-traffic{animation:architectureTraffic 6.5s linear infinite}
  .slide.platform.active [data-layer="1"] .architecture-traffic{animation-delay:-2.2s}
  .slide.platform.active [data-layer="2"] .architecture-traffic{animation-delay:-4.4s}
  .slide.platform.active .architecture-transfer{animation:architectureConnect 2.6s linear infinite}
  .slide.platform.active .architecture-transfer:nth-child(2){animation-delay:-1.3s}
}
.presentation-paused .architecture-step,
.presentation-paused .architecture-layer{transition:none}
@media(prefers-reduced-motion:reduce){
  .architecture-step,.architecture-layer{transition:none!important;transform:none!important;translate:none!important}
  .architecture-traffic,.architecture-transfer{display:none}
  .slide.platform.active .architecture-layer,.slide.platform.active .architecture-link{opacity:1!important;visibility:visible!important;animation:none!important}
}
