/* ============================================================
   Ma&Stral — base styles (Tailwind handles most of it)
   Custom layer kept tiny on purpose.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: auto; /* lenis takes over */
  -webkit-text-size-adjust: 100%;
}

body {
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Bricolage Grotesque tweaks */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Italic semibold variant via wght/wdth control */
em, .italic {
  font-style: italic;
  font-feature-settings: "ss03";
}

/* ============================================================
   Hero 3D canvas + stages
   ============================================================ */
#forest-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-stage {
  pointer-events: none;
}
.hero-stage a,
.hero-stage button { pointer-events: auto; }

/* ============================================================
   Before / after handle cursor
   ============================================================ */
#ba-compare { user-select: none; touch-action: none; }

/* ============================================================
   Services index — active row
   ============================================================ */
.service-row[data-active="true"] h3 { color: oklch(75% 0.190 142); }
.service-row[data-active="true"] .service-num { color: oklch(28% 0.060 155); }

/* Service stepper: pinned section that progresses through topics on scroll (all sizes). */
#atuacao.service-scroll {
  min-height: 380vh;
}

#atuacao.service-scroll > div {
  position: sticky;
  top: 4rem;
  min-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

#services-index {
  gap: 1.5rem;
}

#service-steps {
  min-height: 9.5rem;
  overflow: hidden;
}

#service-steps .service-row {
  display: none;
  border-top: 0;
  border-bottom: 0;
}

#service-steps .service-row[data-active="true"] {
  display: block;
  animation: serviceStepIn 260ms ease-out both;
}

@media (max-width: 767px) {
  #services-index figure > div {
    max-height: 32vh;
  }
}

@media (min-width: 768px) {
  #atuacao.service-scroll {
    min-height: 480vh;
  }

  #services-index {
    gap: 3rem;
  }

  /* Desktop: photo takes its column, list shows one step in the right column. */
  #services-index figure > div {
    max-height: 70vh;
  }

  #service-steps {
    min-height: 14rem;
  }
}

@keyframes serviceStepIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Lenis (smooth scroll) required setup
   ============================================================ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============================================================
   Motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
  #forest-canvas { display: none; }
  #hero-fallback { opacity: 1 !important; }
}

/* ============================================================
   Image rendering hint for photographs
   ============================================================ */
img { display: block; max-width: 100%; height: auto; }
img[loading="lazy"] { background: oklch(95% 0.010 105); }