/* world-anim.css — self-contained, namespaced styles for the homepage
   "Build a world for your ___" animation. Palette tokens fall back to the
   Orbismo brand values, so this renders correctly even off-site. */
.world-anim {
  --wa-accent:  var(--primary-container, #009d9e);
  --wa-accent2: var(--sphere-teal-hi, #69d9d9);
  --wa-gold:    var(--accent-gold, #d9bb69);
  --wa-phone-bg: #fcfcff;
  --wa-phone-surface: #edf1f5;
  --wa-phone-line: #c2c7cf;
  --wa-phone-text: #171c1f;
  --wa-phone-dim: #72777f;
  --wa-phone-user: #376288;
  --wa-phone-user-text: #ffffff;
  --wa-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(360px, 44vh, 480px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--wa-font);
}
.world-anim::before,
.world-anim::after {
  content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
}
.world-anim::before {
  background:
    radial-gradient(46% 60% at 24% 30%, color-mix(in srgb, var(--wa-accent2) 26%, transparent), transparent 70%),
    radial-gradient(54% 68% at 82% 80%, color-mix(in srgb, var(--wa-accent) 25%, transparent), transparent 72%);
  animation: wa-drift1 21s ease-in-out infinite alternate;
}
.world-anim::after {
  background:
    radial-gradient(42% 56% at 74% 16%, color-mix(in srgb, var(--wa-gold) 16%, transparent), transparent 70%),
    radial-gradient(46% 60% at 16% 84%, color-mix(in srgb, var(--wa-accent2) 16%, transparent), transparent 72%);
  animation: wa-drift2 27s ease-in-out infinite alternate;
}
@keyframes wa-drift1 { from{transform:translate3d(-3%,-2%,0) scale(1)} to{transform:translate3d(4%,3%,0) scale(1.14)} }
@keyframes wa-drift2 { from{transform:translate3d(3%,3%,0) scale(1.12)} to{transform:translate3d(-4%,-2%,0) scale(1)} }

.wa-inner {
  width: 100%; max-width: 64rem;
  padding: 0 var(--space-6, 2rem);
  display: flex; align-items: center;
}
.wa-copy { position: relative; z-index: 2; max-width: 24rem; text-align: center; }
.wa-headline {
  margin: 0; font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.02em; color: var(--wa-accent2);
  text-shadow: 0 1px 2px rgba(13,28,39,.6), 0 0 24px rgba(13,28,39,.85);
  will-change: opacity, transform;
}

.wa-phone {
  position: absolute; bottom: 1.5rem; z-index: 1;
  right: max(var(--space-6, 2rem), calc(50% - 32rem + var(--space-6, 2rem)));
  width: min(30rem, 46vw); height: 46rem;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--wa-phone-bg); border: 1px solid var(--wa-phone-line);
  border-radius: 2.25rem;
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.45), 0 0 0 .4rem #05101a, 0 0 0 .47rem #243441;
}
.wa-phone__bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: .6rem;
  padding: 1rem 1.1rem .8rem; border-bottom: 1px solid var(--wa-phone-line);
}
.wa-phone__avatar { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.wa-phone__name { font-weight: 600; font-size: .9rem; color: var(--wa-phone-text); }
.wa-phone__status { font-size: .7rem; color: var(--wa-phone-dim); display: flex; align-items: center; gap: .3rem; }
.wa-phone__status::before { content:""; width:.4rem; height:.4rem; border-radius:50%; background:#2ea043; box-shadow:0 0 .4rem #2ea043; }

.wa-thread {
  flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 1.1rem 1.1rem .6rem;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .7rem;
}
.wa-msg { display: flex; gap: .5rem; max-width: 88%; animation: wa-in .38s cubic-bezier(.2,.7,.3,1) both; }
@keyframes wa-in { from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none} }
.wa-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.wa-msg--ai { align-self: flex-start; }
.wa-msg__avatar { width: 1.5rem; height: 1.5rem; object-fit: contain; align-self: flex-end; }
.wa-bubble {
  font-size: 1rem; line-height: 1.4; padding: .6rem .8rem; border-radius: 1.1rem;
  white-space: pre-wrap; word-wrap: break-word; text-align: left;
}
.wa-msg--user .wa-bubble { background: var(--wa-phone-user); color: var(--wa-phone-user-text); border-bottom-right-radius: .25rem; }
.wa-msg--ai .wa-bubble { background: var(--wa-phone-surface); border: 1px solid var(--wa-phone-line); color: var(--wa-phone-text); border-bottom-left-radius: .25rem; }
.wa-bubble.is-writing::after {
  content:""; display:inline-block; width:2px; height:1.05em; margin-left:1px; vertical-align:-.18em;
  background: var(--wa-phone-user); animation: wa-caret .7s steps(1) infinite;
}
@keyframes wa-caret { 50%{opacity:0} }
.wa-dots { display:flex; gap:.3rem; padding:.3rem .1rem; }
.wa-dots span { width:.45rem; height:.45rem; border-radius:50%; background:var(--wa-phone-dim); animation: wa-dot 1.1s ease-in-out infinite; }
.wa-dots span:nth-child(2){ animation-delay:.15s }
.wa-dots span:nth-child(3){ animation-delay:.3s }
@keyframes wa-dot { 0%,60%,100%{transform:translateY(0); opacity:.45} 30%{transform:translateY(-3px); opacity:1} }

.wa-composer {
  flex: 0 0 auto; display: flex; align-items: center; gap: .3rem;
  margin: .5rem .9rem 1rem; padding: .6rem .8rem;
  border: 1px solid var(--wa-phone-line); border-radius: 999px;
  background: var(--wa-phone-surface); font-size: .95rem;
}
.wa-composer__text { white-space: pre-wrap; color: var(--wa-phone-text); min-width: 0; text-align: left; }
.wa-composer__text.is-placeholder { color: var(--wa-phone-dim); }
.wa-composer.is-typing .wa-composer__text::after {
  content:""; display:inline-block; width:2px; height:.95em; margin-left:2px; vertical-align:-.12em;
  background: var(--wa-phone-user); animation: wa-caret .9s steps(1) infinite;
}
.wa-composer__send {
  flex: 0 0 auto; margin-left: auto; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--wa-phone-user); color: #fff; display: grid; place-items: center; font-size: .9rem;
}

@media (max-width: 48rem) {
  .world-anim { height: auto; }
  .wa-inner { flex-direction: column; align-items: center; gap: var(--space-4, 1rem); padding-top: var(--space-6, 2rem); }
  .wa-copy { max-width: none; text-align: center; }
  .wa-phone { position: static; right: auto; width: 100%; max-width: 20rem; height: 30rem; border-radius: 2rem 2rem 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .world-anim::before, .world-anim::after,
  .wa-msg, .wa-dots span,
  .wa-bubble.is-writing::after,
  .wa-composer.is-typing .wa-composer__text::after { animation: none !important; }
}