/* Round two: a compact symbol becomes the horizontal lockup.
   The supplied mark/wordmark pixels are cropped with CSS, never redrawn.
   Every animated property is transform or opacity. */
.mx-splash[data-lockup] {
  --arrival-word-mask: url('/assets/brand/logos/marginox-wordmark-white-transparent.png');
  --arrival-text: var(--mx-graphite, #20262a);
  --arrival-shine-strength: .8;
  --arrival-travel: cubic-bezier(.65, 0, .2, 1);
  --arrival-reveal: cubic-bezier(.22, 1, .36, 1);
}
html[data-theme="dark"] .mx-splash[data-lockup] {
  --arrival-text: var(--mx-soft-white, #f2f0ea);
}
.mx-arrival {
  position: relative;
  /* 48px visible symbol on desktop; 42px at a real 390px viewport.
     Phone mockups scale the complete lockup, including the wordmark. */
  font-size: clamp(6px, 2.7cqw, 12px);
  width: 21.5em;
  height: 5.333333em;
}
.mx-arrival-mark {
  position: absolute;
  left: 0;
  top: .666667em;
  width: 4em;
  height: 4em;
}
.mx-arrival-mark-art {
  position: absolute;
  inset: 0;
  background: var(--splash-image) 50.1377% 50% / 154.9168% 155.1515% no-repeat;
}
.mx-arrival-word-window {
  position: absolute;
  left: 5.666667em;
  top: 1.850717em;
  width: 15.833333em;
  height: 1.631899em;
  overflow: hidden;
}
.mx-arrival-word { display: block; position: relative; width: 100%; height: 100%; }
.mx-arrival-reveal { display: block; width: 100%; height: 100%; overflow: hidden; }
.mx-arrival-word-art {
  position: absolute;
  inset: 0;
  background: var(--arrival-text);
  -webkit-mask: var(--arrival-word-mask) 51.4243% 50% / 143.5095% 284.8101% no-repeat;
  mask: var(--arrival-word-mask) 51.4243% 50% / 143.5095% 284.8101% no-repeat;
}
.mx-arrival-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mx-arrival-shine::before {
  content: '';
  position: absolute;
  opacity: 0;
}
.mx-arrival-mark-shine {
  -webkit-mask: var(--splash-image) 50.1377% 50% / 154.9168% 155.1515% no-repeat;
  mask: var(--splash-image) 50.1377% 50% / 154.9168% 155.1515% no-repeat;
}
.mx-arrival-mark-shine::before {
  inset: -55%;
  background: linear-gradient(45deg, transparent 33%, rgb(255 255 255 / .34) 42%,
    rgb(255 255 255 / .78) 50%, rgb(255 255 255 / .34) 58%, transparent 67%);
}
.mx-arrival-word-shine {
  -webkit-mask: var(--arrival-word-mask) 51.4243% 50% / 143.5095% 284.8101% no-repeat;
  mask: var(--arrival-word-mask) 51.4243% 50% / 143.5095% 284.8101% no-repeat;
}
.mx-arrival-word-shine::before {
  top: -25%;
  bottom: -25%;
  left: -50%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgb(255 255 255 / .39) 30%,
    rgb(255 255 255 / .88) 50%, rgb(255 255 255 / .39) 70%, transparent);
}
/* Match the pre-animation state while cached images decode, so the wordmark
   cannot flash before the opening symbol. Resting previews show the full lockup. */
.mx-splash[data-lockup][data-preparing] .mx-arrival { transform: translate3d(8.75em, 0, 0); }
.mx-splash[data-lockup][data-preparing] .mx-arrival-word-window { opacity: 0; }
.mx-splash[data-lockup][data-preparing] .mx-arrival-mark-art { opacity: 0; transform: scale(.96); }
.mx-splash[data-lockup][data-playing] .mx-arrival {
  animation: mx-arrival-shift 720ms var(--arrival-travel) 330ms both;
}
.mx-splash[data-lockup][data-playing] .mx-arrival-mark-art {
  animation: mx-arrival-in 280ms ease-out both;
}
.mx-splash[data-lockup][data-playing] .mx-arrival-word-window {
  animation: mx-arrival-word-in 620ms var(--arrival-reveal) 490ms both;
}
.mx-splash[data-lockup][data-playing] .mx-arrival-mark-shine::before {
  animation: mx-arrival-mark-gloss 1000ms cubic-bezier(.4, 0, .2, 1) 730ms both;
}
.mx-splash[data-lockup][data-playing] .mx-arrival-word-shine::before {
  animation: mx-arrival-word-gloss 1150ms cubic-bezier(.4, 0, .2, 1) 880ms both;
}
/* Hold the opening mark 120ms longer, then travel 10% faster. */
.mx-splash[data-variant="unfold"][data-playing] .mx-arrival {
  animation-duration: 648ms;
  animation-delay: 490ms;
}
.mx-splash[data-variant="unfold"][data-playing] .mx-arrival-word-window {
  animation: mx-arrival-window-in 100ms linear 540ms both;
}
.mx-splash[data-variant="unfold"][data-playing] .mx-arrival-reveal {
  animation: mx-arrival-unfold 672ms var(--arrival-travel) 540ms both;
}
.mx-splash[data-variant="unfold"][data-playing] .mx-arrival-word {
  animation: mx-arrival-unfold-content 672ms var(--arrival-travel) 540ms both;
}
.mx-splash[data-variant="unfold"][data-playing] .mx-arrival-mark-shine::before { animation-delay: 880ms; animation-duration: 850ms; }
.mx-splash[data-variant="unfold"][data-playing] .mx-arrival-word-shine::before { animation-delay: 1080ms; animation-duration: 850ms; }
/* Cascade: eight original glyphs settle in with 45ms overlaps. */
.mx-arrival-glyph {
  position: absolute;
  left: var(--glyph-left);
  width: var(--glyph-width);
  height: 100%;
  overflow: hidden;
}
.mx-arrival-glyph .mx-arrival-word-art {
  left: calc(0em - var(--glyph-left));
  width: 15.833333em;
  right: auto;
}
.mx-splash[data-variant="cascade"][data-playing] .mx-arrival {
  animation-duration: 800ms;
  animation-delay: 350ms;
}
.mx-splash[data-variant="cascade"][data-playing] .mx-arrival-word-window { animation: none; }
.mx-splash[data-variant="cascade"][data-playing] .mx-arrival-glyph {
  animation: mx-arrival-letter 470ms var(--arrival-reveal) var(--glyph-delay) both;
}
.mx-splash[data-variant="cascade"][data-playing] .mx-arrival-mark-shine::before { animation-delay: 980ms; }
.mx-splash[data-variant="cascade"][data-playing] .mx-arrival-word-shine::before { animation-delay: 1180ms; }
@keyframes mx-arrival-shift {
  from { transform: translate3d(8.75em, 0, 0); }
  to { transform: none; }
}
@keyframes mx-arrival-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes mx-arrival-word-in {
  from { opacity: 0; transform: translate3d(-.8em, .1em, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes mx-arrival-window-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mx-arrival-unfold { from { transform: translate3d(-102%, 0, 0); } to { transform: none; } }
@keyframes mx-arrival-unfold-content { from { transform: translate3d(102%, 0, 0); } to { transform: none; } }
@keyframes mx-arrival-letter {
  from { opacity: 0; transform: translate3d(0, .8em, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes mx-arrival-mark-gloss {
  0% { opacity: 0; transform: translate3d(-48%, 48%, 0); }
  18%, 78% { opacity: var(--arrival-shine-strength); }
  100% { opacity: 0; transform: translate3d(48%, -48%, 0); }
}
@keyframes mx-arrival-word-gloss {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  16%, 82% { opacity: var(--arrival-shine-strength); }
  100% { opacity: 0; transform: translate3d(300%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .mx-splash[data-lockup], .mx-splash[data-lockup] *, .mx-splash[data-lockup] *::before {
    animation: none !important;
    transform: none !important;
  }
  .mx-arrival-word-window, .mx-arrival-glyph, .mx-arrival-mark-art { opacity: 1 !important; }
  .mx-arrival-shine { display: none; }
}