.material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif !important;
  font-feature-settings: "liga" 1 !important;
  -webkit-font-feature-settings: "liga" 1 !important;
  font-variation-settings:
    "FILL" 0,
    "wght" 300,
    "GRAD" 0,
    "opsz" 24;
}

::-webkit-scrollbar {
  display: none;
}

body {
  background-color: #faf9f7;
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-watermark {
  opacity: 0;
  transform: scale(0.9) translateY(40px);
  transition:
    opacity 2s cubic-bezier(0.25, 1, 0.5, 1),
    transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.animate-watermark.is-visible {
  opacity: 0.03;
  transform: scale(1) translateY(0);
}

.animate-fade-left {
  opacity: 0;
  transform: translateX(60px);
  transition:
    opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.animate-fade-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

#experiences .animate-on-scroll {
  transition:
    opacity 2.3s cubic-bezier(0.25, 1, 0.5, 1),
    transform 2.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.timeline-slide {
  flex-shrink: 0;
  width: 90vw;
  scroll-snap-align: start;
}

.skyrealm-copy {
  opacity: 0;
  transform: translateX(-120px);
  transition:
    opacity 1.6s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.skyrealm-copy.is-visible {
  opacity: 1;
  transform: translateX(0);
}

#legacy-echoes .legacy-echo-card {
  opacity: 0;
  transform: translateY(72px) scale(0.98);
  transition:
    opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

#legacy-echoes .legacy-echo-card:nth-child(2) {
  transition-delay: 0.12s;
}

#legacy-echoes .legacy-echo-card:nth-child(3) {
  transition-delay: 0.24s;
}

#legacy-echoes .legacy-echo-card:nth-child(4) {
  transition-delay: 0.36s;
}

#legacy-echoes .legacy-echo-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#legacy-echoes .legacy-echo-card > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

#legacy-echoes .legacy-echo-card.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

#legacy-echoes .legacy-echo-card.is-visible > :nth-child(1) {
  transition-delay: 0.15s;
}

#legacy-echoes .legacy-echo-card.is-visible > :nth-child(2) {
  transition-delay: 0.3s;
}

#legacy-echoes .legacy-echo-card.is-visible > :nth-child(3) {
  transition-delay: 0.45s;
}

.diamond-tile {
  background-color: #faf9f7;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: scale(2.5);
  transition:
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 1s ease;
}

.diamond-tile.revealed {
  transform: scale(0.2);
  opacity: 0;
}

@media (min-width: 768px) {
  .timeline-slide {
    width: 92vw;
  }
}