/*
 * NXT GEN WEB / 63 industry-specific illustrated motion scenes.
 * Scoped to .ngiv-scene; four previously approved detailed heroes are untouched.
 * The user-facing site palette, typography, controls and page structure stay intact.
 */
.ngiv-scene{
 --ngiv-soft:color-mix(in srgb,var(--ngiv-accent) 16%,#fff);
 --ngiv-pale:color-mix(in srgb,var(--ngiv-accent) 9%,#f3f6f9);
 --ngiv-ink:color-mix(in srgb,var(--ngiv-accent) 28%,#223544);
 position:relative;display:block;min-width:0;width:100%;max-width:700px;margin:0;
 overflow:hidden;isolation:isolate;color:#243641;background:var(--ngiv-pale);
 border:1px solid color-mix(in srgb,var(--ngiv-accent) 28%,#d7e0e7);
 border-radius:23px;box-shadow:0 17px 42px #1c334020
}
.ngiv-scene *{box-sizing:border-box}
.ngiv-bar{
 display:flex;align-items:center;gap:10px;min-height:46px;padding:12px 16px;
 background:var(--ngiv-ink);color:#fff;
 font:750 10px/1.3 system-ui,sans-serif;letter-spacing:.07em;
}
.ngiv-bar-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ngiv-bar-end{font-size:8px;white-space:nowrap;letter-spacing:.08em;opacity:.85;margin-left:auto}
.ngiv-bar-dot{width:9px;height:9px;flex:0 0 9px;display:inline-block;border-radius:50%;
 background:var(--ngiv-accent);box-shadow:0 0 0 4px #ffffff23;animation:ngiv-beacon 2.6s ease-in-out infinite}
.ngiv-art-area{position:relative;overflow:hidden;line-height:0}
.ngiv-art-area svg{width:100%;height:auto;display:block;overflow:hidden}
.ngiv-art-caption{position:absolute;left:19px;bottom:13px;max-width:70%;padding:8px 13px;
 border-radius:9px;border:1px solid color-mix(in srgb,var(--ngiv-accent) 25%,white);
 background:#fffffff0;color:var(--ngiv-ink);font:800 13px/1.15 system-ui,sans-serif;
 text-transform:none;line-height:1.2;box-shadow:0 5px 15px #162d3d12
}
.ngiv-steps{min-height:44px;display:flex;align-items:center;justify-content:space-around;
 gap:7px;padding:11px 9px;background:var(--ngiv-soft);color:var(--ngiv-ink);
 font:760 10px/1.2 system-ui,sans-serif;letter-spacing:.035em
}
.ngiv-steps span{display:flex;align-items:center;gap:8px;white-space:nowrap;min-width:0}
.ngiv-steps b{color:var(--ngiv-accent);font-weight:900}
.ngiv-icon-assembly{filter:drop-shadow(0 3px 0 #ffffff55)}
.ngiv-icon-move{transform-origin:50% 50%;transform-box:fill-box}
.ngiv-icon-move>*{stroke-dasharray:650;stroke-dashoffset:0;animation:ngiv-vector-draw 8s ease-in-out infinite}
.ngiv-reveal-check{transform-origin:520px 98px;animation:ngiv-success 8s ease-in-out infinite}
.ngiv-sweep{animation:ngiv-sweep-fade 7.5s ease-in-out infinite}
.ngiv-studio-specks{animation:ngiv-specks 4s ease-in-out infinite}
.ngiv-scan-bar{animation:ngiv-scanner 7.5s ease-in-out infinite}
.ngiv-drive{animation:ngiv-driving 8s ease-in-out infinite}
.ngiv-roof-reveal{animation:ngiv-roof 8s ease-in-out infinite}
.ngiv-worklight{animation:ngiv-pulse 2.5s ease-in-out infinite}
.ngiv-pulse-line{animation:ngiv-chart 8s linear infinite;stroke-dasharray:14 7}
.ngiv-property-lights{animation:ngiv-lights 3.6s ease-in-out infinite}
.ngiv-pool-waves{animation:ngiv-water 5.6s ease-in-out infinite}
.ngiv-fashion-spark{animation:ngiv-pulse 3s ease-in-out infinite}
.ngiv-steam{animation:ngiv-steam 4.6s ease-in-out infinite}
.ngiv-commerce-cart{animation:ngiv-commerce 6.5s ease-in-out infinite}
.ngiv-chart{stroke-dasharray:600;animation:ngiv-line 8s ease-in-out infinite}
.ngiv-finance-bars{animation:ngiv-bars 6.4s ease-in-out infinite}
.ngiv-code-dots{animation:ngiv-lights 2s steps(2,end) infinite}
.ngiv-conveyor{animation:ngiv-convey 3s linear infinite}
.ngiv-shipment{animation:ngiv-shipment 7.5s ease-in-out infinite}
.ngiv-pencil{animation:ngiv-pencil 6.2s ease-in-out infinite}
.ngiv-people{animation:ngiv-people 5s ease-in-out infinite}
.ngiv-ink-backdrop{animation:ngiv-breathe 7.8s ease-in-out infinite;transform-origin:310px 207px}
.ngiv-motion--spin .ngiv-icon-move{animation:ngiv-spin 7s ease-in-out infinite}
.ngiv-motion--flow .ngiv-icon-move,.ngiv-motion--roll .ngiv-icon-move{animation:ngiv-flow 7.5s ease-in-out infinite}
.ngiv-motion--rise .ngiv-icon-move{animation:ngiv-rise 7.7s ease-in-out infinite}
.ngiv-motion--slide .ngiv-icon-move{animation:ngiv-slide 7.2s ease-in-out infinite}
.ngiv-motion--wave .ngiv-icon-move{animation:ngiv-wave 7.6s ease-in-out infinite}
.ngiv-motion--bloom .ngiv-icon-move{animation:ngiv-bloom 7.6s ease-in-out infinite}
.ngiv-motion--sway .ngiv-icon-move{animation:ngiv-wave 6.8s ease-in-out infinite}
.ngiv-motion--pulse .ngiv-icon-move,.ngiv-motion--glow .ngiv-icon-move{animation:ngiv-pulse 5.7s ease-in-out infinite}
.ngiv-motion--steam .ngiv-icon-move{animation:ngiv-rise 7s ease-in-out infinite}
.ngiv-motion--spark .ngiv-icon-move{animation:ngiv-spark 7.2s ease-in-out infinite}
.ngiv-motion--scan .ngiv-icon-move{animation:ngiv-zoom 7s ease-in-out infinite}
.ngiv-motion--draw .ngiv-icon-move{animation:ngiv-bloom 7.2s ease-in-out infinite}
.ngiv-motion--sweep .ngiv-icon-move{animation:ngiv-sweep 7.2s ease-in-out infinite}
@keyframes ngiv-beacon{50%{opacity:.37;transform:scale(.82)}}
@keyframes ngiv-breathe{50%{transform:scale(1.025)}}
@keyframes ngiv-vector-draw{0%,10%{stroke-dashoffset:650;opacity:.3}31%,75%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:650;opacity:.3}}
@keyframes ngiv-success{0%,36%,100%{opacity:0;transform:scale(.55)}55%,81%{opacity:1;transform:scale(1)}}
@keyframes ngiv-sweep-fade{0%,10%{transform:translateX(-300px);opacity:0}25%,75%{opacity:.6}88%,100%{transform:translateX(300px);opacity:0}}
@keyframes ngiv-specks{50%{opacity:.35;transform:translateY(-8px)}}
@keyframes ngiv-scanner{0%,10%{transform:translateX(-250px);opacity:0}26%{opacity:.8}72%{opacity:.9}90%,100%{transform:translateX(250px);opacity:0}}
@keyframes ngiv-driving{0%,10%{transform:translateX(-16px);opacity:.8}32%,80%{transform:translateX(0);opacity:1}100%{transform:translateX(-16px);opacity:.8}}
@keyframes ngiv-roof{0%,25%{opacity:0;transform:translateY(-24px)}48%,84%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-24px)}}
@keyframes ngiv-pulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes ngiv-chart{to{stroke-dashoffset:-210}}
@keyframes ngiv-lights{50%{opacity:.26}}
@keyframes ngiv-water{50%{transform:translateY(8px)}}
@keyframes ngiv-steam{0%,100%{opacity:0;transform:translateY(15px)}43%,80%{opacity:.85;transform:translateY(-13px)}}
@keyframes ngiv-commerce{0%,100%{transform:translateX(-11px);opacity:.7}55%{transform:translateX(17px);opacity:1}}
@keyframes ngiv-line{0%,10%{stroke-dashoffset:650}42%,87%{stroke-dashoffset:0}100%{stroke-dashoffset:650}}
@keyframes ngiv-bars{0%,100%{opacity:.25}55%{opacity:.72}}
@keyframes ngiv-convey{50%{transform:translateX(11px)}}
@keyframes ngiv-shipment{0%,10%{transform:translateX(-30px);opacity:.25}40%,78%{opacity:1;transform:translateX(0)}100%{transform:translateX(18px);opacity:.25}}
@keyframes ngiv-pencil{0%,100%{transform:translate(-8px,11px)}50%{transform:translate(9px,-5px)}}
@keyframes ngiv-people{50%{transform:translateY(-5px)}}
@keyframes ngiv-spin{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes ngiv-flow{0%,100%{transform:translateX(-5px)}48%{transform:translateX(8px)}}
@keyframes ngiv-rise{0%,100%{transform:translateY(8px);opacity:.7}50%{transform:translateY(-7px);opacity:1}}
@keyframes ngiv-slide{0%,100%{transform:translateX(-9px)}53%{transform:translateX(10px)}}
@keyframes ngiv-wave{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes ngiv-bloom{0%,100%{transform:scale(.91);opacity:.78}48%{transform:scale(1.03);opacity:1}}
@keyframes ngiv-spark{0%,100%{filter:brightness(1)}48%{filter:brightness(1.3)}}
@keyframes ngiv-zoom{0%,100%{transform:scale(.96)}50%{transform:scale(1.025)}}
@keyframes ngiv-sweep{0%,100%{transform:translateX(-11px)}50%{transform:translateX(10px)}}
@media(max-width:650px){
 .ngiv-scene{border-radius:15px}
 .ngiv-bar{min-height:38px;padding:9px 11px;gap:6px;font-size:8px}
 .ngiv-bar-end{font-size:7px}
 .ngiv-steps{min-height:37px;gap:4px;padding:10px 6px;font-size:8px}
 .ngiv-steps span{gap:4px}
 .ngiv-art-caption{font-size:10px;padding:6px 9px;left:12px;bottom:11px}
}
@media(max-width:370px){.ngiv-bar-end{display:none}.ngiv-steps{font-size:7px}}
@media(prefers-reduced-motion:reduce){
 .ngiv-scene *,.ngiv-scene *::before,.ngiv-scene *::after{animation:none!important;transition:none!important}
 .ngiv-reveal-check{opacity:1!important}
 .ngiv-icon-move>*{stroke-dashoffset:0!important}
}
