/* ============================================================
   Login left-panel: vehicle-tuning "ECU live dashboard" theme.
   Pure CSS / SVG, no image. Used on login, register and
   forgot-password.
   ============================================================ */

/* Wipe the default background and host the SVG stage */
.login-left {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background:
      radial-gradient(ellipse at 50% 0%, #1a1a1a 0%, #0c0c0c 60%, #050505 100%) !important;
   color: #e7e7e7;
}

/* Subtle carbon-fiber backdrop */
.ll-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   background:
      linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%),
      linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%),
      radial-gradient(circle at 20% 30%, rgba(205,190,25,0.10) 0%, transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(255,45,45,0.08) 0%, transparent 45%);
   background-size: 6px 6px, 6px 6px, 100% 100%, 100% 100%;
   background-position: 0 0, 3px 3px, 0 0, 0 0;
   opacity: 0.9;
}

/* Faint perspective grid */
.ll-grid {
   position: absolute;
   inset: -10% -10% 35% -10%;
   z-index: 0;
   background-image:
      linear-gradient(rgba(205,190,25,0.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(205,190,25,0.10) 1px, transparent 1px);
   background-size: 40px 40px;
   transform: perspective(700px) rotateX(58deg);
   transform-origin: 50% 100%;
   mask-image: linear-gradient(to top, #000 0%, transparent 80%);
   -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 80%);
   animation: ll-grid-scroll 6s linear infinite;
   pointer-events: none;
}
@keyframes ll-grid-scroll {
   from { background-position: 0 0, 0 0; }
   to   { background-position: 0 40px, 40px 0; }
}

/* Horizontal speed lines */
.ll-speed-lines {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   background:
      repeating-linear-gradient(90deg,
         transparent 0,
         transparent 80px,
         rgba(255,255,255,0.05) 80px,
         rgba(255,255,255,0.05) 82px,
         transparent 82px,
         transparent 200px);
   mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
   -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
   animation: ll-speed-lines 1.2s linear infinite;
}
@keyframes ll-speed-lines {
   from { background-position: 0 0; }
   to   { background-position: -120px 0; }
}

/* ---------- Stage layout ----------------------------------- */
.ll-stage {
   position: absolute;
   inset: 0;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 18px;
   padding: 32px 24px;
}

/* ---------- Top HUD ---------------------------------------- */
.ll-hud-top {
   display: flex;
   align-items: center;
   gap: 14px;
   font-family: Exo, "Segoe UI", Arial, sans-serif;
   font-size: 12px;
   letter-spacing: 2px;
   color: #d30125;
   text-transform: uppercase;
}
.ll-hud-top b { color: #fff; font-weight: 600; margin-left: 2px; }
.ll-hud-dot {
   width: 9px; height: 9px; border-radius: 50%;
   background: #00ff7f;
   box-shadow: 0 0 12px #00ff7f, 0 0 4px #00ff7f;
   animation: ll-hud-blink 1.6s ease-in-out infinite;
}
@keyframes ll-hud-blink {
   0%,100% { opacity: 1; transform: scale(1); }
   50%     { opacity: 0.4; transform: scale(0.85); }
}
.ll-hud-divider {
   width: 1px; height: 12px; background: rgba(205,190,25,0.4);
}
.ll-hud-readout { color: #d6d6d6; }

/* ---------- Speedometer ------------------------------------ */
.ll-speedo {
   width: min(420px, 70%);
   aspect-ratio: 1 / 1;
   position: relative;
   filter: drop-shadow(0 14px 30px rgba(0,0,0,0.6));
}
.ll-speedo-svg { width: 100%; height: 100%; display: block; }

/* Active arc: animated dash to "fill" with engine load */
.ll-arc {
   stroke-dasharray: 100;
   animation: ll-arc-fill 4s ease-in-out infinite alternate;
}
@keyframes ll-arc-fill {
   0%   { stroke-dashoffset: 88; }
   30%  { stroke-dashoffset: 55; }
   70%  { stroke-dashoffset: 20; }
   100% { stroke-dashoffset: 2;  }
}

/* Needle sweep (0 km/h → 220 km/h → idle) */
.ll-needle {
   transform-origin: 0 0;
   animation: ll-needle 7s cubic-bezier(0.4, 0.0, 0.6, 1) infinite;
}
@keyframes ll-needle {
   0%   { transform: rotate(-90deg);  }   /* 0 km/h pointing left */
   8%   { transform: rotate(-78deg);  }
   18%  { transform: rotate(-30deg);  }   /* punch */
   30%  { transform: rotate(20deg);   }
   42%  { transform: rotate(58deg);   }   /* near redline */
   55%  { transform: rotate(72deg);   }
   62%  { transform: rotate(40deg);   }   /* shift */
   75%  { transform: rotate(55deg);   }
   85%  { transform: rotate(30deg);   }
   100% { transform: rotate(-90deg);  }
}

/* Digital readout counter (uses staged content() via animation) */
.ll-digital-num {
   animation: ll-digital 7s linear infinite;
}
@keyframes ll-digital {
   0%   { opacity: 0.8; }
   18%  { opacity: 1;   }
   42%  { opacity: 1; fill: #ff2d2d; }
   62%  { opacity: 1; fill: #d30125; }
   100% { opacity: 0.8; fill: #d30125; }
}

/* ---------- RPM / Tachometer bar --------------------------- */
.ll-rpm {
   width: min(420px, 70%);
   display: flex;
   flex-direction: column;
   gap: 4px;
   font-family: Exo, "Segoe UI", Arial, sans-serif;
}
.ll-rpm-label {
   font-size: 11px; letter-spacing: 3px; color: rgba(205,190,25,0.85); text-transform: uppercase;
}
.ll-rpm-track {
   display: flex;
   gap: 4px;
   align-items: flex-end;
   height: 36px;
   padding: 4px 6px;
   background: rgba(0,0,0,0.5);
   border: 1px solid rgba(255,255,255,0.06);
   border-radius: 4px;
}
.ll-rpm-bar {
   flex: 1;
   height: 30%;
   background: linear-gradient(to top, #d30125, #f5e25b);
   border-radius: 1px;
   transform-origin: bottom;
   animation: ll-rpm-pulse 1.2s ease-in-out infinite;
}
.ll-rpm-bar:nth-child(n+14) { background: linear-gradient(to top, #ff2d2d, #ff6a6a); }
@keyframes ll-rpm-pulse {
   0%, 100% { height: 30%; opacity: 0.55; }
   50%      { height: 95%; opacity: 1; }
}
.ll-rpm-scale {
   display: flex; justify-content: space-between;
   font-size: 10px; color: #888; letter-spacing: 2px;
   padding: 0 6px;
}
.ll-rpm-scale .redline { color: #ff2d2d; font-weight: 700; }

/* ---------- Bottom HUD readouts ---------------------------- */
.ll-hud-bot {
   display: flex;
   gap: 16px;
   margin-top: 4px;
   font-family: Exo, "Segoe UI", Arial, sans-serif;
}
.ll-hud-cell {
   min-width: 88px;
   padding: 10px 14px;
   background: rgba(0,0,0,0.55);
   border: 1px solid rgba(205,190,25,0.25);
   border-radius: 6px;
   display: flex;
   flex-direction: column;
   align-items: center;
   line-height: 1.1;
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
}
.ll-hud-cell-label {
   font-size: 10px; letter-spacing: 2.5px; color: #d30125; text-transform: uppercase;
}
.ll-hud-cell-val {
   font-size: 22px; font-weight: 700; color: #fff; margin-top: 2px;
   text-shadow: 0 0 14px rgba(205,190,25,0.5);
   animation: ll-hud-val-pulse 3s ease-in-out infinite;
}
.ll-hud-cell:nth-child(2) .ll-hud-cell-val { animation-delay: 0.8s; }
.ll-hud-cell:nth-child(3) .ll-hud-cell-val { animation-delay: 1.6s; }
@keyframes ll-hud-val-pulse {
   0%, 100% { transform: scale(1);    text-shadow: 0 0 8px  rgba(205,190,25,0.35); }
   50%      { transform: scale(1.05); text-shadow: 0 0 18px rgba(205,190,25,0.65); }
}
.ll-hud-cell-unit {
   font-size: 9px; letter-spacing: 1.5px; color: #888; margin-top: 2px;
}

/* ---------- Watermark logo overlay ------------------------- */
.login-left .watermark-back-middle-panel-thumb {
   position: absolute;
   top: 24px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 5;
   pointer-events: none;
   /* Existing inline width: 300px — keep it visible */
}
.login-left .watermark-back-middle-panel-thumb img {
   filter: drop-shadow(0 6px 16px rgba(0,0,0,0.7)) brightness(1.1);
   animation: ll-logo-float 6s ease-in-out infinite;
   max-width: 220px;
   width: auto;
   height: auto;
}
@keyframes ll-logo-float {
   0%, 100% { transform: translateY(0)    scale(1);    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.7))   brightness(1.1); }
   50%      { transform: translateY(-6px) scale(1.03); filter: drop-shadow(0 12px 22px rgba(0,0,0,0.85)) brightness(1.2) drop-shadow(0 0 18px rgba(205,190,25,0.5)); }
}

/* Hide the legacy .video-overlay solid black: it was a 25% black
   blanket from an old video-bg implementation that crushes our scene. */
.login-left .video-overlay { display: none !important; }

/* ---------- Reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
   .ll-grid,
   .ll-speed-lines,
   .ll-needle,
   .ll-arc,
   .ll-rpm-bar,
   .ll-hud-cell-val,
   .ll-hud-dot,
   .ll-digital-num,
   .login-left .watermark-back-middle-panel-thumb img {
      animation: none !important;
   }
}

/* ---------- Responsive ------------------------------------- */
@media (max-width: 900px) {
   .ll-speedo { width: 75%; }
   .ll-rpm    { width: 80%; }
}
@media (max-width: 600px) {
   .login-left { display: none !important; }   /* keep the right panel only on phones */
}