/* About Blockped: an open, golden universe. */
.universe { padding: 3rem var(--pad) 5rem; overflow: hidden; scroll-margin-top: 5rem; background: linear-gradient(180deg, transparent, #090907 17%, #090907 88%, transparent); }
.universe .intro__inner { max-width: 1320px; }
.universe__heading { text-align: center; position: relative; z-index: 2; max-width: 760px; margin: auto; }
.universe .intro__label { color: var(--gold); margin-bottom: 1rem; font-size: .65rem; letter-spacing: .28em; }
.universe__title { font: 500 clamp(2.4rem, 4.6vw, 4.3rem)/1.08 var(--font-display); letter-spacing: -.055em; margin-bottom: 1.25rem; }
.universe__title em { font-style: normal; color: var(--gold); }
.universe .intro__text { font: 400 clamp(.88rem, 1.2vw, 1rem)/1.85 var(--font-body); color: #bcb5a5; max-width: 650px; margin: auto; letter-spacing: 0; }
.universe .intro__text .w { opacity: 1; }
.universe__stage { position: relative; height: clamp(420px, 43vw, 590px); margin: -1rem auto 0; isolation: isolate; }
.universe__stage::before { content: ''; position: absolute; inset: 9% 8%; background: radial-gradient(ellipse at 42% 44%, #b9751620, transparent 58%); pointer-events: none; }
.universe__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .7s; pointer-events: none; }
.universe__stage.is-ready .universe__canvas { opacity: 1; }
.universe__fallback { position: absolute; inset: 0; transition: opacity .5s; pointer-events: none; }
.universe__stage.is-ready .universe__fallback-planet { visibility: hidden; }
.universe__stage.is-ready.is-model-ready .universe__fallback { opacity: 0; visibility: hidden; }
.universe__fallback-planet { width: 42%; aspect-ratio: 1; border-radius: 50%; position: absolute; top: 13%; left: 15%; background: radial-gradient(circle at 29% 20%, #f5d581, #b88735 24%, #4b361b 56%, #13120d 75%); box-shadow: inset 2px 3px 3px #ffe1a0, inset -20px -15px 60px #000, 0 0 65px #e8b04b19; }
.universe__fallback-planet::after { content: ''; position: absolute; inset: -12%; border: 1px solid #ffd98a75; border-radius: 50%; transform: rotate(-25deg) scaleY(.48); }
.universe__fallback img { position: absolute; width: 29%; height: auto; object-fit: contain; right: 8%; bottom: 18%; filter: brightness(.76) saturate(.72); transform: scale(.9); transform-origin: center bottom; }
.universe__coordinates { position: absolute; top: 17%; left: 1%; color: #82755b; font: 500 .59rem/1.8 var(--font-display); letter-spacing: .17em; text-transform: uppercase; }
.universe__coordinates span { display: block; color: var(--gold); }
.universe__guide { position: absolute; right: 9%; bottom: 7%; display: flex; align-items: center; gap: .7rem; font-size: .67rem; color: #b2a891; }
.universe__guide i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px #e8b04b; }
.universe__destination { position: absolute; z-index: 2; display: flex; align-items: center; gap: .7rem; border: 1px solid #e8b04b36; border-radius: 100px; padding: .7rem 1rem; background: #15130cec; color: #d6c8aa; font-size: .72rem; transition: color .2s, border-color .2s, box-shadow .2s; }
.universe__destination span { color: var(--gold); font-size: .6rem; }
.universe__destination b { font-size: .9rem; font-weight: 400; color: var(--gold); margin-left: .7rem; }
.universe__destination:hover, .universe__destination:focus-visible { color: #fff0cf; border-color: var(--gold); box-shadow: 0 0 25px #e8b04b20; outline: none; }
.universe__destination--learn { left: 12%; bottom: 17%; }
.universe__destination--explore { left: 50%; top: 15%; }
.universe__controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: -1rem; position: relative; z-index: 2; }
.universe__controls p { font-size: .65rem; letter-spacing: .10em; color: #948a75; }
.universe__pause { border: 1px solid #e8b04b40; border-radius: 30px; padding: .48rem .85rem; font-size: .65rem; color: #dac79e; transition: background .2s, border-color .2s; }
.universe__pause:hover, .universe__pause:focus-visible { background: #e8b04b16; border-color: var(--gold); outline: none; }
.universe .intro__stats { margin-top: 2.8rem; padding-top: 2rem; gap: 1.5rem; grid-template-columns: repeat(4,1fr); }
.universe .stat { display: block; text-align: center; }
.universe .stat__num, .universe .stat__plus { display: inline; font-size: clamp(1.6rem,3vw,2.5rem); }
.universe .stat__label { display: block; font-size: .59rem; letter-spacing: .18em; }
.journey-meteor { position: fixed; z-index: 3; left: 50%; top: 0; height: 185px; width: 2px; background: linear-gradient(transparent, #e8b04b80 65%, #fff3bd); opacity: 0; pointer-events: none; transform-origin: bottom; }
.journey-meteor::after { content: ''; position: absolute; bottom: -3px; left: -3px; width: 8px; height: 8px; background: #fff4cd; border-radius: 50%; box-shadow: 0 0 12px 3px #ffe2a4, 0 0 35px 8px #e8b04b70; }
@media (max-width: 700px) {
  .universe { padding-top: 2rem; padding-bottom: 3rem; }
  .universe__title { font-size: clamp(2.25rem,8vw,3.5rem); }
  .universe__stage { height: 440px; margin: 0 -1.25rem; }
  .universe__coordinates { top: 3%; left: 6%; font-size: .5rem; }
  .universe__guide { right: 7%; bottom: 5%; font-size: .58rem; }
  .universe__destination { font-size: .65rem; padding: .55rem .7rem; gap: .4rem; }
  .universe__destination--learn { left: 5%; bottom: 17%; }
  .universe__destination--explore { top: 9%; left: auto; right: 5%; }
  .universe__controls { flex-direction: column; gap: .7rem; margin-top: .2rem; }
  .universe .intro__stats { grid-template-columns: repeat(2,1fr); gap: 1.8rem 1rem; }
  .universe__fallback-planet { top: 18%; left: 10%; width: 66%; }
  .universe__fallback img { width: 38%; right: 3%; bottom: 13%; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-meteor { display: none; }
  .universe__canvas, .universe__fallback { transition: none; }
}

/* Direct controls stay on the planet and character as the scene moves. */
.universe__planet-control, .universe__avatar-control { position: absolute; z-index: 1; padding: 0; transform: translate(-50%, -50%); background: transparent; border: 0; -webkit-tap-highlight-color: transparent; }
.universe__planet-control { border-radius: 50%; cursor: grab; touch-action: pan-y; }
.universe__avatar-control { cursor: grab; border-radius: 36%; touch-action: pan-y; }
.is-avatar-dragging .universe__avatar-control { cursor: grabbing; }
.is-dragging .universe__planet-control { cursor: grabbing; }
.universe__planet-control:focus-visible, .universe__avatar-control:focus-visible { outline: 1px solid #ffdc8d; outline-offset: 8px; box-shadow: 0 0 38px #e8b04b30; }
.universe__planet-control span, .universe__avatar-control span { position: absolute; left: 50%; transform: translate(-50%, 5px); opacity: 0; transition: opacity .25s, transform .25s; white-space: nowrap; padding: .6rem .9rem; border: 1px solid #d7a75270; border-radius: 30px; color: #f9e4b7; background: #18130dec; font-size: .65rem; pointer-events: none; }
.universe__planet-control span { bottom: 8%; }
.universe__avatar-control span { top: -2%; max-width: 230px; white-space: normal; width: max-content; }
.is-planet-hover .universe__planet-control span, .is-avatar-hover .universe__avatar-control span { opacity: 1; transform: translate(-50%, 0); }
.universe__controls { flex-wrap: wrap; gap: .75rem 1rem; }
.universe__controls > p:first-child { flex-basis: 100%; text-align: center; margin-bottom: .3rem; }
.universe__instructions { color: #d0bea0 !important; letter-spacing: .015em !important; }
.universe__reset { border: 1px solid #e8b04b40; border-radius: 30px; padding: .48rem .85rem; font-size: .65rem; color: #dac79e; transition: background .2s, border-color .2s; }
.universe__reset:hover, .universe__reset:focus-visible { background: #e8b04b16; border-color: var(--gold); outline: none; }
.universe__destination { z-index: 3; }
@media (max-width: 700px) {
  .universe__controls { flex-direction: row; }
  .universe__instructions { flex-basis: 100%; text-align: center; font-size: .57rem !important; }
  .universe__avatar-control span { font-size: .58rem; padding: .4rem .7rem; max-width: 150px; }
}