/* ============================================================
   SRI RAM GROUP — CORE STYLESHEET
   Design system: industrial-luxury conglomerate
   Palette : Navy #0B1F3A / Gold #C89B3C / Steel #525252 / Charcoal #121212
   Type    : Fraunces (display) + Inter (body) + IBM Plex Mono (data/eyebrow)
   ============================================================ */

:root{
  --navy:        #0B1F3A;
  --navy-deep:   #071527;
  --navy-mid:    #10294d;
  --gold:        #C89B3C;
  --gold-light:  #E4C878;
  --gold-dim:    #8a6a26;
  --steel:       #525252;
  --steel-light: #8a8a8a;
  --white:       #FFFFFF;
  --off-white:   #F4F5F7;
  --charcoal:    #121212;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --ease-industrial: cubic-bezier(.16,.84,.44,1);
}

*{scroll-behavior:smooth;}
html{scroll-padding-top:96px;}
body{
  font-family: var(--font-body);
  background: var(--navy-deep);
  color: var(--off-white);
  overflow-x:hidden;
}
::selection{ background: var(--gold); color: var(--navy-deep); }

/* Scrollbar */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background: var(--navy-deep); }
::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius:4px; }

h1,h2,h3,h4,.font-display{ font-family: var(--font-display); }
.font-mono{ font-family: var(--font-mono); }

/* ---------- Eyebrow / rail-tag label (industrial data plate) ---------- */
.eyebrow{
  font-family: var(--font-mono);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.72rem;
  color: var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.eyebrow::before{
  content:'';
  width:28px; height:1px;
  background: var(--gold);
  display:inline-block;
}

/* ---------- Glassmorphism ---------- */
.glass{
  background: linear-gradient(155deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(200,155,60,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.glass-light{
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(11,31,58,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.gold-hairline{ border: 1px solid rgba(200,155,60,.35); }

/* ---------- Steel-plate diagonal section dividers ---------- */
.cut-bottom{ clip-path: polygon(0 0,100% 0,100% 92%,0 100%); }
.cut-top{ clip-path: polygon(0 8%,100% 0,100% 100%,0 100%); }
.cut-both{ clip-path: polygon(0 5%,100% 0,100% 95%,0 100%); }

/* ---------- Buttons ---------- */
.btn-gold{
  display:inline-flex; align-items:center; gap:.6rem;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight:600;
  padding:.9rem 2rem;
  letter-spacing:.03em;
  position:relative;
  overflow:hidden;
  transition: all .4s var(--ease-industrial);
}
.btn-gold:hover{ background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(200,155,60,.55); }

.btn-outline{
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid rgba(255,255,255,.35);
  color: var(--white);
  padding:.9rem 2rem;
  letter-spacing:.03em;
  transition: all .4s var(--ease-industrial);
}
.btn-outline:hover{ border-color: var(--gold); color: var(--gold); background: rgba(200,155,60,.06); }

/* ---------- Nav ---------- */
#site-nav{
  transition: background .4s var(--ease-industrial), padding .4s var(--ease-industrial), box-shadow .4s var(--ease-industrial);
}
#site-nav.scrolled{
  background: rgba(7,21,39,.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -15px rgba(0,0,0,.6);
}
.nav-link{ position:relative; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0%;
  background: var(--gold); transition: width .35s var(--ease-industrial);
}
.nav-link:hover::after{ width:100%; }

/* Mega menu — FIXED: previously used the `.glass` utility (only ~7% white
   overlay), which let scrolled page content show through and mix with the
   dropdown text, making it unreadable. Now uses a solid, near-opaque navy
   surface with a refined blur/shadow for depth, and a higher z-index so it
   always sits above page content regardless of scroll position. */
.mega-panel{
  opacity:0; visibility:hidden; transform: translateY(-8px);
  transition: all .35s var(--ease-industrial);
  background: linear-gradient(180deg, rgba(9,25,46,.99), rgba(7,21,39,.99));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.75);
  z-index: 55;
}
.mega-group:hover .mega-panel,
.mega-panel:hover{
  opacity:1; visibility:visible; transform: translateY(0);
}

/* ---------- Cards ---------- */
.biz-card{
  position:relative;
  overflow:hidden;
  transition: transform .5s var(--ease-industrial), border-color .5s;
}
.biz-card::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 0%, rgba(200,155,60,.16), transparent 60%);
  opacity:0; transition: opacity .5s;
}
.biz-card:hover{ transform: translateY(-10px); border-color: rgba(200,155,60,.55); }
.biz-card:hover::before{ opacity:1; }

/* ---------- Stat counters ---------- */
.stat-num{
  font-family: var(--font-display);
  font-weight:600;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Rail timeline (signature element) ---------- */
.rail-track{
  position:relative;
  height:4px;
  background: linear-gradient(90deg, rgba(200,155,60,.15), rgba(200,155,60,.5), rgba(200,155,60,.15));
}
.rail-track::before{
  /* rail sleepers */
  content:'';
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 2px, transparent 2px 26px);
  opacity:.5;
}
.rail-progress{
  position:absolute; top:0; left:0; height:100%;
  width:0%;
  background: var(--gold);
  box-shadow: 0 0 18px 2px rgba(200,155,60,.7);
}
.rail-node{
  width:16px; height:16px; border-radius:50%;
  background: var(--navy-deep);
  border:2px solid var(--gold-dim);
  transition: all .4s var(--ease-industrial);
}
.rail-node.active{
  background: var(--gold);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 6px rgba(200,155,60,.18);
}

/* ---------- India map ---------- */
/* SAFETY NET: Tailwind's CDN generates `.hidden{display:none}` at runtime.
   If that CDN script is ever blocked, this hand-written fallback ensures
   show/hide logic (form success/error messages, mobile menu, sector tabs)
   still works correctly instead of leaving hidden content visible.
   NOTE: deliberately NOT !important — Tailwind's own responsive overrides
   like `hidden lg:block` (used by the mega-menu) must still be able to
   win once Tailwind loads normally. This is a fallback only. */
.hidden{ display:none; }

/* ---------- India map (removed — see logistics-network footprint section) ---------- */

/* ---------- Marquee (client logos) ---------- */
.marquee-track{
  display:flex; width:max-content;
  animation: marquee 32s linear infinite;
}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-wrap:hover .marquee-track{ animation-play-state: paused; }

/* ---------- Reveal-on-scroll base (GSAP will animate from these) ---------- */
/* NOTE: .reveal / .reveal-item intentionally have NO default hidden state here.
   Content must be visible even if the GSAP CDN script fails to load, is blocked,
   or the page is viewed offline. The hidden-then-fade-in state is applied by
   JavaScript itself (see js/main.js) only once GSAP has confirmed it is present,
   immediately before animating. See also the safety-net in js/main.js that
   force-reveals everything if GSAP never loads within 2 seconds. */

/* ---------- Testimonial ---------- */
.testi-card{ scroll-snap-align:center; }
.testi-track{ scroll-snap-type: x mandatory; }

/* ---------- Misc ---------- */
.text-outline{
  -webkit-text-stroke: 1px rgba(200,155,60,.5);
  color: transparent;
}
.noise::after{
  content:'';
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events:none;
  mix-blend-mode: overlay;
}
#particles-canvas{ position:absolute; inset:0; z-index:0; }

/* Loader */
#site-loader{ transition: opacity .6s ease, visibility .6s ease; }

/* Mobile menu */
#mobile-menu{ transition: transform .5s var(--ease-industrial); }

@media (max-width: 768px){
  .cut-bottom, .cut-top, .cut-both{ clip-path:none; }
}

/* ============================================================
   MOTION LAYER — added per business-theme correction pass
   Floating theme icons, gradient blobs, image-hero treatments
   ============================================================ */

/* Floating icon badges used in themed page headers */
.float-icon{
  position:absolute;
  opacity:.9;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
  animation: floaty 6s ease-in-out infinite;
}
.float-icon.d2{ animation-duration:7.5s; animation-delay:.6s; }
.float-icon.d3{ animation-duration:5.2s; animation-delay:1.2s; }
.float-icon.d4{ animation-duration:8.5s; animation-delay:.3s; }
@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-18px) rotate(4deg); }
}

/* Slow-drifting gradient blobs behind headers */
.blob{
  position:absolute;
  border-radius:50%;
  filter: blur(60px);
  opacity:.35;
  animation: blobmove 14s ease-in-out infinite;
  pointer-events:none;
}
@keyframes blobmove{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(30px,-20px) scale(1.08); }
  66%{ transform: translate(-20px,20px) scale(0.95); }
}

/* Animated dashed route line (mining / logistics motif) */
.route-line{
  stroke-dasharray: 8 10;
  animation: dash 3.5s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset:-180; } }

/* Pulsing node (crypto / blockchain motif) */
.pulse-node{ animation: pulseNode 2.4s ease-in-out infinite; }
@keyframes pulseNode{
  0%,100%{ opacity:.5; r:5; }
  50%{ opacity:1; r:7; }
}

/* Slow rotating ring (chip / tech motif) */
.spin-slow{ animation: spin 18s linear infinite; transform-origin:center; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Typewriter-style underline sweep for headings */
.sweep-underline{ position:relative; display:inline-block; }
.sweep-underline::after{
  content:''; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background: var(--gold);
  transform: scaleX(0); transform-origin:left;
  animation: sweepIn 1.4s var(--ease-industrial) forwards .3s;
}
@keyframes sweepIn{ to{ transform: scaleX(1); } }

/* Photographic hero banner treatment (real uploaded photos) */
.photo-hero{
  position:relative;
  background-size: cover;
  background-position: center;
}
.photo-hero::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,21,39,.55), rgba(7,21,39,.88) 70%, var(--navy-deep) 100%);
}
.photo-hero > *{ position:relative; z-index:1; }

/* Ken-Burns slow zoom for photo galleries */
.ken-burns{ animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform: scale(1); } to{ transform: scale(1.08); } }

/* Gallery image tilt on hover */
.tilt-card{ transition: transform .5s var(--ease-industrial), box-shadow .5s; }
.tilt-card:hover{ transform: translateY(-6px) scale(1.015); box-shadow: 0 25px 50px -20px rgba(0,0,0,.6); }

/* Truck-drive-by loop (used on mining/transport pages) */
.drive-track{ overflow:hidden; position:relative; }
.driving-icon{ animation: driveby 9s linear infinite; }
@keyframes driveby{
  from{ transform: translateX(-10%); }
  to{ transform: translateX(110%); }
}

/* ============================================================
   UTILITY WIDGETS — scroll progress, back-to-top, WhatsApp float,
   theme toggle. Added per correction-round 2.
   ============================================================ */

#scroll-progress{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:70; background:transparent; }
#scroll-progress-bar{ height:100%; width:0%; background:linear-gradient(90deg, var(--gold), var(--gold-light)); transition:width .1s linear; }

#whatsapp-float{
  position:fixed; bottom:24px; left:24px; width:54px; height:54px; z-index:60;
  background:#25D366; color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.55);
  transition: transform .35s var(--ease-industrial);
  animation: whatsappPulse 2.8s ease-in-out infinite;
}
#whatsapp-float:hover{ transform:scale(1.1); animation-play-state:paused; }
@keyframes whatsappPulse{
  0%,100%{ box-shadow:0 10px 28px -8px rgba(0,0,0,.55), 0 0 0 0 rgba(37,211,102,.5); }
  50%{ box-shadow:0 10px 28px -8px rgba(0,0,0,.55), 0 0 0 10px rgba(37,211,102,0); }
}

#back-to-top{
  position:fixed; bottom:24px; right:24px; width:48px; height:48px; z-index:60;
  background:var(--gold); color:var(--navy-deep); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition: all .35s var(--ease-industrial);
}
#back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
#back-to-top:hover{ background:var(--gold-light); transform:translateY(-3px); }

@media (max-width: 640px){
  #whatsapp-float{ width:48px; height:48px; bottom:16px; left:16px; }
  #back-to-top{ width:42px; height:42px; bottom:16px; right:16px; }
}

/* ---------- Magnetic buttons (subtle cursor-follow lift via JS-set transform) ---------- */
.magnetic-btn{ will-change: transform; transition: transform .25s var(--ease-industrial); }

/* ---------- Split-text hero reveal (word-by-word) ---------- */
/* NOTE: no default hidden transform here either — same reasoning as .reveal
   above. JS sets the hidden state immediately before animating in. */
.split-word{ display:inline-block; overflow:hidden; }
.split-word > span{ display:inline-block; }

/* ============================================================
   CARD 3D TILT — mousemove-driven perspective tilt on business
   cards, applied via JS (see initCardTilt in main.js). No default
   transform here so cards look correct even with JS disabled.
   ============================================================ */
.tilt-3d{ transform-style: preserve-3d; will-change: transform; transition: transform .15s ease-out, box-shadow .3s; }

/* ============================================================
   ANIMATED SECTION DIVIDER — subtle gradient sweep used between
   major sections instead of a plain border line.
   ============================================================ */
.section-divider{
  position:relative; height:1px; width:100%;
  background: linear-gradient(90deg, transparent, rgba(200,155,60,.5), transparent);
  overflow:hidden;
}
.section-divider::after{
  content:''; position:absolute; top:0; left:-30%; height:100%; width:30%;
  background: linear-gradient(90deg, transparent, rgba(228,200,120,.9), transparent);
  animation: dividerSweep 5s ease-in-out infinite;
}
@keyframes dividerSweep{
  0%{ left:-30%; }
  50%{ left:100%; }
  100%{ left:100%; }
}

/* ---------- Image reveal (clip-path wipe-in on scroll) ---------- */
.img-reveal{ position:relative; overflow:hidden; }
.img-reveal img{ transform: scale(1.15); transition: transform 1.2s var(--ease-industrial); }
.img-reveal.revealed img{ transform: scale(1); }
.img-reveal::before{
  content:''; position:absolute; inset:0; background: var(--gold);
  transform-origin: right; z-index:2; transition: transform .9s var(--ease-industrial);
}
.img-reveal.revealed::before{ transform: scaleX(0); }

/* ---------- Page-transition fade (on internal link navigation) ---------- */
#page-transition{
  position:fixed; inset:0; z-index:999; background:var(--navy-deep);
  opacity:0; pointer-events:none; transition: opacity .35s ease;
}
#page-transition.active{ opacity:1; pointer-events:all; }