/* Site effects (27 Oct 2026, user request t152u): fade-up on scroll, card hover lift, menu button hover,
   customer-map dot pulse + Pune line draw-in, sticky header shrink, image fade-in on load.
   Everything is gated on html.fx (set by effects.js only when JS runs and the visitor has not asked for
   reduced motion), so content is fully visible without JS and nothing moves under prefers-reduced-motion.
   Quick (<=0.5s), plays once; only the map dot pulse repeats (2.5s). No counters, zoom, parallax or side-scroll. */
@media (prefers-reduced-motion:no-preference){
/* 1. fade-up on scroll: hidden state only via classes effects.js adds */
html.fx .fx-up{opacity:0;transform:translateY(10px)}
html.fx .fx-up.fx-in{opacity:1;transform:none;transition:opacity .45s ease-out,transform .45s ease-out}

/* 2. card hover lift (desktop pointer devices only) */
@media (hover:hover) and (pointer:fine){
  html.fx .card,html.fx .pcard,html.fx .ccard,html.fx .cert.cq,html.fx .cob-row,html.fx .tile,html.fx .dl-card,html.fx .rq-card,html.fx .cm-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
  html.fx .card:hover,html.fx .pcard:hover,html.fx .ccard:hover,html.fx .cert.cq:hover,html.fx .tile:hover,html.fx .dl-card:hover,html.fx .rq-card:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(18,20,23,.08),0 16px 32px rgba(18,20,23,.12)}
  html.fx .cob-row:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(20,22,26,.09),0 20px 40px rgba(20,22,26,.12)}
  html.fx .cm-card:hover{box-shadow:0 4px 10px rgba(18,20,23,.08),0 16px 32px rgba(18,20,23,.10)}
}

/* 3. menu buttons (Option D): soft orange tint + small lift; active solid-orange button unchanged */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  html.fx.nv .main-nav a{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease !important}
  html.fx.nv .main-nav a:not(.active):hover{transform:translateY(-1px);background:#FDF0E5;border-color:#F2C29B;color:#1A1D21;box-shadow:0 2px 4px rgba(17,19,21,.07),0 6px 14px rgba(232,118,27,.16)}
  html.fx.nv .main-nav a.active:hover{transform:none}
}

/* 4. customer map: gentle ring pulse on each dot; Pune lines draw in once (effects.js) */
html.fx .cm-pin .fx-ring{fill:none;stroke-width:1.4;pointer-events:none;transform-box:fill-box;transform-origin:center;opacity:0;animation:fxPulse 2.5s ease-out infinite}
html.fx .cm-pin.c-b .fx-ring{stroke:#1F6FEB}
html.fx .cm-pin.c-g .fx-ring{stroke:#0F8A45}
html.fx .cm-pin.c-o .fx-ring{stroke:#E8761B}
@keyframes fxPulse{0%{opacity:.5;transform:scale(1)}70%{opacity:0;transform:scale(2.6)}100%{opacity:0;transform:scale(2.6)}}
html.fx .cm-arcs path.fx-draw{transition:stroke-dashoffset .5s ease-out}

/* 5. sticky header: shrinks a little after ~40px of scroll (shadow comes from .scrolled) */
html.fx .site-header .nav-wrap,html.fx .site-header .brand img{transition:height .2s ease,padding .2s ease}
html.fx .site-header.fx-shrink{box-shadow:0 6px 24px rgba(18,20,23,.10)}
@media (min-width:1280px){
  html.fx .site-header.fx-shrink .nav-wrap{height:66px}
  html.fx .site-header.fx-shrink .brand img{height:38px}
}
@media (min-width:1024px) and (max-width:1279px){
  html.fx.nv.two .site-header.fx-shrink .nav-wrap{padding-top:7px;padding-bottom:8px;row-gap:8px}
  html.fx.nv.two .site-header.fx-shrink .brand img{height:38px}
}
@media (max-width:1023px){
  html.fx .site-header.fx-shrink .nav-wrap{height:60px}
  html.fx .site-header.fx-shrink .brand img{height:31px}
}

/* 6. smooth page loading: images fade in once loaded (opacity only, so no layout shift) */
html.fx img.fx-img{opacity:0}
html.fx img.fx-img.fx-loaded{opacity:1;transition:opacity .4s ease-out}
}
@media print{html.fx .fx-up,html.fx img.fx-img{opacity:1 !important;transform:none !important}}