/* Riwaq Obaid — "The Riwaq": a scroll-driven 3D walk through a golden colonnade. */
#film{position:relative;height:640vh;margin:0 calc(50% - 50vw) 24px;--exit:#f8eed8}
html[data-theme="dark"] #film{--exit:#34302a}
@media(max-width:700px){#film{height:580vh}}
body.paused #film,.film-off #film{display:none}
@media(prefers-reduced-motion:reduce){#film{display:none}}

#film .film-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;
 background:radial-gradient(ellipse at 50% 44%,#541a27 0%,#240b13 52%,#08030a 100%);color:#f3dca2;touch-action:none}
#film .film-cam,#film .film-world{position:absolute;inset:0;transform-style:preserve-3d}
#film .film-world{will-change:transform}

#film .film-gl{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 3D books */
#film .f-book{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;visibility:hidden}
#film .f-book>b{position:absolute;left:0;top:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#film .f-front{width:var(--bw);height:var(--bh);margin:calc(var(--bh)*-.5) 0 0 calc(var(--bw)*-.5);transform:translateZ(calc(var(--bd)*.5));overflow:hidden;border-radius:2px 5px 5px 2px;box-shadow:0 0 70px 6px #e2c47f55}
#film .f-back{width:var(--bw);height:var(--bh);margin:calc(var(--bh)*-.5) 0 0 calc(var(--bw)*-.5);transform:rotateY(180deg) translateZ(calc(var(--bd)*.5));background:linear-gradient(80deg,#5a1626,#2a0a12);border-radius:2px 5px 5px 2px}
#film .f-spine{width:var(--bd);height:var(--bh);margin:calc(var(--bh)*-.5) 0 0 calc(var(--bd)*-.5);transform:rotateY(90deg) translateZ(calc(var(--bw)*.5));background:linear-gradient(90deg,#8a2a3c,#4b111b 55%,#6a1d2a);box-shadow:inset 0 0 0 1px #d9b25f66}
#film .f-pages{width:var(--bd);height:var(--bh);margin:calc(var(--bh)*-.5) 0 0 calc(var(--bd)*-.5);transform:rotateY(-90deg) translateZ(calc(var(--bw)*.5));background:repeating-linear-gradient(90deg,#f6ebcd 0 2px,#d6c094 2px 3px)}
#film .f-top,#film .f-bot{width:var(--bw);height:var(--bd);margin:calc(var(--bd)*-.5) 0 0 calc(var(--bw)*-.5);background:repeating-linear-gradient(0deg,#f6ebcd 0 2px,#d6c094 2px 3px)}
#film .f-top{transform:rotateX(90deg) translateZ(calc(var(--bh)*.5))}
#film .f-bot{transform:rotateX(-90deg) translateZ(calc(var(--bh)*.5))}

/* overlays */
#film .film-title{position:absolute;left:0;right:0;top:34%;text-align:center;pointer-events:none;will-change:opacity,transform;padding:0 18px}
#film .film-title small{display:block;font-size:clamp(.95rem,2.4vw,1.25rem);letter-spacing:.06em;color:#e2c47fcc}
#film .film-title h2{margin:-.25em 0 -.2em;padding:.45em .15em .5em;overflow:visible;font-size:clamp(3rem,13vw,7rem);line-height:1.5;font-weight:700;color:#f6e2ab;
 background:linear-gradient(180deg,#fff3cc,#e2b95a 55%,#b88a37);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 24px #e2b95a66)}
#film .film-title p{margin:0;font-size:clamp(1.05rem,3vw,1.5rem);color:#f3dca2}
#film .film-arrow{display:block;width:16px;height:16px;margin:26px auto 0;border-right:3px solid #e2c47f;border-bottom:3px solid #e2c47f;transform:rotate(45deg);animation:f-arrow 1.6s ease-in-out infinite}
@keyframes f-arrow{0%,100%{translate:0 0;opacity:.5}50%{translate:0 10px;opacity:1}}

#film .film-cap{position:absolute;left:50%;bottom:max(34px,env(safe-area-inset-bottom,0px) + 20px);width:min(92vw,520px);transform:translateX(-50%);text-align:center;opacity:0;pointer-events:none;
 padding:16px 20px 18px;border-radius:22px;background:linear-gradient(180deg,#2a0b1299,#12050ad9);border:1px solid #d9b25f88;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);will-change:opacity,transform}
#film .film-cap h3{margin:0;font-size:clamp(1.5rem,5.4vw,2.3rem);line-height:1.6;color:#f6e2ab}
#film .film-cap p{margin:2px 0 12px;color:#e2c47fcc;font-size:clamp(.95rem,2.8vw,1.1rem)}
#film .film-cap button{font:inherit;font-size:1.05rem;padding:9px 26px;border-radius:30px;border:1px solid #e2c47f;background:linear-gradient(180deg,#8a2a3c,#4b111b);color:#f6e2ab;cursor:pointer}
#film .film-cap.on{pointer-events:auto}

#film .film-dots{position:absolute;right:max(14px,env(safe-area-inset-right,0px) + 10px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;z-index:3}
#film .film-dots li{width:10px;height:10px;border-radius:50%;border:1.5px solid #e2c47f;background:transparent;cursor:pointer;transition:transform .3s,background .3s;position:relative}
#film .film-dots li::after{content:'';position:absolute;inset:-9px}
#film .film-dots li.on{background:#e2c47f;transform:scale(1.5)}
#film .film-skip{position:absolute;left:max(14px,env(safe-area-inset-left,0px) + 10px);bottom:max(18px,env(safe-area-inset-bottom,0px) + 10px);z-index:3;font:inherit;font-size:.95rem;color:#e2c47f;background:#1a070d99;border:1px solid #e2c47f88;border-radius:20px;padding:6px 14px;cursor:pointer;opacity:0;transition:opacity .4s}
#film .film-skip.on{opacity:1}
#film .film-exit{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,#fffaf0,var(--exit) 60%);opacity:0;pointer-events:none}

/* low-power mode: keep the walk, drop the extras */
.film-lite #film .f-front{box-shadow:none}

/* position:sticky needs <main> not to be a scroll container; clip keeps the same visual clipping */
body.library-mode main{overflow:visible}

/* while the film covers the screen, nothing behind it may keep animating */
body.film-front::before,body.film-front::after{visibility:hidden!important;animation-play-state:paused!important}
.film-lite #film .film-cap{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#1a070de8!important}
.film-lite #film .film-title h2{filter:none!important}
.film-lite #film .f-front{box-shadow:none!important}
.film-lite #film .f-back,.film-lite #film .f-top,.film-lite #film .f-bot{display:none}

/* The doors come first: the film fills the very top of the page and the header floats over it. */
html.film-ready:not(.film-off) body.library-mode:not(.paused) header{position:absolute;top:0;left:0;right:0;z-index:30;
 background:transparent!important;border-bottom:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 color:#f3dca2;transition:opacity .5s ease}
html.film-ready:not(.film-off) body.library-mode:not(.paused) header .brand,
html.film-ready:not(.film-off) body.library-mode:not(.paused) header .brand span{color:#f3dca2!important;text-shadow:0 2px 14px #000a}
html.film-ready:not(.film-off) body.library-mode:not(.paused) header nav{background:#1a070d88!important;border-color:#e2c47f88!important}
html.film-ready:not(.film-off) body.library-mode:not(.paused) header nav button:not([aria-pressed="true"]){color:#f3dca2!important}
body.film-front header{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){html.film-ready body.library-mode header{position:static!important}}

/* what the book offers, beside the book */
#film .film-feat{position:absolute;left:max(16px,4.5vw);top:44%;transform:translateY(-50%);width:calc(min(36vw,330px*var(--k,1)));z-index:2;pointer-events:none;direction:rtl;text-align:right}
#film .film-feat h4{margin:0 0 12px;padding-right:14px;font-size:calc(clamp(.85rem,2.6vw,1.1rem)*var(--k,1));font-weight:700;letter-spacing:.04em;color:#e2c47f;opacity:0;transform:translateX(-22px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
#film .film-feat ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(7px,1.5vh,15px)}
#film .film-feat li{display:flex;align-items:center;gap:12px;padding:7px 12px 7px 4px;border-right:2px solid #e2c47fcc;
 background:linear-gradient(270deg,#e2c47f1c,transparent);opacity:0;transform:translateX(-30px);transition:opacity .6s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
#film .film-feat li b{flex:none;min-width:2.1ch;text-align:center;font-size:calc(clamp(1.15rem,4.6vw,2rem)*var(--k,1));line-height:1.15;font-weight:700;color:#f6e2ab}
#film .film-feat li span{font-size:calc(clamp(.72rem,2.3vw,.98rem)*var(--k,1));line-height:1.5;color:#f3dcb4}
#film .film-feat.on h4,#film .film-feat.on li{opacity:1;transform:none}
#film .film-feat.on li:nth-child(1){transition-delay:.12s}#film .film-feat.on li:nth-child(2){transition-delay:.24s}
#film .film-feat.on li:nth-child(3){transition-delay:.36s}#film .film-feat.on li:nth-child(4){transition-delay:.48s}
#film .film-feat.on li:nth-child(5){transition-delay:.6s}
@media(max-width:700px){#film .film-feat{width:min(46vw,182px);left:6px;top:38%}#film .film-feat li{gap:7px;padding:5px 7px 5px 2px}#film .film-feat h4{padding-right:9px}}

#film .film-feat::before{content:'';position:absolute;inset:-26px -34px;z-index:-1;opacity:0;transition:opacity .7s ease;background:radial-gradient(ellipse at 55% 50%,#12050ad9 0%,#12050a99 45%,transparent 72%)}
#film .film-feat.on::before{opacity:1}

/* a faint star lattice and warm edge light, so the sides of a wide screen are never empty black */
#film .film-stick::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.16;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23e2c47f' stroke-width='1.1'%3E%3Cpath d='M60 6L78 42L114 60L78 78L60 114L42 78L6 60L42 42Z'/%3E%3Cpath d='M0 0H30L0 30ZM120 0H90L120 30ZM0 120H30L0 90ZM120 120H90L120 90Z'/%3E%3Ccircle cx='60' cy='60' r='9'/%3E%3C/g%3E%3C/svg%3E");
 background-size:120px 120px;
 -webkit-mask-image:radial-gradient(ellipse at 50% 46%,transparent 14%,#000 66%);mask-image:radial-gradient(ellipse at 50% 46%,transparent 14%,#000 66%)}
#film .film-stick::after{content:'';position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(ellipse at 0% 58%,#7a223155,transparent 50%),radial-gradient(ellipse at 100% 58%,#7a223155,transparent 50%)}
.film-mobile #film .film-stick::before,.film-slow #film .film-stick::before{display:none}

/* English reads left-to-right inside the right-to-left panel */
html[lang="en"] #film .film-feat li span,html[lang="en"] #film .film-feat h4{direction:ltr;text-align:left}
html[lang="en"] #film .film-feat h4{padding-right:0}
html[lang="en"] #film .film-cap{direction:ltr}