/* Native LAN privacy card. Layout and timing mirror the original card. */
.lan-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 20rem;
  width: 100%;
  min-width: 0;
  padding-top: 3rem;
  overflow: clip;
  border: 1px solid #ffffff14;
  border-radius: var(--roundness--box-xl, 1.5rem);
  background: #ffffff0a;
  font-family: Manrope, Arial, sans-serif;
}

.lan-card__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-inline: 2rem;
  text-align: center;
}

.lan-card__title {
  margin: 0;
  color: transparent;
  background: linear-gradient(to right, #fff, #ffffffb3);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: var(--_typography---h4--font-size, 1.9375rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.03875rem;
}

.lan-card__description {
  margin: 0;
  color: #c3c3c3;
  font-size: 1rem;
  line-height: 1.5;
}

.lan-card__marquee {
  position: relative;
  display: flex;
  width: 100%;
  height: 10.5rem;
  flex: none;
  overflow: clip;
}

.lan-card__track {
  position: absolute;
  top: 2.75rem;
  left: 0;
  display: flex;
  width: max-content;
  height: 5rem;
  align-items: flex-start;
}

.lan-card__group {
  display: flex;
  flex: none;
  gap: .5rem;
  width: 27rem;
  padding-right: .5rem;
}

.lan-card__tile {
  display: flex;
  flex: 1 1 5rem;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ffffff14;
  border-radius: var(--roundness--box-m, .75rem);
  background: linear-gradient(#ffffff0a, #ffffff05);
  transition: background .2s;
}

.lan-card__tile:hover { background: linear-gradient(#ffffff14, #ffffff0a); }
.lan-card__icon { display: block; width: 2rem; height: 2rem; flex: none; }
.lan-card__symbols { position: absolute; width: 0; height: 0; overflow: hidden; }

.lan-card__marquee.is-moving .lan-card__track {
  animation: lan-card-marquee 8s linear infinite;
}

@keyframes lan-card-marquee { to { transform: translateX(-27rem); } }

@media (min-width: 992px) {
  .lan-card.is-pending {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(2rem);
  }

  .lan-card.is-revealed {
    animation:
      lan-card-slide .6s linear(0, .18549375, .3439, .47799375, .5904, .68359375, .7599, .82149375, .8704, .90849375, .9375, .95899375, .9744, .98499375, .9919, .99609375, .9984, .99949375, .9999, .99999375, 1) .6s both,
      lan-card-fade .6s ease .6s both;
  }
}

@keyframes lan-card-slide {
  from { transform: translateY(2rem); }
  to { transform: translateY(0); }
}

@keyframes lan-card-fade {
  from { opacity: 0; filter: blur(7px); }
  to { opacity: 1; filter: blur(0); }
}

@media (max-width: 991px) {
  .lan-card { height: 100%; align-items: center; }
}

@media (max-width: 767px) {
  .lan-card__marquee { width: 100%; height: 8rem; }
  .lan-card__track { top: 2rem; }
  .lan-card__group { width: 22rem; }
  .lan-card__track { height: 4rem; }
  .lan-card__marquee.is-moving .lan-card__track { animation-name: lan-card-marquee-mobile; }
}

@keyframes lan-card-marquee-mobile { to { transform: translateX(-22rem); } }

@media (prefers-reduced-motion: reduce) {
  .lan-card.is-pending { opacity: 1; filter: none; transform: none; }
  .lan-card.is-revealed,
  .lan-card__marquee.is-moving .lan-card__track { animation: none; }
}