/* #045 RETRY-3 — entrance-first boot (no main UI / PNG dock before Cosmic) */
html.mjn-ce-pending,
html.mjn-ce-pending body {
  background: #020617 !important;
  overflow: hidden !important;
}

html.mjn-ce-pending body > header,
html.mjn-ce-pending body > main,
html.mjn-ce-pending body > footer,
html.mjn-ce-pending .mjn-app,
html.mjn-ce-pending .mjn-header,
html.mjn-ce-pending .mjn-main,
html.mjn-ce-pending .mjn-character-stage,
html.mjn-ce-pending .mjn-cln,
html.mjn-ce-pending .mjn-region-sheet,
html.mjn-ce-pending #mjn-admin-entry-dialog {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html.mjn-ce-pending #mjn-character-entrance {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

html.mjn-ce-pending .mjn-character-stage__img,
body.mjn-ce-active .mjn-character-stage__img {
  display: none !important;
}

/* #035.1 Cosmic Brand Reveal → character idle dock */

:root {
  --mjn-ce-bg: #040914;
  --mjn-ce-glow: rgba(251, 146, 60, 0.5);
  --mjn-ce-accent: #fb923c;
  --mjn-ce-blue: #3b82f6;
  --mjn-ce-text: #fff7ed;
  --mjn-ce-muted: rgba(255, 247, 237, 0.78);
  --mjn-ce-z: 120000;
}

body.mjn-ce-active {
  overflow: hidden;
}

body.mjn-ce-active .mjn-app {
  visibility: hidden;
  pointer-events: none;
}

body.mjn-ce-ready .mjn-app {
  visibility: visible;
  pointer-events: auto;
  animation: mjn-ce-ui-in 0.55s ease both;
}

@keyframes mjn-ce-ui-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mjn-ce {
  position: fixed;
  inset: 0;
  z-index: var(--mjn-ce-z);
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 40%, rgba(29, 78, 216, 0.22), transparent 46%),
    radial-gradient(circle at 18% 78%, rgba(251, 146, 60, 0.12), transparent 36%),
    linear-gradient(180deg, #02060f 0%, var(--mjn-ce-bg) 52%, #0b1f3a 100%);
  color: var(--mjn-ce-text);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.5s ease;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

.mjn-ce.is-exit {
  opacity: 0;
  pointer-events: none;
}

.mjn-ce__space {
  position: absolute;
  inset: -24%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.07), transparent 34%),
    repeating-linear-gradient(
      -22deg,
      transparent 0 22px,
      rgba(255, 255, 255, 0.012) 22px 23px
    );
  opacity: 0;
  transform: scale(1.18);
  transition: opacity 0.85s ease, transform 1.4s ease;
  pointer-events: none;
}

.mjn-ce.is-space .mjn-ce__space {
  opacity: 1;
  transform: scale(1);
}

.mjn-ce__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 78% 22%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 62% 70%, rgba(251, 146, 60, 0.65), transparent),
    radial-gradient(1px 1px at 28% 64%, rgba(147, 197, 253, 0.7), transparent),
    radial-gradient(1px 1px at 88% 48%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 44% 12%, rgba(255, 255, 255, 0.5), transparent);
  transition: opacity 0.9s ease;
}

.mjn-ce.is-space .mjn-ce__stars {
  opacity: 1;
}

/* —— Cosmic brand bodies —— */
.mjn-ce__cosmic {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}

.mjn-ce__body {
  position: absolute;
  left: 50%;
  top: 42%;
  display: grid;
  place-items: center;
  opacity: 0;
  transform-style: preserve-3d;
  will-change: transform, filter, opacity;
}

.mjn-ce__mass {
  position: absolute;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 42%),
    radial-gradient(circle at 60% 70%, rgba(251, 146, 60, 0.55), transparent 55%),
    rgba(59, 130, 246, 0.35);
  filter: blur(10px) contrast(1.2);
  opacity: 0;
  transform: scale(1.4) rotate(0deg);
}

.mjn-ce__glyph {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 900;
  color: transparent;
  letter-spacing: 0.55em;
  filter: blur(14px) contrast(1.8) saturate(1.4);
  text-shadow: none;
  transform: scale(1.6) skewX(-18deg) rotateZ(24deg);
  opacity: 0;
  white-space: nowrap;
  max-width: min(92vw, 440px);
}

.mjn-ce__body--mjn .mjn-ce__glyph {
  font-size: clamp(2.4rem, 11vw, 4.2rem);
  letter-spacing: 0.42em;
}

.mjn-ce__body--name .mjn-ce__glyph {
  font-size: clamp(1.9rem, 8vw, 3.1rem);
  letter-spacing: 0.28em;
}

.mjn-ce__body--slogan .mjn-ce__glyph {
  font-size: clamp(0.92rem, 3.6vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.22em;
}

/* MJN — deep-center, heavy */
.mjn-ce.is-mjn-approach .mjn-ce__body--mjn {
  opacity: 1;
  animation: mjn-ce-orbit-mjn 0.95s cubic-bezier(0.18, 0.7, 0.22, 1) both;
}

.mjn-ce.is-mjn-approach .mjn-ce__body--mjn .mjn-ce__mass {
  opacity: 1;
  animation: mjn-ce-mass-spin 0.95s linear both;
}

.mjn-ce.is-mjn-approach .mjn-ce__body--mjn .mjn-ce__glyph {
  opacity: 1;
  animation: mjn-ce-converge-heavy 0.95s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.mjn-ce.is-mjn-impact .mjn-ce__body--mjn {
  top: 34%;
  transform: translate(-50%, -50%) scale(1);
  animation: mjn-ce-impact-heavy 0.42s cubic-bezier(0.15, 1.4, 0.35, 1) both;
}

.mjn-ce.is-mjn-impact .mjn-ce__body--mjn .mjn-ce__mass {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mjn-ce.is-mjn-impact .mjn-ce__body--mjn .mjn-ce__glyph {
  color: #fff7ed;
  letter-spacing: 0.28em;
  filter: none;
  transform: none;
  opacity: 1;
  text-shadow:
    0 0 2px rgba(255, 247, 237, 0.95),
    0 0 18px rgba(251, 146, 60, 0.95),
    0 0 42px rgba(59, 130, 246, 0.55);
  -webkit-text-stroke: 1px rgba(255, 247, 237, 0.55);
}

/* 매진남 — oblique curved */
.mjn-ce.is-name-approach .mjn-ce__body--name {
  opacity: 1;
  animation: mjn-ce-orbit-name 0.95s cubic-bezier(0.18, 0.75, 0.22, 1) both;
}

.mjn-ce.is-name-approach .mjn-ce__body--name .mjn-ce__mass {
  opacity: 1;
  width: 6.2rem;
  height: 6.2rem;
  animation: mjn-ce-mass-spin-rev 0.95s linear both;
}

.mjn-ce.is-name-approach .mjn-ce__body--name .mjn-ce__glyph {
  opacity: 1;
  animation: mjn-ce-converge-soft 0.95s cubic-bezier(0.22, 0.9, 0.28, 1) both;
}

.mjn-ce.is-name-impact .mjn-ce__body--name {
  top: 46%;
  transform: translate(-50%, -50%) scale(1);
  animation: mjn-ce-impact-soft 0.4s cubic-bezier(0.2, 1.25, 0.35, 1) both;
}

.mjn-ce.is-name-impact .mjn-ce__body--name .mjn-ce__mass {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mjn-ce.is-name-impact .mjn-ce__body--name .mjn-ce__glyph {
  color: var(--mjn-ce-accent);
  letter-spacing: 0.12em;
  filter: none;
  transform: none;
  opacity: 1;
  text-shadow:
    0 0 2px rgba(251, 146, 60, 0.9),
    0 0 16px rgba(251, 146, 60, 0.75),
    0 0 34px rgba(255, 247, 237, 0.35);
  -webkit-text-stroke: 0.6px rgba(255, 237, 213, 0.45);
}

/* slogan — wide trajectory */
.mjn-ce.is-slogan-approach .mjn-ce__body--slogan {
  opacity: 1;
  animation: mjn-ce-orbit-slogan 1.15s cubic-bezier(0.16, 0.72, 0.22, 1) both;
}

.mjn-ce.is-slogan-approach .mjn-ce__body--slogan .mjn-ce__mass {
  opacity: 1;
  width: 11rem;
  height: 4.2rem;
  border-radius: 55% 45% 60% 40% / 60% 40% 55% 45%;
  animation: mjn-ce-mass-spin 1.15s linear both;
}

.mjn-ce.is-slogan-approach .mjn-ce__body--slogan .mjn-ce__glyph {
  opacity: 1;
  animation: mjn-ce-converge-wide 1.15s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.mjn-ce.is-slogan-impact .mjn-ce__body--slogan {
  top: 58%;
  transform: translate(-50%, -50%) scale(1);
  animation: mjn-ce-impact-wide 0.45s cubic-bezier(0.18, 1.2, 0.32, 1) both;
}

.mjn-ce.is-slogan-impact .mjn-ce__body--slogan .mjn-ce__mass {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mjn-ce.is-slogan-impact .mjn-ce__body--slogan .mjn-ce__glyph {
  color: var(--mjn-ce-muted);
  letter-spacing: 0.06em;
  filter: none;
  transform: none;
  opacity: 1;
  text-shadow:
    0 0 1px rgba(255, 247, 237, 0.7),
    0 0 14px rgba(147, 197, 253, 0.55),
    0 0 28px rgba(251, 146, 60, 0.28);
  -webkit-text-stroke: 0.4px rgba(191, 219, 254, 0.35);
}

/* composition lock + connected pulse */
.mjn-ce.is-composition .mjn-ce__body--mjn { top: 34%; }
.mjn-ce.is-composition .mjn-ce__body--name { top: 46%; }
.mjn-ce.is-composition .mjn-ce__body--slogan { top: 58%; }

.mjn-ce.is-composition .mjn-ce__body {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.mjn-ce__composition-ring {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(78vw, 360px);
  height: min(52vh, 280px);
  transform: translate(-50%, -50%) scale(0.72);
  border-radius: 48%;
  border: 1px solid transparent;
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}

.mjn-ce.is-composition .mjn-ce__composition-ring {
  opacity: 1;
  border-color: rgba(255, 247, 237, 0.28);
  box-shadow:
    0 0 0 1px rgba(251, 146, 60, 0.18),
    0 0 40px rgba(59, 130, 246, 0.25);
  transition: opacity 0.35s ease, transform 0.45s ease, box-shadow 0.45s ease;
  transform: translate(-50%, -50%) scale(1);
}

.mjn-ce.is-brand-pulse .mjn-ce__composition-ring {
  animation: mjn-ce-ring-pulse 0.55s ease both;
}

.mjn-ce.is-brand-pulse .mjn-ce__body .mjn-ce__glyph {
  animation: mjn-ce-glyph-pulse 0.55s ease both;
}

.mjn-ce__brand-light {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7ed 0%, rgba(251, 146, 60, 0.8) 40%, transparent 70%);
  opacity: 0;
  transform: scale(0.4);
  filter: blur(1px);
  pointer-events: none;
}

.mjn-ce.is-brand-pulse .mjn-ce__brand-light {
  opacity: 1;
  transform: scale(2.2);
  transition: opacity 0.25s ease, transform 0.35s ease;
}

.mjn-ce.is-handoff .mjn-ce__brand-light {
  opacity: 1;
  animation: mjn-ce-light-handoff 0.55s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
}

.mjn-ce.is-handoff .mjn-ce__cosmic .mjn-ce__body,
.mjn-ce.is-reveal .mjn-ce__cosmic .mjn-ce__body,
.mjn-ce.is-handoff .mjn-ce__composition-ring,
.mjn-ce.is-reveal .mjn-ce__composition-ring {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mjn-ce.is-reveal .mjn-ce__brand-light {
  opacity: 0;
}

/* —— Character pipeline (kept) —— */
.mjn-ce__silhouette {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.mjn-ce__char-2d {
  width: min(58vw, 280px);
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.84) translateY(24px);
  filter: brightness(0) contrast(1.1) drop-shadow(0 0 24px rgba(251, 146, 60, 0.25));
  transition:
    opacity 0.55s ease,
    transform 0.7s cubic-bezier(0.22, 1.15, 0.36, 1),
    filter 0.8s ease;
  /* #045 RETRY: normal path never shows A-pose PNG */
  visibility: hidden;
  pointer-events: none;
}

.mjn-ce.is-fallback.is-silhouette .mjn-ce__char-2d,
.mjn-ce.is-fallback.is-form .mjn-ce__char-2d,
.mjn-ce.is-fallback.is-idle .mjn-ce__char-2d {
  visibility: visible;
}

.mjn-ce.is-fallback.is-silhouette .mjn-ce__char-2d {
  opacity: 0.88;
  transform: scale(1) translateY(0);
}

.mjn-ce.is-fallback.is-form .mjn-ce__char-2d,
.mjn-ce.is-fallback.is-idle .mjn-ce__char-2d {
  filter: brightness(1) contrast(1) drop-shadow(0 18px 36px rgba(0, 0, 0, 0.35));
  opacity: 1;
}

.mjn-ce.is-silhouette .mjn-ce__char-2d {
  opacity: 0;
}

.mjn-ce.is-form .mjn-ce__char-2d {
  opacity: 0;
}

.mjn-ce.is-to3d .mjn-ce__char-2d {
  opacity: 0;
  visibility: hidden;
}

.mjn-ce__fragments {
  position: absolute;
  width: min(70vw, 340px);
  height: min(70vw, 340px);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mjn-ce.is-silhouette .mjn-ce__fragments { opacity: 1; }
.mjn-ce.is-form .mjn-ce__fragments { opacity: 0; }

.mjn-ce__frag {
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(251, 146, 60, 0.18)),
    rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.7);
  animation: mjn-ce-frag 1.1s ease both;
}

.mjn-ce__frag:nth-child(1) { --tx: -42%; --ty: -38%; --rot: -18deg; left: 18%; top: 16%; }
.mjn-ce__frag:nth-child(2) { --tx: 48%; --ty: -28%; --rot: 14deg; right: 14%; top: 22%; left: auto; }
.mjn-ce__frag:nth-child(3) { --tx: -36%; --ty: 40%; --rot: 10deg; left: 12%; bottom: 18%; top: auto; }
.mjn-ce__frag:nth-child(4) { --tx: 40%; --ty: 36%; --rot: -12deg; right: 10%; bottom: 14%; left: auto; top: auto; }

@keyframes mjn-ce-frag {
  to { transform: translate(0, 0) rotate(0deg) scale(1); }
}

.mjn-ce__canvas-wrap {
  position: absolute;
  /* Character reveal is spatial, never a framed card. */
  left: 50%;
  bottom: max(6vh, env(safe-area-inset-bottom, 0px));
  top: auto;
  right: auto;
  width: min(38vw, 420px);
  height: min(62vh, 720px);
  transform: translateX(-50%);
  z-index: 4;
  opacity: 0;
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 720px), (pointer: coarse) {
  .mjn-ce__canvas-wrap {
    width: min(72vw, 300px);
    height: min(55dvh, 520px);
    bottom: max(10vh, calc(env(safe-area-inset-bottom, 0px) + 48px));
  }
}

/* #045 RETRY: 3D canvas is the reveal subject — never swap to 2D while waiting */
.mjn-ce.is-to3d:not(.is-fallback) .mjn-ce__canvas-wrap,
.mjn-ce.is-idle:not(.is-fallback) .mjn-ce__canvas-wrap {
  opacity: 1;
}

/* Keep handoff frameless; only the character itself is revealed. */
.mjn-ce.is-handoff:not(.is-fallback) .mjn-ce__canvas-wrap,
.mjn-ce.is-to3d:not(.is-fallback) .mjn-ce__canvas-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mjn-ce.is-hold-ready:not(.is-fallback) .mjn-ce__brand-light {
  opacity: 1;
  animation: mjn-ce-light-handoff 1.4s ease-in-out infinite alternate;
}

.mjn-ce.is-hold-ready:not(.is-fallback) .mjn-ce__canvas-wrap {
  opacity: 0;
}

html:not(.mjn-ce-character-ready) .mjn-ce.is-to3d:not(.is-fallback) .mjn-ce__canvas-wrap,
html:not(.mjn-ce-character-ready) .mjn-ce.is-idle:not(.is-fallback) .mjn-ce__canvas-wrap {
  opacity: 0;
}

/* Removed: ready-wait must NOT re-show 2D A-pose */

.mjn-ce__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.mjn-ce__skip {
  position: absolute;
  z-index: 5;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.38);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 8px 4px;
}

.mjn-ce__fallback-note {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(52px, calc(env(safe-area-inset-bottom) + 40px));
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.28);
  opacity: 0;
}

.mjn-ce.is-fallback .mjn-ce__fallback-note,
.mjn-ce.is-hold-ready .mjn-ce__fallback-note {
  opacity: 1;
}

.mjn-ce.is-hold-ready .mjn-ce__skip:disabled {
  opacity: 0.72;
  cursor: wait;
}

/* Fallback: skip orbit — snap readable text */
.mjn-ce.is-fallback .mjn-ce__body {
  opacity: 0;
  transform: translate(-50%, -50%);
}
.mjn-ce.is-fallback.is-mjn-impact .mjn-ce__body--mjn,
.mjn-ce.is-fallback.is-name-impact .mjn-ce__body--name,
.mjn-ce.is-fallback.is-slogan-impact .mjn-ce__body--slogan,
.mjn-ce.is-fallback.is-composition .mjn-ce__body {
  opacity: 1;
  animation: none;
}
.mjn-ce.is-fallback .mjn-ce__glyph {
  animation: none !important;
  filter: none;
  transform: none;
  letter-spacing: 0.08em;
  color: var(--mjn-ce-text);
  opacity: 1;
}
.mjn-ce.is-fallback .mjn-ce__mass {
  display: none;
}

/* Dock */
.mjn-character-stage {
  position: fixed;
  left: auto;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  width: min(42vw, 168px);
  height: min(54vw, 220px);
  z-index: 40;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border: 0;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.22, 1.15, 0.36, 1),
    width 0.92s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.92s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.92s cubic-bezier(0.22, 1, 0.36, 1),
    right 0.92s cubic-bezier(0.22, 1, 0.36, 1),
    bottom 0.92s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.92s ease,
    box-shadow 0.6s ease;
}

.mjn-character-stage.is-live {
  opacity: 1;
  pointer-events: none;
}

.mjn-character-stage.is-live:not(.is-hero) {
  transform: none;
}

/* #045 Hero Entrance — viewport-dominant before dock (after is-live so transform wins) */
.mjn-character-stage.is-hero {
  left: 50%;
  right: auto;
  bottom: max(6vh, env(safe-area-inset-bottom, 0px));
  width: min(38vw, 420px);
  height: min(62vh, 720px);
  max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 24px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  transform: translateX(-50%);
  opacity: 1;
  z-index: 60;
  border: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
  box-shadow: none;
}

body.mjn-ce-hero .mjn-character-stage.is-hero {
  pointer-events: none;
}

.mjn-character-stage__canvas,
.mjn-character-stage__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.mjn-character-stage__img.is-idle-2d {
  animation: mjn-ce-idle-2d 3.2s ease-in-out infinite;
}

@keyframes mjn-ce-idle-2d {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.015); }
}

/* —— Keyframes: trajectories & morph —— */
@keyframes mjn-ce-orbit-mjn {
  0% { transform: translate(-50%, -50%) translate3d(0, 42vh, -420px) scale(0.35) rotateY(160deg); }
  55% { transform: translate(-50%, -50%) translate3d(0, 8vh, -80px) scale(0.85) rotateY(40deg); }
  100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1.05) rotateY(0deg); }
}

@keyframes mjn-ce-orbit-name {
  0% { transform: translate(-50%, -50%) translate3d(-48vw, 28vh, -360px) scale(0.4) rotateZ(-48deg) rotateY(-80deg); }
  60% { transform: translate(-50%, -50%) translate3d(-10vw, 6vh, -40px) scale(0.92) rotateZ(-8deg) rotateY(-12deg); }
  100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1) rotateZ(0deg) rotateY(0deg); }
}

@keyframes mjn-ce-orbit-slogan {
  0% { transform: translate(-50%, -50%) translate3d(52vw, -18vh, -500px) scale(0.28) rotateX(55deg) rotateZ(18deg); }
  50% { transform: translate(-50%, -50%) translate3d(14vw, -4vh, -120px) scale(0.75) rotateX(18deg) rotateZ(6deg); }
  100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1) rotateX(0deg) rotateZ(0deg); }
}

@keyframes mjn-ce-mass-spin {
  from { transform: scale(1.5) rotate(0deg); border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; }
  50% { border-radius: 58% 42% 48% 52% / 42% 58% 42% 58%; }
  to { transform: scale(0.55) rotate(280deg); opacity: 0.35; }
}

@keyframes mjn-ce-mass-spin-rev {
  from { transform: scale(1.45) rotate(0deg); }
  to { transform: scale(0.5) rotate(-260deg); opacity: 0.3; }
}

@keyframes mjn-ce-converge-heavy {
  0% {
    color: transparent;
    letter-spacing: 0.85em;
    filter: blur(16px) contrast(2) saturate(1.6);
    transform: scale(1.85) skewX(-22deg) rotateZ(32deg);
    opacity: 0.55;
  }
  55% {
    color: rgba(255, 247, 237, 0.35);
    letter-spacing: 0.45em;
    filter: blur(6px) contrast(1.3);
    transform: scale(1.2) skewX(-6deg) rotateZ(8deg);
    opacity: 0.9;
  }
  100% {
    color: #fff7ed;
    letter-spacing: 0.28em;
    filter: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes mjn-ce-converge-soft {
  0% {
    color: transparent;
    letter-spacing: 0.7em;
    filter: blur(14px) contrast(1.7);
    transform: scale(1.55) skewX(16deg) rotateZ(-28deg);
    opacity: 0.45;
  }
  60% {
    color: rgba(251, 146, 60, 0.4);
    letter-spacing: 0.28em;
    filter: blur(5px);
    transform: scale(1.12) skewX(4deg) rotateZ(-6deg);
    opacity: 0.92;
  }
  100% {
    color: var(--mjn-ce-accent);
    letter-spacing: 0.12em;
    filter: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes mjn-ce-converge-wide {
  0% {
    color: transparent;
    letter-spacing: 1.1em;
    filter: blur(18px) contrast(1.9);
    transform: scaleX(1.8) scaleY(0.55) skewY(8deg);
    opacity: 0.4;
  }
  55% {
    color: rgba(226, 232, 240, 0.35);
    letter-spacing: 0.35em;
    filter: blur(7px);
    transform: scaleX(1.15) scaleY(0.9) skewY(2deg);
    opacity: 0.88;
  }
  100% {
    color: var(--mjn-ce-muted);
    letter-spacing: 0.06em;
    filter: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes mjn-ce-impact-heavy {
  0% { transform: translate(-50%, -50%) scale(1.22); }
  55% { transform: translate(-50%, -50%) scale(0.94); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes mjn-ce-impact-soft {
  0% { transform: translate(-50%, -50%) scale(1.12) translateX(-12px); }
  100% { transform: translate(-50%, -50%) scale(1) translateX(0); }
}

@keyframes mjn-ce-impact-wide {
  0% { transform: translate(-50%, -50%) scaleX(1.35) scaleY(0.88); }
  100% { transform: translate(-50%, -50%) scaleX(1) scaleY(1); }
}

@keyframes mjn-ce-ring-pulse {
  0% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.0); }
  40% {
    box-shadow:
      0 0 0 2px rgba(255, 247, 237, 0.45),
      0 0 48px rgba(251, 146, 60, 0.55),
      0 0 90px rgba(59, 130, 246, 0.35);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(251, 146, 60, 0.25),
      0 0 36px rgba(59, 130, 246, 0.28);
  }
}

@keyframes mjn-ce-glyph-pulse {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.35); }
}

@keyframes mjn-ce-light-handoff {
  0% { top: 46%; transform: scale(2.4); opacity: 1; }
  70% { top: 62%; transform: scale(3.6); opacity: 0.85; }
  100% { top: 72%; transform: scale(0.6); opacity: 0; }
}

@media (max-width: 720px), (pointer: coarse) {
  .mjn-character-stage.is-hero {
    width: min(72vw, 300px);
    height: min(55dvh, 520px);
    bottom: max(10vh, calc(env(safe-area-inset-bottom, 0px) + 48px));
  }
}

@media (max-width: 420px) {
  .mjn-character-stage {
    width: min(34vw, 128px);
    height: min(34dvh, 176px);
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }
  .mjn-character-stage.is-hero {
    width: min(78vw, 280px);
    height: min(52dvh, 480px);
  }
  .mjn-ce__body--slogan .mjn-ce__glyph {
    white-space: normal;
    text-align: center;
    max-width: 88vw;
  }
  .mjn-ce__char-2d {
    width: min(72vw, 240px);
    max-height: 52vh;
  }
  .mjn-ce__body--mjn .mjn-ce__glyph {
    font-size: clamp(2rem, 14vw, 3.2rem);
  }
}

@media (max-width: 560px) {
  .mjn-ce__composition-ring {
    width: min(92vw, 320px);
    height: min(48vh, 240px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mjn-ce__body,
  .mjn-ce__glyph,
  .mjn-ce__mass,
  .mjn-ce__composition-ring,
  .mjn-ce__brand-light,
  .mjn-ce__char-2d,
  .mjn-ce__space,
  .mjn-ce__canvas-wrap,
  .mjn-character-stage,
  body.mjn-ce-ready .mjn-app {
    transition: none !important;
    animation: none !important;
  }

  .mjn-character-stage__img.is-idle-2d {
    animation: none !important;
  }
}