/* BCCO shared styles (on top of Tailwind) */

:root { scroll-behavior: smooth; }

body { font-family: "Inter", system-ui, sans-serif; }
.font-display { font-family: "Sora", "Inter", sans-serif; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.revealed { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* Glass card */
.glass { background: rgba(255,255,255,.65); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.55); }
.dark .glass { background: rgba(15,26,54,.55); border-color: rgba(255,255,255,.1); }

/* Signature: Suraksha radar ring in hero */
.radar { position: relative; }
.radar::before, .radar::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  border: 1.5px solid rgba(56,189,248,.45); animation: radar-ping 3.2s ease-out infinite;
}
.radar::after { animation-delay: 1.6s; }
@keyframes radar-ping { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* Slow float for hero orbs */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.floaty { animation: floaty 7s ease-in-out infinite; }
.floaty-2 { animation: floaty 9s ease-in-out infinite reverse; }

/* Tab pills */
.tab-active { background: linear-gradient(90deg, #1d4ed8, #0ea5e9); color: #fff !important; box-shadow: 0 8px 20px -8px rgba(29,78,216,.5); }

/* Progress bars animate in */
.bar-fill { width: 0; transition: width 1.4s cubic-bezier(.22,.61,.36,1) .2s; }
.revealed .bar-fill { width: var(--w); }

/* Nice focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #0ea5e9; outline-offset: 2px; border-radius: .5rem;
}

@media (prefers-reduced-motion: reduce) {
  .radar::before, .radar::after, .floaty, .floaty-2 { animation: none !important; }
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* Print: certificate */
@media print {
  header, footer, .no-print, #site-header, #site-footer { display: none !important; }
  .print-cert { box-shadow: none !important; border: 4px double #1d4ed8 !important; }
}