/* ============================================================
   CILTS XXI — IMMERSIVE LAYER
   Custom forklift cursor · zone rail · living background
   ============================================================ */

/* ---------- hide native cursor on fine pointers ---------- */
@media (hover: hover) and (pointer: fine) {
  html.immersive, html.immersive * { cursor: none !important; }
}

/* ---------- custom cursor: barcode-scanner targeting reticle ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  width: 44px; height: 44px; margin-left: -22px; margin-top: -22px;
  will-change: transform; transform: translate3d(-200px,-200px,0);
  transition: opacity .3s;
}
.cursor.hidden { opacity: 0; }
.cursor svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* the four corner brackets close in slightly on idle, lock on hover */
.cursor__frame { transition: transform .3s var(--ease, cubic-bezier(.22,.61,.36,1)), stroke .25s; }
.cursor__br { transform-box: fill-box; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.cursor__br--tl { transform-origin: top left; }
.cursor__br--tr { transform-origin: top right; }
.cursor__br--bl { transform-origin: bottom left; }
.cursor__br--br { transform-origin: bottom right; }
/* hover: brackets pull inward (lock-on) + turn red */
.cursor.lock .cursor__br--tl { transform: translate(3px,3px); }
.cursor.lock .cursor__br--tr { transform: translate(-3px,3px); }
.cursor.lock .cursor__br--bl { transform: translate(3px,-3px); }
.cursor.lock .cursor__br--br { transform: translate(-3px,-3px); }
.cursor.lock .cursor__br { stroke: var(--red, #e3241b); }
.cursor__dot { transition: r .25s, fill .25s; }
.cursor.lock .cursor__dot { fill: var(--red, #e3241b); }

/* the sweeping scan line — only visible while locked on a target */
.cursor__beam { opacity: 0; transition: opacity .2s; }
.cursor.lock .cursor__beam { opacity: 1; animation: cur-beam 1s ease-in-out infinite; }
@keyframes cur-beam { 0%,100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } }

/* click = scan confirmed */
.cursor.click .cursor__frame { transform: scale(.82); }
.cursor.ok .cursor__br { stroke: #39ff9a !important; }
.cursor.ok .cursor__dot { fill: #39ff9a !important; }

/* small mono label that rides under the reticle on hover */
.cursor__label {
  position: absolute; left: 50%; top: 30px; transform: translateX(-50%) translateY(4px);
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: var(--red, #e3241b); padding: 3px 7px; border-radius: 3px; white-space: nowrap;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
}
.cursor.lock .cursor__label { opacity: 1; transform: translateX(-50%) translateY(0); }

/* click ripple — scan confirm pulse */
.cursor-ping {
  position: fixed; z-index: 9998; pointer-events: none; width: 30px; height: 30px;
  border-radius: 7px; border: 2px solid var(--red, #e3241b); margin: -15px 0 0 -15px;
  animation: cur-ping .5s ease-out forwards;
}
@keyframes cur-ping { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .cursor.lock .cursor__beam { animation: none; } }

/* ============================================================
   ZONE RAIL — warehouse map navigation
   ============================================================ */
.zonerail {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 12px; border-radius: 40px;
  background: rgba(10,11,14,.5); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0; transform: translateY(-50%) translateX(20px); transition: opacity .5s, transform .5s;
}
.zonerail.show { opacity: 1; transform: translateY(-50%) translateX(0); }
.zonerail__item { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 0; height: 26px; cursor: none; }
.zonerail__dot {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22);
  transition: background .3s, transform .3s; flex-shrink: 0; margin-left: 4px;
}
.zonerail__item:hover .zonerail__dot { background: rgba(255,255,255,.55); transform: scale(1.2); }
.zonerail__item.active .zonerail__dot { background: var(--red, #e3241b); transform: scale(1.35); box-shadow: 0 0 0 4px rgba(227,36,27,.18); }
.zonerail__lab {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7);
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .35s, opacity .3s, padding .35s; padding-right: 0;
}
.zonerail__item:hover .zonerail__lab, .zonerail__item.active .zonerail__lab { max-width: 150px; opacity: 1; padding-right: 10px; }
.zonerail__item.active .zonerail__lab { color: #fff; }
.zonerail__num {
  font-family: 'JetBrains Mono', monospace; font-size: 8px; color: rgba(255,255,255,.35);
  margin-right: 2px; transition: color .3s;
}
.zonerail__item.active .zonerail__num { color: var(--red,#e3241b); }
@media (max-width: 1100px) { .zonerail { display: none; } }

/* ============================================================
   ZONE GATEWAY — section enter banner
   ============================================================ */
.zone-gate {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 9px 18px 9px 14px; margin-bottom: 22px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 40px;
  background: rgba(255,255,255,.03); position: relative; z-index: 2;
}
.zone-gate__ic { width: 26px; height: 26px; color: var(--red,#e3241b); }
.zone-gate__t { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.section--paper .zone-gate { border-color: rgba(10,12,16,.1); background: rgba(10,12,16,.02); }
.section--paper .zone-gate__t { color: rgba(20,22,27,.55); }

/* ============================================================
   LIVING BACKGROUND — drifting forklifts / pallets per section
   ============================================================ */
.livebg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.livebg > * { position: absolute; opacity: .05; color: #fff; }
.section--paper .livebg > * { color: #14161b; opacity: .035; }
.lb-drift { animation: lb-drift linear infinite; }
@keyframes lb-drift { from { transform: translateX(-160px); } to { transform: translateX(110vw); } }
.section .wrap { position: relative; z-index: 1; }

/* ============================================================
   SCANLINE / depth ambiance overlay
   ============================================================ */
.section--ink::after, .section--ink2::after, .flow::after, .safety::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(227,36,27,.04), transparent 70%);
}

/* ============================================================
   CINEMATIC SECTION SWEEP — forklift wipe on enter
   ============================================================ */
.sweep { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.sweep__bar { position: absolute; top: 0; bottom: 0; width: 140%; left: -140%; background: linear-gradient(90deg, transparent, rgba(227,36,27,.08) 40%, rgba(227,36,27,.14) 50%, rgba(227,36,27,.08) 60%, transparent); }
.sweep.run .sweep__bar { animation: sweep 1.1s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes sweep { to { left: 140%; } }