/* Amazon EKS project presentation — 09 Sep 2026
   Keeps the established portfolio card language while giving Project 01 a
   restrained teal emphasis and enough room for the larger platform story. */

body[data-page="home"] .evidence-card-eks,
body[data-page="projects"] .project-card-eks{
  border-color:color-mix(in srgb,var(--green) 34%,var(--line));
  box-shadow:0 14px 42px rgba(0,0,0,.14),inset 0 0 0 1px color-mix(in srgb,var(--green) 8%,transparent);
}

body[data-page="home"] .evidence-card-eks:hover,
body[data-page="projects"] .project-card-eks:hover{
  border-color:color-mix(in srgb,var(--green) 58%,var(--line-strong));
  box-shadow:0 18px 48px rgba(0,20,21,.24),inset 0 0 0 1px color-mix(in srgb,var(--green) 14%,transparent);
}

html[data-theme="light"] body[data-page="home"] .evidence-card-eks,
html[data-theme="light"] body[data-page="projects"] .project-card-eks{
  box-shadow:0 14px 36px rgba(20,80,82,.08),inset 0 0 0 1px color-mix(in srgb,var(--green) 10%,transparent);
}

/* Homepage stack pills keep the same shape and motion, with a restrained teal
   focus state for the EKS card only. */
body[data-page="home"] .evidence-card-eks .integrated-stack-pills>span{
  transition:transform 180ms ease,border-color 180ms ease,background-color 180ms ease,box-shadow 180ms ease;
}
body[data-page="home"] .evidence-card-eks .integrated-stack-pills>span:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--green) 72%,var(--line));
  background:color-mix(in srgb,var(--green) 11%,var(--panel));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 17%,transparent),0 0 14px color-mix(in srgb,var(--green) 18%,transparent);
}

/* Architecture nodes remain interactive and use the same tooltip behaviour as
   the other homepage project diagrams. */
body[data-page="home"] .evidence-card-eks .arch-node:hover,
body[data-page="home"] .evidence-card-eks .arch-node:focus,
body[data-page="projects"] .project-card-eks .arch-node:hover,
body[data-page="projects"] .project-card-eks .arch-node:focus{
  border-color:var(--green);
  outline-color:color-mix(in srgb,var(--green) 28%,transparent);
}

/* Platform capabilities are separate from the traffic path. The equal-column
   grid keeps the heading and all four pills on one shared visual centre. */
.eks-evidence-line{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  justify-items:stretch;
  gap:8px;
  width:min(100%,480px);
  min-height:86px;
  margin:10px auto 0;
  padding:24px 0 30px;
}
.eks-evidence-line::before{
  content:"Platform capabilities";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  color:var(--muted-2);
  font-size:9px;
  font-weight:850;
  letter-spacing:.11em;
  text-align:center;
  text-transform:uppercase;
}
.eks-evidence-line span{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  min-height:30px;
  padding:6px 10px;
  box-sizing:border-box;
  border:1px solid color-mix(in srgb,var(--green) 24%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  color:var(--muted);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.035em;
  line-height:1;
  text-align:center;
  text-transform:none;
  white-space:nowrap;
  opacity:.62;
  transform:translateY(3px);
  transition:transform 180ms ease,border-color 180ms ease,background-color 180ms ease,box-shadow 180ms ease,color 180ms ease,opacity 180ms ease;
}

/* The card's existing reveal observer adds .visible once. That starts this
   sequence once when Project 01 enters the viewport. */
body[data-page="home"] .evidence-card-eks.visible .eks-evidence-line span{
  animation:eksCapabilityActivate 520ms cubic-bezier(.22,1,.36,1) forwards;
}
body[data-page="home"] .evidence-card-eks.visible .eks-evidence-line span:nth-child(1){animation-delay:120ms}
body[data-page="home"] .evidence-card-eks.visible .eks-evidence-line span:nth-child(2){animation-delay:250ms}
body[data-page="home"] .evidence-card-eks.visible .eks-evidence-line span:nth-child(3){animation-delay:380ms}
body[data-page="home"] .evidence-card-eks.visible .eks-evidence-line span:nth-child(4){animation-delay:510ms}

@keyframes eksCapabilityActivate{
  0%{
    opacity:.62;
    transform:translateY(3px);
    border-color:color-mix(in srgb,var(--green) 24%,var(--line));
    background:color-mix(in srgb,var(--panel) 92%,transparent);
    box-shadow:none;
  }
  55%{
    opacity:1;
    transform:translateY(-1px);
    color:var(--text);
    border-color:color-mix(in srgb,var(--green) 80%,var(--line));
    background:color-mix(in srgb,var(--green) 13%,var(--panel));
    box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 18%,transparent),0 0 15px color-mix(in srgb,var(--green) 24%,transparent);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    color:var(--muted);
    border-color:color-mix(in srgb,var(--green) 34%,var(--line));
    background:color-mix(in srgb,var(--panel) 94%,transparent);
    box-shadow:none;
  }
}

.eks-evidence-line span:hover{
  z-index:6;
  opacity:1;
  transform:translateY(-1px);
  color:var(--text);
  border-color:color-mix(in srgb,var(--green) 76%,var(--line));
  background:color-mix(in srgb,var(--green) 11%,var(--panel));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 17%,transparent),0 0 14px color-mix(in srgb,var(--green) 18%,transparent);
}

/* Each capability explains what it contributes to this EKS project. */
.eks-evidence-line span::after{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  width:230px;
  padding:7px 9px;
  border:1px solid color-mix(in srgb,var(--green) 24%,var(--line));
  border-radius:9px;
  background:color-mix(in srgb,var(--panel) 97%,#00191a 3%);
  color:var(--muted);
  box-shadow:0 9px 22px rgba(0,0,0,.18);
  font-size:9.5px;
  font-weight:650;
  letter-spacing:0;
  line-height:1.4;
  text-align:left;
  text-transform:none;
  white-space:normal;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,4px);
  transition:opacity 160ms ease,transform 160ms ease;
}
.eks-evidence-line span:nth-child(1)::after{content:"ArgoCD keeps Kubernetes workloads aligned with the desired state stored in Git."}
.eks-evidence-line span:nth-child(2)::after{content:"GitHub Actions assumes AWS IAM roles through OIDC instead of storing long-lived access keys."}
.eks-evidence-line span:nth-child(3)::after{content:"Prometheus and Grafana provide visibility into cluster, node and workload health."}
.eks-evidence-line span:nth-child(4)::after{content:"Checkov scans Terraform and Trivy scans container images before release."}
.eks-evidence-line span:hover::after{
  opacity:1;
  transform:translate(-50%,0);
}
.eks-evidence-line span:first-child::after{
  left:0;
  transform:translate(0,4px);
}
.eks-evidence-line span:first-child:hover::after{transform:translate(0,0)}
.eks-evidence-line span:last-child::after{
  right:0;
  left:auto;
  transform:translate(0,4px);
}
.eks-evidence-line span:last-child:hover::after{transform:translate(0,0)}

/* Dedicated EKS architecture widths: Cloudflare DNS and K8s Workloads receive
   more room while the shorter EKS node stays compact. */
@media(min-width:1121px){
  body[data-page="home"] .architecture-eks{
    grid-template-columns:
      minmax(96px,1.22fr) 12px
      minmax(76px,.96fr) 12px
      minmax(48px,.62fr) 12px
      minmax(94px,1.20fr);
    padding:30px 14px 18px;
  }
  body[data-page="home"] .architecture-eks .arch-node{
    padding:11px 5px;
    font-size:10px;
  }
}

/* Projects page: Project 01 spans both columns and uses the available width for
   the platform architecture rather than leaving an orphan fifth card. */
body[data-page="projects"] .project-card-featured{
  grid-column:1/-1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr);
  grid-template-areas:
    "copy architecture"
    "links architecture";
  column-gap:42px;
  row-gap:22px;
  align-items:start;
  padding:36px 38px 34px;
}
body[data-page="projects"] .project-card-featured .project-number{
  left:36px;
  right:auto;
  top:35px;
}
body[data-page="projects"] .project-featured-copy{
  grid-area:copy;
  min-width:0;
  padding-left:82px;
}
body[data-page="projects"] .project-featured-copy h3{
  max-width:640px;
  margin-top:9px;
}
body[data-page="projects"] .project-featured-copy p{
  max-width:680px;
  margin-bottom:18px;
}
body[data-page="projects"] .project-featured-architecture{
  grid-area:architecture;
  min-width:0;
  align-self:center;
}
body[data-page="projects"] .project-featured-links{
  grid-area:links;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 20px;
  padding-left:82px;
}
body[data-page="projects"] .project-featured-links>a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:850;
}
body[data-page="projects"] .project-featured-links .project-case-link{
  margin:0;
}

body[data-page="projects"] .project-card-eks .tag{
  cursor:default;
  transition:transform 180ms ease,border-color 180ms ease,background-color 180ms ease,box-shadow 180ms ease,color 180ms ease;
}
body[data-page="projects"] .project-card-eks .tag:hover{
  transform:translateY(-1px);
  color:var(--text);
  border-color:color-mix(in srgb,var(--green) 72%,var(--line));
  background:color-mix(in srgb,var(--green) 11%,var(--panel));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 17%,transparent),0 0 14px color-mix(in srgb,var(--green) 18%,transparent);
}

@media(min-width:651px){
  body[data-page="projects"] .architecture-project-eks{
    grid-template-columns:
      minmax(104px,1.22fr) 16px
      minmax(82px,.96fr) 16px
      minmax(52px,.62fr) 16px
      minmax(102px,1.18fr);
    min-height:238px;
    padding:32px 20px 20px;
  }
  body[data-page="projects"] .architecture-project-eks .arch-node{
    padding:11px 6px;
    font-size:10.5px;
  }
}

@media(max-width:900px){
  body[data-page="projects"] .project-card-featured{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "architecture"
      "links";
    row-gap:24px;
  }
  body[data-page="projects"] .project-featured-architecture{
    align-self:stretch;
  }
  .eks-evidence-line{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:min(100%,360px);
    margin-left:auto;
    margin-right:auto;
  }
  .eks-evidence-line span::after{
    width:min(210px,70vw);
  }
}

@media(max-width:650px){
  body[data-page="home"] .eks-evidence-line,
  body[data-page="projects"] .eks-evidence-line{
    width:min(100%,340px);
    min-height:76px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:22px;
  }
  .eks-evidence-line::before{
    text-align:center;
  }
  .eks-evidence-line span::after{
    display:none;
  }

  body[data-page="projects"] .project-card-featured{
    padding:23px;
  }
  body[data-page="projects"] .project-card-featured .project-number{
    left:auto;
    right:22px;
    top:22px;
  }
  body[data-page="projects"] .project-featured-copy,
  body[data-page="projects"] .project-featured-links{
    padding-left:0;
  }
  body[data-page="projects"] .project-featured-copy h3{
    max-width:88%;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page="home"] .evidence-card-eks .integrated-stack-pills>span,
  body[data-page="projects"] .project-card-eks .tag,
  .eks-evidence-line span,
  .eks-evidence-line span::after{
    transition:none;
    animation:none !important;
  }
  body[data-page="home"] .evidence-card-eks .integrated-stack-pills>span:hover,
  body[data-page="projects"] .project-card-eks .tag:hover,
  .eks-evidence-line span:hover{
    transform:none;
  }
  .eks-evidence-line span{
    opacity:1;
    transform:none;
  }
}