/**
 * 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.
 *
 * Uses transform: translate() instead of cx/cy for cross-browser
 * compatibility (cx/cy CSS animation fails on mobile Safari).
 *
 * Grid positions (SVG viewBox 0 0 130 130):
 *   TL (35,35)   TR (95,35)
 *   BL (35,95)   BR (95,95)
 *
 * Movement distance: 60 SVG units per step.
 */

/* ── 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.
   SP-293: opacity transition + fading-out class for cosmic-bg fade-out.
   SP-315: fade-out duration extended 500ms → 1000ms for a smoother handoff
   off the cosmic-bg scene; splash.js dismiss() matches by calling
   window.cosmicBg.fadeOut(1000) and extending its DOM-removal failsafe to 2500ms. */
.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;
  transition: opacity 1000ms ease-out;
}

.jargan-splash.fading-out {
  opacity: 0;
}

/* SP-293: cosmic-bg canvas sits at z-index 1, behind splash-content at z-index 2 */
.jargan-splash canvas.cosmic-bg-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── SVG container ── */

/* SP-293: z-index 2 so it floats above the cosmic-bg canvas */
.splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  contain: layout paint style;
}

/* SP-293: all-white circles with drop-shadow for legibility on cosmic bg */
.circle-grid-svg {
  /* SP-496: shrunk 130 -> 92 so the mark reads smaller + calmer over the cosmic bg. */
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
}

/* Force all circle fills to white (in case inline fill attributes are
   overridden by any theme CSS that might inject a fill rule) */
.circle-grid-circle1,
.circle-grid-circle2,
.circle-grid-circle3 {
  /* SP-498: phase 1 = BLACK circles on the white splash background (visible
     immediately, before the spheres paint). On firstFrameRendered, splash.js
     adds .spheres-in and the fill transitions to white in sync with the cosmic
     canvas fading in (600ms), so the colour flip and the sphere reveal land
     together instead of the circles showing first and the spheres popping in. */
  fill: #000000;
  transition: fill 600ms ease-out;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* SP-498: phase 2 — spheres have painted; circles go white for legibility on the cosmic bg. */
.jargan-splash.spheres-in .circle-grid-circle1,
.jargan-splash.spheres-in .circle-grid-circle2,
.jargan-splash.spheres-in .circle-grid-circle3 {
  fill: #ffffff;
}

/* ── Circle 1: Purple ──
   Start: TR (cx=95, cy=35)
   Path: TR → TL → BL → BR → TR
   Moves at steps: 1, 4, 7, 10
*/
.circle-grid-circle1 {
  animation: c1 10s ease-in-out infinite;
}

@keyframes 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); }
}

/* ── Circle 2: Black ──
   Start: BR (cx=95, cy=95)
   Path: BR → TR → TL → BL → BR
   Moves at steps: 2, 5, 8, 11
*/
.circle-grid-circle2 {
  animation: c2 10s ease-in-out infinite;
}

@keyframes 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); }
}

/* ── Circle 3: Black ──
   Start: BL (cx=35, cy=95)
   Path: BL → BR → TR → TL → BL
   Moves at steps: 3, 6, 9, 12
*/
.circle-grid-circle3 {
  animation: c3 10s ease-in-out infinite;
}

@keyframes 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); }
}

/* ── Responsive + print ── */

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

/* ── SP-293: Responsive adjustments for white circle-grid ── */

@media (max-width: 480px) {
  .circle-grid-svg {
    width: 68px;   /* SP-496: shrunk from 100 */
    height: 68px;
  }
}

@media (min-width: 768px) {
  .circle-grid-svg {
    width: 112px;  /* SP-496: shrunk from 160 */
    height: 112px;
  }
}

/* SP-309: sidebar-scoped splash rules removed (consolidated into the
   full-page JarganSplash). The `.main-content { position: relative }`
   rule was dropped along with the overlay — no descendant relies on
   `.main-content` as a containing block (each absolutely-positioned
   child wraps itself in its own `position: relative` parent). */