@import '../base/variables';
@import '../base/breakpoints';

/** Heartbeat animation */
@keyframes heartbeat {
  0% {
    transform: scale(1.2);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1.6);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.2);
  }
}

/** Colphon */
.colophon-intro {
  grid-column: 2 / -2;
  grid-row: 1;
}

@media (--tablet) {
  .colophon-intro {
    grid-column: 6 / -6;
  }
}

.colophon-meaning {
  grid-column: 2 / -2;
  grid-row: 2;
}

@media (--tablet) {
  .colophon-meaning {
    grid-column: 3 / -9;
  }
}

.colophon-why {
  grid-column: 2 / -2;
  grid-row: 3;
}

@media (--tablet) {
  .colophon-why {
    grid-column: 7 / -5;
  }
}

.colophon-contact {
  grid-column: 2 / -2;
  grid-row: 4;
}

@media (--tablet) {
  .colophon-contact {
    grid-column: 5 / -9;
  }
}

.colophon-faq {
  grid-column: 2 / -2;
  grid-row: 5;
}

@media (--tablet) {
  .colophon-faq {
    grid-column: 3 / -3;
  }
}

.colophone-faq-list {
  column-count: 1;
  column-gap: 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (--tablet) {
  .colophone-faq-list {
    column-count: 2;
  }
}

.colophon-faq-list-item {
  break-inside: avoid;
  margin-block-end: var(--space-10);
  padding-block-start: var(--space-1);
}

.colophon-faq-list-item:last-of-type {
  margin-block-end: 0;
}

.colophon-donation {
  grid-column: 2 / -2;
  grid-row: 6;
}

@media (--tablet) {
  .colophon-donation {
    grid-column: 8 / -4;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .colophon-donation-heart {
    animation: none;
    color: var(--color-accent-secondary);
    display: inline-block;
    font-size: var(--font-size-5);
    text-shadow: var(--shadow-subtle-shade);
  }
}

.colophon-donation-heart {
  animation: heartbeat 1.5s ease-out 0s infinite normal;
  color: var(--color-accent-secondary);
  display: inline-block;
  font-size: var(--font-size-5);
  text-shadow: var(--shadow-subtle-shade);
}

.colophon-dontation-crypto-hash {
  font-family: var(--font-family-mono);
  font-size: clamp(0.8rem, 0.8vw, 1rem);
  margin: 0;
  white-space: normal;
}

.colophon-donation-list {
  column-gap: 3rem;
  column-width: 22rem;
  margin-block-start: var(--space-10);
  padding-inline-start: 0;
}

.colophon-donation-list-item {
  align-items: center;
  break-inside: avoid;
  display: flex;
  font-variant-ligatures: none;
  margin-block-end: var(--space-1);
}

.colophon-dontation-button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-fg);
  cursor: pointer;
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.colophon-donation-icon {
  flex-shrink: 0;
  font-size: 20px;
  height: 20px;
  margin-inline-end: var(--space-1);
  width: 20px;
}
.colophon-tech {
  grid-column: 2 / -2;
  grid-row: 7;
}

@media (--tablet) {
  .colophon-tech {
    grid-column: 5 / -7;
  }
}
