/* Full-bleed interfaces: no caption strip below the moving artwork. */
.collage .case-label{display:none}
.collage .case-scene,.collage .case-cover .case-scene{inset:0}
.collage .case-tile{border-radius:3px}
.collage .motion-surface{--glow:#e77a60;position:relative;isolation:isolate}
.collage .case-scene video{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.collage .film-shield{background:#211820}.collage .film-shield video{object-position:82% center}
.collage .film-green{background:radial-gradient(ellipse at center,#234c3d,#102b24);--glow:#b5eb78}
.film-crop{display:block;position:relative;width:94%;aspect-ratio:984/570;overflow:hidden;border-radius:3px;box-shadow:0 6px 18px #0003}
.collage .film-green .film-crop video{position:absolute;left:-14.94%;top:-28.95%;width:130.08%;height:140.35%;max-width:none;object-fit:fill;transform:none}
.collage .case-phone .case-scene{padding:5%}
.collage .case-device{height:92%;max-width:80%;border-radius:12px;box-shadow:0 10px 22px #071c2c36}
.collage .case-rawaf{background:radial-gradient(ellipse at 40% 50%,#f5eddc,#d9cebb)}
.collage .case-daakesh.case-phone{background:radial-gradient(ellipse at 55% 45%,#164354,#071b28 78%)}
.collage .case-daakesh.case-phone .case-device{box-shadow:0 0 0 1px #65e9da70,0 0 20px #22c6b72b,0 12px 16px #0004}
.collage .case-tour{background:radial-gradient(ellipse at 45% 40%,#faf9f6,#e9e6e1)}
.motion-pan{width:100%;height:100%;display:block;animation:interface-pan 9s ease-in-out infinite alternate paused}
.motion-scroll{display:block;width:100%;height:100%;animation:interface-scroll 8s cubic-bezier(.45,0,.3,1) infinite alternate paused}
.collage .motion-scroll img{height:auto;min-height:100%;object-fit:cover;object-position:top}
.motion-edge{position:absolute;inset:1px;z-index:5;border-radius:3px;pointer-events:none;border:1px solid color-mix(in srgb,var(--glow),transparent 65%);box-shadow:inset 0 0 12px color-mix(in srgb,var(--glow),transparent 87%);opacity:.5;animation:interface-glow 5.5s ease-in-out infinite alternate paused}
.motion-edge::after{content:'';position:absolute;width:26%;height:2px;left:8%;top:-1px;background:var(--glow);box-shadow:0 0 8px var(--glow);opacity:.75}
.interface-dashboard{background:#f3f0eb;padding:3.5%;display:grid;place-items:center}
.interface-dashboard.dark-map{background:#211f1d;padding:0;--glow:#e77a60}
.interface-dashboard svg{display:block;width:100%;height:100%;overflow:hidden;filter:none!important}
.dashboard-frame{display:block;width:100%;height:100%;border-radius:4px;overflow:hidden;box-shadow:0 5px 20px #0b242a1a}
.motion-trace{stroke-dasharray:1000;stroke-dashoffset:0;animation:interface-trace 6.8s ease-in-out -4s infinite paused}
.motion-bar{transform-box:fill-box;transform-origin:center bottom;animation:interface-bar 4.5s ease-in-out infinite alternate paused}
.motion-bar:nth-child(2n){animation-delay:-1.7s}.motion-bar:nth-child(3n){animation-delay:-3s}
.motion-node{transform-box:fill-box;transform-origin:center;animation:interface-node 3.5s ease-in-out infinite alternate paused}
.motion-node:nth-child(2n){animation-delay:-1.5s}
.motion-route{stroke-dasharray:6 12;animation:interface-route 4s linear infinite paused}
.collage .metric-surface{display:flex;flex-direction:column;justify-content:center;gap:8%;padding:13%;background:#292624;color:#f4f0eb;--glow:#e77a60;text-align:left;direction:ltr}
.collage .metric-surface>*{position:relative;z-index:1}
.collage .metric-surface>.motion-edge{position:absolute;z-index:5}
.collage .metric-surface .metric-label{font:500 1.15cqw/1 Arial,sans-serif;letter-spacing:.05em;color:#c6bbb2}
.collage .metric-surface .metric-value{font:500 5.1cqw/.95 Arial,sans-serif;letter-spacing:-.055em;color:inherit}
.collage .metric-value small{font:400 1.8cqw/1 Arial,sans-serif;letter-spacing:0}
.mini-bars{display:flex;align-items:flex-end;gap:5%;height:25%;width:100%}
.mini-bars i{display:block;width:12.5%;height:var(--bar);background:#e77a60;border-radius:1px;transform-origin:center bottom;animation:interface-bar 4.5s ease-in-out infinite alternate paused}
.mini-bars i:nth-child(2n){animation-delay:-1.8s}
.collage .metric-surface.metric-flow{background:#f3f0e8;color:#222b2b;padding:11%;--glow:#ef7253}
.collage .metric-flow .metric-label{color:#786f68}
.metric-flow svg{width:100%;height:32%;display:block;overflow:visible}
.collage .motion-surface .case-device,.collage .motion-surface .sequence-next{animation-play-state:paused}
.collage .motion-surface:not([data-motion-active=true]) *{animation-play-state:paused!important}
.collage .motion-surface[data-motion-active=true] :is(.motion-pan,.motion-scroll,.motion-edge,.motion-trace,.motion-bar,.motion-node,.motion-route,.mini-bars i,.case-device,.sequence-next){animation-play-state:running}
@keyframes interface-pan{from{transform:scale(1.02) translateX(-1%)}to{transform:scale(1.13) translateX(2%)}}
@keyframes interface-scroll{0%,20%{transform:translateY(0)}80%,100%{transform:translateY(-18%)}}
@keyframes interface-glow{from{opacity:.28}to{opacity:.8}}
@keyframes interface-trace{0%,12%{stroke-dashoffset:1000}55%,100%{stroke-dashoffset:0}}
@keyframes interface-bar{from{transform:scaleY(.64)}to{transform:scaleY(1)}}
@keyframes interface-node{from{opacity:.35;transform:scale(.9)}to{opacity:1;transform:scale(1.14)}}
@keyframes interface-route{to{stroke-dashoffset:-72}}
@media(max-width:700px){.collage .case-device{border-width:2px;border-radius:7px}.motion-edge{box-shadow:none}.collage .metric-surface .metric-label{font-size:1.3cqw}.collage .metric-surface .metric-value{font-size:5.2cqw}}
@media(prefers-reduced-motion:reduce){.collage .motion-surface *{animation:none!important;transition:none!important}.motion-trace{stroke-dashoffset:0}.motion-edge{opacity:.45}}