/**
 * Jargan Splash Animation
 *
 * 3-circle loading animation per branding spec.
 * 12-move cycle so all circles return to start for seamless loop.
 * After 1 cycle, circles fade out and app slides in from left.
 *
 * Grid positions:
 *   TL (35,35)   TR (95,35)
 *   BL (35,95)   BR (95,95)
 */

/* ── Splash overlay ── */

.jargan-splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: auto;
}

/* ── SVG container ── */

.splash-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.circle-grid-svg {
  width: 130px;
  height: 130px;
}

/* ── Circle 1: Purple ──
   Moves at: 1, 4, 7, 10
   Path: TR → TL → BL → BR → TR
*/
.circle-grid-circle1 {
  animation: c1 6s ease-in-out infinite;
}

@keyframes c1 {
  0%     { cx: 95; cy: 35; }
  8.33%  { cx: 35; cy: 35; }
  25%    { cx: 35; cy: 35; }
  33.33% { cx: 35; cy: 95; }
  50%    { cx: 35; cy: 95; }
  58.33% { cx: 95; cy: 95; }
  75%    { cx: 95; cy: 95; }
  83.33% { cx: 95; cy: 35; }
  100%   { cx: 95; cy: 35; }
}

/* ── Circle 2: Black ──
   Moves at: 2, 5, 8, 11
   Path: BR → TR → TL → BL → BR
*/
.circle-grid-circle2 {
  animation: c2 6s ease-in-out infinite;
}

@keyframes c2 {
  0%     { cx: 95; cy: 95; }
  8.33%  { cx: 95; cy: 95; }
  16.67% { cx: 95; cy: 35; }
  33.33% { cx: 95; cy: 35; }
  41.67% { cx: 35; cy: 35; }
  58.33% { cx: 35; cy: 35; }
  66.67% { cx: 35; cy: 95; }
  83.33% { cx: 35; cy: 95; }
  91.67% { cx: 95; cy: 95; }
  100%   { cx: 95; cy: 95; }
}

/* ── Circle 3: Black ──
   Moves at: 3, 6, 9, 12
   Path: BL → BR → TR → TL → BL
*/
.circle-grid-circle3 {
  animation: c3 6s ease-in-out infinite;
}

@keyframes c3 {
  0%     { cx: 35; cy: 95; }
  16.67% { cx: 35; cy: 95; }
  25%    { cx: 95; cy: 95; }
  41.67% { cx: 95; cy: 95; }
  50%    { cx: 95; cy: 35; }
  66.67% { cx: 95; cy: 35; }
  75%    { cx: 35; cy: 35; }
  91.67% { cx: 35; cy: 35; }
  100%   { cx: 35; cy: 95; }
}

/* ── Responsive ── */

@media (max-width: 480px) {
  .circle-grid-svg {
    width: 100px;
    height: 100px;
  }
}

@media (min-width: 768px) {
  .circle-grid-svg {
    width: 160px;
    height: 160px;
  }
}

@media print {
  .jargan-splash { display: none; }
}