/* Alecrim Fit — landing
   Direção: liquid glass minimalista, branco + verde, profundidade por camadas.
   Ver docs/01-identidade.md */

/* fontes self-hosted (antes eram Google Fonts, render-blocking ~1s) */
@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/youngserif-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/youngserif-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* cor */
  --bg: #F6F4EC;
  --surface: #FFFFFF;
  --forest: #2F4A34;
  --ink: #33382F;
  --sage: #5B7553;
  --sage-soft: #E6EBE0;
  --line: rgba(47, 74, 52, 0.14);
  --cta: #2F4A34;
  --cta-hover: #253A29;

  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-tint: rgba(91, 117, 83, 0.14);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: 18px;

  /* tipografia */
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1: clamp(1.18rem, 1.09rem + 0.42vw, 1.4rem);
  --step-2: clamp(1.4rem, 1.24rem + 0.78vw, 1.85rem);
  --step-3: clamp(1.7rem, 1.46rem + 1.2vw, 2.35rem);
  --step-4: clamp(2.05rem, 1.7rem + 1.8vw, 3rem);
  --step-5: clamp(2.4rem, 1.85rem + 2.75vw, 3.9rem);

  /* espaço */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-section: clamp(3.25rem, 8vw, 5.75rem);

  /* forma */
  --wrap: 1120px;
  --radius: 20px;
  --radius-sm: 12px;

  --shadow-soft: 0 12px 32px -20px rgba(47, 74, 52, 0.3);
  --shadow-lift: 0 22px 48px -24px rgba(47, 74, 52, 0.38);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

p { text-wrap: pretty; }

a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--forest);
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}

:focus-visible {
  outline: 2.5px solid var(--forest);
  outline-offset: 3px;
}

/* alvos de âncora não somem atrás do header fixo */
:target { scroll-margin-top: 88px; }
[id] { scroll-margin-top: 88px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 2.5rem);
}

/* ---------- botões ---------- */
.btn {
  --btn-bg: var(--cta);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.92rem 1.6rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.btn--primary:hover { background: var(--cta-hover); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--forest);
  border-color: rgba(47, 74, 52, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.55); transform: translateY(-2px); }
.btn--sm { padding: 0.62rem 1.15rem; font-size: var(--step--1); }

/* ---------- kicker ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sage);
  margin: 0 0 var(--space-s);
}
.kicker::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* ---------- vidro ---------- */
.glass, .glass-flat {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
}
.glass {
  background: var(--glass-bg);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.glass-flat {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.92); }
  .glass-flat { background: rgba(255, 255, 255, 0.82); }
  .btn--ghost { background: rgba(255, 255, 255, 0.72); }
}

/* ---------- cena de fundo (parallax) ---------- */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bg-scene .blob,
.bg-scene .glass-shape { position: absolute; will-change: transform; }
.blob { border-radius: 50%; filter: blur(72px); opacity: 0.5; }
.blob--1 { width: 46vw; height: 46vw; left: -12vw; top: -8vw; background: radial-gradient(circle at 40% 40%, #8CA980, transparent 70%); }
.blob--2 { width: 52vw; height: 52vw; right: -18vw; top: 46vh; opacity: 0.4; background: radial-gradient(circle at 60% 40%, #6E8C64, transparent 70%); }

.glass-shape {
  border-radius: 46% 54% 58% 42% / 48% 40% 60% 52%;
  background: var(--glass-tint);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.45);
}
.glass-shape--1 { width: 30vw; height: 30vw; right: 8vw; top: 12vh; }
.glass-shape--2 { width: 22vw; height: 22vw; left: 4vw; top: 60vh; }
.glass-shape--3 { width: 26vw; height: 26vw; right: 18vw; top: 140vh; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 244, 236, 0.68);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  background: rgba(246, 244, 236, 0.85);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -26px rgba(47, 74, 52, 0.5);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}
.site-nav { display: none; }
.site-header .btn { margin-left: auto; }

.nameplate {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--forest);
}
.nameplate__mark { color: var(--sage); flex: none; }
.nameplate__word { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.005em; }
.nameplate__badge {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sage);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
}

@media (min-width: 860px) {
  .site-nav { display: flex; gap: 1.7rem; margin-left: 2.25rem; }
  .site-nav a {
    position: relative;
    text-decoration: none;
    color: var(--ink);
    font-weight: 500;
    padding-block: 0.35rem;
  }
  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1.5px;
    background: var(--forest);
    transition: right 0.22s ease;
  }
  .site-nav a:hover::after { right: 0; }
}

/* ---------- hero ---------- */
.hero { padding: clamp(2.75rem, 8vw, 6rem) 0 var(--space-section); overflow: hidden; }
.hero__inner { display: grid; gap: clamp(2rem, 6vw, 4rem); align-items: center; }
.hero__title { font-size: var(--step-5); margin: 0 0 var(--space-m); }
.hero__sub {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
  max-width: 46ch;
  color: var(--ink);
  margin: 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: var(--space-l) 0 var(--space-s); }
.hero__trust { font-size: var(--step--1); color: var(--sage); margin: 0; max-width: 42ch; }

/* mobile: fotos em grid estático, sem sobreposição */
.hero__stage { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.float-card {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lift);
  background: var(--surface);
}
.float-card img { width: 100%; height: 100%; object-fit: cover; }
.float-card--a { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.float-card--b, .float-card--c { aspect-ratio: 1; }

@media (min-width: 860px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
  .hero__stage { display: block; position: relative; height: 460px; }
  .float-card { position: absolute; will-change: transform; }
  .float-card--a { width: min(60%, 320px); aspect-ratio: 1; right: 0; top: 0; }
  .float-card--b { width: min(44%, 220px); aspect-ratio: 1; left: 0; top: 40%; }
  .float-card--c { width: min(32%, 160px); aspect-ratio: 4 / 5; right: 10%; bottom: 0; }
}

/* ---------- seções ---------- */
.section { padding: var(--space-section) 0; position: relative; z-index: 1; }
.section__title { font-size: var(--step-4); margin-bottom: var(--space-xs); }
.section__lead { max-width: 54ch; color: var(--ink); margin: var(--space-xs) 0 var(--space-l); }
.section__cta { margin-top: var(--space-xl); }

/* passos */
.steps { list-style: none; margin: var(--space-l) 0 0; padding: 0; display: grid; gap: var(--space-s); counter-reset: step; }
.step { padding: var(--space-m); }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--forest);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  margin-bottom: var(--space-s);
}
.step__title { font-size: var(--step-1); margin-bottom: 0.35rem; }
.step p { margin: 0; }

/* categorias */
.cats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.cat {
  overflow: hidden;
  padding: 0;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.cat img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.4s ease; }
.cat__body { padding: 1.05rem 1.25rem 1.35rem; }
.cat__body h3 { font-size: var(--step-1); margin-bottom: 0.15rem; }
.cat__body p { margin: 0; color: var(--ink); font-size: var(--step--1); }
@media (hover: hover) {
  .cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .cat:hover img { transform: scale(1.04); }
}

/* história */
.story { display: grid; gap: var(--space-m); align-items: center; }
.story__media img { border-radius: var(--radius); object-fit: cover; width: 100%; box-shadow: var(--shadow-soft); }
.story__copy { padding: clamp(1.4rem, 4vw, 2rem); }
.story__copy p { margin: 0 0 0.85rem; }

.story__stats {
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: var(--space-m) 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s) var(--space-m);
}
.story__stats li { display: flex; flex-direction: column; gap: 0.1rem; }
.story__stats strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); color: var(--forest); line-height: 1.1; }
.story__stats span { font-size: var(--step--1); color: var(--sage); }

/* citações */
.quotes { display: grid; gap: var(--space-s); margin-top: var(--space-l); }
.quote { margin: 0; padding: var(--space-m); display: flex; flex-direction: column; gap: 0.9rem; }
.quote p { margin: 0; font-size: 1.05rem; }
.quote p::before { content: "\201C"; color: var(--sage); margin-right: 0.05em; }
.quote p::after { content: "\201D"; color: var(--sage); }
.quote footer { color: var(--sage); font-weight: 600; font-size: var(--step--1); margin-top: auto; }

/* faq */
.faq__list { display: grid; gap: var(--space-2xs); margin-top: var(--space-l); }
.faq__item { padding: 0 clamp(1rem, 3vw, 1.3rem); transition: background-color 0.2s ease; }
.faq__item summary {
  cursor: pointer;
  padding: 1.05rem 0;
  font-weight: 600;
  color: var(--forest);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--sage);
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { content: "\2013"; }
.faq__item p { margin: 0 0 1.15rem; color: var(--ink); }

/* closer */
.closer { padding: clamp(2rem, 6vw, 3.5rem) 0 var(--space-section); }
.closer__inner { padding: clamp(2rem, 6vw, 3.5rem); text-align: center; }
.closer__inner h2 { font-size: var(--step-3); margin-bottom: var(--space-xs); }
.closer__inner p { margin: 0 auto var(--space-m); max-width: 42ch; }

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .cats { grid-template-columns: repeat(2, 1fr); gap: var(--space-m); }
  .quotes { grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
}
@media (min-width: 960px) {
  .cats { grid-template-columns: repeat(3, 1fr); }
  .story { grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 3.5rem); }
}

/* ---------- footer ---------- */
.site-footer {
  margin-top: var(--space-section);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(2.5rem, 6vw, 3.75rem) 0 2rem;
}
.site-footer__inner { display: grid; gap: var(--space-l); }
.site-footer__brand p { margin: 0.55rem 0 0; color: var(--sage); }
.site-footer__info { display: grid; gap: 1.15rem; margin: 0; }
.site-footer__info dt {
  font-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sage);
}
.site-footer__info dd { margin: 0.25rem 0 0; color: var(--ink); }
.site-footer__note { color: var(--sage); font-size: var(--step--1); margin-top: var(--space-l); }

@media (min-width: 780px) {
  .site-footer__inner { grid-template-columns: 1fr auto auto; align-items: start; }
  .site-footer__info { grid-auto-flow: column; gap: clamp(1.5rem, 4vw, 2.5rem); }
}

/* ---------- abertura: folhas de alecrim desbravando a tela ----------
   6 ramos compridos, deitados na horizontal e trancados, cobrindo tudo no
   frame 1. Abrem pros lados, alternando esquerda e direita, e somem saindo
   pela lateral. Fundo transparente, a pagina anima junto por baixo.

   So transform e opacity sao animados, os dois no compositor. O blur NAO e
   filter animado: aquilo forcava o browser a refazer um gaussian blur da
   viewport inteira a cada frame (raio diferente = nada cacheado), o que
   engasgava os primeiros frames. Agora sao duas copias do SVG, uma nitida e
   uma pre-borrada, com cross-fade de opacidade. */
#intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  overflow: hidden;
  pointer-events: none;
}

/* Ramo 5:1. O SVG tem folga vertical pro blur nao ser cortado: o desenho ocupa
   200 de 280 no viewBox, entao as duas versoes tem geometria identica e a
   espessura visivel do ramo continua ~18,6vmax.
   Comprimento 130vmax: cobre a largura da tela (100vmax no pior caso) mas e
   curto o bastante pra sair inteiro. Desliza 125vmax = meio ramo (65) + meia
   tela (50) + folga. */
.intro__leaf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130vmax;
  aspect-ratio: 5 / 1;
  will-change: transform;
  transform: translate(-50%, -50%) translate(var(--x0), var(--y0));
}
.intro__leaf::before,
.intro__leaf::after {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  will-change: opacity;
}
.intro__leaf::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221400%22%20height=%22280%22%20viewBox=%220%200%201400%20280%22%3E%3Cg%20stroke=%22%232F4A34%22%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M6%20146l33%20-53M6%20146l26%2070M34%20148l50%20-59M34%20148l27%2061M59%20149l48%20-50M59%20149l28%2044M80%20150l34%20-38M80%20150l30%2034M100%20151l28%20-39M100%20151l37%2039M121%20152l30%20-59M121%20152l43%2054M146%20152l28%20-73M146%20152l36%2066M174%20152l23%20-62M174%20152l24%2061M202%20151l20%20-44M202%20151l18%2047M227%20150l28%20-42M227%20150l21%2040M248%20149l46%20-53M248%20149l34%2044M268%20148l54%20-56M268%20148l49%2051M289%20146l41%20-46M289%20146l50%2055M314%20145l26%20-38M314%20145l36%2052M342%20143l24%20-49M342%20143l21%2044M370%20142l26%20-69M370%20142l16%2043M395%20141l27%20-71M395%20141l22%2053M416%20140l26%20-52M416%20140l38%2061M436%20140l26%20-38M436%20140l48%2056M457%20140l39%20-44M457%20140l43%2044M482%20140l53%20-55M482%20140l30%2037M510%20141l48%20-55M510%20141l23%2040M538%20142l29%20-45M538%20142l22%2055M563%20144l20%20-42M563%20144l25%2068M584%20145l22%20-58M584%20145l32%2065M604%20146l28%20-72M604%20146l35%2048M625%20148l32%20-62M625%20148l32%2034M650%20149l29%20-41M650%20149l33%2035M678%20150l33%20-36M678%20150l36%2050M706%20151l46%20-48M706%20151l33%2066M731%20152l50%20-60M731%20152l25%2067M752%20152l35%20-56M752%20152l22%2053M771%20152l19%20-44M771%20152l23%2040M793%20151l18%20-48M793%20151l31%2038M818%20150l26%20-65M818%20150l44%2046M846%20149l37%20-68M846%20149l48%2057M874%20148l37%20-49M874%20148l37%2060M899%20146l32%20-34M899%20146l21%2051M920%20145l38%20-40M920%20145l16%2042M939%20143l46%20-58M939%20143l21%2046M961%20142l38%20-65M961%20142l37%2054M986%20141l22%20-53M986%20141l50%2055M1015%20140l16%20-43M1015%20140l47%2050M1042%20140l23%20-54M1042%20140l32%2043M1067%20140l38%20-66M1067%20140l21%2040M1088%20140l45%20-57M1088%20140l18%2049M1107%20141l37%20-39M1107%20141l25%2063M1129%20142l32%20-34M1129%20142l36%2066M1154%20144l38%20-50M1154%20144l42%2052M1183%20145l38%20-68M1183%20145l36%2037M1210%20147l26%20-64M1210%20147l30%2034M1235%20148l17%20-47M1235%20148l29%2045M1256%20149l19%20-45M1256%20149l28%2063M1275%20151l35%20-57M1275%20151l26%2070M1297%20151l49%20-60M1297%20151l26%2059M1323%20152l45%20-47M1323%20152l27%2042M1351%20152l32%20-35M1351%20152l30%2034M1378%20152l30%20-41M1378%20152l39%2040%22%20stroke-width=%228%22/%3E%3Cpath%20d=%22M0%20146%20Q100%20153%20200%20150%20Q300%20144%20400%20141%20Q500%20140%20600%20149%20Q700%20149%20800%20147%20Q900%20152%201000%20142%20Q1100%20141%201200%20151%20Q1300%20142%201400%20144%22%20stroke-width=%2212%22/%3E%3C/g%3E%3C/svg%3E"); }
.intro__leaf::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221400%22%20height=%22280%22%20viewBox=%220%200%201400%20280%22%3E%3Cdefs%3E%3Cfilter%20id=%22b%22%20x=%22-2%25%22%20y=%22-25%25%22%20width=%22104%25%22%20height=%22150%25%22%3E%3CfeGaussianBlur%20stdDeviation=%225%22/%3E%3C/filter%3E%3C/defs%3E%3Cg%20stroke=%22%232F4A34%22%20fill=%22none%22%20stroke-linecap=%22round%22%20filter=%22url(%23b)%22%3E%3Cpath%20d=%22M6%20146l33%20-53M6%20146l26%2070M34%20148l50%20-59M34%20148l27%2061M59%20149l48%20-50M59%20149l28%2044M80%20150l34%20-38M80%20150l30%2034M100%20151l28%20-39M100%20151l37%2039M121%20152l30%20-59M121%20152l43%2054M146%20152l28%20-73M146%20152l36%2066M174%20152l23%20-62M174%20152l24%2061M202%20151l20%20-44M202%20151l18%2047M227%20150l28%20-42M227%20150l21%2040M248%20149l46%20-53M248%20149l34%2044M268%20148l54%20-56M268%20148l49%2051M289%20146l41%20-46M289%20146l50%2055M314%20145l26%20-38M314%20145l36%2052M342%20143l24%20-49M342%20143l21%2044M370%20142l26%20-69M370%20142l16%2043M395%20141l27%20-71M395%20141l22%2053M416%20140l26%20-52M416%20140l38%2061M436%20140l26%20-38M436%20140l48%2056M457%20140l39%20-44M457%20140l43%2044M482%20140l53%20-55M482%20140l30%2037M510%20141l48%20-55M510%20141l23%2040M538%20142l29%20-45M538%20142l22%2055M563%20144l20%20-42M563%20144l25%2068M584%20145l22%20-58M584%20145l32%2065M604%20146l28%20-72M604%20146l35%2048M625%20148l32%20-62M625%20148l32%2034M650%20149l29%20-41M650%20149l33%2035M678%20150l33%20-36M678%20150l36%2050M706%20151l46%20-48M706%20151l33%2066M731%20152l50%20-60M731%20152l25%2067M752%20152l35%20-56M752%20152l22%2053M771%20152l19%20-44M771%20152l23%2040M793%20151l18%20-48M793%20151l31%2038M818%20150l26%20-65M818%20150l44%2046M846%20149l37%20-68M846%20149l48%2057M874%20148l37%20-49M874%20148l37%2060M899%20146l32%20-34M899%20146l21%2051M920%20145l38%20-40M920%20145l16%2042M939%20143l46%20-58M939%20143l21%2046M961%20142l38%20-65M961%20142l37%2054M986%20141l22%20-53M986%20141l50%2055M1015%20140l16%20-43M1015%20140l47%2050M1042%20140l23%20-54M1042%20140l32%2043M1067%20140l38%20-66M1067%20140l21%2040M1088%20140l45%20-57M1088%20140l18%2049M1107%20141l37%20-39M1107%20141l25%2063M1129%20142l32%20-34M1129%20142l36%2066M1154%20144l38%20-50M1154%20144l42%2052M1183%20145l38%20-68M1183%20145l36%2037M1210%20147l26%20-64M1210%20147l30%2034M1235%20148l17%20-47M1235%20148l29%2045M1256%20149l19%20-45M1256%20149l28%2063M1275%20151l35%20-57M1275%20151l26%2070M1297%20151l49%20-60M1297%20151l26%2059M1323%20152l45%20-47M1323%20152l27%2042M1351%20152l32%20-35M1351%20152l30%2034M1378%20152l30%20-41M1378%20152l39%2040%22%20stroke-width=%228%22/%3E%3Cpath%20d=%22M0%20146%20Q100%20153%20200%20150%20Q300%20144%20400%20141%20Q500%20140%20600%20149%20Q700%20149%20800%20147%20Q900%20152%201000%20142%20Q1100%20141%201200%20151%20Q1300%20142%201400%20144%22%20stroke-width=%2212%22/%3E%3C/g%3E%3C/svg%3E"); opacity: 0; }

/* trancado: cada ramo abre pra um lado, alternando esquerda e direita.
   --d escalona do centro pras bordas e vale pro ramo e pras duas camadas. */
.intro__leaf:nth-child(1) { --x0: -4vmax; --y0: -42.5vmax; --x1: -125vmax; --d: 0.08s; }
.intro__leaf:nth-child(2) { --x0:  3vmax; --y0: -25.5vmax; --x1:  125vmax; --d: 0.04s; }
.intro__leaf:nth-child(3) { --x0: -3vmax; --y0:  -8.5vmax; --x1: -125vmax; --d: 0s; }
.intro__leaf:nth-child(4) { --x0:  4vmax; --y0:   8.5vmax; --x1:  125vmax; --d: 0s; }
.intro__leaf:nth-child(5) { --x0: -3vmax; --y0:  25.5vmax; --x1: -125vmax; --d: 0.04s; }
.intro__leaf:nth-child(6) { --x0:  4vmax; --y0:  42.5vmax; --x1:  125vmax; --d: 0.08s; }

@media (prefers-reduced-motion: no-preference) {
  #intro { animation: introDone 0.01s linear 0.78s forwards; }
  .intro__leaf { animation: introOpen 0.6s cubic-bezier(0.5, 0, 0.75, 0.15) var(--d) forwards; }
  .intro__leaf::before { animation: introSharpOut 0.6s ease-in var(--d) forwards; }
  .intro__leaf::after { animation: introBlurIn 0.6s ease-in var(--d) forwards; }
}
@keyframes introOpen {
  to { transform: translate(-50%, -50%) translate(var(--x1), var(--y0)); }
}
@keyframes introSharpOut { to { opacity: 0; } }
@keyframes introBlurIn { to { opacity: 1; } }
@keyframes introDone { to { visibility: hidden; } }

/* ---------- animação de entrada ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }
  /* roda junto com a abertura das folhas, não depois */
  .hero__copy > *, .hero__stage { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .hero__copy > :nth-child(1) { animation-delay: 0.05s; }
  .hero__copy > :nth-child(2) { animation-delay: 0.12s; }
  .hero__copy > :nth-child(3) { animation-delay: 0.19s; }
  .hero__copy > :nth-child(4) { animation-delay: 0.26s; }
  .hero__stage { animation-duration: 0.85s; animation-delay: 0.15s; }

  @supports (animation-timeline: view()) {
    .section > .wrap > *, .closer__inner {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 18%;
    }
  }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-parallax] { transform: none !important; }
  #intro { display: none !important; }
}