/* Live Queue-Only Brand Loader Styles */

@property --ql-x {
  syntax: '<length>';
  inherits: true;
  initial-value: 300px;
}

.ql-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  --ql-scale: 1;
}

/* Scaling container */
.ql-scale {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(var(--ql-scale));
  transform-origin: center center;
}

/* Breakpoints (min-width) */
@media (min-width: 768px) {
  .ql-wrap {
    --ql-scale: 1.15;
  }
}

@media (min-width: 1024px) {
  .ql-wrap {
    --ql-scale: 1.4;
  }
}

@media (min-width: 1440px) {
  .ql-wrap {
    --ql-scale: 1.7;
  }
}

@media (min-width: 1920px) {
  .ql-wrap {
    --ql-scale: 2.1;
  }
}

@media (min-width: 2560px) {
  .ql-wrap {
    --ql-scale: 2.7;
  }
}

/* Height guards placed AFTER width rules to prevent viewport overflow */
@media (min-width: 2560px) and (max-height: 1000px) {
  .ql-wrap {
    --ql-scale: 2.4;
  }
}

@media (min-width: 1920px) and (max-height: 780px) {
  .ql-wrap {
    --ql-scale: 1.9;
  }
}

@media (min-width: 1024px) and (max-height: 640px) {
  .ql-wrap {
    --ql-scale: 1.4;
  }
}

@media (min-width: 1024px) and (max-height: 560px) {
  .ql-wrap {
    --ql-scale: 1.2;
  }
}

@media (min-width: 1024px) and (max-height: 480px) {
  .ql-wrap {
    --ql-scale: 1;
  }
}

.ql-wrap-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 50;
  padding: 1.5rem;
}

.ql-wrap-inline {
  width: 100%;
  padding: calc(3rem * var(--ql-scale)) 0;
  background: transparent;
}

.ql-theme-dark {
  background-color: #3F0163;
  color: #FAF7F2;
}

.ql-theme-light {
  background-color: #FAF7F2;
  color: #3F0163;
}

/* 1. TOP LOGO SECTION */
.ql-logo-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 230px;
  margin-bottom: 1rem;
}

/* Outer Rotating Arc */
.ql-arc {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  width: 230px;
  height: 230px;
  border: 5px solid transparent;
  border-top-color: #FCBF00;
  border-right-color: #FCBF00;
  animation: ql-arc-spin 1.4s linear infinite;
  will-change: transform;
}

/* Center Cream Circle with Gold Ring */
.ql-circle {
  width: 192px;
  height: 192px;
  border-radius: 50%;
  background-color: #FAF7F2;
  position: relative;
  z-index: 10;
  border: 3.5px solid #FCBF00;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ql-logo {
  position: relative;
  width: 128px;
  height: 128px;
  object-fit: contain;
  z-index: 10;
}

/* 2. ROAD STRIP & CAR TRACK SECTION (300px track) */
.ql-road-section {
  position: relative;
  width: 300px;
  max-width: 90vw;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1.25rem;
  overflow: hidden;
  animation: ql-drive-cycle 3.6s linear infinite;
}

/* Wordmark revealed behind the car */
.ql-wordmark {
  position: absolute;
  left: 45px;
  bottom: 10px;
  width: 210px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(0 0, calc(var(--ql-x, 300px) - 45px) 0, calc(var(--ql-x, 300px) - 45px) 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, calc(var(--ql-x, 300px) - 45px) 0, calc(var(--ql-x, 300px) - 45px) 100%, 0 100%);
  animation: ql-wordmark-fade 3.6s ease-out infinite;
  will-change: clip-path, opacity;
}

/* Moving Car Container */
.ql-car-wrap {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 106px;
  height: 34px;
  z-index: 5;
  pointer-events: none;
  transform: translateX(calc(var(--ql-x, 300px) - 4px));
  will-change: transform;
}

/* Car SVG with subtle suspension bob */
.ql-car-svg {
  display: block;
  width: 106px;
  height: 34px;
  animation: ql-car-bob 0.7s ease-in-out infinite;
  will-change: transform;
}

/* Edge fading with mask for road */
.ql-road-strip {
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
  height: 14px;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* Asphalt base line */
.ql-road-track {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(252, 191, 0, 0.25);
}

/* Moving Dashes */
.ql-road-dashes {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 600px;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    #FCBF00 0px,
    #FCBF00 16px,
    transparent 16px,
    transparent 32px
  );
  animation: ql-dashes-scroll 0.5s linear infinite;
  will-change: transform;
}

/* Thin Speed Lines */
.ql-speed-line {
  position: absolute;
  height: 1.5px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, rgba(252, 191, 0, 0.6), transparent);
  animation: ql-speed-stream 0.7s linear infinite;
  will-change: transform, opacity;
}

.ql-speed-line-1 {
  top: 14px;
  width: 50px;
  animation-delay: 0.1s;
}

.ql-speed-line-2 {
  top: 26px;
  width: 35px;
  animation-delay: 0.35s;
}

/* Ground shadow under car */
.ql-car-shadow {
  position: absolute;
  bottom: 0px;
  left: 4px;
  width: 90px;
  height: 6px;
  background: rgba(18, 7, 28, 0.65);
  border-radius: 50%;
  filter: blur(2px);
  animation: ql-shadow-breathe 0.7s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Rotating Wheel Groups */
.ql-wheel {
  animation: ql-wheel-spin 0.55s linear infinite;
  will-change: transform;
}

/* 3. LOADING TEXT */
.ql-text,
.ql-text.font-heading {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  animation: ql-text-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  will-change: opacity;
}

.ql-text-dark {
  color: rgba(250, 247, 242, 0.95);
}

.ql-text-light {
  color: #3F0163;
}

/* KEYFRAMES */

@keyframes ql-arc-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes ql-drive-cycle {
  0% {
    --ql-x: -106px;
  }
  62% {
    --ql-x: 304px;
  }
  92% {
    --ql-x: 304px;
  }
  100% {
    --ql-x: 304px;
  }
}

@keyframes ql-wordmark-fade {
  0%, 92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ql-dashes-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-32px);
  }
}

@keyframes ql-wheel-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Heavy luxury car suspension bob (~0.8px) */
@keyframes ql-car-bob {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-0.8px) rotate(-0.2deg);
  }
  50% {
    transform: translateY(0.4px) rotate(0.15deg);
  }
  75% {
    transform: translateY(-0.5px) rotate(-0.1deg);
  }
}

@keyframes ql-shadow-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.65;
  }
  25% {
    transform: scale(0.95);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.75;
  }
  75% {
    transform: scale(0.97);
    opacity: 0.6;
  }
}

@keyframes ql-speed-stream {
  0% {
    transform: translateX(150px);
    opacity: 0;
  }
  30% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(-150px);
    opacity: 0;
  }
}

@keyframes ql-text-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Reduced Motion Fallback (static, wordmark fully visible, no car) */
@media (prefers-reduced-motion: reduce) {
  .ql-arc,
  .ql-road-dashes,
  .ql-wheel,
  .ql-car-wrap,
  .ql-car-svg,
  .ql-car-shadow,
  .ql-speed-line,
  .ql-wordmark,
  .ql-text,
  .ql-road-section {
    animation: none !important;
    transform: none !important;
  }
  .ql-car-wrap,
  .ql-speed-line {
    display: none !important;
  }
  .ql-wordmark {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    opacity: 1 !important;
  }
  .ql-text {
    opacity: 1 !important;
  }
}