/* ============================================================
   CB AGENCY — Loader Animation
   loader.css · SVG stroke-draw + glitch effect
   ============================================================ */

/* === OVERLAY === */
#loader-overlay {
  position: fixed;
  inset: 0;
  background: #0A0A0A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loader-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* === SVG CONTAINER === */
.loader-logo {
  position: relative;
  width: 180px;
  height: 90px;
}

/* === SVG PATHS === */
.loader-logo svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The "C" arc path */
.stroke-c {
  stroke: #F5C800;
  stroke-width: 6;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: stroke-draw-c 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

/* The "B" path */
.stroke-b {
  stroke: #FFFFFF;
  stroke-width: 5;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: stroke-draw-b 1.0s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

/* Speed lines for C */
.speed-lines-c line {
  stroke: #F5C800;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
  animation: speed-appear 0.4s ease 0.8s forwards;
}
.speed-lines-c line:nth-child(2) { animation-delay: 0.85s; stroke-width: 2; }
.speed-lines-c line:nth-child(3) { animation-delay: 0.9s;  stroke-width: 1.5; }
.speed-lines-c line:nth-child(4) { animation-delay: 0.88s; stroke-width: 2.5; }

/* Speed lines for B */
.speed-lines-b line {
  stroke: rgba(255,255,255,0.6);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
  animation: speed-appear 0.4s ease 0.85s forwards;
}
.speed-lines-b line:nth-child(2) { animation-delay: 0.9s;  stroke-width: 1.5; }
.speed-lines-b line:nth-child(3) { animation-delay: 0.95s; stroke-width: 1; }

/* === FILL ANIMATION (after stroke draw) === */
.fill-c {
  fill: #F5C800;
  opacity: 0;
  animation: fill-appear 0.3s ease 0.9s forwards;
}

.fill-b {
  fill: #FFFFFF;
  opacity: 0;
  animation: fill-appear 0.3s ease 1.0s forwards;
}

/* === GLITCH EFFECT === */
.loader-logo {
  animation: glitch-container 1.6s ease forwards;
}

/* Glitch color layers */
.glitch-red,
.glitch-blue {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.glitch-red svg .fill-c  { fill: #FF0040; }
.glitch-red svg .fill-b  { fill: #FF0040; }
.glitch-blue svg .fill-c { fill: #00FFFF; }
.glitch-blue svg .fill-b { fill: #00FFFF; }

.glitch-red {
  animation: glitch-red 1.6s ease forwards;
  mix-blend-mode: screen;
}

.glitch-blue {
  animation: glitch-blue 1.6s ease forwards;
  mix-blend-mode: screen;
}

/* === LOADER TEXT === */
.loader-tagline {
  margin-top: 24px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0);
  animation: tagline-appear 0.6s ease 1.0s forwards;
}

.loader-tagline span {
  color: #F5C800;
}

/* === PROGRESS BAR === */
.loader-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #F5C800, #FF8C00);
  animation: progress-fill 1.4s ease forwards;
  border-radius: 0 2px 2px 0;
}

/* === KEYFRAMES === */
@keyframes stroke-draw-c {
  to { stroke-dashoffset: 0; }
}

@keyframes stroke-draw-b {
  to { stroke-dashoffset: 0; }
}

@keyframes fill-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes speed-appear {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes glitch-container {
  0%,  89% { transform: none; }
  90%       { transform: translate(-3px, 0) skew(-1deg); }
  91%       { transform: translate(3px, 0) skew(1deg); }
  92%       { transform: translate(-2px, 1px); }
  93%       { transform: translate(2px, -1px); }
  94%       { transform: none; }
  100%      { transform: none; }
}

@keyframes glitch-red {
  0%,  89% { opacity: 0; transform: none; }
  90%       { opacity: 0.7; transform: translate(-4px, 0); }
  91%       { opacity: 0.5; transform: translate(2px, 1px); }
  92%       { opacity: 0.6; transform: translate(-2px, 0); }
  93%       { opacity: 0; transform: none; }
  100%      { opacity: 0; }
}

@keyframes glitch-blue {
  0%,  89% { opacity: 0; transform: none; }
  90%       { opacity: 0.6; transform: translate(4px, 0); }
  91%       { opacity: 0.4; transform: translate(-2px, -1px); }
  92%       { opacity: 0.5; transform: translate(2px, 0); }
  93%       { opacity: 0; transform: none; }
  100%      { opacity: 0; }
}

@keyframes tagline-appear {
  from {
    opacity: 0;
    color: rgba(255,255,255,0);
    letter-spacing: 0.5em;
  }
  to {
    opacity: 1;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.3em;
  }
}

@keyframes progress-fill {
  from { width: 0; }
  to   { width: 100%; }
}