/* Each illustration is a short, replayable scene. Navigation is a separate link. */
.links-page .digital-card .digital-image{aspect-ratio:3/2;width:100%;padding:0;margin:0;appearance:none;border:1px solid #d6b57724;border-radius:24px;cursor:pointer;container-type:inline-size;isolation:isolate;touch-action:pan-y;color:#f5f1e9;text-align:left;font:inherit}
.links-page .digital-image img,.links-page .digital-image:hover img{filter:none;transition:none}
.scene{position:absolute;inset:0;overflow:hidden;display:block;pointer-events:none}
.scene-base{position:absolute;inset:0}
.scene-native{background:radial-gradient(ellipse at 77% 39%,#48402c66,transparent 56%),linear-gradient(140deg,#1b1c18,#10110e 65%);font-family:Arial,sans-serif}
.scene-native::after{content:'';position:absolute;left:6%;right:6%;bottom:13%;height:1px;background:linear-gradient(90deg,#d6b57765,transparent)}
.scene-eyebrow{position:absolute;top:12%;left:7%;font-size:1.45cqw;letter-spacing:.23em;color:#d6b577}
.scene-copy{position:absolute;top:31%;left:7%;width:40%;display:flex;flex-direction:column;gap:2.6cqw}
.scene-title{font:400 5.8cqw/1.12 Georgia,serif;letter-spacing:-.035em;color:#f1e5cc}
.scene-subtitle{font:1.6cqw/1.7 Arial,sans-serif;color:#c5bfaf;max-width:28cqw}
.scene-caption{position:absolute;left:7%;bottom:7%;font-size:1.2cqw;color:#bc9f68;letter-spacing:.18em}
.scene-dashboard{position:absolute;top:23%;left:48%;width:46%;height:54%;padding:3.3%;display:flex;flex-direction:column;gap:1.7cqw;background:linear-gradient(150deg,#2b2b24,#151714);border:1px solid #d6b5774d;border-radius:1.7cqw;box-shadow:0 3cqw 5cqw #0008;transform:perspective(900px) rotateY(-7deg) rotateZ(-2deg)}
.dashboard-top{display:flex;justify-content:space-between;align-items:center;font:1.3cqw/1.4 Arial;color:#e2d4b6}
.demo-chip{font-size:.9cqw;letter-spacing:.08em;border:1px solid #d6b57745;border-radius:30px;padding:.35em .6em;color:#c2ab80}
.dashboard-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3cqw}
.dashboard-kpi{display:flex;flex-direction:column;gap:.55cqw;font-size:1.05cqw;color:#aca99d}
.dashboard-kpi strong{font-size:1.9cqw;font-weight:500;color:#f2dfb7;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.chart{flex:1;min-height:0;display:flex;gap:3cqw;align-items:flex-end;padding:0 2cqw 1.6cqw;border-bottom:1px solid #d6b57740;background:repeating-linear-gradient(to top,transparent 0,transparent calc(33.333% - 1px),#d6b57712 33.333%)}
.chart-column{height:100%;flex:1;display:flex;align-items:flex-end;position:relative}
.chart-bar{display:block;width:100%;height:var(--height);transform-origin:bottom;background:linear-gradient(0deg,#806333,#f0d8a0);border-radius:.5cqw .5cqw 0 0;box-shadow:0 0 2cqw #d6b57712}
.chart-column:nth-child(2) .chart-bar{background:linear-gradient(0deg,#494a3b,#a5a589)}
.chart-column:nth-child(3) .chart-bar{background:linear-gradient(0deg,#5d5038,#c9ad77)}
.chart-column small{position:absolute;left:50%;bottom:-1.5cqw;transform:translateX(-50%);font-size:.9cqw;color:#aaa99c;white-space:nowrap}
.is-playing .chart-bar{animation:chart-fill 1.7s cubic-bezier(.18,.65,.3,1) both;animation-delay:var(--delay,0ms)}
.scene-erp .scene-copy{top:30%}.scene-erp .scene-title{font-size:5.3cqw}
.scene-erp .scene-dashboard{top:22%;height:56%;transform:perspective(900px) rotateY(-6deg) rotateZ(2deg)}
.erp-chart{position:relative;flex:1;min-height:0;background:repeating-linear-gradient(to top,transparent 0,transparent calc(33.333% - 1px),#d6b57718 33.333%)}
.erp-chart svg{display:block;width:100%;height:100%;overflow:visible}
.erp-area{fill:#d6b57714;transform-origin:bottom}
.erp-line{fill:none;stroke:#e4c889;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.is-playing .erp-line{animation:trace-line 1.8s cubic-bezier(.2,.6,.3,1) both}
.is-playing .erp-area{animation:chart-fill 1.8s ease both}
.erp-months{display:flex;justify-content:space-between;font-size:.85cqw;color:#aba798}
.scene-chat{position:absolute;left:51%;top:16%;width:39%;height:64%;padding:3%;border:1px solid #d6b57750;border-radius:2cqw;background:linear-gradient(145deg,#292b24,#141711);box-shadow:0 3cqw 5cqw #0007;transform:rotate(-3deg);display:flex;flex-direction:column;gap:2cqw}
.chat-header{display:flex;gap:1.3cqw;align-items:center;padding-bottom:1.8cqw;border-bottom:1px solid #d6b57726;font-size:1.6cqw;color:#e3d7bf}
.chat-avatar{display:grid;place-items:center;width:4.1cqw;aspect-ratio:1;border-radius:50%;background:#d6b577;color:#25251c;font:2cqw Georgia,serif}
.chat-online{display:block;margin-top:.3cqw;font-size:1cqw;color:#99aa8e}
.scene-chat .chat-bubble{animation:none;font-size:1.4cqw;line-height:1.5;background:#32382b;color:#e0e3d6;padding:1.3cqw 1.6cqw;border:1px solid #aeb3961c;border-radius:1.4cqw 1.4cqw 1.4cqw .2cqw;align-self:flex-start}
.chat-bubble.outgoing{align-self:flex-end;background:#c2a570;color:#201f18;border-radius:1.4cqw 1.4cqw .2cqw 1.4cqw}
.chat-bubble small{font-size:.8cqw;display:block;opacity:.6;margin-top:.3cqw;text-align:right}
.chat-typing{display:flex;gap:.5cqw;align-items:center;opacity:0;padding:.5cqw}
.chat-typing i{width:.65cqw;height:.65cqw;background:#d6b577;border-radius:50%}
.is-playing .chat-bubble{animation:message-in .5s both;animation-delay:var(--delay)}
.is-playing .chat-typing{animation:typing-show 1.6s both}
.is-playing .chat-typing i{animation:typing-dot .5s ease-in-out 3 alternate;animation-delay:var(--delay)}
.bottle-layer{position:absolute;left:42%;top:9%;width:50%;aspect-ratio:1;transform-origin:50% 92%;filter:drop-shadow(1cqw 1.8cqw 1.4cqw #0005)}
.bottle-glint{position:absolute;inset:0;mask:url('/moheeb-bottle.png') center/contain no-repeat;background:linear-gradient(110deg,transparent 40%,#fff7 49%,transparent 58%);background-size:400% 100%;background-position:100% 0;opacity:0}
.is-playing .bottle-layer{animation:bottle-sway 2.8s ease-in-out both}
.is-playing .bottle-glint{animation:bottle-light 2.8s ease-in-out both}
.scissors{position:absolute;left:45%;top:57%;width:30%;aspect-ratio:1;transform:rotate(-66deg) scaleY(.78);filter:drop-shadow(.6cqw 1.2cqw .8cqw #0009)}
.scissors .scissor-arm{position:absolute;inset:0;transform-origin:50% 46.6%}
.scissor-a{clip-path:polygon(0 0,50% 0,50% 45%,100% 73%,100% 100%,50% 100%,50% 56%,0 27%)}
.scissor-b{clip-path:polygon(50% 0,100% 0,100% 28%,50% 56%,50% 100%,0 100%,0 72%,50% 45%)}
.scissor-hinge{clip-path:circle(3.1% at 50% 46.6%)}
.is-playing .scissor-a{animation:snip-a .64s ease-in-out 3}
.is-playing .scissor-b{animation:snip-b .64s ease-in-out 3}
.receipt{position:absolute;right:7.9%;top:68%;width:9%;height:15%;padding:1% .8%;transform:rotate(4deg) skewX(-8deg);transform-origin:top;background:#ece6d6;box-shadow:0 .4cqw .8cqw #0007;clip-path:polygon(0 0,100% 0,100% 96%,90% 100%,80% 96%,70% 100%,60% 96%,50% 100%,40% 96%,30% 100%,20% 96%,10% 100%,0 96%)}
.receipt b{display:block;text-align:center;font:bold .7cqw Arial;color:#4c483d;margin-bottom:.65cqw}
.receipt i{display:block;height:1px;background:#8b8270;margin:.55cqw 0}.receipt i:last-child{margin-top:1cqw;background:#4c483d}
.is-playing .receipt{animation:receipt-feed 1.8s ease-in-out both;animation-delay:.25s}
.water-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 74%,70% 74%,70% 22%,0 22%)}
.is-playing .water-canvas{opacity:1}
@keyframes chart-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes trace-line{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes message-in{from{opacity:0;transform:translateY(1.8cqw) scale(.94)}to{opacity:1;transform:none}}
@keyframes typing-show{0%,85%{opacity:1}100%{opacity:0}}
@keyframes typing-dot{from{transform:translateY(0);opacity:.4}to{transform:translateY(-.5cqw);opacity:1}}
@keyframes bottle-sway{0%,100%{transform:none}24%{transform:translateY(-.5cqw) rotate(-2deg)}60%{transform:translateY(-.25cqw) rotate(1.6deg)}82%{transform:rotate(-.5deg)}}
@keyframes bottle-light{0%,100%{opacity:0;background-position:100% 0}30%{opacity:.4}75%{opacity:.18;background-position:0 0}}
@keyframes snip-a{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
@keyframes snip-b{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@keyframes receipt-feed{0%{clip-path:inset(0 0 100%)}100%{clip-path:inset(0)}}
@media(max-width:760px){.links-page .digital-card .digital-image{border-radius:18px}}
@media(prefers-reduced-motion:reduce){.project-interactive *{animation:none!important;transition:none!important}.water-canvas,.bottle-glint{display:none}}

/* The same physical bottle model as the Moheeb website, fitted to a card. */
.moheeb-card-stage{position:absolute;inset:0;display:block;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#38312688,transparent 61%),#10100f;pointer-events:none}
.moheeb-card-stage #product3d{position:absolute;inset:0;z-index:2}
.moheeb-card-stage canvas{display:block;width:100%;height:100%}
.links-page .digital-image .moheeb-card-fallback{position:absolute;inset:5% 0;width:100%;height:90%;object-fit:contain;z-index:2}
.links-page .moheeb-card-stage.has-3d .moheeb-card-fallback{display:none}
.moheeb-card-word{position:absolute;top:30%;left:0;width:100%;text-align:center;font:15cqw/.9 Georgia,serif;letter-spacing:-.07em;color:#d6b57713}
.moheeb-card-floor{position:absolute;bottom:10%;left:15%;width:70%;height:1px;background:linear-gradient(90deg,transparent,#d6b57744,transparent)}
.moheeb-card-mark{position:absolute;bottom:5%;left:5%;color:#d0b57b;font:1.25cqw/1.5 Arial,sans-serif;letter-spacing:.18em;z-index:3}

/* Keep one rendered bottle across loading, idle and GPU recovery. */
#product3d .bottle-webgl,#product3d .bottle-still{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.has-3d #product3d .bottle-webgl{opacity:1}
.has-3d.model-lost #product3d .bottle-webgl{opacity:0}
.has-3d.model-lost #product3d .bottle-still{opacity:1}
.model-loading .fallback-bottle,.model-loading .moheeb-card-fallback{visibility:hidden}

/* Mullak: the residential and retail spaces light up during a short tour. */
.scene-mullak{--mullak-art:url('/mullak-property-scene.webp');background:#0b0b0a;font-family:Arial,Tahoma,sans-serif}
.scene-mullak .scene-copy{top:33%;gap:2.3cqw;width:35%}
.scene-mullak .scene-title{font-size:7.4cqw;line-height:1;letter-spacing:-.025em}
.scene-mullak .scene-subtitle{font-size:1.9cqw;line-height:1.7;max-width:29cqw}
.scene-mullak .scene-subtitle[dir=rtl]{font-family:Tahoma,Arial,sans-serif;text-align:left}
.mullak-window-light{position:absolute;inset:0;background-image:var(--mullak-art);background-position:center;background-size:100% 100%;background-repeat:no-repeat;filter:brightness(var(--light-gain,2.15)) saturate(1.06);opacity:0}
.is-playing .mullak-window-light{animation:mullak-window-light 1.25s cubic-bezier(.25,.6,.35,1) both;animation-delay:var(--delay)}
@keyframes mullak-window-light{0%,100%{opacity:0}35%,60%{opacity:.78}}
@media(prefers-reduced-motion:reduce){.is-playing .mullak-window-light{animation:none;opacity:0}}