/* Four matched masks preserve the stationary logo inside each moving panel. */
.page-motion {
  --motion-panel: var(--surface-dark);
  --motion-blue: #0046FF;
  --motion-ease: cubic-bezier(0.76, 0, 0.24, 1);
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  touch-action: none;
}

html.intro-pending .page-motion,
html.page-arriving .page-motion,
html.page-leaving .page-motion {
  display: block;
  pointer-events: auto;
  /* The page remains available even when the controller script fails to load. */
  animation: jaimo-overlay-release 1ms steps(1, end) 4900ms forwards;
}

.page-motion::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--motion-blue);
  opacity: 0;
  content: "";
}

html.intro-pending .page-motion::before { opacity: 1; }

.page-motion__bars,
.page-motion__brand {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-motion__bars { z-index: 1; }
.page-motion__brand { z-index: 2; }

.page-motion__bar,
.page-motion__slice {
  position: absolute;
  inset: 0;
  clip-path: inset(var(--slice-top) 101% var(--slice-bottom) 0);
  will-change: clip-path;
}

.page-motion__bar { background: var(--motion-panel); }

.page-motion__bar:nth-child(1),
.page-motion__slice:nth-child(1) {
  --slice-top: 0%;
  --slice-bottom: calc(75% - 1px);
  --intro-in: 120ms;
  --intro-out: 1100ms;
  --swap-in: 0ms;
  --swap-out: 0ms;
}

.page-motion__bar:nth-child(2),
.page-motion__slice:nth-child(2) {
  --slice-top: calc(25% - 1px);
  --slice-bottom: calc(50% - 1px);
  --intro-in: 270ms;
  --intro-out: 1250ms;
  --swap-in: 50ms;
  --swap-out: 90ms;
}

.page-motion__bar:nth-child(3),
.page-motion__slice:nth-child(3) {
  --slice-top: calc(50% - 1px);
  --slice-bottom: calc(25% - 1px);
  --intro-in: 420ms;
  --intro-out: 1400ms;
  --swap-in: 100ms;
  --swap-out: 180ms;
}

.page-motion__bar:nth-child(4),
.page-motion__slice:nth-child(4) {
  --slice-top: calc(75% - 1px);
  --slice-bottom: 0%;
  --intro-in: 570ms;
  --intro-out: 1550ms;
  --swap-in: 150ms;
  --swap-out: 270ms;
}

.page-motion__slice img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: min(70vw, 800px);
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

html.intro-pending.motion-playing .page-motion::before {
  animation: jaimo-underlay-clear 1ms steps(1, end) 1100ms forwards;
}

html.intro-pending.motion-playing .page-motion__bar,
html.intro-pending.motion-playing .page-motion__slice {
  animation:
    jaimo-panel-in 640ms var(--motion-ease) var(--intro-in) both,
    jaimo-panel-out 840ms var(--motion-ease) var(--intro-out) forwards;
}

html.page-arriving .page-motion__bar,
html.page-arriving .page-motion__slice {
  clip-path: inset(var(--slice-top) 0 var(--slice-bottom) 0);
}

html.page-arriving.motion-playing .page-motion__bar,
html.page-arriving.motion-playing .page-motion__slice {
  animation: jaimo-panel-out 300ms var(--motion-ease) var(--swap-out) forwards;
}

html.page-leaving.motion-playing .page-motion__bar,
html.page-leaving.motion-playing .page-motion__slice {
  animation: jaimo-panel-in 300ms var(--motion-ease) var(--swap-in) both;
}

@keyframes jaimo-panel-in {
  from { clip-path: inset(var(--slice-top) 101% var(--slice-bottom) 0); }
  to { clip-path: inset(var(--slice-top) 0 var(--slice-bottom) 0); }
}

@keyframes jaimo-panel-out {
  from { clip-path: inset(var(--slice-top) 0 var(--slice-bottom) 0); }
  to { clip-path: inset(var(--slice-top) 0 var(--slice-bottom) 101%); }
}

@keyframes jaimo-underlay-clear {
  /* Matching endpoints avoid 1ms step-end rounding retaining the backdrop. */
  from, to { opacity: 0; }
}

@keyframes jaimo-overlay-release {
  from, to { visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.intro-pending .page-motion,
  html.page-arriving .page-motion,
  html.page-leaving .page-motion {
    display: none;
    animation: none;
    pointer-events: none;
  }
}