/**
 * Custom Logo Preloader — Front-end Styles
 * BEM methodology · CSS custom properties · No external dependencies
 *
 * Variables injected inline by PHP:
 *   --clp-bg                  : background hex color
 *   --clp-shimmer-duration    : animation cycle duration (slow/medium/fast)
 */

/* ─── Defaults (overridden by inline CSS from PHP) ─────────────────────── */
:root {
  --clp-bg:                #ffffff;
  --clp-shimmer-duration:  1.8s;
  --clp-fade-duration:     0.55s;
  --clp-shimmer-width:     45%;       /* Width of the shimmer band            */
  --clp-shimmer-angle:     -20deg;    /* Slight diagonal for realism          */
  --clp-shimmer-color:     rgba(255, 255, 255, 0.72);
  --clp-shimmer-edge:      rgba(255, 255, 255, 0);
  --clp-logo-max:          160px;
}

/* ─── Preloader overlay ─────────────────────────────────────────────────── */
#clp-preloader {
  position:         fixed;
  inset:            0;                /* top/right/bottom/left: 0             */
  z-index:          999999;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background-color: var(--clp-bg);

  /* Performance: promote to own layer, avoid repaints on scroll */
  will-change:      opacity;
  contain:          strict;
}

/* Fade-out state — added by JS once page is loaded */
#clp-preloader.clp-hidden {
  opacity:          0;
  pointer-events:   none;
  transition:       opacity var(--clp-fade-duration) ease-out;
}

/* Remove from flow once transition ends (JS adds after transitionend) */
#clp-preloader.clp-gone {
  display: none;
}

/* ─── Inner centering container ─────────────────────────────────────────── */
.clp-inner {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
}

/* ─── Logo wrapper — the clipping context for the shimmer ──────────────── */
.clp-logo-wrap {
  position:         relative;
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  /* Clip the shimmer so it doesn't bleed outside the logo bounds */
  overflow:         hidden;
  border-radius:    4px;            /* Soft clip; adjust to match logo shape  */
}

.clp-logo {
  display:          block;
  max-width:        var(--clp-logo-max);
  max-height:       var(--clp-logo-max);
  width:            auto;
  height:           auto;
  object-fit:       contain;
  /* Ensure pixel-crisp rendering for SVG/PNG logos */
  image-rendering:  -webkit-optimize-contrast;
  image-rendering:  crisp-edges;
}

/* ─── Shimmer overlay ───────────────────────────────────────────────────── */
/*
 * The shimmer is an absolutely-positioned pseudo-element that slides
 * left-to-right across the logo using a translucent white gradient.
 * It's clipped by the parent's overflow:hidden, so it only affects
 * the logo area — creating a "scan line passing over white portions" effect.
 */
.clp-shimmer {
  position:         absolute;
  inset:            0;
  pointer-events:   none;

  /* Gradient: transparent → white → transparent, skewed for a natural sweep */
  background: linear-gradient(
    var(--clp-shimmer-angle),
    var(--clp-shimmer-edge)   0%,
    var(--clp-shimmer-edge)   30%,
    var(--clp-shimmer-color)  50%,
    var(--clp-shimmer-edge)   70%,
    var(--clp-shimmer-edge)   100%
  );

  /* Start fully left, off-canvas */
  transform:        translateX(-100%);
  animation:        clp-shimmer-sweep var(--clp-shimmer-duration) ease-in-out infinite;

  /* GPU compositing — transform+opacity only, no layout thrash */
  will-change:      transform;
}

/* Shimmer keyframes: sweep left-to-right, then pause before repeating */
@keyframes clp-shimmer-sweep {
  0%   { transform: translateX(-120%); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translateX(120%);  opacity: 1; }
  58%  { opacity: 0; }
  100% { transform: translateX(120%);  opacity: 0; }
}

/* ─── Fallback: minimal spinner (no logo configured) ────────────────────── */
.clp-fallback-spinner {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            56px;
  height:           56px;
}

.clp-spinner-ring {
  width:            48px;
  height:           48px;
  border:           3px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(0, 0, 0, 0.55);
  border-radius:    50%;
  animation:        clp-spin 0.9s linear infinite;
  will-change:      transform;
}

@keyframes clp-spin {
  to { transform: rotate(360deg); }
}

/* ─── Accessibility: screen-reader-only text ────────────────────────────── */
.clp-sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --clp-logo-max: 110px;
  }
}

/* ─── Reduced-motion: respect user OS preference ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .clp-shimmer {
    animation: none;
  }
  .clp-spinner-ring {
    animation-duration: 2s;
  }
  #clp-preloader.clp-hidden {
    transition-duration: 0.1s;
  }
}

/* ─── Dark-background adaptive shimmer ──────────────────────────────────── */
/*
 * If the admin sets a dark bg color, the white shimmer still works
 * because we're overlaying on the logo itself, not the background.
 * No extra CSS needed — the white shimmer is always logo-relative.
 */