/* ==========================================================================
   Krushi Mangal — site.css
   Layer that complements Tailwind (Play CDN): scroll-reveal system, gradient
   text, hero/section treatments, marquee, custom scrollbar and reduced-motion.
   ========================================================================== */

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* keep desktop nav links on one line */
.site-nav nav a, .site-nav nav button { white-space: nowrap; }
::selection { background: #f2c94c; color: #16261a; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: #b9cdbc #eef3ea; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #eef3ea; }
::-webkit-scrollbar-thumb { background: #b9cdbc; border-radius: 999px; border: 3px solid #eef3ea; }
::-webkit-scrollbar-thumb:hover { background: #227a3a; }

/* ------------------------------------------------------- Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="zoom"]  { transform: scale(.93); }
[data-reveal="down"]  { transform: translateY(-30px); }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* ------------------------------------------------------- Helpers */
.text-gradient {
  background: linear-gradient(90deg, #227a3a 0%, #4ea25a 45%, #f59e0b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.link-underline { background-image: linear-gradient(#f59e0b, #f59e0b); background-size: 0% 2px; background-repeat: no-repeat; background-position: left bottom; transition: background-size .3s var(--ease); }
.link-underline:hover { background-size: 100% 2px; }

/* Eyebrow marker */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .74rem; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; display: inline-block; opacity: .8; }

/* Hero image ken-burns */
.kenburns { animation: kb 18s ease-out forwards; }
@keyframes kb { from { transform: scale(1.05); } to { transform: scale(1.16); } }

/* Marquee track */
.marquee-track { display: inline-flex; gap: 3rem; white-space: nowrap; }

/* Card hover sheen */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transition: transform .7s var(--ease);
}
.sheen:hover::after { transform: translateX(120%); }

/* Value-chain connector line (desktop) */
.chain-line { position: relative; }
.chain-line::before { content: ""; position: absolute; left: 12%; right: 12%; top: 46px; height: 2px; background: repeating-linear-gradient(90deg, rgba(242,201,76,.7) 0 10px, transparent 10px 22px); z-index: 0; }
@media (max-width: 1023px) { .chain-line::before { display: none; } }

/* Prose (legal pages) */
.prose h2 { font-family: 'Sora', sans-serif; font-weight: 600; color: #16261a; font-size: 1.35rem; margin: 1.8rem 0 .6rem; }
.prose p, .prose li { color: #4b564d; line-height: 1.8; margin-bottom: .7rem; }
.prose ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1rem; }
.prose a { color: #227a3a; text-decoration: underline; }

/* Devanagari font when Marathi active */
html[lang="mr"] body { font-family: 'Noto Sans Devanagari', 'Inter', sans-serif; }
html[lang="mr"] .font-display,
html[lang="mr"] h1, html[lang="mr"] h2, html[lang="mr"] h3, html[lang="mr"] h4 { font-family: 'Noto Sans Devanagari', sans-serif; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .kenburns { animation: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}