/* Bayan Write Experience v1.5.0 — Writing Motion Language
   Presentation-only motion: language direction, bounded edits, meaning review and privacy context. */
:root{
  --bayan-motion-violet:#797EF6;
  --bayan-motion-gold:#EABF4B;
  --bayan-motion-teal:#2DD4BF;
  --bayan-motion-ink:#17181D;
  --bayan-motion-paper:#F3EFE6;
}

/* Hero: direction changes with the paragraph, not the whole document. */
.bayan-language-flow{max-width:760px;margin-top:34px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.bayan-flow-paper{position:relative;padding:18px 20px;border:1px solid rgba(23,24,29,.09);border-radius:16px;background:rgba(255,255,255,.58);box-shadow:0 14px 34px rgba(23,24,29,.045);overflow:hidden}
.bayan-flow-paper:after{content:"";position:absolute;inset:auto -18% -70% 15%;height:110px;background:radial-gradient(ellipse,rgba(121,126,246,.14),transparent 68%);pointer-events:none}
.bayan-flow-line{position:relative;z-index:1;margin:0;padding:6px 2px;font-size:14px;line-height:1.75;color:#4E4A44;transition:opacity .46s ease,transform .55s cubic-bezier(.2,.75,.2,1),filter .46s ease}
.bayan-flow-line.en{font-family:var(--ui);text-align:left}.bayan-flow-line.ar{text-align:right;font-family:var(--ar-body)}
.bayan-flow-line.short{max-width:68%;margin-inline-start:auto}
.bayan-flow-replay,.bayan-voice-play,.bayan-direction-replay,.bayan-privacy-play{border:1px solid rgba(23,24,29,.12);border-radius:999px;background:rgba(255,255,255,.72);color:#383630;padding:9px 13px;font:inherit;font-size:11px;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.bayan-flow-replay:hover,.bayan-voice-play:hover,.bayan-direction-replay:hover,.bayan-privacy-play:hover{transform:translateY(-2px);background:#fff;border-color:rgba(121,126,246,.28)}
.bayan-flow-caret,.bayan-direction-caret{display:inline-block;width:2px;height:1.1em;margin-inline-start:3px;background:var(--bayan-motion-violet);vertical-align:-.16em;opacity:0}
.bayan-language-flow.is-motion-enabled .bayan-flow-line{opacity:.28;filter:blur(.15px);transform:translateY(5px)}
.bayan-language-flow.is-motion-enabled .bayan-flow-line.is-written{opacity:1;filter:none;transform:none}
.bayan-language-flow.is-motion-enabled .bayan-flow-line.is-current .bayan-flow-caret{opacity:1;animation:bayanCaretBlink .82s steps(1) infinite}
@keyframes bayanCaretBlink{50%{opacity:0}}

/* Voice preservation: make the amount of intervention visible. */
.bayan-voice-demo{position:relative;overflow:hidden}
.bayan-voice-stage{position:relative;min-height:178px;padding:22px;border:1px solid rgba(23,24,29,.08);border-radius:16px;background:rgba(255,255,255,.62)}
.bayan-voice-stage>small{display:block;margin-bottom:18px;color:#77736B;font-size:11px}
.bayan-voice-before,.bayan-voice-after{margin:0;font-size:clamp(19px,2vw,26px);line-height:1.8;color:#25231f;transition:opacity .38s ease,transform .52s cubic-bezier(.2,.75,.2,1),filter .38s ease}
.bayan-voice-after{position:absolute;inset-inline:22px;top:58px;opacity:0;transform:translateY(10px);pointer-events:none}
.bayan-voice-after span{padding:1px 4px;border-radius:7px;background:rgba(121,126,246,.10);color:#555BD1}
.bayan-voice-fade{position:relative;border-radius:6px;background:rgba(234,191,75,.10);transition:opacity .48s ease,filter .48s ease,background .48s ease}
.bayan-voice-meter{display:flex;align-items:center;gap:10px;margin-top:24px;color:#77736B;font-size:11px;opacity:.68;transition:opacity .4s ease}
.bayan-voice-meter i{position:relative;width:110px;height:5px;border-radius:999px;background:#E8E3D9;overflow:hidden}
.bayan-voice-meter i:after{content:"";position:absolute;inset:0;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--bayan-motion-violet),var(--bayan-motion-teal));transition:width .85s cubic-bezier(.2,.75,.2,1)}
.bayan-voice-demo.is-playing .bayan-voice-fade{opacity:.16;filter:blur(2px)}
.bayan-voice-demo.is-complete .bayan-voice-before{opacity:0;transform:translateY(-9px);filter:blur(2px)}
.bayan-voice-demo.is-complete .bayan-voice-after{opacity:1;transform:none}
.bayan-voice-demo.is-complete .bayan-voice-meter{opacity:1}.bayan-voice-demo.is-complete .bayan-voice-meter i:after{width:82%}
.bayan-voice-play{margin-top:12px}

/* Direction demo: paragraphs enter from their own reading edge. */
.bayan-direction-demo{position:relative;display:grid!important;gap:10px!important;padding:16px!important;border:1px solid rgba(23,24,29,.08);border-radius:20px;background:rgba(255,255,255,.52)!important}
.bayan-direction-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 4px 4px;color:#77736B;font-size:11px}
.bayan-direction-demo article{position:relative;margin:0!important;transition:opacity .48s ease,transform .58s cubic-bezier(.2,.75,.2,1),box-shadow .48s ease!important}
.bayan-direction-demo article.final{max-width:78%;margin-inline-start:auto!important}
.bayan-direction-demo.is-motion-enabled article{opacity:.18}
.bayan-direction-demo.is-motion-enabled article.ar{transform:translateX(16px)}
.bayan-direction-demo.is-motion-enabled article.en{transform:translateX(-16px)}
.bayan-direction-demo.is-motion-enabled article.is-visible{opacity:1;transform:none;box-shadow:0 12px 32px rgba(23,24,29,.055)}
.bayan-direction-demo article.is-current .bayan-direction-caret{opacity:1;animation:bayanCaretBlink .82s steps(1) infinite}

/* Privacy: a request pulls only the bounded context it needs. */
.bayan-privacy-motion{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:clamp(28px,5vw,68px);align-items:center;padding-top:54px;padding-bottom:72px}
.bayan-privacy-copy h2{margin:0;font-size:clamp(31px,3.7vw,54px);line-height:1.22;letter-spacing:-.035em}.bayan-privacy-copy p{color:#626B79;line-height:1.9;max-width:590px}.bayan-privacy-play{margin-top:8px}
.bayan-privacy-scene{position:relative;min-height:430px;padding:28px;border:1px solid rgba(23,24,29,.09);border-radius:28px;background:linear-gradient(145deg,#fff,#F8F5EE);box-shadow:0 24px 70px rgba(23,24,29,.08);overflow:hidden}
.bayan-private-document{width:min(610px,82%);padding:24px;border:1px solid #E3DED4;border-radius:16px;background:#fff;transition:transform .68s cubic-bezier(.2,.75,.2,1),opacity .55s ease}
.bayan-private-document p{position:relative;margin:0;padding:10px 12px;border-radius:9px;color:#77736B;font-size:12px;line-height:1.75;transition:opacity .45s ease,background .45s ease,transform .55s ease}
.bayan-private-document p.selected{color:#242936;background:rgba(121,126,246,.09);box-shadow:inset 3px 0 0 var(--bayan-motion-violet)}
html[dir=rtl] .bayan-private-document p.selected{box-shadow:inset -3px 0 0 var(--bayan-motion-violet)}
.bayan-private-document p.context{color:#525965}
.bayan-context-packet{position:absolute;inset-inline-end:24px;bottom:30px;width:min(295px,46%);padding:16px;border-radius:17px;background:#17181D;color:#fff;box-shadow:0 22px 48px rgba(23,24,29,.23);opacity:.12;transform:translateY(16px) scale(.96);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.75,.2,1)}
.bayan-context-packet small{color:#BFC2FF}.bayan-context-packet span,.bayan-context-packet strong,.bayan-context-packet em{display:block;margin-top:8px;padding:7px 9px;border-radius:8px;background:#23252D;font-style:normal;font-size:11px;opacity:.2;transform:translateY(6px);transition:opacity .36s ease,transform .42s ease}.bayan-context-packet strong{color:#CFCFFF}.bayan-context-packet em{color:#9CECDF;background:rgba(45,212,191,.08)}
.bayan-privacy-motion.is-running .bayan-private-document p:not(.selected):not(.context){opacity:.25}.bayan-privacy-motion.is-running .bayan-private-document p.context{background:rgba(234,191,75,.08)}.bayan-privacy-motion.is-running .bayan-private-document p.selected{transform:translateX(3px)}
.bayan-privacy-motion.is-done .bayan-private-document{transform:translateX(-3%)}html[dir=rtl] .bayan-privacy-motion.is-done .bayan-private-document{transform:translateX(3%)}
.bayan-privacy-motion.is-done .bayan-context-packet{opacity:1;transform:none}.bayan-privacy-motion.is-done .bayan-context-packet span,.bayan-privacy-motion.is-done .bayan-context-packet strong,.bayan-privacy-motion.is-done .bayan-context-packet em{opacity:1;transform:none}.bayan-privacy-motion.is-done .bayan-context-packet span:nth-of-type(1){transition-delay:.08s}.bayan-privacy-motion.is-done .bayan-context-packet strong{transition-delay:.18s}.bayan-privacy-motion.is-done .bayan-context-packet span:nth-of-type(2){transition-delay:.28s}.bayan-privacy-motion.is-done .bayan-context-packet em{transition-delay:.42s}

@media(max-width:850px){
  .bayan-language-flow{grid-template-columns:1fr}.bayan-flow-replay{justify-self:start}
  .bayan-privacy-motion{grid-template-columns:1fr}.bayan-privacy-scene{min-height:390px}.bayan-private-document{width:88%}.bayan-context-packet{width:52%}
}
@media(max-width:600px){
  .bayan-flow-line{font-size:12px}.bayan-flow-line.short{max-width:88%}
  .bayan-voice-stage{min-height:206px;padding:18px}.bayan-voice-after{inset-inline:18px;top:54px}.bayan-voice-meter{align-items:flex-start;flex-direction:column}
  .bayan-direction-demo article.final{max-width:100%}
  .bayan-privacy-scene{min-height:500px;padding:16px}.bayan-private-document{width:100%}.bayan-context-packet{inset-inline:16px;bottom:16px;width:auto}
}
@media(prefers-reduced-motion:reduce){
  .bayan-flow-line,.bayan-voice-before,.bayan-voice-after,.bayan-voice-fade,.bayan-voice-meter i:after,.bayan-direction-demo article,.bayan-private-document,.bayan-private-document p,.bayan-context-packet,.bayan-context-packet span,.bayan-context-packet strong,.bayan-context-packet em{transition:none!important;animation:none!important}
  .bayan-flow-caret,.bayan-direction-caret{animation:none!important}
}