:root {
  --white: #f6f5f1;
  --muted: rgba(246, 245, 241, .72);
  --line: rgba(246, 245, 241, .32);
  --dark: #151917;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--dark);
  color: var(--white);
  font-family: "Manrope", sans-serif;
}

@keyframes text-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes headline-rise {
  from {
    opacity: 0;
    transform: translate(-50%, 28px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.hero {
  isolation: isolate;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: url("../imagens/hero1.jpeg") center center / cover no-repeat;
}

.hero::before,
.hero__backdrop { display: none; }

.site-header {
  width: 100%;
  padding: 28px clamp(24px, 5vw, 78px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { color: var(--white); text-decoration: none; display: inline-flex; align-items: center; gap: 11px; }
.brand__mark { width: 29px; height: 29px; border: 1px solid rgba(246,245,241,.85); border-radius: 50%; display: grid; place-items: center; font-family: "Playfair Display", serif; font-style: italic; font-size: 18px; }
.brand__name { font-size: 13px; letter-spacing: .13em; text-transform: uppercase; line-height: .9; }
.brand__name small { display: block; margin-top: 5px; font-size: 7px; letter-spacing: .24em; color: var(--muted); }

.navigation { display: flex; align-items: center; gap: clamp(21px, 3vw, 46px); }
.navigation a { color: var(--muted); font-size: 10px; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; transition: color .25s ease; }
.navigation a:hover { color: var(--white); }
.menu-button { width: 30px; height: 30px; padding: 7px 4px; border: 1px solid rgba(246,245,241,.35); border-radius: 50%; background: transparent; display: grid; align-content: center; gap: 4px; cursor: pointer; }
.menu-button span { display: block; width: 13px; height: 1px; margin: auto; background: var(--white); }

.hero__content { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; pointer-events: none; }
h1 { position: absolute; top: 13%; left: 50%; width: min(1080px, 94vw); margin: 0; transform: translateX(-50%); text-align: center; font-size: clamp(44px, 6.5vw, 96px); font-weight: 500; letter-spacing: -.065em; line-height: .88; text-transform: uppercase; white-space: nowrap; animation: headline-rise .85s ease-out .15s both; }
h1 em { font-family: "Playfair Display", serif; font-size: .83em; font-weight: 500; letter-spacing: -.07em; text-transform: none; white-space: nowrap; }
.hero__subheadline { position: absolute; left: clamp(24px, 5vw, 78px); bottom: clamp(64px, 9vh, 92px); max-width: 570px; margin: 0; color: var(--white); font-family: "Playfair Display", serif; font-size: clamp(19px, 2vw, 28px); font-style: italic; line-height: 1.03; animation: text-rise .85s ease-out .45s both; }

.hero__footer { padding: 0 clamp(24px, 5vw, 78px) 28px; display: flex; align-items: center; color: rgba(246,245,241,.58); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.hero__scroll { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; }
.hero__scroll b { color: var(--white); font-size: 17px; font-weight: 400; }
.background-toggle { position: absolute; right: clamp(42px, 8vw, 120px); bottom: clamp(96px, 17vh, 150px); display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid rgba(246, 245, 241, .45); border-radius: 999px; background: rgba(15, 20, 18, .18); backdrop-filter: blur(5px); }
.background-toggle__button { min-width: 35px; padding: 5px 8px; border: 0; border-radius: 999px; background: transparent; color: rgba(246, 245, 241, .65); font-family: "Manrope", sans-serif; font-size: 9px; letter-spacing: .08em; cursor: pointer; transition: background .25s ease, color .25s ease; }
.background-toggle__button:hover, .background-toggle__button.is-active { background: var(--white); color: var(--dark); }

@media (max-width: 640px) {
  .site-header { padding-top: 22px; }
  .navigation a { display: none; }
  .hero { background-position: 61% center; }
  h1 { top: 21%; width: calc(100vw - 20px); font-size: clamp(38px, 11.8vw, 48px); }
  .hero__subheadline { left: 24px; bottom: 66px; max-width: 82vw; font-size: 21px; }
  .hero__footer { padding-bottom: 21px; font-size: 8px; }
  .hero__scroll { font-size: 0; }
  .hero__scroll b { font-size: 18px; }
  .background-toggle { bottom: 170px; }
  .background-toggle__button { min-width: 32px; padding-inline: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  h1,
  .hero__subheadline {
    animation: none;
  }
}