/* ============================================================
   Brandão Torres Construtora — Hero e marquee
   Ordem de carregamento: 3 de 7 (não altere a ordem dos <link>
   no index.html — a cascata do CSS depende dela).
   ============================================================ */

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 130px 0 0;
  overflow: hidden;
}

.ridges {
  position: absolute;
  inset: -20% -30% auto auto;
  width: 1100px;
  height: 1100px;
  opacity: .5;
  pointer-events: none;
}

.ridges svg {
  width: 100%;
  height: 100%;
  animation: drift 26s ease-in-out infinite alternate
}

@keyframes drift {
  to {
    transform: translate(-30px, 26px) rotate(2deg)
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
  position: relative;
}

.hero h1 {
  font-size: clamp(42px, 6vw, 90px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 26px 0 34px;
  font-family: var(--disp);
}

.hero h1 .thin {
  font-weight: 400;
  color: var(--mist)
}

.hero p.lead {
  max-width: 44ch;
  color: var(--mist);
  font-size: 17px
}

.hero-cta {
  display: flex;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap
}

.hero-fig {
  position: relative
}

.hero-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/4.6;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1) .4s;
}

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

.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  transition: transform 1.8s cubic-bezier(.22, 1, .3, 1) .4s;
}

.loaded .hero-frame img {
  transform: scale(1)
}

.hero-frame .tag {
  position: absolute;
  left: 16px;
  bottom: 16px
}

.hero-fig figcaption {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mut);
}

.crescents {
  position: absolute;
  top: -64px;
  right: -8px;
  width: 150px;
  pointer-events: none
}

.crescents path {
  opacity: 0;
  transform: translateY(-14px);
  animation: cres .9s ease forwards
}

.crescents path:nth-child(1) {
  animation-delay: .9s
}

.crescents path:nth-child(2) {
  animation-delay: 1.05s
}

.crescents path:nth-child(3) {
  animation-delay: 1.2s
}

@keyframes cres {
  to {
    opacity: 1;
    transform: none
  }
}

.hero-stats {
  margin-top: 76px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.stat {
  padding: 30px 28px 42px;
  border-right: 1px solid var(--line)
}

.stat:first-child {
  padding-left: 0
}

.stat:last-child {
  border-right: 0
}

.stat b {
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 600;
  letter-spacing: -.03em;
  display: block;
  font-family: var(--disp);
}

.stat b em {
  font-style: normal;
  color: var(--sage)
}

.stat span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mut)
}

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--mut);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.scroll-cue::after {
  content: "";
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--sage), transparent);
  animation: cue 2s ease infinite
}

@keyframes cue {
  0% {
    transform: scaleY(0);
    transform-origin: top
  }

  50% {
    transform: scaleY(1);
    transform-origin: top
  }

  51% {
    transform-origin: bottom
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom
  }
}

/* ---------- marquee ---------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 20px 0;
  background: var(--ink-2);
}

.marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: mq 34s linear infinite
}

.marquee span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mist);
  padding: 0 34px;
  display: flex;
  align-items: center;
  gap: 34px;
  white-space: nowrap;
}

.marquee span::after {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--sage);
  transform: rotate(45deg)
}

@keyframes mq {
  to {
    transform: translateX(-50%)
  }
}