/* Página institucional (site.php). Cores da identidade visual (identidade-visual/tokens); a Kalam,
   manuscrita, aparece só nas anotações do caderno. A abertura é animada pelo site.js. */
:root {
    --marinho: #0B1533;
    --noite: #0A0E1A;
    --azul: #1F7BFF;
    --azul-noite: #4D9BFF;
    --primaria: #1263D6;
    --primaria-hover: #0E52B3;
    --fundo: #F5F7FB;
    --superficie: #FFFFFF;
    --superficie-alt: #EEF2F8;
    --texto: #0B1533;
    --suave: #4A5573;
    --suave-noite: #A6B0C8;
    --borda: #C9D2E1;
    --papel: #FDFDFB;
    --pauta: #B9CCEB;
    --margem: #E59A9A;
    --postit: #FFE27A;
    --caneta: #1C3F94;
    --oc-ent: #7A4B00; --oc-ent-fundo: #FFF1D6;
    --oc-sai: #5B2BB5; --oc-sai-fundo: #EFE8FF;
    --oc-ces: #1650B8; --oc-ces-fundo: #E3EEFF;
    --oc-ata: #0F6B63; --oc-ata-fundo: #DDF4F0;
    --oc-bus: #A3261B; --oc-bus-fundo: #FDE6E3;
    --atencao: #7A4B00; --atencao-fundo: #FFF1D6;

    --f-titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
    --f-texto: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    --f-mao: "Kalam", "Segoe Print", "Bradley Hand", cursive;

    --topo: 88px;
    --largura: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--topo); }
body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--f-texto);
    font-size: 18px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 700; line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: var(--primaria); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }

.faixa { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.largura { max-width: var(--largura); margin: 0 auto; }

.botao {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--primaria); color: #fff; text-decoration: none;
    font-family: var(--f-texto); font-weight: 700; font-size: 17px;
    padding: 14px 24px; border-radius: 10px; border: 0; cursor: pointer;
    transition: background .2s, transform .2s;
}
.botao:hover { background: var(--primaria-hover); transform: translateY(-1px); }
.mao { font-family: var(--f-mao); color: var(--caneta); }
.sobre { font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--primaria); }

/* ---------- topo ---------- */
.topo {
    position: sticky; top: 0; z-index: 20;
    background: rgba(245, 247, 251, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(201, 210, 225, .6);
}
.topo-linha { height: var(--topo); display: flex; align-items: center; gap: 28px; }
.topo-logo img { width: 160px; height: auto; display: block; }
.topo-menu { display: flex; gap: 24px; margin-left: auto; }
.topo-menu a { color: var(--suave); text-decoration: none; font-weight: 600; font-size: 16px; }
.topo-menu a:hover { color: var(--texto); }
.topo .botao { padding: 10px 18px; font-size: 15px; }
@media (max-width: 760px) {
    .topo-menu { display: none; }
    .topo .botao { margin-left: auto; padding: 9px 14px; }
}

/* ---------- o caderno (abertura, animada pela rolagem) ---------- */
.caderno { height: 360svh; position: relative; }
.palco {
    position: sticky; top: var(--topo);
    height: calc(100svh - var(--topo));
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center;
    max-width: var(--largura); margin: 0 auto;
}
.fases { display: grid; }
.fase { grid-area: 1 / 1; opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .45s; pointer-events: none; }
.fase.atual { opacity: 1; transform: none; pointer-events: auto; }
.fase h1, .fase h2 { font-size: clamp(34px, 4.6vw, 62px); font-weight: 800; letter-spacing: -0.03em; }
.fase .lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--suave); margin-top: 20px; max-width: 46ch; }
.fase .acoes { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 28px; }
.fase .sobre { margin-bottom: 14px; }
/* convite para descer: botão sobre o caderno (some quando a rolagem começa) e papéis que dão
   pulinhos enquanto a página está parada no topo */
.convite {
    position: absolute; left: 50%; bottom: 18px; z-index: 10;
    display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
    font-family: var(--f-texto); font-weight: 700; font-size: 16px; color: #fff;
    background: var(--marinho); border: 0; border-radius: 999px; padding: 12px 20px 12px 22px; cursor: pointer;
    box-shadow: 0 0 0 6px rgba(31, 123, 255, .18), 0 12px 28px rgba(11, 21, 51, .3);
    transform: translateX(-50%); transition: opacity .35s, transform .35s, background .2s;
}
.convite:hover { background: var(--primaria); }
.convite svg { animation: balanca 1.4s ease-in-out infinite; }
.convite.longe { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; }
@keyframes balanca { 50% { transform: translateY(5px); } }
.mesa.parada .papel { animation: pula 3.2s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 90ms + 1s); }
@keyframes pula { 0%, 22%, 100% { translate: 0 0; } 8% { translate: 0 -10px; } 15% { translate: 0 2px; } }

.mesa { position: relative; height: min(640px, 90%); container-type: inline-size; }

.folhas { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: var(--caos, 1); filter: drop-shadow(0 18px 36px rgba(11, 21, 51, .16)); }
.folha {
    background:
        linear-gradient(to right, transparent 13%, var(--margem) 13%, var(--margem) calc(13% + 1.5px), transparent calc(13% + 1.5px)),
        repeating-linear-gradient(to bottom, transparent 0 27px, var(--pauta) 27px 28px),
        var(--papel);
    background-position: 0 0, 0 46px, 0 0;
    border-radius: 4px 0 0 4px;
}
.folha + .folha {
    background: repeating-linear-gradient(to bottom, transparent 0 27px, var(--pauta) 27px 28px), var(--papel);
    background-position: 0 46px, 0 0;
    border-radius: 0 4px 4px 0;
}
.espiral { position: absolute; left: 50%; top: 2%; bottom: 2%; width: 18px; transform: translateX(-50%);
    background: radial-gradient(circle at 50% 50%, #8592AD 0 4px, transparent 5px) 0 0 / 18px 26px repeat-y; }
.rabisco { position: absolute; font-family: var(--f-mao); color: var(--caneta); opacity: calc(var(--caos, 1) * .75); font-size: clamp(12px, 2cqi, 16px); }

/* papéis soltos */
.papel {
    position: absolute; left: var(--x); top: var(--y); width: var(--w);
    transform: rotate(calc(var(--r, 0) * 1deg)); transform-origin: 50% 50%;
    box-shadow: 0 1px 2px rgba(11, 21, 51, .18), 0 10px 22px rgba(11, 21, 51, .16);
    color: var(--caneta); font-size: clamp(11px, 2cqi, 16px); line-height: 1.3;
    will-change: transform, opacity;
}
.livro { background: var(--papel); border-radius: 3px; padding-bottom: 6px; }
.livro .cab { font-weight: 700; font-size: .7em; letter-spacing: .14em; color: #8A2E2E; padding: 7px 10px 5px; border-bottom: 2px solid var(--margem); }
.livro .linha { font-family: var(--f-mao); display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 2.6em 2.8em; gap: 5px; padding: 4px 10px; border-bottom: 1px solid var(--pauta); }
.livro .cinza { opacity: .5; }
.bilhete { background: var(--papel); padding: 11px 12px 12px; font-family: var(--f-mao); font-size: 1.06em;
    background-image: repeating-linear-gradient(to bottom, transparent 0 1.45em, var(--pauta) 1.45em calc(1.45em + 1px));
    clip-path: polygon(0 4%, 7% 0, 15% 3%, 25% 0, 34% 3%, 46% 0, 57% 3%, 68% 0, 79% 3%, 89% 0, 100% 3%, 100% 100%, 0 100%); }
.conversa { background: #E9EDF3; border-radius: 12px; padding: 8px; color: #1D2433; }
.conversa .grupo { font-weight: 700; font-size: .78em; color: #4A5573; padding: 0 4px 6px; display: flex; align-items: center; gap: 6px; }
.conversa .grupo span { width: 1.5em; height: 1.5em; border-radius: 50%; background: #9FB2D3; flex: none; }
.balao { background: #fff; border-radius: 4px 12px 12px 12px; padding: 7px 9px 5px; }
.balao b { display: block; font-size: .78em; color: #0F6B63; }
.balao small { display: block; text-align: right; font-size: .7em; color: #7B8499; }
.postit { background: var(--postit); padding: 12px 12px 16px; font-family: var(--f-mao); font-size: 1.1em; color: #2B2B2B; }
.postit u { text-decoration-color: #C0392B; text-decoration-thickness: 2px; }
.postit.rosa { background: #FFC9D6; }
.ficha { background: #fff; padding: 9px 11px; border-top: 5px solid #C2352A; }
.ficha .tit { font-weight: 700; font-size: .7em; letter-spacing: .12em; color: #4A5573; }
.ficha dl { margin: 6px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; font-size: .82em; }
.ficha dt { color: #6B7488; }
.ficha dd { margin: 0; font-family: var(--f-mao); color: var(--caneta); font-size: 1.12em; border-bottom: 1px dotted #B8C0D0; }
.ficha.verde { border-top-color: var(--oc-ata); }
.anotacao { background: var(--papel); padding: 10px 12px 10px 22px; font-family: var(--f-mao);
    background-image: radial-gradient(circle, #C9D2E1 0 3px, transparent 4px), repeating-linear-gradient(to bottom, transparent 0 1.45em, var(--pauta) 1.45em calc(1.45em + 1px));
    background-size: 14px 1.45em, auto; background-repeat: repeat-y, repeat; background-position: 3px 4px, 0 0; }
.anotacao s { text-decoration-color: #C2352A; }

/* a tela do Omoiru, onde os papéis pousam */
.painel {
    position: absolute; left: 3%; right: 3%; top: 5%;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(11, 21, 51, .08), 0 22px 50px rgba(11, 21, 51, .14);
    opacity: var(--ordem, 0); padding: clamp(12px, 2.6cqi, 22px);
}
.p-topo { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.p-topo h3 { font-size: clamp(15px, 2.6cqi, 20px); display: flex; align-items: center; gap: 10px; }
.p-topo img { width: 26px; height: auto; }
.filtros { display: flex; gap: 6px; }
.filtros span { font-size: clamp(11px, 1.7cqi, 13px); font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--superficie-alt); color: var(--suave); }
.filtros span:first-child { background: var(--oc-ces-fundo); color: var(--primaria); }
.aluno { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 6px 16px; padding-block: clamp(8px, 1.8cqi, 14px); border-bottom: 1px solid var(--superficie-alt); align-items: center; }
.aluno:last-of-type { border-bottom: 0; }
.aluno strong { font-family: var(--f-titulo); font-size: clamp(13px, 2.3cqi, 17px); display: block; }
.aluno .turma { font-size: clamp(11px, 1.8cqi, 14px); color: var(--suave); display: block; }
.estado { display: inline-block; margin-top: 4px; font-size: clamp(10px, 1.6cqi, 13px); font-weight: 600; border-radius: 5px; padding: 2px 7px; opacity: var(--fim, 0); }
.estado.alerta { color: var(--atencao); background: var(--atencao-fundo); }
.estado.ok { color: var(--oc-ata); background: var(--oc-ata-fundo); }
.selos { display: flex; flex-wrap: wrap; gap: 5px; min-height: 1.6em; }
.selo { font-weight: 700; font-size: clamp(9.5px, 1.6cqi, 12.5px); letter-spacing: .02em; border-radius: 5px; padding: 3px 7px; opacity: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.selo.ent { color: var(--oc-ent); background: var(--oc-ent-fundo); }
.selo.sai { color: var(--oc-sai); background: var(--oc-sai-fundo); }
.selo.ces { color: var(--oc-ces); background: var(--oc-ces-fundo); }
.selo.ata { color: var(--oc-ata); background: var(--oc-ata-fundo); }
.selo.bus { color: var(--oc-bus); background: var(--oc-bus-fundo); }
.p-pe { font-size: 12px; color: var(--suave); margin-top: 10px; opacity: var(--fim, 0); }

.contagem { position: absolute; right: 2%; bottom: -36px; font-family: var(--f-mao); font-size: 19px; color: var(--caneta); display: grid; text-align: right; }
.contagem span { grid-area: 1 / 1; }
.contagem .c1 { opacity: var(--caos, 1); }
.contagem .c2 { opacity: var(--fim, 0); color: var(--primaria); }

/* celular: texto em cima, mesa embaixo ocupando o resto da tela, papéis em outra arrumação
   (--mx, --my, --mw) e a tela do Omoiru mais enxuta, só com as siglas */
@media (max-width: 860px) {
    :root { --topo: 84px; }
    .caderno { height: 380svh; }
    .palco { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 14px; padding-block: 14px 40px; }
    .fase h1, .fase h2 { font-size: clamp(25px, 7vw, 32px); }
    .fase .lead { font-size: 15.5px; line-height: 1.45; margin-top: 8px; }
    .fase .acoes, .fase .sobre, .so-largo { display: none; }
    .mesa { height: auto; }
    .papel { left: var(--mx); top: var(--my); width: var(--mw); font-size: 10.5px; }
    .bilhete, .postit { font-size: 11.5px; padding: 8px 9px 10px; }
    .livro .linha { padding: 3px 8px; grid-template-columns: 3.1em minmax(0, 1fr) 2.4em 2.6em; }
    .rabisco { font-size: 12px; }
    .painel { left: 2%; right: 2%; top: 3%; padding: 12px; }
    .p-topo { padding-bottom: 8px; }
    .p-topo h3 { font-size: 15px; gap: 8px; }
    .p-topo img { width: 20px; }
    .filtros, .p-pe, .selo .dt { display: none; }
    .aluno { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding-block: 8px; }
    .aluno strong { font-size: 14px; }
    .aluno .turma { font-size: 12px; }
    .estado { font-size: 11px; padding: 1px 6px; margin-top: 3px; }
    .selos { justify-content: flex-end; gap: 4px; max-width: 190px; }
    .selo { font-size: 10.5px; padding: 3px 5px; }
    .contagem { font-size: 16px; bottom: -30px; }
    .convite { font-size: 15px; padding: 11px 16px 11px 18px; bottom: 14px; }
}

/* ---------- o nome ---------- */
.nome { padding-block: clamp(72px, 10vw, 128px); background: var(--fundo); overflow: hidden; }
.nome-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.palavra { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(76px, 15vw, 196px); line-height: .9; letter-spacing: -0.045em; color: var(--marinho); }
.palavra .til { color: var(--azul); }
.silabas { display: flex; gap: clamp(10px, 2.4vw, 32px); margin-top: 18px; font-family: var(--f-mao); font-size: clamp(20px, 2.4vw, 28px); color: var(--suave); }
.silabas b { color: var(--caneta); font-weight: 700; }
.nome-texto { display: grid; gap: 22px; }
.raiz { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; padding-block: 18px; border-block: 1px solid var(--borda); margin: 0; }
.raiz dt { font-family: var(--f-titulo); font-weight: 700; font-style: italic; }
.raiz dd { margin: 0; color: var(--suave); }
@media (max-width: 860px) { .nome-grade { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ---------- quem registra ---------- */
.lugares { padding-block: clamp(64px, 9vw, 112px); background: var(--superficie); }
.lugares h2, .equipe-sec h2 { font-size: clamp(30px, 4vw, 48px); max-width: 22ch; }
.lugares-lista { margin-top: 48px; display: grid; }
.lugar { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); gap: 32px; padding-block: 30px; border-top: 1px solid var(--borda); align-items: baseline; }
.lugar:last-child { border-bottom: 1px solid var(--borda); }
.lugar h3 { font-size: clamp(26px, 3vw, 38px); }
.lugar h3 small { display: block; font-family: var(--f-texto); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin-bottom: 6px; }
.lugar p { color: var(--suave); }
.lugar .mao { font-size: 21px; line-height: 1.25; transform: rotate(-2deg); color: var(--caneta); }
.junto { margin-top: 28px; color: var(--suave); }
@media (max-width: 860px) { .lugar { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* ---------- cuidado com os dados ---------- */
.cuidado { background: var(--marinho); color: #F2F5FA; padding-block: clamp(64px, 8vw, 104px); position: relative; overflow: hidden; }
.cuidado-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; position: relative; }
.cuidado h2 { font-size: clamp(30px, 4vw, 48px); }
.cuidado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.cuidado li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; color: #C9D3E8; }
.cuidado li strong { color: #fff; display: block; font-size: 19px; }
.cuidado svg { color: var(--azul-noite); margin-top: 3px; }
.circuito { position: absolute; right: -40px; top: -20px; width: 460px; max-width: none; opacity: .22; pointer-events: none; }
@media (max-width: 860px) { .cuidado-grade { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ---------- equipe ---------- */
.equipe-sec { padding-block: clamp(64px, 9vw, 112px); background: var(--superficie-alt); }
.origem { color: var(--suave); font-size: 19px; margin-top: 20px; max-width: 62ch; }
.fotos { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.foto { background: #fff; padding: 12px 12px 16px; box-shadow: 0 1px 2px rgba(11, 21, 51, .12), 0 12px 24px rgba(11, 21, 51, .10); transform: rotate(var(--r)); transition: transform .35s; position: relative; }
.foto:hover { transform: rotate(0) translateY(-4px); }
.foto::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgba(185, 204, 235, .7); }
.foto img, .foto .vazia { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.foto .vazia { background: linear-gradient(160deg, var(--superficie-alt), #DCE3EF); display: grid; place-items: center; color: #8592AD; }
.foto .vazia svg { width: 46%; height: auto; }
.foto strong { display: block; font-family: var(--f-mao); font-size: 22px; color: var(--caneta); margin-top: 10px; line-height: 1.1; }
.foto span { display: block; font-size: 15px; color: var(--suave); line-height: 1.35; margin-top: 4px; }
.apoio { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; color: var(--suave); }
.apoio b { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto); }
@media (max-width: 960px) { .fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; } }
@media (max-width: 420px) { .foto strong { font-size: 19px; } .foto span { font-size: 13.5px; } }

/* ---------- contato ---------- */
.contato { padding-block: clamp(72px, 10vw, 128px); background: var(--fundo); }
.contato-grade { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.contato h2 { font-size: clamp(38px, 6vw, 76px); font-weight: 800; letter-spacing: -0.03em; max-width: 14ch; }
.contato p { color: var(--suave); margin-top: 14px; font-size: 19px; max-width: 46ch; }
.botao-email { font-size: 19px; padding: 16px 26px; overflow-wrap: anywhere; }
@media (max-width: 760px) { .contato-grade { grid-template-columns: minmax(0, 1fr); } .botao-email { justify-content: center; } }

.rodape { background: var(--noite); color: var(--suave-noite); padding-block: 40px; font-size: 15px; }
.rodape-linha { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.rodape img { width: 160px; height: auto; display: block; }

/* ---------- efeitos da rolagem (site.js) ---------- */
/* linha de leitura embaixo do topo */
.lido { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--azul); transform-origin: 0 50%; transform: scaleX(var(--lido, 0)); }

/* traço de caneta embaixo de uma palavra */
.sublinha { position: relative; white-space: nowrap; }
.sublinha svg { position: absolute; left: -3%; bottom: -.22em; width: 106%; height: .32em; overflow: visible; }
.sublinha path { fill: none; stroke: var(--azul); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* circuito da asa, desenhado conforme a faixa escura passa pela tela */
.circuito path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--tracado, 1)); }
.circuito circle { opacity: var(--tracado, 1); }

/* o nome desliza devagar na rolagem */
.palavra { transform: translateX(var(--desliza, 0)); white-space: nowrap; }
.palavra .letra { display: inline-block; }

/* Blocos que entram ao aparecer na tela. A classe .revela só é posta pelo site.js, então sem
   JavaScript tudo fica visível. */
.revela { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--atraso, 0s); }
.revela.visto { opacity: 1; transform: none; }
.revela .sublinha path { stroke-dashoffset: 1; }
.revela.visto .sublinha path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.6, .1, .3, 1) calc(var(--atraso, 0s) + .6s); }

.palavra.revela, .palavra.revela.visto { opacity: 1; transform: translateX(var(--desliza, 0)); transition: none; }
.palavra.revela .letra { opacity: 0; transform: translateY(.45em) rotate(6deg); transition: opacity .6s, transform .8s cubic-bezier(.2, .9, .25, 1.2); transition-delay: calc(var(--i) * 80ms); }
.palavra.revela.visto .letra { opacity: 1; transform: none; }

/* anotação à mão "escrita" da esquerda para a direita */
.lugar.revela .mao { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(.5, 0, .3, 1) .55s; }
.lugar.revela.visto .mao { clip-path: inset(0 -5% 0 0); }

/* polaroides caem na mesa e a fita aparece depois */
.foto.revela { transform: translateY(70px) rotate(calc(var(--r) + 9deg)) scale(.94); }
.foto.revela.visto { transform: rotate(var(--r)); }
.foto.revela.visto:hover { transform: rotate(0) translateY(-4px); transition-delay: 0s; }
.foto.revela::before { opacity: 0; transform: translateX(-50%) rotate(-3deg) scaleX(.4); transition: opacity .3s, transform .4s; transition-delay: calc(var(--atraso, 0s) + .7s); }
.foto.revela.visto::before { opacity: 1; transform: translateX(-50%) rotate(-3deg); }

.cuidado li.revela { transform: translateX(-24px); }
.cuidado li.revela.visto { transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
    html { scroll-behavior: auto; }
}