/*
 * AWS Architecture Icons overlay.
 * Loaded after aws.css so that icon presentation remains isolated from the
 * layout and animation rules in the original stylesheet.
 */

.aws-architecture {
  opacity: 0.7;
  filter: saturate(1);
}

.aws-node {
  position: relative;
}

.aws-node--cloudfront,
.aws-node--alb {
  display: flex;
  min-width: 19rem;
  min-height: 7.5rem;
  padding: 1rem 1.25rem 1rem 8rem;
  flex-direction: column;
  justify-content: center;
  border-radius: 1rem;
  text-align: left;
}

.aws-node--cloudfront::before,
.aws-node--alb::before,
.aws-task::before,
.aws-database-node::before {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 0.7rem;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.24);
}

.aws-node--cloudfront::before,
.aws-node--alb::before {
  top: 50%;
  left: 0.85rem;
  width: 6rem;
  height: 6rem;
  transform: translateY(-50%);
}

.aws-node--cloudfront::before {
  background-image: url("/images/aws/cloudfront.svg");
}

.aws-node--alb::before {
  background-image: url("/images/aws/alb.svg");
}

.aws-service-cluster > .aws-tier-label::after {
  content: " on AWS Fargate";
}

.aws-data-cluster--rds > .aws-tier-label::after {
  content: " · read replicas";
}

.aws-task,
.aws-database-node {
  min-height: 9rem;
  padding: 6.15rem 0.4rem 0.7rem;
  transform-origin: center;
  will-change: opacity, transform, filter;
}

.aws-task::before,
.aws-database-node::before {
  top: 0.65rem;
  left: 50%;
  width: 4.9rem;
  height: 4.9rem;
  transform: translateX(-50%);
}

.aws-task::before {
  background-image: url("/images/aws/ecs.svg");
}

.aws-data-cluster--rds .aws-database-node::before {
  background-image: url("/images/aws/rds.svg");
}

.aws-data-cluster--cache .aws-database-node::before {
  background-image: url("/images/aws/elasticache.svg");
}

/*
 * Keep the baseline task / writer in the center. Additional capacity appears
 * on the left first and the right second, then scales in in reverse order.
 * This is visual storytelling only; RDS read replicas do not natively
 * auto-scale like ECS.
 */
.aws-task-grid .aws-task:nth-child(1),
.aws-data-cluster--rds .aws-database-node:nth-child(1) {
  grid-column: 2;
  grid-row: 1;
}

.aws-task-grid .aws-task:nth-child(2),
.aws-data-cluster--rds .aws-database-node:nth-child(2) {
  grid-column: 1;
  grid-row: 1;
}

.aws-task-grid .aws-task:nth-child(3),
.aws-data-cluster--rds .aws-database-node:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}

.aws-task-grid .aws-task,
.aws-data-cluster--rds .aws-database-node {
  animation: aws-capacity-steady 6s ease-in-out infinite;
}

.aws-task-grid .aws-task:nth-child(2) {
  animation: aws-scale-left 32s ease-in-out infinite;
}

.aws-task-grid .aws-task:nth-child(3) {
  animation: aws-scale-right 32s ease-in-out infinite;
}

.aws-data-cluster--rds .aws-database-node:nth-child(2) {
  animation: aws-reader-left 32s ease-in-out infinite;
}

.aws-data-cluster--rds .aws-database-node:nth-child(3) {
  animation: aws-reader-right 32s ease-in-out infinite;
}

@keyframes aws-capacity-steady {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.02);
  }
}

@keyframes aws-scale-left {
  0%, 8%, 92%, 100% {
    opacity: 0;
    transform: translateX(42%) translateY(0.8rem) scale(0.42);
    filter: grayscale(0.8) blur(1px);
  }
  20%, 80% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: none;
  }
}

@keyframes aws-scale-right {
  0%, 26%, 74%, 100% {
    opacity: 0;
    transform: translateX(-42%) translateY(0.8rem) scale(0.42);
    filter: grayscale(0.8) blur(1px);
  }
  38%, 62% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: none;
  }
}

@keyframes aws-reader-left {
  0%, 12%, 88%, 100% {
    opacity: 0;
    transform: translateX(42%) translateY(0.8rem) scale(0.42);
    filter: grayscale(0.8) blur(1px);
  }
  24%, 76% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: none;
  }
}

@keyframes aws-reader-right {
  0%, 32%, 68%, 100% {
    opacity: 0;
    transform: translateX(-42%) translateY(0.8rem) scale(0.42);
    filter: grayscale(0.8) blur(1px);
  }
  44%, 56% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: none;
  }
}

@media (max-width: 48rem) {
  .aws-architecture {
    width: 150vw;
    opacity: 0.5;
    transform: scale(0.74);
  }

  .aws-node--cloudfront,
  .aws-node--alb {
    min-width: 15rem;
    min-height: 6rem;
    padding: 0.75rem 0.75rem 0.75rem 6.5rem;
  }

  .aws-node--cloudfront::before,
  .aws-node--alb::before {
    left: 0.65rem;
    width: 5rem;
    height: 5rem;
  }

  .aws-task,
  .aws-database-node {
    min-height: 7.4rem;
    padding-top: 4.95rem;
  }

  .aws-task::before,
  .aws-database-node::before {
    width: 4rem;
    height: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aws-task-grid .aws-task,
  .aws-data-cluster--rds .aws-database-node {
    opacity: 1;
    transform: none;
    filter: none;
  }
}