/* =====================================================================
   Home page custom animations (views/welcome.php)
   Pure CSS + vanilla JS (js/home-motion.js) — no jQuery, no libraries.
   Only transform / opacity / filter are animated, so the layout never changes.
   Everything is off for prefers-reduced-motion.
   ===================================================================== */
:root{
  --hm-ease: cubic-bezier(.22,.61,.36,1);
  --hm-out: cubic-bezier(.16,1,.3,1);
  --hm-orange: #ff7f00;
}

/* ---------- 1. Scroll progress bar (fixed, 3px — no layout impact) ---------- */
.hm-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:1100; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, #ff7f00, #ffb347 55%, #7c3aed);
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .hm-progress{ animation:hmProgress linear both; animation-timeline:scroll(root); }
  }
}
@keyframes hmProgress{ to{ transform:scaleX(1); } }

/* ---------- 2. Hero entrance (plays once on load, CSS only) ---------- */
@keyframes hmRiseBlur{ from{ transform:translate3d(0,26px,0); filter:blur(8px); } to{ transform:none; filter:blur(0); } }
@keyframes hmFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes hmFadeUp{ from{ opacity:0; transform:translate3d(0,18px,0); } to{ opacity:1; transform:none; } }
@keyframes hmPop{ 0%{ opacity:0; transform:translate3d(0,16px,0) scale(.9); } 70%{ opacity:1; transform:translate3d(0,-2px,0) scale(1.02); } 100%{ opacity:1; transform:none; } }
@keyframes hmGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes hmVisualIn{ from{ opacity:.25; transform:translate3d(46px,0,0) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes hmShine{ 0%{ background-position:150% 0; } 35%,100%{ background-position:-50% 0; } }

@media (prefers-reduced-motion: no-preference){
  /* Headline never starts invisible (keeps LCP fast): it rises out of a soft blur */
  .hm-hero-title h1{ animation:hmRiseBlur 1s var(--hm-out) backwards; }
  .hm-hero-title h1 span{ animation:hmFade 1s var(--hm-ease) .35s backwards; } /* inline: opacity only, no layout change */
  .hm-hero-title h1::after{ transform-origin:left center; animation:hmGrow .8s var(--hm-out) .7s backwards; }
  .hm-hero-text{ animation:hmFadeUp .8s var(--hm-ease) .45s backwards; }
  .hm-hero-cta .btn:nth-child(1){ animation:hmPop .75s var(--hm-out) .6s backwards; }
  .hm-hero-cta .btn:nth-child(2){ animation:hmPop .75s var(--hm-out) .72s backwards; }
  .hm-hero-visual{ animation:hmVisualIn 1.1s var(--hm-out) .15s backwards; }

  /* Light sweep across "AI-Powered Software" every few seconds */
  .hm-hero-title h1 strong{
    background-image:linear-gradient(100deg, currentColor 0%, currentColor 42%, #ff8a1f 50%, currentColor 58%, currentColor 100%);
    background-size:250% 100%; background-position:150% 0;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:hmShine 5s ease-in-out 1.4s infinite;
  }
}

/* ---------- 3. AI network behind the hero illustration ---------- */
.hm-hero-visual{ position:relative; isolation:isolate; }
.hm-hero-visual > img{ position:relative; z-index:1; }
.hm-network{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hm-network line{ stroke:rgba(255,127,0,.32); stroke-width:1.3; stroke-dasharray:4 7; }
.hm-network circle{ fill:#ff7f00; opacity:.5; transform-box:fill-box; transform-origin:center; }
.hm-network circle.hm-violet{ fill:#7c3aed; opacity:.35; }
@media (prefers-reduced-motion: no-preference){
  .hm-network line{ animation:hmDash 3.2s linear infinite; }
  .hm-network circle{ animation:hmPulse 3.4s ease-in-out infinite; }
  .hm-network circle:nth-of-type(2n){ animation-delay:.8s; }
  .hm-network circle:nth-of-type(3n){ animation-delay:1.6s; }
  .hm-network circle:nth-of-type(5n){ animation-delay:2.3s; }
}
@keyframes hmDash{ to{ stroke-dashoffset:-22; } }
@keyframes hmPulse{ 0%,100%{ transform:scale(1); opacity:.4; } 50%{ transform:scale(1.7); opacity:.85; } }

/* Mouse-follow tilt container (transform set by JS) */
.hm-tilt-wrap{ transition:transform .6s var(--hm-out); will-change:transform; }

/* ---------- 4. Scroll reveal (state set by JS only — content is visible without JS) ---------- */
html .hm-reveal[data-hm-state="hidden"]{ opacity:0; transition:none; }
html .hm-reveal[data-hm="up"][data-hm-state="hidden"]   { transform:translate3d(0,44px,0) scale(.97); }
html .hm-reveal[data-hm="left"][data-hm-state="hidden"] { transform:translate3d(-56px,0,0); }
html .hm-reveal[data-hm="right"][data-hm-state="hidden"]{ transform:translate3d(56px,0,0); }
html .hm-reveal[data-hm="zoom"][data-hm-state="hidden"] { transform:scale(.88); }
html .hm-reveal[data-hm="flip"][data-hm-state="hidden"] { transform:perspective(900px) rotateX(16deg) translate3d(0,34px,0); transform-origin:50% 100%; }
html .hm-reveal[data-hm-state="in"]{
  opacity:1; transform:none;
  transition:opacity .8s var(--hm-ease) var(--hm-delay,0ms), transform 1s var(--hm-out) var(--hm-delay,0ms);
}
@media (max-width:700px){
  html .hm-reveal[data-hm="left"][data-hm-state="hidden"], html .hm-reveal[data-hm="right"][data-hm-state="hidden"]{ transform:translate3d(0,30px,0); }
  html .hm-reveal[data-hm="up"][data-hm-state="hidden"]{ transform:translate3d(0,26px,0); }
}

/* Section headings: sharpen from a blur, then the orange separator draws in */
html .hm-heading[data-hm-state="hidden"] h2{ opacity:0; transform:translate3d(0,24px,0); filter:blur(6px); }
html .hm-heading[data-hm-state="hidden"] h2::after{ transform:scaleX(0); }
html .hm-heading h2::after{ transform-origin:left center; }
html .hm-heading.text-center h2::after{ transform-origin:center; }
html .hm-heading[data-hm-state="in"] h2{ opacity:1; transform:none; filter:none; transition:opacity .8s var(--hm-ease), transform .9s var(--hm-out), filter .9s var(--hm-ease); }
html .hm-heading[data-hm-state="in"] h2::after{ transform:scaleX(1); transition:transform .9s var(--hm-out) .35s; }
html .hm-heading[data-hm-state="hidden"] .lead-text{ opacity:0; transform:translate3d(0,16px,0); }
html .hm-heading[data-hm-state="in"] .lead-text{ opacity:1; transform:none; transition:opacity .8s var(--hm-ease) .2s, transform .9s var(--hm-out) .2s; }

/* Feature icons spin in when their card is revealed */
@keyframes hmIconIn{ from{ opacity:0; transform:rotate(-30deg) scale(.5); } to{ opacity:1; transform:none; } }
html .features-block[data-hm-state="in"] .icon img, html .features-block[data-hm-state="in"] .icon > i{ animation:hmIconIn .8s var(--hm-out) calc(var(--hm-delay,0ms) + 250ms) both; }

/* ---------- 5. Card tilt + light glare (desktop pointers only; transform set by JS) ---------- */
.hm-glare{ position:relative; }
.hm-glare::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), rgba(255,255,255,0) 55%);
  opacity:0; transition:opacity .35s ease;
}
.features-block.theme-one .hm-glare::after{ background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,127,0,.10), rgba(255,127,0,0) 55%); }
.hm-glare.is-tilting::after{ opacity:1; }
.hm-glare.is-tilting{ transition:transform .12s linear, box-shadow .3s ease, background-color .3s ease !important; }

/* ---------- 6. AI technology chips pop in one by one ---------- */
@keyframes hmChip{ from{ opacity:0; transform:translate3d(0,10px,0) scale(.88); } to{ opacity:1; transform:none; } }
html [data-hm-chips="hidden"] li{ opacity:0; }
html [data-hm-chips="in"] li{ animation:hmChip .55s var(--hm-out) calc(var(--i,0) * 70ms) both; }

/* ---------- 7. Magnetic hero buttons + click ripple ---------- */
.hm-magnetic{ transition:transform .35s var(--hm-out), box-shadow .25s ease, background-color .25s ease, color .25s ease !important; }
.hm-ripple-host{ position:relative; overflow:hidden; }
.hm-ripple{ position:absolute; border-radius:50%; pointer-events:none; transform:scale(0); background:rgba(255,255,255,.5); animation:hmRipple .65s ease-out forwards; }
.btn-outline-primary .hm-ripple{ background:rgba(255,127,0,.25); }
@keyframes hmRipple{ to{ transform:scale(2.8); opacity:0; } }

/* ---------- 8. App illustration float ---------- */
@media (prefers-reduced-motion: no-preference){
  img[src*="erp-mobileapp-features"]{ animation:hmFloat 7s ease-in-out infinite; }
}
@keyframes hmFloat{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(0,-12px,0); } }

/* ---------- Reduced motion: everything static and visible ---------- */
@media (prefers-reduced-motion: reduce){
  .hm-progress{ display:none; }
  html .hm-reveal[data-hm-state], html .hm-heading[data-hm-state] h2, html [data-hm-chips] li{ opacity:1 !important; transform:none !important; filter:none !important; }
}

/* =====================================================================
   India-first highlights (homepage) — saffron / white / green accents.
   Independent brand message: no emblems, logos or campaign artwork.
   ===================================================================== */
:root{ --hm-saffron:#ff9933; --hm-green:#138808; --hm-tricolor:linear-gradient(90deg,#ff9933 0%,#ff9933 30%,#f3efe8 42%,#f3efe8 58%,#138808 70%,#138808 100%); }

/* Hero badge */
.hm-india-badge{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 16px; padding:7px 16px 7px 10px;
  font-size:13px; font-weight:700; letter-spacing:.3px; color:#8a4100; line-height:1.3;
  background:#fff; border:1px solid #f1e3d6; border-radius:30px; box-shadow:0 6px 18px rgba(255,127,0,.10);
}
.hm-tricolor-dot{ width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(180deg,var(--hm-saffron) 0 33%,#fff 33% 66%,var(--hm-green) 66% 100%); box-shadow:0 0 0 1px rgba(0,0,0,.08) inset; }
@media (prefers-reduced-motion: no-preference){
  .hm-india-badge{ animation:hmFadeUp .7s var(--hm-out) .05s backwards; }
  .hm-tricolor-dot{ animation:hmBadgeGlow 4s ease-in-out 1.2s infinite; }
}
@keyframes hmBadgeGlow{ 0%,100%{ box-shadow:0 0 0 1px rgba(0,0,0,.08) inset, 0 0 0 0 rgba(255,153,51,0); } 50%{ box-shadow:0 0 0 1px rgba(0,0,0,.08) inset, 0 0 0 6px rgba(255,153,51,.18); } }

/* Rotating keyword: every phrase shares one grid cell, so the width is reserved (no layout shift) */
.hm-rotator-line{ font-weight:700; color:#3a3f47; margin-top:12px; }
.hm-rotator{ display:inline-grid; vertical-align:bottom; color:#b35300; }
.hm-rotator > span{ grid-area:1/1; }
.hm-rotator > span:not(:first-child){ opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .hm-rotator > span{ opacity:0; animation:hmRotate 9s var(--hm-ease) infinite; }
  .hm-rotator > span:nth-child(2){ animation-delay:3s; }
  .hm-rotator > span:nth-child(3){ animation-delay:6s; }
}
@keyframes hmRotate{
  0%{ opacity:0; transform:translate3d(0,55%,0); } 5%,28%{ opacity:1; transform:none; }
  33%,100%{ opacity:0; transform:translate3d(0,-55%,0); }
}
.hm-rotator > span{ background-image:linear-gradient(90deg,var(--hm-saffron),#ff7f00 60%,var(--hm-green)); background-size:100% 2px; background-repeat:no-repeat; background-position:0 100%; padding-bottom:2px; }

/* Building for Bharat */
.hm-about-eyebrow{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#8a4100; background:#fff1e2; border-radius:30px; padding:5px 13px; margin:0 0 12px; }
.hm-tricolor-sep h2::after{ background:var(--hm-tricolor) !important; width:90px !important; }
.hm-hindi{
  position:relative; display:inline-block; font-family:'Noto Sans Devanagari','Nirmala UI','Mangal','Kohinoor Devanagari',sans-serif;
  font-size:21px; font-weight:700; color:#14161a; margin:-6px 0 22px; padding-bottom:8px; line-height:1.5;
}
.hm-hindi::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px; background:var(--hm-tricolor); transform-origin:left center; }
html .hm-hindi[data-hm-state="hidden"]::after{ transform:scaleX(0); }
html .hm-hindi[data-hm-state="in"]::after{ transform:scaleX(1); transition:transform 1s var(--hm-out) .35s; }

.hm-bharat-points{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; }
.hm-bharat-points li{
  position:relative; padding:14px 16px 14px 20px; background:#fff; border:1px solid #f0ece6; border-radius:14px;
  box-shadow:0 6px 18px rgba(20,22,26,.04); transition:transform .3s var(--hm-out), box-shadow .3s ease;
}
.hm-bharat-points li::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:4px; background:linear-gradient(180deg,var(--hm-saffron),#f3efe8 50%,var(--hm-green)); }
.hm-bharat-points strong{ display:block; color:#14161a; font-size:15.5px; margin-bottom:2px; }
.hm-bharat-points span{ display:block; color:#5f6673; font-size:14.5px; line-height:1.55; }
@media (hover:hover){ .hm-bharat-points li:hover{ transform:translateX(4px); box-shadow:0 12px 26px rgba(20,22,26,.07); } }

/* Featured product status chips (on the orange product section) */
.hm-kranti{ display:block; color:#fff; margin-bottom:6px; }
.hm-status{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.hm-status li{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; font-weight:700; line-height:1.35; padding:6px 11px; border-radius:16px; }
.hm-status li.is-live{ background:#fff; color:#0f5c34; }
.hm-status li.is-roadmap{ background:rgba(255,255,255,.12); color:#fff; border:1px dashed rgba(255,255,255,.65); }
.hm-status li::before{ content:""; width:8px; height:8px; border-radius:50%; margin-top:4px; flex-shrink:0; }
.hm-status li.is-live::before{ background:#22c55e; }
.hm-status li.is-roadmap::before{ background:#ffd2b3; }
@media (prefers-reduced-motion: no-preference){
  .hm-status li.is-live::before{ animation:hmLiveDot 2.4s ease-in-out infinite; }
}
@keyframes hmLiveDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); } 60%{ box-shadow:0 0 0 6px rgba(34,197,94,0); } }
.featured-cta i{ transition:transform .25s var(--hm-out); }
.featured-product:hover .featured-cta i{ transform:translateX(5px); }

@media (max-width:575px){
  .hm-india-badge{ font-size:12px; padding:6px 12px 6px 8px; }
  .hm-hindi{ font-size:19px; }
}
@media (prefers-reduced-motion: reduce){
  .hm-rotator > span:not(:first-child){ display:none; }
  .hm-rotator > span:first-child{ opacity:1 !important; }
}