/* =============================================================================
   SemearIA: componentes. Porte dos grupos de Myths' Valley (vale.css), com o
   ouro de mel, o fio do mar no lugar do azulejo e o losango de pixel.
   ============================================================================= */

/* ---------- marca (texto vivo, provisória) ---------- */
.marca {
    display: inline-block;
    font: 600 clamp(20px, 1.4vh + 12px, 26px)/1 Cinzel, serif; letter-spacing: .04em;
    background: linear-gradient(180deg, #fff3c4 0%, #f2cf7a 38%, #d9a344 62%, #a8741f 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: .5px rgba(60, 38, 8, .5); paint-order: stroke fill;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)) drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
}
@supports not (background-clip: text) { .marca, .retabulo__nome { color: var(--ouro); } }

/* ---------- filete (fio com losangos) ---------- */
.filete { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--ouro); }
.filete::before, .filete::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro) 60%, var(--ouro)); }
.filete::after { transform: scaleX(-1); }
.filete span { width: 7px; height: 7px; flex: 0 0 auto; background: currentColor; clip-path: var(--losango); }

/* ---------- moldura de talha (retábulo) ---------- */
.moldura { position: relative; isolation: isolate; padding: clamp(40px, 5.6vh, 60px) clamp(40px, 3.4vw, 58px); }
.moldura::before { content: ''; position: absolute; inset: 14px; z-index: -1; background: linear-gradient(150deg, rgba(22, 44, 33, .96), rgba(9, 20, 15, .97)); box-shadow: 0 14px 60px rgba(0, 0, 0, .5); }
.moldura__talha { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.moldura__linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.moldura__trilho { width: calc(100% - 24px); height: calc(100% - 24px); }
.moldura__trilho--sombra { stroke: #4f3512; stroke-width: 6px; }
.moldura__trilho--ouro { stroke: url(#talha-mel); stroke-width: 3px; }
.moldura__fio { width: calc(100% - 34px); height: calc(100% - 34px); stroke: var(--mar); stroke-opacity: .55; stroke-width: 1px; }
.moldura__interna { width: calc(100% - 42px); height: calc(100% - 42px); stroke: #c9a356; stroke-opacity: .45; stroke-width: 1px; }
.moldura__canto { position: absolute; width: clamp(52px, 5vw, 72px); height: clamp(52px, 5vw, 72px); }
.moldura__canto--no { top: 0; left: 0; }
.moldura__canto--ne { top: 0; right: 0; transform: scaleX(-1); }
.moldura__canto--so { bottom: 0; left: 0; transform: scaleY(-1); }
.moldura__canto--se { bottom: 0; right: 0; transform: scale(-1); }
/* dentro da moldura o texto é sempre o da laca, mesmo numa seção de papel */
.slide--papel .moldura { --texto: #ece2c8; --texto-suave: #c3b99f; --ouro: #ebbd5c; --ouro-claro: #f6d98f; --ouro-linha: rgba(235, 189, 92, .3); --ouro-tenue: rgba(235, 189, 92, .1); --mar: #5fb3ad; --broto: #9fd89a; color: var(--texto); }

/* ---------- retábulo (o conteúdo da moldura da entrada) ---------- */
.retabulo { text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.1vh, 14px); }
.retabulo__marca { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.retabulo__palavra { position: relative; display: inline-block; font: 600 clamp(44px, 7vh, 84px)/1 Cinzel, serif; }
.retabulo__nome {
    display: block; letter-spacing: .02em; padding: 0 .04em;
    background: linear-gradient(180deg, #fff3c4 0%, #f2cf7a 40%, #d39a3a 64%, #9a6a1c 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: .6px rgba(60, 38, 8, .55); paint-order: stroke fill;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)) drop-shadow(0 6px 12px rgba(0, 0, 0, .55));
}
/* o broto sobre o "I" de IA; posição em em, acompanha o tamanho da palavra */
.retabulo__broto { position: absolute; right: 1.02em; top: -.07em; width: .34em; height: auto; overflow: visible; fill: var(--broto); stroke: #2f5a37; stroke-width: .6; stroke-linejoin: round; transform-origin: 50% 100%; }
.retabulo__raizes { display: block; width: clamp(120px, 11vw, 160px); height: auto; overflow: visible; }
.retabulo__raizes .raiz { fill: none; stroke: url(#talha-mel) #c9933a; stroke-width: 1px; stroke-linecap: round; }
.retabulo__raizes .semente { fill: var(--ouro); }
.retabulo__lugar { width: 100%; font: 600 var(--fs-mini)/1.3 Cinzel, serif; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: var(--creme); }
.retabulo__lugar.filete::before, .retabulo__lugar.filete::after { max-width: 50px; }
.retabulo__lugar.filete span { display: none; }
.retabulo__lema { font-size: calc(var(--fs-lead) * 1.18); font-style: italic; line-height: 1.25; color: var(--creme); margin: 0; }
.retabulo__texto { font-size: calc(var(--fs-corpo) * .98); color: var(--texto-suave); margin: 0; max-width: 44ch; text-wrap: balance; }
.retabulo__placas { width: 100%; display: grid; gap: clamp(7px, 1.2vh, 12px); margin-top: clamp(4px, 1vh, 10px); }
.retabulo__placas .placa { min-height: clamp(36px, 4.4vh, 46px); padding-block: .55em; }
.retabulo__dedicatoria { font-size: calc(var(--fs-corpo) * .88); font-style: italic; color: var(--texto-suave); margin: clamp(4px, 1vh, 10px) 0 0; }
.retabulo__dedicatoria b { color: var(--ouro); font-weight: 600; font-style: normal; }
.retabulo__versao { margin: 0; font: 500 calc(var(--fs-mini) * .95)/1.3 Cinzel, serif; letter-spacing: .14em; color: var(--texto-suave); text-transform: uppercase; }
.almanaque-canto { align-self: end; justify-self: end; max-width: 520px; text-align: right; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); padding-bottom: clamp(8px, 2vh, 24px); }
.almanaque-canto .olho { justify-content: flex-end; color: var(--ouro); }
.almanaque-canto p:not(.olho) { font-size: calc(var(--fs-lead) * 1.02); font-style: italic; color: var(--creme); line-height: 1.35; margin: 0; transition: opacity .6s; min-height: 2.7em; }

/* ---------- olho, cabeça e lead ---------- */
.olho { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(10px, 1.6vh, 18px); font: 600 var(--fs-mini)/1.35 Cinzel, serif; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); }
.olho::before { content: ''; width: 7px; height: 7px; flex: 0 0 auto; background: currentColor; clip-path: var(--losango); }
.olho--sem-losango::before { display: none; }
.cabeca .olho > .icone { width: 18px; height: 18px; color: inherit; }
.cabeca { max-width: 820px; margin-bottom: clamp(18px, 3.4vh, 40px); }
.cabeca--centro { margin-inline: auto; text-align: center; }
.cabeca--centro .olho { justify-content: center; }
.cabeca--centro .lead { margin-inline: auto; }
.cabeca h1, .cabeca h2 { margin-bottom: clamp(10px, 1.8vh, 20px); }
.cabeca > :last-child { margin-bottom: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--texto); max-width: 68ch; text-wrap: balance; }
.lead p:last-child { margin-bottom: 0; }
.texto-coluna { max-width: 70ch; }
.nota-fonte { font-size: calc(var(--fs-corpo) * .82); color: var(--texto-suave); border-top: 1px solid var(--ouro-linha); padding-top: 12px; margin-top: clamp(16px, 3vh, 30px); max-width: 90ch; overflow-wrap: anywhere; }
.citacao { margin: 0; padding-left: 22px; border-left: 1px solid var(--ouro); font-size: calc(var(--fs-lead) * 1.08); font-style: italic; line-height: 1.4; }
.citacao cite { display: block; margin-top: 10px; font: 500 var(--fs-mini)/1.3 Cinzel, serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); }
/* ícones Lucide: traço em currentColor, ouro por padrão (como em Myths' Valley) */
.icone { flex: none; width: 26px; height: 26px; color: var(--ouro); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- placas (botões do retábulo) ---------- */
.placa {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 46px; padding: .85em 1.5em;
    font: 600 var(--fs-placa)/1.15 Cinzel, serif; letter-spacing: .17em; text-transform: uppercase; text-decoration: none; text-align: center;
    color: var(--ouro-claro); cursor: pointer;
    background: linear-gradient(180deg, #1d3829, #12241a);
    border: 1px solid var(--ouro-escuro);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .25);
    transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.placa::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(235, 189, 92, .14); pointer-events: none; }
.placa:hover { border-color: var(--ouro); background: linear-gradient(180deg, #264432, #172b1e); transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 8px 22px rgba(0, 0, 0, .35), 0 0 0 1px rgba(235, 189, 92, .15); }
.placa--ouro { color: #1c1406; background: linear-gradient(180deg, #f8e0a0, #e2b04c 55%, #c58d36); border-color: #fbe8b6; text-shadow: 0 1px 0 rgba(255, 245, 210, .5); }
.placa--ouro::before { border-color: rgba(90, 60, 15, .35); }
.placa--ouro:hover { background: linear-gradient(180deg, #fde9b4, #ebbb5c 55%, #cd963f); border-color: #fff1c8; }
.placa--larga { width: 100%; }
.placa--pequena { min-height: 38px; padding: .65em 1.05em; }
.placa[aria-disabled='true'] { opacity: .6; cursor: not-allowed; transform: none; }
.placa svg { width: 16px; height: 16px; color: inherit; fill: none; stroke: currentColor; stroke-width: 1.6; flex: 0 0 auto; }
.slide--papel .placa:not(.placa--ouro) { color: #f6d98f; background: linear-gradient(180deg, #264432, #1a3024); border-color: #6b5427; }
.link-ouro { color: var(--ouro); font: 600 var(--fs-placa)/1.3 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.link-ouro::after { content: '→'; font-family: Georgia, serif; letter-spacing: 0; transition: transform .2s; }
.link-ouro:hover::after { transform: translateX(4px); }
.link-ouro--externo::after { content: none; }

/* ---------- etiquetas de estado ---------- */
.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font: 600 calc(var(--fs-mini) * .92)/1.2 Cinzel, serif; letter-spacing: .1em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etiqueta--pronto { color: var(--broto); border-color: color-mix(in srgb, var(--broto) 40%, transparent); }
.etiqueta--andamento { color: var(--ouro); border-color: var(--ouro-linha); }
.etiqueta--previsto { color: var(--texto-suave); border-color: color-mix(in srgb, var(--texto-suave) 35%, transparent); }
.etiqueta--aberto { color: var(--mar); border-color: var(--mar); border-style: dashed; }

/* ---------- cartões e listas ---------- */
.cartao { position: relative; padding: clamp(16px, 2.2vw, 28px); border: 1px solid var(--ouro-linha); background: var(--fundo-cartao); }
.cartao h3 { margin-bottom: 10px; }
.cartao p:last-child { margin-bottom: 0; }
.cartao--link { text-decoration: none; display: block; transition: border-color .2s, transform .2s, background .2s; }
.cartao--link:hover { border-color: var(--ouro); transform: translateY(-2px); background: var(--ouro-tenue); }
.cartao__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cartao__num { font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .16em; color: var(--ouro); }
.lista-filetes { list-style: none; }
.lista-filetes > li { padding: clamp(10px, 1.6vh, 16px) 0; border-top: 1px solid var(--ouro-linha); }
.lista-filetes > li:last-child { border-bottom: 1px solid var(--ouro-linha); }
.lista-losangos { list-style: none; display: grid; gap: 8px; }
.lista-losangos li { position: relative; padding-left: 22px; }
.lista-losangos li::before { content: ''; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; border: 1px solid var(--ouro); transform: rotate(45deg); }
.corta-2, .corta-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.corta-2 { -webkit-line-clamp: 2; }
.corta-3 { -webkit-line-clamp: 3; }

/* ---------- linha do tempo ---------- */
.tempo { list-style: none; position: relative; display: grid; gap: clamp(12px, 2vh, 22px); }
.tempo::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(var(--ouro), var(--ouro-linha)); }
.tempo > li { position: relative; padding-left: 34px; }
.tempo > li::before { content: ''; position: absolute; left: 4px; top: .5em; width: 7px; height: 7px; background: var(--ouro); clip-path: var(--losango); }
.tempo__quando { font: 600 var(--fs-mini)/1.3 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); display: block; margin-bottom: 4px; }

/* ---------- números ---------- */
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ouro-linha); }
.numero { padding: clamp(14px, 2.6vh, 28px) clamp(12px, 1.6vw, 24px) clamp(14px, 2.4vh, 26px) 0; border-bottom: 1px solid var(--ouro-linha); }
.numero__valor { display: block; font: 500 clamp(28px, 1.4vw + 2.1vh, 54px)/1 Cinzel, serif; color: var(--ouro); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.numero__rotulo { display: block; margin-top: 8px; font-size: calc(var(--fs-corpo) * .95); line-height: 1.3; }
.numero__unidade { display: block; font-size: calc(var(--fs-corpo) * .8); color: var(--texto-suave); margin-top: 2px; }
.numero--com-icone { display: grid; grid-template-columns: clamp(28px, 2.6vw, 40px) minmax(0, 1fr); gap: 12px; align-items: start; }
.numero--com-icone > .numero__icone { width: 100%; height: auto; margin-top: 2px; stroke-width: 1.15; opacity: .85; }
.numero--com-icone > .numero__dados { min-width: 0; }

/* ---------- progresso (proporcional, nunca arredondado para mais) ---------- */
.progresso { display: flex; align-items: center; gap: 10px; font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); font-variant-numeric: lining-nums tabular-nums; }
.progresso__barra { position: relative; display: block; flex: 1 1 auto; min-width: 48px; height: 4px; background: rgba(235, 189, 92, .14); overflow: hidden; }
.slide--papel .progresso__barra { background: rgba(122, 83, 22, .14); }
.progresso__barra i { position: absolute; inset: 0 auto 0 0; background: var(--ouro); }
.progresso__texto { white-space: nowrap; }
.progresso__texto b { color: var(--ouro); font-weight: 600; }

/* ---------- avisos ---------- */
.aviso { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border: 1px solid var(--ouro-linha); border-left: 3px solid var(--ouro); background: var(--ouro-tenue); }
.aviso p:last-child { margin: 0; }
.aviso__icone, .aviso > .icone { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; }

/* ---------- esquema (mecânica desenhada pelo site, sempre com legenda) ---------- */
.esquema { margin: 0; min-width: 0; }
.esquema__arte { position: relative; }
.esquema__legenda { display: flex; align-items: center; gap: 10px; margin-top: 10px; font: 500 calc(var(--fs-mini) * .92)/1.35 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.esquema__legenda::before { content: ''; width: 18px; height: 1px; flex: 0 0 auto; background: var(--ouro-linha); }

/* ---------- comparador (antes × depois) ---------- */
.comparar { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--ouro-linha); --corte: 50%; user-select: none; }
.comparar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparar__antes { clip-path: inset(0 calc(100% - var(--corte)) 0 0); }
.comparar__linha { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; background: var(--ouro); transform: translateX(-1px); pointer-events: none; }
.comparar__linha::after { content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--laca); color: var(--ouro); border: 1px solid var(--ouro); padding: 6px 10px; font: 600 14px/1 Georgia, serif; white-space: nowrap; }
.comparar input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.comparar__rotulo { position: absolute; top: 12px; padding: 4px 8px; background: rgba(8, 20, 15, .78); font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--creme); pointer-events: none; }
.comparar__rotulo--antes { left: 12px; }
.comparar__rotulo--depois { right: 12px; }

/* ---------- carrossel (as setas do paginador folheiam antes de mudar de seção) ---------- */
.carrossel__pagina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(12px, 1.8vh, 18px) clamp(16px, 1.8vw, 24px); }
.carrossel__controles { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 12px; color: var(--ouro); font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .12em; }
.carrossel__controles button { width: 36px; height: 32px; }
[data-navegacao-integrada] > .carrossel__controles .paginador__seta { display: none; }
.sem-js .carrossel__pagina[hidden] { display: grid !important; margin-top: clamp(12px, 1.8vh, 18px); }
.sem-js .carrossel__controles { display: none; }

/* ---------- janela de detalhe ---------- */
.detalhe-modal { width: min(640px, 90vw); max-height: 85dvh; overflow: auto; padding: 28px 28px 0; background: #122a1f; color: var(--texto); border: 1px solid var(--ouro-linha); box-shadow: var(--sombra); }
.detalhe-modal::backdrop { background: rgba(4, 10, 7, .72); }
.detalhe-modal h2 { font-size: clamp(24px, .8vw + 1.2vh + 8px, 30px); margin-bottom: 14px; }
.detalhe-modal h2:focus { outline: none; }
.detalhe-modal .etiqueta { margin-bottom: 14px; }
/* gatilho de detalhe que não é placa (ex.: o h3 de um cartão): texto puro, ouro no foco; especificidade zero */
:where(button[data-detalhe]:not(.placa)) { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; }
:where(button[data-detalhe]:not(.placa)):hover, :where(button[data-detalhe]:not(.placa)):focus-visible { color: var(--ouro); }
.detalhe-modal h4 { margin: 18px 0 6px; }
.detalhe-modal p { font-size: calc(var(--fs-corpo) * 1.02); }
/* rodapé fixo na base da janela: setas, posição e "Fechar" à vista mesmo num detalhe longo (o texto
   rola por baixo e some num esmaecido) */
.detalhe-modal__rodape { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px; margin: 20px -28px 0; padding: 12px 28px 18px; background: #122a1f; border-top: 1px solid var(--ouro-linha); }
.detalhe-modal__rodape::before { content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: 20px; background: linear-gradient(rgba(18, 42, 31, 0), #122a1f); pointer-events: none; }
.detalhe-modal__navegacao { display: flex; align-items: center; justify-content: center; gap: 20px; color: var(--ouro); font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .12em; }
.detalhe-modal [data-detalhe-fechar] { display: flex; margin: 0; }

/* ---------- convite (use as setas) ---------- */
.convite-navegacao { position: fixed; z-index: 31; left: 50%; bottom: calc(var(--pager-h) + 20px); margin: 0; color: var(--ouro); font: 600 var(--fs-mini)/1.5 Cinzel, serif; letter-spacing: .14em; text-align: center; text-transform: uppercase; white-space: nowrap; pointer-events: none; translate: -50% 0; transform-origin: center; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); animation: convite-flutuar 1.8s ease-in-out infinite; }
.convite-navegacao span { display: block; }
.convite-navegacao[hidden], .convite-navegacao.no-rodape { display: none !important; }
.convite-navegacao.no-papel { color: var(--ouro-escuro); text-shadow: none; }
.convite-navegacao.agradecendo { animation: convite-agradecer 1.3s ease-out forwards; }
.convite-navegacao.pulsando { animation: convite-flutuar 1.8s ease-in-out infinite, convite-pulsar .6s ease-in-out; }
.menu-aberto .convite-navegacao, body:has(dialog[open]) .convite-navegacao, .convite-navegacao.com-colecao { visibility: hidden; }
@media (pointer: coarse), (hover: none), (max-width: 1024px) { .convite-navegacao__teclado { display: none !important; } }

/* ---------- revelar e movimento ---------- */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--atraso, 0s); }
.revelar.visivel { opacity: 1; transform: none; }
.sem-js .revelar { opacity: 1; transform: none; }

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes surgir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes desenhar { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes acender { from { opacity: 0; filter: drop-shadow(0 0 0 rgba(235, 189, 92, 0)) brightness(.6); } to { opacity: 1; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)) brightness(1); } }
@keyframes respirar { 0%, 100% { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)) drop-shadow(0 0 0 rgba(235, 189, 92, 0)); } 50% { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(235, 189, 92, .28)); } }
@keyframes brotar { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes convite-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes convite-pulsar { 0%, 100% { scale: 1; } 45% { scale: 1.12; } }
@keyframes convite-agradecer { 0% { opacity: 1; scale: 1; } 35% { opacity: 1; scale: 1.2; } 100% { opacity: 0; scale: 1.5; } }

/* a entrada: a moldura se desenha, a palavra acende, o broto nasce e as raízes descem */
.entrada .moldura__trilho, .entrada .moldura__fio, .entrada .moldura__interna { stroke-dasharray: 100; animation: desenhar 1.8s cubic-bezier(.6, 0, .2, 1) both; }
.entrada .moldura__fio { animation-delay: .25s; }
.entrada .moldura__interna { animation-delay: .45s; }
.entrada .moldura__canto { animation: aparecer 1s .9s both; }
.entrada .moldura::before { animation: surgir 1s both; }
.retabulo__nome { animation: acender 1.4s .5s both, respirar 6s 2.4s ease-in-out infinite; }
.retabulo__broto { animation: brotar .8s 1.5s cubic-bezier(.2, .7, .2, 1) both; }
.retabulo__raizes .raiz { stroke-dasharray: 100; animation: desenhar 1.2s .6s cubic-bezier(.6, 0, .2, 1) both; }
.entrada .retabulo > :not(.retabulo__marca) { animation: surgir .9s both; }
.entrada .retabulo > :nth-child(2) { animation-delay: .9s; }
.entrada .retabulo > :nth-child(3) { animation-delay: 1.05s; }
.entrada .retabulo > :nth-child(4) { animation-delay: 1.2s; }
.entrada .retabulo__placas > * { animation: surgir .7s both; }
.entrada .retabulo__placas > :nth-child(1) { animation-delay: 1.35s; }
.entrada .retabulo__placas > :nth-child(2) { animation-delay: 1.45s; }
.entrada .retabulo__placas > :nth-child(3) { animation-delay: 1.55s; }
.entrada .retabulo__placas > :nth-child(4) { animation-delay: 1.65s; }
.entrada .retabulo__dedicatoria, .entrada .retabulo__versao { animation-delay: 1.85s !important; }
.entrada .almanaque-canto { animation: surgir 1.2s 2s both; }
.heroi-entrada > * { animation: surgir .9s both; }
.heroi-entrada > :nth-child(2) { animation-delay: .12s; }
.heroi-entrada > :nth-child(3) { animation-delay: .24s; }
.heroi-entrada > :nth-child(4) { animation-delay: .36s; }
.heroi-entrada > :nth-child(5) { animation-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
    .revelar { opacity: 1; transform: none; }
    .convite-navegacao { animation: none !important; }
}