/* Página /fundador — estilos próprios.

   ATENÇÃO — porque é que isto vive aqui e não no <style> do componente:
   o Livewire 4 EXTRAI o <style> de um componente single-file para um ficheiro
   em storage/framework/views/livewire/styles/<hash>.css ... e não injecta o
   <link> que o carrega. A página fica servida sem uma única regra, sem erro
   nenhum: o markup está lá, o CSS não. Aconteceu com esta página em produção
   a 2026-08-25 e passou despercebido porque os testes verificavam os tokens
   no atributo style inline, que sobrevivem à extracção.

   Mesma razão do retro-effects.css, que documenta o problema irmão dos
   @keyframes. Carregado por esta página via @push('head'). */

/* ============================================================
 * FUNDADOR — página de marca pessoal.
 * Preto editorial de alto contraste, a acompanhar o retrato.
 *
 * NOTA HISTÓRICA (mantida porque explica o desenho do markup):
 * ATENÇÃO aos tokens de cor: o Livewire 4 extrai este bloco para
 * um ficheiro próprio e embrulha-o em
 *     [wire:name="fundador"] { & .seletor { ... } }
 * ou seja, TODAS as regras aqui só apanham DESCENDENTES da raiz do
 * componente. Uma regra `.ps-scope { --ps-*: ... }` nunca chegaria a
 * aplicar-se, porque .ps-scope é a própria raiz — os tokens ficariam
 * por definir e todos os var() cairiam para transparente.
 * Por isso os tokens e o fundo são declarados no atributo `style`
 * do <div class="ps-scope"> lá em baixo. Não os mudes para aqui.
 * ============================================================ */

/* --- Fundos -------------------------------------------------
 * Classes próprias em vez de `bg-[--ps-bg]`: essa é sintaxe do
 * Tailwind 3 e o Tailwind 4 não a resolve (seria `bg-(--ps-bg)`),
 * o que apagava a alternância de fundos entre secções.
 * ------------------------------------------------------------ */
.ps-bg     { background-color: var(--ps-bg); }
.ps-bg-alt { background-color: var(--ps-bg-alt); }

/* --- Tipografia -------------------------------------------- */
.ps-mono {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.6875rem;
}

/* Sem `line-height` aqui de propósito: este ficheiro é carregado depois do
   Tailwind, por isso uma entrelinha nesta regra ganhava sempre às classes
   utilitárias e esmagava os títulos pequenos (h3) que usam `leading-tight`.
   A entrelinha apertada fica só nos tamanhos grandes, abaixo. */
.ps-display {
    font-family: 'Instrument Sans', 'Inter', ui-sans-serif, sans-serif;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.ps-h1   { font-size: clamp(2.25rem, 6.2vw, 5rem);    line-height: 0.98; }
.ps-h2   { font-size: clamp(1.75rem, 4.2vw, 3.25rem); line-height: 1.02; }
.ps-lede { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.6; }
.ps-body { font-size: 1rem; line-height: 1.72; }

/* Texto do manifesto — maior e mais arejado que o corpo normal. */
.ps-manifesto p {
    font-size: clamp(1.125rem, 2.1vw, 1.6875rem);
    line-height: 1.55;
    letter-spacing: -0.012em;
}

.ps-manifesto p + p { margin-top: 1.5rem; }

/* --- Retrato ----------------------------------------------- */
/* O retrato é contraluz sobre fundo preto: sangra para o fundo
   da página com uma máscara, em vez de ficar dentro de uma caixa. */
.ps-portrait {
    position: relative;
    isolation: isolate;

    /* Dois gradientes cruzados em vez de um radial: um radial só chega a
       transparente nos CANTOS, deixando os bordos laterais a meia opacidade
       e o rectângulo da foto visível contra o preto da página. Cruzando um
       fade horizontal com um vertical, os quatro lados chegam mesmo a zero
       e o retrato dissolve-se no fundo.

       Está numa custom property porque o efeito CRT por cima do retrato
       precisa EXACTAMENTE da mesma máscara: se as duas divergirem, o
       rectângulo do "ecrã" volta a aparecer recortado contra o preto. O
       nome --crt-mask é o que a classe .crt lê (public/css/retro-effects.css). */
    --crt-mask:
        linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, transparent 100%);
}

.ps-portrait img {
    width: 100%;
    height: auto;
    display: block;
    filter: contrast(1.06);
    -webkit-mask-image: var(--crt-mask);
    -webkit-mask-composite: source-in;
            mask-image: var(--crt-mask);
            mask-composite: intersect;
}

/* O efeito CRT em si vive em public/css/retro-effects.css — as animações
   precisam de @keyframes, e um @keyframes declarado AQUI seria descartado
   em silêncio (o Livewire 4 embrulha este bloco numa regra de estilo e o
   CSS Nesting não permite @keyframes lá dentro). Aqui fica só a afinação.

   O fio vermelho (::after, z-index 1) passa por baixo do varrimento e por
   fora da máscara nas pontas: sai do tubo, que é o que se quer. */
.ps-portrait .crt {
    --crt-intensity: 0.85;
}

/* Fio vermelho que atravessa o retrato à altura dos óculos. */
.ps-portrait::after {
    content: '';
    position: absolute;
    left: -12%;
    right: -12%;
    top: 41%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--ps-accent) 22%,
        var(--ps-accent) 78%,
        transparent
    );
    opacity: 0.55;
    z-index: 1;
}

/* --- Regras e detalhes -------------------------------------- */
.ps-rule       { border-top: 1px solid var(--ps-rule); }
.ps-rule-left  { border-left: 1px solid var(--ps-rule); }

.ps-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--ps-accent);
}

.ps-eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background-color: var(--ps-accent);
}

.ps-num {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--ps-dim);
    letter-spacing: 0.1em;
}

/* --- Citação de destaque ------------------------------------ */
.ps-quote {
    font-family: 'Instrument Sans', 'Inter', ui-sans-serif, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.14;
    font-size: clamp(1.5rem, 3.8vw, 3rem);
}

.ps-quote em {
    font-style: normal;
    color: var(--ps-accent);
}

/* --- Cartões de razão / recusa ------------------------------ */
.ps-card {
    border: 1px solid var(--ps-rule);
    background-color: rgba(255, 255, 255, 0.015);
    transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
}

.ps-card:hover {
    border-color: var(--ps-rule-str);
    background-color: rgba(255, 255, 255, 0.035);
    transform: translateY(-2px);
}

/* Marcador vermelho que cresce no hover das cenas do dia-a-dia. */
.ps-scene {
    position: relative;
    padding-left: 1.5rem;
}

.ps-scene::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 2px;
    background-color: var(--ps-rule);
    transition: background-color 0.35s ease;
}

.ps-scene:hover::before { background-color: var(--ps-accent); }

/* --- Faixa em parallax --------------------------------------
 * A imagem é maior que a faixa (inset vertical negativo) e desliza
 * dentro dela conforme o scroll. Sem `background-attachment: fixed`
 * de propósito: no iOS essa propriedade não funciona e a imagem
 * ficaria simplesmente estática e mal enquadrada.
 * ------------------------------------------------------------ */
.ps-band {
    position: relative;
    overflow: hidden;
    background-color: #050B14; /* azul-preto: cobre a faixa se a imagem faltar */
}

.ps-band-media {
    position: absolute;
    left: 0;
    right: 0;
    top: -14%;
    bottom: -14%;
    will-change: transform;
}

.ps-band-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    opacity: 0.38;
    /* A imagem é azul-ciano saturada e a página é preta e vermelha. Sem a
       dessaturação, a faixa parecia colada de outro site. */
    filter: grayscale(0.55) contrast(1.15) brightness(0.95);
}

/* Overlay: escurece progressivamente para o lado do texto, para o
   contraste não depender da zona da imagem que calhar ali. */
.ps-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to right,
            rgba(5, 5, 5, 0.10) 0%,
            rgba(5, 5, 5, 0.62) 42%,
            rgba(5, 5, 5, 0.93) 100%
        ),
        linear-gradient(
            to bottom,
            var(--ps-bg) 0%,
            transparent 18%,
            transparent 82%,
            var(--ps-bg) 100%
        );
    pointer-events: none;
}

.ps-band-content {
    position: relative;
    z-index: 10;
}

/* --- Botões -------------------------------------------------- */
.ps-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background-color: var(--ps-accent);
    color: #fff;
    border-radius: 999px;
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.ps-btn:hover {
    background-color: #E23A2A;
    transform: translateY(-1px);
}

.ps-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border: 1px solid var(--ps-rule-str);
    color: var(--ps-ink);
    border-radius: 999px;
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.ps-btn-ghost:hover {
    border-color: var(--ps-ink);
    background-color: rgba(255, 255, 255, 0.05);
}

.ps-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ps-mute);
    transition: color 0.25s ease;
}

.ps-social-link:hover { color: var(--ps-accent); }

/* --- Selector de idioma ------------------------------------- */
.ps-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.ps-lang a {
    color: var(--ps-dim);
    transition: color 0.25s ease;
}

.ps-lang a:hover { color: var(--ps-ink); }
.ps-lang a[aria-current="true"] { color: var(--ps-accent); }

/* --- Revelação ao scroll ------------------------------------- */
.ps-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.ps-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .ps-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ps-card:hover,
    .ps-btn:hover { transform: none; }

    /* O parallax também é movimento: fica quieto. */
    .ps-band-media { transform: none !important; }
}