/* Ninja Chronicles — landing "em breve"
 * Mundo visual pinado: a tela de login do client NCS (ScrollWindow + GreenButton).
 * Paleta e 9-slices espelham data/styles/10-*.otui e data/images/ui/new/. */

/* ---------- fontes (Nunito = face OFL presente no client) ---------- */
@font-face {
  font-family: "Nunito";
  src: url("../assets/fonts/nunito-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../assets/fonts/nunito-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* display brush de mangá (OFL) — voz do título e dos botões, eco do lettering da logo */
@font-face {
  font-family: "Reggae One";
  src: url("../assets/fonts/reggae-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------- paleta do client ---------- */
:root {
  /* ouro dos títulos: gradient-color #F0B101 #FFC160 #F0B101 (10-windows.otui) */
  --gold: #f0b101;
  --gold-hi: #ffc160;
  --gold-btn: #faac2e;      /* GreenButton idle (10-buttons.otui) */
  --gold-btn-hi: #fed491;
  --ink-outline: #312519;   /* outline dos textos dourados do client */
  --ink: #241407;
  --paper: #efe6cf;         /* miolo do scrolls.png */
  --paper-ink: #43331d;
  --paper-ink-soft: #5c4a2e;
  --ember: #fa8c0f;         /* background_particles.otps */
  --tan: #8a785d;           /* rodapé do entergame.otui */
  --cream: #f3e9d2;
  /* contorno dos rótulos dourados dos botões (lettering do client) */
  --btn-outline: #2c1a08;

  /* geometria do pergaminho (nativo 367×468; hastes de 225px nas fatias).
   * Os ratios abaixo são fração da largura nativa (225/367, 64/367, ...):
   * calc(px ÷ px) é inválido em CSS, então a escala é sempre largura × número. */
  --scroll-w: clamp(400px, 46vmin, 480px);
  --scroll-slice-v: 0.6131;   /* 225/367 (altura das hastes) */
  --scroll-pad-top: 0.1744;   /*  64/367 */
  --scroll-pad-side: 0.2016;  /*  74/367 */
  --scroll-pad-bottom: 0.2125;/*  78/367 */
  /* fator de escala dos botões (nativo 111×40) */
  --bf: 1.5;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset mínimo ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Nunito", "Segoe UI", sans-serif;
  color: var(--paper-ink);
  background-color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- superfícies do navegador ---------- */
::selection {
  background: var(--gold);
  color: var(--ink);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(36, 20, 7, 0.6);
}

:focus-visible {
  outline: 3px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- cena: o vilarejo ---------- */
.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--ink);
}

.scene picture {
  position: absolute;
  inset: -20px;
  transform: translate3d(var(--plx, 0px), var(--ply, 0px), 0);
}

.scene__art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 30%;
}

.scene__embers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 38%, transparent 58%, rgba(18, 10, 2, 0.34) 100%),
    linear-gradient(to top, rgba(18, 10, 2, 0.52) 0%, transparent 18%);
}

/* ---------- palco ---------- */
.stage {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(8px, 2vh, 24px) 16px 28px;
}

/* logo flutua e invade o topo do pergaminho, como no entergame.otui */
.brand {
  position: relative;
  z-index: 2;
  width: fit-content;
  /* logo desconectada do pergaminho (ordem do dono 2026-08-09): respiro
   * claro entre a arte animada e o rolo superior */
  margin-bottom: 14px;
  filter: drop-shadow(0 10px 22px rgba(18, 10, 2, 0.55));
}

.brand__logo {
  width: clamp(320px, 52vmin, 560px);
  height: auto;
  /* pátina sutil de "antigo" sobre a logo oficial (retoque reversível) */
  filter: sepia(0.14) saturate(1.06) contrast(1.02);
}

/* a animação da logo é o próprio asset oficial (WebP animado no <picture>);
 * reduced-motion recebe a variante estática pelo media do <source> */

/* ---------- pergaminho (ScrollWindow: scrolls.png, slices 225/66) ---------- */
/* pergaminho em três camadas físicas (hastes nunca deformam; nada de
 * overflow — sombras e toast ficam livres). A track central do grid anima
 * 0fr→1fr no desenrolar: hastes partem coladas e o papel nasce entre elas. */
.scroll {
  position: relative;
  z-index: 1;
  width: var(--scroll-w);
  min-height: calc(var(--scroll-w) * 1.275);
  display: flex;
}

.scroll__skin {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.scroll__roller {
  flex: none;
  background: center / 100% 100% no-repeat;
}

/* rolos REAIS do asset (fatias nas juntas medidas do scrolls.png) */
.scroll__roller--top {
  height: calc(var(--scroll-w) * 0.1526);
  background-image: url("../assets/ui/scroll-top.png");
}

.scroll__paper {
  flex: 1;
  min-height: 0;
  background: url("../assets/ui/scroll-mid.png") center / 100% 100% no-repeat;
}

.scroll__roller--bottom {
  height: calc(var(--scroll-w) * 0.1989);
  background-image: url("../assets/ui/scroll-bottom.png");
}

.scroll__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* padding do OTUI (58/66/70) escalado pela largura */
  padding: calc(var(--scroll-w) * var(--scroll-pad-top))
    calc(var(--scroll-w) * var(--scroll-pad-side))
    calc(var(--scroll-w) * var(--scroll-pad-bottom));
}

/* ---------- título "Em breve" — lettering no tratamento da LOGO ----------
 * Duas camadas reais (bolder 2026-08-09): embaixo o contorno escuro espesso +
 * sombra projetada; por cima o ouro com bevel clipado no glifo. As camadas são
 * separadas porque sombra de texto pintaria sobre o gradiente clipado se
 * vivessem no mesmo elemento (The Logo-Lettering Rule no DESIGN.md). */
.scroll__title {
  position: relative;
  font-family: "Reggae One", "Nunito", sans-serif;
  font-size: clamp(2rem, 4.4vmin, 2.35rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.scroll__title-ink {
  color: transparent;
  text-shadow:
    -2px -2px 0 #45280a, 2px -2px 0 #45280a,
    -2px 2px 0 #45280a, 2px 2px 0 #45280a,
    -2px 0 0 #45280a, 2px 0 0 #45280a,
    0 -2px 0 #45280a, 0 2px 0 #45280a,
    0 4px 6px rgba(24, 12, 2, 0.45);
}

.scroll__title-gold {
  position: absolute;
  inset: 0;
  /* rachaduras geradas (crackle.png) multiplicam por cima do ouro, dentro
   * dos glifos — o envelhecido pedido pelo dono (2026-08-09) */
  background-image:
    url("../assets/ui/crackle.png"),
    linear-gradient(180deg, #ffe08a 0%, #fcc23c 38%, #f0a500 62%, #c87d00 100%);
  background-size: 300px auto, auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.scroll__ornament {
  width: min(220px, 72%);
  height: auto;
  margin-top: 10px;
  opacity: 0.9;
}

/* ---------- textos ---------- */
.scroll__lead {
  margin-top: 22px;
  max-width: 24ch;
  font-size: clamp(1.1rem, 2.3vmin, 1.24rem);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
  color: var(--paper-ink);
}

.scroll__copy {
  margin-top: 12px;
  max-width: 34ch;
  font-size: clamp(0.95rem, 1.9vmin, 1.02rem);
  line-height: 1.55;
  color: var(--paper-ink-soft);
}

/* direção para a ação: mais forte que o corpo, aponta para os botões */
.scroll__hint {
  margin-top: 14px;
  max-width: 30ch;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--paper-ink);
}

/* ---------- ações (GreenButton/RedButton: 9-slice 14/42/25/42) ---------- */
/* CTA vivo primeiro no DOM e na tela; registro abaixo (âncora do toast) */
.actions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  width: 100%;
}

.btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(40px * var(--bf));
  /* o centro visual da pílula fica a ~42.5% do frame (os 25px de baixo do
   * sprite são sombra); o padding-bottom recentra o rótulo na pílula —
   * mesmo ajuste que o client faz com text-offset no GreenButton */
  padding: 0 calc(26px * var(--bf)) 10px;
  border: 0;
  background: none;
  font-family: "Reggae One", "Nunito", sans-serif;
  font-size: 1.16rem;
  font-weight: 400;
  letter-spacing: 0.025em;
  text-decoration: none;
  line-height: 1.1;
  cursor: pointer;
  width: min(292px, 100%);
  white-space: nowrap;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-style: solid;
  border-width: calc(14px * var(--bf)) calc(42px * var(--bf)) calc(25px * var(--bf));
  pointer-events: none;
  /* sombra uniforme sobre TODO o alpha do sprite: assenta o botão e cobre a
   * costura do 9-slice (a sombra pintada dilui no miolo esticado) */
  filter: drop-shadow(0 3px 5px rgba(18, 10, 2, 0.35));
}

/* rótulos no lettering do client (harukaze dourada com contorno), na técnica
 * de duas camadas do título: contorno embaixo, ouro por cima — legível e
 * fiel (revisão dos botões pedida pelo dono, 2026-08-09) */
.btn__ink {
  color: transparent;
  text-shadow:
    -1.75px -1.75px 0 var(--btn-outline), 1.75px -1.75px 0 var(--btn-outline),
    -1.75px 1.75px 0 var(--btn-outline), 1.75px 1.75px 0 var(--btn-outline),
    -1.75px 0 0 var(--btn-outline), 1.75px 0 0 var(--btn-outline),
    0 -1.75px 0 var(--btn-outline), 0 1.75px 0 var(--btn-outline),
    0 2px 3px rgba(18, 10, 2, 0.5);
}

.btn__gold {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* replica o recentro vertical do rótulo na pílula (padding-bottom do .btn) */
  padding-bottom: 10px;
  /* topo quase-creme: miolo ≥5:1 sobre verde/vermelho (baixa visão AA);
   * base #f5b13a ≥3:1 até no verde (medição 2026-08-09) */
  background-image: linear-gradient(180deg,
    #ffe7b8 10%, #fdc465 55%, #f5b13a 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn--live:hover .btn__gold,
.btn--register:hover .btn__gold {
  filter: brightness(1.1);
}

/* anel de foco escuro nos botões: o ouro global some sobre o papel bege */
.btn:focus-visible {
  outline-color: var(--btn-outline);
}

/* selo "Em breve" pendurado no canto do registro: pré-responde o clique */
.btn__seal {
  position: absolute;
  top: -9px;
  right: -7px;
  transform: rotate(8deg);
  padding: 3px 10px 4px;
  border-radius: 3px;
  border: 1px solid var(--btn-outline);
  background-image: linear-gradient(180deg, #ffe7b8 0%, #fdc465 60%, #f5b13a 100%);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #2c1a08;
  box-shadow: 0 2px 4px rgba(18, 10, 2, 0.4);
  pointer-events: none;
  white-space: nowrap;
}

.btn--live::before {
  border-image: url("../assets/ui/btn-verde-idle.png") 14 42 25 42 fill / 1 / 0 stretch;
  transition: filter 160ms ease-out;
}

.btn--live:hover::before,
.btn--live:focus-visible::before {
  border-image-source: url("../assets/ui/btn-verde-hover.png");
  filter: drop-shadow(0 0 10px rgba(250, 172, 46, 0.45));
}

.btn--live:active {
  transform: translate(-1px, 1px);
}

.btn--live:active::before {
  border-image-source: url("../assets/ui/btn-verde-pressed.png");
}

/* registro vivo (sprite vermelho do client); o clique responde com o aviso */
.btn--register::before {
  border-image: url("../assets/ui/btn-vermelho-idle.png") 14 42 25 42 fill / 1 / 0 stretch;
  transition: filter 160ms ease-out;
}

.btn--register:hover::before,
.btn--register:focus-visible::before {
  border-image-source: url("../assets/ui/btn-vermelho-hover.png");
  filter: drop-shadow(0 0 10px rgba(180, 78, 84, 0.5));
}

.btn--register:active {
  transform: translate(-1px, 1px);
}

.btn--register:active::before {
  border-image-source: url("../assets/ui/btn-vermelho-pressed.png");
}

/* aviso do registro (reusa a placa escura do client como toast) */
.toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translate(-50%, 6px);
  width: max-content;
  max-width: min(300px, 86vw);
  padding: 10px 22px 12px;
  border-style: solid;
  border-width: 14px;
  border-image: url("../assets/ui/title-bar-dark.png") 14 fill / 1 / 0 stretch;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  color: #ffe9b8;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  /* visível = dispensável com um toque */
  pointer-events: auto;
  cursor: pointer;
}

/* ---------- selo de status (clientVersionLabel) ---------- */
.devbadge {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 5px 12px;
  background: rgba(10, 6, 2, 0.66);
  border-radius: 3px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ---------- rodapé ---------- */
.footer {
  position: relative;
  z-index: 1;
  padding: 14px 72px 20px;
  text-align: center;
  color: var(--cream);
  font-size: 0.85rem;
  text-shadow: 0 1px 3px rgba(10, 6, 2, 0.85);
}

.footer__domain {
  font-weight: 700;
  color: var(--gold-hi);
}

/* ---------- entrada orquestrada (dispara via <html class="js">) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .brand {
    animation: logo-in 950ms var(--ease-out-expo) 120ms backwards;
  }

  .js .scroll__paper {
    /* desenrolar (desenho do dono, 2026-08-09): rolos partem colados e o
     * papel cresce entre eles. easeOutCubic (não expo): progressão visível
     * pela duração inteira, acompanhando a cascata dos textos. */
    animation: unroll 1500ms cubic-bezier(0.33, 1, 0.68, 1) 500ms backwards;
  }

  .js .scroll__body > * {
    animation: rise-in 520ms var(--ease-out-expo) backwards;
  }

  .js .scroll__body > :nth-child(1) { animation-delay: 1350ms; }
  .js .scroll__body > :nth-child(2) { animation-delay: 1450ms; }
  .js .scroll__body > :nth-child(3) { animation-delay: 1550ms; }
  .js .scroll__body > :nth-child(4) { animation-delay: 1650ms; }
  .js .scroll__body > :nth-child(5) { animation-delay: 1750ms; }
  .js .scroll__body > :nth-child(6) { animation-delay: 1880ms; }

  .js .footer,
  .js .devbadge {
    animation: fade-in 700ms ease-out 2250ms backwards;
  }

  .scene__art {
    animation:
      settle-in 2400ms var(--ease-out-expo) backwards,
      ken-burns 52s ease-in-out 2400ms infinite alternate;
  }

  @keyframes logo-in {
    from {
      opacity: 0;
      transform: translateY(-18px) scale(0.985);
    }
  }

  @keyframes unroll {
    from {
      max-height: 0;
    }
    to {
      /* teto EXATO medido pelo JS no load (--paper-h): a curva percorre a
       * duracao inteira e termina cravada na altura real — sem salto e sem
       * abertura "engolida". Fallback sem JS: aproximacao folgada. */
      max-height: var(--paper-h, calc(var(--scroll-w) * 1.3));
    }
  }

  @keyframes rise-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
  }

  @keyframes settle-in {
    from {
      transform: scale(1.07);
    }
  }

  @keyframes ken-burns {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.045);
    }
  }
}

/* ---------- responsivo (compacto ate tablets: 46vmin encolheria o
 * pergaminho abaixo do mobile em 768×1024) ---------- */
@media (max-width: 1024px) {
  :root {
    --scroll-w: min(92vw, 430px);
    --bf: 1.35;
  }

  .scene__art {
    object-position: 31% 30%;
  }

  .brand__logo {
    width: min(72vw, 440px);
  }

  .brand {
    margin-bottom: 10px;
  }

  .btn {
    width: min(280px, 100%);
    padding-inline: calc(16px * var(--bf));
    font-size: 1.06rem;
  }

  /* o selo do registro pendura para cima: gap maior evita tocar o CTA verde */
  .actions {
    gap: 16px;
  }

  /* no mobile o selo entra no fluxo (fixed dividiria a faixa com o rodapé) */
  .devbadge {
    position: static;
    display: block;
    width: fit-content;
    margin: 14px auto -2px;
  }

  .footer {
    padding: 10px 16px 22px;
  }
}

@media (max-height: 640px) and (orientation: landscape) {
  .brand__logo {
    width: clamp(220px, 34vmin, 340px);
  }

  .stage {
    padding-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}