/* Seção ma · Se eu fosse a sua dentista (manifesto, escuro) */
.ma-secao {
  --ma-arco: clamp(64px, 11vw, 190px);
  /* faixa de cima continua o pé do hero (medido na captura) e desce para o nude do ho */
  background:
    linear-gradient(180deg, transparent 0, var(--nude) 46%),
    linear-gradient(#e5c6b9, #e5c6b9);
}
/* emenda hero→ma: um véu curto sobe sobre o pé do hero e apaga o degrau (a malha do hero varia com o tempo) */
.ma-secao::before {
  content: ""; position: absolute; left: 0; right: 0; top: -56px; height: 57px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg in oklab, rgb(229 198 185 / 0), rgb(229 198 185 / .55) 55%, #e5c6b9);
}
.ma-noite {
  position: relative; isolation: isolate; overflow: clip;
  border-radius: 50% 50% 50% 50% / var(--ma-arco) var(--ma-arco) var(--ma-arco) var(--ma-arco);
  padding: calc(var(--secao-pad) + var(--ma-arco) * .3) 0 calc(var(--secao-pad) * .8 + var(--ma-arco) * .25);
}

/* luz: manchas lentas de vinho e rosé sobre a noite */
.ma-luz { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ma-luz i { position: absolute; border-radius: 50%; animation: ma-deriva 34s ease-in-out infinite alternate; }
.ma-l1 { width: 70vmax; height: 70vmax; right: -22vmax; top: -24vmax;
  background: radial-gradient(closest-side in oklch, color-mix(in oklch, var(--vinho) 90%, transparent), transparent); }
.ma-l2 { width: 56vmax; height: 56vmax; left: -20vmax; bottom: -18vmax; animation-duration: 29s; animation-delay: -8s;
  background: radial-gradient(closest-side in oklch, color-mix(in oklch, #8e4a39 42%, transparent), transparent); }
.ma-l3 { width: 40vmax; height: 40vmax; left: 30%; top: 30%; animation-duration: 38s; animation-delay: -15s;
  background: radial-gradient(closest-side in oklch, color-mix(in oklch, #6e1f3b 50%, transparent), transparent); }
@keyframes ma-deriva {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-3vw, 4vh, 0) scale(1.08); }
}

/* duas colunas: o título fica parado enquanto as quatro frases passam */
.ma-grade {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 88px);
}
.ma-fixo { position: sticky; top: clamp(90px, 14vh, 150px); }
.ma-titulo { font-size: clamp(50px, 6.2vw, 96px); line-height: .98; color: var(--tinta-clara); }
.ma-t1 { display: block; font-weight: 620; font-variation-settings: "wdth" 108; }
.ma-t2 { display: block; padding-left: .55em; }

/* a foto do vídeo: recorte sem moldura, com luz rosé atrás, fundindo na noite pelos ombros */
.ma-foto {
  position: relative; margin: clamp(36px, 4vw, 64px) 0 0 -.2em;
  width: clamp(230px, 23vw, 340px); aspect-ratio: 543 / 813;
}
.ma-foto::before { /* luz morna atrás da cabeça, sem aro */
  content: ""; position: absolute; left: -30%; right: -30%; top: -16%; height: 92%; border-radius: 50%;
  background: radial-gradient(closest-side in oklab, rgb(240 180 154 / .38), rgb(201 122 110 / .14) 55%, rgb(201 122 110 / 0) 100%);
  pointer-events: none;
}
.ma-foto img {
  position: relative; display: block; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to top, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* frases */
.ma-corpo { position: relative; padding-top: clamp(8px, 2vw, 40px); }
.ma-frases { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 7vw, 104px); }
.ma-frase { color: var(--tinta-clara); }
.ma-l {
  display: block; white-space: nowrap;
  font-family: var(--f-display); font-weight: 260; font-variation-settings: "wdth" 100;
  font-size: clamp(27px, 3.5vw, 52px); line-height: 1.05; letter-spacing: -.01em;
}
.ma-verbo { font-weight: 620; font-variation-settings: "wdth" 106; color: var(--rose-claro); }
/* o verbo acende quando o fio passa por baixo dele */
.js .ma-frase .ma-verbo {
  background: var(--metal-escuro); background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: rgb(233 185 163 / .38);
  padding-bottom: .12em; margin-bottom: -.12em;
  transition: color 1.1s var(--curva), background-position 2.4s var(--curva);
}
.js .ma-frase.ma-aceso .ma-verbo { color: transparent; background-position: 0 0; }
.js .ma-frase .ma-resto { transition: color 1.1s var(--curva) .25s; color: rgb(231 201 187 / .62); }
.js .ma-frase.ma-aceso .ma-resto { color: var(--tinta-clara-suave); }
.ma-resto {
  display: block; margin: .9em 0 0 1.45em; max-width: 17em;
  font-family: var(--f-titulo); font-weight: 300; font-style: italic;
  font-size: clamp(21px, 1.9vw, 28px); line-height: 1.35; color: var(--tinta-clara-suave);
}

.ma-fio { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.ma-fio path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ma-fio-traco { stroke: url(#ma-metal); stroke-width: 2.4; }
.ma-fio-sombra { stroke: rgb(0 0 0 / .4); stroke-width: 5; filter: blur(3px); transform: translateY(4px); }

/* fecho */
.ma-fecho { margin: clamp(80px, 9vw, 120px) 0 0 1.4em; max-width: 26em; }
.ma-convite { font-family: var(--f-titulo); font-style: italic; font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.38; color: var(--tinta-clara); text-wrap: pretty; }
.ma-comecar { font-style: normal; font-size: 1.55em; line-height: .8; background-image: var(--metal-escuro); padding: 0 .12em .18em .04em; }
.ma-credito { margin-top: 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-claro); }
.ma-botao {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 30px 17px 32px; border-radius: 999px; text-decoration: none; font-size: 18px; font-weight: 600;
  color: var(--noite); background: var(--metal-escuro); background-size: 220% 100%; background-position: 100% 0;
  box-shadow: 0 14px 34px -14px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(255 240 230 / .4);
  transition: background-position 1.2s var(--curva), transform .4s var(--curva);
}
.ma-botao svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .4s var(--curva); }
.ma-botao:hover { background-position: 0 0; transform: translateY(-2px); }
.ma-botao:hover svg { transform: translateX(4px); }

@media (max-width: 1023px) {
  .ma-grade { grid-template-columns: minmax(0, 1fr); }
  .ma-fixo { position: relative; top: 0; padding-right: clamp(130px, 30vw, 260px); }
  .ma-foto { position: absolute; right: -6px; top: 0; margin: 0; width: clamp(120px, 28vw, 210px); }
  .ma-titulo { font-size: clamp(46px, 12.6vw, 96px); }
  .ma-corpo { margin-top: clamp(56px, 10vw, 96px); }
}
@media (min-width: 601px) and (max-width: 1023px) {
  .ma-l { font-size: 5vw; }
  .ma-resto { font-size: clamp(22px, 2.9vw, 28px); }
}
@media (max-width: 600px) {
  .ma-fixo { padding-right: 0; }
  .ma-rotulo { padding-right: 136px; min-height: 132px; display: flex; align-items: flex-end; font-size: 11.5px; letter-spacing: .18em; }
  .ma-t2 { padding-left: .3em; }
  .ma-l { font-size: min(7vw, 30px); }
  .ma-resto { margin-left: 1.1em; }
  .ma-fecho { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ma-luz i { animation: none; }
}