/* world.css
   A small static page: a drifting background, a glass card, a decorative
   animated mark, and one link. Colors, spacing, fonts and similar values are
   CSS custom properties, set once from tokens.json by world.js. Only the
   selectors this page's markup actually uses are defined below. */

* , *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--color-bgBase);
  color: var(--color-textPrimary);
  font-family: var(--font-family);
  font-size: var(--font-sizeMd);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: var(--layout-scrollbarWidth); height: var(--layout-scrollbarWidth); }
::-webkit-scrollbar-thumb { background: var(--color-scrollThumb); border-radius: var(--radius-pill); }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Stage: the drifting background and the vignette over it.
   ========================================================================== */

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overflow: clip;
}

.kb-bg {
  position: absolute;
  inset: -6%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: var(--kb-image, radial-gradient(120% 120% at 20% 15%, rgba(139,92,246,0.35), transparent 55%),
                                     radial-gradient(120% 120% at 85% 80%, rgba(59,130,246,0.28), transparent 55%),
                                     linear-gradient(160deg, var(--color-bgBaseAlt), var(--color-bgBase)));
  filter: var(--filter-background);
  opacity: 0;
  transition: opacity var(--timing-arrivalFade) var(--timing-easeSmooth);
  animation: kenBurns var(--timing-kenBurnsCycle) ease-in-out infinite alternate;
  will-change: transform;
}

.kb-bg.is-active { opacity: 1; }

#stage.is-arriving .kb-bg {
  animation: loginKenBurns var(--timing-arrivalKenBurns) ease-in-out infinite;
}

#bg-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, var(--color-vignetteInner) 0%, var(--color-vignetteOuter) 100%);
}

@keyframes kenBurns {
  0%   { transform: scale(1)    translate(0, 0); }
  50%  { transform: scale(1.07) translate(-1.5%, -1%); }
  100% { transform: scale(1.14) translate(-2.5%, 1.5%); }
}

@keyframes loginKenBurns {
  0%   { transform: scale(1)    translate(0, 0); }
  25%  { transform: scale(1.08) translate(-1%, -1%); }
  50%  { transform: scale(1.12) translate(1%, 0); }
  75%  { transform: scale(1.08) translate(-0.5%, 1%); }
  100% { transform: scale(1)    translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .kb-bg, #stage.is-arriving .kb-bg { animation: none; }
  .particle { animation: none; }
}

/* ==========================================================================
   The presence mark: a decorative animation drawn on a canvas by world.js.
   Square, not a circle or a dot; the glow under it follows one fixed color.
   ========================================================================== */

.presence-host {
  position: relative;
  width: var(--layout-arrivalMarkSize);
  height: var(--layout-arrivalMarkSize);
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  min-width: 0;
  min-height: 0;
  flex: none;
}

.presence-host canvas { display: block; width: 100%; height: 100%; }

.presence-host::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(closest-side, var(--color-presenceNow, var(--color-accent)), transparent 72%);
  opacity: 0.38;
  filter: blur(var(--blur-soft));
  pointer-events: none;
}

/* ==========================================================================
   The card.
   ========================================================================== */

#arrival {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

#arrival-particles { position: absolute; inset: 0; pointer-events: none; }

.particle {
  position: absolute;
  border-radius: var(--radius-pill);
  background: var(--color-particle);
  box-shadow: var(--shadow-particle);
  filter: blur(var(--blur-particle));
  animation-name: floatParticle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes floatParticle {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
  25% { transform: translateY(-20px) translateX(10px); opacity: 0.7; }
  50% { transform: translateY(-10px) translateX(-5px); opacity: 0.5; }
  75% { transform: translateY(-25px) translateX(5px); opacity: 0.6; }
}

#arrival-card {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Never wider than the screen minus a 16px gutter on each side. No
     min-width is set here or inherited, so the card only ever shrinks to
     fit. */
  max-width: min(var(--layout-arrivalCardWidth), calc(100vw - 32px));
  padding: var(--spacing-arrivalCard);
  border-radius: var(--radius-xl);
  text-align: center;
  background: linear-gradient(135deg, var(--color-arrivalCardFrom) 0%, var(--color-arrivalCardTo) 100%);
  backdrop-filter: blur(var(--blur-arrival));
  -webkit-backdrop-filter: blur(var(--blur-arrival));
  border: 1px solid var(--color-arrivalCardBorder);
  box-shadow: var(--shadow-arrivalCard);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  animation: arrivalRise var(--timing-arrivalRise) var(--timing-easeArrival) both;
  max-height: calc(100vh - 2 * var(--spacing-xl));
  overflow-y: auto;
}

#arrival-mark, #arrival-name, #arrival-rule, #wake-btn { flex: none; }

@keyframes arrivalRise {
  from { opacity: 0; transform: translateY(40px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#arrival-card-glow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, var(--color-arrivalCardGlow) 0%, transparent 60%);
}

#arrival-mark { margin-bottom: var(--spacing-xs); }

#arrival-name {
  margin: 0;
  font-size: var(--font-sizeName);
  font-weight: var(--font-weightHeavy);
  letter-spacing: var(--font-trackName);
  color: var(--color-textPrimary);
  text-shadow: var(--shadow-arrivalName);
  overflow-wrap: anywhere;
}

#arrival-rule {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-arrivalRule), transparent);
}

#wake-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  border: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-size: var(--font-sizeMd);
  font-weight: var(--font-weightStrong);
  color: var(--color-textPrimary);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accentAlt));
  box-shadow: var(--shadow-wake);
  transition: transform var(--timing-transitionFast) var(--timing-easeSmooth);
}
#wake-btn:hover { transform: scale(1.02); }
#wake-btn:active { transform: scale(0.98); }