/* ============================================================
   CILTS XXI — OPERATIONS PANORAMA
   A continuous warehouse the camera dollies through on scroll.
   Dock → reception/scan → racking (stacker) → dispatch/conveyor
   ============================================================ */

.ops { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.ops__cam { position: absolute; left: 0; bottom: 0; will-change: transform; transform-origin: bottom left; }
.ops__cam svg { display: block; }

/* depth dimming so far content stays readable; operations are a backdrop */
.ops::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,8,11,.5) 0%, rgba(7,8,11,.12) 30%, rgba(7,8,11,.1) 64%, rgba(6,7,10,.7) 100%);
}

/* ---- looping motion ---- */
.op-spin { transform-box: fill-box; transform-origin: center; animation: op-spin 1.4s linear infinite; }
.op-spin--s { animation-duration: 2s; }
@keyframes op-spin { to { transform: rotate(360deg); } }

.op-jack { animation: op-jack 9s ease-in-out infinite; }   /* pallet jack pulls pallet out of trailer */
@keyframes op-jack {
  0%, 8%   { transform: translateX(0); }
  34%, 42% { transform: translateX(-230px); }
  68%,100% { transform: translateX(0); }
}
.op-jack-load { animation: op-jackload 9s ease-in-out infinite; }
@keyframes op-jackload { 0%,30%{opacity:1;} 46%,64%{opacity:1;} 70%,100%{opacity:0;} }

.op-lift { animation: op-lift 8s ease-in-out infinite; }   /* stacker raises pallet into high rack */
@keyframes op-lift {
  0%, 12%  { transform: translateY(0); }
  40%, 60% { transform: translateY(-178px); }
  84%,100% { transform: translateY(0); }
}
.op-carry { animation: op-carry 8s steps(1) infinite; }
@keyframes op-carry { 0%,58%{opacity:1;} 62%,100%{opacity:0;} }
.op-placed { animation: op-placed 8s ease-in-out infinite; }
@keyframes op-placed { 0%,58%{opacity:0;} 64%,96%{opacity:1;} 100%{opacity:0;} }

.op-belt i { animation: op-belt 6s linear infinite; }      /* cartons on conveyor */
@keyframes op-belt { from { transform: translateX(0); } to { transform: translateX(-150px); } }

.op-scan { transform-box: fill-box; animation: op-scan 2.6s ease-in-out infinite; }
@keyframes op-scan { 0%,100%{transform:translateY(0);opacity:.4;} 45%{transform:translateY(46px);opacity:1;} 60%{transform:translateY(46px);opacity:.15;} }

.op-beacon { animation: op-beacon 1.1s steps(1) infinite; }
@keyframes op-beacon { 0%,50%{opacity:1;} 51%,100%{opacity:.2;} }

.op-leveler { animation: op-leveler 9s ease-in-out infinite; transform-box: fill-box; }
@keyframes op-leveler { 0%,100%{transform:rotate(0deg);} 30%,70%{transform:rotate(-4deg);} }

.op-haz { animation: op-haz 2.6s linear infinite; }
@keyframes op-haz { to { transform: translateX(-48px); } }

@media (prefers-reduced-motion: reduce) {
  .op-spin,.op-jack,.op-jack-load,.op-lift,.op-carry,.op-placed,.op-belt i,.op-scan,.op-beacon,.op-leveler,.op-haz { animation: none !important; }
  .op-lift { transform: translateY(-178px); }
  .op-placed { opacity: 1; }
  .op-carry { opacity: 0; }
}
@media (max-width: 700px) { .ops { display: none; } }