/* Animated EKS architecture component — scoped to the 2048 EKS case study only. */
body[data-case="eks"] .eks-visual-architecture{
  margin-top:24px;
}

body[data-case="eks"] .eks-arch-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
}

body[data-case="eks"] .eks-arch-toolbar h3{
  margin:4px 0 0;
  font-size:clamp(25px,3vw,36px);
  line-height:1.04;
}

body[data-case="eks"] .eks-arch-toolbar p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:13px;
}

body[data-case="eks"] .eks-arch-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

body[data-case="eks"] .eks-arch-tabs{
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:10px;
  background:color-mix(in srgb,var(--panel) 42%,transparent);
}

body[data-case="eks"] .eks-arch-tab,
body[data-case="eks"] .eks-arch-expand{
  min-height:36px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:820;
  cursor:pointer;
  transition:background 180ms ease,border-color 180ms ease,color 180ms ease,transform 180ms ease;
}

body[data-case="eks"] .eks-arch-tab:hover,
body[data-case="eks"] .eks-arch-tab:focus-visible,
body[data-case="eks"] .eks-arch-expand:hover,
body[data-case="eks"] .eks-arch-expand:focus-visible{
  color:var(--text);
  border-color:var(--line-strong);
}

body[data-case="eks"] .eks-arch-tab.active{
  background:var(--orange);
  border-color:var(--orange);
  color:#071c1d;
  box-shadow:0 6px 18px color-mix(in srgb,var(--orange) 18%,transparent);
}

body[data-case="eks"] .eks-arch-expand{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-color:var(--line);
  color:var(--text);
}
body[data-case="eks"] .eks-arch-expand:hover{transform:translateY(-1px)}

body[data-case="eks"] .eks-arch-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 255px;
  gap:14px;
}

body[data-case="eks"] .eks-arch-canvas,
body[data-case="eks"] .eks-arch-info{
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb,var(--panel) 32%,transparent);
}

body[data-case="eks"] .eks-arch-canvas{
  min-width:0;
  min-height:226px;
  padding:24px 18px;
  display:flex;
  align-items:center;
  overflow:hidden;
}

body[data-case="eks"] .eks-arch-flow{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  transition:opacity 180ms ease,transform 220ms ease;
}

body[data-case="eks"] .eks-arch-flow.is-switching{
  opacity:0;
  transform:translateY(5px);
}

body[data-case="eks"] .eks-arch-node{
  position:relative;
  flex:0 1 118px;
  min-width:88px;
  min-height:122px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:13px 9px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:color-mix(in srgb,var(--panel) 78%,var(--bg));
  color:var(--text);
  text-align:center;
  cursor:pointer;
  opacity:0;
  transform:translateY(10px) scale(.985);
  transition:opacity 360ms ease,transform 220ms ease,border-color 180ms ease,background 180ms ease,box-shadow 180ms ease;
}

body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-node{
  opacity:1;
  transform:none;
}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-node:nth-of-type(1){transition-delay:40ms}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-node:nth-of-type(2){transition-delay:150ms}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-node:nth-of-type(3){transition-delay:260ms}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-node:nth-of-type(4){transition-delay:370ms}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-node:nth-of-type(5){transition-delay:480ms}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-node:nth-of-type(6){transition-delay:590ms}

body[data-case="eks"] .eks-arch-node:hover,
body[data-case="eks"] .eks-arch-node:focus-visible{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--green) 62%,var(--line));
  box-shadow:0 10px 28px color-mix(in srgb,var(--green) 10%,transparent);
}

body[data-case="eks"] .eks-arch-node.active{
  border-color:var(--orange);
  background:color-mix(in srgb,var(--orange) 7%,var(--panel));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--orange) 24%,transparent),0 10px 28px color-mix(in srgb,var(--orange) 10%,transparent);
}

body[data-case="eks"] .eks-arch-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  color:var(--green);
  transition:transform 200ms ease,color 180ms ease,filter 180ms ease;
}
body[data-case="eks"] .eks-arch-icon svg{width:30px;height:30px;display:block}
body[data-case="eks"] .eks-arch-node:hover .eks-arch-icon,
body[data-case="eks"] .eks-arch-node:focus-visible .eks-arch-icon{transform:scale(1.08)}
body[data-case="eks"] .eks-arch-node.active .eks-arch-icon{
  color:var(--orange);
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--orange) 36%,transparent));
}

body[data-case="eks"] .eks-arch-node strong{
  font-size:12px;
  line-height:1.2;
}
body[data-case="eks"] .eks-arch-node small{
  color:var(--muted);
  font-size:9px;
  line-height:1.25;
}

body[data-case="eks"] .eks-arch-link{
  position:relative;
  flex:1 1 30px;
  min-width:20px;
  max-width:52px;
  height:2px;
  margin:0 5px;
  overflow:visible;
  background:linear-gradient(90deg,var(--green),color-mix(in srgb,var(--green) 46%,var(--line)));
  transform:scaleX(0);
  transform-origin:left center;
  opacity:.72;
}

body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-link{
  animation:eksArchDraw 380ms ease forwards;
}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-link:nth-of-type(1){animation-delay:110ms}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-link:nth-of-type(2){animation-delay:220ms}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-link:nth-of-type(3){animation-delay:330ms}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-link:nth-of-type(4){animation-delay:440ms}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-link:nth-of-type(5){animation-delay:550ms}

body[data-case="eks"] .eks-arch-link::after{
  content:"";
  position:absolute;
  top:50%;
  left:-4px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 9px color-mix(in srgb,var(--orange) 54%,transparent);
  opacity:0;
  transform:translateY(-50%);
}

body[data-case="eks"] .eks-visual-architecture.is-ready:not(.is-switching) .eks-arch-link::after{
  animation:eksArchSignal 3.2s ease-in-out infinite;
}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-link:nth-of-type(1)::after{animation-delay:.55s}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-link:nth-of-type(2)::after{animation-delay:.82s}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-link:nth-of-type(3)::after{animation-delay:1.09s}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-link:nth-of-type(4)::after{animation-delay:1.36s}
body[data-case="eks"] .eks-visual-architecture.is-ready .eks-arch-link:nth-of-type(5)::after{animation-delay:1.63s}

@keyframes eksArchDraw{to{transform:scaleX(1)}}
@keyframes eksArchSignal{
  0%,58%{left:-4px;opacity:0}
  64%{opacity:1}
  82%{opacity:1}
  88%,100%{left:calc(100% - 4px);opacity:0}
}

body[data-case="eks"] .eks-arch-info{
  min-height:226px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:border-color 180ms ease,background 180ms ease,transform 180ms ease,opacity 180ms ease;
}
body[data-case="eks"] .eks-arch-info.is-changing{opacity:.35;transform:translateY(3px)}
body[data-case="eks"] .eks-arch-info-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:var(--orange);
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
}
body[data-case="eks"] .eks-arch-info-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px color-mix(in srgb,var(--green) 55%,transparent);
}
body[data-case="eks"] .eks-arch-info h4{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.12;
}
body[data-case="eks"] .eks-arch-info p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.58;
}
body[data-case="eks"] .eks-arch-info strong{
  display:block;
  margin:14px 0 7px;
  color:var(--green);
  font-size:11px;
}
body[data-case="eks"] .eks-arch-benefits{
  display:grid;
  gap:5px;
  margin:0;
  padding:0;
  list-style:none;
}
body[data-case="eks"] .eks-arch-benefits li{
  position:relative;
  padding-left:16px;
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
}
body[data-case="eks"] .eks-arch-benefits li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--green);
  font-weight:900;
}

body.eks-architecture-modal-open{overflow:hidden}
body[data-case="eks"] .eks-visual-architecture.is-expanded{
  position:fixed;
  inset:18px;
  z-index:120;
  margin:0;
  padding:24px;
  overflow:auto;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:var(--bg);
  box-shadow:0 30px 100px rgba(0,0,0,.5);
}
body[data-case="eks"] .eks-visual-architecture.is-expanded::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(2,16,17,.76);
  backdrop-filter:blur(8px);
}
body[data-case="eks"] .eks-visual-architecture.is-expanded .eks-arch-stage{
  grid-template-columns:minmax(0,1fr) 310px;
}
body[data-case="eks"] .eks-visual-architecture.is-expanded .eks-arch-canvas,
body[data-case="eks"] .eks-visual-architecture.is-expanded .eks-arch-info{min-height:360px}
body[data-case="eks"] .eks-visual-architecture.is-expanded .eks-arch-node{min-height:150px}

@media(max-width:900px){
  body[data-case="eks"] .eks-arch-stage{grid-template-columns:1fr}
  body[data-case="eks"] .eks-arch-info{min-height:0}
  body[data-case="eks"] .eks-arch-node{min-width:78px}
  body[data-case="eks"] .eks-arch-link{min-width:14px;margin-inline:3px}
}

@media(max-width:700px){
  body[data-case="eks"] .eks-arch-toolbar{align-items:flex-start;flex-direction:column}
  body[data-case="eks"] .eks-arch-controls{width:100%;justify-content:space-between}
  body[data-case="eks"] .eks-arch-tabs{flex:1}
  body[data-case="eks"] .eks-arch-tab{flex:1}
  body[data-case="eks"] .eks-arch-canvas{padding:17px 14px;overflow:auto}
  body[data-case="eks"] .eks-arch-flow{min-width:620px;justify-content:flex-start}
  body[data-case="eks"] .eks-arch-node{flex-basis:100px;min-width:100px}
  body[data-case="eks"] .eks-visual-architecture.is-expanded{inset:8px;padding:16px}
}

@media(prefers-reduced-motion:reduce){
  body[data-case="eks"] .eks-arch-node,
  body[data-case="eks"] .eks-arch-tab,
  body[data-case="eks"] .eks-arch-expand,
  body[data-case="eks"] .eks-arch-flow,
  body[data-case="eks"] .eks-arch-info{transition:none}
  body[data-case="eks"] .eks-arch-node{opacity:1;transform:none}
  body[data-case="eks"] .eks-arch-link{transform:scaleX(1);animation:none!important}
  body[data-case="eks"] .eks-arch-link::after{animation:none!important;display:none}
}