/* ============================================================
   Arihantaa React → Static parity layer
   Ports: globals.css utilities, tailwind theme animations,
   and missing purged utilities used by exported HTML.
   ============================================================ */

:root {
  --ari-primary: #a33800;
  --ari-accent: #e9652b;
  --ari-surface: #f9f9f9;
  --ari-on-surface: #1a1c1c;
  --ari-background: #f9f9f9;
  --ari-outline-variant: #c8a698;
  --ari-container-max: 1440px;
  --ari-section-margin: 120px;
  --ari-gutter: 32px;
  --ari-overlap-offset: -40px;
}

/* ── Base (globals.css @layer base) ─────────────────────────
   React keeps font-size in @layer base so Tailwind text-[Npx]
   utilities always win. Static CSS loads AFTER style.css, so
   a normal .material-symbols-outlined { font-size } would crush
   every icon size. :where() = 0 specificity → same as @layer base.

   Icons = local SVG (assets/icons/material) with Google Material
   Symbols CSS parity so translate/rotate/color animations match
   the previous font-ligature behaviour exactly.
*/
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  vertical-align: middle;
  transform-origin: center center;
  speak: never;
}
:where(.material-symbols-outlined) {
  font-size: 2.5rem;
}
/* SVG replaces the ligature glyph — 1em tracks text-[Npx] / font-size */
.material-symbols-outlined > .ari-ms-svg,
.material-symbols-outlined > svg.ari-ms-svg {
  width: 1em;
  height: 1em;
  display: block;
  fill: currentColor;
  overflow: visible;
  pointer-events: none;
}
/* FOUC: hide ligature name until SVG hydrate (static pages already inlined).
   Button arrows / ready icons must keep color for opacity animations. */
.material-symbols-outlined:not(.ari-ms-ready):not(.ari-btn-arrow) {
  color: transparent;
}

/* Purged Tailwind arbitrary utilities still referenced by header/icons/Button */
.ease-\[cubic-bezier\(0\.25\,1\,0\.5\,1\)\] {
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
.ease-\[cubic-bezier\(0\.76\,0\,0\.24\,1\)\] {
  transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}
.duration-\[400ms\] {
  transition-duration: 400ms;
}
.duration-\[500ms\] {
  transition-duration: 500ms;
}
.duration-\[600ms\] {
  transition-duration: 600ms;
}
.-translate-y-\[150\%\] {
  --tw-translate-y: -150%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

::selection {
  background-color: #e9652b;
  color: #ffffff;
}

/* ── Custom utilities (globals.css @layer utilities) ──────── */
.hero-gradient {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.stitch-down {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.stitch-up {
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  margin-top: -5vw;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #e9652b;
  margin-bottom: 1rem;
  display: block;
}

.body-constrained {
  max-width: 680px;
}

.bg-grid-pattern {
  background-size: 30px 30px;
  background-image:
    linear-gradient(to right, rgba(233, 101, 43, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(233, 101, 43, 0.05) 1px, transparent 1px);
}

/* ── Tailwind theme animations (tailwind.config.js) ───────── */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(233, 101, 43, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(233, 101, 43, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(233, 101, 43, 0);
  }
}

.animate-marquee {
  animation: marquee 40s linear infinite;
}

.animate-pulse-ring {
  animation: pulse-ring 2s infinite;
}

/* ── Missing purged hover utilities (React Tailwind arbitrary / named groups) ─ */
.group\/img:hover .group-hover\/img\:scale-105 {
  transform: scale(1.05);
}
.group\/img:hover .group-hover\/img\:scale-110 {
  transform: scale(1.1);
}

/* EngineeredSolutionCard.jsx — motion.img whileHover={{ scale: 1.05 }}
   transition={{ duration: 0.8, ease: "easeOut" }} */
.group\/img img,
.group\/img .ari-card-img {
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(0, 0, 0.58, 1); /* Framer easeOut */
  will-change: transform;
}
.group\/img:hover img,
.group\/img:hover .ari-card-img {
  transform: scale(1.05);
}

/* Ensure ease token always available even if purged oddly */
.ease-\[cubic-bezier\(0\.76\,0\,0\.24\,1\)\] {
  transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ProductCard / EngineeredSolutionCard hover anchors already in style.css —
   keep lightweight fallbacks for JS-injected cards */
.group\/card:hover .group-hover\/card\:scale-105 {
  transform: scale(1.05);
}
.group\/card:hover .group-hover\/card\:scale-110 {
  transform: scale(1.1);
}

.max-w-container-max { max-width: 1440px; }

/* Hide scrollbar (React uses hide-scrollbar; features.css also covers) */
.hide-scrollbar,
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar,
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ── Enhanced border visibility (globals.css exact) ───────── */
.border-outline-variant\/20 { border-color: rgba(200, 166, 152, 0.45); }
.border-outline-variant\/30 { border-color: rgba(200, 166, 152, 0.65); }
.border-outline-variant\/40 { border-color: rgba(200, 166, 152, 0.8); }
.border-outline-variant\/50 { border-color: rgba(200, 166, 152, 0.9); }
.border-outline-variant\/60 { border-color: rgba(200, 166, 152, 0.95); }
.border-outline-variant { border-color: rgba(200, 166, 152, 1); }

.bg-outline-variant { background-color: #c8a698; }
.hover\:bg-accent\/\[0\.015\]:hover { background-color: rgba(233, 101, 43, 0.015); }

.border-white\/5 { border-color: rgba(255, 255, 255, 0.16); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.28); }
.border-white\/15 { border-color: rgba(255, 255, 255, 0.35); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.45); }
.border-white\/\[0\.06\] { border-color: rgba(255, 255, 255, 0.16); }
.border-white\/\[0\.08\] { border-color: rgba(255, 255, 255, 0.22); }
.border-white\/\[0\.12\] { border-color: rgba(255, 255, 255, 0.32); }
.border-white\/8 { border-color: rgba(255, 255, 255, 0.22); }

/* ── Reduced motion (globals.css exact) ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Extra utilities */
.pl-4{padding-left:1rem}
.z-\[200\]{z-index:200}
.duration-400{transition-duration:400ms}
@media (min-width:768px){.md\:\[\&\:nth-last-child\(-n\+2\)\]\:border-b-0:nth-last-child(-n+2){border-bottom-width:0}}