/* ============================================================
   Vexcolt India — shared visual-system layer (site.css)
   Loaded AFTER each page's inline <style>. Additive only.
   Brand tokens (red #D71A21 / black #0D0D0D) are already
   defined per-page as CSS vars; we reuse them here.
   ============================================================ */

/* ---- Custom SVG icons (sprite referenced via <use>) ---- */
.vic{width:26px;height:26px;display:inline-block;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.card .ic .vic{width:24px;height:24px;stroke:#fff}
.why .card .vic{width:26px;height:26px;stroke:var(--red)}

/* ---- Scroll-reveal (only active when JS is on) ---- */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform}
.js .reveal.in{opacity:1;transform:none}

/* ---- Image zoom-on-hover (project & product photos) ---- */
.proj,.pcard,.gallery-item,.famcard,.cs .img{overflow:hidden}
.proj .ph,.pcard .ph,.famcard .ph,.cs .img{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.proj[data-full]:hover .ph,.proj[data-full]:focus-within .ph,
.pcard:hover .ph,.pcard:focus-within .ph,
.famcard:hover .ph,.famcard:focus-within .ph,
.cs:hover .img{transform:scale(1.06)}

/* only elements that carry a full image become interactive */
.proj[data-full],.cs .img[data-full]{cursor:pointer;position:relative}
.proj[data-full]::after,.cs .img[data-full]::after{content:"⤢";position:absolute;top:10px;right:10px;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:rgba(13,13,13,.72);color:#fff;font-size:15px;opacity:0;transform:scale(.8);
  transition:.2s;pointer-events:none;z-index:2}
.proj[data-full]:hover::after,.proj[data-full]:focus-visible::after,
.cs .img[data-full]:hover::after,.cs .img[data-full]:focus-visible::after{opacity:1;transform:scale(1)}
.cs .img[data-full]:hover{transform:scale(1.06)}

/* ---- Blur-up / skeleton placeholder for large imgs ---- */
img.blurup{filter:blur(12px);transition:filter .5s ease}
img.blurup.loaded{filter:none}
.skeleton{background:linear-gradient(100deg,#eee 30%,#f6f6f6 50%,#eee 70%);
  background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---- Button polish: lift + shadow + real focus ring ---- */
.btn{transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(215,26,33,.28)}
.btn:active{transform:translateY(0)}
.btn-white:hover{box-shadow:0 6px 18px rgba(0,0,0,.22)}
a:focus-visible,button:focus-visible,.btn:focus-visible,
.nav-btn:focus-visible,.proj:focus-visible,summary:focus-visible{
  outline:3px solid var(--red-bright,#ff5a60);outline-offset:2px;border-radius:2px}

/* ---- Client-logo grid: lift + name tooltip ---- */
.clients .logos img{transition:filter .18s ease,opacity .18s ease,transform .18s ease}
.clients .logos .logowrap{position:relative;display:inline-flex}
.clients .logos .logowrap:hover img,.clients .logos .logowrap:focus-visible img{transform:translateY(-2px)}
.clients .logos .logowrap[data-name]::after{content:attr(data-name);position:absolute;left:50%;
  bottom:-30px;transform:translateX(-50%) translateY(4px);background:var(--black);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.03em;white-space:nowrap;padding:4px 9px;
  border-radius:3px;opacity:0;pointer-events:none;transition:.18s;z-index:5}
.clients .logos .logowrap:hover[data-name]::after,
.clients .logos .logowrap:focus-within[data-name]::after{opacity:1;transform:translateX(-50%)}

/* ---- Animated mobile nav drawer (overrides inline hard-cut) ---- */
@media(max-width:820px){
  header nav{display:flex;max-height:0;overflow:hidden;opacity:0;
    transition:max-height .28s ease,opacity .28s ease}
  #navt:checked ~ nav{max-height:80vh;opacity:1}
  .nav-btn{font-size:0;position:relative;width:44px;height:44px}
  .nav-btn::before{content:"\2630";font-size:24px;line-height:44px;position:absolute;
    inset:0;text-align:center;transition:transform .25s ease}
  #navt:checked ~ .nav-btn::before{content:"\2715";transform:rotate(90deg)}
}

/* ---- Floating WhatsApp action button ---- */
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:60;width:54px;height:54px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);opacity:0;transform:translateY(14px) scale(.9);
  transition:opacity .3s ease,transform .3s ease;text-decoration:none}
.wa-fab.show{opacity:1;transform:none}
.wa-fab svg{width:30px;height:30px;fill:#fff}
.wa-fab:focus-visible{outline:3px solid #0d0d0d;outline-offset:3px}

/* ---- Consent-friendly click-to-load map ---- */
.mapph{height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:22px;background:
  repeating-linear-gradient(45deg,#f0f0ee 0 10px,#ebebe8 10px 20px)}
.mapph svg{width:34px;height:34px;stroke:var(--red);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mapph .mp-addr{font-size:14px;color:var(--ink);font-weight:600;max-width:260px}
.mapph .mp-note{font-size:11.5px;color:var(--muted);max-width:280px;line-height:1.45}
.mapph button{cursor:pointer}

/* ---- Cross-section diagram framing ---- */
.jointdiagram{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line)}
.diagram-wrap{margin-top:6px}
.diagram-cap{font-size:12.5px;color:var(--muted);margin-top:8px;text-align:center;letter-spacing:.02em}
/* On phones the 760-unit viewBox would shrink 13px labels to ~5.7px — unreadable.
   Keep a legible minimum and let the drawing pan sideways, same pattern as .tablewrap. */
@media(max-width:760px){
  .diagram-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--line);background:#fff}
  .diagram-scroll .jointdiagram{min-width:660px;border:0}
  .diagram-cap::after{content:" · swipe the drawing sideways to see it all";color:var(--red)}
}

/* ---- Lightbox ---- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.92);display:flex;
  align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease}
.lb.open{opacity:1;visibility:visible}
.lb figure{max-width:min(92vw,1040px);margin:0;text-align:center}
.lb img{max-width:100%;max-height:78vh;width:auto;height:auto;margin:0 auto;
  box-shadow:0 12px 50px rgba(0,0,0,.5)}
.lb figcaption{color:#fff;font-size:14px;margin-top:14px;letter-spacing:.02em}
.lb figcaption b{color:var(--red-bright,#ff5a60)}
.lb-close,.lb-nav{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);
  color:#fff;cursor:pointer;font-size:22px;line-height:1;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.25)}
.lb-close{top:18px;right:18px}
.lb-nav.prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-nav.next{right:18px;top:50%;transform:translateY(-50%)}
@media(max-width:600px){.lb-nav{top:auto;bottom:18px;transform:none}.lb-nav.prev{left:calc(50% - 60px)}.lb-nav.next{right:calc(50% - 60px)}}

/* ---- Respect reduced motion: kill all non-essential animation ---- */
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .proj .ph,.pcard .ph,.btn,.wa-fab,.clients .logos img,
  .lb,.nav-btn::before,img.blurup{transition:none!important}
  .proj:hover .ph,.proj:focus-within .ph,.pcard:hover .ph{transform:none!important}
  .skeleton{animation:none}
  *{scroll-behavior:auto!important}
}