/* --- mattvv.com custom overrides (local port of Webflow design) --- */

/* Preloader removed in static port */
.preloader { display: none !important; }

/* Local hero + contact background images (replacing Webflow CDN) */
.split-image.hero-2 {
  background-image: url('/assets/hero.jpg') !important;
}
.split-image.contact {
  background-image: linear-gradient(rgba(255,255,255,0) 70%, rgba(0,0,0,.5)), url('/assets/contact-bg.jpg') !important;
}

/* Social icon (LinkedIn) */
.social-icon-link svg { width: 20px; height: 20px; fill: #111; display: block; }

/* Mobile hamburger (Webflow icon font replaced with a CSS hamburger) */
.menu-button { cursor: pointer; }
.menu-button .hamburger,
.menu-button .hamburger::before,
.menu-button .hamburger::after {
  display: block; width: 24px; height: 2px; background: #111; border-radius: 2px;
}
.menu-button .hamburger { position: relative; }
.menu-button .hamburger::before,
.menu-button .hamburger::after { content: ""; position: absolute; left: 0; }
.menu-button .hamburger::before { top: -7px; }
.menu-button .hamburger::after { top: 7px; }

/* Mobile menu open/closed without Webflow JS */
@media screen and (max-width: 991px) {
  .nav-menu-left { display: none; }
  .nav-bar-left.nav-open .nav-menu-left { display: block; }
  .nav-left-social-icons { display: none; }
}

/* Scroll-reveal (only active when JS is present, so no-JS shows everything) */
.js-anim .reveal {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .6s ease, transform .6s ease;
}
.js-anim .reveal.in { opacity: 1; transform: none; }

/* Hero tagline spacing + darker than the template's light grey */
.hero-tagline { max-width: 520px; margin-top: 4px; color: #555 !important; }

/* Talks cards: render the title/badge ABOVE the thumbnail (YouTube thumbnails
   already contain text, so the original overlaid-title style collided). */
#talks .post-card-v3 { background-color: transparent; overflow: visible; }
#talks .post-card-info-v3 {
  position: static;
  background-image: none;
  padding: 0 0 14px 0;
  justify-content: flex-start;
  order: -1;
}
#talks .post-card-v3-heading { margin-top: 6px; }
#talks .link-v2.white-link { margin-top: 10px; }
#talks .zoom-image { display: block; }

/* Testimonials (What People Say) — horizontal auto-scroll marquee */
#testimonials .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
#testimonials .marquee-track { display: flex; gap: 24px; width: max-content; animation: tt-scroll 90s linear infinite; }
#testimonials .marquee:hover .marquee-track { animation-play-state: paused; }
#testimonials .quote-card { flex: 0 0 340px; width: 340px; box-sizing: border-box; padding: 28px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
#testimonials .quote-mark { font-family: "Playfair Display", serif; font-size: 64px; line-height: 0.6; color: #faaf52; height: 26px; }
#testimonials .quote-text { color: #cfcfcf; font-size: 14px; line-height: 23px; margin: 16px 0; }
#testimonials .quote-name { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; font-weight: 500; color: #fff; }
#testimonials .quote-title { font-size: 12px; line-height: 18px; color: #8a8a8a; margin-top: 2px; }
#testimonials .quote-past { font-size: 11px; line-height: 16px; color: #6f6f6f; margin-top: 4px; letter-spacing: 0.3px; }
#testimonials a.quote-card { text-decoration: none; color: inherit; display: block; cursor: pointer; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
#testimonials a.quote-card:hover { border-color: rgba(250,175,82,0.55); background: rgba(255,255,255,0.045); transform: translateY(-3px); }
@keyframes tt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { #testimonials .marquee-track { animation: none; } #testimonials .marquee { overflow-x: auto; } }