/* WayVibe — Features page: "What's new" section (Oct 2026).
   Same rules as features.css: page-scoped under .fx, the character presents
   each new feature with a speech bubble and no card behind him. Props are
   simple illustrative UI mockups (generic initials, no real data).
   Motion only runs under html.fx-anim and plays when a scene enters view
   (.is-play, set by features.js). Without it every prop shows its final state. */

.fx {
  --wn-tag-bg: #0b0b0f;
  --wn-tag-ink: #d3d3ff;
  --wn-map-road: #ffffff;
  --wn-stk-line: #ffffff;
}
:root[data-theme="dark"] .fx { --wn-tag-bg: #d3d3ff; --wn-tag-ink: #0b0b0f; --wn-map-road: rgb(255 255 255 / .75); --wn-stk-line: #1a1a24; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fx { --wn-tag-bg: #d3d3ff; --wn-tag-ink: #0b0b0f; --wn-map-road: rgb(255 255 255 / .75); --wn-stk-line: #1a1a24; }
}

/* ---------- "New" tag (hero pill, index, each feature) ---------- */
.fx .wn-new, .fx-tag .wn-new {
  display: inline-grid; place-items: center;
  min-width: 0; height: 22px; padding: 0 9px; border-radius: 999px;
  background: var(--wn-tag-bg); color: var(--wn-tag-ink);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.wn-pill {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  margin: 4px 0 6px; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--fx-card); border: 1px solid var(--fx-line);
  color: var(--fx-text); text-decoration: none;
  font-size: 14px; font-weight: 600; line-height: 1.3;
  transition: border-color .2s, transform .2s;
}
.wn-pill:hover { border-color: var(--fx-lav-deep); transform: translateY(-1px); }
.wn-pill .wn-new { flex: none; }
.wn-pill__arrow { flex: none; color: var(--fx-accent); }
.fx-index a.fx-index__new { background: var(--fx-lav); color: var(--fx-ink); border-color: transparent; }

/* ---------- Section heads ---------- */
.wn { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(24px, 4vw, 48px); scroll-margin-top: 80px; }
.wn-head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vw, 72px); }
.wn-head h2, .wn-rest h2 {
  font-size: clamp(36px, 5.2vw, 68px); line-height: 1; letter-spacing: -.045em;
  margin: 8px 0 16px; text-wrap: balance;
}
.wn-lede { margin: 0 auto; max-width: 34em; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: var(--fx-soft); }
.wn-rest { padding-top: clamp(56px, 8vw, 104px); border-top: 1px solid var(--fx-line); scroll-margin-top: 80px; }
.wn-rest h2 { margin-bottom: 0; }

/* ---------- Grid of new features ---------- */
.wn-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 80px); row-gap: clamp(56px, 7vw, 104px);
}
.wn-item { display: grid; align-content: start; gap: 8px; scroll-margin-top: 96px; }
.wn-copy { max-width: 520px; }
.wn-copy .fx-tag { margin-bottom: 10px; }
.wn-copy h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 10px; text-wrap: balance; }
.wn-copy > p:not(.fx-tag) { margin: 0; font-size: clamp(15.5px, 1.25vw, 17px); line-height: 1.55; color: var(--fx-soft); }

/* Stage: figure on the right, the prop on the left (he points / holds left). */
.fx .wn-stage { aspect-ratio: 10 / 8; container-type: inline-size; }
.fx .wn-stage::before { left: 52%; }
.fx .wn-stage .fx-pose { left: 69%; height: 94%; }
.fx .wn-stage .fx-say {
  left: auto; right: 64%; top: -3cqw; max-width: 84cqw;
  font-size: clamp(12.5px, 5cqw, 17px);
  border-radius: 4.5cqw 4.5cqw 1.2cqw 4.5cqw; transform-origin: 100% 100%;
}
.fx .wn-stage .fx-say::after { left: auto; right: -1.2cqw; border-radius: 0 .6cqw 0 0; }

/* ---------- Props: shared ---------- */
.wn-prop {
  position: absolute; z-index: 3;
  left: 1%; top: 27%; width: 47cqw;
  padding: 2.4cqw; border-radius: 3.2cqw;
  background: var(--fx-card); color: var(--fx-text);
  border: 1px solid var(--fx-line); box-shadow: var(--fx-prop-shadow);
  font-size: clamp(10.5px, 2.45cqw, 14.5px); line-height: 1.3; font-weight: 600;
}
.wn-av {
  display: inline-grid; place-items: center; flex: none;
  width: 2.3em; height: 2.3em; border-radius: 50%;
  background: var(--fx-lav); color: var(--fx-ink);
  font-size: .82em; font-weight: 800; letter-spacing: .02em;
}
.wn-av--ink { background: var(--fx-ink); color: var(--fx-lav); }
:root[data-theme="dark"] .wn-av--ink { background: #f1f0fb; color: var(--fx-ink); }

/* 1. Map of where you've been */
.wn-map__top { display: flex; align-items: center; gap: 1.6cqw; margin-bottom: 1.8cqw; }
.wn-map__svg { display: block; width: 100%; aspect-ratio: 200 / 120; border-radius: 2cqw; background: var(--fx-lav); }
.wn-road { fill: none; stroke: var(--wn-map-road); stroke-width: 7; stroke-linecap: round; }
.wn-road--thin { stroke-width: 4; }
.wn-trail { fill: none; stroke: #0b0b0f; stroke-width: 2.4; stroke-dasharray: 3 5; stroke-linecap: round; opacity: .55; }
.wn-dot { fill: #0b0b0f; stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.wn-map__log { list-style: none; margin: 1.8cqw 0 0; padding: 0; display: grid; gap: 1.2cqw; }
.wn-map__log li { display: flex; align-items: center; gap: 1.4cqw; padding: 1.2cqw 1.6cqw; border-radius: 1.8cqw; background: var(--fx-line); }
.wn-map__log i { width: 1.6cqw; height: 1.6cqw; min-width: 6px; min-height: 6px; border-radius: 50%; background: var(--fx-ink); }
:root[data-theme="dark"] .wn-map__log i { background: var(--fx-lav); }
.wn-map__log span { margin-left: auto; color: var(--fx-soft); font-weight: 500; }

/* 2. Sticker + GIF tray */
.wn-tray__tabs { display: flex; gap: 1cqw; padding: .8cqw; border-radius: 999px; background: var(--fx-line); margin-bottom: 2.4cqw; }
.wn-tray__tabs span { flex: 1; text-align: center; padding: 1cqw 0; border-radius: 999px; color: var(--fx-soft); font-size: .92em; }
.wn-tray__tabs .is-on { background: var(--fx-lav); color: var(--fx-ink); font-weight: 800; }
.wn-tray__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.wn-stk {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 1.45; padding: 1cqw; border-radius: 2.6cqw;
  font-family: var(--font-display, system-ui), sans-serif; font-weight: 800; letter-spacing: -.02em; font-size: 1.12em; line-height: 1.05;
  border: .9cqw solid var(--wn-stk-line);
  box-shadow: 0 6px 14px -8px rgb(11 11 15 / .45);
}
.wn-stk--1 { background: var(--fx-lav); color: var(--fx-ink); rotate: -4deg; }
.wn-stk--2 { background: var(--fx-ink); color: var(--fx-lav); rotate: 3deg; }
.wn-stk--3 { background: #b9b9ff; color: var(--fx-ink); rotate: 2deg; }
.wn-stk--4 { background: #f1f0fb; color: #4338ca; rotate: -3deg; }
:root[data-theme="dark"] .wn-stk--2 { background: #0b0b0f; }
.wn-tray__count { margin: 2.4cqw 0 0; font-weight: 500; color: var(--fx-soft); font-size: .9em; }
.wn-tray__count b { color: var(--fx-text); font-weight: 800; }

/* 3. Moments, reels-style */
.wn-reel { left: 8%; top: 21%; width: 30cqw; padding: 0; background: none; border: 0; box-shadow: none; }
.wn-reel__chip {
  position: absolute; z-index: 2; left: 50%; top: -2.6cqw; translate: -50% 0;
  padding: .8cqw 2.2cqw; border-radius: 999px; white-space: nowrap;
  background: var(--wn-tag-bg); color: var(--wn-tag-ink); font-size: .9em; font-weight: 700;
}
.wn-reel__view {
  width: 92%; margin: 0 auto;
  position: relative; overflow: hidden;
  aspect-ratio: 9 / 16; border-radius: 3.4cqw;
  border: 1.2cqw solid var(--fx-ink); background: var(--fx-ink);
  box-shadow: 0 24px 50px -18px rgb(11 11 15 / .55);
  rotate: -4deg;
}
:root[data-theme="dark"] .wn-reel__view { border-color: #2a2a36; }
.wn-reel__track { position: absolute; inset: 0; }
.wn-card {
  position: absolute; left: 0; right: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .6cqw;
  padding: 2cqw; color: #0b0b0f;
}
.wn-card:nth-child(1) { top: 0; } .wn-card:nth-child(2) { top: 100%; } .wn-card:nth-child(3) { top: 200%; } .wn-card:nth-child(4) { top: 300%; }
.wn-card--1 { background: linear-gradient(160deg, #e9e9ff 0%, #b9b9ff 55%, #8b8bf0 100%); }
.wn-card--2 { background: linear-gradient(170deg, #ffe3c7 0%, #f3b4c6 50%, #8f86e8 100%); }
.wn-card--3 { background: linear-gradient(165deg, #d9f3e6 0%, #b9d8ff 55%, #7f7ff0 100%); }
.wn-card .wn-av { position: absolute; left: 2cqw; top: 2cqw; background: #fff; }
.wn-card b { font-family: var(--font-display, system-ui), sans-serif; font-weight: 800; font-size: 1em; white-space: nowrap; }
.wn-card em {
  position: absolute; right: 1.8cqw; top: 2.2cqw; font-style: normal;
  padding: .6cqw 1.8cqw; border-radius: 999px; background: #0b0b0f; color: #d3d3ff; font-size: .82em; font-weight: 700;
}

/* 4. Nearby sheet + range slider */
.wn-near { top: 24%; }
.wn-near__title { display: block; font-size: 1.12em; margin-bottom: 1.6cqw; }
.wn-near__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4cqw; }
.wn-near__list li { display: flex; align-items: center; gap: 1.6cqw; }
.wn-near__list em { margin-left: auto; font-style: normal; color: var(--fx-soft); font-weight: 500; }
.wn-range { margin-top: 2.6cqw; padding-top: 2cqw; border-top: 1px solid var(--fx-line); }
.wn-range__lbl { display: grid; grid-template-columns: auto 1fr; margin-bottom: 1.6cqw; color: var(--fx-soft); font-weight: 500; }
.wn-range__lbl > span { grid-area: 1 / 2; justify-self: end; color: var(--fx-text); font-weight: 800; }
.wn-range__a { opacity: 0; }
.wn-range__track { position: relative; height: 1.4cqw; min-height: 5px; border-radius: 999px; background: var(--fx-line); }
.wn-range__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 80%; border-radius: inherit; background: var(--fx-accent); }
.wn-range__knob {
  position: absolute; top: 50%; left: 80%;
  width: 4.4cqw; height: 4.4cqw; min-width: 16px; min-height: 16px; translate: -50% -50%;
  border-radius: 50%; background: #fff; border: 2px solid var(--fx-accent); box-shadow: 0 2px 6px rgb(11 11 15 / .3);
}

/* 5. Plan with date pickers + "Did you make it?" */
.wn-plan { top: 26%; }
.wn-plan__name { display: block; font-size: 1.15em; margin-bottom: 1.8cqw; }
.wn-plan__when { display: flex; flex-wrap: wrap; gap: 1.4cqw; }
.wn-pick {
  display: inline-flex; align-items: center; gap: 1cqw;
  padding: 1.1cqw 2cqw; border-radius: 999px;
  background: var(--fx-lav); color: var(--fx-ink); font-weight: 700; white-space: nowrap;
}
.wn-pick svg { width: 1.15em; height: 1.15em; }
.wn-ask { margin-top: 2.6cqw; padding: 2.2cqw; border-radius: 2.4cqw; background: var(--fx-line); }
.wn-ask p { margin: 0 0 1.6cqw; font-weight: 800; }
.wn-ask__btns { display: flex; gap: 1.4cqw; }
.wn-ask__btns span { padding: 1.1cqw 2.2cqw; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.wn-yes { background: var(--wn-tag-bg); color: var(--wn-tag-ink); }
.wn-no { border: 1px solid var(--fx-line); background: var(--fx-card); }

/* 6. Safety: chat header shield opens the Safety sheet */
.wn-safe { top: 24%; padding: 0; background: none; border: 0; box-shadow: none; display: grid; gap: 2cqw; }
.wn-safe__bar, .wn-safe__sheet {
  background: var(--fx-card); border: 1px solid var(--fx-line); box-shadow: var(--fx-prop-shadow);
  border-radius: 3cqw; padding: 1.8cqw 2.2cqw;
}
.wn-safe__bar { display: flex; align-items: center; gap: 1.6cqw; }
.wn-shield {
  position: relative; margin-left: auto; display: grid; place-items: center;
  width: 2.6em; height: 2.6em; border-radius: 50%;
  background: var(--wn-tag-bg); color: var(--wn-tag-ink);
}
.wn-shield svg { width: 52%; height: 52%; }
.wn-tap { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--fx-accent); opacity: 0; }
.wn-safe__sheet { display: grid; gap: 1.2cqw; padding-top: 2.2cqw; border-radius: 3cqw 3cqw 2cqw 2cqw; }
.wn-safe__sheet b { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.1em; margin-bottom: .4cqw; }
.wn-safe__sheet b svg { width: 1.1em; height: 1.1em; color: var(--fx-accent); }
.wn-safe__row { display: flex; align-items: center; gap: 1.4cqw; padding: 1.2cqw 1.6cqw; border-radius: 1.8cqw; background: var(--fx-line); }
.wn-safe__row svg { width: 1.1em; height: 1.1em; }

/* =====================================================================
   Motion (only under .fx-anim; final states above)
   ===================================================================== */
@keyframes wn-scroll {
  0%, 22%   { translate: 0 0; }
  30%, 52%  { translate: 0 -100%; }
  60%, 82%  { translate: 0 -200%; }
  90%, 100% { translate: 0 -300%; }
}
@keyframes wn-up     { from { opacity: 0; translate: 0 6cqw; } to { opacity: 1; translate: 0 0; } }
@keyframes wn-tap    { 0% { opacity: .9; scale: .7; } 100% { opacity: 0; scale: 1.8; } }
@keyframes wn-press  { 0%, 100% { scale: 1; } 40% { scale: .9; } }
@keyframes wn-wobble { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2cqw; } }
@keyframes wn-knob   { from { left: 34%; } to { left: 80%; } }
@keyframes wn-fill   { from { width: 34%; } to { width: 80%; } }

.fx-anim .wn-stage:not(.is-play) .wn-prop { opacity: 0; }
.fx-anim .wn-stage.is-play .wn-prop { animation: fx-rise .7s var(--ease-out) .2s both; }

/* 1 map */
[data-scene="wn-map"] { --t: 1s; }
.fx-anim .is-play .wn-dot { animation: fx-pop .4s var(--ease-back) both; }
.fx-anim .is-play .wn-dot--1 { animation-delay: 1.0s; }
.fx-anim .is-play .wn-dot--2 { animation-delay: 1.25s; }
.fx-anim .is-play .wn-dot--3 { animation-delay: 1.5s; }
.fx-anim .is-play .wn-dot--4 { animation-delay: 1.75s; }
.fx-anim .is-play .wn-trail { animation: fx-in .6s ease 1.9s both; }
.fx-anim .is-play .wn-log--1 { animation: wn-up .45s var(--ease-out) 2.1s both; }
.fx-anim .is-play .wn-log--2 { animation: wn-up .45s var(--ease-out) 2.3s both; }

/* 2 stickers */
[data-scene="wn-stickers"] { --t: 2s; }
.fx-anim .is-play .wn-stk { animation: fx-pop .45s var(--ease-back) both; }
.fx-anim .is-play .wn-stk--1 { animation-delay: .9s; }
.fx-anim .is-play .wn-stk--2 { animation-delay: 1.1s; }
.fx-anim .is-play .wn-stk--3 { animation-delay: 1.3s; animation-name: fx-pop, wn-wobble; animation-duration: .45s, 1.6s; animation-delay: 1.3s, 2.2s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease-back), ease-in-out; }
.fx-anim .is-play .wn-stk--4 { animation-delay: 1.5s; }
.fx-anim .is-play .wn-tray__count { animation: fx-in .5s ease 1.8s both; }

/* 3 moments */
[data-scene="wn-moments"] { --t: 2.4s; }
.fx-anim .is-play .wn-reel__track { animation: wn-scroll 6.4s cubic-bezier(.65, 0, .35, 1) 1.2s infinite; }
.fx-anim .is-play .wn-reel__chip { animation: fx-pop .45s var(--ease-back) .9s both; }

/* 4 nearby */
[data-scene="wn-nearby"] { --t: 1s; }
.fx-anim .is-play .wn-range__knob { animation: wn-knob .9s var(--ease-out) 1.6s both; }
.fx-anim .is-play .wn-range__fill { animation: wn-fill .9s var(--ease-out) 1.6s both; }
.fx-anim .is-play .wn-range__a { animation: fx-blip 2s linear .6s both; }
.fx-anim .is-play .wn-range__b { animation: fx-in .2s linear 2.3s both; }
.fx-anim .is-play .wn-near__far { animation: wn-up .45s var(--ease-out) 2.2s both; }

/* 5 plans */
[data-scene="wn-plans"] { --t: 2.5s; }
.fx-anim .is-play .wn-pick--d { animation: fx-pop .4s var(--ease-back) .9s both; }
.fx-anim .is-play .wn-pick--t { animation: fx-pop .4s var(--ease-back) 1.15s both; }
.fx-anim .is-play .wn-ask { animation: wn-up .5s var(--ease-out) 1.7s both; }
.fx-anim .is-play .wn-yes { animation: wn-press .35s ease 2.4s both; }

/* 6 safety */
[data-scene="wn-safety"] { --t: 1.9s; }
.fx-anim .is-play .wn-tap { animation: wn-tap .7s ease-out 1.1s 2 both; }
.fx-anim .is-play .wn-shield { animation: wn-press .3s ease 1.15s both; }
.fx-anim .is-play .wn-safe__sheet { animation: wn-up .55s var(--ease-out) 1.7s both; }

/* fx-blip ends at opacity 0, so the "2 km" label fades out once the knob moves. */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .wn-grid { grid-template-columns: 1fr; row-gap: 56px; }
  .fx .wn-stage { width: 100%; max-width: 560px; justify-self: center; }
  .wn-copy { max-width: 560px; justify-self: center; width: 100%; }
}
@media (max-width: 520px) {
  .wn-head { text-align: left; margin-bottom: 36px; }
  .fx .wn-stage { aspect-ratio: 1 / .9; }
  .fx .wn-stage .fx-pose { left: 70%; height: 90%; }
  .wn-prop { width: 50cqw; left: 1%; top: 25%; }
  .wn-reel { width: 30cqw; left: 8%; top: 27%; }
  .wn-pill { font-size: 13px; }
}