/* Hero D · O L de luz — Dra. Leandra Bittencourt */

:root {
  /* cor: tirada da foto da recepção */
  --marmore: #efe6d6;        /* creme do mármore */
  --marmore-fundo: #e4d6bf;  /* mármore na meia-luz */
  --veio: #c9a36f;           /* caramelo do veio */
  --luz: #fff3dc;            /* branco-quente do L */
  --taupe: #8c867a;          /* parede */
  --nogueira: #6b4a33;       /* cadeiras */
  --tinta: #2b251e;          /* texto principal */
  --tinta-2: #554c40;        /* texto de apoio */
  --linha: rgb(43 37 30 / .22);

  /* tipografia */
  --f-titulo: "Bellefair", "Cormorant", Georgia, serif;
  --f-texto: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  --t-titulo: clamp(2.75rem, 6.5vw, 6.6rem);
  --t-apoio: clamp(1.02rem, 1.22vw, 1.2rem);
  --t-mini: .8125rem;

  /* espaço */
  --margem: clamp(1.25rem, 5.6vw, 5.5rem);
  --e1: .5rem;
  --e2: 1rem;
  --e3: 1.75rem;
  --e4: 3rem;

  /* a foto tem 1280 px: nunca passa de 1,4x */
  --fw: min(1792px, max(100vw, 142svh));
  --lx: 56.5vw;              /* onde o L pousa na tela: entre o texto e ela */

  --curva: cubic-bezier(.2, .7, .15, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--marmore);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; }
i { font-style: normal; }

/* ---------- palco ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--marmore);
}

/* ---------- malha ---------- */
.malha { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mancha {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  will-change: transform;
}
.m1 { /* luz alta, à esquerda */
  width: 78vmax; height: 78vmax; left: -22vmax; top: -34vmax;
  background: radial-gradient(closest-side in oklab, oklch(.985 .028 88) 0%, oklch(.965 .034 86 / .7) 45%, oklch(.94 .03 84 / 0) 100%);
  animation: deriva-1 34s ease-in-out infinite alternate;
}
.m2 { /* caramelo do veio, embaixo: emenda com o mármore da foto */
  width: 86vmax; height: 62vmax; left: -18vmax; bottom: -36vmax;
  background: radial-gradient(closest-side in oklch, oklch(.80 .075 78 / .85) 0%, oklch(.86 .055 80 / .5) 50%, oklch(.90 .04 82 / 0) 100%);
  animation: deriva-2 38s ease-in-out infinite alternate;
}
.m3 { /* taupe da parede, no alto à direita */
  width: 60vmax; height: 52vmax; right: -16vmax; top: -24vmax;
  background: radial-gradient(closest-side in oklab, oklch(.70 .018 85 / .55) 0%, oklch(.80 .02 85 / .28) 55%, oklch(.88 .02 85 / 0) 100%);
  animation: deriva-3 29s ease-in-out infinite alternate;
}
.m4 { /* rosado quente, meio */
  width: 54vmax; height: 46vmax; left: 16vw; top: 22vh;
  background: radial-gradient(closest-side in oklch, oklch(.93 .045 70 / .7) 0%, oklch(.94 .035 78 / .3) 55%, oklch(.95 .03 84 / 0) 100%);
  animation: deriva-4 41s ease-in-out infinite alternate;
}
@keyframes deriva-1 { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }
@keyframes deriva-2 { to { transform: translate3d(8vmax, -3vmax, 0) scale(1.06); } }
@keyframes deriva-3 { to { transform: translate3d(-5vmax, 5vmax, 0) scale(1.1); } }
@keyframes deriva-4 { to { transform: translate3d(-6vmax, -4vmax, 0) scale(.94); } }

/* ---------- o lugar ---------- */
.lugar {
  position: absolute;
  z-index: 1;
  width: var(--fw);
  aspect-ratio: 1280 / 853;
  bottom: 0;
  left: calc(var(--lx) - var(--fw) * .5898); /* centro do L na foto: 59% */
  pointer-events: none;
}
.lugar-foto {
  position: absolute; inset: 0;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 30%, rgb(0 0 0 / .14) 35.5%, rgb(0 0 0 / .55) 40.5%, rgb(0 0 0 / .9) 44.5%, #000 47.5%, #000 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 9%);
  mask-image:
    linear-gradient(90deg, transparent 30%, rgb(0 0 0 / .14) 35.5%, rgb(0 0 0 / .55) 40.5%, rgb(0 0 0 / .9) 44.5%, #000 47.5%, #000 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 9%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.94) contrast(1.03);
}
.foto.apagada { filter: saturate(.86) brightness(.9); }

/* a luz do L que vaza para a malha (fica atrás da foto: aparece onde a foto se dissolve) */
.vazamento {
  position: absolute;
  left: 58.98%; top: 75%;
  width: 150%; aspect-ratio: 1.25;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side in oklab,
    oklch(.992 .04 90) 0%,
    oklch(.975 .05 88 / .9) 18%,
    oklch(.95 .06 84 / .55) 42%,
    oklch(.92 .055 80 / .2) 70%,
    oklch(.9 .05 80 / 0) 100%);
  transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px), 0);
  animation: respira 19s ease-in-out infinite alternate;
}
/* e a mesma luz sobre a foto, no mármore em volta do L */
.brilho {
  position: absolute;
  left: 58.98%; top: 75%;
  width: 62%; aspect-ratio: 1.05;
  translate: -50% -50%;
  border-radius: 50%;
  mix-blend-mode: soft-light;
  background: radial-gradient(closest-side in oklab, oklch(1 .03 90 / .5) 0%, oklch(.98 .05 86 / .24) 42%, oklch(.96 .05 84 / 0) 100%);
  animation: respira 19s ease-in-out infinite alternate;
}
@keyframes respira {
  from { opacity: .82; scale: .97; }
  to   { opacity: 1;   scale: 1.04; }
}

/* o traço: o L se desenha em luz, por cima do L real */
.traco {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  fill: none;
  stroke: #fffaf0;
  stroke-width: 13;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  filter: drop-shadow(0 0 5px #fff3dc) drop-shadow(0 0 20px rgb(255 221 160 / .95)) drop-shadow(0 0 54px rgb(255 205 130 / .7));
  opacity: .5;           /* estado final: o L da foto brilha; o traço fica como fio nítido por cima */
}
.traco path { stroke-dasharray: 1; stroke-dashoffset: 0; }

.legenda {
  position: absolute;
  left: 34%; top: 96.4%;
  margin: 0;
  display: flex; flex-direction: row-reverse; align-items: center; gap: .75rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #3a3026;
  white-space: nowrap;
}
.legenda::after { content: ""; width: clamp(1.5rem, 3vw, 3rem); height: 1px; background: currentColor; opacity: .6; }

/* véu: a sala antes de a luz acender (some na entrada) */
.veu {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(120% 90% at 70% 78% in oklab, oklch(.52 .03 70 / .2), oklch(.42 .03 65 / .46));
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
}

/* granulado único */
.grao {
  position: absolute; inset: 0; z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .14 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .055;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---------- topo ---------- */
.topo {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: var(--e3);
  padding: clamp(1rem, 2.2vw, 1.75rem) var(--margem);
}
.marca {
  display: inline-flex; align-items: center; gap: .85rem;
  text-decoration: none;
  min-height: 48px;
}
.mono { width: 22px; height: 34px; color: var(--nogueira); flex: none; }
.marca-nome {
  font-family: var(--f-titulo);
  font-size: 1.22rem;
  line-height: 1.1;
  letter-spacing: .02em;
}
.marca-nome small {
  display: block;
  margin-top: .2rem;
  font-family: var(--f-texto);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.menu {
  margin-left: auto;
  display: flex; gap: clamp(1rem, 2.2vw, 2.25rem);
  padding: .3rem 1.4rem;
  border-radius: 999px;
  background: rgb(255 248 234 / .62);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55);
}
.menu a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--tinta);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1px no-repeat;
  transition: background-size .5s var(--curva);
}
.menu a:hover, .menu a:focus-visible { background-size: 100% 1px; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 48px;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .4s, color .4s, box-shadow .5s, transform .5s var(--curva);
}
.botao-topo {
  color: var(--tinta);
  background: rgb(255 248 234 / .62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgb(43 37 30 / .5);
}
.botao-topo:hover, .botao-topo:focus-visible { background: var(--tinta); color: var(--luz); }
.botao-principal {
  min-height: 56px;
  padding: 0 1.9rem;
  color: var(--luz);
  background: var(--tinta);
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 18px 40px -18px rgb(84 56 20 / .65);
}
.botao-principal svg { transition: transform .5s var(--curva); }
.botao-principal:hover, .botao-principal:focus-visible {
  background: #3a2f23;
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 0 0 5px rgb(255 243 220 / .7), 0 22px 46px -16px rgb(255 205 130 / .9);
}
.botao-principal:hover svg { transform: translateX(4px); }
:focus-visible { outline: 2px solid var(--nogueira); outline-offset: 3px; }

/* ---------- conteúdo ---------- */
.conteudo {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  width: min(100%, 46rem);
  padding: var(--e2) var(--margem) clamp(2rem, 6vh, 4.5rem);
}
.conteudo > * { position: relative; z-index: 4; }
.conteudo::before { /* claridade suave atrás do texto, para a foto nunca disputar com ele */
  content: "";
  position: absolute; z-index: 3;
  left: -4%; top: 12%; bottom: 0; width: 56vw;
  background: radial-gradient(closest-side in oklab, oklch(.955 .03 86 / .9) 0%, oklch(.95 .03 86 / .72) 55%, oklch(.95 .03 86 / 0) 100%);
  pointer-events: none;
}
.frase { margin: 0; }
.frase blockquote { margin: 0; }
.titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: var(--t-titulo);
  line-height: .98;
  letter-spacing: -.012em;
  color: var(--tinta);
}
.linha { display: block; overflow: hidden; padding: .06em 0 .12em; margin: -.06em 0 -.12em; padding-left: .5em; margin-left: -.5em; }
.linha > span { display: block; }
.aspa { position: absolute; translate: -100% 0; color: var(--veio); padding-right: .04em; }
.linha > span { position: relative; }
.assina {
  display: flex; align-items: center; gap: .8rem;
  margin-top: 1.35rem;
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.assina i { width: 2.25rem; height: 1px; background: var(--nogueira); flex: none; }

.apoio {
  max-width: 31rem;
  margin: clamp(1.4rem, 3.4vh, 2.25rem) 0 0;
  font-size: var(--t-apoio);
  line-height: 1.58;
  color: var(--tinta-2);
  text-wrap: pretty;
}
.apoio strong { font-weight: 600; color: var(--tinta); }

.acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.6rem;
  margin-top: clamp(1.5rem, 3.6vh, 2.4rem);
}
.elo {
  display: inline-flex; align-items: center;
  min-height: 48px;
  font-weight: 500;
  font-size: .95rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .34em;
  text-decoration-color: rgb(43 37 30 / .45);
  transition: text-decoration-color .4s;
}
.elo:hover, .elo:focus-visible { text-decoration-color: currentColor; }

.fatos {
  list-style: none;
  margin: clamp(1.5rem, 4vh, 2.6rem) 0 0;
  padding: 1.1rem 0 0;
  max-width: 31rem;
  border-top: 1px solid var(--linha);
  display: grid; gap: .35rem;
  font-size: .9rem;
  color: var(--tinta-2);
}
.nota { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; color: var(--tinta); }
.nota b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.5rem; line-height: 1; }
.estrelas { color: #96672c; letter-spacing: .14em; font-size: .82rem; translate: 0 -.12em; }

/* ---------- ela: de corpo, na frente do balcão ---------- */
.retrato {
  position: absolute; z-index: 2;
  right: clamp(.5rem, 2.2vw, 2.5rem); bottom: 0;
  height: min(calc(100svh - 5.75rem), 57vw);
  aspect-ratio: 923 / 1611;
  margin: 0;
  pointer-events: none;
}
.retrato img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.96) brightness(1.02) sepia(.07) drop-shadow(-14px 10px 30px rgb(84 56 20 / .28));
}
.retrato-luz { /* a luz do L que bate nela, vinda da esquerda */
  position: absolute; left: -28%; bottom: -6%; width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side in oklab, oklch(.99 .04 90 / .55), oklch(.96 .05 86 / 0));
  mix-blend-mode: soft-light;
}
.placa-texto {
  position: absolute; right: 0; bottom: clamp(1.25rem, 4vh, 2.5rem);
  margin: 0; padding: .85rem 1.15rem .9rem;
  display: grid; gap: .1rem; text-align: left;
  font-size: .78rem; line-height: 1.35; color: var(--tinta-2);
  border-radius: 14px;
  background: linear-gradient(180deg in oklab, rgb(255 250 240 / .86), rgb(255 246 230 / .72));
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 24px 50px -26px rgb(84 56 20 / .6);
}
.placa-texto b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.2rem; letter-spacing: .01em; color: var(--tinta); white-space: nowrap; }
.placa-texto .registro { margin-top: .25rem; font-weight: 600; letter-spacing: .06em; color: var(--tinta); font-size: .74rem; white-space: nowrap; }

.registro-celular { display: none; }

/* ---------- entrada ---------- */
.js .hero:not(.pronto) .conteudo > *,
.js .hero:not(.pronto) .retrato,
.js .hero:not(.pronto) .topo,
.js .hero:not(.pronto) .legenda { opacity: 0; }
.js .hero:not(.pronto) .foto.acesa,
.js .hero:not(.pronto) .vazamento,
.js .hero:not(.pronto) .brilho { opacity: 0; animation: none; }
.js .hero:not(.pronto) .veu { opacity: 1; }
.js .hero:not(.pronto) .linha > span { transform: translateY(110%); }

.pronto .topo { animation: desce .9s var(--curva) .05s backwards; }
.pronto .linha > span { animation: sobe-linha 1.05s var(--curva) backwards; }
.pronto .linha:nth-child(1) > span { animation-delay: .12s; }
.pronto .linha:nth-child(2) > span { animation-delay: .24s; }
.pronto .assina { animation: sobe .9s var(--curva) .55s backwards; }
.pronto .apoio { animation: sobe .9s var(--curva) .7s backwards; }
.pronto .acoes { animation: sobe .9s var(--curva) .85s backwards; }
.pronto .fatos { animation: sobe .9s var(--curva) 1s backwards; }
.pronto .retrato { animation: chega 1.3s var(--curva) 1.05s backwards; }
.pronto .placa-texto { animation: sobe 1s var(--curva) 1.9s backwards; }
.pronto .legenda { animation: aparece 1.2s ease 2s backwards; }

/* a luz: o traço corre (0,35–1,35 s), a sala acende (1,2–2,1 s) */
.pronto .traco { animation: traco-vida 2.9s linear .35s backwards; }
.pronto .traco .t1 { animation: desenha 1s cubic-bezier(.5, 0, .2, 1) .35s backwards; }
.pronto .traco .t2 { animation: desenha .9s cubic-bezier(.5, 0, .2, 1) .5s backwards; }
.pronto .foto.acesa { animation: aparece 1s ease 1.15s backwards; }
.pronto .veu { animation: some 1.5s ease .95s backwards; }
.pronto .vazamento { animation: acende 1.5s var(--curva) 1s backwards, respira 19s ease-in-out 2.5s infinite alternate; }
.pronto .brilho { animation: acende 1.3s var(--curva) 1.1s backwards, respira 19s ease-in-out 2.4s infinite alternate; }

@keyframes chega { from { opacity: 0; transform: translateY(26px); } }
@keyframes desce { from { opacity: 0; transform: translateY(-14px); } }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }
@keyframes sobe-linha { from { transform: translateY(110%); } }
@keyframes aparece { from { opacity: 0; } }
@keyframes some { from { opacity: 1; } to { opacity: 0; } }
@keyframes acende { from { opacity: 0; scale: .35; } to { opacity: .82; scale: .97; } }
@keyframes desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes traco-vida {
  0% { opacity: 1; }
  52% { opacity: 1; }
  100% { opacity: .5; }
}

/* fora da tela: nada anima */
.hero.fora *, .hero.fora { animation-play-state: paused !important; }

/* ---------- celular e tablet ---------- */
@media (max-width: 899.98px) {
  :root {
    --fw: min(1792px, 150vw);
    --lx: 70vw;
    --desce: 30vw;                           /* quanto da sala aparece acima do balcão */
    --t-titulo: clamp(2.6rem, 12.4vw, 5.6rem);
    --balcao: 5.25rem;                       /* onde a borda do tampo pousa (logo abaixo do topo) */
    --ft: calc(var(--balcao) + var(--desce) - var(--fw) * .2953); /* topo da foto: o tampo está a 378/1280 da largura */
  }
  .menu, .legenda { display: none; }
  .topo { justify-content: space-between; gap: var(--e2); min-height: var(--balcao); padding-block: .75rem; }
  .botao-topo { padding: 0 1.25rem; }
  .marca-nome { font-size: 1.08rem; }
  .marca-nome small { font-size: .62rem; letter-spacing: .18em; }

  /* a foto sobe: o balcão com o L é a primeira coisa; o mármore se dissolve na página */
  .lugar { bottom: auto; top: var(--ft); }
  .lugar-foto {
    inset: 0 0 -18.76% 0; /* versão alta: 160 px a mais de mármore */
    -webkit-mask-image: linear-gradient(180deg, transparent 10%, rgb(0 0 0 / .16) 22%, rgb(0 0 0 / .62) 31%, #000 37%, #000 80%, rgb(0 0 0 / .5) 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 10%, rgb(0 0 0 / .16) 22%, rgb(0 0 0 / .62) 31%, #000 37%, #000 80%, rgb(0 0 0 / .5) 90%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .vazamento { width: 190%; top: 84%; }

  .conteudo {
    justify-content: flex-start;
    width: 100%;
    /* começa logo abaixo do L (base do L: 811/1280 da largura da foto) */
    padding-top: calc(var(--ft) + var(--fw) * .6336 - var(--balcao) + clamp(1.5rem, 4.5vh, 2.75rem));
    padding-bottom: clamp(1.5rem, 4vh, 3rem);
  }
  .conteudo::before { display: none; }
  .assina { margin-top: .9rem; letter-spacing: .1em; font-size: .74rem; }
  .apoio { max-width: 34rem; margin-top: 1.25rem; }
  .acoes { gap: .15rem 1.25rem; margin-top: 1.4rem; }
  .botao-principal { flex: 1 1 auto; max-width: 22rem; }
  .fatos { max-width: 34rem; margin-top: 1.1rem; padding-top: 1rem; }
  .onde { font-size: .84rem; }
  .registro-celular { display: block; font-weight: 600; letter-spacing: .06em; font-size: .8rem; color: var(--tinta); }

  /* ela em pé na frente do balcão, à esquerda do L; os pés somem no mármore */
  .retrato {
    right: auto; left: 0; bottom: auto;
    height: 88vw;
    top: calc(var(--ft) + var(--fw) * .655 - 88vw);
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  }
  .retrato img { object-position: top; }
  .placa-texto { display: none; }
  /* sem margem para a aspa pendurada: ela entra na linha */
  .aspa { position: static; translate: none; }
}

@media (max-width: 380px) {
  .marca-nome { font-size: 1rem; }
  .botao-topo { padding: 0 1rem; }
}

/* telas baixas no desktop: aperta o respiro */
@media (min-width: 900px) and (max-height: 760px) {
  :root { --t-titulo: clamp(2.75rem, 5.4vw, 5rem); }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .hero:not(.pronto) .conteudo > *,
  .js .hero:not(.pronto) .topo,
  .js .hero:not(.pronto) .legenda,
  .js .hero:not(.pronto) .retrato,
  .js .hero:not(.pronto) .foto.acesa,
  .js .hero:not(.pronto) .vazamento,
  .js .hero:not(.pronto) .brilho { opacity: 1; }
  .js .hero:not(.pronto) .veu { opacity: 0; }
  .js .hero:not(.pronto) .linha > span { transform: none; }
}