/* Welcome «القدرات»: one pinned scroll-driven scene (public/welcome-scene.js). Colours come from the shared tokens only.
   Static look (no JS / prefers-reduced-motion): a list of cards. .is-live (added by JS): pinned stage, slides animate in place. */
.wl-scene{--wl-pad:20px;--wl-on:var(--brand);margin:30px calc(-1 * var(--wl-pad)) 0;padding:0 var(--wl-pad);position:relative;color:var(--text)}
@media (max-width:389px){.wl-scene{--wl-pad:16px}}
[data-theme=dark] .wl-scene{--wl-on:var(--brand-bright)}
.wl-sh{display:flex;align-items:center;gap:12px;margin:0 2px 12px;position:relative}
.wl-sh h2{margin:0;margin-inline-end:auto;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--text3)}
.wl-ct,.wl-bar2,.wl-hint,.wl-dots,.wl-glow,.wl-ghost,.wl-no{display:none}
.wl-slides{display:flex;flex-direction:column;gap:14px}
.wl-sl{display:flex;flex-direction:column;gap:16px;padding:16px;border-radius:22px;background:var(--elevated);border:1px solid var(--stroke);box-shadow:var(--shadow-pill)}
.wl-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.wl-copy h3{margin:4px 0 0;font-size:19px;font-weight:780;line-height:1.3;color:var(--text)}
.wl-copy p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text2)}
.wl-ic{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:var(--brand);background:color-mix(in srgb,var(--brand-bright) 16%,transparent)}
[data-theme=dark] .wl-ic{color:var(--brand-bright);background:color-mix(in srgb,var(--brand-bright) 14%,transparent)}
.wl-ic svg{width:23px;height:23px}
/* Device frame: a phone below 840px, a browser window from 840px. The picture inside is the real UI at that width. */
/* theme-exempt: the device bezel is hardware-black in both themes */
.wl-dev{margin:0;align-self:center;position:relative;width:min(250px,74%);padding:7px;border-radius:34px;background:#0c0c0d;box-shadow:0 0 0 1px var(--stroke),0 26px 46px -22px color-mix(in srgb,var(--text) 55%,transparent)}
.wl-dev img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:27px;background:var(--chrome);backface-visibility:hidden}
.wl-dev picture{display:block;overflow:hidden;border-radius:27px}
/* Phone screen: the shot sits fully inside a padded screen area (no crop behind the bezel / notch), rounded corners kept. */
/* theme-exempt: the phone screen colour matches the captured light UI in both themes */
@media (max-width:839px){
  .wl-dev picture{padding:9px 8px;background:#f7f7f8;box-sizing:border-box}
  .wl-dev img{object-fit:contain;object-position:center;border-radius:19px;background:#f7f7f8}
  .is-live .wl-dev img{transform:none}
}
@media (min-width:840px){
  .wl-dev{width:min(100%,640px);padding:30px 0 0;border-radius:16px}
  .wl-dev::before{content:"";position:absolute;inset-block-start:10px;inset-inline-start:14px;width:46px;height:9px;background:radial-gradient(circle,var(--text3) 3.5px,transparent 4px) 0 50%/16px 9px repeat-x;opacity:.7}
  .wl-dev img{aspect-ratio:1440/900;border-radius:0 0 16px 16px}
  .wl-dev picture{border-radius:0 0 16px 16px}
  .wl-sl{flex-direction:row;align-items:center;gap:32px;padding:22px 26px}
  .wl-copy{flex:0 0 34%}
}

/* ---- live: pinned stage ---- */
.wl-scene.is-live{margin-top:10px}
.is-live .wl-track{height:calc(var(--sh,100dvh) + (var(--n) - 1) * var(--step,70dvh))}
.is-live .wl-stage{position:sticky;top:0;height:var(--sh,100dvh);overflow:hidden;contain:layout paint;background:var(--chrome)}
.is-live .wl-sh{position:absolute;inset-inline:calc(var(--wl-pad) + 2px);top:calc(var(--st,0px) + 18px);z-index:3;margin:0}
.is-live .wl-sh h2{color:var(--text2)}
.is-live .wl-ct{display:inline-block;font-size:13px;font-weight:700;color:var(--text3);font-variant-numeric:tabular-nums}
.is-live .wl-ct b{color:var(--text)}
.is-live .wl-bar2{display:block;position:absolute;inset-inline:0;bottom:-10px;height:2px;border-radius:2px;background:var(--stroke);overflow:hidden}
.is-live .wl-bar2 i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-bright),var(--brand));transform:scaleX(0);transform-origin:100% 50%;will-change:transform}
.is-live[dir=ltr] .wl-bar2 i{transform-origin:0 50%}
.is-live .wl-glow{display:block;position:absolute;inset:0;pointer-events:none;z-index:0}
.is-live .wl-glow i{position:absolute;width:86vmax;height:86vmax;border-radius:50%;will-change:transform;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand-bright) 20%,transparent),transparent 70%)}
.is-live .wl-glow i:first-child{inset-block-start:-46vmax;inset-inline-start:-30vmax}
.is-live .wl-glow i:last-child{inset-block-end:-50vmax;inset-inline-end:-34vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 16%,transparent),transparent 70%)}
.is-live .wl-slides{position:absolute;inset:0;display:block;z-index:1}
.is-live .wl-sl{position:absolute;inset:0;visibility:hidden;perspective:1100px;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3svh,28px);padding:calc(var(--st,0px) + 66px) 22px 78px;border:0;border-radius:0;background:none;box-shadow:none}
.is-live .wl-sl:first-child{visibility:visible}
.is-live .wl-copy{position:relative;z-index:2;width:min(520px,100%);flex:none;align-items:flex-start;text-align:start}
.is-live .wl-copy h3{font-size:clamp(22px,6.4vw,30px);letter-spacing:-.005em}
.is-live .wl-copy p{font-size:clamp(14.5px,3.9vw,17px);max-width:34em}
.is-live .wl-no{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--brand);font-variant-numeric:tabular-nums}
[data-theme=dark] .is-live .wl-no{color:var(--brand-bright)}
.is-live .wl-ghost{display:block;position:absolute;inset-inline-start:2vw;top:50%;margin-top:-.55em;font-size:clamp(170px,46vw,380px);line-height:1;font-weight:800;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--brand) 22%,transparent);opacity:.55;pointer-events:none;user-select:none;direction:ltr}
.is-live .wl-dev{position:relative;z-index:2;width:auto;transform-origin:50% 60%}
.is-live .wl-dev img{width:auto;max-width:78vw;height:clamp(200px,calc(var(--sh,100dvh) - 350px),calc(var(--sh,100dvh) * .52));transform:scale(1.06)}
.is-live .wl-dots{display:flex;position:absolute;z-index:3;inset-inline:0;bottom:calc(var(--sb,0px) + 14px);justify-content:center;gap:0;padding-inline:10px}
/* theme-exempt: the scene dots are small pager dots, not buttons */
.wl-dot{position:relative;width:22px;min-width:0;height:22px;padding:0;border:0;background:none;cursor:pointer}
.wl-dot i{position:absolute;inset:50% auto auto 50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--text3);opacity:.5;transition:transform .25s,opacity .25s,background-color .25s;pointer-events:none}
.wl-dot.on i{transform:scale(1.7);opacity:1;background:var(--wl-on)}
.wl-dot:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:50%}
.is-live .wl-hint{display:block;position:absolute;z-index:3;inset-inline:0;bottom:calc(var(--sb,0px) + 44px);text-align:center;font-size:12px;font-weight:600;color:var(--text3);transition:opacity .3s;pointer-events:none}
.is-live .wl-hint::after{content:"";display:block;width:8px;height:8px;margin:6px auto 0;border-inline-end:2px solid var(--text3);border-block-end:2px solid var(--text3);transform:rotate(45deg);animation:wl-nudge 1.6s ease-in-out infinite}
@keyframes wl-nudge{0%,100%{transform:translateY(0) rotate(45deg);opacity:.4}50%{transform:translateY(5px) rotate(45deg);opacity:1}}
@media (min-width:840px){
  .is-live .wl-sl{flex-direction:row;justify-content:center;align-items:center;gap:clamp(28px,5vw,84px);padding:calc(var(--st,0px) + 84px) 96px 70px}
  .is-live .wl-copy{flex:0 0 min(380px,32vw);width:auto}
  .is-live .wl-copy h3{font-size:clamp(28px,2.6vw,40px)}
  .is-live .wl-copy p{font-size:clamp(16px,1.25vw,19px)}
  .is-live .wl-dev{width:auto;padding:30px 0 0}
  .is-live .wl-dev img{max-width:none;width:min(58vw,calc((var(--sh,100dvh) - 230px) * 1.6));height:auto;aspect-ratio:1440/900}
  .is-live .wl-ghost{inset-inline-start:auto;inset-inline-end:4vw;font-size:clamp(260px,26vw,460px)}
  .is-live .wl-dots{inset-inline:auto 28px;padding-inline:0;inset-block:50% auto;bottom:auto;flex-direction:column;transform:translateY(-50%)}
  .is-live .wl-hint{bottom:calc(var(--sb,0px) + 22px)}
}
@media (prefers-reduced-motion:reduce){.wl-hint::after{animation:none}}