/* ============================================================
   Trikaya Coatings — site-specific styles.
   Loaded AFTER the Modernist design-system styles.css.
   Holds only what inline styles can't express: pseudo-states,
   keyframes and the reveal-on-scroll defaults.
   ============================================================ */

html { scroll-behavior: smooth; }
body { margin: 0; }

/* The `hidden` attribute must win over inline `display` values
   (e.g. display:flex), which otherwise override the UA default. */
[hidden] { display: none !important; }

.dev { font-family: "Noto Sans Devanagari", "Archivo", sans-serif; }

/* --- Marquee --- */
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marqtrack { animation: marq 32s linear infinite; }
.marqwrap:hover .marqtrack { animation-play-state: paused; }

/* --- Reveal on scroll (JS adds .is-visible) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Link hovers --- */
.navlink { color: var(--color-text); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.navlink:hover { color: var(--color-accent); }
.footlink { color: var(--color-neutral-300); text-decoration: none; font-size: 14px; }
.footlink:hover { color: var(--color-accent); }
a.calllink { text-decoration: none; }

/* --- Image zoom on hover --- */
.zoom { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.zoom:hover { transform: scale(1.05); }
.zoom-sm:hover { transform: scale(1.04); }

/* --- Client logos --- */
.clientlogo { opacity: .85; transition: opacity .4s, filter .4s; }
.clientlogo:hover { opacity: 1; }

/* --- Parts-gallery filter buttons --- */
.filter-btn {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 2px solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  transition: background .2s, color .2s;
}
.filter-btn:hover { background: var(--color-accent-100); }
.filter-btn.is-active { background: var(--color-accent); color: #fff; }

/* Cards hidden by the filter */
.part-card[hidden] { display: none !important; }