html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Manrope', sans-serif;
}

/* Blueprint grid background used behind the hero */
.blueprint-grid {
  background-image:
    linear-gradient(to right, #E6ECEF 1px, transparent 1px),
    linear-gradient(to bottom, #E6ECEF 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
}

/* Header gets a solid background once the page is scrolled */
#site-header.scrolled {
  background-color: rgba(249, 249, 248, 0.92);
  backdrop-filter: blur(8px);
  border-bottom-color: #E6ECEF;
}

/* ===== Hero entrance ===== */

/* Line-mask headline reveal: text slides up out of a hidden overflow box */
.reveal-mask {
  display: block;
  overflow: hidden;
}

.reveal-line {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-loaded .reveal-line {
  transform: translateY(0);
}

/* Badge / paragraph / buttons / logo strip simple fade+rise */
.hero-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-loaded .hero-fade {
  opacity: 1;
  transform: translateY(0);
}

/* Hero image "wipe" reveal via clip-path */
.hero-clip {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 300ms;
}

.hero-loaded .hero-clip {
  clip-path: inset(0 0 0 0);
}

/* ===== Infinite marquee ===== */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 800;
  font-size: 2.25rem;
  letter-spacing: -0.02em;
  padding: 0 2rem;
  white-space: nowrap;
  color: #0A0A0A;
}

@media (min-width: 768px) {
  .marquee-item { font-size: 3.75rem; }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== Scroll-reveal for below-the-fold content ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Obras filter pills ===== */
.filter-btn {
  background: transparent;
  color: #0A0A0A;
  cursor: pointer;
}

.filter-btn:hover {
  border-color: #0033A0;
  color: #0033A0;
}

.filter-btn.is-active {
  background: #0033A0;
  border-color: #0033A0;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-line, .hero-fade, .hero-clip, .reveal, .marquee-track {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
}