/* ==========================================================================
   TCI motion layer — shared across five sites.
   Layered on top of style.css. All new selectors, no overrides needed.
   Respects prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1. Hero parallax + slow zoom ---------- */
.hero{overflow:hidden}
.hero__bg{will-change:transform}
.hero__bg img{
  transform:scale(1.08);
  transform-origin:center 60%;
  will-change:transform;
  transition:transform .6s ease-out;
}
/* JS sets --p (parallax progress 0-1) and --z (zoom progress 0-1) on .hero */
.hero[data-parallax]{--p:0;--z:0}
.hero[data-parallax] .hero__bg{
  transform:translate3d(0, calc(var(--p) * 12%), 0);
}
.hero[data-parallax] .hero__bg img{
  transform:scale(calc(1.08 + var(--z) * 0.12));
  transition:none;
}

/* ---------- 2. Animated counters on hero stats ---------- */
.hero__meta b{
  font-variant-numeric:tabular-nums;
}
.hero__meta[data-counters] b{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}
.hero__meta[data-counters].in b{opacity:1;transform:none}
.hero__meta[data-counters] b[data-count]{transition-delay:calc(var(--i, 0) * 80ms)}

/* ---------- 3. Marquee client strip (endless horizontal scroll) ---------- */
.marquee{
  position:relative;
  overflow:hidden;
  margin:clamp(1.5rem,3vw,2.25rem) 0 0;
  padding:1.25rem 0;
  border-top:1px solid var(--line-dark, rgba(255,255,255,.14));
  border-bottom:1px solid var(--line-dark, rgba(255,255,255,.14));
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.marquee__track{
  display:flex;
  gap:clamp(2.5rem,6vw,4.5rem);
  width:max-content;
  animation:marqueeScroll 42s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  font-size:clamp(1.15rem,2.2vw,1.6rem);
  font-weight:700;
  letter-spacing:-.01em;
  color:rgba(255,255,255,.78);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:1.5rem;
}
.marquee__item::after{
  content:"";
  width:.4rem;
  height:.4rem;
  background:currentColor;
  border-radius:50%;
  opacity:.4;
  display:inline-block;
}
@keyframes marqueeScroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ---------- 4. Before/after slider (draggable) ---------- */
.beforeafter{
  position:relative;
  overflow:hidden;
  border-radius:clamp(1rem,2vw,1.35rem);
  aspect-ratio:16/10;
  user-select:none;
  cursor:ew-resize;
  background:#111;
  box-shadow:0 20px 60px -25px rgba(0,0,0,.4);
}
.beforeafter img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;
}
.beforeafter__after{
  clip-path:inset(0 0 0 var(--pos, 50%));
  transition:clip-path .05s linear;
}
.beforeafter__handle{
  position:absolute;top:0;bottom:0;
  left:var(--pos, 50%);
  width:2px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
  pointer-events:none;
}
.beforeafter__grip{
  position:absolute;top:50%;left:50%;
  width:44px;height:44px;
  border-radius:50%;
  background:#fff;
  color:#181818;
  display:grid;place-items:center;
  transform:translate(-50%,-50%);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.55);
}
.beforeafter__grip svg{width:22px;height:22px}
.beforeafter__label{
  position:absolute;top:.9rem;
  padding:.35rem .7rem;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:.35rem;
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.beforeafter__label--before{left:.9rem}
.beforeafter__label--after{right:.9rem}
.beforeafter:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- 5. Scroll-scrubbed process sequence ---------- */
/* Enhances the existing .steps <ol> — pin the number column, scrub steps active on scroll */
.steps--scrub{
  position:relative;
}
.steps--scrub li{
  position:relative;
  opacity:.35;
  transform:translateY(4px);
  transition:opacity .5s ease,transform .5s ease;
}
.steps--scrub li.is-active{
  opacity:1;
  transform:none;
}
.steps--scrub li h3{transition:color .4s ease}
.steps--scrub li.is-active h3{color:var(--accent)}
.steps--scrub li::before{
  transition:color .4s ease, transform .4s ease;
}
.steps--scrub li.is-active::before{
  color:var(--accent);
  transform:scale(1.08);
}
/* Progress rail on the left */
.steps--scrub::before{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:0;
  width:2px;
  background:var(--line);
}
.steps--scrub::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:2px;
  height:var(--prog, 0%);
  background:var(--accent);
  transition:height .1s linear;
}
.dark .steps--scrub::before{background:var(--line-dark)}

/* ---------- 6. Enhanced card hover — tilt + image zoom (already exists, sharper here) ---------- */
.card{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.card:hover{transform:translateY(-4px)}
.card__media img{transition:transform 1.1s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}

/* ---------- 7. Sticky micro-progress bar at top of the page ---------- */
.pagebar{
  position:fixed;
  top:0;left:0;
  height:3px;
  width:0;
  background:var(--accent);
  z-index:200;
  transition:width .08s linear;
  pointer-events:none;
}

/* ---------- Reduced motion — turn everything off ---------- */
@media (prefers-reduced-motion:reduce){
  .hero__bg,.hero__bg img{transform:none !important}
  .marquee__track{animation:none !important}
  .steps--scrub li{opacity:1 !important;transform:none !important}
  .steps--scrub::after{display:none}
  .card:hover{transform:none}
  .card:hover .card__media img{transform:none}
  .pagebar{display:none}
  .beforeafter__after{transition:none}
}

/* =========================================================
   8. Client logo wall + marquee logos
   Added: renders real client logos on the dark "Companies we
   have worked with" band, with mono-white treatment.
   ========================================================= */

.logo-wall{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;
  margin:clamp(1.75rem,4vw,2.5rem) 0 clamp(1rem,2vw,1.5rem);
}
.logo-wall__tile{
  aspect-ratio:16/7;
  display:grid;
  place-items:center;
  padding:14px 20px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .5s var(--ease);
}
.logo-wall__tile:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  transform:translateY(-2px);
}
.logo-wall__tile img{
  max-width:100%;
  max-height:44px;
  width:auto;
  height:auto;
  object-fit:contain;
  color:#fff;                 /* svgs using currentColor render white */
  opacity:.88;
  transition:opacity .35s var(--ease);
}
.logo-wall__tile:hover img{opacity:1}

/* Filter-based mono for logos that don't use currentColor (native colour SVGs & PNGs).
   The specific tiles that need it get .logo-wall__tile--mono; those left native
   (Lush) render with their original colours. */
.logo-wall__tile--mono img{filter:brightness(0) invert(1)}

/* Marquee small logos inline with each label */
.marquee__item{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.marquee__logo{
  height:22px;
  width:auto;
  max-width:80px;
  object-fit:contain;
  opacity:.7;
  filter:brightness(0) invert(1);
  vertical-align:middle;
}
/* Lush marquee logo keeps native colour */
.marquee__item .marquee__logo[src$="lush.svg"]{filter:none;opacity:.9}

@media (max-width:640px){
  .logo-wall{grid-template-columns:repeat(2,1fr);gap:10px}
  .logo-wall__tile{padding:10px 14px;aspect-ratio:16/7}
  .logo-wall__tile img{max-height:36px}
  .marquee__logo{height:18px}
}

@media (prefers-reduced-motion:reduce){
  .logo-wall__tile:hover{transform:none}
}