/* 
  =========================================
  Sri Associates - Custom Styles (Non-Tailwind)
  Professional Light Blue Gradient Theme
  =========================================
*/

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.dark ::-webkit-scrollbar-track {
  background: #000c22;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 89, 187, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 89, 187, 0.5);
}

/* Custom SVG chart animations */
.chart-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawChart 3s ease-out forwards;
}

.chart-dot {
  opacity: 0;
  animation: fadeInDot 0.5s ease-out 2s forwards;
}

.chart-fill {
  transform-origin: bottom;
  animation: chartFillFade 2s ease-out forwards;
}

/* Keyframes */
@keyframes drawChart {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fadeInDot {
  to {
    opacity: 1;
  }
}

@keyframes chartFillFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.12;
  }
}

/* =========================================
   About Section — Animated Profile Photo Rings
   ========================================= */
@keyframes ringRotateCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ringRotateCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.about-ring-1 {
  animation: ringRotateCW 14s linear infinite;
  transform-origin: center;
}
.about-ring-2 {
  animation: ringRotateCCW 9s linear infinite;
  transform-origin: center;
}

/* =========================================
   4 Featured Cards — Unique Color Themes
   ========================================= */
.featured-card-1,
.featured-card-2,
.featured-card-3,
.featured-card-4 {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
  position: relative;
  overflow: hidden;
}

/* — Card 1: Sky Blue hover — */
.featured-card-1::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 60%, #e0f2fe 100%);
  opacity: 0; transition: opacity 0.35s ease;
}
.featured-card-1:hover::before { opacity: 1; }
.featured-card-1:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 18px 40px rgba(14,165,233,0.22), 0 4px 12px rgba(14,165,233,0.10);
  border-color: rgba(14,165,233,0.55) !important;
}

/* — Card 2: Violet hover — */
.featured-card-2::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 60%, #ede9fe 100%);
  opacity: 0; transition: opacity 0.35s ease;
}
.featured-card-2:hover::before { opacity: 1; }
.featured-card-2:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 18px 40px rgba(139,92,246,0.22), 0 4px 12px rgba(139,92,246,0.10);
  border-color: rgba(139,92,246,0.50) !important;
}

/* — Card 3: Emerald hover — */
.featured-card-3::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 60%, #d1fae5 100%);
  opacity: 0; transition: opacity 0.35s ease;
}
.featured-card-3:hover::before { opacity: 1; }
.featured-card-3:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 18px 40px rgba(16,185,129,0.22), 0 4px 12px rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.50) !important;
}

/* — Card 4: Amber hover — */
.featured-card-4::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 60%, #fef3c7 100%);
  opacity: 0; transition: opacity 0.35s ease;
}
.featured-card-4:hover::before { opacity: 1; }
.featured-card-4:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 18px 40px rgba(245,158,11,0.22), 0 4px 12px rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.50) !important;
}


.featured-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Light blue gradient overlay — hidden by default, shown on hover only */
.featured-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 55%, #e0f2fe 100%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.dark .featured-card::before {
  background: linear-gradient(135deg, rgba(15,23,42,0.97) 0%, rgba(23,37,84,0.96) 55%, rgba(30,58,138,0.45) 100%);
}

/* Show gradient on hover — desktop */
.featured-card:hover::before {
  opacity: 1;
}

/* Hover lift & shadow */
.featured-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 18px 40px rgba(56, 189, 248, 0.22), 0 4px 16px rgba(59, 130, 246, 0.10);
  border-color: rgba(56, 189, 248, 0.50) !important;
}

.dark .featured-card:hover {
  box-shadow: 0 18px 40px rgba(59, 130, 246, 0.30), 0 4px 16px rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.55) !important;
}

/* ── Appeal & Penalty critical card — rose overlay on hover ── */
.featured-card.critical-card::before {
  background: linear-gradient(135deg, #fee2e2 0%, #fef3c7 100%) !important;
}

.dark .featured-card.critical-card::before {
  background: linear-gradient(135deg, rgba(15,23,42,0.97) 0%, rgba(69,10,10,0.85) 55%, rgba(136,19,55,0.28) 100%) !important;
}

.featured-card.critical-card:hover {
  box-shadow: 0 18px 40px rgba(239, 68, 68, 0.18), 0 4px 16px rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
}

.dark .featured-card.critical-card:hover {
  box-shadow: 0 18px 40px rgba(239, 68, 68, 0.30), 0 4px 16px rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.60) !important;
}

/* Critical card — font & icon recoloring on hover */
.featured-card.critical-card:hover h3 { color: #dc2626 !important; }
.dark .featured-card.critical-card:hover h3 { color: #fca5a5 !important; }

.featured-card.critical-card:hover span.inline-block {
  color: #dc2626 !important;
  background-color: rgba(220,38,38,0.10) !important;
  border-color: rgba(220,38,38,0.20) !important;
}
.dark .featured-card.critical-card:hover span.inline-block {
  color: #fca5a5 !important;
  background-color: rgba(220,38,38,0.25) !important;
  border-color: rgba(220,38,38,0.30) !important;
}

.featured-card.critical-card:hover .flex.items-center.gap-2.font-semibold { color: #dc2626 !important; }
.dark .featured-card.critical-card:hover .flex.items-center.gap-2.font-semibold { color: #fca5a5 !important; }

.featured-card.critical-card:hover .w-14.h-14.rounded-full {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

/* =========================================
   SCROLL REVEAL MOTION EFFECTS
   ========================================= */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay helpers */
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }

/* =========================================
   SPLASH LOADER
   ========================================= */
.splash-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.splash-loader.splash-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 89, 187, 0.08) 0%, #ffffff 70%);
  pointer-events: none;
}

.splash-center {
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.splash-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #0059bb;
  border-right-color: rgba(0, 89, 187, 0.3);
  animation: splashSpin 1.4s linear infinite;
}

.splash-ring-inner {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 89, 187, 0.18);
  animation: splashPulseRing 2s ease-in-out infinite;
}

.splash-logo-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(0, 89, 187, 0.08), 0 10px 40px rgba(0, 89, 187, 0.15);
  overflow: hidden;
  animation: splashLogoAppear 0.5s ease-out forwards, splashLogoPulse 2s ease-in-out infinite;
}

.splash-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.splash-brand-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #001a48;
  letter-spacing: 0.04em;
  margin: 0 0 4px 0;
  animation: splashFadeUp 0.6s ease 0.2s both;
}

.splash-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #0059bb;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 28px 0;
  animation: splashFadeUp 0.6s ease 0.35s both;
}

.splash-progress-track {
  width: 160px;
  height: 3px;
  background: rgba(0, 89, 187, 0.15);
  border-radius: 99px;
  overflow: hidden;
  animation: splashFadeUp 0.4s ease 0.4s both;
}

.splash-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #001a48, #0059bb, #0070ea);
  background-size: 200% 100%;
  animation: splashProgress 2.7s ease-in-out forwards,
             splashShimmer 1.2s linear infinite;
}

/* ---- Keyframes ---- */
@keyframes splashSpin {
  to { transform: rotate(360deg); }
}

@keyframes splashPulseRing {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.05); }
}

@keyframes splashLogoPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(0, 89, 187, 0.08), 0 10px 40px rgba(0, 89, 187, 0.15);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 12px rgba(0, 89, 187, 0.05), 0 15px 50px rgba(0, 89, 187, 0.22);
  }
}

@keyframes splashLogoAppear {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes splashProgress {
  0%   { width: 0%; }
  60%  { width: 70%; }
  90%  { width: 92%; }
  100% { width: 100%; }
}

@keyframes splashShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}