/* SenseCore 360 demo intro — a 7-second identity film for each system (demo websites only, never the live portals).
   Every scene rests in its final frame; motion only brings it in. Reduced motion shows the final frame at once. */
.sci{--a:#0d9488;--a2:#5eead4;--ink:#f3fffd;--mute:rgba(243,255,253,.78);--bg1:#03141b;--bg2:#0b4a44;--glass:rgba(255,255,255,.08);--line:rgba(255,255,255,.18);
  position:fixed;inset:0;z-index:2147483000;display:grid;overflow:hidden;color:var(--ink);font:16px/1.5 Inter,"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:radial-gradient(1100px 700px at 78% 30%,color-mix(in srgb,var(--a) 34%,transparent),transparent 62%),linear-gradient(150deg,var(--bg1),var(--bg2));
  animation:sci-in .6s ease both}
.sci *{box-sizing:border-box}
.sci.light{--ink:#0b2340;--mute:rgba(11,35,64,.74);--glass:rgba(255,255,255,.72);--line:rgba(11,35,64,.12)}
.sci.out{animation:sci-out .7s cubic-bezier(.7,0,.3,1) both}
.sci-pattern{position:absolute;inset:0;opacity:.18;background-size:420px auto;pointer-events:none;mix-blend-mode:screen}
.sci.light .sci-pattern{mix-blend-mode:multiply;opacity:.12}
.sci-grid{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);align-items:center;gap:clamp(20px,4vw,64px);width:min(1280px,100%);margin:auto;padding:clamp(20px,4vw,56px)}
.sci-copy{display:grid;gap:14px;align-content:center}
.sci-brand{display:flex;align-items:center;gap:14px;animation:sci-rise .7s .15s ease both}
.sci-brand img{width:58px;height:58px;border-radius:18px;object-fit:contain;background:var(--glass);padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.sci-kicker{font-size:12.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--a2)}
.sci.light .sci-kicker{color:var(--a)}
.sci h1{margin:0;font:800 clamp(40px,6.4vw,84px)/.95 "Inter Display",Inter,system-ui,sans-serif;letter-spacing:-.02em;animation:sci-rise .8s .35s ease both}
.sci h1 span{background-image:linear-gradient(100deg,var(--ink) 30%,var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sci.light h1 span{background-image:linear-gradient(100deg,var(--ink) 30%,var(--a))}
.sci-ar{font:700 clamp(18px,2vw,24px)/1.3 "IBM Plex Sans Arabic","Noto Kufi Arabic",Tahoma,sans-serif;color:var(--mute);direction:rtl;text-align:left;animation:sci-rise .8s .55s ease both}
.sci[dir=rtl] .sci-ar{direction:ltr;text-align:right;font-family:Inter,system-ui,sans-serif}
.sci-values{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.sci-values li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);font-weight:600;
  opacity:0;animation:sci-rise .6s ease forwards;animation-delay:calc(2.2s + var(--i) * .45s)}
.sci-values li i{flex:0 0 30px;height:30px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--a) 30%,transparent);color:var(--a2);font-style:normal}
.sci.light .sci-values li i{color:var(--a)}
.sci-values svg{width:18px;height:18px}
/* the path a reading takes */
.sci-flow{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;margin-top:6px;opacity:0;animation:sci-rise .6s 3.7s ease forwards}
.sci-flow b{padding:6px 9px;border-radius:999px;font-size:12px;white-space:nowrap;font-weight:800;border:1px solid var(--line);background:var(--glass);animation:sci-node 3.2s ease both;animation-delay:calc(3.9s + var(--i) * .32s)}
.sci-flow em{position:relative;flex:1 1 10px;min-width:8px;height:2px;background:linear-gradient(90deg,var(--line),var(--a2),var(--line));background-size:200% 100%;animation:sci-wire 1.1s linear infinite}
.sci-actions{display:flex;gap:10px;align-items:center;margin-top:14px;opacity:0;animation:sci-rise .6s 4.6s ease forwards}
.sci-go{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border:0;border-radius:14px;font:800 15px/1 Inter,system-ui,sans-serif;cursor:pointer;color:#fff;
  background:linear-gradient(100deg,var(--a),color-mix(in srgb,var(--a2) 70%,var(--a)));box-shadow:0 12px 30px color-mix(in srgb,var(--a) 40%,transparent);animation:sci-glow 2.2s 5.2s ease-in-out infinite}
.sci-go svg{width:18px;height:18px}
.sci-bar{position:relative;width:120px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.sci-bar::after{content:"";position:absolute;inset:0;background:var(--a2);transform-origin:left;animation:sci-progress var(--dur,7.5s) linear both}
.sci[dir=rtl] .sci-bar::after{transform-origin:right}
.sci-skip{position:absolute;top:16px;inset-inline-end:16px;z-index:3;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--glass);color:var(--ink);font:700 13px/1 Inter,system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
/* the stage: hero picture, scene and the motion card */
.sci-stage{position:relative;aspect-ratio:1.18;border-radius:30px;overflow:hidden;background:color-mix(in srgb,var(--a) 14%,rgba(0,0,0,.18));border:1px solid var(--line);
  box-shadow:0 40px 90px rgba(0,0,0,.35);animation:sci-stage 1s .55s cubic-bezier(.2,.8,.2,1) both}
.sci.light .sci-stage{box-shadow:0 40px 90px rgba(11,35,64,.22)}
.sci-stage>svg.scene{position:absolute;inset:0;width:100%;height:100%}
.sci-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:sci-kenburns 9s ease-out both}
.sci-cut{position:absolute;bottom:4%;width:78%;left:11%;filter:drop-shadow(0 26px 30px rgba(0,0,0,.35));animation:sci-cut 1.2s .9s cubic-bezier(.2,.8,.2,1) both}
.sci-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.35))}
.sci.light .sci-shade{background:linear-gradient(180deg,transparent 55%,rgba(11,35,64,.25))}
.sci-card{position:absolute;left:5%;bottom:6%;width:min(38%,230px);padding:12px;border-radius:20px;background:rgba(255,255,255,.9);color:#0b2340;box-shadow:0 18px 40px rgba(0,0,0,.25);
  opacity:0;animation:sci-pop .7s 1.5s cubic-bezier(.2,.9,.3,1.3) forwards}
.sci-card svg{display:block;width:100%;height:auto}
.sci-card small{display:block;margin-top:6px;font:700 12px/1.3 Inter,system-ui,sans-serif;color:#33506e}
.sci-chip{position:absolute;right:5%;top:7%;display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:14px;background:rgba(255,255,255,.92);color:#0b2340;font:800 12.5px/1.2 Inter,system-ui,sans-serif;
  box-shadow:0 14px 30px rgba(0,0,0,.22);opacity:0;animation:sci-pop .6s 2.6s cubic-bezier(.2,.9,.3,1.3) forwards}
.sci-chip i{width:10px;height:10px;border-radius:50%;background:var(--a);box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 60%,transparent);animation:sci-ping 1.6s 3s ease-out infinite}
.sci-chip.two{top:auto;bottom:30%;right:4%;animation-delay:3.2s}
.sci-chip.two i{background:#e5484d;animation-delay:3.6s}
/* the replay pill (after the film) */
.sci-replay{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:2147482000;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.25);background:rgba(10,25,40,.72);color:#fff;font:700 12.5px/1 Inter,system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(0,0,0,.25);animation:sci-in .5s ease both}
.sci-replay svg{width:14px;height:14px}
/* scene pieces */
:is(.sci,.sci-mini) .draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);animation:sci-draw var(--t,1.6s) var(--d,1.6s) ease forwards}
:is(.sci,.sci-mini) .ripple{transform-box:fill-box;transform-origin:center;animation:sci-ripple 2.4s var(--d,1.4s) ease-out infinite;opacity:0}
:is(.sci,.sci-mini) .pop{transform-box:fill-box;transform-origin:center;opacity:0;animation:sci-pop .5s var(--d,1.6s) cubic-bezier(.2,.9,.3,1.4) forwards}
:is(.sci,.sci-mini) .fade{opacity:0;animation:sci-fade .8s var(--d,1s) ease forwards}
:is(.sci,.sci-mini) .drift{animation:sci-drift 9s linear infinite}
:is(.sci,.sci-mini) .bob{animation:sci-bob 1.4s ease-in-out infinite}
:is(.sci,.sci-mini) .ring{transform-box:fill-box;transform-origin:50% 8%;animation:sci-ring 1.2s var(--d,1.6s) ease-in-out 2}
:is(.sci,.sci-mini) .walk{animation:sci-walk 9s linear both}
:is(.sci,.sci-mini) .dot{transform-box:fill-box;transform-origin:center;animation:sci-dot .4s var(--d) ease forwards}
@keyframes sci-in{from{opacity:0}to{opacity:1}}
@keyframes sci-out{to{opacity:0;transform:translateY(-4%) scale(1.02)}}
@keyframes sci-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sci-stage{from{opacity:0;transform:translateY(30px) scale(.96) rotate(-1deg)}to{opacity:1;transform:none}}
@keyframes sci-kenburns{from{transform:scale(1.14) translate(1.5%,1%)}to{transform:scale(1.02)}}
@keyframes sci-cut{from{opacity:0;transform:translateX(8%) scale(.96)}to{opacity:1;transform:none}}
@keyframes sci-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes sci-fade{to{opacity:1}}
@keyframes sci-draw{to{stroke-dashoffset:0}}
@keyframes sci-ripple{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
@keyframes sci-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 60%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes sci-node{0%,100%{}12%{background:var(--a);color:#fff;border-color:transparent;transform:translateY(-2px)}40%{background:var(--glass);color:inherit;transform:none}}
@keyframes sci-wire{to{background-position:-200% 0}}
@keyframes sci-glow{0%,100%{box-shadow:0 12px 30px color-mix(in srgb,var(--a) 40%,transparent)}50%{box-shadow:0 12px 44px color-mix(in srgb,var(--a) 75%,transparent)}}
@keyframes sci-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sci-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sci-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5%)}}
@keyframes sci-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
@keyframes sci-walk{from{transform:translateX(6%)}to{transform:translateX(-4%)}}
@keyframes sci-dot{to{fill:currentColor}}
@media(max-width:860px){.sci-grid{grid-template-columns:1fr;align-content:start;gap:16px;padding:58px 16px 20px}.sci-stage{order:-1;aspect-ratio:1.6;border-radius:22px}.sci h1{font-size:44px}
  .sci-values li{padding:8px 12px;font-size:14px}.sci-card{width:46%;padding:8px}.sci-chip{font-size:11px;padding:7px 10px}.sci-chip.two{display:none}.sci{overflow-y:auto}}
@media(prefers-reduced-motion:reduce){.sci,.sci *{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}.sci .ripple{opacity:0!important}}
.sci-mini svg{display:block;width:100%;height:auto;border-radius:14px}
@media(prefers-reduced-motion:reduce){.sci-mini *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}.sci-mini .ripple{opacity:0!important}}
@media(max-width:860px){.sci-flow{flex-wrap:wrap}}
.sci h1 .sci-local{display:inline-block;margin-inline-start:.35em;font:700 .42em/1 "Reem Kufi","IBM Plex Sans Arabic",Tahoma,sans-serif;font-style:normal;vertical-align:.55em;color:var(--a2);-webkit-text-fill-color:var(--a2);background:none}
/* the photo story (RIAYAH): each slide shows for one step of the cycle; its case card comes in, then the action */
.sci-slides{position:absolute;inset:0}
.sci-slide{position:absolute;inset:0;margin:0;opacity:0;animation:sci-slide var(--cycle) var(--d) linear infinite}
.sci-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:sci-slidezoom var(--cycle) var(--d) linear infinite}
.sci-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55))}
.sci-case{position:absolute;left:4%;right:4%;bottom:7%;z-index:1;display:grid;gap:8px;justify-items:start}
.sci-case span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;font:800 clamp(12px,1.25vw,15px)/1.25 Inter,"IBM Plex Sans Arabic",system-ui,sans-serif;box-shadow:0 12px 28px rgba(0,0,0,.28)}
.sci-case i{display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:7px}
.sci-case i svg{width:15px;height:15px}
.sci-case .k{background:rgba(255,255,255,.94);color:#0b2340;animation:sci-case var(--cycle) var(--d) ease infinite}
.sci-case .act{background:#0d9488;color:#fff;animation:sci-act var(--cycle) var(--d) ease infinite}
.sci-case .act i{background:rgba(255,255,255,.22)}
.sci-case.warn .k i{background:#fde7c4;color:#b45309}.sci-case.bad .k i{background:#fde2e1;color:#c62828}.sci-case.info .k i{background:#dcefff;color:#1a62d6}.sci-case.ok .k i{background:#d9f5ea;color:#0f8f6a}
.sci-dots{position:absolute;top:5%;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:6px}
.sci-dots i{width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.4);overflow:hidden;position:relative}
.sci-dots i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0);animation:sci-dotfill var(--cycle) var(--d) linear infinite}
@keyframes sci-slide{0%{opacity:0}3%{opacity:1}16.7%{opacity:1}19.5%{opacity:0}100%{opacity:0}}
@keyframes sci-slidezoom{0%{transform:scale(1.12) translate(1%,1%)}19.5%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.02)}}
@keyframes sci-case{0%,2%{opacity:0;transform:translateY(10px)}5%,15.5%{opacity:1;transform:none}18%,100%{opacity:0}}
@keyframes sci-act{0%,6%{opacity:0;transform:translateX(-12px)}9%,15.5%{opacity:1;transform:none}18%,100%{opacity:0}}
@keyframes sci-dotfill{0%{transform:scaleX(0)}16.7%{transform:scaleX(1)}17%,100%{transform:scaleX(0)}}
.sci[dir=rtl] .sci-case{justify-items:end}
@media(prefers-reduced-motion:reduce){.sci-slide:not(:first-child),.sci-dots{display:none}.sci-slide:first-child,.sci-slide:first-child *{opacity:1!important}}
.sci-case.top{bottom:auto;top:12%}