/* Bayan Write Experience v1.1.0 — Editorial Motion System
   Presentation only. Motion is calm, page-specific and fully disabled for
   reduced-motion users. */

:root{
  --wn-motion-ink:#17181d;
  --wn-motion-violet:#797ef6;
  --wn-motion-gold:#eabf4b;
  --wn-motion-teal:#2dd4bf;
  --wn-motion-olive:#426a54;
  --wn-motion-paper:#f3efe6;
}

.wn-public main,.wn-account-page,.wn-experience-demo,.wn-experience-beta{position:relative}
.wn-motion-host{position:relative;isolation:isolate}
.wn-page-motif{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.9}
.wn-page-motif>i,.wn-page-motif>span{position:absolute;display:block;pointer-events:none}
.wn-motion-host>*:not(.wn-page-motif){position:relative;z-index:1}

/* A quiet editorial entrance: headings feel written into place rather than dropped in. */
.wn-motion-ready [data-reveal].is-visible .eyebrow{animation:wnEditorialKicker .72s cubic-bezier(.2,.72,.2,1) both}
html[lang="ar"] .wn-motion-ready [data-reveal].is-visible h1,
html[lang="ar"] .wn-motion-ready [data-reveal].is-visible h2{animation:wnArabicSettle .78s cubic-bezier(.16,.78,.22,1) both}
@keyframes wnEditorialKicker{from{opacity:.15;letter-spacing:.24em}to{opacity:1;letter-spacing:var(--wn-kicker-spacing,.12em)}}
@keyframes wnArabicSettle{from{opacity:.15;transform:translate3d(12px,5px,0)}to{opacity:1;transform:none}}

/* HOME — a long writing stroke, with dots that breathe like punctuation. */
.route-home .wn-page-motif.motif-home i:nth-child(1){inset-inline-end:3%;top:7%;width:min(42vw,620px);height:min(42vw,620px);border:1px solid rgba(121,126,246,.16);border-radius:50%;animation:wnOrbitBreath 14s ease-in-out infinite}
.route-home .wn-page-motif.motif-home i:nth-child(2){inset-inline-end:12%;top:17%;width:min(27vw,400px);height:min(27vw,400px);border:1px solid rgba(234,191,75,.17);border-radius:50%;animation:wnOrbitBreath 17s ease-in-out -4s infinite reverse}
.route-home .wn-page-motif.motif-home i:nth-child(3){inset-inline-start:5%;bottom:10%;width:220px;height:2px;background:linear-gradient(90deg,transparent,rgba(23,24,29,.22),transparent);transform-origin:right;animation:wnWritingStroke 8s ease-in-out infinite}
.route-home .wn-page-motif.motif-home span{width:7px;height:7px;border-radius:50%;background:var(--wn-motion-violet);opacity:.42;animation:wnPunctuation 6s ease-in-out infinite}
.route-home .wn-page-motif.motif-home span:nth-of-type(1){inset-inline-start:11%;bottom:18%}.route-home .wn-page-motif.motif-home span:nth-of-type(2){inset-inline-start:17%;bottom:22%;animation-delay:-2s}.route-home .wn-page-motif.motif-home span:nth-of-type(3){inset-inline-start:23%;bottom:17%;animation-delay:-4s}

/* FEATURES — connected ideas rather than generic floating blobs. */
.route-features .wn-page-motif.motif-features i{width:9px;height:9px;border-radius:50%;background:var(--wn-motion-violet);box-shadow:0 0 0 7px rgba(121,126,246,.07);animation:wnNodePulse 6.8s ease-in-out infinite}
.route-features .wn-page-motif.motif-features i:nth-child(1){top:17%;inset-inline-end:14%}.route-features .wn-page-motif.motif-features i:nth-child(2){top:34%;inset-inline-end:27%;animation-delay:-2.2s}.route-features .wn-page-motif.motif-features i:nth-child(3){top:24%;inset-inline-end:39%;animation-delay:-4.4s}
.route-features .wn-page-motif.motif-features:before,.route-features .wn-page-motif.motif-features:after{content:"";position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(121,126,246,.24),transparent);transform-origin:right;animation:wnWritingStroke 9s ease-in-out infinite}
.route-features .wn-page-motif.motif-features:before{width:28%;top:25%;inset-inline-end:13%;transform:rotate(9deg)}.route-features .wn-page-motif.motif-features:after{width:24%;top:33%;inset-inline-end:22%;transform:rotate(-13deg);animation-delay:-3s}

/* PRICING — measured arcs, slow and deliberate. */
.route-pricing .wn-page-motif.motif-pricing i:nth-child(1),.route-pricing .wn-page-motif.motif-pricing i:nth-child(2){border-radius:50%;border:1px solid rgba(234,191,75,.18);animation:wnOrbitBreath 15s ease-in-out infinite}
.route-pricing .wn-page-motif.motif-pricing i:nth-child(1){width:360px;height:360px;top:-145px;inset-inline-end:8%}.route-pricing .wn-page-motif.motif-pricing i:nth-child(2){width:230px;height:230px;top:-75px;inset-inline-end:14%;animation-delay:-5s}
.route-pricing .wn-page-motif.motif-pricing span{top:21%;inset-inline-end:10%;width:190px;height:1px;background:linear-gradient(90deg,transparent,rgba(234,191,75,.42));transform-origin:right;animation:wnMeasure 7s ease-in-out infinite}

/* ARABIC — qalam sweep + diacritic dots. */
.route-arabic .wn-page-motif.motif-arabic:before{content:"";position:absolute;inset-inline-end:-8%;top:7%;width:58%;height:44%;border-radius:55% 45% 60% 40%;border-block-start:1px solid rgba(121,126,246,.22);transform:rotate(-8deg);animation:wnQalamSweep 12s ease-in-out infinite}
.route-arabic .wn-page-motif.motif-arabic:after{content:"";position:absolute;inset-inline-end:9%;top:21%;width:34%;height:26%;border-radius:60% 40% 55% 45%;border-block-end:1px solid rgba(234,191,75,.28);transform:rotate(5deg);animation:wnQalamSweep 14s ease-in-out -4s infinite reverse}
.route-arabic .wn-page-motif.motif-arabic i{width:9px;height:9px;border-radius:50%;background:rgba(121,126,246,.38);animation:wnDiacritic 7s ease-in-out infinite}
.route-arabic .wn-page-motif.motif-arabic i:nth-child(1){top:14%;inset-inline-end:23%}.route-arabic .wn-page-motif.motif-arabic i:nth-child(2){top:18%;inset-inline-end:19%;animation-delay:-2.3s}.route-arabic .wn-page-motif.motif-arabic i:nth-child(3){top:31%;inset-inline-end:29%;animation-delay:-4.7s}

/* PALESTINIAN — an olive-green oral rhythm, not a flag animation. */
.route-palestinian .wn-page-motif.motif-palestinian:before{content:"";position:absolute;inset-inline-end:-4%;top:15%;width:48%;height:38%;border-radius:50%;border:1px solid rgba(66,106,84,.17);transform:rotate(-9deg);animation:wnOralWave 13s ease-in-out infinite}
.route-palestinian .wn-page-motif.motif-palestinian:after{content:"";position:absolute;inset-inline-end:6%;top:22%;width:33%;height:24%;border-radius:50%;border:1px dashed rgba(66,106,84,.26);transform:rotate(7deg);animation:wnOralWave 16s ease-in-out -5s infinite reverse}
.route-palestinian .wn-page-motif.motif-palestinian i{width:6px;height:6px;border-radius:50%;background:rgba(66,106,84,.55);animation:wnPunctuation 6.5s ease-in-out infinite}
.route-palestinian .wn-page-motif.motif-palestinian i:nth-child(1){top:20%;inset-inline-end:18%}.route-palestinian .wn-page-motif.motif-palestinian i:nth-child(2){top:31%;inset-inline-end:27%;animation-delay:-3s}

/* HERITAGE — thin folio leaves, like pages breathing. */
.route-heritage .wn-page-motif.motif-heritage i{top:12%;inset-inline-end:7%;width:260px;height:350px;border:1px solid rgba(138,106,31,.16);border-radius:4px 18px 18px 4px;transform-origin:100% 50%;animation:wnFolio 11s ease-in-out infinite}
.route-heritage .wn-page-motif.motif-heritage i:nth-child(2){inset-inline-end:10%;top:14%;opacity:.65;animation-delay:-3.5s}.route-heritage .wn-page-motif.motif-heritage i:nth-child(3){inset-inline-end:13%;top:16%;opacity:.36;animation-delay:-7s}
.route-heritage .wn-page-motif.motif-heritage:after{content:"ذ";position:absolute;top:20%;inset-inline-end:18%;font:700 128px/1 var(--ar-display);color:rgba(121,126,246,.055);animation:wnDiacritic 10s ease-in-out infinite}

/* WORKSHOP — notebook baselines + a moving pen point. */
.route-workshop .wn-page-motif.motif-workshop{background:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(23,24,29,.028) 31px 32px);mask-image:linear-gradient(to left,#000 0 44%,transparent 72%)}
.route-workshop .wn-page-motif.motif-workshop i:nth-child(1){top:22%;inset-inline-end:10%;width:180px;height:2px;background:linear-gradient(90deg,rgba(121,126,246,.05),rgba(121,126,246,.38));animation:wnWritingStroke 7s ease-in-out infinite}
.route-workshop .wn-page-motif.motif-workshop i:nth-child(2){top:calc(22% - 5px);inset-inline-end:10%;width:10px;height:10px;border-radius:50% 50% 50% 0;background:#17181d;transform:rotate(-45deg);animation:wnPenTravel 7s ease-in-out infinite}

/* MOBILE — one calm device halo. */
.route-mobile .wn-page-motif.motif-mobile i:nth-child(1){top:8%;inset-inline-end:5%;width:min(42vw,520px);height:min(42vw,520px);border-radius:50%;border:1px solid rgba(121,126,246,.16);box-shadow:0 0 0 44px rgba(121,126,246,.022),0 0 0 92px rgba(45,212,191,.018);animation:wnOrbitBreath 13s ease-in-out infinite}
.route-mobile .wn-page-motif.motif-mobile i:nth-child(2){top:18%;inset-inline-end:15%;width:7px;height:7px;border-radius:50%;background:var(--wn-motion-teal);animation:wnNodePulse 5s ease-in-out infinite}

/* TEAMS — independent lines converge without becoming identical. */
.route-teams .wn-page-motif.motif-teams i{height:1px;width:36%;inset-inline-end:4%;background:linear-gradient(90deg,transparent,rgba(121,126,246,.24));transform-origin:right;animation:wnThread 10s ease-in-out infinite}
.route-teams .wn-page-motif.motif-teams i:nth-child(1){top:18%;transform:rotate(8deg)}.route-teams .wn-page-motif.motif-teams i:nth-child(2){top:25%;transform:rotate(-5deg);animation-delay:-3.3s}.route-teams .wn-page-motif.motif-teams i:nth-child(3){top:32%;transform:rotate(3deg);animation-delay:-6.6s}

/* DOWNLOAD — surfaces orbit one core. */
.route-download .wn-page-motif.motif-download i:nth-child(1){top:8%;inset-inline-end:8%;width:300px;height:300px;border:1px solid rgba(121,126,246,.14);border-radius:50%;animation:wnSlowSpin 28s linear infinite}.route-download .wn-page-motif.motif-download i:nth-child(2){top:20%;inset-inline-end:20%;width:12px;height:12px;border-radius:4px;background:rgba(234,191,75,.55);transform-origin:-90px -90px;animation:wnSlowSpin 18s linear infinite}

/* GAZA STUDENTS — deliberately restrained. */
.route-students .wn-page-motif.motif-students:before{content:"";position:absolute;inset-inline-end:4%;top:11%;width:350px;height:350px;border-radius:50%;border:1px solid rgba(66,106,84,.12);animation:wnRespectfulBreath 12s ease-in-out infinite}.route-students .wn-page-motif.motif-students:after{content:"";position:absolute;inset-inline-end:12%;top:19%;width:190px;height:1px;background:linear-gradient(90deg,transparent,rgba(234,191,75,.32),transparent);animation:wnWritingStroke 9s ease-in-out infinite}

/* TRUST / TERMS / SUPPORT — ruler-like quiet motion. */
.route-privacy .wn-page-motif,.route-terms .wn-page-motif,.route-support .wn-page-motif{background:repeating-linear-gradient(90deg,transparent 0 47px,rgba(23,24,29,.025) 47px 48px);mask-image:linear-gradient(to bottom,#000,transparent 58%)}
.route-privacy .wn-page-motif i,.route-terms .wn-page-motif i,.route-support .wn-page-motif i{top:15%;inset-inline-end:8%;width:220px;height:1px;background:rgba(121,126,246,.23);animation:wnWritingStroke 10s ease-in-out infinite}

/* Account / beta / demo: the product remains focused, but not visually dead. */
.wn-account-page .wn-page-motif.motif-account:before,.wn-experience-beta .wn-page-motif:before,.wn-experience-demo .wn-page-motif:before{content:"";position:absolute;inset-inline-end:-70px;top:80px;width:280px;height:280px;border-radius:50%;border:1px solid rgba(121,126,246,.12);animation:wnRespectfulBreath 14s ease-in-out infinite}
.wn-account-page .wn-page-motif.motif-account:after,.wn-experience-beta .wn-page-motif:after,.wn-experience-demo .wn-page-motif:after{content:"";position:absolute;inset-inline-end:35px;top:160px;width:150px;height:1px;background:linear-gradient(90deg,transparent,rgba(234,191,75,.34));animation:wnWritingStroke 8s ease-in-out infinite}

/* Arabic-specific details — a tiny baseline flourish, never pseudo-calligraphy. */
html[lang="ar"] .wn-public .page-hero h1,
html[lang="ar"] .wn-public .wn-arabic-hero-copy h1{position:relative}
html[lang="ar"] .wn-public .page-hero h1:before,
html[lang="ar"] .wn-public .wn-arabic-hero-copy h1:before{content:"";position:absolute;inset-inline-start:0;bottom:-12px;width:clamp(70px,12vw,150px);height:2px;background:linear-gradient(90deg,rgba(121,126,246,.65),rgba(234,191,75,.45),transparent);transform-origin:right;animation:wnArabicUnderline 1.15s .18s cubic-bezier(.2,.72,.2,1) both}
html[lang="ar"] .wn-arabic-institution blockquote{position:relative}
html[lang="ar"] .wn-arabic-institution blockquote:after{content:"";display:block;width:70px;height:1px;margin-top:16px;margin-inline-start:auto;background:linear-gradient(90deg,transparent,rgba(234,191,75,.62));animation:wnWritingStroke 6.5s ease-in-out infinite}

/* Images remain crisp and quiet; no decorative scaling that blurs the Bayan mark. */
.brand img,.wn-account-brand img,.mini-brand img,.wn-connect-glyph img,.wn-install-toast img{image-rendering:auto;transform:translateZ(0)}
.wn-public img[alt=""],.wn-account-page img[alt=""]{user-select:none;-webkit-user-drag:none}

@keyframes wnOrbitBreath{0%,100%{transform:scale(.985);opacity:.52}50%{transform:scale(1.025);opacity:1}}
@keyframes wnWritingStroke{0%,100%{transform:scaleX(.22);opacity:.18}45%,60%{transform:scaleX(1);opacity:.68}}
@keyframes wnPunctuation{0%,100%{transform:translateY(0);opacity:.22}50%{transform:translateY(-9px);opacity:.68}}
@keyframes wnNodePulse{0%,100%{transform:scale(.8);opacity:.3}50%{transform:scale(1.12);opacity:.9}}
@keyframes wnMeasure{0%,100%{transform:scaleX(.25)}50%{transform:scaleX(1)}}
@keyframes wnQalamSweep{0%,100%{transform:rotate(-8deg) translate3d(0,0,0);opacity:.42}50%{transform:rotate(-4deg) translate3d(-10px,8px,0);opacity:.9}}
@keyframes wnDiacritic{0%,100%{transform:translateY(0) scale(.9);opacity:.25}50%{transform:translateY(-8px) scale(1.06);opacity:.72}}
@keyframes wnOralWave{0%,100%{transform:rotate(-9deg) scale(.98);opacity:.35}50%{transform:rotate(-5deg) scale(1.025);opacity:.78}}
@keyframes wnFolio{0%,100%{transform:perspective(800px) rotateY(0deg);opacity:.28}50%{transform:perspective(800px) rotateY(-7deg);opacity:.72}}
@keyframes wnPenTravel{0%,100%{transform:translateX(0) rotate(-45deg);opacity:.25}50%{transform:translateX(-165px) rotate(-45deg);opacity:.8}}
@keyframes wnThread{0%,100%{scale:.32 1;opacity:.18}50%{scale:1 1;opacity:.66}}
@keyframes wnSlowSpin{to{transform:rotate(360deg)}}
@keyframes wnRespectfulBreath{0%,100%{transform:scale(.99);opacity:.28}50%{transform:scale(1.015);opacity:.58}}
@keyframes wnArabicUnderline{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}


/* Reading-order-aware Arabic micro entrance. Kept in CSS so the theme remains CSP-friendly. */
.wn-seq-item{opacity:.72;transform:translateY(3px);animation:wnSeqIn .55s 180ms cubic-bezier(.2,.72,.2,1) forwards}
.wn-seq-1{animation-delay:250ms}.wn-seq-2{animation-delay:320ms}.wn-seq-3{animation-delay:390ms}.wn-seq-4{animation-delay:460ms}.wn-seq-5{animation-delay:530ms}.wn-seq-6{animation-delay:600ms}.wn-seq-7{animation-delay:670ms}
@keyframes wnSeqIn{to{opacity:1;transform:none}}
@media(max-width:760px){
  .wn-page-motif{opacity:.55}
  .route-home .wn-page-motif.motif-home i:nth-child(1){width:320px;height:320px;inset-inline-end:-150px;top:2%}
  .route-home .wn-page-motif.motif-home i:nth-child(2),.route-heritage .wn-page-motif.motif-heritage i:nth-child(2),.route-heritage .wn-page-motif.motif-heritage i:nth-child(3){display:none}
  .route-arabic .wn-page-motif.motif-arabic:before,.route-palestinian .wn-page-motif.motif-palestinian:before{width:82%;inset-inline-end:-26%;top:5%}
  .route-heritage .wn-page-motif.motif-heritage i{width:180px;height:250px;inset-inline-end:-70px;top:6%}
  .route-workshop .wn-page-motif.motif-workshop{mask-image:linear-gradient(to left,#000 0 64%,transparent 86%)}
  .route-pricing .wn-page-motif.motif-pricing i:nth-child(1){width:260px;height:260px;inset-inline-end:-80px}
  html[lang="ar"] .wn-public .page-hero h1:before,html[lang="ar"] .wn-public .wn-arabic-hero-copy h1:before{bottom:-8px}
}

@media(prefers-reduced-motion:reduce){
  .wn-page-motif,.wn-page-motif:before,.wn-page-motif:after,.wn-page-motif>*,
  .wn-motion-ready [data-reveal].is-visible .eyebrow,
  html[lang="ar"] .wn-motion-ready [data-reveal].is-visible h1,
  html[lang="ar"] .wn-motion-ready [data-reveal].is-visible h2,
  html[lang="ar"] .wn-public .page-hero h1:before,
  html[lang="ar"] .wn-public .wn-arabic-hero-copy h1:before,
  html[lang="ar"] .wn-arabic-institution blockquote:after,.wn-seq-item{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}
}

/* DEMO — an editorial correction travels from mark to resolution. */
.wn-experience-demo .wn-page-motif.motif-demo:before{content:"";position:absolute;inset-inline-end:5%;top:14%;width:280px;height:1px;background:linear-gradient(90deg,transparent,rgba(194,109,102,.44),rgba(121,126,246,.34),rgba(45,212,191,.38),transparent);transform-origin:right;animation:wnDemoResolve 8s ease-in-out infinite}
.wn-experience-demo .wn-page-motif.motif-demo i:nth-child(1){inset-inline-end:19%;top:calc(14% - 4px);width:9px;height:9px;border-radius:50%;background:rgba(194,109,102,.62);animation:wnDemoMark 8s ease-in-out infinite}
.wn-experience-demo .wn-page-motif.motif-demo i:nth-child(2){inset-inline-end:7%;top:calc(14% - 5px);width:11px;height:11px;border-radius:50%;background:rgba(45,212,191,.62);animation:wnDemoResolveDot 8s ease-in-out infinite}
.wn-experience-demo .wn-page-motif.motif-demo:after{content:"ب";position:absolute;inset-inline-start:4%;bottom:4%;font:700 116px/1 "Noto Kufi Arabic",Tahoma,sans-serif;color:rgba(121,126,246,.04);animation:wnRespectfulBreath 12s ease-in-out infinite}

/* FOUNDING BETA — controlled opening: concentric doors widen, never flash. */
.wn-experience-beta .wn-page-motif.motif-beta i{border-radius:50%;border:1px solid rgba(121,126,246,.14);animation:wnBetaOpen 12s ease-in-out infinite}
.wn-experience-beta .wn-page-motif.motif-beta i:nth-child(1){width:310px;height:310px;inset-inline-end:-80px;top:64px}
.wn-experience-beta .wn-page-motif.motif-beta i:nth-child(2){width:210px;height:210px;inset-inline-end:-30px;top:114px;animation-delay:-3s;border-color:rgba(45,212,191,.14)}
.wn-experience-beta .wn-page-motif.motif-beta i:nth-child(3){width:110px;height:110px;inset-inline-end:20px;top:164px;animation-delay:-6s;border-color:rgba(234,191,75,.19)}
.wn-experience-beta .wn-page-motif.motif-beta:after{content:"";position:absolute;inset-inline-end:9%;top:12%;width:120px;height:1px;background:linear-gradient(90deg,transparent,rgba(121,126,246,.34));animation:wnWritingStroke 8.5s ease-in-out infinite}

@keyframes wnDemoResolve{0%,100%{transform:scaleX(.18);opacity:.22}42%{transform:scaleX(.58);opacity:.56}68%{transform:scaleX(1);opacity:.78}}
@keyframes wnDemoMark{0%,36%,100%{transform:scale(.7);opacity:.3}48%,62%{transform:scale(1.08);opacity:.92}}
@keyframes wnDemoResolveDot{0%,50%,100%{transform:scale(.68);opacity:.2}70%,84%{transform:scale(1.12);opacity:.9}}
@keyframes wnBetaOpen{0%,100%{transform:scale(.92);opacity:.22}50%{transform:scale(1.04);opacity:.68}}

@media(max-width:760px){
  .wn-experience-demo .wn-page-motif.motif-demo:before{inset-inline-end:-35px;top:9%;width:230px}
  .wn-experience-demo .wn-page-motif.motif-demo:after{font-size:78px;bottom:2%}
  .wn-experience-beta .wn-page-motif.motif-beta i:nth-child(1){width:230px;height:230px;inset-inline-end:-120px;top:70px}
  .wn-experience-beta .wn-page-motif.motif-beta i:nth-child(2){width:150px;height:150px;inset-inline-end:-80px;top:110px}
  .wn-experience-beta .wn-page-motif.motif-beta i:nth-child(3){display:none}
}

@media(prefers-reduced-motion:reduce){
  .wn-experience-demo .wn-page-motif.motif-demo:before,
  .wn-experience-demo .wn-page-motif.motif-demo:after,
  .wn-experience-demo .wn-page-motif.motif-demo i,
  .wn-experience-beta .wn-page-motif.motif-beta:after,
  .wn-experience-beta .wn-page-motif.motif-beta i{animation:none!important;transform:none!important}
}