/*
Theme Name: Henrique Spina — Child
Template: generatepress
Author: Henrique Spina
Description: Child theme do portfolio. Só MECANICAS de UI (cursor-pet, loader, fast-travel) e ajuste do tema na home. O VISUAL dos blocos fica em blocks.css (front + editor), pra o Kadence conseguir sobrepor.
Version: 0.3.1 (260710 — loader nativo; cursor sem fade-in, troca lasca→cursor por corte alinhado)
*/

:root{
  --bg:#5b14d2; --bg2:#3c0b97; --purple:#5a18c4; --purple2:#7a35e0; --magenta:#ec0f7c;
  --navy:#1c0b43; --ice:#eef0f6; --ink:#0e0820; --line:rgba(255,255,255,.16);
}
body{margin:0;background:#ecf2f5;color:#0e0820;
  font-family:"Inter",ui-sans-serif,system-ui,Arial;overflow-x:hidden}
body.home, body.hs-front{background:var(--bg);color:var(--ice)}
.hs-front a{color:inherit}
@media (pointer:fine){body.hs-front,body.hs-front *{cursor:none!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== MECANICAS (só front; nao existem como bloco) ===== */
/* ============================================================================
   LOADER NATIVO (260710) — substitui o loader.mp4 por SVG + CSS (leve, nitido).
   Coreografia: aurora → 3 pecas montam o simbolo no centro → quebra: H + lasca
   SUPERIOR encolhem pro canto (mesma posicao do logo fixo #hs-nav) e a lasca
   INFERIOR desce ESPELHANDO ate o centro (pousa identica ao cursor-pet).
   O fade de saida continua sendo do app.js (reveal aos 5s) — nao existe aqui.

   PAINEL DE CONTROLE — MEXA AQUI (nao precisa saber programar):
   ============================================================================ */
:root{
  /* ---- TEMPOS (aumentar = mais lento) ---- */
  --espera-inicial:    0.55s;  /* fundo sozinho antes das pecas chegarem       */
  --duracao-montagem:  0.85s;  /* pecas voando ate o logo ficar pronto         */
  --pausa-logo-pronto: 0.35s;  /* logo grande parado no centro (momento heroi) */
  --duracao-viagem:    0.90s;  /* quebra: logo pro canto + lasca descendo      */

  /* ---- CORES ---- */
  --cor-luz:     #8b45ee;      /* mancha de luz lilas que passeia (aurora)     */
  --cor-sombra:  #1c0b43;      /* sombra navy nos cantos do fundo              */
  --cor-simbolo: #ffffff;      /* cor das 3 pecas do logo                      */
  --cor-sombra-lasca: #240854; /* sombra da lasca ao pousar — MESMA do cursor-pet,
                                  pra troca lasca→cursor nao dar "pop" na sombra */

  /* ---- TAMANHOS E POSICOES ---- */
  --tamanho-logo-hero: 35vh;   /* altura do logo grande no centro              */
  --logo-final-altura: clamp(76px,6.4vw,128px); /* = altura do logo fixo (#hs-logo img) */
  --logo-final-topo:   16.5vh; /* = top do #hs-nav                             */
  --hud-vao:           8px;    /* = folga do #hs-nav pra fora do grid          */
  --hud-esquerda-estreita: 16px; /* = left do #hs-nav abaixo de 1400px         */
  --lasca-final-x:     50vw;                /* onde a lasca pousa (horizontal) */
  --lasca-final-y:     calc(50vh + 21px);   /* centro visual do cursor-pet
                                               (ele ancora pelo topo, 42px)    */
  --tamanho-lasca:     42px;   /* altura final da lasca = altura do #hs-cursor */
  --lasca-espelho:     -1;     /* -1 = pousa espelhada (igual o cursor-pet); 1 = normal */

  /* ---- JEITO DO MOVIMENTO ---- */
  --curva-entrada: cubic-bezier(.18,.89,.29,1.12); /* chegada com leve overshoot */
  --curva-viagem:  cubic-bezier(.55,.03,.17,1);    /* viagem decidida            */
  --velocidade-fundo: 16s;     /* aurora (maior = mais calma)                  */

  /* -- fim do painel; interno (nao mexa) -- */
  --_t-viagem: calc(var(--espera-inicial) + var(--duracao-montagem) + var(--pausa-logo-pronto));
}

#hs-loader{position:fixed;inset:0;z-index:9000;background:#0c0720;overflow:hidden;transition:opacity 1s ease}
#hs-loader .hsl-fundo{position:absolute;inset:0;background:var(--bg)}
#hs-loader .hsl-fundo::before,#hs-loader .hsl-fundo::after{content:"";position:absolute;width:120vmax;height:120vmax;border-radius:50%;will-change:transform}
#hs-loader .hsl-fundo::before{left:-40vmax;bottom:-55vmax;background:radial-gradient(circle closest-side,var(--cor-luz) 0%,transparent 68%);opacity:.95;animation:hsl-aurora-luz var(--velocidade-fundo) ease-in-out infinite alternate}
#hs-loader .hsl-fundo::after{right:-55vmax;top:-60vmax;background:radial-gradient(circle closest-side,var(--cor-sombra) 0%,transparent 70%);opacity:.75;animation:hsl-aurora-sombra calc(var(--velocidade-fundo)*1.35) ease-in-out infinite alternate}
@keyframes hsl-aurora-luz{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14vw,-10vh,0) scale(1.18)}}
@keyframes hsl-aurora-sombra{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-8vw,8vh,0) scale(.92)}}

/* pecas: ficam em (0,0) e viajam por transform (posicoes vem do app.js) */
#hs-loader .hsl-peca{position:absolute;left:0;top:0;opacity:0;transform-origin:0 0;will-change:transform,opacity}
#hs-loader .hsl-peca svg{display:block;width:100%;height:100%}
#hs-loader .hsl-peca path{fill:var(--cor-simbolo)}
#hs-loader .hsl-h  {width:calc(var(--tamanho-logo-hero)*.469563);height:calc(var(--tamanho-logo-hero)*.776898)}
#hs-loader .hsl-sup{width:calc(var(--tamanho-logo-hero)*.220213);height:calc(var(--tamanho-logo-hero)*.418710)}
#hs-loader .hsl-inf{width:calc(var(--tamanho-logo-hero)*.209533);height:calc(var(--tamanho-logo-hero)*.384300)}

/* coreografia (classe .hsl-play e ligada pelo app.js apos calcular posicoes) */
#hs-loader.hsl-play .hsl-h{animation:hsl-entra-h calc(var(--duracao-montagem)*.62) var(--curva-entrada) var(--espera-inicial) both,hsl-vai-h calc(var(--duracao-viagem)*.90) var(--curva-viagem) calc(var(--_t-viagem) + var(--duracao-viagem)*.10) forwards}
#hs-loader.hsl-play .hsl-sup{animation:hsl-entra-sup calc(var(--duracao-montagem)*.55) var(--curva-entrada) calc(var(--espera-inicial) + var(--duracao-montagem)*.25) both,hsl-vai-sup calc(var(--duracao-viagem)*.85) var(--curva-viagem) var(--_t-viagem) forwards}
#hs-loader.hsl-play .hsl-inf{animation:hsl-entra-inf calc(var(--duracao-montagem)*.55) var(--curva-entrada) calc(var(--espera-inicial) + var(--duracao-montagem)*.45) both,hsl-vai-lasca calc(var(--duracao-viagem)*.95) var(--curva-viagem) calc(var(--_t-viagem) + var(--duracao-viagem)*.05) forwards}

@keyframes hsl-entra-h{from{opacity:0;transform:translate3d(var(--_h-x),calc(var(--_h-y) + 18vh),0) scale(.92)}30%{opacity:1}to{opacity:1;transform:translate3d(var(--_h-x),var(--_h-y),0) scale(1)}}
@keyframes hsl-entra-sup{from{opacity:0;transform:translate3d(calc(var(--_sup-x) + 13vw),calc(var(--_sup-y) - 26vh),0) rotate(14deg)}30%{opacity:1}to{opacity:1;transform:translate3d(var(--_sup-x),var(--_sup-y),0) rotate(0deg)}}
@keyframes hsl-entra-inf{from{opacity:0;transform:translate3d(calc(var(--_inf-x) + 10vw),calc(var(--_inf-y) + 20vh),0) rotate(-12deg)}30%{opacity:1}to{opacity:1;transform:translate3d(var(--_inf-x),var(--_inf-y),0) rotate(0deg)}}
@keyframes hsl-vai-h{from{transform:translate3d(var(--_h-x),var(--_h-y),0) scale(1)}to{transform:translate3d(var(--_h-fim-x),var(--_h-fim-y),0) scale(var(--_escala-fim))}}
@keyframes hsl-vai-sup{from{transform:translate3d(var(--_sup-x),var(--_sup-y),0) scale(1)}to{transform:translate3d(var(--_sup-fim-x),var(--_sup-fim-y),0) scale(var(--_escala-fim))}}
/* a lasca espelha NO CAMINHO: scaleX passa por ~0 (vira uma "lamina", igual ao
   render) e pousa invertida, identica ao cursor-pet */
@keyframes hsl-vai-lasca{
  from{transform:translate3d(var(--_inf-x),var(--_inf-y),0) scale(1,1) rotate(0deg);filter:drop-shadow(0 0 0 transparent)}
  55%{transform:translate3d(calc((var(--_inf-x) + var(--_lasca-fim-x))/2 + 4vw),calc((var(--_inf-y) + var(--_lasca-fim-y))/2 - 3vh),0) scale(calc((1 + var(--_escala-lasca))/2*.12*var(--lasca-espelho)),calc((1 + var(--_escala-lasca))/2)) rotate(-18deg)}
  to{transform:translate3d(var(--_lasca-fim-x),var(--_lasca-fim-y),0) scale(calc(var(--_escala-lasca)*var(--lasca-espelho)),var(--_escala-lasca)) rotate(0deg);filter:drop-shadow(3px 6px 9px var(--cor-sombra-lasca))}
  /* ^ 3px/6px/9px parecem grandes, mas a peca esta ENCOLHIDA (~1/3): na tela
     vira ~(-1px 2px 3px), identico ao drop-shadow do #hs-cursor svg */
}

/* reduzir movimento (a regra global ja mata as animacoes; aqui so garante
   o fallback do brief: roxo solido + simbolo estatico e visivel no centro) */
@media (prefers-reduced-motion:reduce){
  #hs-loader .hsl-peca{opacity:1}
  #hs-loader .hsl-h  {transform:translate3d(var(--_h-x),var(--_h-y),0)}
  #hs-loader .hsl-sup{transform:translate3d(var(--_sup-x),var(--_sup-y),0)}
  #hs-loader .hsl-inf{transform:translate3d(var(--_inf-x),var(--_inf-y),0)}
}

/* sonda invisivel: o app.js le aqui os valores do painel ja em pixels */
#hsl-sonda{position:fixed;visibility:hidden;pointer-events:none;
  height:var(--logo-final-altura);top:var(--logo-final-topo);
  left:var(--lasca-final-x);width:var(--lasca-final-y);
  padding-top:var(--tamanho-lasca);padding-left:var(--hud-vao);
  margin-left:var(--hud-esquerda-estreita)}

/* cursor pet (H) — 260710: aparece INSTANTANEO no reveal (sem fade) — a lasca do
   loader nativo ja esta pousada exatamente ali, entao a troca e invisivel */
/* 260723 largura 22.9px = aspect real da lasca S INFERIOR (250.322/459.112) a 42px de
   altura — casa exatamente com --tamanho-lasca do loader, sem distorcer a forma */
#hs-cursor{position:fixed;z-index:9999;width:22.9px;height:42px;pointer-events:none;opacity:0;transform:translate(-50%,0);transform-origin:50% 0;transition:transform .09s,filter .09s}
#hs-cursor.on{opacity:1}
#hs-cursor svg{width:100%;height:100%;display:block;transform:scaleX(-1);filter:drop-shadow(1px 2px 3px #240854)}
#hs-cursor.hot{transform:translate(-50%,0) scale(1.6);filter:drop-shadow(0 0 6px #240854)}
@media (pointer:coarse){#hs-cursor{display:none} body.hs-front{cursor:auto}}

/* HS fixo + fast-travel */
/* HUD: na margem esquerda do grid, gap = calha (32px), ~meio do terco superior */
#hs-nav{position:fixed;top:16.5vh;right:calc((100vw + 1320px) / 2 + 8px);left:auto;z-index:8000}
@media (max-width:1400px){#hs-nav{right:auto;left:16px}}
#hs-logo{display:block}
#hs-logo img,#hs-logo svg.hs-hud-svg{height:clamp(76px,6.4vw,128px);width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
#hs-fast{position:absolute;top:calc(100% + 8px);right:0;width:200px;border-radius:12px;background:rgba(20,10,45,.92);border:1px solid var(--line);
  overflow:hidden;max-height:0;opacity:0;transform:translateY(-6px);transition:.28s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(10px)}
@media (max-width:1400px){#hs-fast{right:auto;left:0}}
#hs-nav:hover #hs-fast,#hs-nav:focus-within #hs-fast{max-height:340px;opacity:1;transform:none}
#hs-fast a{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:14px;border-bottom:1px solid var(--line)}
#hs-fast a:last-child{border-bottom:0}
#hs-fast a:hover{background:linear-gradient(90deg,var(--magenta),transparent)}
#hs-fast a span:last-child{font-family:ui-monospace,monospace;font-size:11px;opacity:.5}

/* ===== Esconde o chrome do GeneratePress só na home (nao afeta blocos Kadence) ===== */
body.hs-front .site-header,body.hs-front #masthead,body.hs-front .site-footer,
body.hs-front .footer-widgets,body.hs-front .generate-back-to-top,body.hs-front .entry-header{display:none!important}
body.hs-front #page,body.hs-front .site-content,body.hs-front #content{padding:0!important;margin:0!important}
body.hs-front .container,body.hs-front .site-content .container,body.hs-front .inside-article{max-width:100%!important;padding:0!important;margin:0!important}
body.hs-front .entry-content{max-width:none!important;margin:0!important}
/* deixa os wrappers do GP transparentes na home, pro fundo roxo (body) aparecer atras dos blocos */
body.hs-front #page,body.hs-front .site,body.hs-front #content,body.hs-front .site-content,
body.hs-front .content-area,body.hs-front main,body.hs-front article,
body.hs-front .entry-content,body.hs-front .inside-article{background:transparent!important}


/* ===== overlay de grid (tecla G) ===== */
#hs-grid-overlay{position:fixed;inset:0;z-index:7000;pointer-events:none;display:none}
body.hs-grid-on #hs-grid-overlay{display:block}
.hs-go-wrap{max-width:1320px;height:100%;margin:0 auto;padding:0 1.8%;display:grid;grid-template-columns:repeat(12,1fr);gap:2.4%;outline:1px solid rgba(95,208,230,.32);outline-offset:-1px}
.hs-go-wrap span{background:rgba(95,208,230,.09);outline:1px solid rgba(95,208,230,.40)}
#hs-grid-toggle{position:fixed;left:24px;bottom:18px;z-index:7001;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1px;
  color:rgba(255,255,255,.85);background:rgba(20,10,45,.85);border:1px solid rgba(95,208,230,.55);padding:6px 11px;border-radius:6px;backdrop-filter:blur(6px)}
body:not(.hs-grid-on) #hs-grid-toggle{color:rgba(255,255,255,.5);border-color:var(--line)}
@media (max-width:980px){.hs-go-wrap{grid-template-columns:repeat(6,1fr)}}
@media (max-width:560px){.hs-go-wrap{grid-template-columns:repeat(3,1fr)}}


/* fast-travel vindo do Menu do WordPress (Aparencia -> Menus) */
#hs-fast{counter-reset:hsnav}
#hs-fast ul{list-style:none;margin:0;padding:0}
#hs-fast li{counter-increment:hsnav}
#hs-fast li:last-child a{border-bottom:0}
#hs-fast a::after{content:counter(hsnav,decimal-leading-zero);font-family:ui-monospace,monospace;font-size:11px;opacity:.5}


/* 260709: pop elastico do cursor removido (surge so com o fade de 2s, sem escala) */


/* ===== 260703: fundo animado do roxo — loop seamless (refs Pinterest: aurora fluida + halftone dots) =====
   Mecânica de front (sem equivalente em builder). Canvas + camada de pontos injetados pelo app.js.
   Só na home (.hs-front). Reduced-motion: app.js não injeta nada → roxo sólido. */
#hs-bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;
  filter:blur(34px) saturate(1.05)}
#hs-bg-dots{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.5px);
  background-size:22px 22px;mix-blend-mode:overlay;opacity:.45}