/* =========================================================================
   Kunal Designs — extras.css
   New component styling: dynamic logos, per-item mega menu, AI-tools
   reverse marquee, and the recovered "What I do" mockup animations.
   Loaded after style.css. Uses your existing tokens (--brand, --line, etc.).
   ========================================================================= */

/* ---------- TRUST LOGOS ---------- */
.trust-track{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:34px; }
.trust-row .tc{ opacity:1; display:inline-flex; align-items:center; }

/* uniform, single-tone logos that reveal full colour on hover */
.tc-logo{
  height:30px; width:auto; max-width:116px; object-fit:contain; display:block;
  filter:grayscale(1) brightness(0) invert(1); opacity:.55;
  transition:filter .3s var(--ease), opacity .3s var(--ease);
}
.tc:hover .tc-logo{ filter:none; opacity:1; }

/* desktop: hide the duplicate set used only for the mobile marquee */
.trust-track .tc.dup{ display:none; }


/* Testimonials — clamp to 3 lines with a read-more toggle */
.qt-quote{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
.qt-quote.open{ -webkit-line-clamp:unset; overflow:visible; }
.qt-more{
  margin-top:10px; padding:0; background:none; border:none; cursor:pointer;
  font-family:var(--font-display); font-size:13.5px; font-weight:600; color:var(--brand);
}
.qt-more:hover{ text-decoration:underline; }

@media (max-width:680px){
	#ai-tools .chip {
    min-width: 120px !important;
    gap: 5px !important;
    padding: 9px 16px!important; }
  .trust-row{
    overflow:hidden; width:100%;
    -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
            mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  }
  .trust-track{
    flex-wrap:nowrap; width:max-content; justify-content:flex-start; gap:30px;
    animation:trustScroll 18s linear infinite;
  }
  .trust-track .tc{ flex:0 0 auto; }
  .trust-track .tc.dup{ display:inline-flex; }
  .tc-logo{ height:24px; }
}
@keyframes trustScroll{ to{ transform:translateX(-50%); } }

/* ---------- TECH / AI CHIP LOGOS ---------- */
#ai-tools .chip {
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #ffffff;
    color: #000000;
}
.chip .sq.sq-img{ background:#fff; padding:3px; }
.chip .sq img {
    width: auto;
    height: 25px;
    object-fit: contain;
    display: block;
    border-radius: 5px;
    max-width: 136px;
}

/* ---------- AI TOOLS MARQUEE (scrolls opposite to the tech row) ---------- */
.marquee-rev .marquee-track{ animation-direction:reverse; }
/* dark AI section sits between/after the light tech section for contrast */
.tech.ai-tools{ background:var(--bg-2); }

/* ---------- MEGA MENU (mobile accordion) ---------- */
.mnav-group.open .mnav-sub{ max-height:1600px; }
.mnav-subhead{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--fg-mut); padding:12px 0 4px;
}

/* =========================================================================
   "WHAT I DO" MOCKUP ANIMATIONS
   Application rules for the bento mockups (the @keyframes live in style.css).
   home.js adds .in-view to .bento when it scrolls into view.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference){
  .bento.in-view .mw{ animation:fadeRise .7s var(--ease) both; }
  .bento.in-view .bt-b .mw{ animation-delay:.06s; }
  .bento.in-view .bt-c .mw{ animation-delay:.12s; }
  .bento.in-view .bt-d .mw{ animation-delay:.18s; }
  .bento.in-view .bt-e .mw{ animation-delay:.10s; }
  .bento.in-view .bt-f .mw{ animation-delay:.16s; }

  .bento.in-view .bt-b .code2 .cl{ animation:typeLine 5.5s steps(1) infinite; opacity:0; }
  .bento.in-view .bt-b .code2 .cl:nth-child(1){ animation-delay:.0s; }
  .bento.in-view .bt-b .code2 .cl:nth-child(2){ animation-delay:.4s; }
  .bento.in-view .bt-b .code2 .cl:nth-child(3){ animation-delay:.8s; }
  .bento.in-view .bt-b .code2 .cl:nth-child(4){ animation-delay:1.2s; }
  .bento.in-view .bt-b .code2 .cl:nth-child(5){ animation-delay:1.6s; }
  .bento.in-view .bt-b .code2 .cl:nth-child(6){ animation-delay:2.0s; }

  .bento.in-view .bt-c .mp-row{ animation:slideIn .55s var(--ease) both; }
  .bento.in-view .bt-c .mp-row:nth-child(2){ animation-delay:.28s; }
  .bento.in-view .bt-c .mp-row:nth-child(3){ animation-delay:.4s; }
  .bento.in-view .bt-c .mp-row:nth-child(4){ animation-delay:.52s; }

  .bento.in-view .bt-d .pc{ animation:popIn .6s var(--ease) both; }
  .bento.in-view .bt-d .pc:nth-child(2){ animation-delay:.14s; }
  .bento.in-view .bt-d .cart2-btn{ animation:cartPulse 2.6s ease-in-out 1s infinite; }

  .bento.in-view .bt-e .fig-frame.f1{ animation:selGlow 3.2s ease-in-out infinite; }
  .bento.in-view .bt-e .fig-frame.f2{ animation:selGlow 3.2s ease-in-out 1.6s infinite; }
  .bento.in-view .bt-e .fig-cursor{ animation:cursorMove 4.5s ease-in-out infinite; }

  .bento.in-view .bt-f .an-chart i{ animation:barGrow 1.5s var(--ease) both; transform-origin:bottom; }
  .bento.in-view .bt-f .an-chart i:nth-child(1){ animation-delay:.1s; }
  .bento.in-view .bt-f .an-chart i:nth-child(2){ animation-delay:.2s; }
  .bento.in-view .bt-f .an-chart i:nth-child(3){ animation-delay:.3s; }
  .bento.in-view .bt-f .an-chart i:nth-child(4){ animation-delay:.4s; }
  .bento.in-view .bt-f .an-chart i:nth-child(5){ animation-delay:.5s; }
  .bento.in-view .bt-f .an-chart i:nth-child(6){ animation-delay:.6s; }
}