/* fx-demo · live translation demo. Pair with fx-demo.js. Works without fx-base.css. */
.fx-demo {
  --o: var(--fx-o, #ff6a00); --o2: var(--fx-o2, #e85d00); --o3: var(--fx-o3, #d94f00);
  --ink: var(--fx-ink, #ff6a00); --txt: var(--fx-text, #f7f4f0); --mut: var(--fx-muted, #bcb5ae);
  --ln: var(--fx-line, rgba(255,255,255,.085)); --ln2: var(--fx-line-2, rgba(255,255,255,.16));
  --card: rgba(20, 20, 20, .62); --card-2: rgba(255, 255, 255, .035);
  --spring: var(--fx-spring, cubic-bezier(.34, 1.56, .64, 1)); --out: var(--fx-ease-out, cubic-bezier(.16, 1, .3, 1));
  font-family: var(--fx-font, inherit);
  color: var(--txt);
  inline-size: 100%;
}
.fxd__shell { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .fxd__shell { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 22px; align-items: stretch; } }

/* ---- panel ---------------------------------------------------------------- */
.fxd__panel, .fxd__stage {
  position: relative; border-radius: 28px; padding: clamp(18px, 2.2vw, 26px);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%), var(--card);
  border: 1px solid var(--ln);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 40px 80px -48px rgba(0,0,0,.9);
}
.fxd__langs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.fxd__field { display: grid; gap: 6px; min-inline-size: 0; }
.fxd__field > span { font-size: .78rem; color: var(--mut); letter-spacing: .02em; }
.fxd__field select {
  appearance: none; -webkit-appearance: none; inline-size: 100%; min-block-size: 48px;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--txt);
  background: var(--card-2) no-repeat; border: 1px solid var(--ln2); border-radius: 14px;
  padding-block: 10px; padding-inline: 14px 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 18px; background-position: right 12px center;
  transition: border-color var(--fx-dur-1, 160ms), background-color var(--fx-dur-1, 160ms);
}
[dir="rtl"] .fxd__field select, .fxd__field select:dir(rtl) { background-position: left 12px center; }
.fxd__field select:hover { border-color: rgba(255,106,0,.55); }
.fxd__field select option { color: #111; background: #fff; }
.fxd__swap {
  inline-size: 48px; block-size: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--ink); background: var(--card-2); border: 1px solid var(--ln2);
  transition: transform var(--fx-dur-2, 320ms) var(--spring), border-color var(--fx-dur-1, 160ms), box-shadow var(--fx-dur-1, 160ms);
}
.fxd__swap svg { inline-size: 22px; block-size: 22px; }
.fxd__swap:hover { border-color: var(--o); box-shadow: 0 0 0 6px rgba(255,106,0,.1); }
.fxd__swap:active { transform: scale(.92); }
.fxd__swap.is-spun svg { animation: fxd-spin 620ms var(--spring); }
@keyframes fxd-spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }

.fxd__label { margin: 22px 0 10px; font-size: .8rem; color: var(--mut); }
.fxd__chips { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.fxd__chip {
  position: relative; display: grid; gap: 4px; justify-items: start; text-align: start; cursor: pointer;
  min-block-size: 64px; padding: 11px 14px 12px; border-radius: 16px;
  font: inherit; color: var(--txt); background: var(--card-2); border: 1px solid var(--ln);
  transition: transform var(--fx-dur-2, 320ms) var(--spring), border-color var(--fx-dur-1, 160ms), background var(--fx-dur-2, 320ms) var(--out), box-shadow var(--fx-dur-2, 320ms) var(--out);
}
.fxd__chip > svg { position: absolute; inset-block-start: 11px; inset-inline-end: 12px; inline-size: 16px; block-size: 16px; color: var(--mut); transition: color var(--fx-dur-1, 160ms), transform var(--fx-dur-2, 320ms) var(--spring); }
.fxd__chip-cat { font-size: .72rem; color: var(--mut); padding-inline-end: 22px; }
.fxd__chip-text { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.fxd__chip:hover { transform: translateY(-2px); border-color: rgba(255,106,0,.45); box-shadow: 0 14px 30px -18px rgba(255,106,0,.45); }
.fxd__chip:hover > svg { color: var(--ink); transform: scale(1.12) rotate(-6deg); }
.fxd__chip:active { transform: translateY(0) scale(.98); transition-duration: 90ms; }
.fxd__chip[aria-pressed="true"] {
  color: #0a0a0a; border-color: transparent;
  background: linear-gradient(135deg, var(--o), var(--o2) 70%, var(--o3));
  box-shadow: 0 18px 36px -18px rgba(255,106,0,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.fxd__chip[aria-pressed="true"] .fxd__chip-cat, .fxd__chip[aria-pressed="true"] > svg { color: rgba(10,10,10,.75); }
.fxd__chips.is-in .fxd__chip { animation: fxd-chip-in 560ms var(--out) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes fxd-chip-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ---- stage ---------------------------------------------------------------- */
.fxd__stage { display: grid; align-content: center; gap: 14px; min-block-size: 360px; overflow: clip; isolation: isolate; }
.fxd__stage::after { /* film grain */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: .05; mix-blend-mode: overlay;
  background-image: var(--fx-noise, none); background-size: 160px;
}
.fxd__glow {
  position: absolute; z-index: -2; inset-block-start: -40%; inset-inline-end: -25%; inline-size: 85%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,106,0,.28), rgba(232,93,0,.08) 55%, transparent 72%);
  opacity: .55; transform: scale(.9); transition: opacity 900ms var(--out), transform 1200ms var(--out);
}
.fxd__stage.is-active .fxd__glow { opacity: 1; transform: scale(1.05); }

.fxd__idle { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 24px 12px; }
.fxd__idle[hidden] { display: none; }
.fxd__idle-text { margin: 0; max-inline-size: 30ch; color: var(--mut); font-size: .95rem; line-height: 1.6; }
.fxd__idle-dot { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--o); box-shadow: 0 0 0 0 rgba(255,106,0,.5); animation: fxd-ping 2.4s var(--out) infinite; }
@keyframes fxd-ping { 0% { box-shadow: 0 0 0 0 rgba(255,106,0,.45); } 70%, 100% { box-shadow: 0 0 0 22px rgba(255,106,0,0); } }

.fxd__bubble {
  position: relative; max-inline-size: 92%; padding: 14px 18px 16px; border-radius: 22px;
  background: rgba(255,255,255,.045); border: 1px solid var(--ln2);
  opacity: 0; transform: translateY(14px) scale(.96);
}
.fxd__bubble[hidden] { display: none; }
.fxd__bubble--src { justify-self: start; border-end-start-radius: 8px; transform-origin: bottom left; }
.fxd__bubble--dst {
  justify-self: end; border-end-end-radius: 8px; transform-origin: bottom right;
  background: linear-gradient(160deg, rgba(255,106,0,.16), rgba(255,106,0,.04) 60%), rgba(12,12,12,.55);
  border-color: rgba(255,106,0,.45);
  box-shadow: 0 24px 50px -28px rgba(255,106,0,.55);
}
.fxd__bubble.is-in { opacity: 1; transform: none; transition: opacity 420ms var(--out), transform 720ms var(--spring); }
.fxd__meta { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--mut); margin-block-end: 6px; }
.fxd__meta svg { inline-size: 15px; block-size: 15px; }
.fxd__tag { font-weight: 600; font-size: .7rem; color: var(--ink); border: 1px solid rgba(255,106,0,.5); border-radius: 999px; padding: 1px 8px; }
.fxd__text { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.fxd__bubble--dst .fxd__text { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem); font-weight: 700; min-block-size: 1.4em; }
.fxd__bubble--dst.is-typing .fxd__type::after {
  content: ""; display: inline-block; inline-size: 2px; block-size: 1em; margin-inline-start: 3px; vertical-align: -.12em;
  background: var(--o); animation: fxd-caret .9s steps(2) infinite;
}
@keyframes fxd-caret { 50% { opacity: 0; } }
.fxd__replay {
  margin-inline-start: auto; inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--mut); background: transparent; border: 1px solid transparent;
  opacity: 0; transition: opacity 300ms, color 160ms, border-color 160ms, transform 320ms var(--spring);
}
.fxd__replay svg { inline-size: 17px; block-size: 17px; }
.fxd__stage.is-done .fxd__replay { opacity: 1; }
.fxd__replay:hover { color: var(--ink); border-color: var(--ln2); transform: rotate(-30deg); }
.fxd__badge { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: .74rem; color: var(--mut); opacity: 0; transform: translateY(4px); transition: opacity 400ms var(--out), transform 500ms var(--out); }
.fxd__badge svg { inline-size: 14px; block-size: 14px; color: var(--ink); }
.fxd__stage.is-done .fxd__badge { opacity: 1; transform: none; }

/* waveform between the bubbles: source half in white, translated half in orange */
.fxd__wave { display: flex; align-items: center; justify-content: center; gap: 4px; block-size: 56px; }
.fxd__wave i {
  display: block; inline-size: 3px; block-size: 100%; border-radius: 3px; background: var(--txt); opacity: .5;
  transform: scaleY(.12); transform-origin: center; will-change: transform;
  animation: fxd-breathe 2.6s ease-in-out infinite; animation-delay: var(--d, 0ms);
}
.fxd__wave i:nth-child(n+19) { background: var(--o); opacity: .85; }
.fxd__wave.is-live i { animation: none; opacity: 1; }
@keyframes fxd-breathe { 0%, 100% { transform: scaleY(.1); } 50% { transform: scaleY(.24); } }

.fxd__note { margin: 14px 4px 0; font-size: .8rem; line-height: 1.65; color: var(--mut); max-inline-size: 75ch; }

/* ---- loading + error -------------------------------------------------------- */
.fxd__skel { display: block; border-radius: 14px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: fxd-shimmer 1.4s linear infinite; }
.fxd__skel--bar { block-size: 48px; margin-block-end: 22px; }
.fxd__skel--chip { block-size: 64px; }
@keyframes fxd-shimmer { to { background-position: -200% 0; } }
.fxd__error { display: grid; justify-items: center; gap: 14px; padding: 36px 20px; text-align: center; border-radius: 28px; border: 1px dashed var(--ln2); color: var(--mut); }
.fxd__btn { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; color: #0a0a0a; background: var(--o); border: 0; }
.fxd__btn svg { inline-size: 18px; block-size: 18px; }

.fx-demo :focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }

/* ---- light theme ---------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  .fx-demo { --ink: #b84a00; --txt: #14110e; --mut: #5f5a55; --ln: rgba(0,0,0,.08); --ln2: rgba(0,0,0,.14); --card: rgba(255,255,255,.7); --card-2: rgba(0,0,0,.025); }
  .fxd__panel, .fxd__stage { box-shadow: 0 30px 60px -40px rgba(60,30,0,.35); }
  .fxd__bubble { background: rgba(255,255,255,.75); }
  .fxd__bubble--dst { background: linear-gradient(160deg, rgba(255,106,0,.14), rgba(255,106,0,.03) 60%), #fff; border-color: rgba(184,74,0,.4); }
  .fxd__wave i { background: #14110e; opacity: .35; }
  .fxd__skel { background: linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.08), rgba(0,0,0,.04)); background-size: 200% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-demo *, .fx-demo *::before, .fx-demo *::after { animation: none !important; transition-duration: 1ms !important; }
  .fxd__bubble { transform: none; }
}
[dir="rtl"] .fxd__bubble--src { transform-origin: bottom right; }
[dir="rtl"] .fxd__bubble--dst { transform-origin: bottom left; }