/* ═══════════════════════════════════════════
   CHECKORA — PRELOADER  |  preloading.css
   Fonts: Cinzel (title/logo) · Inter (body)
   ═══════════════════════════════════════════ */

@import 'https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@400;500;600&display=swap';
:root {
  --gold:        #f0c040;
  --gold-bright: #ffe082;
  --gold-dim:    #a07820;
  --cyan:        #5ad7ff;
  --bg:          #07070e;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
}

/* ── Page wrapper ── */
.ck-page {
  font-family: Inter, sans-serif;
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.ck-page.exit {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

/* ── Deep space background ── */
.ck-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(240,192,64,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(90,215,255,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(240,192,64,0.04) 0%, transparent 50%);
}

/* ── Particle field ── */
.ck-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ck-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: pk-drift var(--d, 6s) var(--delay, 0s) ease-in-out infinite;
}

@keyframes pk-drift {
  0%   { opacity: 0;    transform: translateY(0)      scale(0.5); }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.3; }
  100% { opacity: 0;    transform: translateY(-120px) scale(1.2); }
}

/* ── Chess board grid (background decoration) ── */
.ck-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  opacity: 0;
  animation: grid-reveal 1.2s 0.3s ease forwards;
  pointer-events: none;
}

@keyframes grid-reveal { to { opacity: 1; } }

.ck-cell { border: 1px solid rgba(240,192,64,0.025); }

.ck-cell.lit {
  background: rgba(240,192,64,0.045);
  animation: cell-flash 0.6s ease forwards;
}

@keyframes cell-flash {
  0%   { background: rgba(240,192,64,0.18); }
  100% { background: rgba(240,192,64,0.03); }
}

/* ── Centre stage ── */
.ck-stage {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Orbital system ── */
.ck-orbital {
  position: relative;
  width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2.4rem;
}

.ck-ring {
  position: absolute;
  border-radius: 50%;
  animation: ring-spin var(--rs, 18s) linear infinite var(--rdir, normal);
}

.ck-ring-1 {
  inset: -28px;
  border: 1px dashed rgba(240,192,64,0.22);
  --rs: 22s;
}

.ck-ring-2 {
  inset: -8px;
  border: 1px solid rgba(90,215,255,0.15);
  border-top-color: rgba(90,215,255,0.5);
  --rs: 8s;
  --rdir: reverse;
}

.ck-ring-3 {
  inset: 12px;
  border: 1px solid rgba(240,192,64,0.08);
  border-right-color: rgba(240,192,64,0.45);
  --rs: 5s;
}

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

.ck-ring-2::after {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan), 0 0 20px rgba(90,215,255,0.5);
}

.ck-core-glow {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,192,64,0.22) 0%, transparent 70%);
  animation: core-breathe 3s ease-in-out infinite;
}

@keyframes core-breathe {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50%       { transform: scale(1.1); opacity: 1; }
}

.ck-logo-wrap {
  position: relative;
  z-index: 2;
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  animation:
    logo-appear 0.8s cubic-bezier(0.16, 1, 0.3, 1) both,
    logo-float 4s 1s ease-in-out infinite;
}

@keyframes logo-appear {
  from { opacity: 0; transform: scale(0.3) rotate(-15deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0deg); }
}

@keyframes logo-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-6px) rotate(1deg); }
}

.ck-logo {
  width: 80px; height: 80px;
  object-fit: contain;
  /* Matches landing.css logo-glow animation style */
  filter:
    brightness(1.6) contrast(1.3)
    drop-shadow(0 0 12px rgba(0,200,255,0.8))
    drop-shadow(0 0 24px rgba(240,192,64,0.4));
  animation: logo-glow 2.5s ease-in-out infinite alternate;
}

@keyframes logo-glow {
  0%   { filter: brightness(1.6) contrast(1.3) drop-shadow(0 0 4px rgba(0,200,255,0.3)) drop-shadow(0 0 12px rgba(240,192,64,0.2)); }
  100% { filter: brightness(1.6) contrast(1.3) drop-shadow(0 0 12px rgba(0,200,255,0.8)) drop-shadow(0 0 28px rgba(240,192,64,0.5)); }
}

.ck-crown-piece {
  position: absolute;
  font-size: 18px;
  opacity: 0;
  animation: piece-orbit 12s linear infinite;
  filter: drop-shadow(0 0 6px rgba(240,192,64,0.6));
}

.ck-crown-piece:nth-child(1) { animation-delay: 0s;  color: var(--gold); }
.ck-crown-piece:nth-child(2) { animation-delay: -4s; color: var(--cyan); }
.ck-crown-piece:nth-child(3) { animation-delay: -8s; color: var(--gold-bright); }

@keyframes piece-orbit {
  0%   { opacity: 0; transform: rotate(0deg)   translateX(90px) rotate(0deg); }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(360deg) translateX(90px) rotate(-360deg); }
}

/* ── Title — Cinzel, matching .logo-text in landing.css ── */
.ck-title-wrap {
  text-align: center;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.ck-title {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 2px;
  color: #ffffff;                          /* CHECK = white, matches .logo-text */
  display: block;
  opacity: 0;
  animation: title-slide 0.9s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ORA — exact match to .logo-accent in landing.css */
.ck-title .ck-accent {
  color: var(--gold);
}

@keyframes title-slide {
  from { opacity: 0; transform: translateY(24px) skewX(-3deg); }
  to   { opacity: 1; transform: translateY(0)    skewX(0); }
}


/* ── Tagline — Inter, matches nav/body copy style ── */
.ck-tagline {
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(170,170,170,0.5);           /* close to --text-secondary at low opacity */
  margin-bottom: 2.2rem;
  opacity: 0;
  animation: fade-up 0.8s 0.7s ease forwards;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Progress bar ── */
.ck-progress-wrap {
  width: 220px;
  margin-bottom: 1.4rem;
  opacity: 0;
  animation: fade-up 0.6s 1s ease forwards;
}

.ck-progress-track {
  width: 100%;
  height: 2px;
  background: rgba(240,192,64,0.12);
  border-radius: 2px;
  overflow: hidden;
}

.ck-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright), var(--gold-dim));
  background-size: 200% auto;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(240,192,64,0.5);
  animation:
    progress-grow  2.4s 1s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    progress-shine 1.2s 1s linear infinite;
}

@keyframes progress-grow {
  0%   { width: 0%; }
  60%  { width: 75%; }
  85%  { width: 92%; }
  100% { width: 100%; }
}

@keyframes progress-shine { to { background-position: 200% center; } }

.ck-progress-pct {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  font-family: Inter, sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(240,192,64,0.4);
  font-variant-numeric: tabular-nums;
}

/* ── Status dots ── */
.ck-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Inter, sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(170,170,170,0.4);           /* --text-secondary tinted */
  text-transform: uppercase;
  opacity: 0;
  animation: fade-up 0.6s 1.2s ease forwards;
}

.ck-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
  animation: dot-wave 1.2s ease-in-out infinite;
}

.ck-dot:nth-child(2) { animation-delay: 0.15s; background: var(--gold-bright); }
.ck-dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes dot-wave {
  0%, 80%, 100% { transform: translateY(0)    scale(0.85); opacity: 0.5; }
  40%            { transform: translateY(-6px) scale(1.15); opacity: 1; }
}

/* ── Corner bracket marks ── */
.ck-corner {
  position: fixed;
  width: 36px; height: 36px;
  opacity: 0;
  animation: corner-fade 0.8s 0.5s ease forwards;
}

.ck-corner--tl { top:20px; left:20px;   border-top:1px solid rgba(240,192,64,0.28); border-left:1px solid rgba(240,192,64,0.28); }
.ck-corner--tr { top:20px; right:20px;  border-top:1px solid rgba(240,192,64,0.28); border-right:1px solid rgba(240,192,64,0.28); }
.ck-corner--bl { bottom:20px; left:20px;  border-bottom:1px solid rgba(240,192,64,0.28); border-left:1px solid rgba(240,192,64,0.28); }
.ck-corner--br { bottom:20px; right:20px; border-bottom:1px solid rgba(240,192,64,0.28); border-right:1px solid rgba(240,192,64,0.28); }

@keyframes corner-fade { to { opacity: 1; } }

/* ── Scanline overlay ── */
.ck-scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px
  );
  pointer-events: none;
  z-index: 100;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .ck-progress-fill { width: 100% !important; }
}