@font-face{font-family:Tajawal;src:url('../fonts/tajawal-arabic-400-normal.woff2')}@font-face{font-family:Tajawal;src:url('../fonts/tajawal-arabic-700-normal.woff2');font-weight:700}:root{--plum:#352544;--lav:#c9b6e0;--accent:#eabf9d;--wash:#f7ebe1;--header:83px;--control:92px;scroll-behavior:smooth;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:#fcf9fc;color:var(--plum);font:18px/1.8 Tajawal,Arial,sans-serif}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer;border:1px solid #d6c7df;border-radius:30px;background:white;padding:10px 20px;min-height:44px}button:hover{background:#eee5f5}button:active{transform:scale(.98)}:focus-visible{outline:3px solid #84609f;outline-offset:4px}header{height:var(--header);position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:10px 5%;background:#fcf9fcf5;border-bottom:1px solid #ece4ef;gap:12px}header>div{display:flex;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:13px;font:19px Georgia;letter-spacing:3px}.brand img{object-fit:contain}.brand small{font:12px Tajawal;display:block;letter-spacing:0;margin-top:4px}.back{font-size:15px}header button{font-size:13px}.intro{padding:85px 8% 65px;display:grid;grid-template-columns:1.5fr 1fr;align-items:center;min-height:73svh;background:radial-gradient(ellipse at 15% 30%,#eadcf2,transparent 62%)}.eyebrow{font-size:12px;letter-spacing:1.5px;color:#7b608c}.intro h1{font-size:clamp(40px,5.8vw,78px);line-height:1.35;margin:18px 0;font-weight:700}.intro em{font-style:normal;color:#9470ad}.intro p{max-width:500px;color:#706078}.start{display:inline-flex;gap:30px;align-items:center;padding:10px 0;border-bottom:1px solid #a17bb8;font-weight:700}.intro-mark{position:relative;display:grid;place-items:center;min-height:260px}.intro-mark img{width:85px;opacity:.8}.intro-mark span{position:absolute;width:250px;height:250px;border:1px solid #c3acd2;border-radius:50%;animation:orbit 25s linear infinite}.intro-mark span:before{content:'';position:absolute;top:22px;left:32px;width:13px;height:13px;background:#c5a456;border-radius:50%}#journey{scroll-margin-top:var(--header);background:linear-gradient(110deg,#fcf9fc,var(--wash));transition:background .5s}.controls{position:sticky;top:var(--header);z-index:20;background:#fcf9fcf5;border-block:1px solid #e7deed;display:flex;align-items:center;justify-content:space-between;padding:16px 8%;min-height:var(--control);gap:20px}.controls label{display:flex;align-items:center;gap:14px;font-size:15px}.controls select{background:white;border:1px solid #d7c8e2;border-radius:14px;padding:10px 18px;min-width:145px}.controls nav{display:flex;gap:8px}.controls button{font-size:15px}.controls button[aria-pressed=true]{background:#352544;color:#fff;border-color:#352544}.journey-layout{display:grid;grid-template-columns:1fr 1fr;max-width:1300px;margin:auto;padding-inline:6%;gap:50px}.visual{position:sticky;top:calc(var(--header) + var(--control));height:calc(100svh - var(--header) - var(--control));max-height:800px;min-height:380px;align-self:start;display:flex;align-items:center;justify-content:center;flex-direction:column;isolation:isolate}.aura{position:absolute;width:100%;aspect-ratio:1;max-width:460px;max-height:90%;background:radial-gradient(ellipse,var(--accent),transparent 67%);opacity:.22;z-index:-1;transition:background .6s}#bottle{height:65%;max-height:430px;width:auto;max-width:100%;overflow:visible;filter:drop-shadow(0 15px 13px #35254413);transition:transform .4s}#liquid{transition:transform .8s ease,fill .8s ease;transform:translateY(var(--liquid-shift,0px))}.bottle-caption{text-align:center}.bottle-caption strong{display:block;font-size:24px}.bottle-caption span{display:block;color:#755c86;font-size:15px}.bottle-caption small{display:block;font-size:11px;color:#726578;margin-top:8px}.chapter{min-height:85svh;display:flex;flex-direction:column;justify-content:center;scroll-margin-top:calc(var(--header) + var(--control) + 20px);padding:45px 0}.chapter-number{font:12px Arial;letter-spacing:2px;color:#92729c}.chapter h2{font-size:clamp(44px,6vw,74px);margin:13px 0;line-height:1.4}.chapter p{color:#6d5c79;max-width:390px;margin:0 0 23px}.chapter h3{font-size:16px;margin:0 0 9px}.notes{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 25px}.notes li{background:#ffffffb0;border:1px solid #d7c8df;border-radius:25px;padding:7px 17px;font-size:16px}.tip{font-size:14px;color:#75617e;border-right:2px solid #c1a2d3;padding-right:14px;max-width:380px}.progress{height:120px;width:3px;background:#dfd3e7;position:absolute;right:0;top:40%;overflow:hidden}.progress i{height:100%;width:100%;display:block;background:#9470ad;transform:scaleY(.333);transform-origin:top;transition:transform .4s}#dust{position:absolute;inset:0;overflow:hidden;pointer-events:none}#dust i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent);bottom:20%;left:var(--x);opacity:0;animation:rise 5s var(--delay) infinite ease-out}.explain{padding:75px 8%;display:grid;grid-template-columns:1.4fr 1fr;gap:50px;border-top:1px solid #e8dfee}.explain h2{font-size:34px;margin:15px 0}.explain p{color:#72617c}.explain button{background:#352544;color:#fff}.explain blockquote{margin:20px 0 0;padding:20px;background:#efe6f5;border-radius:17px;font-size:21px}.actual{display:flex;gap:20px;align-items:center;padding:25px;background:#f2ecf6;border-radius:25px}.actual img{width:120px;height:185px;object-fit:contain;mix-blend-mode:multiply}.actual strong,.actual a,.actual small{display:block}.actual strong{font-size:23px}.actual a{font-size:14px;text-decoration:underline;margin-top:10px}.actual small{font-size:11px;color:#776780;margin-top:10px}.story{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:55px;background:#352544;color:#fbf8fc;padding:85px 12%;min-height:85svh}.story .eyebrow{color:#c9b6e0}.story h2{font-size:clamp(38px,5vw,65px);line-height:1.4;margin:20px 0}.story p{max-width:420px;color:#ded0e8}.story a{border-bottom:1px solid #c9b6e0}.branch{width:100%;max-height:420px;overflow:visible}.stem{fill:none;stroke:#c9b6e0;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1100;stroke-dashoffset:0}.boll{fill:#fff}.story.grow .stem{animation:draw 2.3s ease both}.story.grow .boll{animation:appear 1.2s var(--delay) ease both}footer{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:26px 6%;font-size:13px;color:#756380}.skip{position:fixed;top:-100px;z-index:100;background:#fff;padding:10px}.skip:focus{top:5px}[hidden]{display:none!important}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes rise{20%{opacity:.6}to{transform:translate(20px,-300px);opacity:0}}@keyframes draw{from{stroke-dashoffset:1100}to{stroke-dashoffset:0}}@keyframes appear{from{opacity:0}to{opacity:1}}@media(max-width:850px){.controls{padding:12px 5%}.journey-layout{gap:20px;padding-inline:5%}.explain{gap:25px}.actual{flex-direction:column;text-align:center}}@media(max-width:600px){:root{--header:73px;--control:133px}.brand{font-size:15px;gap:8px}.brand img{width:25px;height:39px}header{padding:10px 4%}header>div{gap:9px}.back{font-size:13px}header button{padding:6px 10px;font-size:11px}.intro{grid-template-columns:1fr;padding:45px 7%;min-height:auto}.intro-mark{min-height:140px;grid-row:1;margin-bottom:20px}.intro-mark span{width:140px;height:140px}.intro-mark img{width:47px}.intro h1{font-size:43px}.intro p{font-size:17px}.controls{flex-direction:column;gap:9px;padding:10px 5%}.controls label{width:100%;justify-content:space-between}.controls select{flex:1;max-width:180px}.controls nav{width:100%}.controls button{flex:1;padding:7px 8px;font-size:13px}.journey-layout{display:block;padding:0}.visual{top:calc(var(--header) + var(--control));height:220px;min-height:0;max-height:none;background:linear-gradient(#fbf8fc,var(--wash));z-index:10;flex-direction:row;gap:24px;border-bottom:1px solid #e7dceb}#bottle{height:190px;max-width:130px}.bottle-caption{max-width:150px;text-align:right}.bottle-caption strong{font-size:24px}.bottle-caption span{font-size:13px}.bottle-caption small{font-size:10px}.progress{height:100px;right:5%}.aura{width:230px;max-height:200px}.chapter{padding:40px 7%;min-height:62svh;scroll-margin-top:calc(var(--header) + var(--control) + 228px)}.chapter h2{font-size:45px;margin:7px 0}.chapter p{font-size:16px;margin-bottom:17px}.chapter-number{font-size:10px}.notes li{padding:5px 13px;font-size:15px}.tip{font-size:13px}.explain,.story{grid-template-columns:1fr;padding:45px 7%;gap:30px}.explain h2{font-size:29px}.actual{flex-direction:row;text-align:right;padding:18px}.actual img{width:85px;height:140px}.branch{max-height:280px}.story{min-height:0}.story h2{font-size:42px}footer{font-size:12px}.bottle-caption small{max-width:130px}}
@media(max-height:700px) and (max-width:600px){.visual{height:155px}#bottle{height:145px}.chapter{scroll-margin-top:calc(var(--header) + var(--control) + 165px)}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}#dust{display:none}}html.paused{scroll-behavior:auto}html.paused *,html.paused *:before{animation:none!important;transition:none!important}html.paused #dust{display:none}

/* ScrollTrigger owns scroll position while pinned; smooth root scrolling corrupts refresh/hash measurements. */
html:has(.motion-story-active){scroll-behavior:auto}

/* Native-scroll fallback keeps the three readable stages in document flow. */
.motion-native-active #liquid{transition:none}
@media(max-width:600px){
.motion-native-active .visual{height:clamp(110px,24svh,190px);gap:16px}
.motion-native-active #bottle{height:calc(100% - 12px);max-width:100px}
.motion-native-active .bottle-caption strong{font-size:20px}
.motion-native-active .chapter{min-height:65svh}
}

@media(min-width:601px) and (max-height:620px){
.motion-native-active .visual{min-height:0;height:calc(100svh - var(--header) - var(--control));gap:4px}
.motion-native-active #bottle{height:55%;min-height:0}
.motion-native-active .bottle-caption strong{font-size:18px}
.motion-native-active .bottle-caption span{font-size:12px}
.motion-native-active .bottle-caption small{font-size:10px;margin-top:2px;line-height:1.3}
.motion-native-active .progress{height:70px;top:25%}
}

/* تجربة الجوال: خطوات باللمس، دون تثبيت متراكم أو تمرير إجباري. */
@media(max-width:900px),(pointer:coarse){
header{height:auto;min-height:73px;position:relative;flex-wrap:wrap}header>div{flex-wrap:wrap;gap:8px}
#journey{scroll-margin-top:12px;max-width:100%}.controls{position:relative;top:auto;min-height:0;flex-direction:column;padding:16px;gap:12px}.controls label{width:100%;justify-content:space-between;min-width:0}.controls select{min-width:0;max-width:65%;min-height:44px}.controls nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:7px}.controls button{min-width:0;min-height:48px;padding:8px 4px;font-size:14px}
.journey-layout{display:flex;flex-direction:column;gap:0;padding:0 16px}.visual{position:relative;top:auto;width:100%;height:230px;min-height:0;max-height:none;display:flex;flex-direction:row;gap:18px;padding:15px;background:transparent;border-bottom:1px solid #e7dceb}.visual #bottle{height:195px;width:108px;max-width:40%;flex-shrink:0}.bottle-caption{min-width:0;max-width:190px;text-align:right}.bottle-caption strong{font-size:22px;overflow-wrap:anywhere}.bottle-caption small{max-width:190px;font-size:11px}.progress{right:0;height:80px}.chapters{width:100%;min-width:0;min-height:370px}.chapter{min-height:0;padding:24px 8px 32px}.chapter p{max-width:none}.notes{gap:8px}.notes li{font-size:16px;white-space:normal;overflow-wrap:anywhere}.explain,.story{grid-template-columns:minmax(0,1fr);gap:25px;padding:35px 6%}.actual{min-width:0}.actual>div{min-width:0;overflow-wrap:anywhere}.motion-layer-map{max-width:100%;flex-wrap:wrap;justify-content:center}.intro{grid-template-columns:minmax(0,1fr)}
}