/* Five-column curtain overlay: transform animates on `.loading-screen__column` only.
   Each `.loading-screen__slice` is 100vw wide with negative `left` so columns show one
   horizontal strip of a shared centered canvas. */

/* Hide root scrollbars across platforms while preserving scroll behavior. */
html,
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  pointer-events: auto;
  overflow: hidden;
}

.loading-screen__columns {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.loading-screen__column {
  position: relative;
  flex: 0 0 20%;
  width: 20%;
  max-width: 20%;
  overflow: hidden;
  height: 100%;
  will-change: transform;
}

.loading-screen__slice {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-screen__column:nth-child(1) .loading-screen__slice {
  left: 0;
}
.loading-screen__column:nth-child(2) .loading-screen__slice {
  left: -20vw;
}
.loading-screen__column:nth-child(3) .loading-screen__slice {
  left: -40vw;
}
.loading-screen__column:nth-child(4) .loading-screen__slice {
  left: -60vw;
}
.loading-screen__column:nth-child(5) .loading-screen__slice {
  left: -80vw;
}

.loading-screen__columns > .loading-screen__column:nth-child(1) {
  --col-index: 0;
}
.loading-screen__columns > .loading-screen__column:nth-child(2) {
  --col-index: 1;
}
.loading-screen__columns > .loading-screen__column:nth-child(3) {
  --col-index: 2;
}
.loading-screen__columns > .loading-screen__column:nth-child(4) {
  --col-index: 3;
}
.loading-screen__columns > .loading-screen__column:nth-child(5) {
  --col-index: 4;
}

/* --- Animation A: splash (#101112) --- */

.loading-screen--splash .loading-screen__slice--splash {
  background-color: #101112;
}

.loading-screen--splash .loading-screen__column {
  background-color: #101112;
}

@keyframes loading-splash-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.loading-screen--splash .loading-screen__splash-brand,
.loading-screen--splash .loading-screen__splash-footer {
  opacity: 0;
}

.loading-screen--splash.loading-screen--splash-visible .loading-screen__splash-brand,
.loading-screen--splash.loading-screen--splash-visible .loading-screen__splash-footer {
  animation: loading-splash-fade-in 800ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.loading-screen--splash .loading-screen__splash-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
}

.loading-screen__splash-title {
  margin: 0;
  color: #ffffff;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(0.6875rem, 2.2vw, 0.875rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.loading-screen__splash-sub {
  margin: 0;
  color: #ffffff;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(2rem, 12vw, 3.75rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.loading-screen__splash-footer {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 32px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}

/* Splash columns: enter from above (right-to-left), exit upward (left-to-right). */

.loading-screen--splash .loading-screen__column {
  transform: translateY(-100%);
  transition: transform 1000ms cubic-bezier(0.85, 0, 0.28, 1);
  transition-delay: calc((4 - var(--col-index)) * 100ms);
}

.loading-screen--splash.loading-screen--splash-visible .loading-screen__column {
  transform: translateY(0);
}

.loading-screen--splash.loading-screen--splash-exit .loading-screen__column {
  transform: translateY(-100%);
  transition-delay: calc(var(--col-index) * 100ms);
}

.loading-screen--splash.loading-screen--splash-exit {
  pointer-events: none;
}

/* --- Animation B: plan loading overlay (#191919) --- */

.loading-screen--plan .loading-screen__slice--plan {
  background-color: #191919;
}

.loading-screen--plan .loading-screen__column {
  background-color: #191919;
}

.loading-screen__plan-copy {
  margin: 0;
  max-width: 600px;
  padding: 80px 24px;
  box-sizing: border-box;
  color: #ffffff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.8px;
  text-align: center;
}

.loading-screen--plan .loading-screen__column {
  transform: translateY(-100%);
  transition: transform 1000ms cubic-bezier(0.85, 0, 0.28, 1);
  transition-delay: calc(var(--col-index) * 100ms);
}

.loading-screen--plan.loading-screen--plan-visible .loading-screen__column {
  transform: translateY(0);
}

.loading-screen--plan.loading-screen--plan-exit .loading-screen__column {
  transform: translateY(-100%);
}

.loading-screen--plan.loading-screen--plan-exit {
  pointer-events: none;
}

/* Gentle, symmetric page blur. One transition drives both directions:
     - on `loading-active` (added in rAF after first paint): filter ramps 0 -> 8px
     - on `loading-unblur` (added on curtain exit): the `:not()` flips off, filter
       reverts to the default 0 and ramps 8 -> 0
   Same 1400ms `linear` curve as the curtain stagger so blur-in finishes the
   moment the last column lands, and blur-out finishes the moment the last
   column lifts off-screen — one long continuous motion in both directions. */

.app .main {
  filter: blur(0);
  transition: filter 1400ms linear;
}

body.loading-active:not(.loading-unblur) .app .main {
  filter: blur(8px);
}

body:has(.loading-screen) {
  overflow: hidden;
}

body.loading-active {
  overflow: hidden;
}