Web/src/index.css

@import "tailwindcss";

/* ===== Landing page premium effects ===== */
@keyframes lp-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.lp-marquee {
  animation: lp-marquee 32s linear infinite;
}
.lp-marquee:hover {
  animation-play-state: paused;
}

@keyframes lp-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.lp-gradient-text {
  background-size: 200% auto;
  animation: lp-gradient-shift 5s ease-in-out infinite;
}

@keyframes lp-shine {
  from { transform: translateX(-120%) skewX(-18deg); }
  to { transform: translateX(240%) skewX(-18deg); }
}
.lp-btn-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-120%) skewX(-18deg);
}
.lp-btn-shine:hover::after {
  animation: lp-shine 0.9s ease;
}

@keyframes lp-stripes {
  from { background-position: 0 0; }
  to { background-position: 24px 0; }
}
.lp-live-stripes {
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.35) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.35) 75%, transparent 75%
  );
  background-size: 24px 24px;
  animation: lp-stripes 1s linear infinite;
}

@keyframes lp-radar {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}
.lp-radar-ring {
  animation: lp-radar 2.4s cubic-bezier(0, 0.2, 0.6, 1) infinite;
}

.lp-grid-overlay {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%);
}

.lp-mask-fade-x {
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

html {
  scroll-behavior: smooth;
}

/* Heatmap Styles */
.react-calendar-heatmap text {
  font-size: 10px;
  fill: #9ca3af;
}

.react-calendar-heatmap rect {
  rx: 2px;
}

.react-calendar-heatmap rect:hover {
  stroke: #166534;
  stroke-width: 1px;
}

.react-calendar-heatmap .color-empty {
  fill: #f3f4f6;
}

.react-calendar-heatmap .color-scale-1 {
  fill: #dcfce7;
}

.react-calendar-heatmap .color-scale-2 {
  fill: #86efac;
}

.react-calendar-heatmap .color-scale-3 {
  fill: #4ade80;
}

.react-calendar-heatmap .color-scale-4 {
  fill: #16a34a;
}

.react-calendar-heatmap .color-scale-5 {
  fill: #15803d;
}

/* Accessibility High Contrast Mode Overrides */
.high-contrast * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
}

.high-contrast img,
.high-contrast video,
.high-contrastcanvas {
  filter: grayscale(100%) contrast(150%);
}

.high-contrast a {
  text-decoration: underline !important;
  color: #ffff00 !important;
}

.high-contrast button,
.high-contrast input,
.high-contrast select,
.high-contrast textarea {
  border: 2px solid #fff !important;
  background-color: #000 !important;
  color: #fff !important;
}

/* Readable Font Helper */
.readable-font {
  font-family: 'Arial', 'Verdana', sans-serif !important;
  line-height: 1.8 !important;
  letter-spacing: 0.05em !important;
}

.readable-font p,
.readable-font h1,
.readable-font h2,
.readable-font h3,
.readable-font h4,
.readable-font h5,
.readable-font h6,
.readable-font span,
.readable-font button,
.readable-font a {
  font-family: 'Arial', 'Verdana', sans-serif !important;
}