/* Vedganga Foods & Chemicals — Global styles
   Complements Tailwind CDN. Custom typography, cursor, marquee, spotlight. */

:root{
  --v-cream: #F5EFE4;
  --v-cream-2: #FBF7EE;
  --v-bone: #EAE2D0;
  --v-ink: #14170F;
  --v-forest: #1F3A2E;
  --v-forest-2: #2C5245;
  --v-gold: #C9A662;
  --v-gold-deep: #A8823E;
  --v-rule: rgba(20,23,15,0.12);
}

*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html,body{ background: var(--v-cream); color: var(--v-ink); }
body{ font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-feature-settings:"ss01","cv11"; }
.font-display{ font-family: 'Cinzel Decorative', serif; letter-spacing: 0.01em; }
.font-serif-body{ font-family: 'Cormorant Garamond', serif; }
.font-mono-caps{ font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing:.22em; text-transform:uppercase; }

/* Grain overlay */
.grain{ position:relative; }
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Line-mask reveal */
.mask-line{ display:block; overflow:hidden; }
.mask-line > span{ display:inline-block; transform:translateY(110%); }

/* Custom underline link */
.link-under{ position:relative; display:inline-block; }
.link-under::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right center; transition:transform .5s cubic-bezier(.6,.05,.05,1);
}
.link-under:hover::after{ transform:scaleX(1); transform-origin:left center; }

/* Rule */
.hair{ height:1px; background:var(--v-rule); width:100%; }

/* Marquee */
@keyframes v-marquee{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
.marquee-track{ display:flex; gap:3rem; width:max-content; animation: v-marquee 42s linear infinite; }

/* Product spotlight card */
.spotlight{
  position:relative; overflow:hidden; isolation:isolate; background:var(--v-cream-2);
  border:1px solid var(--v-rule);
}
.spotlight .spot{
  position:absolute; inset:auto; width:340px; height:340px; border-radius:9999px;
  background:radial-gradient(circle at center, rgba(201,166,98,.55), rgba(201,166,98,0) 60%);
  pointer-events:none; transform:translate(-50%,-50%); transition:opacity .3s;
  opacity:0;
}
.spotlight:hover .spot{ opacity:1; }
.spotlight img{
  filter:grayscale(15%) contrast(1.03) saturate(.95); transition:transform .8s cubic-bezier(.2,.6,.2,1), filter .6s;
}
.spotlight:hover img{ transform:scale(1.06); filter:grayscale(0%) contrast(1.05) saturate(1.05); }

/* Clip frames */
.clip-arch{ clip-path: path('M 0 220 C 0 60, 90 0, 200 0 L 200 0 C 310 0, 400 60, 400 220 L 400 500 L 0 500 Z'); }

/* Chapter number */
.chapter-num{ font-family:'Cinzel Decorative', serif; color:var(--v-gold-deep); letter-spacing:.2em; }

/* Menu overlay */
.menu-overlay{ transform:translateY(-100%); transition:transform .8s cubic-bezier(.75,0,.25,1); }
.menu-overlay.open{ transform:translateY(0); }

/* Buttons */
.btn-pill{
  display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.4rem; border-radius:9999px;
  background:var(--v-ink); color:var(--v-cream); font-weight:600; letter-spacing:.02em; font-size:.9rem;
  transition: transform .35s cubic-bezier(.2,.6,.2,1), background .3s, color .3s;
  border:1px solid var(--v-ink);
}
.btn-pill:hover{ background:var(--v-forest); border-color:var(--v-forest); transform:translateY(-2px); }
.btn-pill .dot{ width:6px; height:6px; border-radius:9999px; background:var(--v-gold); }

.btn-outline{
  display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.4rem; border-radius:9999px;
  border:1px solid var(--v-ink); color:var(--v-ink); font-weight:600; font-size:.9rem;
  transition: background .3s, color .3s, transform .35s cubic-bezier(.2,.6,.2,1);
}
.btn-outline:hover{ background:var(--v-ink); color:var(--v-cream); transform:translateY(-2px); }

.btn-gold{
  display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.6rem; border-radius:9999px;
  background:var(--v-gold); color:var(--v-ink); font-weight:700; letter-spacing:.02em; font-size:.92rem;
  transition:transform .35s cubic-bezier(.2,.6,.2,1), background .3s;
  border:1px solid var(--v-gold-deep);
}
.btn-gold:hover{ background:var(--v-gold-deep); color:var(--v-cream); transform:translateY(-2px); }

/* Input */
.field{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--v-rule);
  padding:.9rem .1rem; font-size:1rem; color:var(--v-ink); outline:none;
  transition:border-color .3s;
  font-family: 'Manrope', sans-serif;
}
.field:focus{ border-color:var(--v-ink); }
.field::placeholder{ color:rgba(20,23,15,.45); }
textarea.field{ resize:vertical; min-height:120px; }
label.field-label{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(20,23,15,.55); }

/* Modal */
.modal-backdrop{ background:rgba(20,23,15,.55); backdrop-filter: blur(6px); }
.modal-panel{ background:var(--v-cream); border:1px solid var(--v-rule); }

/* Hero mask */
.hero-mask{ -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }

/* Number ticker */
.tick{ font-variant-numeric: tabular-nums; }

/* Chip */
.chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border-radius:9999px;
  border:1px solid var(--v-rule); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--v-forest-2);
  background:var(--v-cream-2);
}

/* Focus ring */
*:focus-visible{ outline:1px solid var(--v-forest); outline-offset:3px; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--v-cream); }
::-webkit-scrollbar-thumb{ background:var(--v-forest); border-radius:9999px; }

/* Lenis */
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-scrolling iframe{ pointer-events:none; }