/* =========================================================================
   Great One — Links
   Clone estrutural de gionatannese.com adaptado à marca, com controle de tema.
   O layout visível é WebGL; este CSS cuida do shell (nav, logo, HUD, preloader).
   ========================================================================= */

/* RF Dewi Expanded — a fonte da marca, servida localmente */
@font-face {
  font-family: 'RF Dewi Expanded';
  src: url('assets/fonts/RFDewiExpanded-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'RF Dewi Expanded';
  src: url('assets/fonts/RFDewiExpanded-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'RF Dewi Expanded';
  src: url('assets/fonts/RFDewiExpanded-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'RF Dewi Expanded';
  src: url('assets/fonts/RFDewiExpanded-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'RF Dewi Expanded';
  src: url('assets/fonts/RFDewiExpanded-Ultrabold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

:root {
  --font-sans: 'RF Dewi Expanded', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --expo-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Transição de tema — Skiper26, variante circle-blur / top-right: o tema novo
   entra por um círculo desfocado que cresce do canto do botão (View
   Transitions API; navegadores sem suporte trocam sem animação). */
::view-transition-group(root) {
  animation-timing-function: var(--expo-out);
}

::view-transition-new(root) {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="40" cy="0" r="18" fill="white" filter="url(%23blur)"/></svg>') top right / 0 no-repeat;
  mask-origin: content-box;
  /* "both": sem fill-mode a máscara volta a 0 no último frame antes do
     overlay cair — é a piscada no fim da transição */
  animation: theme-reveal 1s both;
  transform-origin: top right;
}

::view-transition-old(root) {
  animation: theme-reveal 1s both;
  transform-origin: top right;
  z-index: -1;
}

@keyframes theme-reveal {
  to { mask-size: 350vmax; }
}

/* Tema claro — o editorial da referência */
html[data-theme='light'] {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: rgba(10, 10, 10, 0.45);
  --pill: rgba(237, 237, 237, 0.5);
  --pill-hover: rgba(224, 224, 224, 0.7);
  --card: #f4f4f5;
  --accent: #863bff;
}

/* Tema escuro — a paleta Great One */
html[data-theme='dark'] {
  --bg: #0d0a12;
  --fg: #f0eef5;
  --muted: rgba(240, 238, 245, 0.45);
  --pill: rgba(240, 238, 245, 0.08);
  --pill-hover: rgba(240, 238, 245, 0.16);
  --card: #17141f;
  --accent: #863bff;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body { overflow: hidden; }

a { color: inherit; text-decoration: none; }

/* Enquanto carrega, nada do shell aparece */
html.preloading .nav,
html.preloading .logo,
html.preloading .theme,
html.preloading .sound,
html.preloading .hud { opacity: 0; }

/* Conteúdo só para buscador e leitor de tela ------------------------------ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Logo ------------------------------------------------------------------- */
/* mix-blend-exclusion num elemento de ~70x18px — barato. Nunca numa barra inteira. */
.logo {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #fff;
  mix-blend-mode: exclusion;
  will-change: transform;
  pointer-events: auto;
  transition: opacity 0.4s;
}

/* Letter-roll do logo: DUDS.PNG (coreografia) ↔ GREAT O1 (header).
   Mesma mecânica do menu: máscara de uma linha, duas cópias empilhadas. */
.logo .lg {
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  vertical-align: top;
  width: var(--wa, auto);
  transition: width 0.5s var(--ease);
  transition-delay: calc(var(--i) * 0.04s);
}

.logo .lg__in {
  display: inline-block;
  transition: transform 0.5s var(--ease);
  transition-delay: calc(var(--i) * 0.04s);
}

.logo .lg__in span { display: block; }

.logo.is-go .lg { width: var(--wb, auto); }
.logo.is-go .lg__in { transform: translateY(-50%); }

/* Nav de pílulas numeradas ----------------------------------------------- */
.nav {
  position: fixed;
  top: 0.5rem; left: 0;
  z-index: 55;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  font-size: 0.75rem;
  transition: opacity 0.4s;
}

.nav__row { display: flex; align-items: center; gap: 0.875rem; }

/* ocupa exatamente o espaço do logo, que é posicionado por JS em cima dele */
.nav__ghost {
  visibility: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nav__pills { display: flex; align-items: center; gap: 0.25rem; }

.pill {
  position: relative;
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  padding: 0.375rem 0.4375rem;
  border-radius: 0.25rem;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  background: var(--pill);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  transition: background 0.3s;
}

.pill:hover { background: var(--pill-hover); }

/* o espaçador é o que abre a pílula; a largura é animada pelo GSAP */
.pill__spacer { display: block; width: 0; height: 9px; margin-right: 0; }

/* o rótulo entra deslizando pela esquerda, recortado pelo overflow da pílula */
.pill__label {
  position: absolute;
  top: 0.4375rem;
  left: -200px;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 110%;
}

/* o número é a âncora: nunca se move */
.pill sup {
  font-size: 11px;
  line-height: 140%;
  transform: translateY(2px);
}

/* Controle de som (do site da Great01) ------------------------------------ */
.sound {
  position: fixed;
  top: 0.65rem; left: 0.75rem;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s, opacity 0.4s;
}

.sound:hover { color: var(--fg); }

.sound__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.sound__wave span {
  width: 1.5px;
  height: 3px;
  border-radius: 9999px;
  background: currentColor;
  transition: height 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); /* mola com overshoot */
}

/* Botão de tema ---------------------------------------------------------- */
/* Ponto de 4px que cresce até virar um anel de 96px — o mesmo gesto do botão
   de som da referência, reaproveitado para claro/escuro. */
/* sem caixa: só a bola, maior, solta no canto */
.theme {
  position: fixed;
  top: 0.65rem; right: 0.75rem;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: var(--fg);
  background: none;
  cursor: pointer;
  transition: opacity 0.4s, transform 0.3s var(--ease);
}

.theme:hover { transform: scale(1.12); }

.theme svg { width: 34px; height: 34px; }

/* Animação da bola (Uiverse.io by Type-Delta), adaptada: o estado vem do
   aria-pressed que o JS já mantém. true = claro (bola rola para a direita
   deixando rastros); false = escuro (bola quica até o centro e o risco
   atravessa, "luz apagada"). */
.theme svg .line { transform: scaleX(0); }

.theme[aria-pressed='false'] svg .ballTrace {
  animation: ballTrace_onA 0.3s ease 0s 1 forwards,
    ballTrace_onB 0.1s steps(2, end) calc(0.32s + var(--_appearOffset)) 1 forwards;
}
.theme[aria-pressed='false'] svg .ball {
  animation: ball_onA 0.3s ease 0s 1 forwards,
    ball_onB 0.4s cubic-bezier(0.165, 0.84, 0.45, 1.11) 0.3s 1 forwards;
}

.theme[aria-pressed='true'] svg circle {
  animation: ball_off 0.9s linear 0s 1 forwards;
}
.theme[aria-pressed='true'] svg .line {
  animation: line_off 0.32s cubic-bezier(0.075, 0.82, 0.165, 1) 0.47s 1 forwards;
}

@keyframes ball_off {
  0% { transform: translateX(0px); }
  6.66% { transform: translateX(calc(var(--_toCenterXOffset) * 0.45)); }
  13.33% { transform: translateX(calc(var(--_toCenterXOffset) * 0.77)); }
  20% { transform: translateX(calc(var(--_toCenterXOffset) * 0.9)); }
  26.66% { transform: translateX(calc(var(--_toCenterXOffset) * 0.94)); }
  33.33% { transform: translate(calc(var(--_toCenterXOffset) * 0.965 + 1px), 2px); }
  35% { transform: translate(calc(var(--_toCenterXOffset) * 0.988), 1px); }
  37% { transform: translate(calc(var(--_toCenterXOffset) * 0.991 + 1px), -1px); }
  39% { transform: translate(calc(var(--_toCenterXOffset) * 0.995 - 1px), -2px); }
  41% { transform: translate(calc(var(--_toCenterXOffset) * 0.999 + 1px), -1px); }
  43% { transform: translate(calc(var(--_toCenterXOffset) * 0.75), 1px); }
  45% { transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px); }
  100% { transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px); }
}

@keyframes line_off {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes ball_onA {
  0% { transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px); }
  100% { transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px); }
}

@keyframes ball_onB {
  0% { transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes ballTrace_onA {
  0% { opacity: 1; transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px); }
  99.9% { opacity: 1; transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px); }
  100% { opacity: 0; transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px); }
}
@keyframes ballTrace_onB {
  0% { opacity: 0; transform: translate(0px, 0px); }
  100% { opacity: 1; transform: translate(0px, 0px); }
}

/* Palco ------------------------------------------------------------------ */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  /* o fundo precisa viver AQUI: os canvases são transparentes e o
     mix-blend-difference do HUD blenda contra o backdrop deste stacking
     context — sem background próprio, o blend veria só transparência */
  background: var(--bg);
}

/* fundo de ondas (2D) embaixo, cena WebGL transparente por cima */
#waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#gl { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }

/* Aba Links (DOM) --------------------------------------------------------- */
.lp {
  position: absolute;
  inset: 0;
  z-index: 2;               /* acima do WebGL, abaixo da nav */
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  scrollbar-width: none;    /* rola, mas sem barra — página editorial */
}

.lp::-webkit-scrollbar { display: none; }

.lp.is-off { opacity: 0; pointer-events: none; }

.lp__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.5rem 1.5rem 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

.lp__avatar {
  width: 116px;
  height: 116px;
  border-radius: 9999px;
  object-fit: cover;
  border: 1px solid var(--pill-hover);
}

.lp__brand {
  width: 210px;
  height: auto;
  margin-top: 1.1rem;
}

/* o logotipo DUDS.PNG tem arte própria por tema — o applyTheme troca o src */

.lp__badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 9999px;
  border: 1px solid var(--line, var(--pill-hover));
  background: var(--pill);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 0.8rem;
  color: var(--fg);
}

/* Menu de títulos — os links de verdade */
.lp__menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2.2rem 0 2.4rem;
}

.lp__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  padding: 0.22em 0.3em;
  font-family: var(--font-sans);
  font-weight: 800;
  /* expandida é larga: o clamp garante que "Great 01 Agency" caiba no mobile */
  font-size: clamp(1.35rem, 4.6vw, 2.7rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--muted);
  transition: color 0.35s var(--ease);
}

.lp__item:hover,
.lp__item:focus-visible { color: var(--fg); }

/* Letter roll: máscara de uma linha por letra, duas cópias empilhadas dentro.
   O hover do item sobe a pilha inteira; o atraso por letra (--i) cria a onda. */
.lp__item .ch {
  display: inline-block;
  overflow: hidden;
  height: 1.25em;          /* = line-height do item: mostra só uma cópia */
  vertical-align: top;
}

.lp__item .ch__in {
  display: inline-block;
  transition: transform 0.5s var(--ease);
  transition-delay: calc(var(--i) * 0.025s);
}

.lp__item .ch__in span { display: block; }

.lp__item:hover .ch__in,
.lp__item:focus-visible .ch__in { transform: translateY(-50%); }

.lp__item sup {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1;
  margin-top: 0.9em;
  color: var(--muted);
}

/* entre a logo DUDS.PNG e o badge */
.lp__social {
  display: flex;
  gap: 1.4rem;
  margin-top: 1.2rem;
}

.lp__social a {
  color: var(--muted);
  transition: color 0.3s, transform 0.3s var(--ease);
}

.lp__social a:hover { color: var(--fg); transform: translateY(-2px); }

.lp__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
}

.lp__footer p {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* balance: sem palavra órfã quando o copyright quebra em duas linhas */
.lp__footer-copy { text-wrap: balance; }

/* logo e frase só existem na coluna do mobile */
.lp__footer-logo { display: none; height: 19px; width: auto; }
html[data-theme='light'] .lp__footer-logo { filter: brightness(0); }

.lp__footer-tag { display: none; font-size: 0.8rem; font-weight: 300; }
.lp__footer-tag span { font-weight: 600; color: var(--fg); }

/* Hover Image Reveal: imagem flutuante que segue o cursor sobre os títulos */
.lp-reveal {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;               /* abaixo da nav (55), acima do conteúdo */
  width: 240px;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  /* posição via JS (revealTick); começa fora da tela */
  transform: translate3d(-300px, -300px, 0);
  will-change: transform;
}

.lp-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* sem hover de verdade (touch), a imagem flutuante não existe */
@media (hover: none) {
  .lp-reveal { display: none; }
}

/* Interstitial de redirect ------------------------------------------------
   Clique num link do menu: o fundo desfoca, o texto do link entra pela
   lateral (Skiper72, só a entrada — sem scroll), o sticker arrastável surge
   na coluna da direita e um cronômetro dot-matrix de 8s conta até o redirect. */
.go {
  position: fixed;
  inset: 0;
  z-index: 70;                       /* acima da nav (55) */
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 4vw;
  padding: clamp(1.5rem, 6vw, 6rem);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  opacity: 0;
}

.go[hidden] { display: none; }

.go__close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pill-hover);
  border-radius: 9999px;
  background: var(--pill);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s, transform 0.3s var(--ease);
}

.go__close:hover { color: var(--fg); transform: rotate(90deg); }

.go__title {
  font-weight: 800;
  font-size: clamp(1.6rem, 4.4vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* Skiper72: cada palavra parte da borda direita da TELA e cruza até o seu
   lugar — sem máscara, o trajeto inteiro fica visível */
.go__title .go__w {
  display: inline-block;
  will-change: transform;
}

.go__sub {
  margin-top: 1.1rem;
  max-width: 36ch;
  font-size: 0.95rem;
  color: var(--muted);
}

/* cronômetro dot-matrix, alinhado à esquerda sob o texto */
.go__timer {
  margin-top: 2.2rem;
  color: var(--fg);
  opacity: 0;
  line-height: 0;
}

.go__px {
  fill: currentColor;
  transition: opacity 0.3s ease-out;
}

.go__media {
  display: flex;
  justify-content: center;
  perspective: 800px;          /* como o container do componente original */
}

/* Draggable Sticker (Originkit): a imagem vive num canvas WebGL que descola
   ao pegar e cola ao soltar; tamanho do box e sombra vêm do JS */
.go__stick {
  position: relative;
  cursor: grab;
  touch-action: none;
  user-select: none;
  will-change: transform;
  transform-style: preserve-3d;
  perspective: 800px;
  overflow: visible;
}

.go__stick:active { cursor: grabbing; }

.go__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  overflow: visible;
}

.go__canvas {
  display: block;
  position: absolute;
  pointer-events: none;
}

@media (max-width: 760px) {
  .go {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 2.4rem;
  }
  /* o tamanho do sticker no mobile é calculado no JS (stickerLoad) */
}

/* HUD -------------------------------------------------------------------- */
.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

/* Legendas do HUD em mix-blend-difference, como o rótulo "View" da referência:
   assim continuam legíveis por cima de qualquer imagem, em qualquer tema. O
   blend fica só nestes textos minúsculos — nunca numa barra inteira. */
.hud__meta,
.hud__hint {
  color: #fff;
  mix-blend-mode: difference;
}

/* nos cantos de baixo, não no meio: no meio colidiriam com a nuvem */
.hud__meta {
  position: absolute;
  bottom: 1rem;
  display: flex;
  align-items: center;   /* tamanhos de fonte diferentes entre os spans */
  gap: 0.3em;
  font-size: 13px;
  line-height: 1.4;
}

.hud__meta--l { left: 1.5rem; }
.hud__meta--r { right: 1.5rem; }

/* logo no canto: o SVG é branco e o difference do pai o inverte por tema */
.hud__meta--l img { height: 15.6px; width: auto; display: block; }

/* Com difference, o resultado é |fundo − cor|, então um cinza médio vira cinza
   médio nos dois temas. */
.hud__meta span:last-child {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  color: #8a8a8a;
}

.hud__hint {
  position: absolute;
  bottom: 3rem; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8a8a;
  transition: opacity 0.5s;
}

/* na coreografia do orb, as legendas vão para meia-altura como na referência */
.hud--orb .hud__meta {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* copyright do orb: entra no centro do rodapé depois da contagem */
.hud__copy {
  position: absolute;
  bottom: 1.15rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #8a8a8a;   /* com difference fica cinza médio nos dois temas */
  mix-blend-mode: difference;
  opacity: 0;
}

/* contador do orb: serif no bottom-center, com máscara para o slide de saída */
.orb-count {
  position: absolute;
  bottom: 1.1rem; left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  opacity: 0;
}

.orb-count p {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.2;
  color: #8a8a8a;
  mix-blend-mode: difference;
}

/* Cursor ----------------------------------------------------------------- */
/* Como o "View" da referência: só texto branco em difference, sem caixa —
   legível por cima de qualquer imagem, nos dois temas. */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 70;
  color: #fff;
  mix-blend-mode: difference;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -160%, 0);
  transition: opacity 0.2s;
}

.cursor.is-on { opacity: 1; }

/* Preloader (Skiper8 — words preloader) ----------------------------------- */
/* Sempre no tema claro, independente do modo do site. O blur da saída entra
   por tween no gsap (a cortina inteira, com a barriga oval, ganha névoa como
   a transição do darkmode). */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #0a0a0a;
}

.preloader__word {
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  font-weight: 400;
  opacity: 0;
  animation: pre-word-in 0.5s ease 0.15s forwards;
}

@keyframes pre-word-in { to { opacity: 1; } }

/* a barriga curva que faz a cortina subir redonda e aterrissar reta */
.preloader__curve {
  position: absolute;
  top: 100%;
  left: -10%;
  width: 120%;
  height: 130px;
  background: #ffffff;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* Mobile ----------------------------------------------------------------- */
/* No mobile o rodapé vira coluna centralizada (logo, frase, copyright) e os
   cantos do HUD saem de cena. */
@media (max-width: 1024px) {
  .hud__meta { display: none; }
  .lp__footer-logo { display: block; }
  .lp__footer-tag { display: block; }
}

@media (max-width: 640px) {
  .hud__hint { bottom: 2.5rem; }
  .pill__label { font-size: 14px; }

  /* menu bem grande no mobile — 8.4vw enche a largura sem estourar
     "Orçamentos", o título mais longo */
  .lp__item { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
  .lp__menu { margin: 2.6rem 0 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}