/* Logo-only launch studies. Static PNG alpha masks, one-shot transform/opacity
   motion, no rendering loop or runtime dependency. Not mounted by the live desk. */
.mx-splash {
  --splash-bg: var(--mx-porcelain, #f7f4ee);
  --splash-image: url('/assets/brand/logos/marginox-logo-icon-color-transparent.png');
  --splash-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  container-type: inline-size;
  background: var(--splash-bg);
  pointer-events: none;
}
html[data-theme="dark"] .mx-splash {
  --splash-bg: var(--mx-ink, #0d1114);
  --splash-image: url('/assets/brand/logos/marginox-logo-icon-reversed-transparent.png');
}
.mx-splash-mark {
  position: relative;
  z-index: 1;
  width: clamp(160px, 27cqw, 220px);
  aspect-ratio: 1;
  background: var(--splash-image) center / contain no-repeat;
}
.mx-splash-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: var(--splash-image) center / contain no-repeat;
  mask: var(--splash-image) center / contain no-repeat;
}
.mx-splash-light {
  position: absolute;
  top: -50%;
  left: -100%;
  width: 100%;
  height: 200%;
  opacity: 0;
  background: linear-gradient(112deg, transparent 25%, rgb(255 255 255 / .12) 36%,
    rgb(255 255 255 / .72) 48%, rgb(255 255 255 / .88) 50%,
    rgb(255 255 255 / .22) 59%, transparent 72%);
}
.mx-splash[data-playing] .mx-splash-mark {
  animation: mx-splash-arrive 340ms var(--splash-ease) both;
}
.mx-splash[data-playing] .mx-splash-light {
  animation: mx-splash-sweep 720ms cubic-bezier(.4, 0, .18, 1) 150ms both;
}
/* Razor: the approved monochrome mark and a much tighter reflection. */
.mx-splash[data-variant="razor"] {
  --splash-image: url('/assets/brand/logos/marginox-logo-icon-graphite-transparent.png');
}
html[data-theme="dark"] .mx-splash[data-variant="razor"] {
  --splash-image: url('/assets/brand/logos/marginox-logo-icon-white-transparent.png');
}
.mx-splash[data-variant="razor"] .mx-splash-mark { background: none; }
.mx-splash[data-variant="razor"] .mx-splash-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--splash-image) center / contain no-repeat;
  opacity: .68;
}
.mx-splash[data-variant="razor"] .mx-splash-light {
  background: linear-gradient(112deg, transparent 42%, rgb(255 255 255 / .12) 47%,
    #fff 50%, rgb(255 255 255 / .12) 53%, transparent 58%);
}
.mx-splash[data-variant="razor"][data-playing] .mx-splash-mark {
  animation: mx-splash-razor 900ms var(--splash-ease) both;
}
.mx-splash[data-variant="razor"][data-playing] .mx-splash-light {
  animation-duration: 610ms;
  animation-delay: 100ms;
}
/* Ember: a small, prepainted light pool. Only its opacity/transform move. */
.mx-splash-warmth {
  position: absolute;
  width: min(76%, 480px);
  aspect-ratio: 1.6;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(230 90 10 / .12), rgb(230 90 10 / .035) 40%, transparent 70%);
  opacity: 0;
}
.mx-splash[data-variant="ember"] .mx-splash-light {
  background: linear-gradient(112deg, transparent 22%, rgb(255 188 115 / .16) 36%,
    rgb(255 240 218 / .92) 50%, rgb(255 161 71 / .24) 62%, transparent 77%);
}
.mx-splash[data-variant="ember"][data-playing] .mx-splash-mark {
  animation-duration: 440ms;
}
.mx-splash[data-variant="ember"][data-playing] .mx-splash-light {
  animation-duration: 820ms;
  animation-delay: 170ms;
}
.mx-splash[data-variant="ember"][data-playing] .mx-splash-warmth {
  animation: mx-splash-warmth 1200ms var(--splash-ease) both;
}
.mx-splash[data-exiting] { animation: mx-splash-exit 200ms ease-out both; }
@keyframes mx-splash-arrive {
  from { opacity: 0; transform: translate3d(0, 5px, 0) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes mx-splash-razor {
  0% { opacity: 0; transform: scale(.985); }
  25%, 100% { opacity: 1; transform: none; }
}
/* The band travels left to right, with a slight rise through the middle and
   a soft landing at the lower right. The mark itself is never distorted. */
@keyframes mx-splash-sweep {
  0% { opacity: 0; transform: translate3d(0, 16%, 0); }
  16% { opacity: 1; }
  52% { transform: translate3d(100%, -5%, 0); }
  84% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(200%, 16%, 0); }
}
@keyframes mx-splash-warmth {
  0% { opacity: 0; transform: translate3d(-12%, 15%, 0) scale(.94); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(12%, 15%, 0) scale(1); }
}
@keyframes mx-splash-exit { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mx-splash, .mx-splash * { animation: none !important; transform: none !important; }
  .mx-splash-light, .mx-splash-warmth { display: none; }
  .mx-splash-mark { opacity: 1 !important; }
}