/* Home page — Arihantaa Powertech
   Hero markup + behavior: arihantaa copy 2 / src/components/sections/Hero.jsx
   Tailwind utilities: css/style.css rebuilt from copy 2 Vite production CSS
   (index-DbHkwKdv.css) so home hero class coverage matches React exactly.
*/

[data-route="/"] .hero-slide-fade {
  transition: opacity 0.7s ease;
}

[data-route="/"] .hero-progress-bar,
[data-route="/"] .ari-hero-progress {
  transform-origin: left center;
  height: 100%;
  background-color: var(--color-accent, #F15A24);
  width: 0%;
}

/* Hero.jsx progress track: transition-all duration-400 */
[data-route="/"] [data-ari-hero-slide] ~ div button [class*="h-[2px]"],
[data-route="/"] button[aria-label^="Go to slide"] > div {
  transition: width 400ms;
}

/* ── Stats.jsx column hover — exact React configuration ──────────────────
   Source: arihantaa/src/components/sections/Stats.jsx + StatCard.jsx

   Column:  hover:bg-accent/[0.01] · transition-all duration-500 · group
   Value:   group-hover:text-accent · transition-colors duration-500
   Desc:    group-hover:text-on-surface · transition-colors duration-300
   Line:    w-0 → group-hover:w-full · bg-accent · duration-500 · ease-out
*/
.ari-stats-col {
  transition: background-color 0.5s ease;
}
.ari-stats-col:hover {
  background-color: rgba(233, 101, 43, 0.01); /* accent/[0.01] */
}

/* Big value → accent */
.ari-stats-col .font-headline,
.ari-stats-col .group-hover\:text-accent {
  transition: color 0.5s ease;
}
.ari-stats-col:hover .font-headline,
.ari-stats-col:hover .group-hover\:text-accent {
  color: #e9652b !important; /* accent */
}

/* Description → on-surface */
.ari-stats-col .group-hover\:text-on-surface,
.ari-stats-col > div > p {
  transition: color 0.3s ease;
}
.ari-stats-col:hover .group-hover\:text-on-surface,
.ari-stats-col:hover > div > p {
  color: #1a1c1c !important; /* on-surface */
}

/* Bottom accent reveal bar (NOT a scroll score-bar) */
.ari-stats-col .w-full.h-px.overflow-hidden {
  position: relative;
  overflow: hidden;
  background-color: rgba(200, 166, 152, 0.2); /* outline-variant/20 */
}
.ari-stats-col .w-full.h-px.overflow-hidden > .bg-accent,
.ari-stats-col .group-hover\:w-full {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0 !important;
  background-color: #e9652b !important;
  /* Kill any ari-score-bar / ari-line-grow transforms */
  transform: none !important;
  opacity: 1 !important;
  transition: width 0.5s ease-out !important;
  transition-delay: 0s !important;
}
.ari-stats-col:hover .w-full.h-px.overflow-hidden > .bg-accent,
.ari-stats-col:hover .group-hover\:w-full {
  width: 100% !important;
}

/* ── Philosophy.jsx — exact React configuration ─────────────────────────
   Source: arihantaa/src/components/sections/Philosophy.jsx
   Image:  motion scale 1.2 + scroll y -12%→12% (js/animations.js)
   Tenets: hover:bg-accent/[0.005] · transition-colors duration-300
*/
.hover\:bg-accent\/\[0\.005\]:hover {
  background-color: rgba(233, 101, 43, 0.005);
}

[data-ari-philosophy] img.object-cover,
[data-ari-philosophy] img[class*="object-cover"] {
  transform-origin: center center;
  will-change: transform;
}

[data-ari-philosophy] .philosophy-letter-btn {
  width: auto;
  max-width: 100%;
}

/* Capital Goods / products showcase — 44px outline, hover dark fill + accent border */
[data-ari-products] .ari-btn-outline {
  height: 44px;
  padding: 0 32px;
  font-size: 10px;
  width: auto;
  max-width: 100%;
}

[data-ari-products] .products-catalog-letter-btn {
  border-color: var(--color-outline-variant, #c8a698);
}

[data-ari-products] .products-catalog-letter-btn:hover {
  border-color: var(--color-on-surface, #1a1c1c);
}

[data-ari-products] .product-card-letter-btn {
  border-color: rgba(26, 28, 28, 0.3);
}

[data-ari-products] .product-card-letter-btn:hover {
  border-color: var(--color-accent, #F15A24);
}

@media (max-width: 639px) {
  [data-ari-products] .product-card-letter-btn {
    width: 100%;
  }
}

[data-ari-products] .ari-btn-anim .ari-btn-sweep {
  transform: translateX(-120%) skewX(12deg) scale(1.1);
}

[data-ari-products] .ari-btn-anim:hover .ari-btn-sweep {
  transform: translateX(0) skewX(12deg) scale(1.1);
}

/* Services home grid: css/services.css (index only) */
