/* ============================================================
   Krishi Vyapar — "Rich" UI layer (Next.js / Framer feel)
   Framework-free. Safe to include on any page. Respects
   prefers-reduced-motion. Nothing here blocks interaction.
   ============================================================ */
:root{
  --rich-accent: var(--accent, #2E7D32);
  --rich-glow:   color-mix(in srgb, var(--rich-accent) 55%, transparent);
  --rich-ease:   cubic-bezier(.16,1,.3,1);
}

/* ---- Animated gradient-mesh background ---- */
.rich-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--bg,#0d0d18);}
.rich-bg::before,.rich-bg::after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;
  filter:blur(90px);opacity:.55;background:radial-gradient(circle at 30% 30%,var(--rich-accent),transparent 60%);
  animation:richFloat 22s var(--rich-ease) infinite alternate;}
.rich-bg::after{right:-15vmax;bottom:-15vmax;
  background:radial-gradient(circle at 70% 70%,var(--gold,#C79A3A),transparent 60%);animation-duration:28s;animation-delay:-6s;}
.rich-bg .orb{position:absolute;width:34vmax;height:34vmax;border-radius:50%;filter:blur(70px);opacity:.35;
  background:radial-gradient(circle,color-mix(in srgb,var(--rich-accent) 70%,#5b8cff),transparent 62%);
  top:20%;left:35%;animation:richFloat2 26s var(--rich-ease) infinite alternate;}
@keyframes richFloat{0%{transform:translate(-10vmax,-8vmax) scale(1)}100%{transform:translate(6vmax,10vmax) scale(1.25)}}
@keyframes richFloat2{0%{transform:translate(6vmax,4vmax) scale(1.1)}100%{transform:translate(-8vmax,-6vmax) scale(.85)}}

/* subtle animated grid overlay (Next.js landing vibe) */
.rich-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.10;
  background-image:linear-gradient(color-mix(in srgb,var(--rich-accent) 40%,#fff) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in srgb,var(--rich-accent) 40%,#fff) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 40%,transparent 100%);
  animation:richGrid 20s linear infinite;}
@keyframes richGrid{to{background-position:44px 44px}}

/* ---- Top progress bar (route change / form submit) ---- */
#richProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100000;
  background:linear-gradient(90deg,var(--rich-accent),var(--gold,#C79A3A));
  box-shadow:0 0 12px var(--rich-glow);opacity:0;transition:opacity .2s;}
#richProgress.go{opacity:1;}

/* ---- First-paint page loader ---- */
#richLoader{position:fixed;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center;
  background:var(--bg,#0d0d18);transition:opacity .5s var(--rich-ease),visibility .5s;}
#richLoader.done{opacity:0;visibility:hidden;}
#richLoader .spin{width:46px;height:46px;border-radius:50%;
  border:3px solid color-mix(in srgb,var(--rich-accent) 22%,transparent);
  border-top-color:var(--rich-accent);animation:richSpin .8s linear infinite;}
@keyframes richSpin{to{transform:rotate(360deg)}}

/* ---- Scroll-reveal ---- */
.rich-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--rich-ease),transform .7s var(--rich-ease);}
.rich-reveal.in{opacity:1;transform:none;}

/* ---- Glass + tilt cards ---- */
.rich-glass{background:color-mix(in srgb,var(--card,#181828) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--border2,rgba(255,255,255,.14));border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.35);}
.rich-tilt{transition:transform .18s var(--rich-ease),box-shadow .18s var(--rich-ease);transform-style:preserve-3d;will-change:transform;}
.rich-tilt:hover{box-shadow:0 24px 60px rgba(0,0,0,.45);}

/* ---- Shimmer skeleton ---- */
.rich-skel{position:relative;overflow:hidden;background:color-mix(in srgb,var(--rich-accent) 8%,#2a2a3a);border-radius:8px;}
.rich-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 12%,transparent),transparent);
  animation:richShimmer 1.4s infinite;}
@keyframes richShimmer{100%{transform:translateX(100%)}}

/* ---- Magnetic / shiny buttons ---- */
.rich-btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .15s var(--rich-ease);}
.rich-btn:hover{transform:translateY(-1px);}
.rich-btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,#fff 25%,transparent),transparent 60%);}
.rich-btn:hover::before{opacity:1;}

@media (prefers-reduced-motion:reduce){
  .rich-bg::before,.rich-bg::after,.rich-bg .orb,.rich-grid,#richLoader .spin{animation:none!important;}
  .rich-reveal{opacity:1;transform:none;}
}

/* ============================================================
   RICH 3D / TYPOGRAPHY / ICONS / VIEWS  (v98+)
   ============================================================ */

/* ---- Display + variable fonts (loaded via rich partial) ---- */
:root{
  --font-display: "Clash Display","Space Grotesk","DM Sans",system-ui,sans-serif;
  --font-body:    "Inter","DM Sans",system-ui,sans-serif;
  --font-mono:    "JetBrains Mono","Space Mono",ui-monospace,monospace;
  --rich-radius: 18px;
  --rich-elev-1: 0 2px 8px rgba(0,0,0,.10);
  --rich-elev-2: 0 10px 30px rgba(0,0,0,.18);
  --rich-elev-3: 0 24px 60px rgba(0,0,0,.28);
}
.rich-display{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;}
.rich-body{font-family:var(--font-body);}
.rich-mono{font-family:var(--font-mono);font-feature-settings:"tnum" 1,"zero" 1;}

/* fluid display headings */
.rich-h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.9rem,4vw,3.4rem);line-height:1.04;
  background:linear-gradient(135deg,var(--text,#111),color-mix(in srgb,var(--rich-accent) 70%,var(--text,#111)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.rich-h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.3rem,2.4vw,2rem);}
.rich-kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rich-accent);font-weight:700;}

/* ---- 3D scene primitives ---- */
.rich-3d{perspective:1200px;transform-style:preserve-3d;}
.rich-3d-card{position:relative;transform-style:preserve-3d;border-radius:var(--rich-radius);
  transition:transform .25s var(--rich-ease),box-shadow .25s var(--rich-ease);will-change:transform;
  box-shadow:var(--rich-elev-2);}
.rich-3d-card>*{transform:translateZ(28px);}         /* content floats above surface */
.rich-3d-card .rich-3d-bg{position:absolute;inset:0;transform:translateZ(0);border-radius:inherit;z-index:0;}
.rich-3d-card:hover{box-shadow:var(--rich-elev-3);}
.rich-3d-card .rich-shine{position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 55%);
  transition:opacity .25s;}
.rich-3d-card:hover .rich-shine{opacity:1;}

/* floating layered depth (parallax on scroll via JS) */
.rich-layer{will-change:transform;transition:transform .12s linear;}

/* isometric stat tiles */
.rich-iso{position:relative;border-radius:16px;padding:1rem 1.15rem;overflow:hidden;
  background:linear-gradient(145deg,color-mix(in srgb,var(--card,#181828) 88%,transparent),
    color-mix(in srgb,var(--rich-accent) 10%,var(--card,#181828)));
  border:1px solid var(--border2,rgba(255,255,255,.14));box-shadow:var(--rich-elev-2);
  transform:translateZ(0);transition:transform .2s var(--rich-ease);}
.rich-iso:hover{transform:translateY(-4px) rotateX(4deg);}
.rich-iso::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,var(--rich-glow),transparent 70%);opacity:.6;}

/* ---- Icon system ---- */
.rich-ic{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;
  border-radius:14px;font-size:1.15rem;position:relative;isolation:isolate;
  background:color-mix(in srgb,var(--rich-accent) 16%,transparent);color:var(--rich-accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rich-accent) 30%,transparent);
  transition:transform .2s var(--rich-ease),box-shadow .2s;}
.rich-ic:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 24px var(--rich-glow);}
.rich-ic.grad{background:linear-gradient(135deg,var(--rich-accent),var(--gold,#C79A3A));color:#fff;box-shadow:0 6px 18px var(--rich-glow);}
.rich-ic.pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  box-shadow:0 0 0 0 var(--rich-glow);animation:richPulse 2s infinite;}
@keyframes richPulse{70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.rich-ic.spin i{animation:richSpin 6s linear infinite;}

/* animated underline links (view nav) */
.rich-link{position:relative;text-decoration:none;color:inherit;}
.rich-link::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--rich-accent),var(--gold,#C79A3A));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--rich-ease);}
.rich-link:hover::after{transform:scaleX(1);}

/* ---- View transitions (fade+slide on load) ---- */
@keyframes richIn{from{opacity:0;transform:translateY(14px) scale(.995)}to{opacity:1;transform:none}}
.rich-view{animation:richIn .5s var(--rich-ease) both;}
.rich-stagger>*{animation:richIn .5s var(--rich-ease) both;}
.rich-stagger>*:nth-child(1){animation-delay:.04s}.rich-stagger>*:nth-child(2){animation-delay:.09s}
.rich-stagger>*:nth-child(3){animation-delay:.14s}.rich-stagger>*:nth-child(4){animation-delay:.19s}
.rich-stagger>*:nth-child(5){animation-delay:.24s}.rich-stagger>*:nth-child(6){animation-delay:.29s}
.rich-stagger>*:nth-child(7){animation-delay:.34s}.rich-stagger>*:nth-child(8){animation-delay:.39s}

/* ---- Theme / mode chooser dock ---- */
#richDock{position:fixed;right:14px;bottom:14px;z-index:9000;display:flex;flex-direction:column;gap:8px;}
#richDock button{width:40px;height:40px;border-radius:12px;border:1px solid var(--border2,rgba(255,255,255,.18));
  background:color-mix(in srgb,var(--card,#181828) 85%,transparent);color:var(--text,#eee);
  backdrop-filter:blur(10px);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--rich-elev-2);transition:transform .18s var(--rich-ease);}
#richDock button:hover{transform:translateY(-2px) scale(1.06);}
html.rich-3d-mode .rich-3d-target{transform-style:preserve-3d;}

@media (prefers-reduced-motion:reduce){
  .rich-view,.rich-stagger>*{animation:none!important;}
  .rich-iso:hover,.rich-3d-card,.rich-ic:hover{transform:none!important;}
}

/* motion master switch (dock) */
html.rich-motion-off *,html.rich-motion-off *::before,html.rich-motion-off *::after{
  animation:none!important;transition:none!important;}
html.rich-motion-off .rich-bg,html.rich-motion-off .rich-grid{opacity:.25;}