/**
 * Movimento da página inicial do Redação Nota 10.
 *
 * Mora num arquivo próprio, e não em style.css/redacao.css, porque esses dois
 * são carregados TAMBÉM pelo editor visual (layouts/editor.php): uma regra de
 * "esconder para animar" ali deixaria o editor com a página invisível. Este
 * arquivo só é ligado pela home (home/index.php, via $headExtra).
 *
 * Tudo aqui fica sob classes que o <head> põe no <html> antes da primeira
 * pintura:
 *
 *   red-anima    → há JavaScript e a pessoa não pediu movimento reduzido
 *   red-abertura → primeira visita da sessão: mostra a tela do lápis
 *   red-aos      → a biblioteca AOS carregou de fato (posta pelo JS)
 *
 * Sem essas classes nada é escondido: sem JS, com CDN fora ou com movimento
 * reduzido, a página é exatamente a de antes.
 */

/* ------------------------------------------------------------- Abertura */

/* A tela nasce com `display:none` INLINE (e não com o atributo `hidden`: o
   Bootstrap 4 traz `[hidden]{display:none!important}`, que venceria esta regra
   e a tela nunca apareceria). O inline também a mantém escondida se este CSS
   não carregar. Por isso o `!important` aqui: só ele vence o inline. */
html.red-abertura .red-abertura-tela {
    display: flex !important;
}

.red-abertura-tela {
    position: fixed;
    inset: 0;
    z-index: 1090;
    align-items: center;
    justify-content: center;
    /* O mesmo fundo do topo: quando a tela sai, a passagem fica invisível. */
    background: radial-gradient(var(--red-principal, #2C5543), var(--red-escura, #1D4031));
    transition: opacity .35s ease;
    /* Trava de segurança: se o home-anima.js nunca rodar, a tela sai sozinha.
       O script cancela esta animação assim que assume. */
    animation: red-abertura-trava .35s ease 2.5s forwards;
}

.red-abertura-tela.is-saindo {
    opacity: 0;
    pointer-events: none;
}

@keyframes red-abertura-trava {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.red-abertura-rabisco {
    width: min(280px, 64vw);
    height: auto;
    overflow: visible;
}

/* O rabisco começa apagado (pathLength="1000" normaliza o comprimento) e se
   desenha sozinho por CSS — assim, mesmo sem o JS, a abertura tem vida. Com o
   JS, ele assume dali em diante e põe o lápis em cima da ponta do traço. */
.red-abertura-rabisco path {
    fill: none;
    stroke: #fff;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: red-rabisco .9s cubic-bezier(.45, .05, .35, 1) .1s forwards;
}

@keyframes red-rabisco {
    to { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------------ Logo */

/* O logo espera escondido até o JS assumir — e reaparece sozinho aos 2,5 s
   se o JS nunca chegar. */
html.red-anima #home .logoRedacao {
    opacity: 0;
    animation: red-logo-trava 0s linear 2.5s forwards;
}

@keyframes red-logo-trava {
    to { opacity: 1; }
}

/* O JS assumiu: sem trava, e quem decide a visibilidade é a máscara. */
html.red-anima #home .logoRedacao.red-logo-js {
    animation: none;
}

html.red-anima #home .logoRedacao.red-logo-escrita,
html.red-anima #home .logoRedacao.red-logo-pronto {
    opacity: 1;
}

/* ----------------------------------------------------------------- Lápis */

.red-lapis {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1095;
    pointer-events: none;
    opacity: 0;
    /* Gira em torno da PONTA (ver lapis-traco.svg), para o grafite nunca sair
       de cima do traço enquanto o lápis balança. */
    transform-origin: 8.9% 92%;
    will-change: transform, opacity;
    transition: opacity .2s ease;
}

.red-lapis.is-visivel {
    opacity: 1;
}

/* ------------------------------------------------- Rolagem (AOS, ajustes) */

/* O AOS vem com deslocamentos de 100px e zoom de 0,6 — teatral demais para a
   página. Estes valores deixam o movimento curto. Ficam sob `red-aos` (e não
   `red-anima`) porque os blocos livres já trazem `data-aos` na marcação: sem a
   biblioteca carregada, estas regras deslocariam os blocos para sempre. */
html.red-aos [data-aos="fade-up"]   { transform: translate3d(0, 28px, 0); }
html.red-aos [data-aos="fade-down"] { transform: translate3d(0, -18px, 0); }
html.red-aos [data-aos="zoom-in"]   { transform: scale(.94); }

/* O tracejado que liga os passos 1→2→3→4 se desenha de cima para baixo, como
   a caneta passando de um passo ao outro. */
html.red-aos .traco-filedset[data-aos]::after {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    transition: -webkit-clip-path .55s ease .4s, clip-path .55s ease .4s;
}

html.red-aos .traco-filedset[data-aos].aos-animate::after {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}

/* ------------------------------------------------- Movimento reduzido */

/* Rede de proteção: o <head> já não liga nada para quem pede movimento
   reduzido, mas a preferência pode mudar com a página aberta. */
@media (prefers-reduced-motion: reduce) {
    html.red-abertura .red-abertura-tela,
    .red-lapis {
        display: none !important;
    }

    html.red-anima #home .logoRedacao {
        opacity: 1 !important;
        animation: none !important;
    }
}