/* Small decorative animations inside the homepage tiles */
@layer components {
  /* Server rack */
  .rack {
    display: grid;
    gap: 0.5rem;
    width: min(100%, 24rem);

    @media (min-width: 64em) {
      .tile--server & {
        gap: 0.7rem;
        width: min(100%, 30rem);
      }
    }
  }

  .rack__unit {
    display: grid;
    position: relative;
    grid-template-columns: auto auto minmax(0, 1fr) 4.5rem;
    align-items: center;
    gap: 0.55rem;
    height: 2.4rem;
    padding-inline: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: linear-gradient(180deg, #231e33, #1a1626);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  }

  .rack__led {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 8px var(--pink);
    animation: blink 1.6s steps(2, jump-none) infinite;
  }

  .rack__led--b1,
  .rack__led--b2,
  .rack__led--b3,
  .rack__led--b4,
  .rack__led--b5 {
    background: var(--blue-text);
    box-shadow: 0 0 8px var(--blue-text);
  }

  .rack__led--2 { animation-duration: 0.9s; }
  .rack__led--3 { animation-duration: 2.3s; animation-delay: -0.6s; }
  .rack__led--4 { animation-duration: 1.2s; animation-delay: -0.3s; }
  .rack__led--b1 { animation-duration: 0.7s; animation-delay: -0.2s; }
  .rack__led--b2 { animation-duration: 3.1s; }
  .rack__led--b3 { animation-duration: 1.1s; animation-delay: -0.5s; }
  .rack__led--b4 { animation-duration: 0.5s; }
  .rack__led--5 { animation-duration: 1.9s; animation-delay: -1s; }
  .rack__led--b5 { animation-duration: 0.8s; animation-delay: -0.1s; }

  .rack__vents {
    height: 0.9rem;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.09) 0 2px, transparent 2px 6px);
  }

  .rack__bar {
    height: 0.3rem;
    overflow: hidden;
    border-radius: 9px;
    background: rgb(255 255 255 / 0.08);
  }

  .rack__load {
    display: block;
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: var(--fluid);
    animation: load 5s var(--ease-in-out) infinite alternate;
  }

  .rack__load--2 { width: 70%; animation-duration: 3.4s; animation-delay: -1s; }
  .rack__load--3 { width: 25%; animation-duration: 6s; animation-delay: -2.5s; }
  .rack__load--4 { width: 55%; animation-duration: 4.2s; animation-delay: -0.4s; }
  .rack__load--5 { width: 35%; animation-duration: 5.5s; animation-delay: -3s; }

  @media (min-width: 64em) {
    .tile--server .rack__unit {
      height: 3.1rem;
      grid-template-columns: auto auto minmax(0, 1fr) 6rem;
    }
  }

  /* Network graph */
  .net {
    width: min(100%, 24rem);
    height: auto;
    overflow: visible;
  }

  .net__links path {
    fill: none;
    stroke: rgb(255 255 255 / 0.14);
    stroke-width: 1.5;
  }

  .net__flow path {
    fill: none;
    stroke: var(--pink);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 6 100;
    animation: flow 3s linear infinite;
  }

  .net__flow path:nth-child(2) { stroke: var(--violet-text); animation-duration: 2.4s; animation-delay: -1.2s; }
  .net__flow path:nth-child(3) { stroke: var(--white); animation-duration: 3.6s; animation-delay: -0.4s; }
  .net__flow path:nth-child(4) { stroke: var(--blue-text); animation-duration: 2.8s; animation-delay: -2s; }
  .net__flow path:nth-child(5) { animation-duration: 4s; animation-delay: -3s; }

  .net__nodes rect {
    fill: #1e1a2a;
    stroke: rgb(255 255 255 / 0.25);
    stroke-width: 1.2;
  }

  .net__core {
    fill: var(--bg);
    stroke: var(--pink);
    stroke-width: 2;
    filter: drop-shadow(0 0 8px rgb(255 118 164 / 0.7));
  }

  /* Shell script */
  .code {
    width: 100%;
    margin: 0;
    padding: 1rem 1.1rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: #0f0c16;
    color: #d9d1e7;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    line-height: 1.65;
    white-space: pre;

    & .c { color: var(--faint); }
    & .k { color: var(--pink-text); }
    & .s { color: var(--blue-text); }
  }

  .code__caret {
    display: inline-block;
    width: 0.55em;
    height: 1.15em;
    margin-left: 0.2em;
    vertical-align: text-bottom;
    background: var(--pink-text);
    animation: blink 1.1s steps(2, jump-none) infinite;
  }

  /* Bars that keep sorting themselves */
  .bars {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    width: min(100%, 15rem);
    height: 7rem;
  }

  .bars__bar {
    flex: 1;
    height: var(--to);
    border-radius: 0.3rem 0.3rem 0.15rem 0.15rem;
    background: linear-gradient(180deg, var(--violet-text), var(--blue));
    animation: sort 7s var(--ease-in-out) infinite;
  }

  .bars__bar--1 { --from: 70%; --to: 18%; }
  .bars__bar--2 { --from: 30%; --to: 28%; animation-delay: 0.08s; }
  .bars__bar--3 { --from: 95%; --to: 38%; animation-delay: 0.16s; }
  .bars__bar--4 { --from: 18%; --to: 48%; animation-delay: 0.24s; }
  .bars__bar--5 { --from: 58%; --to: 58%; animation-delay: 0.32s; }
  .bars__bar--6 { --from: 40%; --to: 70%; animation-delay: 0.4s; }
  .bars__bar--7 { --from: 82%; --to: 84%; animation-delay: 0.48s; }
  .bars__bar--8 { --from: 48%; --to: 100%; animation-delay: 0.56s; }

  .bars__bar--3,
  .bars__bar--8 {
    background: linear-gradient(180deg, var(--pink), var(--violet));
  }

  /* Video editor timeline */
  .edit {
    --label: 2.2rem;
    position: relative;
    display: grid;
    gap: 0.45rem;
    width: 100%;
    padding: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: #0f0c16;
  }

  .edit__ruler {
    height: 0.6rem;
    margin-left: var(--label);
    background:
      repeating-linear-gradient(90deg, rgb(255 255 255 / 0.22) 0 1px, transparent 1px 2.5rem),
      repeating-linear-gradient(90deg, rgb(255 255 255 / 0.09) 0 1px, transparent 1px 0.5rem);
  }

  .edit__track {
    position: relative;
    height: 1.9rem;
    margin-left: var(--label);
    border-radius: 0.35rem;
    background: rgb(255 255 255 / 0.03);
  }

  .edit__label {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--label));
    translate: 0 -50%;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--faint);
  }

  .edit__clip {
    position: absolute;
    top: 3px;
    bottom: 3px;
    border-radius: 0.3rem;
  }

  .edit__clip--title { left: 30%; width: 22%; background: linear-gradient(90deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.55)); }
  .edit__clip--a { left: 0; width: 34%; background: var(--pink); }
  .edit__clip--b { left: 34.6%; width: 28%; background: var(--violet); }
  .edit__clip--c { left: 63.2%; width: 36.8%; background: var(--blue); }

  .edit__clip--wave {
    left: 0;
    width: 100%;
    background: repeating-linear-gradient(90deg, var(--violet-text) 0 2px, transparent 2px 4px);
    clip-path: polygon(0.0% 39%, 2.5% 26%, 5.0% 12%, 7.5% 14%, 10.0% 15%, 12.5% 28%, 15.0% 37%, 17.5% 21%, 20.0% 18%, 22.5% 16%, 25.0% 26%, 27.5% 36%, 30.0% 33%, 32.5% 23%, 35.0% 27%, 37.5% 29%, 40.0% 30%, 42.5% 33%, 45.0% 33%, 47.5% 33%, 50.0% 28%, 52.5% 36%, 55.0% 32%, 57.5% 39%, 60.0% 37%, 62.5% 34%, 65.0% 31%, 67.5% 28%, 70.0% 37%, 72.5% 34%, 75.0% 26%, 77.5% 23%, 80.0% 20%, 82.5% 28%, 85.0% 38%, 87.5% 31%, 90.0% 16%, 92.5% 12%, 95.0% 15%, 97.5% 23%, 100.0% 38%, 100.0% 62%, 97.5% 77%, 95.0% 85%, 92.5% 88%, 90.0% 84%, 87.5% 69%, 85.0% 62%, 82.5% 72%, 80.0% 80%, 77.5% 77%, 75.0% 74%, 72.5% 66%, 70.0% 63%, 67.5% 72%, 65.0% 69%, 62.5% 66%, 60.0% 63%, 57.5% 61%, 55.0% 68%, 52.5% 64%, 50.0% 72%, 47.5% 67%, 45.0% 67%, 42.5% 67%, 40.0% 70%, 37.5% 71%, 35.0% 73%, 32.5% 77%, 30.0% 67%, 27.5% 64%, 25.0% 74%, 22.5% 84%, 20.0% 82%, 17.5% 79%, 15.0% 63%, 12.5% 72%, 10.0% 85%, 7.5% 86%, 5.0% 88%, 2.5% 74%, 0.0% 61%);
  }

  .edit__playhead {
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: calc(0.9rem + var(--label) + 30%);
    width: 2px;
    background: var(--pink-text);
    box-shadow: 0 0 12px var(--pink);
    animation: playhead 8s linear infinite;

    &::before {
      content: "";
      position: absolute;
      top: -2px;
      left: -5px;
      width: 12px;
      height: 10px;
      border-radius: 2px 2px 6px 6px;
      background: var(--pink-text);
    }
  }
}