/* ============================================================
   VINAYAK ENTERPRISES — 3D TRUCK LOADING ANIMATION
   A truck drives onto a weighbridge, the platform dips,
   weight digits roll, then the truck drives off.
   Pure CSS-3D — no canvas, no JS, no dependencies.
   ============================================================ */

/* ── 1. FULL-PAGE OVERLAY ── */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--clr-bg-deep, #0d0f14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── 2. SCENE CONTAINER ── */
.loader-scene {
  perspective: 900px;
  perspective-origin: 50% 45%;
  width: 420px;
  height: 220px;
  position: relative;
  margin-bottom: 2.2rem;
}

/* ── 3. GROUND / ROAD ── */
.loader-road {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 22px;
  background: linear-gradient(
    180deg,
    #1e2229 0%,
    #14171d 100%
  );
  border-top: 2px solid rgba(255,107,0,0.15);
  transform-origin: bottom center;
  transform: rotateX(55deg) translateZ(-8px);
  transform-style: preserve-3d;
}
/* Road lane markings */
.loader-road::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,200,0,0.3) 0px,
    rgba(255,200,0,0.3) 20px,
    transparent 20px,
    transparent 40px
  );
  transform: translateY(-50%);
}

/* ── 4. WEIGHBRIDGE PLATFORM ── */
.loader-bridge {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%) rotateX(55deg) translateZ(2px);
  transform-origin: bottom center;
  width: 160px;
  height: 32px;
  background: linear-gradient(
    180deg,
    #2c3240 0%,
    #1a1e28 60%,
    #111318 100%
  );
  border: 1.5px solid rgba(255,107,0,0.35);
  border-radius: 3px;
  box-shadow:
    0 0 20px rgba(255,107,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.05);
  animation: bridge-dip 3.2s ease-in-out infinite;
  animation-delay: 1.5s;
}
/* Grating lines on platform */
.loader-bridge::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,107,0,0.08) 0px,
    rgba(255,107,0,0.08) 1px,
    transparent 1px,
    transparent 12px
  );
  border-radius: 1px;
}
/* Orange accent strip on top */
.loader-bridge::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-orange, #ff6b00), transparent);
  border-radius: 2px 2px 0 0;
}

/* ── 5. BRIDGE SUPPORTS / LOAD CELLS ── */
.loader-bridge-legs {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) rotateX(55deg);
  width: 174px;
  height: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.loader-bridge-leg {
  width: 8px;
  height: 10px;
  background: rgba(255,107,0,0.5);
  border-radius: 2px 2px 0 0;
  animation: leg-compress 3.2s ease-in-out infinite;
  animation-delay: 1.5s;
}
@keyframes leg-compress {
  0%,30%,100% { transform: scaleY(1); height: 10px; }
  50%,70%     { transform: scaleY(0.6); height: 6px; }
}
@keyframes bridge-dip {
  0%,30%,100% { transform: translateX(-50%) rotateX(55deg) translateZ(2px) translateY(0px); }
  50%,70%     { transform: translateX(-50%) rotateX(55deg) translateZ(2px) translateY(3px); }
}

/* ── 6. TRUCK BODY ── */
.loader-truck {
  position: absolute;
  bottom: 22px;
  left: -160px; /* starts off-screen left */
  width: 130px;
  height: 72px;
  transform-style: preserve-3d;
  animation: truck-drive 5s cubic-bezier(0.4,0,0.4,1) infinite;
}
@keyframes truck-drive {
  /* 0%: off-screen left */
  0%   { left: -160px; }
  /* 28%: truck fully on bridge (centre ≈ 210px) */
  28%  { left: 145px; animation-timing-function: cubic-bezier(0.45,0,0.55,1); }
  /* 32%–70%: truck sits still on bridge being weighed */
  32%  { left: 145px; }
  70%  { left: 145px; animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  /* 100%: truck has driven off right edge */
  100% { left: 500px; }
}

/* ── Truck Cab (front/top-cab part) ── */
.truck-cab {
  position: absolute;
  right: 0;
  bottom: 12px;
  width: 44px;
  height: 48px;
  background: linear-gradient(155deg, #e8f0fe 0%, #b0c4de 40%, #7a92b4 100%);
  border-radius: 4px 10px 0 0;
  box-shadow:
    inset -3px 0 6px rgba(0,0,0,0.3),
    inset 0 -2px 4px rgba(0,0,0,0.2);
}
/* Windshield */
.truck-cab::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 4px;
  right: 6px;
  height: 22px;
  background: linear-gradient(145deg, rgba(100,180,255,0.8), rgba(60,120,200,0.6));
  border-radius: 3px 6px 3px 3px;
  border: 1px solid rgba(255,255,255,0.3);
}
/* Cab door detail */
.truck-cab::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 5px;
  width: 6px;
  height: 10px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 2px;
}

/* ── Truck Chassis / Frame ── */
.truck-chassis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 14px;
  background: linear-gradient(180deg, #3a3f4a 0%, #1e2229 100%);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ── Truck Cargo Box ── */
.truck-cargo {
  position: absolute;
  left: 0;
  right: 46px;
  bottom: 26px;
  height: 46px;
  background: linear-gradient(170deg, #ff6b00 0%, #d4500a 50%, #a33d08 100%);
  border-radius: 3px 3px 0 0;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.12),
    inset -3px 0 6px rgba(0,0,0,0.25),
    0 0 0 1px rgba(0,0,0,0.2);
}
/* Vertical ribs on cargo */
.truck-cargo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 16px,
    rgba(0,0,0,0.15) 16px,
    rgba(0,0,0,0.15) 18px
  );
  border-radius: 3px 3px 0 0;
}
/* "VE" text on cargo */
.truck-cargo::after {
  content: 'VE';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', var(--font-display, sans-serif);
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.2em;
}

/* ── Truck Wheels ── */
.truck-wheels {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
}
.truck-wheel {
  position: absolute;
  bottom: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #555 0%, #222 55%, #111 100%);
  border: 3px solid #333;
  box-shadow:
    inset 0 0 0 4px #444,
    inset 0 0 0 5px #222,
    0 2px 6px rgba(0,0,0,0.6);
  animation: wheel-spin 0.5s linear infinite;
  /* pause spin during the bridge-stop phase */
  animation-play-state: running;
}
.truck-wheel::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,107,0,0.3);
}
.truck-wheel--fl { left: 6px; }
.truck-wheel--fr { right: 48px; }
.truck-wheel--rl { right: 22px; }
@keyframes wheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Truck Headlights ── */
.truck-headlight {
  position: absolute;
  right: 0;
  width: 5px;
  height: 6px;
  background: #fff9b0;
  border-radius: 1px 2px 2px 1px;
  box-shadow: 0 0 8px 3px rgba(255,240,100,0.5);
}
.truck-headlight--t { top: 32px; }
.truck-headlight--b { top: 40px; }

/* Exhaust smoke puff */
.truck-exhaust {
  position: absolute;
  top: 8px;
  right: 42px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(180,190,210,0.5);
  animation: smoke-puff 1s ease-out infinite;
}
.truck-exhaust::before,
.truck-exhaust::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(160,170,190,0.35);
  animation: smoke-puff 1s ease-out infinite;
}
.truck-exhaust::before { width: 8px; height: 8px; top: -4px; left: -2px; animation-delay: 0.3s; }
.truck-exhaust::after  { width: 5px; height: 5px; top: -8px; left: 1px;  animation-delay: 0.6s; }
@keyframes smoke-puff {
  0%   { opacity: 0.6; transform: translateY(0) scale(1); }
  100% { opacity: 0;   transform: translateY(-14px) scale(2.5); }
}

/* ── 7. DIGITAL WEIGHT DISPLAY ── */
.loader-display {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #0a1a0a;
  border: 1.5px solid rgba(0,255,80,0.3);
  border-radius: 6px;
  padding: 8px 14px;
  font-family: 'Courier New', 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #00ff50;
  text-shadow: 0 0 8px rgba(0,255,80,0.8), 0 0 16px rgba(0,255,80,0.3);
  letter-spacing: 0.1em;
  box-shadow: 0 0 15px rgba(0,255,80,0.1), inset 0 0 10px rgba(0,0,0,0.5);
  min-width: 105px;
  text-align: right;
}
.loader-display__label {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(0,255,80,0.5);
  margin-bottom: 3px;
}
.loader-display__value {
  animation: weight-count 3.2s steps(1, end) infinite;
  animation-delay: 1.5s;
}
@keyframes weight-count {
  0%       { content: '—  —  —  —'; color: rgba(0,255,80,0.3); }
  0%   { }
  5%   { }
  10%  { }
  15%  { }
  20%  { }
  25%  { }
  30%  { }
  35%  { }
  40%  { }
  45%  { }
  50%  { }
  55%  { }
  60%  { }
  65%  { }
  70%  { }
  75%  { }
  80%  { }
  100% { }
}

/* Use JS-driven counter span instead */
.loader-display__value span {
  display: inline-block;
  min-width: 7ch;
  text-align: right;
}

/* ── 8. INDICATOR UNIT ── */
.loader-indicator {
  position: absolute;
  top: 12px;
  left: 14px;
  background: #0d0f14;
  border: 1px solid rgba(255,107,0,0.3);
  border-radius: 5px;
  padding: 5px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(255,107,0,0.7);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ── 9. SCAN LINE (CRT effect on loader) ── */
#page-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ── 10. BRAND + TAGLINE ── */
.loader-brand {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 1.8rem;
  color: var(--clr-text-primary, #f0f2f5);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  text-align: center;
  line-height: 1;
  margin-top: 0.5rem;
}
.loader-brand span { color: var(--clr-orange, #ff6b00); }

.loader-tagline {
  font-family: 'JetBrains Mono', var(--font-mono, monospace);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--clr-text-muted, #6b7280);
  text-align: center;
  margin-top: 0.4rem;
  position: relative;
  z-index: 2;
  animation: tagline-pulse 2s ease-in-out infinite;
}
@keyframes tagline-pulse {
  0%,100% { opacity: 0.6; }
  50%     { opacity: 1; }
}

/* ── 11. PROGRESS BAR ── */
.loader-progress-wrap {
  width: 260px;
  height: 2px;
  background: rgba(255,107,0,0.12);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1.4rem;
  position: relative;
  z-index: 2;
}
.loader-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--clr-orange, #ff6b00), #ff9a4d);
  border-radius: 2px;
  animation: loader-fill 2.2s ease-out forwards;
  position: relative;
}
.loader-progress-bar::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  bottom: -2px;
  width: 20px;
  background: rgba(255,154,77,0.6);
  filter: blur(4px);
}
@keyframes loader-fill {
  0%   { width: 0%; }
  50%  { width: 60%; }
  80%  { width: 88%; }
  100% { width: 100%; }
}

/* ── 12. ORANGE CORNER ACCENTS ── */
.loader-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: 2;
}
.loader-corner--tl { top: 20px;  left:  20px;  border-top: 2px solid var(--clr-orange,#ff6b00); border-left: 2px solid var(--clr-orange,#ff6b00); }
.loader-corner--tr { top: 20px;  right: 20px;  border-top: 2px solid var(--clr-orange,#ff6b00); border-right: 2px solid var(--clr-orange,#ff6b00); }
.loader-corner--bl { bottom: 20px; left:  20px;  border-bottom: 2px solid var(--clr-orange,#ff6b00); border-left: 2px solid var(--clr-orange,#ff6b00); }
.loader-corner--br { bottom: 20px; right: 20px;  border-bottom: 2px solid var(--clr-orange,#ff6b00); border-right: 2px solid var(--clr-orange,#ff6b00); }

/* ── 13. REMOVE OLD CLASSES (kept for HTML compatibility) ── */
.loader-scale,
.loader-icon,
.loader-beam,
.loader-pan-l,
.loader-pan-r,
.loader-post,
.loader-base {
  display: none !important;
}