/* Sym homepage: one scene in the dark. The only words on screen are the faces' speech bubbles. */
@font-face { font-family: 'Geist WF'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/geist-latin-wght-normal.woff2') format('woff2'); }

:root {
  --wf-bg: #000;
  --surface: #000; /* used by the SDK face's done check ring */
  --face: clamp(78px, 9.5vw, 136px);
  color-scheme: dark;
}
@media (max-width: 640px) { :root { --face: clamp(64px, 21vw, 92px); } }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body.wf { margin: 0; height: 100%; background: var(--wf-bg); overflow: hidden; overscroll-behavior: none; }
body.wf { color: #111318; font-family: 'Geist WF', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }

.wf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; }

.wf-stage { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }
.wf-stage::after { /* film grain, very faint */
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* The light that follows Sym, so a black face can come out of a black room. */
.wf-light { position: absolute; left: 0; top: 0; width: 1px; height: 1px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 2.4s ease, transform 1.6s cubic-bezier(.65, 0, .25, 1); }
.wf-light::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--face) * 5.4); height: calc(var(--face) * 5.4); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 165, 255, 0.34), rgba(110, 125, 230, 0.12) 55%, transparent);
  animation: wf-breathe 7s ease-in-out infinite; }
.wf-light.on { opacity: 1; }
.wf-light.wide::before { width: 150vmax; height: 150vmax; background: radial-gradient(closest-side, rgba(120, 135, 255, 0.16), rgba(80, 90, 200, 0.05) 50%, transparent); transition: width 2s, height 2s; }
@keyframes wf-breathe { 50% { transform: translate(-50%, -50%) scale(1.07); } }

.wf-cast { position: absolute; inset: 0; z-index: 1; }

/* An actor: the face, its orbit of apps and its speech bubble, all centred on one point. */
.wf-actor { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: transform 1.5s cubic-bezier(.22, .9, .25, 1), opacity 1.2s ease; will-change: transform; }
.wf-actor.snap { transition: none; }
.wf-actor .face { position: absolute; left: calc(var(--face) * var(--k, 1) / -2); top: calc(var(--face) * var(--k, 1) / -2); width: calc(var(--face) * var(--k, 1)); height: calc(var(--face) * var(--k, 1)); z-index: 2; transition: filter 1.8s ease, opacity 1.8s ease; }
.wf-actor .face svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wf-actor.sym .face { --k: 1.25; filter: drop-shadow(0 0 28px rgba(150, 165, 255, 0.4)); }
.wf-actor.dark .face { opacity: 0; filter: blur(14px); }

/* Speech */
.wf-say { position: absolute; left: 0; bottom: calc(var(--face) * var(--k, 1) / 2 + 14px); z-index: 4; transform: translate(-50%, 8px) scale(0.92); transform-origin: 50% 100%; opacity: 0;
  width: max-content; max-width: min(240px, 42vw); padding: 10px 14px; border-radius: 14px; background: #fff; color: #111318; border-bottom: 2px solid #c3c6ce;
  font-size: clamp(14px, 1.25vw, 17px); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; text-align: center; white-space: pre-line;
  transition: opacity 0.28s ease, transform 0.42s cubic-bezier(.3, 1.5, .5, 1); pointer-events: none; }
.wf-actor.sym .wf-say { --k: 1.25; }
.wf-say::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 11px; height: 11px; transform: translateX(-50%) rotate(45deg); background: #fff; border-right: 2px solid #c3c6ce; border-bottom: 2px solid #c3c6ce; border-radius: 0 0 3px 0; }
.wf-say.in { opacity: 1; transform: translate(-50%, 0) scale(1); }
.wf-say.dots { padding: 13px 16px; }
.wf-say .ell { display: inline-flex; gap: 5px; }
.wf-say .ell i { width: 7px; height: 7px; border-radius: 50%; background: #5a5f6d; animation: wf-ell 1.2s ease-in-out infinite; }
.wf-say .ell i:nth-child(2) { animation-delay: 0.16s; }
.wf-say .ell i:nth-child(3) { animation-delay: 0.32s; }
@keyframes wf-ell { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 640px) {
  .wf-say { font-size: 13.5px; padding: 8px 11px; max-width: 46vw; }
  .wf-actor.team .wf-say { max-width: 30vw; }
}

/* The magic: app tiles orbiting a teammate. Positions are set per frame. */
.wf-orbit { position: absolute; left: 0; top: 0; z-index: 1; }
.wf-orbit .app { position: absolute; left: 0; top: 0; width: var(--tile); height: var(--tile); margin: calc(var(--tile) / -2) 0 0 calc(var(--tile) / -2); border-radius: 26%; background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 18px rgba(160, 175, 255, 0.25); display: grid; place-items: center; will-change: transform, opacity; opacity: 0; }
.wf-orbit .app img { width: 64%; height: 64%; object-fit: contain; display: block; }
.wf-actor { --tile: calc(var(--face) * 0.34); }

/* The merge: a gooey filter melts the faces into one while they converge. */
.wf-cast.goo { filter: url(#wf-goo); }
.wf-actor.merge { transition: transform 1.4s cubic-bezier(.6, 0, .3, 1), opacity 0.5s ease; }
.wf-actor.merge .face { transform: scale(0.45); transition: transform 1.4s cubic-bezier(.6, 0, .3, 1); }
.wf-actor.gone { opacity: 0; }
.wf-actor.sym.solo .face { --k: 1.75; transition: left 0.6s cubic-bezier(.3, 1.6, .5, 1), top 0.6s cubic-bezier(.3, 1.6, .5, 1), width 0.6s cubic-bezier(.3, 1.6, .5, 1), height 0.6s cubic-bezier(.3, 1.6, .5, 1); }
.wf-actor.sym.solo .wf-say { --k: 1.75; }
.wf-flash { position: absolute; left: 0; top: 0; z-index: 1; width: calc(var(--face) * 1.6); height: calc(var(--face) * 1.6); border-radius: 50%; border: 2px solid rgba(220, 226, 255, 0.9); box-shadow: 0 0 40px rgba(154, 168, 255, 0.8), inset 0 0 30px rgba(154, 168, 255, 0.5); pointer-events: none; }

/* The beta signup, inside Sym's bubble. */
.wf-say.form { pointer-events: auto; max-width: min(360px, calc(100vw - 32px)); width: min(360px, calc(100vw - 32px)); padding: 14px; text-align: left; }
.wf-say.form p { margin: 0 2px 10px; }
.wf-say.form form { display: grid; gap: 7px; }
/* Form fields stay at 16px or larger at every width: iOS Safari zooms the page when a smaller field is focused. */
.wf-say.form .wf-field, .wf-say.form textarea, .wf-say.form select { font-size: max(16px, 1em) !important; }
.wf-say.form .wf-field { width: 100%; box-sizing: border-box; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #d3d5dc; border-radius: 10px; background: #f5f6f8; color: #111318; font: inherit; font-size: 16px; outline: none; }
.wf-say.form .wf-field:focus { border-color: #6f7fff; background: #fff; box-shadow: 0 0 0 3px rgba(111, 127, 255, 0.2); }
.wf-say.form altcha-widget { display: block; color-scheme: light; color: #111318; font-size: 14px;
  --altcha-max-width: 100%; --altcha-border-radius: 10px; --altcha-border-color: #d3d5dc; --altcha-border-width: 1px;
  --altcha-color-base: #f5f6f8; --altcha-color-base-content: #111318; --altcha-color-neutral: #d3d5dc; --altcha-color-neutral-content: #111318;
  --altcha-color-primary: #16181d; --altcha-color-primary-content: #fff; --altcha-checkbox-border-color: #9ea2ad; --altcha-shadow: none; }
.wf-say.form button { height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: #16181d; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.wf-say.form button:hover { background: #2a2e38; }
.wf-say.form button:disabled { opacity: 0.5; cursor: default; }
.wf-say.form button:focus-visible { outline: 2px solid #6f7fff; outline-offset: 2px; }
.wf-say.form .wf-step1, .wf-say.form .wf-step2 { display: grid; gap: 7px; }
.wf-say.form .wf-next { display: none; }
@media (max-width: 640px) {
  .wf-say.form form:not(.step2) .wf-step2, .wf-say.form form.step2 .wf-step1 { display: none; }
  .wf-say.form form:not(.step2) .wf-next { display: block; }
  /* Keyboard up: lift the bubble out of Sym and pin it to the top of the visible area, so the fields never slide off screen. */
  .wf.typing .wf-actor.sym { transform: none !important; transition: none; will-change: auto; }
  .wf.typing .wf-actor.sym .face { opacity: 0; }
  .wf.typing .wf-actor:not(.sym) { opacity: 0.2; }
  .wf.typing .wf-say.form { position: fixed; top: calc(var(--vv-top, 0px) + 12px); left: 12px; right: 12px; bottom: auto; width: auto; max-width: none; transform: none; transition: none; }
  .wf.typing .wf-say.form::after { display: none; }
}
.wf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.wf-spark { position: absolute; z-index: 3; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px #9aa8ff; pointer-events: none; }

.wf-sound { position: absolute; right: 18px; top: 18px; z-index: 6; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.72); display: grid; place-items: center; cursor: pointer; transition: background 0.2s, color 0.2s, opacity 0.2s; }
.wf-sound:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.wf-sound:focus-visible { outline: 2px solid #9aa8ff; outline-offset: 3px; }
.wf-sound .on { display: none; }
.wf-sound[aria-pressed="true"] .on { display: inline; }
.wf-sound[aria-pressed="true"] .off { display: none; }
.wf-sound[aria-pressed="false"]::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(154, 168, 255, 0.6); animation: wf-ping 2.6s ease-out infinite; pointer-events: none; }
.wf-sound.busy { opacity: 0.5; }
@keyframes wf-ping { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wf-light::before, .wf-say .ell i { animation: none; }
  .wf-actor, .wf-light, .wf-say, .wf-actor .face { transition: none; }
}