/* The message is readable on the first frame; only the atmosphere settles in. */
.hero .hero-copy { animation: universe-copy-arrive 850ms cubic-bezier(.2,.65,.25,1) both; }
.hero .hero-visual { animation: universe-scene-arrive 1200ms ease-out both; }
@keyframes universe-copy-arrive {
  from { opacity: .65; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes universe-scene-arrive { from { opacity: .72; } to { opacity: 1; } }
body.motion-paused .hero .hero-copy,
body.motion-paused .hero .hero-visual { animation: none; opacity: 1; transform: none; }
#universe {
  --universe-active-rgb: 222,222,218;
  --universe-tilt-x: 0deg;
  --universe-tilt-y: 0deg;
  --universe-pointer-x: 0px;
  --universe-pointer-y: 0px;
  --universe-intro: 1;
  --universe-order: 0;
  position: relative; width: 100%; min-height: 370px; aspect-ratio: 1.035;
  isolation: isolate; perspective: 1100px; -webkit-tap-highlight-color: transparent;
}
#universe *, #universe *::before, #universe *::after { box-sizing: border-box; }
#universe .universe-visual,
#universe .universe-planets {
  transform: translate3d(var(--universe-pointer-x), var(--universe-pointer-y), 0) rotateX(var(--universe-tilt-x)) rotateY(var(--universe-tilt-y));
  transform-origin: 50% 48%;
  transform-style: preserve-3d;
}
#universe .universe-visual {
  position: absolute; inset: 0; pointer-events: none;
}
#universe .universe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#universe .universe-nebula {
  position: absolute; inset: 5%; border-radius: 50%;
  background: radial-gradient(ellipse at 42% 38%, rgba(192,192,179,.09), rgba(93,93,88,.035) 44%, transparent 69%);
  transform: scale(calc(1 - var(--universe-order) * .05));
}
#universe .universe-light-plane {
  position: absolute; left: 15%; top: 60%; width: 70%; height: 13%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(168,168,158,.08), transparent 65%);
  filter: blur(11px); transform: rotate(-19deg);
}
#universe .universe-core-wrap {
  position: absolute; z-index: 2; left: 50%; top: 48%; width: 34%; min-width: 128px;
  max-width: 220px; aspect-ratio: 1; transform: translate(-50%, -50%);
}
#universe .universe-corona {
  position: absolute; inset: -22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--universe-active-rgb),.10), rgba(var(--universe-active-rgb),.025) 49%, transparent 70%);
  opacity: calc(.55 + var(--universe-intro) * .45);
  transform: scale(calc(.88 + var(--universe-intro) * .12));
  filter: blur(9px); transition: background 700ms ease;
}
#universe .universe-route-halo { position: absolute; inset: -29%; pointer-events: none; }
#universe .universe-route-halo span { position: absolute; inset: 0; border-radius: 50%; opacity: 0; filter: blur(12px); transition: opacity 650ms ease; }
#universe .universe-route-terra { background: radial-gradient(ellipse at 25% 27%, rgba(185,241,152,.14), transparent 54%); }
#universe .universe-route-realestate { background: radial-gradient(ellipse at 83% 55%, rgba(138,201,255,.14), transparent 54%); }
#universe .universe-route-financial { background: radial-gradient(ellipse at 31% 84%, rgba(215,182,255,.14), transparent 54%); }
#universe[data-route~="terra"] .universe-route-terra,
#universe[data-route~="realestate"] .universe-route-realestate,
#universe[data-route~="financial"] .universe-route-financial { opacity: 1; }
#universe .universe-core {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; border: 1px solid rgba(222,222,214,.24);
  background:
    radial-gradient(ellipse at 27% 15%, rgba(228,228,216,.22), rgba(159,159,149,.04) 43%, transparent 67%),
    radial-gradient(ellipse at 82% 89%, rgba(var(--universe-active-rgb),.095), transparent 56%),
    radial-gradient(circle at 39% 31%, #242423, #101010 49%, #060606 82%);
  box-shadow: inset 1px 2px 3px rgba(247,247,238,.25), inset -4px -7px 12px rgba(0,0,0,.92), inset 0 0 28px rgba(0,0,0,.22), 0 0 2px rgba(236,236,223,.17), 0 23px 45px rgba(0,0,0,.6);
  transition: box-shadow 700ms ease;
}
#universe .universe-core::before {
  content: ''; position: absolute; inset: 3px; border: 1px solid rgba(238,238,226,.025);
  border-top-color: rgba(238,238,226,.19); border-left-color: rgba(238,238,226,.1);
  border-radius: inherit; transform: rotate(-19deg);
}
#universe .universe-core::after {
  content: ''; position: absolute; width: 65%; height: 8%; top: -2%; left: 8%; border-radius: 50%;
  background: rgba(245,245,233,.52); filter: blur(8px); transform: rotate(-29deg);
}
#universe .universe-core-reflection {
  position: absolute; width: 78%; height: 47%; top: 1%; left: 0; border-radius: 50%;
  background: linear-gradient(151deg, rgba(246,246,236,.11), rgba(246,246,236,.015) 44%, transparent 60%);
  transform: translate3d(calc(var(--universe-pointer-x) * -1.5), calc(var(--universe-pointer-y) * -1.5), 0) rotate(-31deg);
}
#universe .universe-mark {
  position: relative; display: block; width: 59%; aspect-ratio: 150 / 96;
  background: linear-gradient(133deg, #fff 5%, #e9e9e4 30%, #b3b3ab 59%, #f8f8f2 80%, #b9b9b1);
  background-size: 145% 145%;
  background-position: calc(15% + var(--universe-intro) * 55%) 50%;
  -webkit-mask: url('assets/milyssus-symbol-original.png') center / contain no-repeat;
  mask: url('assets/milyssus-symbol-original.png') center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(255,255,245,.13)) drop-shadow(0 5px 3px rgba(0,0,0,.55));
  transform: translateY(-1%);
}
#universe .universe-core-glint {
  position: absolute; width: 2px; height: 2px; left: 18%; top: 13%; border-radius: 50%;
  background: #f4f4ec; box-shadow: 0 0 6px rgba(255,255,241,.5);
}
#universe .universe-horizon-note {
  position: absolute; z-index: 2; top: -3%; left: 50%; display: flex; align-items: center;
  justify-content: center; gap: 9px; width: max-content; max-width: calc(100% - 24px); margin: 0;
  transform: translateX(-50%); color: #858580; font-family: inherit; font-size: 9px;
  font-weight: 400; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
}
#universe .universe-horizon-mark {
  position: relative; width: 13px; height: 13px; flex: 0 0 auto;
  border: 1px solid rgba(195,195,183,.3); border-right-color: transparent;
  border-radius: 50%; transform: rotate(-30deg);
}
#universe .universe-horizon-mark::after { content: ''; position: absolute; width: 3px; height: 3px; top: -1px; right: 0; border-radius: 50%; background: #aaa99f; }
/* The orbit positions come from the same projection as the Canvas trajectories. */
#universe .universe-planets { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#universe .universe-planet {
  --planet-size: 64px; --planet-x: 50%; --planet-y: 50%; --planet-scale: 1;
  position: absolute; left: 0; top: 0; width: var(--planet-size); height: var(--planet-size);
  padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; color: var(--planet-color);
  display: block; text-decoration: none; font: inherit; cursor: pointer; pointer-events: auto; touch-action: manipulation;
  transform: translate3d(calc(var(--planet-x) - var(--planet-size) / 2), calc(var(--planet-y) - var(--planet-size) / 2), 0);
  -webkit-tap-highlight-color: transparent;
}
#universe .universe-planet-body {
  position: absolute; inset: 0; display: block; border-radius: 50%; isolation: isolate;
  transform: scale(var(--planet-scale));
  background: radial-gradient(circle at 29% 24%, rgba(var(--planet-rgb),.95), rgba(var(--planet-rgb),.55) 24%, rgba(var(--planet-rgb),.25) 48%, #060806 84%);
  box-shadow: inset 2px 2px 3px rgba(255,255,239,.35), inset -9px -8px 12px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--planet-rgb),.4), 0 0 24px rgba(var(--planet-rgb),.13), 0 12px 18px rgba(0,0,0,.4);
  transition: box-shadow 220ms ease;
}
#universe .universe-planet-atmosphere { position: absolute; inset: -9px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, transparent 52%, rgba(var(--planet-rgb),.17) 65%, transparent 74%); }
#universe .universe-planet-surface { position: absolute; inset: 1px; overflow: hidden; border-radius: 50%; opacity: .72; }
#universe .universe-planet-surface::before { content: ''; position: absolute; inset: -5%; border-radius: 50%; }
#universe .universe-planet-terra .universe-planet-surface::before {
  --surface-angle: -27deg;
  background: radial-gradient(ellipse at 30% 25%, rgba(220,255,170,.6) 0 12%, transparent 24%), radial-gradient(ellipse at 32% 64%, rgba(14,46,20,.65) 0 12%, transparent 28%), radial-gradient(ellipse at 60% 33%, rgba(21,58,28,.6) 0 13%, transparent 27%), radial-gradient(ellipse at 62% 76%, rgba(174,220,109,.28), transparent 26%);
  transform: rotate(-27deg);
}
#universe .universe-planet-realestate .universe-planet-surface::before {
  --surface-angle: -15deg;
  background: repeating-linear-gradient(163deg, transparent 0 8px, rgba(207,236,255,.18) 9px 11px, transparent 14px 20px), radial-gradient(ellipse at 24% 36%, rgba(220,243,255,.35), transparent 52%);
  transform: rotate(-15deg);
}
#universe .universe-planet-financial .universe-planet-surface::before {
  --surface-angle: 0deg;
  background: repeating-linear-gradient(24deg, transparent 0 7px, rgba(230,211,255,.18) 9px 13px, rgba(68,34,94,.19) 17px 20px), radial-gradient(ellipse at 27% 30%, rgba(250,221,255,.35), transparent 47%);
}
#universe .universe-planet-light { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 25% 20%, rgba(255,255,244,.25), transparent 37%), radial-gradient(circle at 16% 16%, transparent 27%, rgba(0,0,0,.10) 54%, rgba(0,0,0,.69) 88%); }
#universe .universe-planet-label {
  position: absolute; top: calc(100% + 12px); left: calc(50% + var(--planet-label-offset, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; white-space: nowrap; color: #ecece6;
  font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: -.015em;
  padding: 5px 7px; border: 1px solid rgba(255,255,255,.055); border-radius: 7px; background: rgba(6,6,6,.82);
  text-shadow: 0 1px 5px #000;
  transition: color 200ms ease, background 200ms ease;
}
#universe .universe-planet-label svg { width: 10px; height: 10px; color: var(--planet-color); opacity: .75; }
#universe .universe-planet[data-label-side="above"] .universe-planet-label { top: auto; bottom: calc(100% + 12px); }
#universe .universe-planet-surface::before { animation: universe-surface-drift 38s ease-in-out infinite alternate; }
#universe .universe-planet-realestate .universe-planet-surface::before { animation-duration: 46s; }
#universe .universe-planet-financial .universe-planet-surface::before { animation-duration: 42s; }
@keyframes universe-surface-drift {
  from { transform: rotate(calc(var(--surface-angle, 0deg) - 8deg)) translateX(-3%); }
  to { transform: rotate(calc(var(--surface-angle, 0deg) + 8deg)) translateX(3%); }
}
#universe .universe-planet:hover .universe-planet-body,
#universe .universe-planet:focus-visible .universe-planet-body,
#universe .universe-planet[data-selected="true"] .universe-planet-body {
  box-shadow: inset 2px 2px 3px rgba(255,255,239,.4), inset -9px -8px 12px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--planet-rgb),.75), 0 0 29px rgba(var(--planet-rgb),.25), 0 12px 18px rgba(0,0,0,.4);
}
#universe .universe-planet:hover .universe-planet-label,
#universe .universe-planet:focus-visible .universe-planet-label,
#universe .universe-planet[data-selected="true"] .universe-planet-label { color: var(--planet-color); background: rgba(6,6,6,.92); }
#universe .universe-planet:focus-visible { outline: 2px solid var(--planet-color); outline-offset: 7px; }
#universe .universe-planet[data-route-active="true"] .universe-planet-atmosphere { background: radial-gradient(circle, transparent 48%, rgba(var(--planet-rgb),.22) 65%, transparent 75%); }
#universe.universe-is-paused .universe-visual,
#universe.universe-is-paused .universe-planets,
body.motion-paused #universe .universe-visual,
body.motion-paused #universe .universe-planets { transform: none; transition: none; }
#universe.universe-is-paused .universe-planet-surface::before,
body.motion-paused #universe .universe-planet-surface::before { animation-play-state: paused; }
@media (max-width: 820px) {
  .hero .hero-visual { margin-top: 36px; }
}
@media (max-width: 600px) {
  #universe { min-height: 330px; aspect-ratio: .95; }
  #universe .universe-core-wrap { width: 32%; min-width: 116px; }
  #universe .universe-planet { --planet-size: 46px; }
  #universe .universe-planet-label { top: calc(100% + 10px); font-size: 11px; gap: 4px; padding: 3px 4px; }
  #universe .universe-planet[data-label-side="above"] .universe-planet-label { top: auto; bottom: calc(100% + 10px); }
  #universe .universe-planet-label svg { width: 8px; height: 8px; }
  #universe .universe-horizon-note { gap: 7px; font-size: 8px; letter-spacing: .13em; }
  #universe .universe-core { box-shadow: inset 1px 2px 3px rgba(247,247,238,.23), inset -3px -5px 9px rgba(0,0,0,.9), 0 15px 28px rgba(0,0,0,.48); }
}
@media (prefers-reduced-motion: reduce) {
  #universe *, #universe *::before, #universe *::after { animation: none !important; transition: none !important; }
  #universe .universe-visual, #universe .universe-planets { transform: none; }
}