/* Catapult Scale — custom styles beyond Tailwind */

html { scroll-behavior: smooth; }

body { font-feature-settings: "ss01", "cv11"; }

/* Scroll reveal: hidden by default, fades + slides in when .visible class is added by JS */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle text gradient option for "Catapult Scale" wordmark */
.wordmark-gradient {
  background: linear-gradient(135deg, #f5f5f5 0%, #c5d8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Custom scrollbar (dark theme) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #0060df; }

/* Form focus glow */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(0, 96, 223, 0.15);
}

/* Mobile sticky CTA (JS-controlled, shows after hero scroll, hides on #apply section) */
.sticky-cta-mobile {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px;
  /* iPhone safe-area-inset: extends backdrop through home-indicator zone so content doesn't peek through */
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(10, 10, 10, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 40;
  display: none;
}
@media (max-width: 768px) {
  .sticky-cta-mobile.visible { display: block; }
}

/* Subtle hover lift on cards */
.hover-lift { transition: transform 0.2s ease, border-color 0.2s ease; }
.hover-lift:hover { transform: translateY(-2px); }

/* Payroll counter: number climbs in white, then strike-line draws across + text turns red at end */
.payroll-num {
  position: relative;
  display: inline-block;
  color: #f5f5f5;
  transition: color 0.5s ease-out;
}
.payroll-num::after {
  content: '';
  position: absolute;
  left: 0;
  top: 52%;
  width: 0;
  height: 4px;
  background: #ff7060;
  transform: translateY(-50%);
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 2;
}
.payroll-num.struck { color: #ff7060; }
.payroll-num.struck::after { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .payroll-num::after { transition: none; }
}

/* Print-safe */
@media print {
  header, .sticky-cta-mobile, footer { display: none; }
  body { background: white; color: black; }
}