/*
  Edition switch transition only.

  Keep this file insulated. Allowed selectors:
  - .mv-edition-transition*
  - body.mv-edition-transition-*
*/

.mv-edition-transition {
  --mv-edition-transition-bg: #050508;
  --mv-edition-transition-crimson: #c41230;
  --mv-edition-transition-gold: #b8953e;
  --mv-edition-transition-white: #f0f0f4;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
}

.mv-edition-transition__panel {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(184, 149, 62, 0.28) 48%, rgba(240, 240, 244, 0.34) 50%, rgba(196, 18, 48, 0.34) 52%, transparent 100%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(196, 18, 48, 0.22), transparent 68%),
    var(--mv-edition-transition-bg);
  box-shadow: 0 0 80px rgba(196, 18, 48, 0.28);
  transform: translateX(-100%);
  transition: transform 620ms cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

.mv-edition-transition__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--mv-edition-transition-white);
  font-size: clamp(0.8rem, 2vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 240ms ease;
}

.mv-edition-transition--past.mv-edition-transition--out .mv-edition-transition__panel {
  transform: translateX(-100%);
}

.mv-edition-transition--current.mv-edition-transition--out .mv-edition-transition__panel {
  transform: translateX(100%);
}

body.mv-edition-transition-out-past .mv-edition-transition--past.mv-edition-transition--out .mv-edition-transition__panel,
body.mv-edition-transition-out-current .mv-edition-transition--current.mv-edition-transition--out .mv-edition-transition__panel,
.mv-edition-transition--in .mv-edition-transition__panel {
  transform: translateX(0);
}

body.mv-edition-transition-in-ready .mv-edition-transition--past.mv-edition-transition--in .mv-edition-transition__panel {
  transform: translateX(100%);
}

body.mv-edition-transition-in-ready .mv-edition-transition--current.mv-edition-transition--in .mv-edition-transition__panel {
  transform: translateX(-100%);
}

body.mv-edition-transition-out-past .mv-edition-transition__label,
body.mv-edition-transition-out-current .mv-edition-transition__label {
  opacity: 1;
}

body.mv-edition-transition-out-past,
body.mv-edition-transition-out-current {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mv-edition-transition {
    display: none;
  }
}