:root {
  --bg: #fbfaf7;
  --surface: rgba(255,255,255,.78);
  --surface-solid: #ffffff;
  --ink: #151b39;
  --ink-soft: #5f687e;
  --line: #e2e6ef;
  --purple: #6f4ee8;
  --purple-deep: #5135d8;
  --blue: #315ce7;
  --blue-soft: #e9efff;
  --gold: #c69f52;
  --gold-soft: #efe1be;
  --lavender: #f1edff;
  --shadow: 0 24px 70px rgba(46,55,92,.11);
  --shadow-soft: 0 14px 40px rgba(46,55,92,.08);
  --radius-xl: 36px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  position: relative;
  isolation: isolate;
  font-family: var(--font-ui);
  color: var(--ink);
  background:
    radial-gradient(circle at 13% 12%, rgba(113,78,232,.14), transparent 28%),
    radial-gradient(circle at 82% 17%, rgba(49,92,231,.11), transparent 25%),
    radial-gradient(circle at 83% 77%, rgba(198,159,82,.11), transparent 24%),
    linear-gradient(145deg, #fffdf9 0%, #f7f9fd 50%, #f7f2ff 100%);
  min-height: 100vh;
  overflow-x: hidden;
  background-size: 145% 145%, 145% 145%, 155% 155%, 135% 135%;
  animation: pageAtmosphere 18s ease-in-out infinite alternate;
}

body::before {
  content: '';
  z-index: -1;
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .36;
  background-image:
    radial-gradient(circle at 16% 22%, rgba(80,67,140,.16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 31%, rgba(80,67,140,.14) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 72%, rgba(198,159,82,.15) 0 1px, transparent 1.5px),
    radial-gradient(circle at 87% 68%, rgba(80,67,140,.14) 0 1px, transparent 1.5px);
  background-size: 180px 180px, 250px 250px, 220px 220px, 300px 300px;
}

::selection { background: rgba(111,78,232,.18); }
a { color: inherit; }
button, input { font: inherit; }

.page-shell { position: relative; z-index: 2; isolation: isolate; max-width: 1500px; margin: 0 auto; padding: 0 34px; }
.ambient { position: absolute; border-radius: 50%; filter: blur(34px); pointer-events: none; z-index: -1; mix-blend-mode: multiply; }
.ambient-one { width: 440px; height: 440px; background: rgba(118,84,232,.18); top: 145px; left: -220px; animation: drift 10s ease-in-out infinite; }
.ambient-two { width: 360px; height: 360px; background: rgba(49,92,231,.16); top: 720px; right: -210px; animation: drift 12s ease-in-out infinite reverse; }
.ambient-three { width: 260px; height: 260px; background: rgba(198,159,82,.13); bottom: 170px; left: 28%; animation: drift 15s ease-in-out infinite; }

.site-header {
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(184,191,209,.44);
}
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.brand img { filter: drop-shadow(0 8px 16px rgba(111,78,232,.14)); }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-family: var(--font-display); font-size: 25px; letter-spacing: .16em; font-weight: 500; }
.brand-copy span { color: var(--gold); font-size: 10px; letter-spacing: .52em; margin-top: 7px; margin-left: 2px; }
.header-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); background: rgba(255,255,255,.7); backdrop-filter: blur(10px);
  font-size: 13px; box-shadow: 0 8px 24px rgba(49,58,95,.05);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 5px rgba(111,78,232,.10); }

.hero {
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: 70px;
  padding: 80px 0 92px;
}
.eyebrow { margin: 0 0 20px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .22em; display: flex; align-items: center; gap: 11px; }
.eyebrow span { width: 34px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.hero h1, .section-heading h2, .updates-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.035em;
  margin: 0;
  color: var(--ink);
}
.hero h1 { font-size: clamp(58px, 6.2vw, 92px); line-height: .98; max-width: 760px; }
.hero h1 em { color: var(--purple); font-weight: 400; }
.hero-lede { max-width: 650px; font-size: 20px; line-height: 1.72; color: var(--ink-soft); margin: 30px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.button {
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; padding: 0 24px; border: 1px solid transparent; text-decoration: none;
  font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%); box-shadow: 0 12px 28px rgba(93,68,218,.22); }
.button-primary:hover { box-shadow: 0 16px 34px rgba(93,68,218,.30); }
.button-ghost { background: rgba(255,255,255,.64); border-color: var(--line); color: var(--ink); backdrop-filter: blur(10px); }
.button-ghost:hover { border-color: rgba(111,78,232,.30); background: rgba(255,255,255,.88); }

.trust-row { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 22px 28px; color: var(--ink-soft); font-size: 13px; }
.trust-row div { display: flex; align-items: center; gap: 8px; }
.trust-row strong { color: var(--ink); font-weight: 650; }
.mini-icon { color: var(--purple); }

.hero-art { position: relative; min-width: 0; }
.orbit-card {
  min-height: 590px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 46px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.79), rgba(247,247,255,.58)),
    radial-gradient(circle at 78% 18%, rgba(67,93,232,.10), transparent 40%);
  border: 1px solid rgba(207,212,228,.82);
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(20px);
}
.orbit-card::before {
  content: '';
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(198,159,82,.19);
  border-radius: 36px;
  pointer-events: none;
}
.orbit-halo { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(111,78,232,.14), rgba(49,92,231,.05) 45%, transparent 72%); animation: breathe 8s ease-in-out infinite; }
.celestial-art { width: min(96%, 700px); height: auto; position: relative; z-index: 1; animation: float 5.8s ease-in-out infinite; }
.pulse-star { animation: pulse 2.8s ease-in-out infinite; transform-origin: center; }
.pulse-star-b { animation-delay: 1.2s; }
.art-note {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 13px 17px; border-radius: 999px; background: rgba(255,255,255,.82); border: 1px solid var(--line);
  box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); color: var(--ink); font-size: 13px;
}
.art-note span { color: var(--gold); font-size: 11px; letter-spacing: .14em; }
.art-note-one { left: 35px; top: 96px; }
.art-note-two { right: 30px; bottom: 96px; }

.vision-section { padding: 76px 0 110px; }
.section-heading { max-width: 780px; margin: 0 auto 48px; text-align: center; }
.section-heading .eyebrow { justify-content: center; }
.section-heading h2, .updates-copy h2 { font-size: clamp(42px, 4.5vw, 64px); }
.section-heading > p:last-child, .updates-copy > p:last-child { color: var(--ink-soft); line-height: 1.75; font-size: 17px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card {
  padding: 30px;
  min-height: 255px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.74);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
  transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(46,55,92,.12); }
.feature-highlight { background: linear-gradient(160deg, rgba(244,240,255,.94), rgba(239,245,255,.87)); border-color: rgba(111,78,232,.16); }
.feature-icon { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 28px; color: var(--purple); background: linear-gradient(145deg, #f0ebff, #eaf1ff); font-size: 21px; }
.feature-card h3 { font-family: var(--font-display); font-size: 27px; font-weight: 500; margin: 0 0 12px; }
.feature-card p { color: var(--ink-soft); line-height: 1.7; margin: 0; font-size: 14px; }

.updates-section {
  margin: 20px 0 88px;
  padding: 54px;
  display: grid;
  grid-template-columns: 1fr .92fr;
  gap: 58px;
  align-items: center;
  border: 1px solid rgba(183,189,208,.55);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(115deg, rgba(255,255,255,.88), rgba(243,239,255,.75)),
    radial-gradient(circle at 90% 20%, rgba(49,92,231,.11), transparent 35%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}
.updates-section::after { content: '✦'; position: absolute; right: 46px; top: 28px; font-size: 82px; line-height: 1; color: rgba(198,159,82,.12); }
.updates-copy { position: relative; z-index: 1; }
.notify-form { position: relative; z-index: 1; }
.notify-form label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.input-row input {
  width: 100%; min-width: 0; height: 54px; border: 1px solid var(--line); border-radius: 999px;
  padding: 0 20px; background: rgba(255,255,255,.78); color: var(--ink); outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input-row input:focus { border-color: rgba(111,78,232,.46); box-shadow: 0 0 0 4px rgba(111,78,232,.09); background: white; }
.form-note, .form-status { font-size: 12px; color: var(--ink-soft); margin: 10px 4px 0; }
.form-status { min-height: 18px; font-weight: 650; color: var(--purple-deep); }

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 28px;
  align-items: center;
  min-height: 110px;
  border-top: 1px solid rgba(184,191,209,.44);
  color: var(--ink-soft);
  font-size: 13px;
}
.footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-display); font-size: 17px; }
.copyright { white-space: nowrap; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .10s; }

@keyframes float { 0%,100% { transform: translateY(0) rotate(-.25deg); } 50% { transform: translateY(-18px) rotate(.55deg); } }
@keyframes breathe { 0%,100% { transform: scale(.94) rotate(-5deg); opacity: .62; } 50% { transform: scale(1.09) rotate(8deg); opacity: 1; } }
@keyframes pulse { 0%,100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes drift { 0%,100% { transform: translate3d(0,0,0) scale(.96); } 50% { transform: translate3d(48px,-34px,0) scale(1.08); } }

@media (max-width: 1100px) {
  .page-shell { padding: 0 24px; }
  .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 62px; }
  .hero-copy { text-align: center; max-width: 800px; margin: 0 auto; }
  .hero-copy .eyebrow { justify-content: center; }
  .hero-lede { margin-left: auto; margin-right: auto; }
  .hero-actions, .trust-row { justify-content: center; }
  .hero-art { max-width: 820px; width: 100%; margin: 0 auto; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .updates-section { grid-template-columns: 1fr; gap: 30px; }
  .site-footer { grid-template-columns: 1fr; text-align: center; gap: 9px; padding: 28px 0; }
  .footer-brand { justify-content: center; }
}

@media (max-width: 700px) {
  .page-shell { padding: 0 16px; }
  .site-header { min-height: 82px; }
  .header-badge { padding: 8px 10px; font-size: 11px; }
  .brand img { width: 40px; height: 40px; }
  .brand-copy strong { font-size: 20px; }
  .brand-copy span { font-size: 8px; }
  .hero { padding: 52px 0 66px; min-height: auto; }
  .hero h1 { font-size: clamp(48px, 14vw, 66px); }
  .hero-lede { font-size: 17px; line-height: 1.65; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .button { width: 100%; }
  .trust-row { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .orbit-card { min-height: 430px; border-radius: 30px; }
  .orbit-card::before { inset: 16px; border-radius: 24px; }
  .art-note { font-size: 11px; padding: 10px 12px; }
  .art-note-one { left: 18px; top: 66px; }
  .art-note-two { right: 18px; bottom: 66px; }
  .vision-section { padding: 52px 0 72px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; }
  .updates-section { padding: 34px 22px; border-radius: 28px; margin-bottom: 56px; }
  .input-row { grid-template-columns: 1fr; }
  .input-row .button { height: 54px; }
}


/* V2 ambient color movement + anti-spam honeypot */
body::after {
  content: '';
  position: fixed;
  width: 74vw;
  height: 74vw;
  right: -28vw;
  top: -31vw;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: .46;
  filter: blur(64px);
  background:
    conic-gradient(from 30deg,
      rgba(111,78,232,.16),
      rgba(49,92,231,.13),
      rgba(198,159,82,.11),
      rgba(111,78,232,.16));
  animation: auroraOrbit 22s ease-in-out infinite alternate;
}

.page-shell::before {
  content: '';
  position: absolute;
  inset: 11% -18% auto 34%;
  height: 360px;
  pointer-events: none;
  z-index: -1;
  opacity: .46;
  filter: blur(70px);
  border-radius: 50%;
  background: linear-gradient(100deg, rgba(49,92,231,.12), rgba(111,78,232,.15), rgba(198,159,82,.09));
  background-size: 180% 180%;
  animation: colorCurrent 17s ease-in-out infinite alternate;
}

.orbit-card::after {
  content: '';
  position: absolute;
  inset: -35% -20%;
  pointer-events: none;
  opacity: .42;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.82) 49%, transparent 66%);
  transform: translateX(-58%) rotate(8deg);
  animation: glassShimmer 11s ease-in-out infinite;
}

.button-primary {
  position: relative;
  overflow: hidden;
  background-size: 180% 180%;
  animation: buttonGradient 7s ease-in-out infinite alternate;
}

.button-primary::after {
  content: '';
  position: absolute;
  inset: -80% auto -80% -35%;
  width: 28%;
  transform: rotate(18deg);
  background: rgba(255,255,255,.24);
  filter: blur(5px);
  animation: buttonShine 6.5s ease-in-out infinite;
}

.hp-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@keyframes auroraOrbit {
  0% { transform: translate3d(0,0,0) rotate(0deg) scale(.94); }
  50% { transform: translate3d(-5vw,5vh,0) rotate(20deg) scale(1.05); }
  100% { transform: translate3d(-2vw,11vh,0) rotate(42deg) scale(.98); }
}

@keyframes colorCurrent {
  0% { transform: translate3d(-4%,0,0) scale(.96); background-position: 0% 40%; }
  100% { transform: translate3d(7%,8%,0) scale(1.06); background-position: 100% 60%; }
}

@keyframes glassShimmer {
  0%, 67% { transform: translateX(-72%) rotate(8deg); opacity: 0; }
  76% { opacity: .34; }
  92%, 100% { transform: translateX(76%) rotate(8deg); opacity: 0; }
}

@keyframes buttonGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes buttonShine {
  0%, 66% { left: -40%; opacity: 0; }
  74% { opacity: .9; }
  88%, 100% { left: 125%; opacity: 0; }
}

@media (max-width: 700px) {
  body::after { width: 110vw; height: 110vw; right: -58vw; top: -38vw; opacity: .22; }
  .page-shell::before { inset: 12% -60% auto 4%; opacity: .22; }
}



/* V4: visible, elegant motion layer */
.orbit-card {
  background-size: 150% 150%, 145% 145%;
  animation: orbitSurfaceFlow 12s ease-in-out infinite alternate;
}

.orbit-halo {
  background:
    radial-gradient(circle, rgba(111,78,232,.19), rgba(49,92,231,.08) 46%, transparent 72%),
    conic-gradient(from 0deg, rgba(111,78,232,.10), rgba(49,92,231,.12), rgba(198,159,82,.09), rgba(111,78,232,.10));
  filter: blur(2px);
}

.celestial-art .orbit-line-moving {
  stroke-dasharray: 8 14;
  animation: orbitDash 8s linear infinite;
}

.celestial-art .orbit-line-moving-b {
  stroke-dasharray: 4 18;
  animation: orbitDashReverse 11s linear infinite;
}

.status-dot {
  animation: statusPulse 2.4s ease-in-out infinite;
}

@keyframes pageAtmosphere {
  0% {
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 0%;
  }
  50% {
    background-position: 11% 7%, 90% 10%, 86% 88%, 48% 42%;
  }
  100% {
    background-position: 18% 12%, 78% 18%, 72% 80%, 100% 100%;
  }
}

@keyframes orbitSurfaceFlow {
  0% { background-position: 0% 50%, 100% 20%; }
  100% { background-position: 100% 45%, 15% 80%; }
}

@keyframes orbitDash {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -176; }
}

@keyframes orbitDashReverse {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 220; }
}

@keyframes statusPulse {
  0%,100% { box-shadow: 0 0 0 5px rgba(111,78,232,.10); transform: scale(1); }
  50% { box-shadow: 0 0 0 10px rgba(111,78,232,.02); transform: scale(1.14); }
}



/* V5 — explicit painted motion stage, Playwright-verified */
.motion-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

.motion-veil,
.motion-ribbon,
.motion-stars span {
  position: absolute;
  will-change: transform, opacity;
}

.motion-veil {
  border-radius: 50%;
  filter: blur(42px);
  opacity: .34;
}

.motion-veil-purple {
  width: min(46vw, 760px);
  aspect-ratio: 1;
  left: -11vw;
  top: 9vh;
  background: radial-gradient(circle at 42% 42%, rgba(126,87,239,.48), rgba(126,87,239,.20) 43%, rgba(126,87,239,0) 72%);
  animation: motionPurple 11s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.motion-veil-blue {
  width: min(42vw, 700px);
  aspect-ratio: 1;
  right: -9vw;
  top: 20vh;
  background: radial-gradient(circle at 50% 50%, rgba(58,111,239,.42), rgba(58,111,239,.17) 44%, rgba(58,111,239,0) 72%);
  animation: motionBlue 13s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.motion-veil-gold {
  width: min(34vw, 560px);
  aspect-ratio: 1;
  left: 38vw;
  bottom: -16vh;
  background: radial-gradient(circle at 50% 50%, rgba(210,170,91,.34), rgba(210,170,91,.14) 45%, rgba(210,170,91,0) 73%);
  animation: motionGold 15s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.motion-ribbon {
  left: -12%;
  top: 46%;
  width: 124%;
  height: 210px;
  opacity: .16;
  filter: blur(34px);
  transform: rotate(-7deg);
  background: linear-gradient(90deg, rgba(104,70,232,0), rgba(104,70,232,.42) 25%, rgba(53,91,239,.34) 53%, rgba(201,164,95,.30) 74%, rgba(201,164,95,0));
  animation: ribbonSweep 12s ease-in-out infinite alternate;
}

.motion-stars span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(104,70,232,.45);
  box-shadow: 0 0 14px rgba(104,70,232,.30);
  animation: starBreathe 4.5s ease-in-out infinite;
}
.motion-stars span:nth-child(1) { left: 8%; top: 27%; animation-delay: -.5s; }
.motion-stars span:nth-child(2) { left: 31%; top: 14%; width: 4px; height: 4px; animation-delay: -2.2s; }
.motion-stars span:nth-child(3) { right: 18%; top: 18%; background: rgba(53,91,239,.42); animation-delay: -1.3s; }
.motion-stars span:nth-child(4) { right: 10%; top: 62%; width: 4px; height: 4px; background: rgba(201,164,95,.48); animation-delay: -3.1s; }
.motion-stars span:nth-child(5) { left: 23%; bottom: 16%; width: 6px; height: 6px; animation-delay: -2.6s; }
.motion-stars span:nth-child(6) { left: 61%; bottom: 27%; width: 3px; height: 3px; background: rgba(53,91,239,.48); animation-delay: -.9s; }

@keyframes motionPurple {
  0% { transform: translate3d(-35px,-20px,0) scale(.92); opacity: .25; }
  52% { transform: translate3d(70px,45px,0) scale(1.12); opacity: .42; }
  100% { transform: translate3d(115px,10px,0) scale(1.02); opacity: .32; }
}

@keyframes motionBlue {
  0% { transform: translate3d(35px,-35px,0) scale(.95); opacity: .24; }
  50% { transform: translate3d(-70px,40px,0) scale(1.10); opacity: .40; }
  100% { transform: translate3d(-115px,-4px,0) scale(1.00); opacity: .31; }
}

@keyframes motionGold {
  0% { transform: translate3d(-55px,35px,0) scale(.90); opacity: .20; }
  52% { transform: translate3d(45px,-55px,0) scale(1.12); opacity: .34; }
  100% { transform: translate3d(105px,-25px,0) scale(1.02); opacity: .25; }
}

@keyframes ribbonSweep {
  0% { transform: translate3d(-4%, -26px, 0) rotate(-7deg) scaleX(.94); opacity: .10; }
  100% { transform: translate3d(5%, 34px, 0) rotate(-4deg) scaleX(1.04); opacity: .22; }
}

@keyframes starBreathe {
  0%,100% { opacity: .18; transform: scale(.68); }
  50% { opacity: .85; transform: scale(1.35); }
}

/* Make the hero artwork visibly alive without becoming distracting. */
.celestial-art { animation-duration: 5.2s; }
@keyframes float {
  0%,100% { transform: translate3d(0, 8px, 0) rotate(-.55deg); }
  50% { transform: translate3d(0, -24px, 0) rotate(.85deg); }
}

/* Accessibility: reduce spatial travel, but keep a slow non-spatial light/color breath.
   This avoids the former all-animation shutdown while honoring reduced-motion intent. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none !important; }
  body, body::before, body::after, .page-shell::before,
  .ambient, .celestial-art, .orbit-card, .orbit-halo,
  .orbit-card::after, .button-primary, .button-primary::after,
  .pulse-star, .status-dot, .celestial-art .orbit-line-moving,
  .celestial-art .orbit-line-moving-b, .motion-ribbon, .motion-stars span {
    animation: none !important;
  }
  .motion-veil {
    transform: none !important;
    animation: reducedLightBreath 12s ease-in-out infinite alternate !important;
  }
  .motion-veil-purple { opacity: .20; }
  .motion-veil-blue { opacity: .18; animation-delay: -4s !important; }
  .motion-veil-gold { opacity: .16; animation-delay: -8s !important; }
}

@keyframes reducedLightBreath {
  0% { opacity: .14; filter: blur(48px); }
  100% { opacity: .30; filter: blur(38px); }
}

@media (max-width: 700px) {
  .motion-veil-purple { width: 92vw; left: -44vw; top: 12vh; }
  .motion-veil-blue { width: 88vw; right: -45vw; top: 38vh; }
  .motion-veil-gold { width: 80vw; left: 20vw; bottom: -18vh; }
  .motion-ribbon { top: 54%; opacity: .11; }
}

/* V5 cleanup: explicit stage supersedes the older off-canvas ambient layers. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
.ambient,
body::after,
.page-shell::before {
  display: none;
}

/* V6 — JS-driven ambient motion. This is intentionally independent of
   prefers-reduced-motion so animation remains visible on systems that report
   reduced motion. Users can disable it explicitly with the Motion control. */
.header-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--ink-soft);
  box-shadow: 0 8px 24px rgba(49,58,95,.05);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}
.motion-toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  box-shadow: 0 0 0 5px rgba(111,78,232,.09);
}
.motion-toggle[aria-pressed="false"] .motion-toggle-dot {
  background: #a7afbe;
  box-shadow: none;
}
.motion-toggle:hover { border-color: rgba(111,78,232,.28); }

/* Let JS own the continuously moving pieces to avoid CSS/OS motion-policy conflicts. */
.js-motion .motion-veil,
.js-motion .motion-ribbon,
.js-motion .motion-stars span,
.js-motion .celestial-art,
.js-motion .orbit-halo,
.js-motion .status-dot,
.js-motion .celestial-art .orbit-line-moving,
.js-motion .celestial-art .orbit-line-moving-b,
.js-motion body {
  animation: none !important;
}

.motion-off .motion-stage { opacity: .58; }
.motion-off .motion-veil,
.motion-off .motion-ribbon,
.motion-off .motion-stars span,
.motion-off .celestial-art,
.motion-off .orbit-halo,
.motion-off .status-dot,
.motion-off .celestial-art .orbit-line-moving,
.motion-off .celestial-art .orbit-line-moving-b {
  transition: transform .45s ease, opacity .45s ease, filter .45s ease;
}

@media (max-width: 700px) {
  .header-tools { gap: 6px; }
  .motion-toggle { padding: 0 10px; min-height: 36px; }
  .motion-toggle #motionToggleLabel { display: none; }
}