/*
 * Company Logo Preloader — Frontend Styles v1.0.0
 */

/* ── Variables & overlay ─────────────────────────────────────────── */
#clp-preloader {
  --clp-bg: #ffffff;
  --clp-bg-opacity: 1;
  --clp-loader-color: #0073aa;
  --clp-loader-size: 48px;
  --clp-text-color: #333333;
  --clp-text-size: 16px;
  --clp-text-weight: 400;
  --clp-text-spacing: 0px;
  --clp-progress-color: #0073aa;
  --clp-progress-bg: #e0e0e0;
  --clp-anim-duration: 400ms;

  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clp-bg);
  opacity: var(--clp-bg-opacity);
  will-change: opacity, transform;
  transition: opacity var(--clp-anim-duration) ease,
              transform var(--clp-anim-duration) ease,
              filter var(--clp-anim-duration) ease;
  overflow: hidden;
}

/* ── Entrance animations ─────────────────────────────────────────── */
#clp-preloader[data-entrance="fade_in"]    { animation: clpFadeIn var(--clp-anim-duration) ease both; }
#clp-preloader[data-entrance="zoom_in"]    { animation: clpZoomIn var(--clp-anim-duration) ease both; }
#clp-preloader[data-entrance="scale"]      { animation: clpScaleIn var(--clp-anim-duration) ease both; }
#clp-preloader[data-entrance="slide_up"]   { animation: clpSlideUp var(--clp-anim-duration) ease both; }
#clp-preloader[data-entrance="slide_down"] { animation: clpSlideDown var(--clp-anim-duration) ease both; }

/* ── Exit classes (added by JS) ─────────────────────────────────── */
#clp-preloader.clp-exit-fade_out   { opacity: 0 !important; pointer-events: none; }
#clp-preloader.clp-exit-scale_down { transform: scale(0.85); opacity: 0 !important; pointer-events: none; }
#clp-preloader.clp-exit-blur       { filter: blur(10px); opacity: 0 !important; pointer-events: none; }
#clp-preloader.clp-exit-slide_up   { transform: translateY(-100%); pointer-events: none; }
#clp-preloader.clp-exit-slide_down { transform: translateY(100%); pointer-events: none; }
#clp-preloader.clp-hidden          { display: none !important; }

/* ── Container ───────────────────────────────────────────────────── */
.clp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  width: 100%;
  max-width: 480px;
  text-align: center;
}
.clp-align-left  .clp-container { align-items: flex-start; text-align: left; }
.clp-align-right .clp-container { align-items: flex-end;   text-align: right; }

/* ── Logo ────────────────────────────────────────────────────────── */
.clp-logo-wrap { line-height: 0; }
.clp-logo { display: block; max-width: 100%; height: auto; object-fit: contain; }

/* ── Text ────────────────────────────────────────────────────────── */
.clp-loading-text {
  color: var(--clp-text-color);
  font-size: var(--clp-text-size);
  font-weight: var(--clp-text-weight);
  letter-spacing: var(--clp-text-spacing);
  margin: 0; padding: 0;
}

/* ── Progress bar ────────────────────────────────────────────────── */
.clp-progress-top, .clp-progress-bottom {
  position: absolute; left: 0; right: 0; height: 4px;
  background: var(--clp-progress-bg);
}
.clp-progress-top    { top: 0; }
.clp-progress-bottom { bottom: 0; }
.clp-progress-inline {
  width: 200px; max-width: 80%; height: 4px;
  background: var(--clp-progress-bg); border-radius: 2px;
}
.clp-progress-bar {
  height: 100%; width: 0;
  background: var(--clp-progress-color); border-radius: 2px;
  transition: width 0.2s ease; will-change: width;
}
.clp-progress-animated .clp-progress-bar {
  background: linear-gradient(90deg, var(--clp-progress-color), rgba(255,255,255,.6), var(--clp-progress-color));
  background-size: 200% 100%;
  animation: clpShimmer 1.5s linear infinite;
}

/* ── Loader: Spinner ─────────────────────────────────────────────── */
.clp-loader-spinner {
  width: var(--clp-loader-size); height: var(--clp-loader-size);
  border: 3px solid rgba(0,0,0,.1);
  border-top-color: var(--clp-loader-color);
  border-radius: 50%;
  animation: clpSpin .8s linear infinite;
  will-change: transform;
}

/* ── Loader: Dual Ring ───────────────────────────────────────────── */
.clp-loader-dual_ring {
  width: var(--clp-loader-size); height: var(--clp-loader-size); position: relative;
}
.clp-loader-dual_ring::after {
  content: ''; display: block; width: 100%; height: 100%; border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: var(--clp-loader-color);
  border-bottom-color: var(--clp-loader-color);
  animation: clpSpin 1s ease infinite;
}

/* ── Loader: Pulse ───────────────────────────────────────────────── */
.clp-loader-pulse .clp-pulse-dot {
  width: var(--clp-loader-size); height: var(--clp-loader-size);
  background: var(--clp-loader-color); border-radius: 50%;
  animation: clpPulse 1.2s ease-in-out infinite; will-change: transform, opacity;
}

/* ── Loader: Dots ────────────────────────────────────────────────── */
.clp-loader-dots { display: flex; gap: 8px; align-items: center; }
.clp-loader-dots .clp-dot {
  width: calc(var(--clp-loader-size) / 4); height: calc(var(--clp-loader-size) / 4);
  background: var(--clp-loader-color); border-radius: 50%;
  animation: clpBounce 1.4s ease-in-out infinite both;
}
.clp-loader-dots .clp-dot:nth-child(2) { animation-delay: .16s; }
.clp-loader-dots .clp-dot:nth-child(3) { animation-delay: .32s; }

/* ── Loader: Wave ────────────────────────────────────────────────── */
.clp-loader-wave { display: flex; gap: 4px; align-items: flex-end; height: var(--clp-loader-size); }
.clp-loader-wave .clp-bar {
  width: calc(var(--clp-loader-size) / 6); height: 60%;
  background: var(--clp-loader-color); border-radius: 3px;
  animation: clpWave 1.2s ease-in-out infinite;
}
.clp-loader-wave .clp-bar:nth-child(2) { animation-delay: .1s; }
.clp-loader-wave .clp-bar:nth-child(3) { animation-delay: .2s; }
.clp-loader-wave .clp-bar:nth-child(4) { animation-delay: .3s; }
.clp-loader-wave .clp-bar:nth-child(5) { animation-delay: .4s; }

/* ── Loader: Bars ────────────────────────────────────────────────── */
.clp-loader-bars { display: flex; gap: 5px; align-items: center; height: var(--clp-loader-size); }
.clp-loader-bars .clp-rect {
  width: calc(var(--clp-loader-size) / 5); height: 100%;
  background: var(--clp-loader-color); border-radius: 2px;
  animation: clpStretch 1.2s ease-in-out infinite;
}
.clp-loader-bars .clp-rect:nth-child(2) { animation-delay: -.9s; }
.clp-loader-bars .clp-rect:nth-child(3) { animation-delay: -.8s; }
.clp-loader-bars .clp-rect:nth-child(4) { animation-delay: -.7s; }

/* ── Loader: Circle ──────────────────────────────────────────────── */
.clp-loader-circle svg {
  width: var(--clp-loader-size); height: var(--clp-loader-size);
  animation: clpSpin 2s linear infinite;
}
.clp-loader-circle circle {
  stroke: var(--clp-loader-color); stroke-linecap: round;
  animation: clpDash 1.5s ease-in-out infinite;
}

/* ── Loader: Ripple ──────────────────────────────────────────────── */
.clp-loader-ripple {
  position: relative; width: var(--clp-loader-size); height: var(--clp-loader-size);
}
.clp-loader-ripple .clp-ripple-ring {
  position: absolute; inset: 0;
  border: 3px solid var(--clp-loader-color); border-radius: 50%;
  animation: clpRipple 1.5s cubic-bezier(0,.2,.8,1) infinite;
}
.clp-loader-ripple .clp-ripple-ring:nth-child(2) { animation-delay: -.75s; }

/* ── Loader: Infinity ────────────────────────────────────────────── */
.clp-loader-infinity {
  position: relative; width: calc(var(--clp-loader-size) * 2); height: var(--clp-loader-size);
}
.clp-inf-track {
  position: absolute; width: 50%; height: 100%;
  border-radius: 50%; border: 3px solid transparent;
  border-top-color: var(--clp-loader-color);
}
.clp-inf-1 { left: 0;  animation: clpSpin 1s linear infinite; }
.clp-inf-2 { right: 0; animation: clpSpin 1s linear infinite reverse; }

/* ── Keyframes ───────────────────────────────────────────────────── */
@keyframes clpSpin      { to { transform: rotate(360deg); } }
@keyframes clpPulse     { 0%,100% { transform: scale(0); opacity:.4; } 50% { transform:scale(1); opacity:1; } }
@keyframes clpBounce    { 0%,80%,100% { transform:scale(0); } 40% { transform:scale(1); } }
@keyframes clpWave      { 0%,40%,100% { transform:scaleY(.4); } 20% { transform:scaleY(1); } }
@keyframes clpStretch   { 0%,40%,100% { transform:scaleY(.4); } 20% { transform:scaleY(1); } }
@keyframes clpDash      { 0% { stroke-dasharray:1,150; stroke-dashoffset:0; } 50% { stroke-dasharray:90,150; stroke-dashoffset:-35; } 100% { stroke-dasharray:90,150; stroke-dashoffset:-124; } }
@keyframes clpRipple    { 0% { transform:scale(.1); opacity:1; } 100% { transform:scale(1); opacity:0; } }
@keyframes clpShimmer   { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes clpFadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes clpZoomIn    { from { opacity:0; transform:scale(1.1); } to { opacity:1; transform:scale(1); } }
@keyframes clpScaleIn   { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
@keyframes clpSlideUp   { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes clpSlideDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }

/* ── Accessibility ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #clp-preloader, #clp-preloader * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Dark mode ───────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  #clp-preloader:not([style*="--clp-bg"]) {
    --clp-bg: #1a1a1a;
    --clp-text-color: #eeeeee;
  }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .clp-container { padding: 16px; gap: 14px; }
}