/* =========================================================================
   assets/css/es-polish.css  ·  owner's revision, 17 Sep 2026
   Site-wide refinements layered on the token system. Nothing here changes
   layout; it only repaints section edges and in-content rules.
   ========================================================================= */

/* Neutral ground: the #ededed trial (17 Sep 2026) was reverted on the owner's
   instruction. Grey bands use their original --gray-50 from utilities.css. */

/* ── Section dividers: a subtle gradient hairline ───────────
   Every token section that follows another carries a 1px top edge that
   fades in from the sides and warms to brand at its centre. border-image
   rather than a pseudo-element, because many sections already use their
   own ::before and ::after for artwork. 1px, so no visible shift. */
/* Not on grey bands (owner, 17 Sep 2026): the ground change already marks
   the boundary there. */
:is(.es-section, .es-hero, .es-stats, .rv-section, .revamp-hero) ~ :is(.es-section, .rv-section):not(.es-bg-gray):not(.rv-bg-gray),
.es-team-pin > .es-section:not(.es-bg-gray) {
  border-top: 1px solid transparent;
  border-image: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--border-default) 70%, transparent) 18%,
      color-mix(in srgb, var(--brand-400) 55%, transparent) 50%,
      color-mix(in srgb, var(--border-default) 70%, transparent) 82%,
      transparent 100%
    ) 1;
}

/* Dark bands: same fade, lighter ink. */
:is(.es-section, .es-hero, .es-stats, .rv-section, .revamp-hero) ~ :is(.es-section, .rv-section):is(.es-bg-dark, .rv-bg-dark) {
  border-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.12) 20%,
      color-mix(in srgb, var(--brand-400) 60%, transparent) 50%,
      rgba(255, 255, 255, 0.12) 80%,
      transparent 100%
    ) 1;
}

/* In-content rules (legacy service pages) get the same treatment. */
main hr,
.es-section hr:not(.es-itab__rule) {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--border-default) 20%, var(--brand-300) 50%, var(--border-default) 80%, transparent);
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   CARD ICON HOVER ANIMATIONS, site-wide (owner, 17 Sep 2026)
   When the pointer enters a card (or keyboard focus lands inside it), the
   small glyph in the card's icon tile plays an animation that matches what
   it shows: the rocket launches, the clock spins, the eye blinks, the
   shield stamps, and so on. Only the glyph (the svg or img) moves, never
   the tile or the card, so nothing around it shifts. Plays once per hover.

   How it works: en_icon() stamps data-icon="<name>" on every svg. Each name
   below sets --es-ico (keyframes) and optionally duration, easing, origin
   and repeat. The hover rule reads those, falling back to a tilt-and-pop
   for uploaded image icons and any glyph without its own entry.
   ══════════════════════════════════════════════════════════ */
:is(
  .es-fgrid__icon,
  .es-hero__feature-icon,
  .es-stat__icon,
  .es-price__mark,
  .es-adv__mark,
  .es-itab__pmark,
  .es-svc__mark,
  .es-about__feature-icon,
  .es-contact__icon,
  .es-sched__contact-icon,
  .esn-prodpoint__icon,
  .wl-card-icon,
  .india-advantage-icon,
  .india-guarantee-icon,
  .india-process-icon
) > :is(svg, img) {
  transform-origin: var(--es-ico-origin, 50% 50%);
  will-change: transform;
}

:is(
  .es-fgrid__card,
  .es-hero__feature,
  .es-stat,
  .es-price__card,
  .es-adv__row,
  .es-itab__copy,
  .es-svc__tab,
  .es-about__feature,
  .es-contact__link,
  .es-sched__contact,
  .esn-prodpoint,
  .wl-card,
  .india-advantage-card,
  .india-guarantee-item,
  .india-process-card
):is(:hover, :focus-within)
  :is(
    .es-fgrid__icon,
    .es-hero__feature-icon,
    .es-stat__icon,
    .es-price__mark,
    .es-adv__mark,
    .es-itab__pmark,
    .es-svc__mark,
    .es-about__feature-icon,
    .es-contact__icon,
    .es-sched__contact-icon,
    .esn-prodpoint__icon,
    .wl-card-icon,
    .india-advantage-icon,
    .india-guarantee-icon,
    .india-process-icon
  ) > :is(svg, img) {
  animation-name: var(--es-ico, es-ico-pop);
  animation-duration: var(--es-ico-dur, .7s);
  animation-timing-function: var(--es-ico-ease, cubic-bezier(.34, 1.3, .64, 1));
  animation-iteration-count: var(--es-ico-repeat, 1);
  animation-fill-mode: both;
}

/* Legacy "what we offer" boxes place the img straight in the box. */
.what-we-offer-boxiner img.serv-dev-icon-set { transform-origin: 50% 50%; }
.what-we-offer-boxiner:hover img.serv-dev-icon-set {
  animation: es-ico-pop .7s cubic-bezier(.34, 1.3, .64, 1) both;
}

/* ── Per icon ─────────────────────────────────────────────── */
svg[data-icon="rocket"]         { --es-ico: es-ico-launch;  --es-ico-dur: .9s;  --es-ico-ease: ease-in-out; }
svg[data-icon="arrow-up-right"] { --es-ico: es-ico-launch;  --es-ico-dur: .8s;  --es-ico-ease: ease-in-out; }
svg[data-icon="trend-up"]       { --es-ico: es-ico-rise;    --es-ico-dur: .8s; }
svg[data-icon="shield"]         { --es-ico: es-ico-stamp;   --es-ico-dur: .75s; }
svg[data-icon="check"]          { --es-ico: es-ico-stamp;   --es-ico-dur: .6s; }
svg[data-icon="users"]          { --es-ico: es-ico-hop;     --es-ico-dur: .7s;  --es-ico-ease: ease-out; }
svg[data-icon="smile"]          { --es-ico: es-ico-wobble;  --es-ico-dur: .8s;  --es-ico-ease: ease-in-out; }
svg[data-icon="palette"]        { --es-ico: es-ico-wobble;  --es-ico-dur: .8s;  --es-ico-ease: ease-in-out; }
svg[data-icon="bag"],
svg[data-icon="box"],
svg[data-icon="pin"]            { --es-ico: es-ico-drop;    --es-ico-dur: .75s; --es-ico-ease: ease-out; --es-ico-origin: 50% 100%; }
svg[data-icon="cart"]           { --es-ico: es-ico-roll;    --es-ico-dur: .8s;  --es-ico-ease: ease-in-out; }
svg[data-icon="code"]           { --es-ico: es-ico-type;    --es-ico-dur: .6s;  --es-ico-ease: linear; }
svg[data-icon="gauge"]          { --es-ico: es-ico-needle;  --es-ico-dur: .9s;  --es-ico-origin: 50% 65%; }
svg[data-icon="target"]         { --es-ico: es-ico-focus;   --es-ico-dur: .7s; }
svg[data-icon="search"]         { --es-ico: es-ico-scan;    --es-ico-dur: .9s;  --es-ico-ease: ease-in-out; }
svg[data-icon="eye"]            { --es-ico: es-ico-blink;   --es-ico-dur: .55s; --es-ico-ease: ease-in-out; }
svg[data-icon="swap"],
svg[data-icon="route"]          { --es-ico: es-ico-flip;    --es-ico-dur: .7s;  --es-ico-ease: ease-in-out; }
svg[data-icon="clock"]          { --es-ico: es-ico-spin;    --es-ico-dur: .9s;  --es-ico-ease: cubic-bezier(.45, 0, .2, 1); }
svg[data-icon="calendar"]       { --es-ico: es-ico-page;    --es-ico-dur: .7s;  --es-ico-ease: ease-in-out; }
svg[data-icon="react"]          { --es-ico: es-ico-spin;    --es-ico-dur: 1.6s; --es-ico-ease: linear; --es-ico-repeat: infinite; }
svg[data-icon="mail"]           { --es-ico: es-ico-send;    --es-ico-dur: .85s; --es-ico-ease: ease-in-out; }
svg[data-icon="pen"]            { --es-ico: es-ico-write;   --es-ico-dur: .8s;  --es-ico-ease: ease-in-out; --es-ico-origin: 15% 85%; }
svg[data-icon="crown"]          { --es-ico: es-ico-crown;   --es-ico-dur: .8s; }
svg[data-icon="star"]           { --es-ico: es-ico-star;    --es-ico-dur: .8s; }
svg[data-icon="sparkle"]        { --es-ico: es-ico-twinkle; --es-ico-dur: .8s; }
svg[data-icon="mobile"],
svg[data-icon="app"],
svg[data-icon="phone"]          { --es-ico: es-ico-buzz;    --es-ico-dur: .55s; --es-ico-ease: linear; }
svg[data-icon="wrench"]         { --es-ico: es-ico-turn;    --es-ico-dur: .8s;  --es-ico-ease: ease-in-out; }
svg[data-icon="link"]           { --es-ico: es-ico-swing;   --es-ico-dur: .8s;  --es-ico-ease: ease-in-out; }
svg[data-icon="play"]           { --es-ico: es-ico-nudge;   --es-ico-dur: .6s;  --es-ico-ease: ease-in-out; }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes es-ico-pop {
  0%   { transform: rotate(0) scale(1); }
  30%  { transform: rotate(-12deg) scale(1.16); }
  55%  { transform: rotate(8deg) scale(1.1); }
  78%  { transform: rotate(-3deg) scale(1.12); }
  100% { transform: rotate(0) scale(1.1); }
}

/* Leaves top right, comes back in from bottom left. */
@keyframes es-ico-launch {
  0%   { transform: translate(0, 0); opacity: 1; }
  40%  { transform: translate(14px, -14px); opacity: 0; }
  41%  { transform: translate(-14px, 14px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes es-ico-rise {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(-3px, 3px); }
  75%  { transform: translate(3px, -3px) scale(1.08); }
  100% { transform: translate(0, 0) scale(1.06); }
}

@keyframes es-ico-stamp {
  0%   { transform: scale(1); }
  30%  { transform: scale(.78); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1.08); }
}

@keyframes es-ico-hop {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-5px); }
  55%      { transform: translateY(0); }
  75%      { transform: translateY(-2px); }
}

@keyframes es-ico-wobble {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-14deg); }
  45%      { transform: rotate(11deg); }
  70%      { transform: rotate(-6deg); }
  88%      { transform: rotate(3deg); }
}

@keyframes es-ico-drop {
  0%   { transform: translateY(0) scale(1, 1); }
  30%  { transform: translateY(-7px) scale(.96, 1.06); }
  60%  { transform: translateY(0) scale(1.1, .88); }
  80%  { transform: translateY(-2px) scale(.98, 1.03); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes es-ico-roll {
  0%, 100% { transform: translateX(0) rotate(0); }
  30%      { transform: translateX(6px) rotate(6deg); }
  60%      { transform: translateX(-3px) rotate(-3deg); }
  80%      { transform: translateX(1px) rotate(0); }
}

@keyframes es-ico-type {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}

@keyframes es-ico-needle {
  0%   { transform: rotate(0); }
  30%  { transform: rotate(-35deg); }
  65%  { transform: rotate(22deg); }
  85%  { transform: rotate(-6deg); }
  100% { transform: rotate(0); }
}

@keyframes es-ico-focus {
  0%   { transform: scale(1); }
  35%  { transform: scale(.7); }
  70%  { transform: scale(1.22); }
  100% { transform: scale(1.1); }
}

@keyframes es-ico-scan {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-3px, -3px); }
  50%      { transform: translate(3px, -2px); }
  75%      { transform: translate(2px, 3px); }
}

@keyframes es-ico-blink {
  0%, 100% { transform: scaleY(1); }
  40%, 60% { transform: scaleY(.1); }
}

@keyframes es-ico-flip {
  0%   { transform: perspective(200px) rotateY(0); }
  100% { transform: perspective(200px) rotateY(360deg); }
}

@keyframes es-ico-spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes es-ico-page {
  0%   { transform: perspective(200px) rotateX(0); }
  100% { transform: perspective(200px) rotateX(360deg); }
}

/* Flies off to the right like a sent letter, slides back in from the left. */
@keyframes es-ico-send {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  40%  { transform: translate(16px, -6px) rotate(-12deg); opacity: 0; }
  41%  { transform: translate(-16px, 0) rotate(0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes es-ico-write {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25%      { transform: translate(-2px, 1px) rotate(-10deg); }
  50%      { transform: translate(2px, -1px) rotate(6deg); }
  75%      { transform: translate(-1px, 1px) rotate(-5deg); }
}

@keyframes es-ico-crown {
  0%   { transform: translateY(0) rotate(0); }
  35%  { transform: translateY(-6px) rotate(-10deg); }
  65%  { transform: translateY(0) rotate(6deg); }
  100% { transform: translateY(0) rotate(0) scale(1.08); }
}

@keyframes es-ico-star {
  0%   { transform: rotate(0) scale(1); }
  60%  { transform: rotate(144deg) scale(1.25); }
  100% { transform: rotate(216deg) scale(1.1); }
}

@keyframes es-ico-twinkle {
  0%   { transform: rotate(0) scale(1); opacity: 1; }
  30%  { transform: rotate(45deg) scale(.6); opacity: .5; }
  65%  { transform: rotate(90deg) scale(1.28); opacity: 1; }
  100% { transform: rotate(90deg) scale(1.1); opacity: 1; }
}

@keyframes es-ico-buzz {
  0%, 100%      { transform: rotate(0); }
  10%, 50%, 90% { transform: rotate(-9deg); }
  30%, 70%      { transform: rotate(9deg); }
}

@keyframes es-ico-turn {
  0%   { transform: rotate(0); }
  40%  { transform: rotate(-45deg); }
  75%  { transform: rotate(15deg); }
  100% { transform: rotate(0); }
}

@keyframes es-ico-swing {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(45deg); }
  65%      { transform: rotate(-15deg); }
}

@keyframes es-ico-nudge {
  0%, 100% { transform: translateX(0) scale(1); }
  40%      { transform: translateX(4px) scale(1.15); }
  70%      { transform: translateX(-1px) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .what-we-offer-boxiner img.serv-dev-icon-set,
  :is(
    .es-fgrid__icon,
    .es-hero__feature-icon,
    .es-stat__icon,
    .es-price__mark,
    .es-adv__mark,
    .es-itab__pmark,
    .es-svc__mark,
    .es-about__feature-icon,
    .es-contact__icon,
    .es-sched__contact-icon,
    .esn-prodpoint__icon,
    .wl-card-icon,
    .india-advantage-icon,
    .india-guarantee-icon,
    .india-process-icon
  ) > :is(svg, img) { animation: none !important; }
}