/* Runekin · css/home.css — Home (3a): herói, tiles, faixa.
   Fatia do antigo style.css (linhas 314–378); a ORDEM dos <link> em layout.jsx preserva a cascata. */

/* ============ HOME (3a) ============ */
/* Áreas seguras: o pôster já tem 56px de folga no topo; --home-shift (tokens.css) só desce o que a
   ilha/notch pedir além disso (site = 0). A Home tem que caber numa tela só nos iPhones atuais do
   app: --pc COMPRIME o pôster (até 120px) quando pôster + o resto (--home-rest: CTAs, tiles, rodapé)
   não cabem em 100svh — svh (não dvh) pra barra do Safari não reflowar a composição ao rolar.
   No site/iPad sobra espaço e --pc = 0: composição idêntica à de sempre. */
.screen.home {
  padding: 0; min-height: 100dvh; overflow: hidden;
  --home-rest: calc(396px + 14vw + var(--sa-b));
  --pc: clamp(0px, calc(392px + var(--home-shift) + var(--home-rest) - 100svh), 120px);
}
.screen.home.is-active { display: flex; flex-direction: column; }
/* the poster block: head slab, stripe, logo, hero, tagline — composed on a fixed-height stage */
.home-top { position: relative; height: calc(392px + var(--home-shift) - var(--pc)); flex: none; }
.home-head { position: absolute; left: 0; right: 0; top: 0; height: calc(330px + var(--home-shift) - var(--pc) * .9); background: var(--ink); clip-path: var(--e-hdr); z-index: 0; }
.home-stripe { position: absolute; left: -30px; width: calc(100% + 60px); top: calc(236px + var(--home-shift) - var(--pc) * .9); height: 96px; background: var(--c1); clip-path: var(--e-stripe); transform: rotate(-8deg); z-index: 0; }
.home-hud {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: max(calc(var(--sa-t) + 8px), calc(56px + var(--home-shift) - var(--pc) * .3)) var(--gutter-r) 0 var(--gutter-l); color: #fff;
}
.home-hud .right { display: flex; gap: 10px; }
/* HUD: o desenho (chip 30px / quadrado 34px) fica no ::before; o botão é o alvo de toque de 44px e a
   margem negativa devolve o espaço — a composição não mexe. clip-path só no desenho (ele recorta o toque). */
.camchip { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -7px 0; padding: 5px 12px; color: var(--ink); font: 400 15px var(--display); letter-spacing: 2px; text-transform: uppercase; }
.camchip::before { content: ""; position: absolute; inset: 7px 0; z-index: -1; background: #fff; clip-path: var(--e-chip); }
.camchip .camicon { display: none; }
.iconbtn { position: relative; isolation: isolate; width: 44px; height: 44px; margin: -5px; display: grid; place-items: center; color: var(--ink); font: 400 14px var(--display); letter-spacing: 0; }
.iconbtn::before { content: ""; position: absolute; inset: 5px; z-index: -1; background: #fff; clip-path: var(--e-chip); }
.camchip:active::before, .iconbtn:active::before { transform: translate(2px, 2px); }
.iconbtn svg { width: 18px; height: 18px; }
.home-logo { position: absolute; left: 14px; top: calc(118px + var(--home-shift) - var(--pc) * .42); width: calc(250px - var(--pc) * .4); transform: rotate(-6deg); filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); z-index: 2; }
.home-hero { position: absolute; right: -4px; top: calc(196px + var(--home-shift) - var(--pc) * .78); width: calc(140px - var(--pc) * .2); height: calc(140px - var(--pc) * .2); transform: rotate(6deg); filter: drop-shadow(0 8px 0 rgba(0,0,0,.25)); z-index: 2; display: flex; align-items: flex-end; justify-content: center; }
.home-hero img, .home-hero svg { width: 100%; height: 100%; object-fit: contain; }
/* primeiro acesso: silhueta em tinta com contorno branco — lê igual sobre tinta, faixa e amarelo
   (o branco translúcido virava três manchas de cor diferente) */
.home-hero.sil img, .home-hero.sil svg { filter: brightness(0) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
.tagline { position: absolute; left: var(--gutter-l); top: calc(358px + var(--home-shift) - var(--pc) * .9); margin: 0; font: 400 18px var(--display); letter-spacing: 6px; text-transform: uppercase; color: var(--ink); z-index: 2; }
/* minmax(0,1fr): a coluna nunca cresce pro min-content do subtítulo (o pt-BR estourava 360–375px) */
/* sobrando altura (Pro Max, iPad), CTAs + tiles ficam no meio do espaço entre pôster e rodapé */
.home-ctas { margin: auto calc(var(--gutter-r) + 5px) 0 var(--gutter-l); padding-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; z-index: 2; }
.play {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 20px;
  color: #fff; --face: var(--ink); --sh: #fff; --clip: var(--e-btn-a);
  transform: rotate(-1deg); transition: transform .08s ease;
}
.play::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--face); clip-path: var(--clip); }
.play::after  { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--sh); clip-path: var(--clip); transform: translate(5px, 5px); transition: transform .08s ease; }
.play.white { --face: #fff; --sh: var(--ink); --clip: var(--e-btn-b); color: var(--ink); transform: rotate(1deg); margin-top: 4px; }
.play:active { transform: rotate(-1deg) translate(5px,5px); }
.play:active::after { transform: none; }
/* ARENA: branco como o EXPLORAR, inclinação alternada */
.play.arena { --clip: var(--e-btn-a); transform: rotate(-1deg); }
.play.arena:active { transform: rotate(-1deg) translate(5px,5px); }
.play.white:active { transform: rotate(1deg) translate(5px,5px); }
.play .pt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.play .pt b { font: 400 33px/.9 var(--display); text-transform: uppercase; }
/* subtítulo: uma linha quando cabe; em tela estreita com idioma longo quebra equilibrado (nunca corta) */
.play .pt small { font: 400 12px/1.35 var(--body); color: var(--muted-ink); text-wrap: balance; overflow-wrap: break-word; }
.play.white .pt small { color: var(--muted); }
.play .pgo { font: 400 33px/1 var(--display); flex: none; }
.play .play-ico { display: none; }
.tiles { margin: 12px var(--gutter-r) 0 var(--gutter-l); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; z-index: 2; }
.tile { display: block; background: var(--ink); color: #fff; padding: 3px; clip-path: var(--e-tile); min-height: 62px; transition: transform .08s ease; }
.tile:active { transform: translate(2px,2px); }
.tile > span { display: none; }
.tile .tile-in { display: grid; place-items: center; height: 100%; min-height: 56px; padding: 0 6px; font: 400 clamp(13px, 4vw, 16px)/1 var(--display); letter-spacing: 1.5px; text-transform: uppercase; text-align: center; text-wrap: balance; color: var(--ink); background: var(--c2); clip-path: var(--e-tile); }
.tile.dark .tile-in { background: var(--ink); color: #fff; padding: 12px 6px; line-height: 1; }
.tile.dark .tile-in b { display: block; font: 500 26px/1 var(--mono); letter-spacing: -1px; }   /* mono: o 1 da Staatliches lia "0/8I" */
/* só o denominador ("/150") é pequeno — o numerador é o número do tile */
.tile.dark .tile-in b > span:last-child { font-size: 13px; color: var(--muted-ink); }
.tile.dark .tile-in small { display: block; font: 400 13px var(--display); letter-spacing: 2px; color: var(--muted-ink); margin-top: 2px; }
/* rodapé: faixa de tinta que sangra até a borda de baixo e cresce com o indicador de início. Altura =
   a diagonal (14vw) + a linha do rodapé, então o texto fica SEMPRE sobre a faixa (iPad incluso) */
.home-foot { position: relative; margin-top: auto; height: calc(14vw + 40px + var(--sa-b)); flex: none; }
.home-foot::before { content: ""; position: absolute; inset: 0; background: var(--ink); clip-path: var(--e-foot); z-index: 0; }
.home-footline { position: absolute; left: var(--gutter-l); right: var(--gutter-r); bottom: calc(16px + var(--sa-b)); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 11px var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: #9a9a9a; z-index: 2; }
/* CRÉDITOS: o link é pequeno, o alvo não (44px pra cima e pros lados, margem negativa devolve) */
.home-footline button { color: #bdbdbd; text-decoration: underline; text-underline-offset: 3px; padding: 15px 10px; margin: -15px -10px; flex: none; }
.screen.home > .home-ctas, .screen.home > .tiles { position: relative; }
/* telas baixas (SE, celular com barra do navegador): CTAs e tiles um pouco mais justos */
@media (max-height: 700px) {
  .screen.home { --home-rest: calc(374px + 14vw + var(--sa-b)); }
  .home-ctas { gap: 8px; }
  .play { padding-top: 8px; padding-bottom: 8px; }
  .tiles { margin-top: 10px; }
  .tile { min-height: 56px; }
  .tile .tile-in { min-height: 50px; }
  .tile.dark .tile-in { padding: 9px 6px; }
  .tile.dark .tile-in b { font-size: 23px; }
}
@media (min-width: 560px) { .tagline { top: calc(368px + var(--home-shift) - var(--pc) * .9); } }
:lang(ko) .tagline { letter-spacing: 2px; }
:lang(ko) .tile .tile-in, :lang(ko) .tile.dark .tile-in small, :lang(ko) .home-footline { letter-spacing: .5px; }
@media (prefers-reduced-motion: no-preference) {
  .screen.home.is-active .home-logo  { animation: bsPop .45s cubic-bezier(.2,.8,.2,1) both; }
  .screen.home.is-active .home-hero  { animation: bsPop .45s .08s cubic-bezier(.2,.8,.2,1) both; }
  .screen.home.is-active .home-ctas  { animation: bsRise .4s .12s cubic-bezier(.2,.8,.2,1) both; }
  .screen.home.is-active .tiles      { animation: bsRise .4s .18s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes bsPop  { from { opacity: 0; transform: scale(.9) rotate(-6deg); } to { opacity: 1; } }
@keyframes bsRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }