/* iDesign4Solutions motion layer for the subpages. Everything here is decoration on top of complete, readable content;
   with prefers-reduced-motion the page simply shows its final state. */

/* page-to-page crossfade (supporting browsers); the header stays put */
@view-transition { navigation: auto; }
.sh { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .32s ease both; }
::view-transition-new(root) { animation: vt-in .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.015); filter: blur(6px); } }

/* hero: a soft light field */
.ph, .lp { position: relative; }
.aura { position: absolute; inset: -10% -5%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 2s ease; overflow: hidden; }
.aura.on { opacity: 1; }
.aura i { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; }
.aura i:nth-child(1) { width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; left: 8%; top: -10%; background: radial-gradient(closest-side, rgba(20,125,255,.30), transparent); animation: drift1 22s ease-in-out infinite alternate; }
.aura i:nth-child(2) { width: 38vw; height: 38vw; max-width: 600px; max-height: 600px; right: 4%; top: 10%; background: radial-gradient(closest-side, rgba(120,182,255,.20), transparent); animation: drift2 28s ease-in-out infinite alternate; }
.aura i:nth-child(3) { width: 30vw; height: 30vw; max-width: 480px; max-height: 480px; left: 38%; bottom: -20%; background: radial-gradient(closest-side, rgba(70,110,200,.22), transparent); animation: drift3 25s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(14vw, 8vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-12vw, 6vh) scale(.9); } }
@keyframes drift3 { to { transform: translate(-8vw, -10vh) scale(1.2); } }.ph > .wrap, .lp > *:not(.aura) { position: relative; z-index: 1; }

/* hero entrance: label, title lines and copy rise in */
.wow .ph .lbl, .wow .ph h1, .wow .ph h1 span, .wow .ph .lede, .wow .ph .acts,
.wow .lp > div > .lbl, .wow .lp h1, .wow .lp h1 span, .wow .lp .lede, .wow .lp .steps3, .wow .lp .alt2, .wow .lp .card,
.wow .ty > * { animation: rise 1.1s cubic-bezier(.2,.8,.2,1) both; }
.wow .ph h1, .wow .lp h1 { animation-delay: .12s; }
.wow .ph h1 span, .wow .lp h1 span { animation-delay: .32s; }
.wow .ph .lede, .wow .lp .lede { animation-delay: .5s; }
.wow .ph .acts, .wow .lp .steps3 { animation-delay: .68s; }
.wow .lp .alt2 { animation-delay: .8s; } .wow .lp .card { animation-delay: .35s; }
.wow .ty > *:nth-child(2) { animation-delay: .15s; } .wow .ty > *:nth-child(3) { animation-delay: .3s; } .wow .ty > *:nth-child(n+4) { animation-delay: .45s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } }

/* scroll reveal */
.rv { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.8,.2,1), filter 1s ease; transition-delay: calc(var(--d, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; filter: none; }

/* the 4D path draws itself, then each D lights in turn */
.wow .d4p::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.65,0,.2,1) .2s; }
.wow .d4p.in::before { transform: none; }
.wow .d4p li { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.wow .d4p.in li { opacity: 1; transform: none; }
.wow .d4p.in li:nth-child(2) { transition-delay: .35s; } .wow .d4p.in li:nth-child(3) { transition-delay: .7s; } .wow .d4p.in li:nth-child(4) { transition-delay: 1.05s; }
.wow .d4p .c { transition: box-shadow .5s, border-color .5s, transform .5s cubic-bezier(.2,.8,.2,1); }
.wow .d4p li.lit .c { border-color: var(--glow); box-shadow: 0 0 0 6px rgba(20,125,255,.08), 0 0 36px rgba(20,125,255,.65); transform: scale(1.08); }

/* cursor spotlight + hover depth */
.spot { position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, rgba(20,125,255,.10), transparent); opacity: 0; transition: opacity .6s; will-change: transform; }
.spot.on { opacity: 1; }
.tiltc { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.btn.pri { transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, box-shadow .3s; }
.btn.pri:hover { box-shadow: 0 10px 40px -8px rgba(20,125,255,.7); }

/* Operational Systems: the operating cycle lights up level by level */
.cyc > div { transition: border-color .5s, box-shadow .5s, background .5s; }
.cyc > div.lit { border-color: rgba(20,125,255,.7); background: rgba(20,125,255,.08); box-shadow: 0 0 40px rgba(20,125,255,.25); }
.cyc .ln, .lanes .p { overflow: visible; }
.cyc .ln i, .lanes .p i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 12px var(--blue); opacity: 0; }
.cyc .ln.go i { animation: travel .8s cubic-bezier(.65,0,.35,1) both; }
@keyframes travel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }

/* Workflow Automation: five manual steps collapse into one flow */
.flow2 li { transition: opacity .5s, color .5s, background .5s, border-color .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.flow2 .bf li.gone { opacity: .28; text-decoration: line-through; text-decoration-color: rgba(201,154,75,.8); transform: translateX(-6px); }
.flow2.armed .af li { opacity: .18; transform: translateX(10px); }
.flow2 .af li.on { opacity: 1; transform: none; background: rgba(20,125,255,.1); }
.flow2 .af li.on i { background: var(--blue); color: #fff; }
.flow2 .arw { transition: box-shadow .4s; } .flow2 .arw.pulse { box-shadow: 0 0 18px 2px rgba(20,125,255,.9); }

/* Executive Dashboards: numbers count up, bars fill, the view stays live */
.mock .bars i::after { transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
.mock.armed .bars i::after { width: 0 !important; }
.kpis em { transition: color .4s, text-shadow .4s; }
.kpis em.tick { color: #CFE5FF; text-shadow: 0 0 18px rgba(20,125,255,.8); }

@keyframes livepulse { 50% { box-shadow: 0 0 0 6px rgba(20,125,255,0), 0 0 18px var(--blue); } }

/* Systems Integration: tools drift in, lines draw, data pulses into the core */
.hub .n { transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .9s ease, border-color .5s, box-shadow .5s; }
.hub.armed .n { opacity: 0; }
.hub.armed .n:nth-of-type(1) { transform: translate(-60px,-40px); } .hub.armed .n:nth-of-type(2) { transform: translate(60px,-40px); }
.hub.armed .n:nth-of-type(3) { transform: translate(-60px,40px); } .hub.armed .n:nth-of-type(4) { transform: translate(60px,40px); }
.hub .n.ping { border-color: rgba(20,125,255,.7); box-shadow: 0 0 26px rgba(20,125,255,.35); }
.hub svg.l path { stroke-dasharray: 4 5; transition: opacity 1s .6s; }
.hub.armed svg.l path { opacity: 0; }
.hub svg.l circle { fill: #CFE5FF; filter: drop-shadow(0 0 5px #147DFF); }
.hub .core { transition: box-shadow .3s, transform .3s; }
.hub .core.hit { box-shadow: 0 0 70px rgba(20,125,255,.55); transform: translate(-50%,-50%) scale(1.04); }

/* Process Documentation: scattered versions shuffle into one current SOP, then each step checks off */
.sop { position: relative; z-index: 1; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.sopwrap { position: relative; max-width: 640px; margin: 0 auto; }
.sopg { position: absolute; inset: 0; border: 1px dashed rgba(201,154,75,.5); border-radius: 18px; background: rgba(20,16,10,.85); display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px; font-size: 14px; color: #D9C49E; transition: transform 1.1s cubic-bezier(.65,0,.2,1), opacity .9s ease; }
.sopg span { font: 500 9.5px Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #C9A66B; }
.sopwrap.armed .sopg.g1 { transform: translate(-46%, -10%) rotate(-9deg); }
.sopwrap.armed .sopg.g2 { transform: translate(42%, 8%) rotate(7deg); }
.sopwrap.armed .sop { transform: scale(.94); }
.sopwrap .sopg { transform: none; opacity: 0; }
.sopwrap.armed .sopg { opacity: 1; }
.sop li { transition: background .5s, color .5s; }
.sop li em { transition: color .4s; }
.sop li.ok { background: rgba(20,125,255,.08); color: var(--paper); }


/* Sound familiar?: the complaints brighten one at a time (styled in pages.css) */

@media (max-width: 900px) {
  .hub .core.hit { transform: scale(1.03); }
  .hub.armed .n { transform: translateY(20px) !important; }
  .sopwrap.armed .sopg.g1 { transform: translate(-8%, -8%) rotate(-5deg); }
  .sopwrap.armed .sopg.g2 { transform: translate(8%, 6%) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wow *, .wow *::before, .wow *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; filter: none; }
  .aura, .spot { display: none; }
}