/* NSFW Nation — fitas "proibido passar" em movimento contínuo */

html,
body {
  background-color: #070708 !important;
}

#app {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

#spicy-fire-canvas,
.spicy-embers,
.spicy-hearth {
  display: none !important;
}

.nation-fx {
  pointer-events: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.nation-fx__vignette {
  pointer-events: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    radial-gradient(ellipse 75% 65% at 50% 40%, transparent 42%, rgba(0, 0, 0, 0.4) 100%),
    radial-gradient(ellipse 55% 40% at 50% 100%, rgba(90, 0, 10, 0.25), transparent 70%);
}

.nation-fx__tape {
  position: absolute;
  display: block;
  width: 170vw;
  height: 2.55rem;
  overflow: hidden;
  white-space: nowrap;
  color: #0a0607 !important;
  font-family: Archivo, "Segoe UI", sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background-color: #1a0a0c;
  background-image: repeating-linear-gradient(
    -45deg,
    #ff1f33 0 13px,
    #1a0a0c 13px 26px
  );
  background-size: 36.77px 36.77px;
  box-shadow:
    0 0 0 1px rgba(255, 80, 90, 0.28),
    0 12px 32px rgba(0, 0, 0, 0.42);
  opacity: 0.72;
  will-change: transform, background-position;
  animation:
    nation-tape-swim var(--swim-dur, 14s) ease-in-out infinite,
    nation-tape-stripes 1.1s linear infinite;
  animation-delay: var(--swim-delay, 0s), 0s;
}

.nation-fx__tape--alt {
  color: #0a0607 !important;
  background-image: repeating-linear-gradient(
    -45deg,
    #dc1426 0 13px,
    #1a0a0c 13px 26px
  );
  opacity: 0.7;
}

.nation-fx__tape--reverse {
  animation-name: nation-tape-swim-rev, nation-tape-stripes-rev;
}

.nation-fx__track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  will-change: transform;
  animation: nation-marquee var(--scroll-dur, 10s) linear infinite;
  animation-delay: var(--scroll-delay, 0s);
}

.nation-fx__tape--reverse .nation-fx__track {
  animation-name: nation-marquee-rev;
}

.nation-fx__copy {
  display: inline-block;
  flex-shrink: 0;
  padding-right: 2rem;
  line-height: 2.55rem;
  color: #0a0607 !important;
}

@keyframes nation-tape-swim {
  0%,
  100% {
    translate: -4% 0;
  }
  50% {
    translate: 7% -14px;
  }
}

@keyframes nation-tape-swim-rev {
  0%,
  100% {
    translate: 6% 0;
  }
  50% {
    translate: -7% 12px;
  }
}

@keyframes nation-tape-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 36.77px 0;
  }
}

@keyframes nation-tape-stripes-rev {
  from {
    background-position: 36.77px 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes nation-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes nation-marquee-rev {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.min-h-screen.bg-background-dark,
.bg-background-dark,
.main-tabs-root {
  background-color: transparent !important;
  background-image: none !important;
}

.home-view-root,
.home-feed-scroll {
  background:
    radial-gradient(ellipse 50% 38% at 4% -8%, rgba(220, 20, 38, 0.08), transparent 56%),
    radial-gradient(ellipse 42% 30% at 100% 0%, rgba(90, 0, 10, 0.1), transparent 52%),
    linear-gradient(180deg, rgba(12, 8, 10, 0.18) 0%, rgba(8, 5, 6, 0.14) 50%, rgba(5, 3, 4, 0.12) 100%) !important;
}

.home-top-bar,
.catalog-row,
.home-desktop-sidebar,
.home-hub-experience,
.home-menu-drawer,
.home-bottom-nav {
  isolation: isolate;
}

.home-desktop-sidebar {
  background:
    linear-gradient(180deg, rgba(14, 10, 11, 0.94) 0%, rgba(8, 6, 7, 0.96) 100%) !important;
}

body.generation-locked .nation-fx,
body.undress-wait-open .nation-fx,
body.generation-in-progress .nation-fx {
  opacity: 0.6;
}

@media (max-width: 700px) {
  .nation-fx__tape {
    height: 2.1rem;
    font-size: 0.72rem;
  }

  .nation-fx__copy {
    line-height: 2.1rem;
  }
}