/* ==========================================================
   Threads Technology India - motion layer
   Loaded after home.css on every page. Everything that hides
   content initially is gated behind html.tti-js, so the site
   is fully visible if JavaScript fails.
   ========================================================== */

:root { --tti-ease: cubic-bezier(.22, .8, .24, 1); }

/* ---------- Scroll progress line (a "thread" along the top edge) ---------- */
.tti-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 3px;
  background: linear-gradient(90deg, #0b2a5b, #1660c5);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ---------- Header ---------- */
.tti-header { transition: box-shadow .3s var(--tti-ease), background-color .3s; }
.tti-header.is-scrolled { box-shadow: 0 8px 26px rgba(10, 31, 63, .09); }
.tti-header .tti-header-inner { transition: min-height .3s var(--tti-ease); }
.tti-header.is-scrolled .tti-header-inner { min-height: 62px; }
.tti-header.is-scrolled .tti-nav > ul > li { height: 62px; }
.tti-header .tti-logo img { transition: height .3s var(--tti-ease); }
.tti-header.is-scrolled .tti-logo img { height: 34px; }
.tti-nav > ul > li > a { position: relative; }
.tti-nav > ul > li > a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s var(--tti-ease);
}
.tti-nav > ul > li > a:hover::after { transform: scaleX(1); }
.tti-nav > ul > li > a.is-active { border-bottom-color: transparent; }
.tti-nav > ul > li > a.is-active::after { transform: scaleX(1); }

/* ---------- Buttons ---------- */
.tti-btn { transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--tti-ease), box-shadow .25s; }
.tti-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(22, 96, 197, .28); }
.tti-btn .tti-icon { transition: transform .25s var(--tti-ease); }
.tti-btn:hover .tti-icon { transform: translateX(4px); }

/* ---------- Hero: thread lines drawn behind the copy ---------- */
.tti-threads {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.tti-threads path { fill: none; stroke: #1660c5; stroke-width: 1.2; stroke-linecap: round; }
.tti-threads path:nth-child(1) { opacity: .28; }
.tti-threads path:nth-child(2) { opacity: .18; stroke: #0b2a5b; }
.tti-threads path:nth-child(3) { opacity: .14; }
.tti-hero .tti-wrap { position: relative; z-index: 1; }

.tti-js .tti-threads path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: ttiDraw 2.6s var(--tti-ease) forwards;
}
.tti-js .tti-threads path:nth-child(2) { animation-delay: .35s; animation-duration: 3s; }
.tti-js .tti-threads path:nth-child(3) { animation-delay: .7s; animation-duration: 3.4s; }
.tti-threads-drift { animation: ttiDrift 14s ease-in-out infinite alternate; transform-origin: 50% 50%; }

@keyframes ttiDraw { to { stroke-dashoffset: 0; } }
@keyframes ttiDrift { from { transform: translate3d(-10px, 0, 0); } to { transform: translate3d(14px, -8px, 0); } }

/* ---------- Hero: one orchestrated entrance, replayed per slide ---------- */
@keyframes ttiRise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes ttiMask { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }
@keyframes ttiMedia { from { opacity: 0; transform: translate3d(40px, 10px, 0) scale(.94) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes ttiFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes ttiLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ttiFade { from { opacity: 0; } to { opacity: 1; } }

/* Headline: each word slides up out of a mask, left to right */
.tti-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.tti-w > span { display: inline-block; }

.tti-js .owl-item:not(.active) .tti-hero-copy .tti-eyebrow,
.tti-js .owl-item:not(.active) .tti-hero-copy > p,
.tti-js .owl-item:not(.active) .tti-actions,
.tti-js .owl-item:not(.active) .tti-hero-media img { opacity: 0; }
.tti-js .owl-item:not(.active) .tti-hero-copy h1 .tti-w > span { transform: translate3d(0, 105%, 0); }
.tti-js .owl-item:not(.active) .tti-tagline { opacity: 0; }

.tti-js .owl-item.active .tti-hero-copy .tti-eyebrow,
.tti-js .active-banner-slider:not(.owl-loaded) .tti-hero-copy .tti-eyebrow { animation: ttiRise .8s var(--tti-ease) .05s both; }

.tti-js .owl-item.active .tti-hero-copy h1 .tti-w > span,
.tti-js .active-banner-slider:not(.owl-loaded) .tti-hero-copy h1 .tti-w > span {
  animation: ttiMask .9s var(--tti-ease) calc(.15s + var(--w, 0) * 70ms) both;
}

.tti-js .owl-item.active .tti-hero-copy > p:not(.tti-eyebrow),
.tti-js .active-banner-slider:not(.owl-loaded) .tti-hero-copy > p:not(.tti-eyebrow) { animation: ttiRise .8s var(--tti-ease) .65s both; }
.tti-js .owl-item.active .tti-actions,
.tti-js .active-banner-slider:not(.owl-loaded) .tti-actions { animation: ttiRise .8s var(--tti-ease) .8s both; }

.tti-js .owl-item.active .tti-hero-media img,
.tti-js .active-banner-slider:not(.owl-loaded) .tti-hero-media img {
  animation: ttiMedia 1.2s var(--tti-ease) .25s both, ttiFloat 7s ease-in-out 1.6s infinite;
}
.tti-js .owl-item.active .tti-tagline,
.tti-js .active-banner-slider:not(.owl-loaded) .tti-tagline { animation: ttiFade .9s ease 1s both; }
.tti-tagline { transition: none; }
.tti-js .owl-item.active .tti-tagline::before,
.tti-js .active-banner-slider:not(.owl-loaded) .tti-tagline::before {
  content: ""; position: absolute; left: -1.5px; top: 0; bottom: 0; width: 1.5px; background: var(--navy);
  transform-origin: 0 0; animation: ttiLine 1s var(--tti-ease) .9s both;
}
.tti-js .tti-tagline { border-left-color: transparent; }

/* Slide progress: the active dot fills over the autoplay time */
.tti-hero .owl-dot span { position: relative; overflow: hidden; }
.tti-hero .owl-dot.active span { background: #c3cee0; }
.tti-hero .owl-dot.active span::after {
  content: ""; position: absolute; inset: 0; background: var(--navy);
  transform-origin: 0 50%; animation: ttiDotFill 6s linear forwards;
}
.tti-hero:hover .owl-dot.active span::after { animation-play-state: paused; }
@keyframes ttiDotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Scroll reveals (classes are added by js/tti.js) ---------- */
.tti-js .tti-reveal {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .8s var(--tti-ease), transform .8s var(--tti-ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.tti-js .tti-reveal.is-in { opacity: 1; transform: none; }

/* Counter inside the trust strip must stay inline (home.css makes spans block) */
.tti-trust-item strong span { display: inline; font-size: inherit; line-height: inherit; }

/* Trust strip icons draw in */
.tti-trust-item .tti-icon path, .tti-trust-item .tti-icon circle,
.tti-sector .tti-icon path, .tti-sector .tti-icon circle, .tti-sector .tti-icon rect,
.tti-why-item .tti-icon path, .tti-why-item .tti-icon circle {
  stroke-dasharray: 120; stroke-dashoffset: 0;
}
.tti-js .tti-reveal:not(.is-in) .tti-icon path,
.tti-js .tti-reveal:not(.is-in) .tti-icon circle,
.tti-js .tti-reveal:not(.is-in) .tti-icon rect { stroke-dashoffset: 120; }
.tti-js .tti-reveal .tti-icon path, .tti-js .tti-reveal .tti-icon circle, .tti-js .tti-reveal .tti-icon rect {
  transition: stroke-dashoffset 1.4s var(--tti-ease) .25s;
}

/* Product cards: image zoom + arrow */
.tti-card { transition: border-color .25s, box-shadow .3s var(--tti-ease), transform .3s var(--tti-ease); }
.tti-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(10, 31, 63, .11); }
.tti-card-img img { transition: transform .7s var(--tti-ease); }
.tti-card:hover .tti-card-img img { transform: scale(1.07); }

/* Industries */
.tti-sector { transition: color .25s, transform .3s var(--tti-ease); }
.tti-sector .tti-icon { transition: transform .35s var(--tti-ease), color .25s; }
.tti-sector:hover { color: var(--blue); }
.tti-sector:hover .tti-icon { transform: translateY(-5px) scale(1.08); color: var(--blue); }

/* About image: wipe in, then settle */
/* NOTE: the wipe is applied to the <img>, not the <figure>. A fully clipped figure is never
   "visible" to IntersectionObserver, so it never got .is-in and the image stayed hidden. */
.tti-js .tti-about-media.tti-reveal { opacity: 1; transform: none; }
.tti-js .tti-about-media img { clip-path: inset(0 0 0 100%); transform: scale(1.12); transition: clip-path 1.2s var(--tti-ease), transform 1.8s var(--tti-ease); }
.tti-js .tti-about-media.is-in img { clip-path: inset(0); transform: scale(1); }
.tti-js .tti-about-media figcaption { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .8s ease .7s, transform .8s var(--tti-ease) .7s; }
.tti-js .tti-about-media.is-in figcaption { opacity: 1; transform: none; }

/* Why choose us */
.tti-why-item { transition: transform .3s var(--tti-ease); }
.tti-why-item .tti-icon { transition: transform .35s var(--tti-ease), color .25s; }
.tti-why-item:hover { transform: translateX(4px); }
.tti-why-item:hover .tti-icon { color: #fff; transform: rotate(-6deg) scale(1.08); }

/* Image collections */
.tti-gallery a, .tti-gallery img { will-change: transform; }
.tti-gallery span { transform: translateY(8px); opacity: .0; transition: transform .35s var(--tti-ease), opacity .35s; }
.tti-gallery a:hover span, .tti-gallery a:focus-visible span { transform: none; opacity: 1; }
@media (hover: none) { .tti-gallery span { opacity: 1; transform: none; } }

/* Closing CTA: a thread line draws across the top when it scrolls into view */
.tti-cta { position: relative; }
.tti-cta::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--navy), var(--blue));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--tti-ease);
}
.tti-cta.is-in::before { transform: scaleX(1); }
html:not(.tti-js) .tti-cta::before { transform: scaleX(1); }

/* Footer: link nudge */
.tti-footer li a { display: inline-block; transition: color .2s, transform .25s var(--tti-ease); }
.tti-footer li a:hover { transform: translateX(3px); }

/* ---------- Reduced motion: show everything, animate nothing ---------- */
@media (prefers-reduced-motion: reduce) {
  .tti-progress { display: none; }
  .tti-js .tti-reveal, .tti-js .tti-about-media.tti-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .tti-js .tti-threads path { animation: none !important; stroke-dashoffset: 0; }
  .tti-threads-drift { animation: none !important; }
  .tti-js .owl-item .tti-hero-copy *, .tti-js .owl-item .tti-hero-media img, .tti-js .owl-item .tti-tagline { animation: none !important; opacity: 1 !important; transform: none !important; }
  .tti-js .tti-about-media figcaption { opacity: 1; transform: none; transition: none; }
  .tti-js .tti-about-media img { transform: none; transition: none; }
  .tti-hero .owl-dot.active span::after { animation: none; transform: scaleX(1); }
  .tti-js .tti-reveal .tti-icon * { stroke-dashoffset: 0 !important; transition: none !important; }
  .tti-cta::before { transform: scaleX(1); transition: none; }
  .tti-card, .tti-card-img img, .tti-btn, .tti-sector, .tti-sector .tti-icon, .tti-why-item, .tti-why-item .tti-icon { transition: none !important; }
  .tti-card:hover, .tti-btn:hover, .tti-sector:hover .tti-icon, .tti-why-item:hover { transform: none !important; }
}

/* ---------- Image lightbox ---------- */
.tti-lb {
  position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center;
  padding: 56px 64px; background: rgba(10, 31, 63, .92);
}
.tti-lb.is-open { display: flex; animation: ttiFade .25s ease both; }
.tti-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.tti-lb button {
  position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(255,255,255,.08); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; transition: background-color .2s, color .2s;
}
.tti-lb button:hover { background: #fff; color: #0a1f3f; }
.tti-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tti-lb-close { top: 14px; right: 14px; }
.tti-lb-prev { left: 12px; top: 50%; margin-top: -22px; }
.tti-lb-next { right: 12px; top: 50%; margin-top: -22px; }
.tti-lb.is-single .tti-lb-prev, .tti-lb.is-single .tti-lb-next { display: none; }
body.tti-lb-lock { overflow: hidden; }
@media (max-width: 575px) { .tti-lb { padding: 64px 12px 24px; } .tti-lb-prev, .tti-lb-next { top: auto; bottom: 12px; margin: 0; } .tti-lb-prev { left: 12px; } .tti-lb-next { right: 12px; } }

/* ---------- Back to top (ring shows scroll progress) ---------- */
.tti-totop {
  position: fixed; right: 24px; bottom: 112px; z-index: 900; width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: #fff; color: var(--navy, #0b2a5b); cursor: pointer;
  box-shadow: 0 6px 20px rgba(10, 31, 63, .2);
  opacity: 0; visibility: hidden; transform: translate3d(0, 12px, 0);
  transition: opacity .3s, transform .3s var(--tti-ease), visibility .3s, background-color .25s, color .25s;
}
.tti-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.tti-totop:hover { background: var(--navy, #0b2a5b); color: #fff; }
.tti-totop:focus-visible { outline: 2px solid var(--blue, #1660c5); outline-offset: 3px; }
.tti-totop svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tti-totop .tti-totop-track { fill: none; stroke: #e4e9f1; stroke-width: 2.5; }
.tti-totop .tti-totop-ring { fill: none; stroke: var(--blue, #1660c5); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: 138.2; }
.tti-totop:hover .tti-totop-track { stroke: rgba(255,255,255,.25); }
.tti-totop:hover .tti-totop-ring { stroke: #fff; }
.tti-totop .tti-totop-arrow { position: relative; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: none; inset: auto; }
.tti-totop:hover .tti-totop-arrow { animation: ttiNudge .6s var(--tti-ease); }
@keyframes ttiNudge { 0% { transform: translateY(0); } 40% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
@media (max-width: 575px) { .tti-totop { right: 14px; bottom: 96px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .tti-totop { transition: none; } .tti-totop:hover .tti-totop-arrow, .tti-lb.is-open { animation: none; } }