@import "tailwindcss" source(none);
@source "../**/*.{js,jsx,ts,tsx,mdx}";

:root {
  --background: #f5f8ff;
  --surface: #ffffff;
  --foreground: #0f1722;
  --muted: #545f69;
  --accent: #df1f56;
  --accent-strong: #b71443;
  --border: #cfd6dc;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-body);
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body), sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

.headline-font {
  font-family: var(--font-headline), serif;
}

.telugu-font {
  font-family: var(--font-body), "Noto Sans Telugu", "Nirmala UI", "Gautami", sans-serif;
}

@media (max-width: 768px) {
  .headline-font {
    /* Serif Telugu looks dense on small screens; use sans for readability on mobile */
    font-family: var(--font-body), sans-serif;
    line-height: 1.35;
  }
}

.news-shell {
  background:
    radial-gradient(circle at 2% 0%, #ffd7ec 0%, transparent 30%),
    radial-gradient(circle at 97% 5%, #d9f2ff 0%, transparent 28%),
    radial-gradient(circle at 70% 100%, #ffe8cc 0%, transparent 35%),
    linear-gradient(180deg, #edf3ff 0%, #f6f9ff 100%),
    var(--background);
}

.site-footer {
  background:
    radial-gradient(circle at 0% 0%, #ffdff0 0%, transparent 28%),
    radial-gradient(circle at 100% 100%, #dff3ff 0%, transparent 30%),
    #f7fbff;
}

.site-footer a:hover {
  color: var(--accent);
}

.ticker {
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-scroll 20s linear infinite;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.rise-in {
  animation: rise-in 0.65s ease-out both;
}

.flip-hidden {
  visibility: hidden;
}

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.15s; }
.stagger-3 { animation-delay: 0.25s; }
.stagger-4 { animation-delay: 0.35s; }

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}