/* Custom fonts & global styles */
body {
  font-family: 'Cairo', system-ui, sans-serif;
}

/* ============================================================
   SPLASH SCREEN — Premium Motion Graphics (كفو)
   ============================================================ */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% 18%, #eaf7ff 0%, rgba(234, 247, 255, 0) 55%),
    radial-gradient(900px 600px at 80% 90%, #cdeafd 0%, rgba(205, 234, 253, 0) 60%),
    linear-gradient(160deg, #f3fbff 0%, #d6efff 35%, #a9dcf7 70%, #7cc6ef 100%);
  will-change: opacity, transform, filter;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exit: gentle zoom-out + fade with motion blur */
.splash-screen.splash-exit {
  opacity: 0;
  transform: scale(1.12);
  filter: blur(8px);
  pointer-events: none;
}
.splash-screen.splash-done {
  display: none;
}

/* Ambient floating glow blobs */
.splash-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}
.splash-blob-1 {
  width: 480px;
  height: 480px;
  top: -120px;
  left: -80px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(124, 198, 239, 0));
  animation: splashFloat1 9s ease-in-out infinite;
}
.splash-blob-2 {
  width: 560px;
  height: 560px;
  bottom: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(0, 163, 224, 0.45), rgba(0, 163, 224, 0));
  animation: splashFloat2 11s ease-in-out infinite;
}
.splash-blob-3 {
  width: 360px;
  height: 360px;
  top: 40%;
  left: 60%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(168, 220, 247, 0));
  animation: splashFloat3 8s ease-in-out infinite;
}
@keyframes splashFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 50px) scale(1.1); }
}
@keyframes splashFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -40px) scale(1.08); }
}
@keyframes splashFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 30px) scale(1.12); }
}

/* Particle canvas */
.splash-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Stage (logo + word) */
.splash-stage {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

/* Cluster logo — word emerges from its center */
.splash-logo-wrap {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  opacity: 0;
  transform: scale(0.6);
  animation: splashLogoIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}
.splash-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  padding: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  filter: drop-shadow(0 10px 30px rgba(0, 136, 204, 0.35));
}
.splash-logo-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 30px rgba(0, 163, 224, 0.4), inset 0 0 25px rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: splashRingPulse 2.4s ease-out 0.6s forwards;
}
@keyframes splashLogoIn {
  0% { opacity: 0; transform: scale(0.5) translateY(10px); }
  60% { opacity: 1; transform: scale(1.06) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes splashRingPulse {
  0% { opacity: 0; transform: scale(0.8); }
  40% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Word wrapper — emerges from logo center then condenses into place */
.splash-word-wrap {
  position: relative;
  margin-top: -6px;
  opacity: 0;
  transform: translateY(-46px) scale(0.35);
  filter: blur(14px);
  animation: splashWordEmerge 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
}
@keyframes splashWordEmerge {
  0% { opacity: 0; transform: translateY(-50px) scale(0.3); filter: blur(16px); }
  55% { opacity: 1; transform: translateY(6px) scale(1.08); filter: blur(2px); }
  75% { transform: translateY(0) scale(0.98); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* The 3D glass/metallic word "كفو" */
.splash-word {
  position: relative;
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-weight: 700;
  font-size: clamp(72px, 18vw, 190px);
  line-height: 1;
  letter-spacing: -2px;
  margin: 0;
  display: inline-block;
}
.splash-word-fill {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    175deg,
    #ffffff 0%,
    #eaf6ff 28%,
    #bfe6fb 50%,
    #ffffff 62%,
    #8fcef0 80%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* 3D / metallic depth via layered text shadows */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 1px rgba(180, 220, 245, 0.7),
    0 4px 6px rgba(0, 120, 190, 0.35),
    0 8px 18px rgba(0, 120, 190, 0.28),
    0 14px 40px rgba(0, 100, 170, 0.25);
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.55));
}
/* Soft blue glowing edge behind the white word */
.splash-word::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 3px rgba(0, 163, 224, 0.55);
  filter: blur(6px);
  opacity: 0.9;
}

/* Sweeping glossy shine pass across the letters */
.splash-word-shine {
  position: absolute;
  inset: 0;
  display: inline-block;
  color: transparent;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0) 62%
  );
  background-size: 250% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  /* Runs after the word has settled */
  animation: splashShine 1.4s ease-in-out 1.95s 1 forwards;
}
@keyframes splashShine {
  0% { background-position: 200% 0; }
  100% { background-position: -120% 0; }
}

/* Light underline that draws under the word */
.splash-underline {
  height: 3px;
  width: 0;
  margin: 18px auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(0, 163, 224, 0) 0%, #00a3e0 50%, rgba(0, 163, 224, 0) 100%);
  box-shadow: 0 0 14px rgba(0, 163, 224, 0.7);
  animation: splashUnderline 1s ease-out 2.1s forwards;
}
@keyframes splashUnderline {
  0% { width: 0; opacity: 0; }
  100% { width: 220px; opacity: 1; }
}

/* Tagline fades in */
.splash-tagline {
  margin-top: 14px;
  color: #0b3c5d;
  font-weight: 600;
  font-size: clamp(14px, 2.2vw, 20px);
  letter-spacing: 0.5px;
  opacity: 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  animation: splashTagline 1s ease-out 2.35s forwards;
}
@keyframes splashTagline {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 0.92; transform: translateY(0); }
}

/* Skip button (glassmorphism) */
.splash-skip {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 99px;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0b3c5d;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 100, 170, 0.18);
  cursor: pointer;
  opacity: 0;
  transition: background 0.25s ease, transform 0.25s ease;
  animation: splashTagline 0.8s ease-out 1.6s forwards;
}
.splash-skip:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: translateX(-50%) translateY(-2px);
}

/* Lock scroll while splash is active */
body.splash-active {
  overflow: hidden;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .splash-blob,
  .splash-logo-ring,
  .splash-word-shine {
    animation: none !important;
  }
  .splash-word-wrap,
  .splash-logo-wrap {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }
}

.font-cairo {
  font-family: 'Cairo', system-ui, sans-serif;
}

.arabic-calligraphy {
  font-family: 'Amiri', 'Reem Kufi', serif;
}

.signature-font {
  font-family: 'Brush Script MT', 'Lucida Handwriting', cursive;
  font-style: italic;
  font-weight: bold;
}

/* Certificate styles */
.certificate-wrap {
  background:
    radial-gradient(ellipse at top left, rgba(208, 225, 249, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(133, 179, 209, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
  border: 1px solid #e5e7eb;
}

.seal-container {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Print specific */
@media print {
  @page {
    size: A4 landscape;
    margin: 0;
  }

  body {
    background: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .no-print {
    display: none !important;
  }

  .certificate-wrap {
    box-shadow: none !important;
    width: 100% !important;
    height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    page-break-inside: avoid;
  }
}

/* Drop zone */
#drop-zone.dragover {
  background-color: rgba(0, 136, 204, 0.1);
  border-color: #0088cc;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #0088cc;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0077b3;
}

/* Loading spinner */
.spinner {
  border: 3px solid rgba(0, 136, 204, 0.1);
  border-top-color: #0088cc;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  display: inline-block;
}

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

/* Result card animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out;
}