/* A compact exploded-view product animation, using actual screen details. */
.erp3d-stage{grid-column:2;position:relative;min-width:0;width:100%;max-width:700px;perspective:1200px;padding:24px 18px 30px;isolation:isolate;border-radius:16px;background:radial-gradient(ellipse at 50% 40%,#dbe8fb,#eef3fa 65%);border:1px solid #e0e8f3}
.erp3d-floor{position:absolute;left:12%;right:12%;height:60px;bottom:15px;background:radial-gradient(ellipse,#183d7040,transparent 70%);filter:blur(12px);transform:rotateX(65deg);z-index:-1}
.erp3d-stage .desktop-capture{position:relative;max-width:none;overflow:visible;transform-style:preserve-3d;transform:rotateX(6deg) rotateY(-8deg);box-shadow:12px 18px 0 -8px #bdd0e4,24px 28px 0 -14px #d8e3ef,0 28px 45px #173a6a22}
.erp3d-stage .desktop-brand{border-radius:10px 10px 0 0}
.erp3d-stage .erp-module-detail{border-radius:0 0 10px 10px}
.erp3d-stage .desktop-crop{position:relative}
.erp3d-stage[data-presentation=menu] #desktop-screen>img,.erp3d-stage[data-presentation=menu] #desktop-screen.screen-changing>img{animation:none!important;transform:none!important}
.erp3d-stage .desktop-crop:after{content:'';position:absolute;inset:0;background:linear-gradient(130deg,#0b294b88,#12385e55);opacity:0;pointer-events:none}
.erp3d-popouts{position:absolute;top:35px;left:0;width:100%;aspect-ratio:2.2;transform-style:preserve-3d;pointer-events:none;z-index:5}
.erp3d-card{position:absolute;top:20%;width:29%;height:66%;background:#fff;border:1px solid #cadbeb;border-radius:9px;overflow:hidden;box-shadow:0 22px 30px #0b254e44,0 1px 0 #fff inset;opacity:0;transform-style:preserve-3d;backface-visibility:hidden}
.erp3d-card-0{left:4%;--card-rotate:-8deg;--card-lift:-12px;--card-depth:85px}
.erp3d-card-1{left:35.5%;--card-rotate:0deg;--card-lift:-23px;--card-depth:125px}
.erp3d-card-2{left:67%;--card-rotate:8deg;--card-lift:-8px;--card-depth:95px}
.erp3d-crop{height:calc(100% - 31px);background-repeat:no-repeat;background-color:#f7f9fc}
.erp3d-card>span{display:flex;align-items:center;justify-content:center;height:31px;font-size:10px;font-weight:500;line-height:1.3;letter-spacing:-.1px;color:#27496b;background:#fff;border-top:1px solid #e0e9f2;text-align:center;padding:0 3px}
.erp3d-running .desktop-capture{animation:erpScreenOrbit 6s cubic-bezier(.2,.65,.2,1) both}
.erp3d-running .desktop-crop:after{animation:erpScreenDim 6s ease both}
.erp3d-running .erp3d-card{animation:erpLayerLift 6s cubic-bezier(.2,.7,.2,1) both}
.erp3d-running .erp3d-card-1{animation-delay:.08s}
.erp3d-running .erp3d-card-2{animation-delay:.16s}
.hc-theater{perspective:1200px;background:radial-gradient(ellipse at 50% 40%,#dcebf2,#eef4f7 75%);overflow:hidden}
.hc-deck{perspective:1200px;background:transparent;transform-style:preserve-3d}
.hc-theater .hc-scene.is-active{animation:hrScreenOrbit 6s cubic-bezier(.2,.65,.2,1) both;transform-style:preserve-3d}
.hc-theater .hc-window{box-shadow:8px 12px 0 -5px #afcad6,17px 20px 0 -10px #d0e1e8,0 25px 30px #173a6a2b;border:1px solid #aac8d4}
.hc-theater .hc-scene.is-active .hc-image-viewport img{animation:none;transform:none}
.hc-theater .hc-scene.is-leaving{transform:translate3d(-50px,0,-140px) rotateY(25deg);transition:opacity .6s,transform .8s}
.hr-cinema:not(.is-playing) .hc-scene.is-active{animation-play-state:paused}
@keyframes erpScreenOrbit{0%{transform:rotateX(3deg) rotateY(-12deg) scale(.95)}18%{transform:rotateX(6deg) rotateY(-7deg) scale(.95)}45%,76%{transform:rotateX(9deg) rotateY(5deg) scale(.9)}100%{transform:rotateX(3deg) rotateY(0) scale(1)}}
@keyframes erpLayerLift{0%,16%{opacity:0;transform:translate3d(0,18px,-10px) rotateY(0) scale(.8)}31%,76%{opacity:1;transform:translate3d(0,var(--card-lift),var(--card-depth)) rotateY(var(--card-rotate)) scale(1)}94%,100%{opacity:0;transform:translate3d(0,10px,0) rotateY(0) scale(.85)}}
@keyframes erpScreenDim{0%,17%,96%,100%{opacity:0}32%,77%{opacity:1}}
@keyframes hrScreenOrbit{0%{transform:translate3d(30px,8px,-100px) rotateY(-17deg) rotateX(7deg) scale(.9)}22%{transform:rotateY(-9deg) rotateX(5deg) scale(.95)}64%{transform:rotateY(8deg) rotateX(4deg) scale(.94)}100%{transform:rotateY(0) rotateX(0) scale(1)}}
@media(max-width:700px){.erp3d-stage{padding:20px 13px 25px;margin-top:4px}.erp3d-card>span{font-size:8px;height:27px}.erp3d-crop{height:calc(100% - 27px)}.erp3d-card-0{--card-depth:45px}.erp3d-card-1{--card-depth:65px}.erp3d-card-2{--card-depth:50px}}
@media(prefers-reduced-motion:reduce){.erp3d-stage .desktop-capture,.erp3d-running .desktop-crop:after,.erp3d-card,.hc-theater .hc-scene.is-active{animation:none!important;transform:none!important}.erp3d-popouts{display:none}.erp3d-stage .desktop-crop:after{display:none}}
.motion-off .erp3d-stage .desktop-capture,.motion-off .hc-theater .hc-scene.is-active{animation-play-state:paused!important;}
.motion-off .erp3d-popouts,.motion-off .erp3d-stage .desktop-crop:after{animation-play-state:paused!important}
/* Studio lighting and a deeper, sequenced product reveal. */
.erp3d-stage{background:radial-gradient(ellipse at 18% 15%,#24588199,transparent 55%),radial-gradient(ellipse at 85% 85%,#1a626d80,transparent 50%),#0d1c30;border:1px solid #355477;padding:32px 21px 35px;box-shadow:0 18px 40px #173a6a20;transform:rotateX(var(--studio-x,0deg)) rotateY(var(--studio-y,0deg));transition:transform .6s ease-out}
.erp3d-stage:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(120deg,transparent 25%,#a5d9ff12 46%,transparent 65%);animation:studioLightSweep 7s ease-in-out infinite;z-index:6}
.erp3d-floor{left:6%;right:6%;height:80px;bottom:3px;background:radial-gradient(ellipse,#5cafff38,transparent 65%);filter:blur(15px)}
.erp3d-stage .desktop-capture{border-color:#b3c9e2;box-shadow:7px 8px 0 -3px #7291b0,15px 16px 0 -8px #395675,0 35px 45px #0007}
.erp3d-stage .desktop-crop:after{background:linear-gradient(130deg,#091d3999,#12466166)}
.erp3d-card{border-color:#c6e0f2;box-shadow:2px 4px 0 -1px #a5bfd5,5px 8px 0 -3px #607d9b,0 20px 30px #0006}
.erp3d-card-0{--card-rotate:-12deg;--card-lift:-8px;--card-depth:80px}
.erp3d-card-1{--card-rotate:0deg;--card-lift:-25px;--card-depth:140px}
.erp3d-card-2{--card-rotate:12deg;--card-lift:-10px;--card-depth:95px}
.erp3d-card>span{background:linear-gradient(#fff,#eef5fc);color:#204563;font-weight:600}
.erp3d-running .desktop-capture{animation:studioScreenCamera 6s cubic-bezier(.2,.65,.2,1) both}
.erp3d-running .erp3d-card{animation:studioLayerReveal 6s cubic-bezier(.16,1,.3,1) both}
.erp3d-running .erp3d-card-1{animation-delay:.14s}
.erp3d-running .erp3d-card-2{animation-delay:.28s}
@keyframes studioScreenCamera{0%{transform:translate3d(0,10px,-70px) rotateX(8deg) rotateY(-15deg) scale(.92)}20%{transform:translate3d(0,0,0) rotateX(5deg) rotateY(-7deg) scale(.94)}48%,75%{transform:translate3d(0,5px,-25px) rotateX(10deg) rotateY(7deg) scale(.87)}100%{transform:rotateX(2deg) rotateY(0) scale(.98)}}
@keyframes studioLayerReveal{0%,15%{opacity:0;transform:translate3d(0,20px,-30px) rotateX(20deg) rotateY(0) scale(.72)}32%,72%{opacity:1;transform:translate3d(0,var(--card-lift),var(--card-depth)) rotateX(-3deg) rotateY(var(--card-rotate)) scale(1)}94%,100%{opacity:0;transform:translate3d(0,12px,-5px) rotateX(8deg) rotateY(0) scale(.85)}}
@keyframes studioLightSweep{0%,100%{opacity:.3;translate:-12px 0}50%{opacity:1;translate:12px 0}}
@media(max-width:540px){.erp3d-stage{padding:25px 13px 28px}.erp3d-card-0{--card-depth:35px;--card-rotate:-7deg}.erp3d-card-1{--card-depth:65px}.erp3d-card-2{--card-depth:40px;--card-rotate:7deg}.erp3d-card>span{font-size:8px;font-weight:500}}
@media(prefers-reduced-motion:reduce){.erp3d-stage,.erp3d-stage:after{animation:none!important;transform:none!important;transition:none!important}}
.motion-off .erp3d-stage,.motion-off .erp3d-stage:after{animation-play-state:paused!important;}
/* Each workspace has its own choreography, inside the same product frame. */
.erp3d-storyline{position:absolute;left:3%;right:3%;bottom:4%;text-align:center;font-size:7px;font-weight:500;letter-spacing:1.1px;color:#e4f1ff;text-shadow:0 2px 5px #07172d;opacity:0;animation:moduleStoryCaption 6s ease both}
.erp3d-card-0{--stack-x:108%;--chain-offset:-35px}
.erp3d-card-1{--stack-x:0%;--chain-offset:-20px}
.erp3d-card-2{--stack-x:-108%;--chain-offset:-10px}
.erp3d-running[data-story=sales] .erp3d-card{animation-name:salesChainReveal}
.erp3d-running[data-story=sales] .erp3d-card-1{animation-delay:.23s}
.erp3d-running[data-story=sales] .erp3d-card-2{animation-delay:.25s}
.erp3d-running[data-story=planning] .erp3d-card{animation-name:planningTimelineReveal;transform-origin:center bottom}
.erp3d-running[data-story=planning] .erp3d-card-1{animation-delay:.18s}
.erp3d-running[data-story=planning] .erp3d-card-2{animation-delay:.36s}
.erp3d-stage[data-story=planning]{background:radial-gradient(ellipse at 35% 30%,#24616f88,transparent 65%),#0b2431}
.erp3d-stage[data-story=planning] .erp3d-popouts:before{content:'';position:absolute;top:90%;left:7%;right:7%;height:1px;background:linear-gradient(90deg,#48dbcc,#91c8ff);transform-origin:left;animation:planningTimelineLine 6s ease both}
.erp3d-running[data-story=production] .erp3d-card{animation-name:productionAssembly;animation-delay:0s}
.erp3d-stage[data-story=production]{background:radial-gradient(ellipse at 50% 25%,#86603b70,transparent 65%),#172033}
.erp3d-running[data-story=purchase] .erp3d-card{animation-name:purchaseFlipReveal;transform-origin:left center}
.erp3d-running[data-story=purchase] .erp3d-card-1{animation-delay:.28s}
.erp3d-running[data-story=purchase] .erp3d-card-2{animation-delay:.3s}
.erp3d-stage[data-story=purchase] .erp3d-card:before{content:attr(data-step);position:absolute;right:6px;top:6px;z-index:2;border-radius:4px;padding:3px 5px;font:8px monospace;color:#fff;background:#0d7067;box-shadow:0 2px 5px #0002}
.erp3d-stage[data-story=purchase]{background:radial-gradient(ellipse at 50% 30%,#20695788,transparent 65%),#112a31}
.erp3d-running[data-story=setup] .erp3d-card{animation-name:productionAssembly;animation-delay:0s}
.erp3d-running[data-story=packing] .erp3d-card{animation-name:planningTimelineReveal}
.erp3d-running[data-story=formulation] .erp3d-card{animation-name:salesChainReveal}
.erp3d-running[data-story=financialyear] .erp3d-card{animation-name:purchaseFlipReveal;transform-origin:left center}
@keyframes salesChainReveal{0%,12%{opacity:0;transform:translate3d(var(--chain-offset),0,0) rotateY(-25deg) scale(.85)}31%,72%{opacity:1;transform:translate3d(0,var(--card-lift),var(--card-depth)) rotateY(var(--card-rotate))}94%,100%{opacity:0;transform:translate3d(28px,-5px,-35px) rotateY(15deg) scale(.9)}}
@keyframes planningTimelineReveal{0%,14%{opacity:0;transform:translate3d(0,55px,-30px) rotateX(65deg) scale(.85)}34%,73%{opacity:1;transform:translate3d(0,var(--card-lift),var(--card-depth)) rotateX(-5deg) rotateY(var(--card-rotate))}94%,100%{opacity:0;transform:translate3d(0,15px,0) rotateX(30deg) scale(.85)}}
@keyframes productionAssembly{0%,12%{opacity:0;transform:translate3d(var(--stack-x),15px,-50px) rotateX(15deg) scale(.8)}25%{opacity:1;transform:translate3d(var(--stack-x),-5px,40px) rotateY(-8deg) scale(.9)}46%,75%{opacity:1;transform:translate3d(0,var(--card-lift),var(--card-depth)) rotateY(var(--card-rotate))}94%,100%{opacity:0;transform:translate3d(var(--stack-x),0,-20px) scale(.8)}}
@keyframes purchaseFlipReveal{0%,12%{opacity:0;transform:translate3d(0,8px,0) rotateY(-85deg) scale(.85)}33%,70%{opacity:1;transform:translate3d(0,var(--card-lift),var(--card-depth)) rotateY(var(--card-rotate))}94%,100%{opacity:0;transform:translate3d(0,8px,-30px) rotateY(50deg) scale(.85)}}
@keyframes planningTimelineLine{0%,20%{opacity:0;transform:scaleX(0)}42%,78%{opacity:1;transform:scaleX(1)}95%,100%{opacity:0;transform:scaleX(1)}}
@keyframes moduleStoryCaption{0%,27%{opacity:0;translate:0 5px}40%,80%{opacity:1;translate:0 0}96%,100%{opacity:0;translate:0 0}}
@media(max-width:540px){.erp3d-storyline{font-size:5px;letter-spacing:.5px;bottom:2%}}
@media(prefers-reduced-motion:reduce){.erp3d-storyline,.erp3d-stage[data-story=planning] .erp3d-popouts:before{animation:none!important}}
.erp3d-stage[data-presentation=detail] .erp3d-popouts,.erp3d-stage[data-presentation=detail] .desktop-crop:after{display:none}
.erp3d-running[data-presentation=detail] .desktop-capture{animation:detailScreenReveal 6s cubic-bezier(.2,.65,.2,1) both}
.desktop-capture[data-presenting=dashboard] .desktop-crop,.desktop-capture[data-presenting=audit] .desktop-crop{aspect-ratio:2;overflow:hidden;background:#f2f5f9}
.desktop-capture[data-presenting=dashboard] #desktop-screen>img,.desktop-capture[data-presenting=audit] #desktop-screen>img{width:100%;height:100%;margin:0;object-fit:contain;object-position:center;position:static}
@keyframes detailScreenReveal{0%{opacity:.6;transform:rotateY(-9deg) rotateX(3deg) scale(.94)}25%{opacity:1;transform:rotateY(-3deg) rotateX(2deg) scale(.98)}100%{opacity:1;transform:rotateY(0) rotateX(0) scale(1)}}
/* Film camera: establish, push in, track left-to-right, whip to details, resolve. */
.erp3d-stage[data-presentation=detail] .desktop-crop{position:relative;overflow:hidden}
.erp3d-stage.erp3d-running[data-presentation=detail] .desktop-capture{animation:filmFrameCut 6s ease-out both}
.erp3d-stage.erp3d-running[data-presentation=detail] #desktop-screen>img{transform-origin:50% 50%;animation:filmDashboardCamera 6s cubic-bezier(.3,.05,.3,1) both!important;will-change:transform}
.erp3d-stage.erp3d-running[data-story=audit] #desktop-screen>img{animation-name:filmAuditCamera!important}
.erp3d-stage.erp3d-running[data-story=planning] #desktop-screen>img{animation-name:filmTableCamera!important}
.erp3d-stage.erp3d-running[data-story=packing] #desktop-screen>img{animation-name:filmPackingCamera!important}
.erp3d-stage.erp3d-running[data-story=formulation] #desktop-screen>img{animation-name:filmFormulaCamera!important}
.erp3d-stage.erp3d-running:before{content:attr(data-film-title);position:absolute;inset:0;display:grid;place-content:center;padding:22px;border-radius:inherit;z-index:12;pointer-events:none;text-align:center;font-size:clamp(18px,2.3vw,32px);font-weight:600;line-height:1.08;letter-spacing:-1px;color:#edf7ff;text-shadow:0 3px 20px #0005;background:linear-gradient(120deg,#07172fee,#12364cf5);animation:filmTypeCut 6s cubic-bezier(.16,1,.3,1) both}
.erp3d-stage[data-presentation=detail] .desktop-brand{background:#0e233c}
@keyframes filmTypeCut{0%{opacity:0;letter-spacing:5px;transform:scale(1.06)}5%,12%{opacity:1;letter-spacing:-1px;transform:scale(1)}19%,100%{opacity:0;letter-spacing:-1px;transform:scale(.98)}}
@keyframes filmFrameCut{from{opacity:.65;transform:none}18%,100%{opacity:1;transform:none}}
@keyframes filmDashboardCamera{0%,24%{transform:translate3d(0,0,0) scale(1)}38%{transform:translate3d(17%,8%,0) scale(1.65)}80%{transform:translate3d(-17%,8%,0) scale(1.65)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes filmAuditCamera{0%,24%{transform:translate3d(0,0,0) scale(1)}38%{transform:translate3d(0,12%,0) scale(1.55)}80%{transform:translate3d(0,-12%,0) scale(1.55)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes filmTableCamera{0%,24%{transform:translate3d(0,0,0) scale(1)}38%{transform:translate3d(20%,0,0) scale(1.7)}80%{transform:translate3d(-20%,0,0) scale(1.7)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes filmPackingCamera{0%,24%{transform:translate3d(0,0,0) scale(1)}38%{transform:translate3d(12%,0,0) scale(1.55)}80%{transform:translate3d(-8%,0,0) scale(1.55)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes filmFormulaCamera{0%,24%{transform:translate3d(0,0,0) scale(1)}38%{transform:translate3d(15%,0,0) scale(1.6)}80%{transform:translate3d(-15%,0,0) scale(1.6)}100%{transform:translate3d(0,0,0) scale(1)}}
@media(prefers-reduced-motion:reduce){.erp3d-stage.erp3d-running[data-presentation=detail] #desktop-screen>img{animation:none!important;transform:none!important}.erp3d-stage.erp3d-running:before{display:none}}
.motion-off .erp3d-stage.erp3d-running[data-presentation=detail] #desktop-screen>img{animation-play-state:paused!important;}
.motion-off .erp3d-stage.erp3d-running:before{animation-play-state:paused!important}
.erp3d-stage[data-presentation=detail] #desktop-screen:before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 7px 0 #0a1625,inset 0 -7px 0 #0a1625}
.erp3d-stage[data-presentation=detail] .desktop-brand #desktop-label{color:#c6e0ff}
@media(prefers-reduced-motion:reduce){.erp3d-stage[data-presentation=detail] #desktop-screen:before{box-shadow:none}}
.erp3d-stage.erp3d-running:before{display:none}
.film-title-shot{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:21px;padding:28px;background:radial-gradient(ellipse at 75% 20%,#1f526c88,transparent 60%),linear-gradient(130deg,#09182d,#102f43);border-radius:inherit;pointer-events:none;opacity:0;overflow:hidden}
.erp3d-running .film-title-shot{animation:filmTitleCurtain 6s cubic-bezier(.2,.7,.2,1) both}
.film-title-kicker{color:#78b7d5;font-size:8px;font-weight:500;letter-spacing:2.5px;line-height:1.5;text-align:center}
.film-title-words{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .24em;max-width:520px;color:#eaf5ff;font-size:clamp(23px,2.6vw,37px);font-weight:500;line-height:1.15;letter-spacing:-1.2px;text-align:center}
.film-title-words>span{display:inline-block;opacity:0}
.film-title-words>span:last-child{color:#83c4e8}
.erp3d-running .film-title-words>span{animation:filmWordReveal .65s cubic-bezier(.16,1,.3,1) var(--word-delay) both}
.film-title-rule{width:80px;height:1px;background:linear-gradient(90deg,transparent,#83c4e8,transparent);transform-origin:center}
.erp3d-running .film-title-rule{animation:filmTitleRule 1.2s cubic-bezier(.16,1,.3,1) both}
.film-title-shot:after{content:'';position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 35%,#ccecff0d 48%,transparent 61%);animation:filmTitleLight 1.8s ease-out both;pointer-events:none}
@keyframes filmTitleCurtain{0%{opacity:1;clip-path:inset(0 0 0 0)}20%{opacity:1;clip-path:inset(0 0 0 0)}32%,100%{opacity:0;clip-path:inset(0 0 100% 0)}}
@keyframes filmWordReveal{from{opacity:0;transform:translate3d(0,16px,0) rotateX(-25deg);filter:blur(5px)}to{opacity:1;transform:translate3d(0,0,0) rotateX(0);filter:blur(0)}}
@keyframes filmTitleRule{from{opacity:0;transform:scaleX(.1)}to{opacity:1;transform:scaleX(1)}}
@keyframes filmTitleLight{from{translate:-20% 0;opacity:0}45%{opacity:1}to{translate:30% 0;opacity:0}}
@media(max-width:540px){.film-title-shot{gap:15px;padding:20px}.film-title-words{font-size:24px;letter-spacing:-.7px}.film-title-kicker{font-size:6px;letter-spacing:1.5px}}
@media(prefers-reduced-motion:reduce){.film-title-shot{display:none!important}.film-title-shot *{animation:none!important}}
.motion-off .film-title-shot{animation-play-state:paused!important}
.erp3d-stage[data-presentation=detail]{transform:none;transition:none}
.erp3d-stage[data-presentation=detail]:after{display:none}
.erp3d-stage.erp3d-running[data-presentation=detail] #desktop-screen>img{animation-timing-function:cubic-bezier(.35,0,.25,1)!important}
.erp3d-stage[data-presentation=detail] #desktop-screen:before{box-shadow:inset 0 4px 0 #0a1625,inset 0 -4px 0 #0a1625}
.desktop-work .erp3d-stage{width:90%;max-width:630px;justify-self:start;padding:26px 17px 28px}
@media(max-width:700px){.desktop-work .erp3d-stage{width:100%;max-width:540px;padding:22px 13px 24px}}