/* =============================================================
   Hypage — tokens globais + reset + base
   ÚNICO arquivo que contém valores de cor. Tudo vive em :root.
   As variáveis herdam para dentro de TODOS os Shadow DOMs.
   ============================================================= */

:root {
/* ---------------------------------------------------------
   CANAIS RGB BASE — fonte única de toda a paleta.
   Altere estes canais para recolorir o site inteiro.
   --------------------------------------------------------- */
--bg-rgb: 5, 2, 2;                 /* #050202 — fundo principal          */
--surface-rgb: 27, 11, 10;         /* #1b0b0a — cards / elevações         */
--surface-alt-rgb: 17, 7, 7;       /* #110707 — superfície alternativa   */
--surface-hover-rgb: 42, 20, 18;   /* #2a1412 — hover de cards            */
--text-rgb: 255, 255, 255;         /* branco — texto principal            */
--primary-rgb: 255, 74, 45;        /* #ff4a2d — topo do gradiente         */
--secondary-rgb: 177, 35, 24;      /* #b12318 — base do gradiente         */
--accent-mid-rgb: 220, 52, 34;      /* #dc3422 — tom intermediário         */
--shadow-rgb: 0, 0, 0;              /* base das sombras                    */

/* ---------------------------------------------------------
   CORES DERIVADAS (semânticas)
   --------------------------------------------------------- */
--bg: rgb(var(--bg-rgb));
--surface: rgb(var(--surface-rgb));
--surface-alt: rgb(var(--surface-alt-rgb));
--surface-hover: rgb(var(--surface-hover-rgb));

--text: rgb(var(--text-rgb));
--text-muted: rgba(var(--text-rgb), 0.62);
--text-faint: rgba(var(--text-rgb), 0.40);

--primary: rgb(var(--primary-rgb));
--secondary: rgb(var(--secondary-rgb));
--accent-mid: rgb(var(--accent-mid-rgb));

--border: rgba(var(--text-rgb), 0.10);
--border-strong: rgba(var(--text-rgb), 0.18);
--divider: rgba(var(--text-rgb), 0.06);

/* gradiente de marca — assinatura visual */
--gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
--gradient-soft: linear-gradient(135deg,
                   rgba(var(--primary-rgb), 0.18) 0%,
                   rgba(var(--secondary-rgb), 0.18) 100%);

/* header — translúcido, ganha opacidade no scroll */
--header-bg: rgba(var(--bg-rgb), 0.55);
--header-bg-solid: rgba(var(--bg-rgb), 0.88);

/* botões */
--btn-text: rgb(var(--bg-rgb));           /* texto escuro sobre pílula clara */
--btn-ghost-border: rgba(var(--text-rgb), 0.24);

/* sombras / brilhos */
--shadow-sm: 0 1px 3px rgba(var(--shadow-rgb), 0.40);
--shadow-md: 0 8px 24px rgba(var(--shadow-rgb), 0.50);
--shadow-lg: 0 24px 60px rgba(var(--shadow-rgb), 0.55);
--glow: 0 0 40px rgba(var(--primary-rgb), 0.35);
--glow-strong: 0 0 60px rgba(var(--primary-rgb), 0.50);

/* máscara de fade nas bordas do marquee */
--marquee-fade: linear-gradient(90deg,
                  transparent 0%, var(--bg) 6%,
                  var(--bg) 94%, transparent 100%);

  /* ---------------------------------------------------------
     TIPOGRAFIA
     --------------------------------------------------------- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(2rem, 6.5vw, 4rem);
  --fs-h2: clamp(1.75rem, 4.5vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2.6vw, 1.6rem);
  --fs-sub: clamp(1.05rem, 2.2vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --fw-thin: 300;
  --fw-reg: 400;
  --fw-mid: 500;
  --fw-bold: 700;

  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-body: 1.6;

  /* ---------------------------------------------------------
     ESPAÇAMENTO
     --------------------------------------------------------- */
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --section-y: clamp(3.5rem, 10vw, 7.5rem);

  /* ---------------------------------------------------------
     LAYOUT
     --------------------------------------------------------- */
  --container: 1140px;
  --container-pad: 1.25rem;
  --header-h: 68px;

  /* ---------------------------------------------------------
     RAIOS
     --------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---------------------------------------------------------
     MOVIMENTO
     --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur: 0.35s;
  --dur-slow: 0.6s;
  --marquee-speed: 32s;
}

@media (min-width: 768px) {
  :root { --container-pad: 2.5rem; }
}

/* =============================================================
   RESET / BASE GLOBAL (light DOM)
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
}
/* rolagem suave nativa como fallback; Lenis assume quando ativo */
html:not(.lenis) { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-thin);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }

::selection { background: var(--primary); color: var(--bg); }

/* hosts dos blocos ocupam a largura toda por padrão */
v-header, v-hero, v-services, v-studio, v-cases,
v-testimonial, v-results, v-marquee, v-final, v-footer { display: block; }

/* âncora com deslocamento para o header fixo (fallback nativo) */
[id] { scroll-margin-top: var(--header-h); }

/* =============================================================
   LENIS — estilos requeridos pela lib
   ============================================================= */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* =============================================================
   INTRO (overlay em light DOM, injetado pelo app.js)
   ============================================================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--bg);
  transform-origin: center;
  will-change: transform, opacity;
}
.intro__word {
  position: relative;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 9vw, 5rem);
  letter-spacing: 0.04em;
  color: var(--text);
  opacity: 0;
  transform: translateY(12px);
  animation: intro-word 0.6s var(--ease) 0.05s forwards;
}
.intro__logo {
  height: clamp(2rem, 9vw, 5rem);
  width: auto;
}
.intro__word::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.28em;
  height: 4px;
  width: 0;
  border-radius: 4px;
  background: var(--gradient);
  box-shadow: var(--glow);
  animation: intro-line 0.6s var(--ease) 0.35s forwards;
}
.intro.is-leaving {
  animation: intro-leave 0.5s var(--ease) forwards;
}
@keyframes intro-word {
  to { opacity: 1; transform: none; }
}
@keyframes intro-line {
  to { width: 100%; }
}
@keyframes intro-leave {
  to { transform: scale(1.08); opacity: 0; visibility: hidden; }
}
/* a hero "entra" junto com a saída do overlay */
.intro-active v-hero { transform: scale(1.04); }
v-hero {
  transition: transform 0.7s var(--ease);
  transform-origin: center top;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
  .intro, .intro__word, .intro__word::after { animation: none !important; }
  .intro-active v-hero { transform: none; }
  v-hero { transition: none; }
}