/* =========================================================================
   GUINHO TATTOO — HERO ANIMADO (módulo de integração, prefixo gh-) (transformação base → ultra)
   Layout: cena de anime em tela cheia — navbar-adesivo no topo, logo +
   legenda + CTA à esquerda, personagem à direita; no mobile tudo empilha
   em volta do personagem centralizado.
   ========================================================================= */

@font-face {
  font-family: "Comic Neue";
  src: url("fonts/comic-neue-latin-700-italic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Comic Neue";
  src: url("fonts/comic-neue-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bangers";
  src: url("fonts/bangers-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

.gh-hero {
  /* tinta e papel (fixos nos dois estados) */
  --ink: #120a1c;               /* preto de impressão dos quadrinhos */
  --paper: #fffaf2;             /* margem branca do adesivo */
  --night: #0b0614;             /* fundo atrás da cena */

  /* estado BASE — paleta clássica (amarelo legenda + vermelho) */
  --sticker: #f2c21b;           /* amarelo legenda anos 90 (ref. imagem 8) */
  --sticker-dot: rgb(150 92 0 / .13);
  --accent: #e2261b;            /* vermelho das estrelas */
  --accent-ink: #fffaf2;
  --shadow: rgb(18 10 28 / .45);
  --fog: rgb(201 150 105 / .38);
  --halftone: .06;
  --glass: rgb(18 26 66 / .26);             /* botão de vidro */
  --glass-panel: rgb(12 22 64 / .34);       /* painel do menu */
  --glass-line: rgb(255 255 255 / .34);
  --glass-hover: rgb(255 255 255 / .12);

  --font-letter: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;
  --font-display: "Bangers", Impact, "Arial Black", sans-serif;

  --flip-ms: 460ms;
  color-scheme: dark;
}

/* estado ULTRA — paleta da transformação (ref. imagem 2) */
.gh-hero[data-state="ultra"] {
  --sticker: #cf9cff;
  --sticker-dot: rgb(70 10 120 / .16);
  --accent: #b42be0;
  --accent-ink: #fff4ff;
  --shadow: rgb(46 8 82 / .6);
  --fog: rgb(52 12 86 / .62);
  --halftone: .2;
  --glass: rgb(58 12 96 / .3);
  --glass-panel: rgb(36 6 64 / .4);
  --glass-line: rgb(236 206 255 / .36);
  --glass-hover: rgb(230 190 255 / .14);
}

/* =========================================================================
   ISOLAMENTO — impede que estilos globais do site vazem para dentro do hero
   (fica antes das regras do módulo: em empate de especificidade, o módulo vence)
   ========================================================================= */
.gh-hero { margin: 0; padding: 0; border: 0; max-width: none; font-size: 16px; text-align: left; line-height: normal; letter-spacing: normal; text-transform: none; text-shadow: none; word-spacing: normal; }
.gh-hero h1, .gh-hero p, .gh-hero ul, .gh-hero li, .gh-hero figure { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.gh-hero h1::before, .gh-hero h1::after, .gh-hero p::before, .gh-hero p::after, .gh-hero li::before, .gh-hero li::after { content: none; }
.gh-hero ul { list-style: none; }
.gh-hero :where(a) { color: inherit; text-decoration: none; background: none; }
.gh-hero :where(a):hover, .gh-hero :where(a):focus, .gh-hero :where(a):visited { text-decoration: none; background: none; }
.gh-hero :where(button) { appearance: none; -webkit-appearance: none; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; font: inherit; color: inherit; width: auto; height: auto; min-width: 0; min-height: 0; text-transform: none; letter-spacing: normal; line-height: normal; }
.gh-hero :where(button):hover, .gh-hero :where(button):focus, .gh-hero :where(button):active { background: none; border: 0; box-shadow: none; }
.gh-hero :where(img, svg, canvas) { border: 0; border-radius: 0; box-shadow: none; }

/* ---------- base ---------- */
.gh-hero, .gh-hero * { box-sizing: border-box; }
.gh-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-letter);
  --px: 0; --py: 0;             /* parallax do mouse (-1..1), setado no JS */
  --ox: 70%; --oy: 40%;         /* origem da onda de choque, setado no JS */
}
.gh-hero img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.gh-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- PALCO (tudo que treme e recebe o zoom de câmera) ---------- */
.gh-hero__stage {
  position: absolute; inset: 0;
  transform-origin: var(--ox) var(--oy);
  will-change: transform;
}
.gh-scene, .gh-scene__reveal { position: absolute; inset: -3%; translate: calc(var(--px) * -8px) calc(var(--py) * -6px); transition: translate .9s cubic-bezier(.2,.7,.2,1); }
.gh-scene__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
  animation: gh-scene-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
.gh-scene__reveal { z-index: 1; clip-path: circle(0px at 50% 50%); }
.gh-hero[data-state="ultra"] .gh-scene__reveal { clip-path: none; }
@keyframes gh-scene-drift { from { transform: scale(1); } to { transform: scale(1.045) translate(-.6%, -.4%); } }

/* eco gigante do rosto (fantasma em retícula, só no ultra) */
.gh-echo {
  position: absolute; height: 245%; left: 26%; top: -36%;
  opacity: 0; mix-blend-mode: screen; filter: saturate(1.15);
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 62%), radial-gradient(ellipse 34% 26% at 37% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(circle, #000 52%, transparent 62%), radial-gradient(ellipse 34% 26% at 37% 30%, #000 30%, transparent 75%);
  -webkit-mask-size: 6px 6px, 100% 100%;
          mask-size: 6px 6px, 100% 100%;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  transition: opacity 1.4s ease .9s;
}
.gh-hero[data-state="ultra"] .gh-echo { opacity: .2; }

/* escurecimento da carga de ki */
.gh-hero__shade {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at var(--ox) var(--oy), rgb(40 6 70 / 0) 18%, rgb(36 6 64 / .55) 62%, rgb(14 2 28 / .85) 100%);
}

.gh-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gh-fx--back { z-index: 3; }
.gh-fx--front { z-index: 5; }

/* ---------- PERSONAGEM ---------- */
.gh-char {
  position: absolute; z-index: 4;
  translate: calc(var(--px) * 10px) calc(var(--py) * 6px);
  transition: translate .9s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
/* forma base: em pé, canvas 2:3, cortada nas coxas */
.gh-char--base {
  height: min(146%, 84vw); aspect-ratio: 2 / 3;
  right: -3%; top: 2%;
  --o-x: 47%; --o-y: 34%;          /* ponto de poder (peito) — espelhe CFG.powerOrigin */
  --pad-x: 11.72%; --pad-y: 7.81%; /* margem da aura = 120px / largura e altura do canvas */
}
/* forma ultra: agachada e mais larga, apoiada no chão */
.gh-char--ultra {
  height: min(92%, 58vw); aspect-ratio: 1087 / 1288;
  right: 3%; bottom: -4%;
  --o-x: 48%; --o-y: 47%;          /* espelhe CFG.ultra.powerOrigin */
  --pad-x: 11.04%; --pad-y: 9.32%;
}
.gh-char__float { position: absolute; inset: 0; animation: gh-bob 5.2s ease-in-out infinite alternate; }
@keyframes gh-bob { from { transform: translateY(0); } to { transform: translateY(-1.1%); } }

.gh-char__form { position: absolute; inset: 0; }
.gh-char__form--ultra { opacity: 0; }
.gh-hero[data-state="ultra"] .gh-char__form--base { opacity: 0; }
.gh-hero[data-state="ultra"] .gh-char__form--ultra { opacity: 1; }

.gh-char__img, .gh-char__luz { position: absolute; inset: 0; width: 100%; height: 100%; }
.gh-char__aura {
  position: absolute; left: calc(var(--pad-x) * -1); top: calc(var(--pad-y) * -1);
  width: calc(100% + var(--pad-x) * 2); height: calc(100% + var(--pad-y) * 2);
  opacity: 0; transform-origin: var(--o-x) var(--o-y);
  mix-blend-mode: screen;
}
.gh-char__luz { opacity: 0; transform-origin: var(--o-x) var(--o-y); }
.gh-hero[data-phase="ultra"] .gh-char__aura--ultra { animation: gh-aura-pulse 1.7s ease-in-out infinite alternate; }
@keyframes gh-aura-pulse {
  from { opacity: .5; transform: scale(1); }
  to   { opacity: .95; transform: scale(1.03); }
}

/* névoa no chão, funde as pernas com a cena */
.gh-hero__fog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 6; pointer-events: none;
  background: linear-gradient(to top, var(--fog), transparent);
  transition: background .9s ease .25s;
}

/* retícula de impressão (forte no ultra, como a imagem 2) */
.gh-halftone {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background-image: radial-gradient(circle, rgb(18 4 34 / .9) 0 1px, transparent 1.6px);
  background-size: 5px 5px;
  opacity: var(--halftone);
  transition: opacity .8s ease .2s;
}

/* ---------- ESFERAS ---------- */
.gh-sphere {
  position: absolute; z-index: 3; width: calc(var(--s, 56px) * 1.32); aspect-ratio: 1; margin: calc(var(--s, 56px) * -.16);
  translate: calc(var(--px) * var(--depth, 14px)) calc(var(--py) * var(--depth, 14px));
  transition: translate .9s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.gh-sphere img { width: 100%; height: 100%; animation: gh-sphere-float var(--dur, 6s) ease-in-out var(--delay, 0s) infinite alternate; }
.gh-sphere--1 { left: 20%; top: 23%; --s: clamp(38px, 4vw, 62px); --dur: 5.5s; }
.gh-sphere--2 { left: 40%; top: 71%; --s: clamp(44px, 5.2vw, 84px); --dur: 6.8s; --delay: -2s; --depth: 20px; }
.gh-sphere--3 { right: 11%; bottom: -3%; --s: clamp(86px, 10vw, 160px); --dur: 7.4s; --delay: -1s; --depth: 30px; z-index: 6; }
.gh-sphere--4 { left: 56%; top: 10%; --s: clamp(24px, 2.3vw, 36px); --dur: 8s; --delay: -4s; --depth: 6px; opacity: .85; }
.gh-sphere--4 img { filter: blur(1.2px); }
@keyframes gh-sphere-float {
  from { transform: translateY(-6%) rotate(-4deg); }
  to   { transform: translateY(6%) rotate(4deg); }
}
.gh-hero[data-phase="charge"] .gh-sphere { animation: gh-sphere-tremble 90ms steps(2) infinite; }
@keyframes gh-sphere-tremble { 50% { transform: translate(2px, -3px); } }
.gh-hero[data-state="ultra"] .gh-sphere { animation: gh-knock 1s cubic-bezier(.2,.8,.3,1) var(--wave-delay, 0ms) both; }
@keyframes gh-knock {
  0% { transform: none; }
  22% { transform: translate(var(--kx, 0px), var(--ky, 0px)) rotate(var(--kr, 0deg)); }
  100% { transform: none; }
}

/* ---------- FLASH ---------- */
.gh-hero__flash {
  position: absolute; inset: 0; z-index: 20; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at var(--ox) var(--oy), #fff 0%, #fbf3ff 30%, #dcb6ff 100%);
}
/* impact frame: negativo P&B (1 frame de mangá) */
.gh-hero.gh-is-negative .gh-hero__stage,
.gh-hero.gh-is-negative .gh-hero__ui { filter: grayscale(1) invert(1) contrast(2.6) brightness(1.1); }

/* =========================================================================
   UI
   ========================================================================= */
.gh-hero__ui {
  position: absolute; inset: 0; z-index: 10;
  --bar-h: 68px;
  display: grid; grid-template-rows: 1fr;
  padding-left: max(clamp(42px, 4.2vw, 68px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(42px, 4.2vw, 68px), env(safe-area-inset-right, 0px));
  padding-block: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 12px) max(18px, env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.gh-hero__ui a, .gh-hero__ui button { pointer-events: auto; }

.gh-brand {
  display: block; flex: none; width: 46px; height: 46px; border-radius: 50%;
  box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 4.5px var(--ink), 0 6px 16px rgb(0 0 0 / .35);
  transition: transform .25s cubic-bezier(.3,1.8,.5,1);
}
.gh-brand__stack { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.gh-brand__img { width: 100%; height: 100%; }
.gh-brand:hover { transform: scale(1.08); }
.gh-brand:focus-visible { outline: 2px solid rgb(255 255 255 / .85); outline-offset: 6px; }
.gh-hero__logo-stack { display: grid; }
.gh-hero__logo-stack > img { grid-area: 1 / 1; width: 100%; height: auto; }

/* ---- adesivo-legenda (componente base: navbar, legenda, CTA, botões) ---- */
.gh-sticker {
  --rot: 0deg;
  display: block;
  position: relative;
  filter: drop-shadow(3px 5px 0 var(--shadow));
  transition: filter .3s ease;
}
.gh-sticker__body {
  display: block;
  position: relative;
  background: var(--paper);
  padding: 5px;
  transform: rotate(var(--rot));
  clip-path: polygon(0 0, calc(100% - var(--peel, 0px)) 0, 100% var(--peel, 0px), 100% 100%, 0 100%);
}
/* canto descolando */
.gh-sticker--peel { --peel: 20px; }
.gh-sticker--peel .gh-sticker__body::after {
  content: ""; position: absolute; top: 0; right: 0; width: var(--peel); height: var(--peel);
  background: linear-gradient(225deg, transparent 49%, #d9d2cf 50%, #fff 78%);
  filter: drop-shadow(-2px 2px 1px rgb(0 0 0 / .25));
}
.gh-sticker__box {
  position: relative;
  background-color: var(--sticker);
  background-image: radial-gradient(circle, var(--sticker-dot) 0 .9px, transparent 1.3px);
  background-size: 4px 4px;
  border: 2.5px solid var(--ink);
  color: var(--ink);
  transition: background-color 0s linear calc(var(--wave-delay, 0ms) + var(--flip-ms) / 2);
}

/* virada do adesivo quando a onda de choque passa */
.gh-hero[data-state="ultra"] [data-wave] { animation: gh-flip var(--flip-ms) cubic-bezier(.45,0,.2,1) var(--wave-delay, 0ms) both; }
@keyframes gh-flip {
  0%   { transform: perspective(700px) rotateX(0); }
  49%  { transform: perspective(700px) rotateX(88deg) scale(1.04); }
  51%  { transform: perspective(700px) rotateX(-88deg) scale(1.04); }
  80%  { transform: perspective(700px) rotateX(10deg); }
  100% { transform: perspective(700px) rotateX(0); }
}
.gh-swap-ultra { opacity: 0; transition: opacity 0s linear calc(var(--wave-delay, 0ms) + var(--flip-ms) / 2); }
.gh-swap-base { transition: opacity 0s linear calc(var(--wave-delay, 0ms) + var(--flip-ms) / 2); }
.gh-hero[data-state="ultra"] .gh-swap-ultra { opacity: 1; }
.gh-hero[data-state="ultra"] .gh-swap-base { opacity: 0; }

/* ---- NAVBAR (só os elementos: logo + sanduíche de vidro) ---- */
.gh-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(clamp(42px, 4.2vw, 68px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(42px, 4.2vw, 68px), env(safe-area-inset-right, 0px));
  pointer-events: auto;
}
.gh-hero.gh-is-intro .gh-topbar { animation: gh-bar-in .8s cubic-bezier(.2,.8,.2,1) .35s both; }
@keyframes gh-bar-in { from { opacity: 0; transform: translateY(-100%); } }

.gh-menu { position: relative; display: flex; align-items: center; }
.gh-menu__btn {
  border: 0; padding: 0; background: none; cursor: pointer;
  border-radius: 11px; color: #fff;
  transition: transform .2s cubic-bezier(.3,1.8,.5,1);
}
.gh-menu__glass {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background-color: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
          backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 22px rgb(0 0 0 / .28);
  transition: background-color 0s linear calc(var(--wave-delay, 0ms) + var(--flip-ms) / 2),
              border-color 0s linear calc(var(--wave-delay, 0ms) + var(--flip-ms) / 2);
}
.gh-menu__lines { width: 19px; height: 14px; display: grid; align-content: space-between; justify-items: end; }
.gh-menu__lines i {
  display: block; height: 2.5px; border-radius: 3px; background: currentColor;
  box-shadow: 0 1px 2px rgb(0 0 0 / .35);
  transition: width .25s ease, transform .3s cubic-bezier(.3,1.4,.5,1), opacity .2s ease;
}
.gh-menu__lines i:nth-child(1) { width: 19px; }
.gh-menu__lines i:nth-child(2) { width: 12px; }
.gh-menu__lines i:nth-child(3) { width: 15px; }
.gh-menu__btn:hover { transform: scale(1.06); }
.gh-menu__btn:hover .gh-menu__glass { background-color: var(--glass-hover); transition-delay: 0s; }
.gh-menu__btn:hover .gh-menu__lines i { width: 19px; }
.gh-menu__btn:active { transform: scale(.95); }
.gh-menu__btn:focus-visible { outline: 2px solid rgb(255 255 255 / .8); outline-offset: 3px; }
.gh-menu.gh-is-open .gh-menu__lines i { width: 19px; }
.gh-menu.gh-is-open .gh-menu__lines i:nth-child(1) { transform: translateY(5.75px) rotate(45deg); }
.gh-menu.gh-is-open .gh-menu__lines i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.gh-menu.gh-is-open .gh-menu__lines i:nth-child(3) { transform: translateY(-5.75px) rotate(-45deg); }

.gh-menu__panel {
  position: absolute; top: calc(100% + 22px); right: 0;
  width: min(300px, calc(100vw - 32px));
  padding: 10px; border-radius: 20px;
  background-color: var(--glass-panel);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
          backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 18px 40px rgb(0 0 0 / .32);
  opacity: 0; visibility: hidden;
  transform: translateY(-12px) scale(.95); transform-origin: top right;
  transition: opacity .22s ease, transform .34s cubic-bezier(.2,1.25,.3,1), visibility 0s linear .34s;
}
.gh-menu.gh-is-open .gh-menu__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .34s cubic-bezier(.2,1.25,.3,1); }
.gh-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gh-menu__list li { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .3s cubic-bezier(.2,1.2,.3,1); }
.gh-menu.gh-is-open .gh-menu__list li { opacity: 1; transform: none; }
.gh-menu.gh-is-open .gh-menu__list li:nth-child(1) { transition-delay: .04s; }
.gh-menu.gh-is-open .gh-menu__list li:nth-child(2) { transition-delay: .08s; }
.gh-menu.gh-is-open .gh-menu__list li:nth-child(3) { transition-delay: .12s; }
.gh-menu.gh-is-open .gh-menu__list li:nth-child(4) { transition-delay: .16s; }
.gh-menu.gh-is-open .gh-menu__list li:nth-child(5) { transition-delay: .2s; }
.gh-menu__link {
  display: block; padding: 12px 16px 9px; border-radius: 14px;
  color: #fff; text-decoration: none;
  font: 400 clamp(22px, 1.7vw, 27px)/1 var(--font-display); letter-spacing: .05em;
  text-shadow: 2px 2px 0 rgb(18 10 28 / .55);
  transition: background-color .2s ease, transform .2s ease;
}
.gh-menu__link:hover { background-color: var(--glass-hover); transform: translateX(4px); }
.gh-menu__link[aria-current="page"] { background-color: var(--glass-hover); box-shadow: inset 3px 0 0 var(--accent); }
.gh-menu__link:focus-visible { outline: 1.5px solid rgb(255 255 255 / .6); outline-offset: -2px; }

/* ---- FAIXAS LATERAIS (texto vertical nas bordas) ---- */
.gh-rail {
  position: absolute; top: 50%; z-index: 12; margin: 0;
  translate: 0 -50%;
  writing-mode: vertical-rl;
  display: flex; gap: 1.7em;
  font: 400 clamp(13px, min(1.4vw, 2.6vh), 23px)/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: #fff;
  /* contorno + sombra dura de quadrinho: legível em qualquer fundo */
  --o: 2px;
  text-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 var(--ink), var(--o) calc(var(--o) * -1) 0 var(--ink),
    calc(var(--o) * -1) var(--o) 0 var(--ink), var(--o) var(--o) 0 var(--ink),
    0 calc(var(--o) * -1) 0 var(--ink), 0 var(--o) 0 var(--ink), calc(var(--o) * -1) 0 0 var(--ink), var(--o) 0 0 var(--ink),
    calc(var(--o) * 2) calc(var(--o) * 2) 0 var(--ink);
  pointer-events: none; user-select: none;
}
/* escurece levemente as bordas atrás das faixas */
.gh-hero__ui::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(10 4 22 / .5), rgb(10 4 22 / 0) clamp(70px, 7vw, 120px), rgb(10 4 22 / 0) calc(100% - clamp(70px, 7vw, 120px)), rgb(10 4 22 / .5));
}
.gh-rail--left { left: max(14px, env(safe-area-inset-left, 0px)); }
.gh-rail--right { right: max(14px, env(safe-area-inset-right, 0px)); }
.gh-hero.gh-is-intro .gh-rail { animation: gh-rail-in .9s cubic-bezier(.2,.8,.2,1) 1.3s both; }
@keyframes gh-rail-in { from { opacity: 0; translate: 0 calc(-50% + 24px); } }

/* ---- CONTEÚDO ESQUERDO ---- */
.gh-hero__copy {
  align-self: center;
  width: min(42vw, 640px);
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 2vh, 24px);
  margin-top: -3vh;
}
.gh-hero__title { margin: 0; width: 100%; rotate: -3deg; position: relative; container-type: inline-size; }

/* ---- SELO "20X PREMIADO" — explosão de quadrinho presa na logo ---- */
.gh-award {
  position: absolute; left: 3cqw; top: -6cqw; z-index: 2;
  width: 21cqw; aspect-ratio: 1; rotate: -12deg;
}
.gh-award__wiggle { display: block; width: 100%; height: 100%; }
.gh-hero:not(.gh-is-intro):not(.gh-is-loading) .gh-award__wiggle { animation: gh-award-wiggle 5s ease-in-out 2.5s infinite; }
@keyframes gh-award-wiggle {
  0%, 86%, 100% { transform: none; }
  90% { transform: rotate(-7deg) scale(1.08); }
  94% { transform: rotate(5deg) scale(1.04); }
  97% { transform: rotate(-2deg); }
}
.gh-award__flip {
  position: relative; display: grid; place-content: center; justify-items: center;
  width: 100%; height: 100%;
  filter: drop-shadow(2px 4px 0 var(--shadow));
}
.gh-award__burst { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gh-award__edge { fill: var(--paper); stroke: var(--paper); stroke-width: 9; stroke-linejoin: round; }
.gh-award__fill {
  fill: var(--accent); stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round;
  transition: fill 0s linear calc(var(--wave-delay, 0ms) + var(--flip-ms) / 2);
}
.gh-award__num, .gh-award__txt {
  position: relative; display: block; line-height: .9; text-transform: uppercase;
  font-family: var(--font-display); letter-spacing: .02em;
  --o: max(1.5px, .45cqw);
  text-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 var(--ink), var(--o) calc(var(--o) * -1) 0 var(--ink),
    calc(var(--o) * -1) var(--o) 0 var(--ink), var(--o) var(--o) 0 var(--ink),
    0 calc(var(--o) * -1) 0 var(--ink), 0 var(--o) 0 var(--ink), calc(var(--o) * -1) 0 0 var(--ink), var(--o) 0 0 var(--ink);
}
.gh-award__num {
  font-size: 8.6cqw; color: var(--sticker);
  transition: color 0s linear calc(var(--wave-delay, 0ms) + var(--flip-ms) / 2);
}
.gh-award__txt { font-size: max(8px, 2.8cqw); color: var(--paper); margin-top: .1em; letter-spacing: .06em; }

/* ---- LEGENDA DE LOCAL "BELÉM-PA" ---- */
.gh-place { position: absolute; right: 1cqw; bottom: .5cqw; z-index: 2; rotate: 2deg; }
.gh-place .gh-sticker { filter: drop-shadow(2px 3px 0 var(--shadow)); }
.gh-place .gh-sticker__body { padding: 3px; }
.gh-place__box {
  display: flex; align-items: center; gap: .3em;
  padding: .32em .65em .26em .45em; border-width: 2px;
  font: italic 700 max(10px, 3cqw)/1 var(--font-letter);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.gh-place__pin {
  width: 1.15em; height: 1.15em; flex: none; fill: var(--accent);
  stroke: var(--ink); stroke-width: 1.4;
  transition: fill 0s linear calc(var(--wave-delay, 0ms) + var(--flip-ms) / 2);
}
.gh-hero__slot { display: none; }
.gh-hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 2vh, 22px); padding-left: 4%; }

.gh-caption .gh-sticker__body { --rot: -1.6deg; }
.gh-caption__box { display: grid; padding: 10px 16px 9px; max-width: 34ch; }
.gh-caption__text {
  grid-area: 1 / 1; margin: 0;
  font: italic 700 clamp(14px, 1.2vw, 18px)/1.15 var(--font-letter);
  text-transform: uppercase; letter-spacing: .02em;
}
.gh-caption__text b { font-size: 1.28em; -webkit-text-stroke: .5px var(--ink); }

.gh-cta { text-decoration: none; display: inline-block; }
.gh-cta .gh-sticker__body { --rot: 1.4deg; }
.gh-cta__box {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 22px 8px;
  background-color: var(--accent); background-image: none;
  color: var(--accent-ink);
  font: 400 clamp(22px, 1.9vw, 30px)/1 var(--font-display);
  letter-spacing: .06em; white-space: nowrap;
  text-shadow: 2px 2px 0 var(--ink);
}
.gh-cta__arrow { width: 1em; height: 1em; flex: none; }
.gh-cta { transition: transform .2s cubic-bezier(.3,1.8,.5,1), filter .2s ease; }
.gh-cta:hover { transform: translateY(-3px) rotate(-1.5deg) scale(1.03); filter: drop-shadow(6px 9px 0 var(--shadow)); }
.gh-cta:active { transform: translateY(2px); filter: drop-shadow(1px 2px 0 var(--shadow)); }
.gh-cta:focus-visible { outline: 3px dashed var(--paper); outline-offset: 6px; }

/* ---- REPETIR ---- */
.gh-replay {
  position: absolute; z-index: 12; left: max(18px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  border: 0; padding: 0; background: none; cursor: pointer; font: inherit;
  opacity: 0; transition: opacity .4s ease, transform .2s cubic-bezier(.3,1.8,.5,1);
  pointer-events: none;
}
.gh-hero[data-phase="ultra"] .gh-replay, .gh-hero.gh-is-reduced .gh-replay { opacity: 1; pointer-events: auto; }
.gh-replay .gh-sticker__body { --rot: -2deg; padding: 4px; }
.gh-replay__box { padding: 6px 12px 5px; font: italic 700 13px/1 var(--font-letter); text-transform: uppercase; letter-spacing: .04em; display: flex; gap: 6px; align-items: center; }
.gh-replay__box svg { width: 14px; height: 14px; flex: none; }
.gh-replay:hover { transform: rotate(-3deg) scale(1.05); }
.gh-replay:focus-visible { outline: 2.5px dashed var(--paper); outline-offset: 4px; }
.gh-replay[hidden] { display: none; }

/* =========================================================================
   ENTRADA (intro)
   ========================================================================= */
.gh-hero.gh-is-loading .gh-hero__stage, .gh-hero.gh-is-loading .gh-hero__ui { opacity: 0; }
/* (cada entrada anima um elemento diferente do loop contínuo, para nada "pular" quando a classe sai) */
.gh-hero.gh-is-intro .gh-scene--base { animation: gh-scene-in 1.5s cubic-bezier(.2,.7,.2,1) both; }
.gh-hero.gh-is-intro .gh-char { animation: gh-char-in 1.15s cubic-bezier(.2,.8,.2,1) .2s both; }
.gh-hero.gh-is-intro .gh-hero__fog { animation: gh-fade-in 1.2s ease .3s both; }
.gh-hero.gh-is-intro [data-slap] { animation: gh-slap .6s cubic-bezier(.25,1.7,.45,1) var(--d, 0s) both; }
.gh-hero.gh-is-intro .gh-sphere { animation: gh-pop .7s cubic-bezier(.3,1.8,.5,1) var(--d, .6s) both; }
@keyframes gh-fade-in { from { opacity: 0; } }
@keyframes gh-scene-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
/* [desempenho/LCP] o personagem entra a partir de 1% de opacidade (a olho nu é igual a 0).
   O Chrome NÃO registra como "maior pintura" (LCP) um elemento que surge por animação partindo
   de opacidade 0 — o LCP caía num elemento pintado segundos depois. Não volte para 0. */
@keyframes gh-char-in { from { opacity: .01; transform: translateY(7%); } to { opacity: 1; transform: translateY(0); } }
/* [desempenho/LCP] idem para a aura da forma base (a maior imagem do hero): em repouso fica em
   1% em vez de 0, para ser registrada junto com o personagem na entrada — e não só quando acende
   na carga de ki, segundos depois. Visualmente nada muda (o JS assume a opacidade na carga). */
.gh-char__form--base .gh-char__aura { opacity: .01; }
@keyframes gh-slap { 0% { opacity: 0; transform: scale(1.7) rotate(-9deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes gh-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

/* reset instantâneo ao repetir */
.gh-hero.gh-is-resetting *, .gh-hero.gh-is-resetting *::before, .gh-hero.gh-is-resetting *::after { transition: none !important; animation-play-state: paused; }
.gh-hero.gh-is-resetting [data-wave], .gh-hero.gh-is-resetting .gh-sphere { animation: none !important; }

/* =========================================================================
   MOBILE / TABLET
   ========================================================================= */
/* =========================================================================
   LAYOUT EM PÉ (celular, tablet em pé, janelas estreitas)
   Grade de 3 linhas: logo / palco do personagem / ações.
   O personagem é encaixado pelo JS dentro de .gh-hero__slot — nunca fica
   embaixo da logo nem dos botões, em qualquer altura de tela.
   ========================================================================= */
@media (max-aspect-ratio: 6/5) {
  .gh-brand { width: 40px; height: 40px; }
  .gh-hero__ui {
    --bar-h: 60px;
    padding-left: max(34px, env(safe-area-inset-left, 0px));
    padding-right: max(34px, env(safe-area-inset-right, 0px));
    padding-block: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 14px) max(18px, env(safe-area-inset-bottom, 0px));
  }
  .gh-topbar { padding-left: max(34px, env(safe-area-inset-left, 0px)); padding-right: max(34px, env(safe-area-inset-right, 0px)); }
  .gh-menu__glass { width: 36px; height: 36px; border-radius: 10px; }
  .gh-menu__panel { top: calc(100% + 18px); }

  .gh-rail { font-size: clamp(12px, 1.6vw, 16px); gap: 1.6em; letter-spacing: .14em; --o: 1.5px; }
  .gh-rail--left { left: max(10px, env(safe-area-inset-left, 0px)); }
  .gh-rail--right { right: max(10px, env(safe-area-inset-right, 0px)); }

  .gh-hero__copy {
    width: 100%; height: 100%; align-self: stretch; margin-top: 0;
    padding-left: 0;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: center; gap: clamp(8px, 1.4svh, 14px);
  }
  .gh-hero__title { width: min(80vw, 420px, 52svh); }
  .gh-hero__slot { display: block; align-self: stretch; justify-self: stretch; min-height: 0; }
  .gh-hero__actions { justify-self: center; align-items: center; padding-left: 0; gap: 12px; max-width: 100%; }
  .gh-caption__box { text-align: center; }
  .gh-caption__box { max-width: none; }
  .gh-caption__text { font-size: clamp(13px, 2.4vw, 19px); white-space: nowrap; }
  .gh-cta__box { font-size: clamp(17px, 4.6vw, 28px); padding: 9px 16px 7px; gap: 10px; }

  /* caixa calculada no JS (fitChars) */
  .gh-char--base, .gh-char--ultra {
    left: var(--fit-x, 0px); top: var(--fit-y, 0px);
    width: var(--fit-w, 0px); height: var(--fit-h, 0px);
    right: auto; bottom: auto; aspect-ratio: auto; translate: none;
  }
  .gh-echo { display: none; }                  /* máscara em retícula é cara no celular */
  .gh-char__aura { mix-blend-mode: normal; }   /* mesclagem 'screen' em tela cheia pesa na GPU do celular */
  .gh-scene__img { object-position: 50% 50%; }
  .gh-sphere--1 { left: 5%; top: 38%; }
  .gh-sphere--2 { left: auto; right: 6%; top: 48%; }
  .gh-sphere--3 { right: 2%; bottom: 23%; --s: 58px; z-index: 3; }
  .gh-sphere--4 { display: none; }
  .gh-hero__fog { height: 34%; }
  .gh-replay { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(22px, env(safe-area-inset-bottom, 0px)); }
  .gh-replay__box { padding: 9px; }
  .gh-replay__box svg { width: 18px; height: 18px; }
  .gh-replay__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* telas em pé baixas (ex.: painel lateral, celular pequeno): prioriza o personagem */
@media (max-aspect-ratio: 6/5) and (max-height: 680px) {
  .gh-caption { display: none; }
  .gh-hero__title { width: min(74vw, 380px, 46svh); }
}

/* celular deitado e janelas baixas: cabe tudo na altura da tela */
@media (min-aspect-ratio: 6/5) and (max-height: 540px) {
  .gh-hero { min-height: 0; }
  .gh-hero__ui { --bar-h: 54px; padding-block: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 6px) max(14px, env(safe-area-inset-bottom, 0px)); }
  .gh-hero__copy { width: min(42vw, 96svh); margin-top: 0; gap: 12px; }
  .gh-hero__actions { gap: 10px; }
  .gh-caption__text { font-size: 13px; }
  .gh-cta__box { font-size: 19px; padding: 8px 16px 6px; }
  .gh-rail { font-size: 11px; }
  .gh-brand { width: 40px; height: 40px; }
  .gh-replay { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .gh-replay__box { padding: 9px; }
  .gh-replay__box svg { width: 18px; height: 18px; }
  .gh-replay__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* =========================================================================
   MOVIMENTO REDUZIDO — sem flashes, sem tremor: só troca suave
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .gh-hero *, .gh-hero *::before, .gh-hero *::after { animation: none !important; }
  .gh-scene__reveal { clip-path: none !important; opacity: 0; transition: opacity .6s ease; }
  .gh-hero[data-state="ultra"] .gh-scene__reveal { opacity: 1; }
  .gh-char__form { transition: opacity .6s ease; }
  .gh-hero[data-state="ultra"] .gh-char__aura--ultra { opacity: .7; }
  .gh-swap-ultra, .gh-swap-base, .gh-sticker__box, .gh-menu__glass, .gh-menu__panel { transition-duration: .4s !important; transition-delay: 0s !important; }
}

/* cores garantidas contra a:hover / button:hover globais do site */
.gh-menu__link, .gh-menu__link:hover, .gh-menu__link:visited, .gh-menu__link:focus { color: #fff; }
.gh-menu__btn, .gh-menu__btn:hover, .gh-menu__btn:focus { color: #fff; }