/* ==========================================================================
   FKRCCI Homepage — earthy 3D hero reskin
   Loaded ONLY by index.html, after css/style.css. Everything in this file is
   scoped under body.home-3d so services.html / gallery.html / news.html /
   become-member.html (which never load this file) are completely unaffected.

   DESIGN TOKEN PLAN
   ------------------------------------------------------------------------
   Palette (Karnataka red-soil / turmeric / sugarcane farmland, not corporate
   blue or agency-black):
     Soil red / terracotta   #A6431F  — Industry marker, deep accents
     Turmeric gold           #D89A2C  — primary accent / buttons
     Deep field green        #2F4A2E  — Agriculture marker, structural accent
     Warm paper (background) #F6EEDD
     Ink (text)               #221B14

   Mechanism: css/style.css already routes almost every color through CSS
   custom properties (--navy-950..50, --gold-300..700, --paper, --bronze-500,
   --royal-600). Remapping those variables inside body.home-3d cascades the
   new palette through buttons, dividers, section titles, the footer and the
   pyramid diagrams (which set inline background-color: var(--navy-700) etc.
   from JS — the browser re-resolves that var() against this scope) without
   editing style.css or touching any other page. A short list of hard-coded
   literal colors (a few rgb() greys/glows that don't go through a variable)
   are patched explicitly below.

   Type:
     --font-heading  "Fraunces"          — grounded, humanist display serif
     --font-body     "Inter"             — clean, highly legible body sans
     --font-kannada  "Noto Sans Kannada" — the ಕರುನಾಡು brand line only

   Signature element: see hero-3d.js for the Three.js marker layer. This file
   only supplies its layout/scrim/fallback styling.
   ========================================================================== */

body.home-3d {
  /* ---- structural "ink" scale (was --navy-*) ---- */
  --navy-950: #140f0a;
  --navy-900: #221b14; /* Ink */
  --navy-800: #2c2318;
  --navy-700: #3a2f20;
  --navy-600: #4a3d2b;
  --navy-500: #6b5c45;
  --navy-400: #8a7860;
  --navy-300: #ab9a80;
  --navy-200: #cbbfa8;
  --navy-100: #e4dcc9;
  --navy-50: #f2ece0;

  /* ---- accent scale: turmeric (light/mid) -> soil red (deep) ---- */
  --gold-100: #f5e4c3;
  --gold-200: #ead0a0;
  --gold-300: #e0bc7e;
  --gold-400: #d8a94f;
  --gold-500: #d89a2c; /* Turmeric gold */
  --gold-600: #b5651d;
  --gold-700: #a6431f; /* Soil red */

  --bronze-500: #7f5722;
  --royal-600: #2f4a2e; /* Deep field green, used where the old design had a cool "royal" contrast note */
  --paper: #f6eedd; /* Warm paper */

  --font-body: "Inter", "Work Sans", Arial, Helvetica, sans-serif;
  --font-heading: "Fraunces", "Newsreader", Georgia, serif;
  --font-kannada: "Noto Sans Kannada", "Inter", Arial, sans-serif;

  /* palette tokens available for hero-3d.js (read via getComputedStyle) */
  --soil-red: #a6431f;
  --turmeric: #d89a2c;
  --field-green: #2f4a2e;
  --clay: #c9714c;
  --ink: #221b14;
  --warm-paper: #f6eedd;
}

/* Kannada brand line needs a script-aware stack; Fraunces has no Kannada glyphs */
body.home-3d .short-name,
body.home-3d .site-preloader__brand-name {
  font-family: var(--font-kannada);
}

/* ---- literal-color patches (values that bypass the variables above) ---- */
body.home-3d .hero__lead,
body.home-3d .index-block p.body-text,
body.home-3d .body-text,
body.home-3d .bullet-item p,
body.home-3d .bullet-item span.bullet-text,
body.home-3d .advocacy-card p,
body.home-3d .community-intro p,
body.home-3d .csr-note p {
  color: rgb(34 27 20 / 0.85);
}
body.home-3d .split-section__bg::after {
  background-image: linear-gradient(to right, rgb(246 238 221 / 0.45) 0%, rgb(246 238 221 / 0.98) 40%, #f6eedd 60%);
}
@media (min-width: 1024px) {
  body.home-3d .split-section__bg::after {
    background-color: transparent;
    background-image: linear-gradient(to right, rgb(246 238 221 / 0.05) 0%, rgb(246 238 221 / 0.4) 38%, rgb(246 238 221 / 0.92) 52%, #f6eedd 62%);
  }
}
body.home-3d .hero__bg-desktop::after {
  background: linear-gradient(180deg, rgb(34 27 20 / 0.12), rgb(34 27 20 / 0.02) 40%, rgb(34 27 20 / 0.18));
}
body.home-3d .title-splash__text {
  text-shadow: 0 2px 28px rgb(216 154 44 / 0.35), 0 0 80px rgb(246 238 221 / 0.8);
}
body.home-3d .site-preloader__logo {
  box-shadow: 0 0 0 6px rgb(246 238 221 / 0.95), 0 22px 50px -12px rgb(20 15 10 / 0.35), 0 0 44px 8px rgb(216 154 44 / 0.45);
}
body.home-3d .navbar::after {
  box-shadow: 0 0 10px 1px rgb(216 154 44 / 0.55);
}
body.home-3d .btn-gold {
  box-shadow: 0 0 0 0 rgb(216 154 44 / 0.6), 0 1px 2px rgb(0 0 0 / 0.05);
}
body.home-3d .btn-gold:hover {
  box-shadow: 0 6px 22px -2px rgb(216 154 44 / 0.7);
}

/* Clear, on-brand focus ring for keyboard users (buttons, links, markers) */
body.home-3d :focus-visible {
  outline: 3px solid var(--turmeric);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   Hero 3D marker layer
   ========================================================================== */

/* The old warp-speed starfield <canvas id="heroCanvas"> has been removed from
   the markup for the homepage (see index.html) — it doesn't fit the toned-down
   civic tone this brief asks for. main.js#initHeroCanvas() no-ops safely when
   the element is absent, so no JS changes were required there. */

.hero3d {
  position: absolute;
  inset: 0;
  z-index: 1; /* above hero__bg-desktop + hero__glow, below .hero__grid content (z-index 4) */
  display: none; /* only shown once the 3-column hero layout is active (see .hero__grid in style.css, gated at 1200px — below that the hero stacks to 1 column and these markers would float over stacked content instead of the navy panel) */
  pointer-events: none;
}
@media (min-width: 1200px) {
  .hero3d { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  /* Static scene only — hero-3d.js also declines to mount the WebGL canvas
     entirely under reduced motion. This keeps the (always-visible) marker
     labels but strips all motion/animation from them. */
  .hero3d-marker,
  .hero3d-marker__dot { animation: none !important; transition: none !important; }
}

/* .hero__grid-spacer is an empty decorative column (left of the copy block)
   that sits above the 3D layer in stacking order (z-index: 4). Left
   unguarded it silently eats hover/click on the two left-side markers,
   which sit underneath it. Only the actual copy needs pointer events. */
body.home-3d .hero__grid { pointer-events: none; }
body.home-3d .hero__content { pointer-events: auto; }
body.home-3d .hero__media { pointer-events: auto; }

/* Contrast scrim behind the hero copy column, layered above the 3D canvas so
   text stays AA-legible regardless of what's happening in the video/photo
   behind it. Sized to hug the content column, not the whole hero. */
.hero3d__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Leave the far-left of the frame (where the background video's own
     detail/motion reads, behind the Health Care / Agriculture markers)
     fully clear — only lightly wash the zone directly under the title
     and collage for legibility, then fade back out. */
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 22%,
    rgb(246 238 221 / 0.5) 38%,
    rgb(246 238 221 / 0.38) 54%,
    transparent 70%
  );
}

.hero3d__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero3d__markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero3d-marker {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: auto;
  cursor: pointer;
  animation: hero3dFloat 5.5s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

.hero3d-marker__dot {
  height: 0.85rem;
  width: 0.85rem;
  border-radius: 999px;
  background: var(--mc, var(--turmeric));
  box-shadow: 0 0 0 4px rgb(246 238 221 / 0.55), 0 0 16px 3px var(--mc, var(--turmeric));
  transition: transform 0.3s var(--ease-punch), box-shadow 0.3s;
}
.hero3d-marker:hover .hero3d-marker__dot,
.hero3d-marker:focus-visible .hero3d-marker__dot {
  transform: scale(1.35);
  box-shadow: 0 0 0 5px rgb(246 238 221 / 0.7), 0 0 26px 7px var(--mc, var(--turmeric));
}

.hero3d-marker__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--ink);
  background: rgb(246 238 221 / 0.88);
  border: 1px solid rgb(34 27 20 / 0.12);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  box-shadow: 0 4px 10px -4px rgb(34 27 20 / 0.35);
  transition: transform 0.3s var(--ease-punch), background-color 0.3s, color 0.3s;
}
.hero3d-marker:hover .hero3d-marker__label,
.hero3d-marker:focus-visible .hero3d-marker__label {
  transform: translateY(-2px);
  background: var(--mc, var(--turmeric));
  color: var(--warm-paper);
  border-color: transparent;
}

@keyframes hero3dFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -6px; }
}

/* Low-power / low-end gate (see hero-3d.js): when JS decides not to mount the
   WebGL canvas it adds this class so the markers still show (as plain CSS
   glow dots) but without the extra beam/particle layer or parallax. */
.hero3d.is-css-only .hero3d__canvas { display: none; }