:root {
  --cosmic-ink: #fff9ff;
  --cosmic-muted: rgba(236, 226, 255, 0.72);
  --cosmic-violet: #9d7cff;
  --cosmic-rose: #ff70b7;
  --cosmic-cyan: #63e8ff;
  --cosmic-gold: #ffd896;
  --cosmic-deep: #05020d;
}

/* ---- Page frame ------------------------------------------------------- */

html.archive-lock-boot,
html.archive-lock-boot body[data-nbb-page="archives"],
body[data-nbb-page="archives"].archive-locked,
body[data-nbb-page="archives"].archive-unlocking {
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.archive-experience-active,
html.archive-experience-active body[data-nbb-page="archives"] {
  background-color: #020106 !important;
}

body[data-nbb-page="archives"] {
  background:
    radial-gradient(circle at 50% -12%, rgba(109, 75, 208, 0.16), transparent 38rem),
    #06030f;
  scrollbar-width: none;
}

html.archive-experience-active {
  scrollbar-width: none;
}

html.archive-experience-active::-webkit-scrollbar,
body[data-nbb-page="archives"]::-webkit-scrollbar,
body[data-nbb-page="archives"] .ml-carousel__track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body[data-nbb-page="archives"] .ml-carousel__track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body[data-nbb-page="archives"] .ml-carousel__pagination {
  display: none !important;
}

/* The atmosphere orbs are already soft radial gradients; the 90px blur filter
   on top of them was the most expensive thing on the page. */
body[data-nbb-page="archives"] .ml-gradient-orb {
  filter: none;
  opacity: 0.92;
}

body[data-nbb-page="archives"] .ml-orb-1 {
  background: radial-gradient(circle, var(--ml-violet-glow) 0%, transparent 62%);
}

body[data-nbb-page="archives"] .ml-orb-2 {
  background: radial-gradient(circle, var(--ml-rose-glow) 0%, transparent 62%);
}

body[data-nbb-page="archives"] .ml-orb-3 {
  background: radial-gradient(circle, var(--ml-amber-glow) 0%, transparent 62%);
}

/* The header pill sits over a live canvas; a lighter blur keeps it cheap. */
body[data-nbb-page="archives"] #header-group .glass-pill {
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* ---- Lock → archive continuity ---------------------------------------
   While locked, only the archive's atmosphere (deep background, orbs and the
   sky) is allowed to paint. The content rises once the lock dissolves, header
   first, cards in a stagger driven by --reveal-delay from JS. ------------ */

html.archive-lock-boot body[data-nbb-page="archives"] .section-memory-lane-premium > section > :not(.ml-atmosphere),
body[data-nbb-page="archives"].archive-locked .section-memory-lane-premium > section > :not(.ml-atmosphere) {
  opacity: 0;
}

body[data-nbb-page="archives"] .section-memory-lane-premium > section > :not(.ml-atmosphere) {
  transition: opacity 0.7s 0.25s ease;
}

body[data-nbb-page="archives"].archive-unlocking .section-memory-lane-premium > section > :not(.ml-atmosphere) {
  pointer-events: none;
}

html.archive-lock-boot body[data-nbb-page="archives"] .ml-header,
body[data-nbb-page="archives"].archive-locked .ml-header {
  transform: translateY(22px);
}

body[data-nbb-page="archives"] .ml-header {
  transition: transform 1.1s 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

html.archive-lock-boot #header-group .glass-pill,
body[data-nbb-page="archives"].archive-locked #header-group .glass-pill {
  opacity: 0;
}

body[data-nbb-page="archives"].archive-unlocking #header-group .glass-pill {
  opacity: 1;
  transition: opacity 0.8s 0.55s ease;
}

body[data-nbb-page="archives"].archive-unlocking #header-group .glass-pill:not(.is-hidden) {
  animation: archivePillArrive 1.1s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes archivePillArrive {
  from { transform: translateY(-18px); }
  to { transform: translateY(0); }
}

/* Leaving for a game: content sinks into the sky, the starfield stays. */
body[data-nbb-page="archives"].archive-leaving .section-memory-lane-premium > section > :not(.ml-atmosphere),
body[data-nbb-page="archives"].archive-leaving #header-group,
body[data-nbb-page="archives"].archive-leaving .archive-progress {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

body[data-nbb-page="archives"].archive-leaving .ml-archives {
  transform: translateY(12px) scale(0.992);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.6, 1);
}

/* ---- Archive content -------------------------------------------------- */

body[data-nbb-page="archives"] .ml-archives {
  position: relative;
  isolation: isolate;
}

body[data-nbb-page="archives"] .ml-archives::before {
  position: absolute;
  z-index: -1;
  top: -7rem;
  left: 50%;
  width: min(72rem, 92vw);
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(126, 87, 226, 0.11), transparent 68%);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

body[data-nbb-page="archives"] .ml-header {
  padding-top: clamp(1.5rem, 6vw, 5rem);
  text-align: center;
}

body[data-nbb-page="archives"] .ml-title {
  background: linear-gradient(112deg, #fff 10%, #f1e6ff 46%, #c9b5ff 72%, #fff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 28px rgba(116, 77, 214, 0.24));
  text-wrap: balance;
}

body[data-nbb-page="archives"] .ml-eyebrow {
  color: #b9a2ff;
  letter-spacing: 0.24em;
  text-shadow: 0 0 18px rgba(157, 124, 255, 0.45);
}

body[data-nbb-page="archives"] .ml-card {
  --card-hue: 265;
  position: relative;
  will-change: auto;
}

body[data-nbb-page="archives"].archive-motion-ready .ml-card {
  opacity: 0;
  transform: translateY(34px) scale(0.965);
  transition:
    opacity 0.78s cubic-bezier(0.2, 0.75, 0.2, 1),
    transform 0.88s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

body[data-nbb-page="archives"].archive-motion-ready .ml-card.is-visible {
  opacity: 1;
  transform: none;
}

body[data-nbb-page="archives"] .ml-card__inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: hsla(var(--card-hue), 74%, 77%, 0.16);
  background:
    linear-gradient(145deg, hsla(var(--card-hue), 50%, 18%, 0.19), transparent 45%),
    rgba(13, 10, 25, 0.88);
  box-shadow:
    0 25px 70px -42px hsla(var(--card-hue), 90%, 68%, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  transform-style: flat;
  transition:
    transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.34s ease,
    box-shadow 0.34s ease;
}

body[data-nbb-page="archives"] .ml-card__inner::before {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background: linear-gradient(135deg, hsla(var(--card-hue), 92%, 80%, 0.42), transparent 26%, transparent 68%, hsla(calc(var(--card-hue) + 55), 92%, 75%, 0.2)) border-box;
  content: "";
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.35s ease;
}

body[data-nbb-page="archives"] .ml-card__inner::after {
  position: absolute;
  z-index: 3;
  top: -55%;
  left: -65%;
  width: 50%;
  height: 210%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: rotate(18deg) translateX(-120%);
}

body[data-nbb-page="archives"] .ml-card__inner:hover,
body[data-nbb-page="archives"] .ml-card__inner:focus-visible {
  --card-lift: -8px;
  border-color: hsla(var(--card-hue), 85%, 76%, 0.36);
  box-shadow:
    0 34px 76px -35px hsla(var(--card-hue), 92%, 65%, 0.55),
    0 0 34px -22px hsla(var(--card-hue), 95%, 72%, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-5px);
}

body[data-nbb-page="archives"] .ml-card__inner:active {
  transform: translateY(-2px) scale(0.985);
  transition-duration: 0.12s;
}

body[data-nbb-page="archives"] .ml-card__inner:hover::before,
body[data-nbb-page="archives"] .ml-card__inner:focus-visible::before {
  opacity: 1;
}

body[data-nbb-page="archives"] .ml-card__inner:hover::after {
  animation: archiveCardShine 1.1s ease forwards;
}

body[data-nbb-page="archives"] .ml-card__media {
  background: #090511;
  transform: none;
}

body[data-nbb-page="archives"] .ml-card__img {
  filter: saturate(0.96) contrast(1.02);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

body[data-nbb-page="archives"] .ml-card__inner:hover .ml-card__img {
  filter: saturate(1.08) contrast(1.035);
  transform: scale(1.055);
}

body[data-nbb-page="archives"] .ml-card__content {
  position: relative;
  z-index: 2;
}

body[data-nbb-page="archives"] .ml-card__badge {
  border: 1px solid hsla(var(--card-hue), 80%, 78%, 0.2);
  background: hsla(var(--card-hue), 58%, 48%, 0.14);
  box-shadow: inset 0 0 16px hsla(var(--card-hue), 88%, 65%, 0.08);
  color: hsl(var(--card-hue), 90%, 84%);
}

body[data-nbb-page="archives"] .ml-card__cta {
  letter-spacing: 0.08em;
  transition: letter-spacing 0.3s ease, color 0.3s ease;
}

body[data-nbb-page="archives"] .ml-card__inner:hover .ml-card__cta {
  color: #fff;
  letter-spacing: 0.14em;
}

/* ---- Scroll progress -------------------------------------------------- */

.archive-progress {
  position: fixed;
  z-index: 90;
  top: 50%;
  right: max(10px, env(safe-area-inset-right));
  display: grid;
  width: 22px;
  height: min(38vh, 270px);
  place-items: center;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.6s 0.9s ease;
}

.archive-progress__track {
  position: relative;
  display: block;
  overflow: hidden;
  width: 2px;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.archive-progress__track i {
  position: absolute;
  inset: 0 0 auto;
  height: var(--archive-progress, 0%);
  border-radius: inherit;
  background: linear-gradient(#9d7cff, #ff70b7, #ffd896);
  box-shadow: 0 0 12px rgba(255, 112, 183, 0.65);
}

.archive-progress b {
  position: absolute;
  top: calc(var(--archive-progress, 0%) - 7px);
  color: #ffe4b7;
  font-size: 12px;
  font-weight: 400;
  filter: drop-shadow(0 0 8px #ff8ec8);
  transform: rotate(calc(var(--archive-progress-number, 0) * 1deg));
}

html.archive-lock-boot .archive-progress,
body.archive-locked .archive-progress,
body.archive-unlocking .archive-progress {
  opacity: 0;
}

@keyframes archiveCardShine {
  0% { opacity: 0; transform: rotate(18deg) translateX(-120%); }
  25% { opacity: 0.65; }
  100% { opacity: 0; transform: rotate(18deg) translateX(490%); }
}

/* ---- Layout ----------------------------------------------------------- */

@media (min-width: 900px) {
  body[data-nbb-page="archives"] .ml-carousel__track {
    display: grid !important;
    overflow: visible !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.05rem, 2vw, 1.6rem);
  }

  body[data-nbb-page="archives"] .ml-card {
    width: auto !important;
  }
}

@media (max-width: 899px) {
  .archive-progress { display: none; }

  body[data-nbb-page="archives"] .ml-carousel__track {
    padding-inline: max(1rem, 6vw);
    padding-block: 0.35rem 0.45rem;
    scroll-padding-inline: max(1rem, 6vw);
  }

  body[data-nbb-page="archives"] .ml-archive-action {
    padding: 0.35rem 0 0.8rem;
  }

  body[data-nbb-page="archives"] .ml-divider {
    padding: 0.3rem 0.75rem 0.85rem;
  }

  body[data-nbb-page="archives"] .ml-card__inner:hover {
    --card-lift: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }

  body[data-nbb-page="archives"] .ml-card,
  body[data-nbb-page="archives"] .ml-card__inner,
  body[data-nbb-page="archives"] .ml-card__img,
  body[data-nbb-page="archives"] .ml-header,
  body[data-nbb-page="archives"] .section-memory-lane-premium > section > :not(.ml-atmosphere) {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}