/* =========================================================================
   PRISMA — estilos
   Temas: cada clique no cubo troca a cor do vidro e alterna fundo branco/preto.
   O JS (assets/js/theme.js) atualiza --bg, --ink, --accent e --menu-surface.
   Unidade "hu" = um pixel do quadro do Figma (1400 px) → calc(N * var(--hero-unit))
   ========================================================================= */

@font-face {
  font-family: "Nippo";
  src: url("../fonts/nippo-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --hero-unit: calc(100vw / 1400);
  --hu: var(--hero-unit);

  /* paleta (valores do tema inicial, Roxo; o JS troca a cada clique no cubo) */
  --bg: #ffffff;                            /* fundo: branco ou preto */
  --ink: #1b0b33;                           /* texto: quase preto ou branco */
  --ink-90: color-mix(in srgb, var(--ink) 90%, transparent);
  --ink-20: color-mix(in srgb, var(--ink) 15%, transparent);
  --accent: #8b2cff;                        /* destaque: a cor do cubo */
  --menu-surface: color-mix(in srgb, var(--bg) 78%, transparent);
  --theme-ease: 900ms cubic-bezier(0.4, 0, 0.2, 1);
  --preloader-surface: #ffffff;
  --ground: radial-gradient(95% 80% at 50% 112%, #d9bfff 0%, #f4ecff 58%, #ffffff 100%);

  --ease-entrance: cubic-bezier(0.2, 0, 0, 1);
  --font-sans: "Onest", system-ui, sans-serif;
  --font-display: "Nippo", "Onest", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* tamanho raiz adaptativo: 1rem = 16 px na largura-base de cada faixa */
html { font-size: 16px; }
@media (max-width: 1920px) { html { font-size: 0.833333vw; } }
@media (max-width: 1440px) { html { font-size: 1.111111vw; } }
@media (max-width: 1024px) { html { font-size: 1.5625vw; } }
@media (max-width: 640px)  { html { font-size: 4.444444vw; } }
/* acima de 1920 px o JS ajusta o font-size do html */

body {
  background: var(--bg); color: var(--ink); font-family: var(--font-sans);
  transition: background-color var(--theme-ease), color var(--theme-ease);
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  height: 100vh; width: 100vw; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
main { min-height: 100lvh; width: 100%; }
a { color: inherit; }
button { background: none; border: 0; cursor: pointer; color: inherit; }
::selection { background: var(--accent); color: var(--bg); }

/* ícones: os SVGs de assets/img viram máscara e pintam com a cor do texto */
.ico { display: block; flex: none; background-color: currentColor; transition: background-color var(--theme-ease);
  -webkit-mask: var(--ico) center / 100% 100% no-repeat; mask: var(--ico) center / 100% 100% no-repeat; }
.ico-mark { --ico: url("../img/mark.svg"); }
.ico-burger { --ico: url("../img/burger.svg"); }

/* a cor do texto acompanha a troca de tema */
.hero-ui, .hero-ui a, .hero-ui p, .hero-ui h1, .menu-sheet a, .menu-sheet .num { transition: color var(--theme-ease); }

/* ---------- hero ---------- */
.hero { position: relative; height: 100lvh; width: 100%; overflow: hidden; background: var(--bg); transition: background-color var(--theme-ease); }
.scene-box, .scene-host, .scene-cover { position: absolute; inset: 0; }
.scene-host canvas { display: block; width: 100%; height: 100%; }
.scene-cover { pointer-events: none; background: var(--ground); }
.scene-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-ui { position: absolute; inset: 0; z-index: 10; pointer-events: none; font-family: var(--font-sans); color: var(--ink); }

/* logo */
.logo { pointer-events: auto; position: absolute; left: 1rem; top: 1rem; display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); }
.logo .ico { width: .875rem; height: .875rem; }
.logo span { font-size: .875rem; font-weight: 500; line-height: normal; letter-spacing: .04em; }

/* burger */
.burger { pointer-events: auto; position: absolute; right: 1rem; top: 1rem; display: flex; }
.burger .ico { height: .75rem; width: 2.125rem; }

/* título */
h1 {
  position: absolute; left: 1rem; top: 5rem; display: flex; flex-direction: column; align-items: flex-start;
  font-size: 11vw; font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: -0.03em;
}
.line {
  display: block; width: fit-content; white-space: nowrap;
  margin: -0.5em -0.3em -0.5em calc(var(--indent) / 64 * 1em - 0.3em);
  padding: .5em .3em;
}
.fade-left  { -webkit-mask-image: linear-gradient(to right, rgba(255,255,255,.5), #fff); mask-image: linear-gradient(to right, rgba(255,255,255,.5), #fff); }
.fade-right { -webkit-mask-image: linear-gradient(to right, #fff, rgba(255,255,255,.5)); mask-image: linear-gradient(to right, #fff, rgba(255,255,255,.5)); }

/* navegação */
nav.primary { pointer-events: auto; position: absolute; display: none; }
nav.primary ul { list-style: none; display: flex; flex-direction: column; gap: .25rem; line-height: normal; }
nav.primary a {
  white-space: nowrap; line-height: normal; color: var(--ink-90);
  text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font;
  transition: opacity 150ms var(--ease-entrance), color 150ms var(--ease-entrance);
}
.hero-ui nav.primary a { transition: color var(--theme-ease); }
nav.primary a:hover, nav.primary a:focus-visible { color: var(--accent); }

/* legenda */
.caption {
  position: absolute; right: 1rem; top: calc(6.5rem + 39.6vw); width: 64%;
  display: flex; flex-wrap: wrap; justify-content: space-between; text-align: justify;
  font-size: .8125rem; line-height: 1.3;
}
.caption::after { content: ""; flex: auto; }

/* guias de pintura (nunca visíveis) */
.guide-rule { visibility: hidden; position: absolute; left: 0; right: 0; top: 62%; height: 1px; width: 100%; }
.wm {
  visibility: hidden; position: absolute; bottom: -0.036em; white-space: nowrap; user-select: none;
  font-family: var(--font-display); font-weight: 500; font-size: 26vw; line-height: 1; letter-spacing: -0.05em;
}
.wm-left  { left: .5rem; }
.wm-right { right: .5rem; }

/* entrada das palavras */
.split-word { display: inline-block; will-change: transform, opacity, filter; }

/* ---------- menu ---------- */
.menu-sheet {
  position: fixed; left: 0; right: 0; top: 0; z-index: 100; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--menu-surface); transition: background-color var(--theme-ease); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  padding-bottom: env(safe-area-inset-bottom); font-family: var(--font-sans); color: var(--ink); visibility: hidden;
}
.menu-sheet .logo { pointer-events: auto; }
.menu-close { position: absolute; right: 1rem; top: 1rem; display: flex; align-items: center; justify-content: center; height: .75rem; width: 2.125rem; }
.menu-close span { display: flex; }
.menu-close .ico { width: .875rem; height: .875rem; }
.menu-nav { display: flex; min-height: 100%; flex-direction: column; justify-content: space-between; gap: 3rem; padding: 7rem 1rem 2.5rem; }
.menu-nav ol { list-style: none; display: flex; flex-direction: column; }
.menu-nav li { border-top: 1px solid var(--ink-20); }
.menu-nav ol li:last-child { border-bottom: 1px solid var(--ink-20); }
.menu-nav ol a { display: flex; align-items: baseline; gap: 1rem; padding: .75rem 0; text-decoration: none; }
.menu-row { opacity: 0; }
.num { width: 1.5rem; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--accent); }
.big {
  font-family: var(--font-display); font-weight: 500; font-size: 11vw; text-transform: uppercase; line-height: .95; letter-spacing: -0.02em;
  transition: opacity 250ms var(--ease-entrance), translate 250ms var(--ease-entrance), color 250ms var(--ease-entrance);
}
.menu-nav ol a:hover .big, .menu-nav ol a:focus-visible .big { translate: .5rem 0; color: var(--accent); }
.menu-small { list-style: none; display: flex; flex-direction: column; gap: .5rem; line-height: normal; }
.menu-small li { border: 0; }
.menu-small a {
  font-size: 1rem; text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font;
  transition: color 150ms var(--ease-entrance);
}
.menu-small a:hover, .menu-small a:focus-visible { color: var(--accent); }

/* ---------- preloader ---------- */
.preloader { position: fixed; left: 0; right: 0; top: 0; z-index: 200; height: 100lvh; background: var(--preloader-surface); color: var(--ink); will-change: transform; }
.pl-inner {
  position: relative; display: flex; height: 100dvh; flex-direction: column; align-items: center; justify-content: space-between;
  padding-top: 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.pl-logo { display: flex; align-items: center; gap: .5rem; }
.pl-logo .ico { width: .875rem; height: .875rem; }
.pl-logo span { font-size: .875rem; font-weight: 500; line-height: normal; letter-spacing: .04em; }
.pl-icons { position: absolute; inset: 0; margin: auto; width: 10rem; height: 10rem; color: var(--accent); }
.pl-icons svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.pl-icons svg:first-child { opacity: 1; }
.pl-count { position: relative; font-family: var(--font-display); font-size: 14vw; line-height: .8; font-variant-numeric: tabular-nums; }
.pl-hold { visibility: hidden; }
.pl-num { position: absolute; inset: 0; text-align: center; }

/* =========================================================================
   tablet ≥ 768 px
   ========================================================================= */
@media (min-width: 48rem) {
  .logo { left: 2rem; top: 1.5rem; }
  .burger { right: 2rem; top: 1.5rem; }
  h1 { left: 2rem; top: 6rem; font-size: 7.6vw; }
  nav.primary { display: flex; justify-content: space-between; right: 2rem; top: calc(5.766rem + 0.456vw); width: 32%; }
  nav.primary a { font-size: .9375rem; }
  .caption { right: 2rem; top: auto; bottom: calc(100% - 6rem - 27.36vw); width: 32%; font-size: .9375rem; }
  .guide-rule { top: 57%; }
  .menu-close { right: 2rem; top: 1.5rem; }
}

/* =========================================================================
   lg ≥ 1024 px (qualquer orientação) — só preloader e menu
   ========================================================================= */
@media (min-width: 64rem) {
  .pl-inner { padding-top: calc(20 * var(--hu)); padding-bottom: calc(12 * var(--hu)); }
  .pl-logo { gap: calc(8 * var(--hu)); }
  .pl-logo .ico { width: calc(14 * var(--hu)); height: calc(14 * var(--hu)); }
  .pl-logo span { font-size: calc(15 * var(--hu)); }
  .pl-icons { width: calc(240 * var(--hu)); height: calc(240 * var(--hu)); }
  .pl-count { font-size: calc(64 * var(--hu)); }

  .menu-nav { flex-direction: row; align-items: flex-end; gap: 0; padding: calc(140 * var(--hu)) calc(20 * var(--hu)) calc(60 * var(--hu)); }
  .menu-nav ol a { gap: calc(28 * var(--hu)); padding: calc(14 * var(--hu)) 0; }
  .num { width: calc(32 * var(--hu)); font-size: calc(14 * var(--hu)); }
  .big { font-size: calc(88 * var(--hu)); }
  .menu-small { width: calc(285 * var(--hu)); gap: calc(5 * var(--hu)); }
  .menu-small a { font-size: calc(16 * var(--hu)); }
}

/* =========================================================================
   squat — celular deitado (vence o tablet)
   ========================================================================= */
@media (orientation: landscape) and (max-height: 31.99rem) and (max-width: 63.99rem) {
  h1 { left: 1.5rem; top: 3.5rem; font-size: 11vh; }
  nav.primary { display: none; }
  .caption { left: 1.5rem; right: auto; bottom: auto; top: calc(4.5rem + 39.6vh); width: 37%; font-size: .8125rem; }
  .guide-rule { top: 60%; }
  .wm { font-size: 30vh; }
}

/* =========================================================================
   desk — o quadro 1400 × 800 do Figma, tudo em hu
   ========================================================================= */
@media (min-width: 64rem) and (orientation: landscape) {
  .logo { left: calc(20 * var(--hu)); top: calc(20 * var(--hu)); gap: calc(8 * var(--hu)); }
  .logo .ico { width: calc(14 * var(--hu)); height: calc(14 * var(--hu)); }
  .logo span { font-size: calc(15 * var(--hu)); }
  .burger { right: calc(20 * var(--hu)); top: calc(20 * var(--hu)); }
  .burger .ico { height: calc(12 * var(--hu)); width: calc(34 * var(--hu)); }
  h1 { left: calc(20 * var(--hu)); top: calc(100 * var(--hu)); font-size: calc(64 * var(--hu)); }
  nav.primary { right: auto; left: calc(1095 * var(--hu)); top: calc(100 * var(--hu)); width: calc(285 * var(--hu)); }
  nav.primary ul { gap: calc(5 * var(--hu)); }
  nav.primary a { font-size: calc(16 * var(--hu)); }
  .caption { right: auto; bottom: auto; left: calc(1095 * var(--hu)); top: calc(268 * var(--hu)); width: calc(285 * var(--hu)); font-size: calc(16 * var(--hu)); }
  .guide-rule { top: calc(50% + 52 * var(--hu)); }
  .wm { font-size: calc(280 * var(--hu)); }
  .wm-left { left: calc(10 * var(--hu)); }
  .wm-right { right: calc(24.5 * var(--hu)); }
  .menu-close { right: calc(20 * var(--hu)); top: calc(20 * var(--hu)); height: calc(12 * var(--hu)); width: calc(34 * var(--hu)); }
  .menu-close .ico { width: calc(14 * var(--hu)); height: calc(14 * var(--hu)); }
}

@media (prefers-reduced-motion: reduce) {
  .big, nav.primary a, .menu-small a { transition: none; }
}

/* anúncio do tema atual para leitores de tela (invisível) */
.theme-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }