fizzy/app/assets/stylesheets/bubbles.css

:root {
  --bubble-size-one: 14cqi;
  --bubble-size-two: 16cqi;
  --bubble-size-three: 18cqi;
  --bubble-size-four: 20cqi;
  --bubble-size-five: 22cqi;
  --bubble-shift: 10deg;
  --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
}

.windshield {
  --column-gap: 1cqi;
  --row-gap: 1cqi;

  margin-block: clamp(var(--block-space), 3%, calc(var(--block-space) * 2));

  > * {
    flex-shrink: 1;
  }
}

.bubble {
  --bubble-border-width: 0.2rem;
  --bubble-color: var(--color-ink);
  --hover-size: 0;

  aspect-ratio: 1;
  block-size: var(--bubble-size);
  color: var(--bubble-color, currentColor);
  container-type: inline-size;
  display: grid;
  max-inline-size: 100%;
  place-items: center;
  position: relative;
  transition: 0.2s ease;

  .windshield & {
    &:nth-child(1)  { order: 5; }
    &:nth-child(2)  { order: 3; }
    &:nth-child(3)  { order: 3; }
    &:nth-child(4)  { order: 7; }
    &:nth-child(5)  { order: 9; }
    &:nth-child(6)  { order: 5; }
    &:nth-child(7)  { order: 4; }
    &:nth-child(8)  { order: 9; }
    &:nth-child(9)  { order: 3; }
    &:nth-child(10) { order: 7; }
    &:nth-of-type(n+6) {
      align-self: start;
    }
  }

  [data-turbo-preview] & { animation: none; }

  > * {
    grid-area: 1/1;
  }

  .bubble__perma & {
    --bubble-border-width: 0.3rem;
    --bubble-size: 100% !important;

    z-index: 1;
  }
}

.bubble__bubble {
  background-color: var(--color-bg);
  border: var(--bubble-border-width) solid var(--bubble-color);
  border-radius: var(--bubble-shape);
  position: absolute;
  z-index: -1;

  a {
    color: var(--bubble-color);
  }

  &.bubble__boosts {
    --rotation: 45deg;

    aspect-ratio: 6/9;
    display: flex;
    font-size: 6cqi;
    inset: 70cqi 7cqi auto auto;
    min-inline-size: 4.5ch;
    padding: 0;
    place-items: center;
    transform: rotate(var(--rotation));

    span {
      transform: rotate(calc(var(--rotation) * -1));
    }

    form {
      block-size: 100%;
      display: grid;
      inline-size: 100%;
    }

    .btn {
      --btn-background: transparent;
      --btn-color: var(--bubble-color);

      appearance: none;
      font-weight: 800;
    }

    &.boosting {
      animation: bubble-up 500ms normal forwards ease-out;
    }

    @media (hover: hover) {
      .windshield .bubble:hover & {
        transform: rotate(calc(var(--rotation) + var(--bubble-shift) * 1)) translate(0rem, 1rem);
      }
    }
  }

  &.bubble__assignee {
    aspect-ratio: 1;
    font-size: 4.5cqi;
    inset: 6cqb auto auto -2cqi;
    padding: 0.2em;

    + & {
      inset: 1cqb auto auto 9cqi;

      + & {
        inset: -1cqb auto auto 25cqi;
      }
    }

    .avatar {
      border-radius: var(--bubble-shape);
    }

    @media (hover: hover) {
      .windshield .bubble:hover & {
        transform: translate(1rem, -1rem);
      }

      .windshield .bubble:hover & + & {
        transform: translate(1rem, -1rem);
      }

      .windshield .bubble:hover & + & + & {
        transform: translate(1.5rem, -0.5rem);;
      }
    }

    .assignee__name {
      display: none;

      .bubble__perma & {
        color: var(--bubble-color);
        display: block;
        font-size: var(--text-medium);
        font-weight: normal;
        inset: -2em auto auto auto;
        position: absolute;
        text-align: center;
      }
    }
  }

  &.bubble__date {
    --rotation: -45deg;

    aspect-ratio: 5/7;
    cursor: pointer;
    font-size: 5cqi;
    inset: 1cqb 1cqi auto auto;
    text-align: center;
    transform: rotate(var(--rotation));

    .bubble__date-text {
      transform: rotate(calc(var(--rotation) * -1));
    }

    label {
      display: grid;
      place-items: center;

      > * {
        grid-area: 1/1;
      }
    }

    @media (hover: hover) {
      .windshield .bubble:hover & {
        transform: rotate(calc(var(--rotation) + var(--bubble-shift) * 1)) translate(0rem, 0.5rem);
      }
    }
  }

  &:where(.bubble__meta) {
    background-color: var(--color-bg);
    block-size: auto;
    color: var(--bubble-color);
    display: flex;
    font-size: 5cqi;
    font-weight: 800;
    line-height: 1;
    max-inline-size: 18ch;
    padding: 1em;
    place-items: center;
    position: absolute;
    scale: 1;
    text-overflow: ellipsis;
    transform: none;
    transition: transform 200ms ease-out;
    white-space: nowrap;
    z-index: 1;

    &:has(.input:not([type="file"], [type="date"], select)) {
      border-radius: 2em;
      padding: 0.2em 0.5em;

      .input {
        color: var(--bubble-color);
      }
    }
  }

  @media (hover: hover) {
    .windshield .bubble:hover & {
      transform: translate(1rem, 1rem);
    }

    .windshield .bubble:hover & + & {
      transform: translate(0, -1rem);
    }

    .windshield .bubble:hover & + & + & {
      transform: translate(-1rem, -1rem);
    }
  }
}

.bubble__container {
  inline-size: min(67ch, 75vw);
  max-inline-size: 100vw;

  @media (max-width: 70ch) {
    inline-size: min(67ch, 100vw);
  }
}

.bubble__image {
  border: none;
  border-radius: var(--bubble-shape);
  block-size: 100cqi;
  inline-size: 100cqi;
  overflow: hidden;
  pointer-events: none;
  transform: rotate(var(--bubble-rotate)) scale(0.92);
  transition: 0.2s ease;

  @media (hover: hover) {
    .windshield .bubble:hover & {
      transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift))) scale(0.9);
    }
  }

  img {
    block-size: 100cqi;
    inline-size: 100cqi;
    max-inline-size: none;
    object-fit: cover;
    transform: rotate(calc(var(--bubble-rotate) * -1)) scale(1.1);

    &:is([src=""]) {
      display: none;
    }
  }

  :is(.windshield, .bubbles-list) .bubble--wobble & {
    animation: wobble-img 1200ms normal forwards ease-out;
  }
}

.bubble__link {
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

.bubble__perma {
  block-size: 100%;
  max-block-size: 40dvh;
  max-inline-size: 100%;
}

.bubble__tags{
  font-size: var(--text-small);
  margin-block-start: 0.3cqb;

  .bubble__perma & {
    font-size: var(--text-medium);
  }
}

.bubble__title {
  -webkit-line-clamp: var(--lines, 5);
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: 9cqi;
  hyphens: auto;
  line-height: 1.2;
  margin: auto;
  max-block-size: 75cqi;
  max-inline-size: 75cqi;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;

  .windshield & {
    pointer-events: none;
  }

  a {
    color: var(--splat-color);
  }

  @media (hover: hover) {
    .bubble:has(.bubble__image img:not([src=""])):hover & {
      color: var(--color-ink-reversed);
      text-shadow: 0 0 0.2em var(--bubble-color), 0 0 0.2em var(--bubble-color), 0 0 0.2em var(--bubble-color);
      position: relative;
      z-index: 1;
    }
  }
}

.bubbles-list {
  --bubble-size: 1.8em;
  --bubble-shift: 15deg;
  --hover-size: 0;

  font-size: var(--text-medium);
  max-inline-size: 80ch;

  .bubble {
    order: 0;
  }

  .bubble__title-link {
    color: var(--color-txt);
    text-decoration: none;
  }

  li {
    border-radius: 0.6em;
    list-style: none;
    padding: 0.5em var(--inline-space);
    position: relative;
    transition: background-color 200ms ease-out;

    &:nth-of-type(10)::after {
      border-bottom: 1px dashed var(--color-subtle-dark);
      block-size: 0;
      content: "";
      inline-size: 100%;
      inset: auto 0 0 0;
      position: absolute;
    }

    @media (hover: hover) {
      &:hover {
        background-color: color(from var(--bubble-color) srgb r g b / 0.15);
        border: 0;
        border-radius: 0.6em;
      }
    }
  }

  .avatar {
    --avatar-size: 1.1em;

    > * {
      font-size: 0.5em;
    }
  }
}

.bubble__title-text {
  font-weight: 600;
  flex-grow: 1;
  white-space: nowrap;

  &::after {
    border-block-end: 1px dotted var(--color-subtle-dark);
    content: "";
    flex-grow: 1;
    margin-block-end: 0.25em;
  }
}

.bubble__shape {
  background-color: var(--bubble-color);
  block-size: var(--bubble-size, 1.2em);
  border-radius: var(--bubble-shape);
  inline-size: var(--bubble-size, 1.2em);
  pointer-events: none;
  position: relative;
  transform: rotate(var(--bubble-rotate));
  transition: 200ms ease-out;
  z-index: 0;

  .bubble & {
    --bubble-size: 100%;

    background-color: color(from var(--bubble-color) srgb r g b / 0.15);
    border: var(--bubble-border-width) solid var(--bubble-color);
  }

  .bubble:has(.bubble__link) & {
    z-index: -1;
  }

  :is(.windshield, .bubbles-list) .bubble--wobble & {
    animation: wobble 1200ms normal forwards ease-out;
  }

  .bubble--wobble:nth-child(even) & {
    animation-name: wobble-alt;
    animation-duration: 900ms;
  }
}