/* hero.css — o hero interativo da home (aplicado em 2026-10-17 a partir de docs/artefato-hero-surreal.html).
   Um assunto só: o hero. Tudo com prefixo hf- (hero field) para não colidir com o Bootstrap (.btn, .badge) nem com o
   hero antigo (.hero-static, .hero-badges), que fica de backup num <template> no index.html.
   Regra de desempenho (16/10): nada de backdrop-filter, filter: blur() ou mix-blend-mode em cima do canvas — a GPU
   refazia a tela inteira a cada quadro e o Franco viu "travado, lentão". */

/* a página do modelo é uma caixa de 1320 px (.container-xxl); o hero sai da caixa e vai de borda a borda sem mexer no resto.
   --sbw = largura da barra de rolagem, medida pelo hero.js (sem ela sobrava rolagem horizontal) */
.hf-wrap { position: relative; width: calc(100vw - var(--sbw, 0px)); margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2); }

.hf {
    position: relative;
    min-height: min(88vh, 820px);
    display: grid;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background:
        radial-gradient(1200px 700px at 15% 20%, rgba(30, 75, 224, .95), transparent 60%),
        radial-gradient(900px 600px at 85% 75%, rgba(15, 35, 64, .95), transparent 60%),
        linear-gradient(135deg, #1736B0 0%, #0F2340 100%);
}
/* o ponteiro do sistema só some quando um ponteiro próprio está ligado (CURSOR no hero.js) */
@media (pointer: fine) {
    body.hf-cur-pencil .hf, body.hf-cur-pencil .hf a, body.hf-cur-pencil .hf button,
    body.hf-cur-dot .hf, body.hf-cur-dot .hf a, body.hf-cur-dot .hf button,
    body.hf-cur-reticle .hf, body.hf-cur-reticle .hf a, body.hf-cur-reticle .hf button { cursor: none; }
}

.hf::before { /* malha animada atrás de tudo (só transform: compositor) */
    content: ""; position: absolute; inset: -20%; z-index: 0; opacity: .85; will-change: transform;
    background:
        radial-gradient(700px 700px at 30% 30%, rgba(85, 124, 255, .55), transparent 70%),
        radial-gradient(800px 600px at 70% 60%, rgba(37, 211, 102, .18), transparent 70%),
        radial-gradient(700px 700px at 60% 20%, rgba(255, 193, 7, .14), transparent 70%);
    animation: hf-drift 18s ease-in-out infinite alternate;
}
@keyframes hf-drift { from { transform: translate3d(-3%, -2%, 0) rotate(0deg); } to { transform: translate3d(3%, 4%, 0) rotate(6deg); } }
.hf::after { /* grão de papel */
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.9'/></svg>");
}
.hf-field { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.hf-sweep { /* varredura de luz, de vez em quando */
    position: absolute; inset: -10% -35%; z-index: 2; pointer-events: none; opacity: 0;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .10) 50%, transparent 58%);
    animation: hf-sweep 11s ease-in-out infinite;
}
@keyframes hf-sweep { 0%, 70% { opacity: 0; transform: translateX(-30%); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(30%); } }
.hf-scan { /* a luz do scanner que "imprime" o título */
    position: absolute; left: -10%; right: -10%; top: 0; height: 160px; z-index: 4; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .55) 48%, rgba(120, 170, 255, .9) 50%, rgba(255, 255, 255, .55) 52%, transparent);
}
.hf-scan.go { animation: hf-scan 1.6s cubic-bezier(.4, 0, .2, 1) 1; }
@keyframes hf-scan { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(100vh); } }

/* ---- o texto ---- */
.hf-content { position: relative; z-index: 3; padding: 96px 0 128px; }
.hf-kicker {
    display: inline-block; margin-bottom: 18px; padding: 7px 16px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 30px;
    background: rgba(255, 255, 255, .16); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.hf-title {
    margin: 0 0 22px; max-width: 14ch; font-family: Inter, sans-serif; font-weight: 700; font-size: clamp(32px, 5.4vw, 72px);
    line-height: 1.04; letter-spacing: -.02em; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}
.hf-title .w { display: inline-block; white-space: nowrap; }
.hf-title .c { display: inline-block; opacity: 0; transform: translateY(.35em) rotateX(-70deg); transform-origin: 50% 100%; filter: blur(6px); }
.hf-title .c.in { opacity: 1; transform: none; filter: blur(0); transition: opacity .35s ease, transform .18s ease-out, filter .4s ease; }
@media (pointer: fine) { .hf-title .c.in { will-change: transform; } } /* cada letra vira camada: levantar perto do mouse é só compositor */
.hf-title .accent { font-family: 'Lobster Two', cursive; font-weight: 700; color: #FFC107; letter-spacing: 0; }
.hf-lede { max-width: 62ch; margin: 0 0 30px; color: rgba(255, 255, 255, .92); font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; line-height: 1.55; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }

/* ---- botões (os do Bootstrap do site + brilho que segue o mouse + ímã por JS) ---- */
.hf-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hf-btn { position: relative; will-change: transform; box-shadow: 0 14px 34px rgba(30, 75, 224, .45); }
.hf-btn.btn-light { box-shadow: 0 14px 34px rgba(0, 0, 0, .25); }
.hf-btn:active { transform: scale(.97) !important; }
.hf-shine { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120px 60px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.hf-btn:hover .hf-shine { opacity: 1; }

/* ---- selos (nota do Google + 30 anos), cartão que inclina com o mouse ---- */
.hf-badges {
    display: inline-grid; gap: 8px; padding: 16px 20px; border-radius: 18px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25);
    color: #fff; transform-style: preserve-3d; transition: transform .15s ease-out; box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.hf-badge { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #fff; text-decoration: none; transform: translateZ(30px); }
.hf-badge:hover { color: #fff; }
.hf-badge .stars { color: #FFC107; letter-spacing: 2px; font-size: 17px; }
.hf-badge .fa { color: #FFC107; font-size: 17px; }
.hf-badge strong { font-family: Inter, sans-serif; }

/* ---- entrada em sequência ---- */
.hf-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
body.hf-ready .hf-reveal { opacity: 1; transform: none; }

/* ---- clique no fundo: tinta espalhando ---- */
.hf-ripple { position: absolute; z-index: 4; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(30, 75, 224, 0) 70%); animation: hf-ink .9s ease-out forwards; }
@keyframes hf-ink { to { width: 420px; height: 420px; opacity: 0; } }

/* ---- bordas onduladas (as mesmas do resto do site), fora do filtro do modo cópia ---- */
.hf-scallop-top, .hf-scallop-bottom { position: absolute; left: 0; width: 100%; z-index: 6; pointer-events: none; }
.hf-scallop-top { top: 0; height: 10px; background: url(../img/bg-header-top.png) center center repeat-x; }
.hf-scallop-bottom { bottom: 0; height: 19px; background: url(../img/bg-header-bottom.png) center center repeat-x; }

/* ---- modo copiadora: o hero vira uma xerox (tela invertida + meio-tom); o botão fica fora do filtro ---- */
.hf-copy-toggle {
    position: absolute; right: 24px; bottom: 36px; z-index: 7; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border: 0; border-radius: 40px;
    background: #0F2340; color: #fff; font: 600 14px Heebo, sans-serif; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); cursor: pointer;
}
.hf-copy-toggle .fa { font-size: 15px; }
.hf-copy-toggle .count { font-family: Inter, sans-serif; opacity: .7; }
body.hf-copy .hf { filter: grayscale(1) invert(1) contrast(1.35) brightness(1.06); }
body.hf-copy .hf::before { animation-play-state: paused; }
body.hf-copy .hf::after {
    opacity: .55; background-image: radial-gradient(circle, rgba(255, 255, 255, .7) 0.9px, transparent 1.4px); background-size: 5px 5px;
    /* atrás da coluna de texto o meio-tom quase some (senão o parágrafo e os selos não se leem); no resto fica cheio */
    -webkit-mask-image: radial-gradient(ellipse 36% 48% at 32% 50%, rgba(0, 0, 0, .06) 55%, rgba(0, 0, 0, .6) 85%, #000 100%);
    mask-image: radial-gradient(ellipse 36% 48% at 32% 50%, rgba(0, 0, 0, .06) 55%, rgba(0, 0, 0, .6) 85%, #000 100%);
}
body.hf-copy .hf-btn, body.hf-copy .hf-badges { box-shadow: none; }
.hf-copy-sheet { position: fixed; inset: 0; z-index: 1045; pointer-events: none; opacity: 0; background: #fff; }
.hf-copy-sheet.go { animation: hf-flash .45s ease-out 1; }
@keyframes hf-flash { 0% { opacity: 0; } 20% { opacity: .95; } 100% { opacity: 0; } }

/* ---- ponteiros próprios (17/10): três opções, todas DESLIGADAS por padrão; a constante CURSOR no hero.js liga uma.
        Só aparecem dentro do hero (body.hf-cursor-on) e nunca no toque. ---- */
.hf-pencil, .hf-dot, .hf-reticle { display: none; position: fixed; z-index: 1046; left: 0; top: 0; pointer-events: none; }
@media (pointer: fine) {
    body.hf-cursor-on.hf-cur-pencil .hf-pencil, body.hf-cursor-on.hf-cur-dot .hf-dot, body.hf-cursor-on.hf-cur-reticle .hf-reticle { display: block; }
}
/* 1. ponta de lápis: 26 px a 45°, a ponta de grafite no ponto de clique; em cima de botão encosta (desce 2 px, encolhe 8%) */
.hf-pencil { width: 0; height: 0; }
.hf-pencil .pi { position: absolute; left: 0; top: 0; transform: rotate(-45deg); transform-origin: 0 0; transition: transform .15s ease-out; color: #fff; filter: drop-shadow(0 1px 1px rgba(15, 35, 64, .55)); }
.hf-pencil.on .pi { transform: rotate(-45deg) translateX(-2px) scale(.92); }
.hf-pencil svg { position: absolute; left: 0; top: -4px; width: 28px; height: 8px; overflow: visible; }
body.hf-copy .hf-pencil .pi { color: #0F2340; filter: none; }
/* 2. ponto que vira risco: 5 px; o risco é desenhado no canvas pelo hero.js; em cima de botão cresce e toma a cor dele */
.hf-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(15, 35, 64, .45); transform: translate(-50%, -50%); transition: width .15s, height .15s, background .2s, box-shadow .2s; }
.hf-dot.on { width: 10px; height: 10px; }
.hf-dot.on.light { background: var(--primary); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
body.hf-copy .hf-dot { background: #0F2340; box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
/* 3. mira de scanner: quatro cantinhos, nada no centro; parada gira, em cima de botão/palavra abraça, no clique fecha */
.hf-reticle .ri { position: relative; width: 18px; height: 18px; transform: translate(-50%, -50%); transition: width .22s cubic-bezier(.2, .8, .2, 1), height .22s cubic-bezier(.2, .8, .2, 1), transform .12s ease-out; }
.hf-reticle.idle .ri { animation: hf-ret-spin 7s linear infinite; }
@keyframes hf-ret-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hf-reticle.snap .ri { transform: translate(-50%, -50%) scale(.55); }
.hf-reticle .rc { position: absolute; width: 7px; height: 7px; border: 1.5px solid #fff; transition: width .22s, height .22s, border-color .3s; }
.hf-reticle.lock .rc { width: 11px; height: 11px; }
.hf-reticle .rc.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 5px; }
.hf-reticle .rc.tr { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 5px; }
.hf-reticle .rc.bl { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 5px; }
.hf-reticle .rc.br { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 5px; }
body.hf-copy .hf-reticle .rc { border-color: #0F2340; }

/* ---- celular ---- */
@media (max-width: 900px) {
    body.hf-copy .hf::after { opacity: .2; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 575.98px) {
    .hf { min-height: 0; }
    .hf-content { padding: 64px 0 100px; }
    .hf-title { max-width: none; }
    .hf-actions .btn { width: 100%; justify-content: center; }
    .hf-copy-toggle { right: 12px; bottom: 32px; padding: 9px 13px; }
    .hf-copy-toggle .count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hf::before { animation: none; }
    .hf-title .c { opacity: 1; transform: none; filter: none; }
    .hf-scan, .hf-sweep { display: none; }
    .hf-reveal { opacity: 1; transform: none; transition: none; }
}