/**
 * Jargan Splash Animation -- 2x2 Kinetic Grid (SP-127)
 *
 * Brand-aligned splash using the JARGAN 3-circle icon in a 2x2 sliding
 * puzzle. This is the same mechanic as the auth loader (BA-001) but
 * scaled up for splash-screen presentation.
 *
 * Layout: 2x2 grid, 3 circles + 1 empty gap
 *   (0,0) gap    (0,1) orange
 *   (1,0) black  (1,1) black
 *
 * The circles rotate clockwise around the empty gap:
 *   Step 1: (1,0) slides up into (0,0)   -- gap moves to (1,0)
 *   Step 2: (1,1) slides left into (1,0)  -- gap moves to (1,1)
 *   Step 3: (0,1) slides down into (1,1)  -- gap moves to (0,1)
 *   Step 4: (0,0) slides right into (0,1) -- gap back to (0,0)
 *
 * Each step is 25% of the 3.6s cycle = 900ms per move.
 * The circles use transform: translate() for GPU-accelerated motion.
 *
 * Colors (splash variant):
 *   Orange circle: #DD5100 (brand traffic orange)
 *   Black circles: #000000
 *   Canvas: #FFFFFF
 */

/* -- Splash overlay -- */

/* SP-079: pointer-events:none so promoted header (z-10001) remains interactive.
   Splash is a visual loading gate only -- no click/Escape dismiss. */
.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: none;
}

/* -- Kinetic grid container -- */

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

.splash-kinetic-grid {
  --cell: 48px;
  --circle: 42px;
  --gap: 6px;
  position: relative;
  width: calc(var(--cell) * 2);
  height: calc(var(--cell) * 2);
}

.splash-kg-dot {
  position: absolute;
  width: var(--circle);
  height: var(--circle);
  border-radius: 50%;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Center circle within its cell: offset = (cell - circle) / 2 = gap / 2 */
}

/* Color classes */
.splash-kg-dot--black { background: #000000; }
.splash-kg-dot--orange { background: #DD5100; }

/* Position grid: each dot placed at its home cell */
.splash-kg-dot[data-row="0"] { top: calc(var(--gap) / 2); }
.splash-kg-dot[data-row="1"] { top: calc(var(--cell) + var(--gap) / 2); }
.splash-kg-dot[data-col="0"] { left: calc(var(--gap) / 2); }
.splash-kg-dot[data-col="1"] { left: calc(var(--cell) + var(--gap) / 2); }


/* -- 2x2 Sliding puzzle animations --
 *
 * Three circles rotate clockwise around the empty gap.
 * Gap starts at (0,0). Each circle occupies one of the other three cells.
 *
 * Clockwise rotation in 4 steps (each 25% of cycle):
 *   0%-25%:   Circle at (1,0) slides UP into (0,0)
 *   25%-50%:  Circle at (1,1) slides LEFT into (1,0)
 *   50%-75%:  Circle at (0,1) slides DOWN into (1,1)
 *   75%-100%: Circle now at (0,0) slides RIGHT into (0,1)
 *
 * After one full rotation each circle has moved one position clockwise
 * and the gap has returned to (0,0). The animation loops seamlessly.
 *
 * Each circle only moves during ONE step of the 4-step cycle,
 * staying put for the other 3 steps.
 */

/* Circle at (0,1) -- orange. Slides down at step 3. */
.splash-kg-dot[data-row="0"][data-col="1"] {
  animation: kg-c01 3.6s ease-in-out infinite;
}
@keyframes kg-c01 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(0, 0); }
  62%  { transform: translate(0, var(--cell)); }
  75%  { transform: translate(0, var(--cell)); }
  87%  { transform: translate(calc(var(--cell) * -1), var(--cell)); }
  100% { transform: translate(calc(var(--cell) * -1), var(--cell)); }
}

/* Circle at (1,0) -- black. Slides up at step 1. */
.splash-kg-dot[data-row="1"][data-col="0"] {
  animation: kg-c10 3.6s ease-in-out infinite;
}
@keyframes kg-c10 {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(0, calc(var(--cell) * -1)); }
  25%  { transform: translate(0, calc(var(--cell) * -1)); }
  37%  { transform: translate(var(--cell), calc(var(--cell) * -1)); }
  100% { transform: translate(var(--cell), calc(var(--cell) * -1)); }
}

/* Circle at (1,1) -- black. Slides left at step 2. */
.splash-kg-dot[data-row="1"][data-col="1"] {
  animation: kg-c11 3.6s ease-in-out infinite;
}
@keyframes kg-c11 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(0, 0); }
  37%  { transform: translate(calc(var(--cell) * -1), 0); }
  50%  { transform: translate(calc(var(--cell) * -1), 0); }
  62%  { transform: translate(calc(var(--cell) * -1), calc(var(--cell) * -1)); }
  100% { transform: translate(calc(var(--cell) * -1), calc(var(--cell) * -1)); }
}

/* -- JARGAN wordmark below the grid -- */

.splash-wordmark {
  display: block;
  width: 100px;
  margin: 16px auto 0;
  opacity: 0;
  animation: splash-wordmark-in 0.6s ease-out 0.5s forwards;
}

@keyframes splash-wordmark-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 0.6; transform: translateY(0); }
}

/* -- Responsive -- */

@media (max-width: 480px) {
  .splash-kinetic-grid {
    --cell: 38px;
    --circle: 32px;
    --gap: 6px;
  }
  .splash-wordmark {
    width: 80px;
  }
}

@media (min-width: 768px) {
  .splash-kinetic-grid {
    --cell: 56px;
    --circle: 50px;
    --gap: 6px;
  }
  .splash-wordmark {
    width: 120px;
    margin-top: 20px;
  }
}

/* -- Reduced motion: static icon, no animation -- */

@media (prefers-reduced-motion: reduce) {
  .splash-kg-dot {
    animation: none !important;
    transform: none !important;
  }

  /* Hide the grid, show only a static JARGAN icon */
  .splash-kinetic-grid {
    display: none;
  }

  .splash-reduced-icon {
    display: block !important;
  }

  .splash-wordmark {
    animation: none !important;
    opacity: 0.6;
    transform: none;
  }
}

/* Static icon for reduced motion (hidden by default) */
.splash-reduced-icon {
  display: none;
  width: 80px;
  height: 80px;
}

@media (min-width: 768px) {
  .splash-reduced-icon {
    width: 100px;
    height: 100px;
  }
}

/* -- Print: hide splash -- */

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

/* ── SP-278: Sidebar-scoped splash ── */

/*
 * Scoped loader that persists over .main-content after main splash dismisses,
 * while /partners and master-plan data finish loading. Uses the same 3-circle
 * SVG as the main splash, smaller and centered.
 */
.main-content {
  position: relative;
}

.sidebar-splash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  z-index: 100; /* above .main-content contents, below modals */
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.sidebar-splash--visible {
  display: flex;
  opacity: 1;
}

.sidebar-splash--fading {
  opacity: 0;
}

.sidebar-splash-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-splash-svg {
  width: 90px;
  height: 90px;
}

@keyframes sb-c1 {
  0%     { transform: translate(0, 0); }
  8.33%  { transform: translate(-60px, 0); }
  25%    { transform: translate(-60px, 0); }
  33.33% { transform: translate(-60px, 60px); }
  50%    { transform: translate(-60px, 60px); }
  58.33% { transform: translate(0, 60px); }
  75%    { transform: translate(0, 60px); }
  83.33% { transform: translate(0, 0); }
  100%   { transform: translate(0, 0); }
}
@keyframes sb-c2 {
  0%     { transform: translate(0, 0); }
  8.33%  { transform: translate(0, 0); }
  16.67% { transform: translate(0, -60px); }
  33.33% { transform: translate(0, -60px); }
  41.67% { transform: translate(-60px, -60px); }
  58.33% { transform: translate(-60px, -60px); }
  66.67% { transform: translate(-60px, 0); }
  83.33% { transform: translate(-60px, 0); }
  91.67% { transform: translate(0, 0); }
  100%   { transform: translate(0, 0); }
}
@keyframes sb-c3 {
  0%     { transform: translate(0, 0); }
  16.67% { transform: translate(0, 0); }
  25%    { transform: translate(60px, 0); }
  41.67% { transform: translate(60px, 0); }
  50%    { transform: translate(60px, -60px); }
  66.67% { transform: translate(60px, -60px); }
  75%    { transform: translate(0, -60px); }
  91.67% { transform: translate(0, -60px); }
  100%   { transform: translate(0, 0); }
}

.sidebar-splash-c1 { animation: sb-c1 6s ease-in-out infinite; }
.sidebar-splash-c2 { animation: sb-c2 6s ease-in-out infinite; }
.sidebar-splash-c3 { animation: sb-c3 6s ease-in-out infinite; }

.sidebar-splash-c1,
.sidebar-splash-c2,
.sidebar-splash-c3 {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Theme safety: on dark theme, the #000 circles would disappear on a dark bg.
   Force a subtle stroke so they remain visible regardless of theme. */
[data-theme="dark"] .sidebar-splash,
.theme-dark .sidebar-splash {
  background: #0a0e27;
}

[data-theme="dark"] .sidebar-splash-c2,
[data-theme="dark"] .sidebar-splash-c3,
.theme-dark .sidebar-splash-c2,
.theme-dark .sidebar-splash-c3 {
  stroke: #7bfff2;
  stroke-width: 2;
}

/* Mobile: scale down */
@media (max-width: 480px) {
  .sidebar-splash-svg {
    width: 70px;
    height: 70px;
  }
}