* {
  box-sizing: border-box;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

.space {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}

:root {
  --text: #111733;
  --bg1: #fff3ad;
  --bg2: #bfe9ff;
  --bg3: #e7d2ff;
  --ease: cubic-bezier(.08,.76,.08,1);
}

* { box-sizing: border-box; }

.planet-title,
.download-label,
.upload-label {
  display: flex;
  justify-content: center;  
  color: white;
  text-shadow:
    0 0 4px rgba(0,0,0,.8),
    0 0 12px rgba(0,0,0,.7),
    2px 2px 6px rgba(0,0,0,.8);
}


.bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--scale));
  opacity: var(--opacity);
  transition:
    left var(--time) var(--ease),
    top var(--time) var(--ease),
    width var(--time) var(--ease),
    height var(--time) var(--ease),
    transform var(--time) var(--ease),
    opacity 1300ms ease,
    filter 900ms ease;
  user-select: none;
}

.home {
  --x: 50%;
  --y: 50%;
  --size: 100vh;
  --scale: .02;
  --opacity: 0;
  --time: 5400ms;
  z-index: 5;
  filter: drop-shadow(44px 56px 52px rgba(0,0,0,.23));
}

svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.form-input {
  fill: rgba(255,255,255,.92);
  stroke: rgba(17,23,51,.25);
  stroke-width: 3;
}

.ok-button {
  fill: #0f1a49;
}

.app-bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--scale));
  opacity: var(--opacity);
  display: grid;
  place-items: center;
  text-align: center;
  color: #111733;
  font-weight: 950;
  font-size: calc(var(--size) * .105);
  letter-spacing: .02em;
  transition:
    left 5200ms var(--ease),
    top 5200ms var(--ease),
    width 5200ms var(--ease),
    height 5200ms var(--ease),
    transform 5200ms var(--ease),
    opacity 1500ms ease;
  filter: drop-shadow(22px 30px 26px rgba(0,0,0,.18));
  z-index: 14;
  animation: floatPlanet var(--float-time) ease-in-out infinite alternate;
  cursor: pointer;
  padding: calc(var(--size) * .12);
  overflow: hidden;
}

.app-bubble.focus {
  --x: 50% !important;
  --y: 51% !important;
  --size: min(38vw, 58vh) !important;
  --scale: 1 !important;

  z-index: 40;
}

.app-bubble.dim {
  --scale: .72 !important;
 
  z-index: 12;
}

  .planet-content {
      width: 100%;
      max-width: 86%;
      display: grid;
      gap: .45em;
      place-items: center;
      font-size: calc(var(--size) * .09);
      line-height: 1.05;
    }

.planet-title {
  width: 100%;
  text-align: left;

  font-size: 1em;
  font-weight: 950;
  letter-spacing: .03em;
}

.planet-list {
  display: grid;
  gap: .35em;
  font-size: 0.45em;
  font-weight: 850;
  line-height: 1.12;
}

.planet-list div {
  padding: .35em .8em;
  border-radius: 999px;
  background: rgba(255,255,255,.34);
  box-shadow: inset 0 1px 4px rgba(255,255,255,.45);
  white-space: nowrap;
}

@keyframes floatPlanet {
  from { margin-left: calc(var(--float-x) * -1); margin-top: calc(var(--float-y) * .5); }
  to   { margin-left: var(--float-x); margin-top: var(--float-y); }
}

/* ==========================================================
   BOLLEN-BEWEGING / STATUSSEN
   0 = stil/normaal
   1 = klein, rustig doorzwevend met wrap-around
   2 = middelklein, iets sneller doorzwevend met wrap-around
   3 = max/eindbol, stil
   
   De echte beweging gebeurt in app.js.
   Geen heen-en-terug CSS-animatie meer.
   ========================================================== */
.app-bubble {
  animation: none !important;
}

.app-bubble.wrap-motion {
  /* Tijdens vrije zweefbeweging mogen left/top direct volgen.
     De inkomende animatie gebeurt eerst; daarna schakelt JS deze klasse aan. */
  transition:
    width 5200ms var(--ease),
    height 5200ms var(--ease),
    transform 1200ms ease,
    opacity 1500ms ease;
}

.app-bubble[data-motion-status="0"],
.app-bubble[data-motion-status="3"],
.app-bubble.focus,
.app-bubble.app-detail {
  animation: none !important;
}

body.product-modal-open .app-bubble:not(.app-detail) {
  animation-play-state: paused !important;
}

.welcome-user {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(38px, 2vw, 4rem);
  font-weight: 800;
  color: yellow;
  text-shadow:
    0 0 8px rgba(0,0,0,.9),
    0 0 18px rgba(0,0,0,.7);
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}

.welcome-user.show {
  opacity: 1;
}