/* WayVibe — Features page (v3, Oct 2026).
   The character presents each feature: no cards behind him, a short line in a
   speech bubble, and a small acted scene per row.
   Page-scoped: every rule hangs off .fx so the shared main-*.css is untouched.
   Brand: lavender #D3D3FF, ink #0B0B0F, headings in the site display font (Slackey is for the logo only).
   Motion only runs when <html> has .fx-anim (set by JS when reduced motion is
   off). Without it every scene shows its final state, statically. */


/* ---------- Tokens ---------- */
.fx {
  --fx-lav: #d3d3ff;
  --fx-lav-deep: #b9b9ff;
  --fx-ink: #0b0b0f;
  --fx-accent: #4338ca;
  --fx-card: #ffffff;
  --fx-line: rgb(11 11 15 / .09);
  --fx-text: var(--ink, #121214);
  --fx-soft: var(--ink-soft, #46464e);
  --fx-figure: drop-shadow(0 1px 1.5px rgb(11 11 15 / .12));
  --fx-contact: rgb(11 11 15 / .13);
  --fx-halo: transparent;
  --fx-say-bg: #ffffff;
  --fx-say-ink: #0b0b0f;
  --fx-prop-shadow: 0 10px 28px -12px rgb(11 11 15 / .35);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  color: var(--fx-text);
}
:root[data-theme="dark"] .fx {
  --fx-accent: #d3d3ff;
  --fx-card: #1a1a24;
  --fx-line: rgb(211 211 255 / .12);
  --fx-figure: drop-shadow(0 0 1px rgb(211 211 255 / .35));
  --fx-contact: rgb(0 0 0 / .5);
  --fx-halo: rgb(211 211 255 / .07);
  --fx-say-bg: #d3d3ff;
  --fx-say-ink: #0b0b0f;
  --fx-prop-shadow: 0 10px 28px -10px rgb(0 0 0 / .7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fx {
    --fx-accent: #d3d3ff;
    --fx-card: #1a1a24;
    --fx-line: rgb(211 211 255 / .12);
    --fx-figure: drop-shadow(0 0 1px rgb(211 211 255 / .35));
    --fx-contact: rgb(0 0 0 / .5);
    --fx-halo: rgb(211 211 255 / .07);
    --fx-say-bg: #d3d3ff;
    --fx-say-ink: #0b0b0f;
    --fx-prop-shadow: 0 10px 28px -10px rgb(0 0 0 / .7);
  }
}

.fx-word {
  font: inherit; letter-spacing: inherit;
  color: var(--fx-accent);
}

/* ---------- Buttons (main-*.css forces .feat-btn to surface in dark with !important) ---------- */
html:root .fx .feat-btn.feat-btn--fill { background: var(--fx-lav) !important; color: var(--fx-ink) !important; border-color: transparent !important; }
html:root .fx .feat-btn.feat-btn--fill:hover { background: var(--fx-lav-deep) !important; }

/* ---------- Hero ---------- */
.fx-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-top: clamp(112px, 12vw, 150px);
  padding-bottom: clamp(32px, 5vw, 64px);
}
.fx-hero h1 {
  font-size: clamp(42px, 6.4vw, 88px);
  line-height: .98; letter-spacing: -.045em;
  margin: 8px 0 20px; text-wrap: balance;
}
.fx-hero h1 .fx-word { font-size: 1em; }
.fx-hero .lede { max-width: 34em; color: var(--fx-soft); }
.fx-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fx-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.fx-index a {
  font-size: 14px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--fx-line); background: var(--fx-card);
  color: var(--fx-text); text-decoration: none;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.fx-index a:hover { background: var(--fx-lav); border-color: transparent; color: var(--fx-ink); transform: translateY(-1px); }

/* ---------- Stage: a positioning box only, no background ---------- */
.fx-stage {
  position: relative;
  aspect-ratio: 5 / 4.4;
  isolation: isolate;
}
.fx-stage::before {          /* faint halo, only visible in dark mode, no edge */
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 48%; width: 92%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--fx-halo), transparent);
  pointer-events: none;
}
.fx-stage--phone::before { left: 34%; }

/* The figure box matches the pose canvas (421 x 600). Props inside it are
   placed in canvas % / cqw so they track his hands at every size. */
.fx-pose {
  position: absolute; left: 50%; bottom: 0;
  height: 100%; aspect-ratio: 421 / 600;
  transform: translateX(-50%);
  container-type: inline-size;
}
.fx-stage--phone .fx-pose { left: 33%; }
[data-scene="chat"] .fx-pose, [data-scene="privacy"] .fx-pose, [data-scene="moments"] .fx-pose, [data-scene="safety"] .fx-pose { left: 40%; }
[data-scene="squads"] .fx-pose, [data-scene="adults"] .fx-pose { left: 58%; }
.fx-bob { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 100%; }
.fx-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  filter: var(--fx-figure);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 87%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 87%, transparent 100%);
  user-select: none; -webkit-user-drag: none;
}
/* Two-pose scenes end on .fx-b; hide the start pose in the final state. */
.fx-bob:has(.fx-b) .fx-a { opacity: 0; }
/* Contact shadow where he meets the ground; stays put while he bobs. */
.fx-pose::after {
  content: ""; position: absolute; z-index: 0;
  left: 52%; bottom: 0;
  width: 62%; height: 4.5%;
  transform: translate(-50%, 30%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--fx-contact), transparent);
  filter: blur(5px);
  pointer-events: none;
}

/* Phone frame with a real screenshot (unchanged look) */
.fx-phone {
  position: absolute; margin: 0; z-index: 0;
  right: 6%; top: 8%;
  width: 34%; aspect-ratio: 540 / 1120;
  border-radius: 22px;
  border: 6px solid var(--fx-ink);
  background: var(--fx-ink);
  overflow: hidden;
  box-shadow: 0 24px 50px -18px rgb(11 11 15 / .55);
  transform: rotate(4deg);
}
.fx-row--flip .fx-phone { transform: rotate(-4deg); }
.fx-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* map.webp still shows the pre-rebrand badge in its top bar; frame below it. */
.fx-phone--crop img { object-position: center 100%; transform: scale(1.09); transform-origin: center bottom; }

/* ---------- Speech bubble ---------- */
.fx-say {
  position: absolute; z-index: 4; margin: 0;
  left: 70%; top: -4cqw;
  width: max-content; max-width: 52cqw; text-wrap: balance;
  padding: 2.6cqw 3.6cqw;
  border-radius: 4.5cqw 4.5cqw 4.5cqw 1.2cqw;
  background: var(--fx-say-bg); color: var(--fx-say-ink);
  font-weight: 700; font-size: clamp(12px, 4.3cqw, 17px); line-height: 1.3;
  box-shadow: var(--fx-prop-shadow);
  transform-origin: 0% 100%;
}
.fx-say::after {            /* tail toward his head */
  content: ""; position: absolute; left: -1.2cqw; bottom: 1.6cqw;
  width: 3cqw; height: 3cqw; background: inherit;
  transform: rotate(45deg); border-radius: 0 0 0 .6cqw;
}
.fx-say .ch { white-space: pre-wrap; }

/* ---------- Props ---------- */
.fx-chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 2cqw;
  padding: 2.2cqw 3.6cqw 2.2cqw 2.4cqw;
  border-radius: 999px;
  background: var(--fx-card); color: var(--fx-text);
  border: 1px solid var(--fx-line);
  font-weight: 700; font-size: clamp(11px, 3.9cqw, 15px); white-space: nowrap;
  box-shadow: var(--fx-prop-shadow);
}

/* Map: pin pops out of his phone */
.fx-pin { position: absolute; z-index: 3; left: 10%; top: 41cqw; width: 12cqw; transform-origin: 50% 100%; }
.fx-pin svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgb(11 11 15 / .25)); }
.fx-ripple {
  position: absolute; z-index: 2; left: 16%; top: 56cqw;
  width: 16cqw; height: 6cqw; margin: -3cqw 0 0 -8cqw;
  border-radius: 50%; border: 2px solid var(--fx-lav-deep);
  opacity: 0;
}

/* Plans: lock chip above his thumb */
.fx-lockchip { left: -16%; top: 52cqw; }
.fx-lock { display: inline-grid; place-items: center; width: 6.4cqw; height: 6.4cqw; min-width: 20px; min-height: 20px; border-radius: 50%; background: var(--fx-lav); color: var(--fx-ink); }
.fx-lock svg { width: 62%; height: 62%; overflow: visible; }

/* Moments: polaroid slides out from behind him */
.fx-polaroid {
  position: absolute; z-index: 0;
  left: 76%; top: 60cqw; width: 34cqw;
  padding: 2cqw 2cqw 0; background: #fff;
  border-radius: 1.4cqw;
  box-shadow: 0 14px 30px -12px rgb(11 11 15 / .45);
  transform: rotate(7deg);
  color: #0b0b0f;
}
.fx-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 440 / 550; object-fit: cover; border-radius: .6cqw; }
.fx-polaroid span { display: block; padding: 1.6cqw 0 2.2cqw; text-align: center; font-family: var(--font-display, system-ui), sans-serif; font-weight: 700; font-size: clamp(10px, 3.4cqw, 14px); }

/* Chat: bubbles stack beside him */
.fx-msgs {
  position: absolute; z-index: 3;
  left: 82%; top: 44cqw; width: 46cqw;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2cqw;
  font-size: clamp(11px, 3.9cqw, 15px); font-weight: 600;
}
.fx-msg {
  padding: 2cqw 3.4cqw; border-radius: 4cqw 4cqw 4cqw 1cqw;
  background: var(--fx-card); color: var(--fx-text); border: 1px solid var(--fx-line);
  box-shadow: var(--fx-prop-shadow);
}
.fx-msg--me { align-self: flex-end; border-radius: 4cqw 4cqw 1cqw 4cqw; background: var(--fx-lav); color: var(--fx-ink); border-color: transparent; }
.fx-slot { position: relative; width: 100%; }
.fx-typing {
  position: absolute; left: 0; top: 0;
  display: inline-flex; gap: 1.2cqw; padding: 2.6cqw 3.4cqw;
  border-radius: 4cqw; background: var(--fx-card); border: 1px solid var(--fx-line);
  opacity: 0;
}
.fx-typing i { width: 1.8cqw; height: 1.8cqw; min-width: 5px; min-height: 5px; border-radius: 50%; background: var(--fx-soft); opacity: .5; }
.fx-poll {
  display: grid; gap: 1.6cqw; width: 100%;
  padding: 2.8cqw 3.2cqw; border-radius: 3.6cqw;
  background: var(--fx-card); color: var(--fx-text); border: 1px solid var(--fx-line);
  box-shadow: var(--fx-prop-shadow);
}
.fx-poll b { font-size: 1.02em; }
.fx-poll__row { position: relative; display: block; padding: 1.2cqw 2.4cqw; border-radius: 2cqw; overflow: hidden; font-weight: 600; }
.fx-poll__row::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--fx-line); }
.fx-poll__row em { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--fx-lav); border-radius: inherit; transform-origin: 0 50%; }
.fx-poll__row span { position: relative; z-index: 1; color: var(--fx-ink); }
:root[data-theme="dark"] .fx-poll__row:last-child span { color: var(--fx-text); }

/* Squads: friends pop in where he points */
.fx-faces { position: absolute; z-index: 3; left: -26%; top: 34cqw; width: 30cqw; height: 40cqw; }
.fx-face {
  position: absolute; display: grid; place-items: center;
  width: 14cqw; height: 14cqw; min-width: 34px; min-height: 34px; border-radius: 50%;
  font-weight: 800; font-size: clamp(11px, 4cqw, 15px); letter-spacing: .02em;
  border: 2px solid var(--fx-card);
  box-shadow: var(--fx-prop-shadow);
}
.fx-face--1 { left: 0; top: 14cqw; background: var(--fx-lav); color: var(--fx-ink); }
.fx-face--2 { left: 11cqw; top: 0; background: var(--fx-ink); color: var(--fx-lav); }
:root[data-theme="dark"] .fx-face--2 { background: #f1f0fb; color: var(--fx-ink); }
.fx-face--3 { left: 16cqw; top: 22cqw; background: #b9b9ff; color: var(--fx-ink); }

/* Privacy: location toggle flips to Ghost Mode */
.fx-toggle {
  position: absolute; z-index: 3;
  left: 74%; top: 78cqw;
  display: flex; align-items: center; gap: 2.4cqw;
  padding: 2.4cqw 2.8cqw; border-radius: 4cqw;
  background: var(--fx-card); color: var(--fx-text); border: 1px solid var(--fx-line);
  box-shadow: var(--fx-prop-shadow);
  font-size: clamp(11px, 3.6cqw, 14px); white-space: nowrap;
}
.fx-toggle__ico { display: grid; place-items: center; width: 7cqw; height: 7cqw; min-width: 22px; min-height: 22px; border-radius: 50%; background: var(--fx-lav); color: var(--fx-ink); }
.fx-toggle__ico svg { width: 62%; height: 62%; }
.fx-toggle__txt { display: grid; line-height: 1.25; }
.fx-toggle__txt > span { grid-area: 2 / 1; color: var(--fx-soft); font-weight: 600; }
.fx-toggle__txt b { grid-area: 1 / 1; }
.fx-toggle__on { opacity: 0; }
.fx-switch { position: relative; width: 11cqw; height: 6.4cqw; min-width: 34px; min-height: 20px; border-radius: 999px; background: var(--fx-line); }
.fx-switch i { position: absolute; top: 12%; left: 8%; height: 76%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }

/* Report & block: badge */
.fx-badge { left: 74%; top: 80cqw; }
.fx-badge__ico { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; min-width: 20px; min-height: 20px; border-radius: 50%; background: #1f9d55; color: #fff; }
.fx-badge__ico svg { width: 64%; height: 64%; }
.fx-badge__ico path { stroke-dasharray: 24; stroke-dashoffset: 0; }

/* 18+ badge */
.fx-18 {
  position: absolute; z-index: 3; left: -10%; top: 40cqw;
  display: grid; place-items: center;
  width: 20cqw; height: 20cqw; min-width: 52px; min-height: 52px; border-radius: 50%;
  background: var(--fx-ink); color: var(--fx-lav);
  font-family: var(--font-display, system-ui), sans-serif; font-weight: 800; letter-spacing: -.03em; font-size: clamp(14px, 6cqw, 24px);
  box-shadow: 0 0 0 1.4cqw rgb(211 211 255 / .5), var(--fx-prop-shadow);
}
:root[data-theme="dark"] .fx-18 { background: var(--fx-lav); color: var(--fx-ink); box-shadow: 0 0 0 1.4cqw rgb(211 211 255 / .18), var(--fx-prop-shadow); }

/* ---------- Hero specifics ---------- */
.fx-stage--hero { aspect-ratio: 1 / 1.08; cursor: pointer; outline: none; }
.fx-stage--hero:focus-visible { outline: 3px solid var(--focus, #4338ca); outline-offset: 6px; border-radius: 24px; }
.fx-stage--hero .fx-pose, .fx-end__pose { --arm-x: 24.7%; --arm-y: 80.8%; }
.fx-stage--hero .fx-pose { left: 44%; }
.fx-stage--hero .fx-say { left: 74%; top: 2cqw; }
.fx-wb, .fx-arm, .fx-blink { opacity: 0; }
.fx-arm { transform-origin: var(--arm-x) var(--arm-y); }
.fx-scene.is-wave .fx-a { opacity: 0; }
.fx-scene.is-wave .fx-wb, .fx-scene.is-wave .fx-arm { opacity: 1; }
.fx-scene.is-blink .fx-blink { opacity: 1; }
.fx-stage--hero .fx-a, .fx-stage--hero .fx-wb, .fx-stage--hero .fx-arm { transition: opacity .18s ease; }
/* The arm and the blink patch carry no drop shadow of their own
   (the body underneath already casts it). */
.fx-arm, .fx-blink { filter: none; }
:root[data-theme="dark"] .fx-arm { filter: drop-shadow(0 0 1px rgb(211 211 255 / .35)); }

/* ---------- Feature rows ---------- */
.fx-list {
  display: grid;
  gap: clamp(64px, 9vw, 128px);
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(64px, 9vw, 128px);
}
.fx-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  scroll-margin-top: 96px;
}
.fx-row--flip .fx-stage { order: 2; }
.fx-copy { max-width: 520px; }
.fx-row--flip .fx-copy { justify-self: end; }
.fx-tag {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fx-soft);
}
.fx-tag span {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 26px; padding: 0 8px; border-radius: 999px;
  background: var(--fx-lav); color: var(--fx-ink);
  letter-spacing: .06em; font-weight: 600;
}
.fx-copy h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 14px; text-wrap: balance; }
.fx-copy > p { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--fx-soft); margin: 0 0 22px; }
.fx-uses { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fx-uses li {
  position: relative; padding: 12px 16px 12px 46px; border-radius: 16px;
  background: var(--fx-card); border: 1px solid var(--fx-line);
  font-weight: 600; font-size: 15px; line-height: 1.4;
}
.fx-uses li::before {
  content: ""; position: absolute; left: 14px; top: 50%;
  width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  background: var(--fx-lav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.fx-uses a, .fx-end a:not(.feat-btn) { color: var(--fx-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Closing (no panel) ---------- */
.fx-end { padding-bottom: clamp(40px, 6vw, 80px); border-top: 1px solid var(--fx-line); padding-top: clamp(48px, 6vw, 80px); }
.fx-end__card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 24px; }
.fx-end__copy { align-self: center; padding-bottom: clamp(24px, 4vw, 56px); }
.fx-end h2 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -.035em; margin: 0 0 12px; }
.fx-end p { font-size: 17px; line-height: 1.55; max-width: 36em; margin: 0 0 16px; color: var(--fx-soft); }
.fx-contact { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.fx-contact a {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: var(--fx-card); color: var(--fx-text) !important; text-decoration: none !important;
  font-weight: 700; font-size: 15px; border: 1px solid var(--fx-line);
}
.fx-end__pose { position: relative; left: auto; bottom: auto; transform: none; justify-self: center; height: auto; width: min(100%, 340px); aspect-ratio: 421 / 600; }
.fx-end__pose::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 140%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, var(--fx-halo), transparent); pointer-events: none;
}

/* =====================================================================
   Motion. Final states above; everything below only animates INTO them.
   ===================================================================== */
@keyframes fx-rise   { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes fx-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-out    { from { opacity: 1; } to { opacity: 0; } }
@keyframes fx-pop    { 0% { opacity: 0; scale: .4; } 100% { opacity: 1; scale: 1; } }
@keyframes fx-char   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-bob    { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.2%) rotate(-.5deg); } }
@keyframes fx-breathe{ 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.006, 1.014); } }
@keyframes fx-wave   { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 75% { rotate: 7deg; } }
@keyframes fx-drop   { 0% { opacity: 0; translate: 0 -40cqw; scale: 1 1; } 55% { opacity: 1; translate: 0 0; scale: 1 1; }
                       68% { translate: 0 0; scale: 1.12 .82; } 82% { translate: 0 -5cqw; scale: .96 1.06; } 100% { opacity: 1; translate: 0 0; scale: 1 1; } }
@keyframes fx-ripple { 0% { opacity: .9; scale: .3; } 100% { opacity: 0; scale: 2.4; } }
@keyframes fx-snap   { 0% { translate: 0 -4px; } 70% { translate: 0 1px; } 100% { translate: 0 0; } }
@keyframes fx-flash  { 0%, 100% { background-color: var(--fx-card); } 35% { background-color: var(--fx-lav); } }
@keyframes fx-slide  { from { opacity: 0; translate: -40cqw 8cqw; rotate: -12deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes fx-blip   { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-dot    { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -35%; opacity: 1; } }
@keyframes fx-grow   { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes fx-knob   { from { left: 48%; } to { left: 8%; } }
@keyframes fx-track  { from { background-color: #6366f1; } to { background-color: var(--fx-line); } }
@keyframes fx-draw   { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes fx-pulse  { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes fx-endwave{ 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-endin  { 0%, 82% { opacity: 0; } 100% { opacity: 1; } }

/* Before a scene plays (JS on, motion allowed), the figure waits off-stage. */
.fx-anim .fx-scene:not(.is-play) .fx-pose,
.fx-anim .fx-scene.fx-end__pose:not(.is-play),
.fx-anim .fx-scene:not(.is-play) .fx-phone { opacity: 0; }

.fx-anim .is-play .fx-pose, .fx-anim .fx-end__pose.is-play { animation: fx-rise .7s var(--ease-out) both; }
.fx-anim .is-play .fx-phone { animation: fx-rise .8s .12s var(--ease-out) both; }
.fx-anim .is-play .fx-bob { animation: fx-bob 4.6s ease-in-out 1.2s infinite; }
.fx-anim .fx-row:nth-child(even) .is-play .fx-bob { animation-delay: 1.8s; }
.fx-anim .fx-stage--hero.is-play .fx-bob { animation: fx-breathe 3.8s ease-in-out .8s infinite; }

/* Speech bubble: pop + typewriter (chars are wrapped in .ch by JS, --i = index) */
.fx-anim .is-play .fx-say { animation: fx-pop .45s var(--ease-back) .45s both; }
.fx-anim .is-play .fx-say .ch { animation: fx-char .01s linear calc(.6s + var(--i) * 28ms) both; }

/* Pose crossfades (start pose -> end pose at --t) */
.fx-scene { --t: 1.2s; }
.fx-anim .is-play .fx-bob:has(.fx-b) .fx-a { animation: fx-out .35s ease var(--t) both; }
.fx-anim .is-play .fx-b { animation: fx-in .35s ease var(--t) both; }

/* Hero / closing wave: arm-layer rotation at the elbow */
.fx-anim .fx-scene.is-wave .fx-arm { animation: fx-wave .55s ease-in-out infinite; }

/* Map */
[data-scene="map"] { --t: .9s; }
.fx-anim .is-play .fx-pin { animation: fx-drop .8s ease-out 1.25s both; }
.fx-anim .is-play .fx-ripple { animation: fx-ripple .8s ease-out 1.75s both; }

/* Plans */
[data-scene="plans"] { --t: 1.6s; }
.fx-anim .is-play .fx-lockchip { animation: fx-pop .45s var(--ease-back) .7s both, fx-flash .6s ease 1.25s both; }
.fx-anim .is-play .fx-shackle { animation: fx-snap .3s ease-in 1.2s both; }

/* Moments */
[data-scene="moments"] { --t: 1.4s; }
.fx-anim .is-play .fx-polaroid { animation: fx-slide .8s var(--ease-out) .7s both; }

/* Chat */
.fx-anim .is-play .fx-msg--1 { animation: fx-pop .4s var(--ease-back) .8s both; transform-origin: 0 100%; }
.fx-anim .is-play .fx-msg--2 { animation: fx-pop .4s var(--ease-back) 1.3s both; transform-origin: 100% 100%; }
.fx-anim .is-play .fx-typing { animation: fx-blip .8s linear 1.5s both; }
.fx-anim .is-play .fx-typing i { animation: fx-dot .6s ease-in-out 1.5s 2; }
.fx-anim .is-play .fx-typing i:nth-child(2) { animation-delay: 1.6s; }
.fx-anim .is-play .fx-typing i:nth-child(3) { animation-delay: 1.7s; }
.fx-anim .is-play .fx-poll { animation: fx-pop .45s var(--ease-back) 2.25s both; transform-origin: 0 0; }
.fx-anim .is-play .fx-poll__row em { animation: fx-grow .6s var(--ease-out) 2.55s both; }

/* Squads */
.fx-anim .is-play .fx-face { animation: fx-pop .45s var(--ease-back) both; }
.fx-anim .is-play .fx-face--1 { animation-delay: .9s; }
.fx-anim .is-play .fx-face--2 { animation-delay: 1.1s; }
.fx-anim .is-play .fx-face--3 { animation-delay: 1.3s; }

/* Privacy */
[data-scene="privacy"] { --t: 1.8s; }
.fx-anim .is-play .fx-toggle { animation: fx-pop .45s var(--ease-back) .6s both; transform-origin: 0 50%; }
.fx-anim .is-play .fx-switch { animation: fx-track .25s ease 1.3s both; }
.fx-anim .is-play .fx-switch i { animation: fx-knob .25s ease 1.3s both; }
.fx-anim .is-play .fx-toggle__on { animation: fx-out .2s linear 1.3s both; }
.fx-anim .is-play .fx-toggle__off { animation: fx-in .2s linear 1.3s both; }

/* Report & block */
[data-scene="safety"] { --t: .5s; }
.fx-anim .is-play .fx-badge { animation: fx-pop .45s var(--ease-back) 1.1s both; transform-origin: 0 50%; }
.fx-anim .is-play .fx-badge__ico path { animation: fx-draw .35s ease-out 1.4s both; }

/* 18+ */
.fx-anim .is-play .fx-18 { animation: fx-pop .5s var(--ease-back) .8s both, fx-pulse 2.2s ease-in-out 1.6s infinite; }

/* Closing: a final wave, then the peace sign */
.fx-anim .fx-end__pose.is-play .fx-wb, .fx-anim .fx-end__pose.is-play .fx-arm { animation: fx-endwave 2.6s linear .2s both; }
.fx-anim .fx-end__pose.is-play .fx-arm { animation: fx-endwave 2.6s linear .2s both, fx-wave .55s ease-in-out .3s 4; }
.fx-anim .fx-end__pose.is-play .fx-a { animation: fx-endin 2.6s linear .2s both; }

@media (prefers-reduced-motion: reduce) {
  .fx *, .fx *::before, .fx *::after { animation: none !important; }
  .fx-stage--hero .fx-a, .fx-stage--hero .fx-wb, .fx-stage--hero .fx-arm { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .fx-hero { grid-template-columns: 1fr; padding-top: 108px; gap: 20px; }
  .fx-stage--hero { aspect-ratio: 4 / 3.4; max-width: 560px; width: 100%; justify-self: center; order: -1; }
  .fx-row { grid-template-columns: 1fr; gap: 20px; }
  .fx-row--flip .fx-stage { order: 0; }
  .fx-row--flip .fx-copy { justify-self: start; }
  .fx-copy { max-width: none; }
  .fx-stage { aspect-ratio: 4 / 3.2; }
  .fx-end__card { grid-template-columns: 1fr; }
  .fx-end__copy { padding-bottom: 8px; }
  .fx-end__pose { width: min(70%, 280px); }
}
@media (max-width: 520px) {
  .fx-hero h1 { font-size: clamp(38px, 11vw, 52px); }
  .fx-hero__cta .feat-btn { flex: 1 1 auto; }
  .fx-index { gap: 6px; margin-top: 24px; }
  .fx-index a { font-size: 13px; padding: 6px 12px; }
  .fx-stage { aspect-ratio: 1 / 1; }
  .fx-stage--hero { aspect-ratio: 1 / .92; }
  .fx-stage--hero .fx-pose { left: 40%; }
  .fx-stage--phone .fx-pose { left: 31%; }
  .fx-phone { width: 37%; right: 4%; top: 9%; border-width: 4px; border-radius: 16px; }
  .fx-uses li { font-size: 14.5px; padding: 11px 14px 11px 42px; }
  .fx-uses li::before { left: 12px; }
}

/* OS-dark (no explicit toggle) versions of the few dark-only prop tweaks */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fx-face--2 { background: #f1f0fb; color: var(--fx-ink); }
  :root:not([data-theme="light"]) .fx-18 { background: var(--fx-lav); color: var(--fx-ink); box-shadow: 0 0 0 1.4cqw rgb(211 211 255 / .18), var(--fx-prop-shadow); }
  :root:not([data-theme="light"]) .fx-poll__row:last-child span { color: var(--fx-text); }
  :root:not([data-theme="light"]) .fx-arm { filter: drop-shadow(0 0 1px rgb(211 211 255 / .35)); }
}
@media (max-width: 520px) {
  .fx-stage--phone .fx-pose { height: 92%; left: 33%; }
  .fx-lockchip { left: 2%; top: 44cqw; }
  .fx-say { max-width: 56cqw; }
}

/* Mobile: keep the right-hand bubbles and the privacy toggle inside the
   viewport (they ran up to 25px past the edge at 390px). */
@media (max-width: 520px) {
  [data-scene="squads"] .fx-say, [data-scene="adults"] .fx-say {
    left: auto; right: 66%; top: -6cqw;
    border-radius: 4.5cqw 4.5cqw 1.2cqw 4.5cqw; transform-origin: 100% 100%;
  }
  [data-scene="squads"] .fx-say::after, [data-scene="adults"] .fx-say::after { left: auto; right: -1.2cqw; border-radius: 0 .6cqw 0 0; }
  .fx-toggle { left: 64%; }
}
main.fx { overflow-x: clip; }