/* Marginox launch system
   Three short, transform/opacity-first app intros. The production overlay is
   mounted only for standalone/PWA launches (or an explicit preview query).
   The same scene component is reused by /brand-lab. */

@font-face {
  font-family: "Aileron Launch";
  src: url("/assets/brand/fonts/Aileron-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --mx-launch-bg: #f7f4ee;
  --mx-launch-surface: #ffffff;
  --mx-launch-ink: #20262a;
  --mx-launch-accent: #e65a0a;
  --mx-launch-line: rgba(32, 38, 42, 0.14);
  --mx-launch-grid: rgba(32, 38, 42, 0.045);
  --mx-launch-halo: rgba(230, 90, 10, 0.13);
  --mx-launch-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mx-launch-move: cubic-bezier(0.25, 1, 0.5, 1);
}

html[data-theme="dark"] {
  --mx-launch-bg: #0d1114;
  --mx-launch-surface: #1a2024;
  --mx-launch-ink: #f2f0ea;
  --mx-launch-accent: #ff6810;
  --mx-launch-line: rgba(242, 240, 234, 0.14);
  --mx-launch-grid: rgba(242, 240, 234, 0.045);
  --mx-launch-halo: rgba(255, 104, 16, 0.16);
}

html.mx-launch-pending,
html.mx-launch-pending body {
  background: var(--mx-launch-bg) !important;
}

html.mx-launch-pending body {
  overflow: hidden !important;
}

.mx-launch-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  background: var(--mx-launch-bg);
  opacity: 1;
  isolation: isolate;
  transition: opacity 260ms ease;
}

.mx-launch-overlay[data-exiting="true"] {
  opacity: 0;
  pointer-events: none;
}

.mx-launch-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--mx-launch-ink);
  background:
    radial-gradient(circle at 50% 46%, var(--mx-launch-halo), transparent 31%),
    var(--mx-launch-bg);
  container-type: inline-size;
}

.mx-launch-scene::before {
  content: "";
  position: absolute;
  inset: -2px;
  opacity: 0;
  background-image:
    linear-gradient(var(--mx-launch-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--mx-launch-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at center, #000, transparent 70%);
  mask-image: radial-gradient(circle at center, #000, transparent 70%);
  pointer-events: none;
}

.mx-launch-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 45%, color-mix(in srgb, var(--mx-launch-bg) 88%, transparent));
}

.mx-launch-stage {
  position: relative;
  z-index: 2;
  width: min(84vw, 390px);
  width: min(84cqw, 390px);
  min-width: 260px;
  display: grid;
  place-items: center;
  transform: translateZ(0);
}

.mx-launch-lockup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 116px;
  transform: translateZ(0);
}

.mx-launch-mark {
  position: relative;
  width: clamp(82px, 26vw, 112px);
  width: clamp(82px, 26cqw, 112px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  transform: translateZ(0);
}

.mx-launch-slice {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.mx-launch-slice-a {
  clip-path: polygon(0 0, 54% 0, 54% 100%, 0 100%);
}

.mx-launch-slice-b {
  clip-path: polygon(52% 0, 100% 0, 100% 100%, 52% 100%);
}

.mx-launch-symbol {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.mx-launch-symbol-dark { display: none; }
html[data-theme="dark"] .mx-launch-symbol-light { display: none; }
html[data-theme="dark"] .mx-launch-symbol-dark { display: block; }

.mx-launch-word-window {
  position: relative;
  width: clamp(160px, 47vw, 214px);
  width: clamp(160px, 47cqw, 214px);
  height: 54px;
  display: grid;
  align-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  margin-left: clamp(12px, 3vw, 20px);
  margin-left: clamp(12px, 3cqw, 20px);
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}

.mx-launch-word {
  display: block;
  white-space: nowrap;
  color: var(--mx-launch-ink);
  font: 600 clamp(18px, 6vw, 27px)/1 "Aileron Launch", "Aileron", system-ui, sans-serif;
  font: 600 clamp(18px, 6cqw, 27px)/1 "Aileron Launch", "Aileron", system-ui, sans-serif;
  letter-spacing: 0.235em;
  text-transform: uppercase;
  transform: translate3d(-48px, 0, 0);
  transform-origin: left center;
}

.mx-launch-rule {
  width: min(67vw, 286px);
  width: min(67cqw, 286px);
  height: 1px;
  margin-top: 23px;
  overflow: hidden;
  background: var(--mx-launch-line);
  transform: scaleX(0);
}

.mx-launch-rule::after {
  content: "";
  display: block;
  width: 35%;
  height: 100%;
  margin-left: 32.5%;
  background: var(--mx-launch-accent);
  transform: scaleX(0);
}

.mx-launch-kicker {
  margin-top: 14px;
  color: color-mix(in srgb, var(--mx-launch-ink) 54%, transparent);
  font: 600 9px/1 "Aileron Launch", "Aileron", system-ui, sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate3d(0, 5px, 0);
}

.mx-launch-sheen {
  position: absolute;
  inset: -14%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-160%, 0, 0) rotate(-35deg);
  background: linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, 0.96) 50%, transparent 60%);
  mix-blend-mode: screen;
  -webkit-mask: url("/assets/brand/logos/marginox-logo-icon-white-transparent.png") center / contain no-repeat;
  mask: url("/assets/brand/logos/marginox-logo-icon-white-transparent.png") center / contain no-repeat;
}

.mx-launch-spark {
  position: absolute;
  z-index: 7;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 104, 16, 0.65), 0 0 16px 4px rgba(255, 104, 16, 0.62);
  opacity: 0;
  transform: scale(0.25);
}

.mx-launch-spark::before,
.mx-launch-spark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  color: #fff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.mx-launch-spark::before { width: 34px; height: 1px; }
.mx-launch-spark::after { width: 1px; height: 34px; }

.mx-launch-orbit,
.mx-launch-bracket,
.mx-launch-scan {
  position: absolute;
  pointer-events: none;
}

.mx-launch-orbit {
  inset: -26%;
  border: 1px solid var(--mx-launch-line);
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.22) rotate(-32deg);
}

.mx-launch-orbit::before,
.mx-launch-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--mx-launch-accent);
}

.mx-launch-orbit::before {
  top: 9%;
  left: 22%;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 12px var(--mx-launch-accent);
}

.mx-launch-orbit::after {
  right: 12%;
  bottom: 18%;
  width: 3px;
  height: 3px;
}

.mx-launch-bracket {
  width: 22px;
  height: 22px;
  border-color: var(--mx-launch-accent);
  border-style: solid;
  opacity: 0;
}

.mx-launch-bracket-a { top: -19px; left: -19px; border-width: 1px 0 0 1px; }
.mx-launch-bracket-b { right: -19px; bottom: -19px; border-width: 0 1px 1px 0; }

.mx-launch-scan {
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(125cqw, 620px);
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--mx-launch-accent) 42%, #fff 50%, var(--mx-launch-accent) 58%, transparent);
  box-shadow: 0 0 16px var(--mx-launch-halo);
  transform: translate3d(-135%, -50%, 0);
}

/* 01 — Edge Reveal: the symbol begins centered, shifts left, then releases the
   wordmark from behind it. This is the production default. */
.mx-launch-scene[data-variant="reveal"] .mx-launch-lockup {
  transform: translate3d(clamp(78px, 23vw, 108px), 0, 0);
  transform: translate3d(clamp(78px, 23cqw, 108px), 0, 0);
}

.mx-launch-scene[data-variant="reveal"] .mx-launch-mark {
  opacity: 0;
  transform: translate3d(0, 5px, 0) scale(0.88);
}

.mx-launch-scene[data-variant="reveal"] .mx-launch-sheen,
.mx-launch-scene[data-variant="reveal"] .mx-launch-spark {
  display: none;
}

.mx-launch-scene[data-variant="reveal"][data-playing="true"]::before {
  animation: mx-grid-in 800ms ease 120ms both;
}

.mx-launch-scene[data-variant="reveal"][data-playing="true"] .mx-launch-mark {
  animation: mx-mark-enter 430ms var(--mx-launch-ease) 80ms both;
}

.mx-launch-scene[data-variant="reveal"][data-playing="true"] .mx-launch-lockup {
  animation: mx-lockup-open 640ms var(--mx-launch-ease) 390ms both;
}

.mx-launch-scene[data-variant="reveal"][data-playing="true"] .mx-launch-word-window {
  animation: mx-word-window 560ms var(--mx-launch-ease) 490ms both;
}

.mx-launch-scene[data-variant="reveal"][data-playing="true"] .mx-launch-word {
  animation: mx-word-slide 560ms var(--mx-launch-ease) 490ms both;
}

.mx-launch-scene[data-variant="reveal"][data-playing="true"] .mx-launch-rule {
  animation: mx-rule 420ms var(--mx-launch-ease) 790ms both;
}

.mx-launch-scene[data-variant="reveal"][data-playing="true"] .mx-launch-rule::after {
  animation: mx-rule 350ms var(--mx-launch-ease) 1040ms both;
}

.mx-launch-scene[data-variant="reveal"][data-playing="true"] .mx-launch-kicker {
  animation: mx-kicker 360ms var(--mx-launch-ease) 960ms both;
}

/* 02 — Signal Lock: the two brand planes arrive independently and meet on a
   precise scan line. */
.mx-launch-scene[data-variant="signal"] .mx-launch-lockup {
  flex-direction: column;
}

.mx-launch-scene[data-variant="signal"] .mx-launch-mark {
  width: clamp(96px, 31vw, 130px);
  width: clamp(96px, 31cqw, 130px);
}

.mx-launch-scene[data-variant="signal"] .mx-launch-slice-a {
  opacity: 0;
  transform: translate3d(-55px, -8px, 0) rotate(-4deg);
}

.mx-launch-scene[data-variant="signal"] .mx-launch-slice-b {
  opacity: 0;
  transform: translate3d(55px, 8px, 0) rotate(4deg);
}

.mx-launch-scene[data-variant="signal"] .mx-launch-word-window {
  width: min(70vw, 260px);
  width: min(70cqw, 260px);
  margin: 25px 0 0;
  clip-path: inset(0 0 0 0);
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 8px, 0) scaleX(1.08);
}

.mx-launch-scene[data-variant="signal"] .mx-launch-word {
  transform: none;
}

.mx-launch-scene[data-variant="signal"] .mx-launch-spark {
  top: 48%;
  left: 51%;
}

.mx-launch-scene[data-variant="signal"][data-playing="true"]::before {
  animation: mx-grid-in 540ms ease 90ms both;
}

.mx-launch-scene[data-variant="signal"][data-playing="true"] .mx-launch-slice-a,
.mx-launch-scene[data-variant="signal"][data-playing="true"] .mx-launch-slice-b {
  animation: mx-slice-lock 560ms var(--mx-launch-ease) 180ms both;
}

.mx-launch-scene[data-variant="signal"][data-playing="true"] .mx-launch-scan {
  animation: mx-scan 760ms var(--mx-launch-move) 440ms both;
}

.mx-launch-scene[data-variant="signal"][data-playing="true"] .mx-launch-spark {
  animation: mx-spark 420ms var(--mx-launch-ease) 680ms both;
}

.mx-launch-scene[data-variant="signal"][data-playing="true"] .mx-launch-word-window {
  animation: mx-signal-word 450ms var(--mx-launch-ease) 790ms both;
}

.mx-launch-scene[data-variant="signal"][data-playing="true"] .mx-launch-rule {
  animation: mx-rule 480ms var(--mx-launch-ease) 880ms both;
}

.mx-launch-scene[data-variant="signal"][data-playing="true"] .mx-launch-rule::after {
  animation: mx-rule 360ms var(--mx-launch-ease) 1060ms both;
}

.mx-launch-scene[data-variant="signal"][data-playing="true"] .mx-launch-kicker {
  animation: mx-kicker 360ms var(--mx-launch-ease) 1010ms both;
}

/* 03 — Aperture: orbital data resolves into the mark, then the frame locks. */
.mx-launch-scene[data-variant="orbit"] .mx-launch-lockup {
  flex-direction: column;
}

.mx-launch-scene[data-variant="orbit"] .mx-launch-mark {
  width: clamp(96px, 31vw, 132px);
  width: clamp(96px, 31cqw, 132px);
  opacity: 0;
  transform: scale(0.66) rotate(-7deg);
}

.mx-launch-scene[data-variant="orbit"] .mx-launch-word-window {
  width: min(70vw, 260px);
  width: min(70cqw, 260px);
  margin: 30px 0 0;
  clip-path: inset(0 0 0 0);
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

.mx-launch-scene[data-variant="orbit"] .mx-launch-word { transform: none; }

.mx-launch-scene[data-variant="orbit"] .mx-launch-spark {
  top: -1%;
  right: 14%;
}

.mx-launch-scene[data-variant="orbit"][data-playing="true"]::before {
  animation: mx-grid-in 540ms ease 80ms both;
}

.mx-launch-scene[data-variant="orbit"][data-playing="true"] .mx-launch-orbit {
  animation: mx-orbit 900ms var(--mx-launch-ease) 90ms both;
}

.mx-launch-scene[data-variant="orbit"][data-playing="true"] .mx-launch-mark {
  animation: mx-aperture-mark 580ms var(--mx-launch-ease) 410ms both;
}

.mx-launch-scene[data-variant="orbit"][data-playing="true"] .mx-launch-bracket-a,
.mx-launch-scene[data-variant="orbit"][data-playing="true"] .mx-launch-bracket-b {
  animation: mx-bracket 430ms var(--mx-launch-ease) 760ms both;
}

.mx-launch-scene[data-variant="orbit"][data-playing="true"] .mx-launch-sheen {
  animation: mx-sheen 430ms var(--mx-launch-move) 830ms both;
}

.mx-launch-scene[data-variant="orbit"][data-playing="true"] .mx-launch-spark {
  animation: mx-spark 420ms var(--mx-launch-ease) 1010ms both;
}

.mx-launch-scene[data-variant="orbit"][data-playing="true"] .mx-launch-word-window {
  animation: mx-orbit-word 440ms var(--mx-launch-ease) 830ms both;
}

.mx-launch-scene[data-variant="orbit"][data-playing="true"] .mx-launch-rule {
  animation: mx-rule 430ms var(--mx-launch-ease) 960ms both;
}

.mx-launch-scene[data-variant="orbit"][data-playing="true"] .mx-launch-rule::after {
  animation: mx-rule 330ms var(--mx-launch-ease) 1130ms both;
}

.mx-launch-scene[data-variant="orbit"][data-playing="true"] .mx-launch-kicker {
  animation: mx-kicker 350ms var(--mx-launch-ease) 1080ms both;
}

@keyframes mx-grid-in {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes mx-mark-enter {
  from { opacity: 0; transform: translate3d(0, 5px, 0) scale(0.88); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes mx-lockup-open {
  from { transform: translate3d(clamp(78px, 23cqw, 108px), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes mx-word-window {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes mx-word-slide {
  from { transform: translate3d(-48px, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes mx-sheen {
  0% { opacity: 0; transform: translate3d(-160%, 0, 0) rotate(-35deg); }
  24% { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(160%, 0, 0) rotate(-35deg); }
}

@keyframes mx-spark {
  0% { opacity: 0; transform: scale(0.25) rotate(0); }
  42% { opacity: 1; transform: scale(1) rotate(22deg); }
  100% { opacity: 0; transform: scale(1.5) rotate(45deg); }
}

@keyframes mx-rule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes mx-kicker {
  from { opacity: 0; transform: translate3d(0, 5px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mx-slice-lock {
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes mx-scan {
  0% { opacity: 0; transform: translate3d(-135%, -50%, 0); }
  15% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(35%, -50%, 0); }
}

@keyframes mx-signal-word {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scaleX(1.08); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scaleX(1); }
}

@keyframes mx-orbit {
  0% { opacity: 0; transform: scale(1.22) rotate(-32deg); }
  25% { opacity: 1; }
  78% { opacity: 0.75; }
  100% { opacity: 0; transform: scale(0.83) rotate(165deg); }
}

@keyframes mx-aperture-mark {
  from { opacity: 0; transform: scale(0.66) rotate(-7deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes mx-bracket {
  from { opacity: 0; transform: scale(1.5); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes mx-orbit-word {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 420px) {
  .mx-launch-word-window { width: 174px; }
  .mx-launch-word { font-size: 20px; }
  .mx-launch-kicker { letter-spacing: 0.23em; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-launch-scene *,
  .mx-launch-scene *::before,
  .mx-launch-scene *::after {
    animation: none !important;
    transition: none !important;
  }

  .mx-launch-scene::before { opacity: 0.65; }
  .mx-launch-mark,
  .mx-launch-slice-a,
  .mx-launch-slice-b,
  .mx-launch-word-window,
  .mx-launch-kicker {
    opacity: 1 !important;
    transform: none !important;
  }
  .mx-launch-lockup { transform: none !important; }
  .mx-launch-word-window { clip-path: inset(0 0 0 0) !important; }
  .mx-launch-word { transform: none !important; }
  .mx-launch-rule,
  .mx-launch-rule::after { transform: scaleX(1) !important; }
  .mx-launch-sheen,
  .mx-launch-spark,
  .mx-launch-orbit,
  .mx-launch-scan,
  .mx-launch-bracket { display: none !important; }
}