/* ==========================================================================
   Bruna Veiga — Link na Bio
   Referência: frame "Home" do Figma (grade de conteúdo de 1600px = 100rem).

   Índice
   1. Fontes
   2. Tokens
   3. Base
   4. Utilitários
   5. Componentes compartilhados
   6. Cabeçalho
   7. Grade da página
   8. Hero
   9. Links
   10. Rodapé
   ========================================================================== */

/* 1. Fontes
   ========================================================================== */

/* Fonte variável auto-hospedada (subconjunto latin cobre todo o português). */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens
   Valores em cqi são relativos à grade da página (.page-grid) e atingem
   exatamente as medidas do Figma quando a grade tem 1600px.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Cores */
  --color-bg: #0b0b0d;
  --color-surface: #121213;
  --color-surface-raised: #1c1c1d;
  --color-surface-hover: #252527;
  --color-line: #2c2c2c;
  --color-line-strong: #38383a;
  --color-outline: #b4b4b4;
  --color-text: #f1f1ef;
  --color-text-muted: #aaa;
  --color-text-subtle: #7a7a7a; /* Figma: #3b3b3b (1,7:1). Ajustado para 4,6:1 — WCAG AA. */
  --color-accent: #c1fb35;
  --color-accent-hover: #d2ff66;
  --color-on-accent: #0b0b0d;

  /* Tipografia */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-xs: 0.75rem; /* 12px */
  --fs-base: 1rem; /* 16px */
  --fs-lead: clamp(1rem, 0.875rem + 0.375cqi, 1.125rem); /* 18px */
  --fs-title: clamp(1.5rem, 1rem + 1.25cqi, 2rem); /* 32px */
  --fs-display: clamp(2rem, 1.5rem + 2.2cqi, 3.25rem); /* 52px */

  --lh-display: 1.115; /* 58/52 */
  --lh-heading: 1.23; /* 64/52 */
  --lh-title: 1.2;
  --lh-base: 1.6; /* 25.6/16 */
  --lh-relaxed: 1.5; /* 27/18 */
  --lh-compact: 1.25; /* 20/16 */

  --ls-tight: -0.05em; /* -2.6px em 52px, -1.6px em 32px */
  --ls-snug: -0.005em;
  --ls-wide: 0.06em;

  /* Espaçamento */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;

  --space-cell-x: clamp(1.25rem, 7cqi, 7rem); /* 112px */
  --space-cell-y: clamp(2rem, 3.25cqi, 3.25rem); /* 52px */
  --space-media: clamp(1rem, 3.25cqi, 3.25rem); /* 52px */

  /* Layout */
  --gutter: clamp(1rem, 4vw, 4rem);
  --container: 100rem; /* 1600px */
  --container-header: 71rem; /* 1136px */
  --header-height: clamp(4.5rem, 3rem + 5vw, 7.5375rem); /* 120.6px */
  --footer-height: 5.8125rem; /* 93px */
  --card-min-height: clamp(12rem, 16.4375cqi, 16.4375rem); /* 263px */
  --card-icon: clamp(3rem, 2rem + 2.9cqi, 4.1875rem); /* 67px */

  /* Bordas */
  --border-width: 1px;
  --border: var(--border-width) solid var(--color-line);
  --radius-card: 0.625rem; /* 10px */
  --radius-photo: clamp(1.25rem, 2cqi, 2rem); /* 32px */
  --radius-pill: 62.5rem;

  /* Movimento */
  --duration: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Navegadores sem container queries: mesma escala, relativa à viewport. */
@supports not (container-type: inline-size) {
  :root {
    --fs-lead: clamp(1rem, 0.875rem + 0.375vw, 1.125rem);
    --fs-title: clamp(1.5rem, 1rem + 1.25vw, 2rem);
    --fs-display: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
    --space-cell-x: clamp(1.25rem, 7vw, 7rem);
    --space-cell-y: clamp(2rem, 3.25vw, 3.25rem);
    --space-media: clamp(1rem, 3.25vw, 3.25rem);
    --card-min-height: clamp(12rem, 16.4375vw, 16.4375rem);
    --card-icon: clamp(3rem, 2rem + 2.9vw, 4.1875rem);
    --radius-photo: clamp(1.25rem, 2vw, 2rem);
  }
}

/* 3. Base
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Alvo do skip link: recebe foco programático, sem anel visual. */
[tabindex="-1"]:focus {
  outline: none;
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

/* 4. Utilitários
   ========================================================================== */

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.accent {
  color: var(--color-accent);
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-start: var(--space-s);
  z-index: 10;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-card);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  translate: 0 -200%;
  transition: translate var(--duration) var(--ease);
}

.skip-link:focus {
  translate: 0 0;
}

/* 5. Componentes compartilhados
   ========================================================================== */

.cell {
  padding: var(--space-cell-y) var(--space-cell-x);
  border-block-end: var(--border);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem; /* 9px */
  min-block-size: 1.9375rem; /* 31px */
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.04;
}

.eyebrow::before {
  content: "";
  flex: none;
  inline-size: 0.375rem;
  block-size: 0.375rem;
  background-color: var(--color-accent);
}

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
}

.display--loose {
  line-height: var(--lh-heading);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.tag {
  padding: 0.25rem var(--space-s);
  border: var(--border-width) solid var(--color-outline);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-snug);
}

/* 6. Cabeçalho
   ========================================================================== */

.site-header {
  border-block-end: var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  inline-size: min(100% - 2 * var(--gutter), var(--container-header));
  min-block-size: calc(var(--header-height) - var(--border-width)); /* altura do Figma inclui a borda */
  margin-inline: auto;
}

.site-header__logo {
  border-radius: 2px;
}

.site-header__logo img {
  inline-size: clamp(8.5rem, 6rem + 5vw, 10.625rem); /* 170px */
}

.lang-switch {
  display: flex;
  flex: none;
  border: var(--border);
  border-radius: var(--radius-pill);
}

.lang-switch__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) 0.875rem;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-wide);
  transition:
    color var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.lang-switch__btn:first-child {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.lang-switch__btn:last-child {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.lang-switch__btn[aria-pressed="true"] {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  cursor: default;
}

/* O SVG tem 22×16 (inclui o anel de 1px); a margem negativa mantém a caixa de 20×14 do Figma. */
.lang-switch__flag {
  flex: none;
  inline-size: 1.375rem;
  block-size: 1rem;
  margin: -1px;
}

.lang-switch__btn[aria-pressed="false"] .lang-switch__flag {
  opacity: 0.55;
}

@media (hover: hover) {
  .lang-switch__btn[aria-pressed="false"]:hover {
    color: var(--color-text);
  }
}

/* 7. Grade da página
   ========================================================================== */

.page-grid {
  flex: 1;
  inline-size: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  border-inline: var(--border);
  container-type: inline-size;
}

/* 8. Hero
   ========================================================================== */

.hero {
  display: grid;
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-l);
}

.hero__intro {
  max-inline-size: 29.75rem; /* 476px */
}

.hero__lead {
  margin-block-start: var(--space-m);
  color: var(--color-text-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
}

.hero__lead strong {
  font-weight: var(--fw-bold);
}

.hero__media {
  display: grid;
  place-items: center;
  padding: var(--space-cell-x);
}

.portrait {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 696 / 430;
  overflow: hidden;
  border-radius: var(--radius-photo);
  background-color: var(--color-accent);
}

/* Mesmo enquadramento do Figma: foto quadrada com 111,6% da altura, centralizada e ancorada no topo. */
.portrait img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: auto;
  max-inline-size: none;
  block-size: 111.6%;
  aspect-ratio: 1;
  translate: -50% 0;
}

@media (min-width: 64em) {
  .hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__content {
    min-block-size: calc(27.5cqi + 2 * var(--space-cell-y)); /* 544px */
  }

  .hero__media {
    padding: var(--space-media);
    border-inline-start: var(--border);
  }
}

/* 9. Links
   ========================================================================== */

.links__header {
  display: grid;
}

.links__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.links__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  color: var(--color-text-muted);
}

.signature {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}

.tagline {
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-snug);
}

@media (min-width: 64em) {
  .links__header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* No Figma o título começa em 144px (112 × 9/7), avança 4px sobre o padding inferior
     (linha de 207px) e o bloco ao lado tem 89,5px de respiro lateral (112 × 0,8). */
  .links__heading {
    padding-inline-start: calc(var(--space-cell-x) * 9 / 7);
    padding-block-end: calc(var(--space-cell-y) - 0.25rem);
  }

  .links__aside {
    padding-inline: calc(var(--space-cell-x) * 0.8);
    border-inline-start: var(--border);
  }
}

.link-grid {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-s);
}

.link-grid > li {
  display: grid;
}

@media (min-width: 48em) {
  .link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.link-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-l);
  min-block-size: var(--card-min-height);
  padding: var(--space-cell-y) var(--space-cell-x);
  border-radius: var(--radius-card);
  background-color: var(--color-surface-raised);
  text-decoration: none;
  transition:
    background-color var(--duration) var(--ease),
    translate var(--duration) var(--ease);
}

.link-card--muted {
  background-color: var(--color-surface);
}

.link-card--accent {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

@media (hover: hover) {
  .link-card:hover {
    background-color: var(--color-surface-hover);
    translate: 0 -2px;
  }

  .link-card--accent:hover {
    background-color: var(--color-accent-hover);
  }
}

.link-card:active {
  translate: 0 0;
}

.link-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

/* Ícone de 67px transborda 3,5px da linha de 60px, como no Figma. */
.link-card__icon {
  flex: none;
  inline-size: var(--card-icon);
  block-size: var(--card-icon);
  margin-block: -0.21875rem;
}

.link-card__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-tight);
}

.link-card__desc {
  color: var(--color-text-muted);
  letter-spacing: var(--ls-snug);
}

.link-card--accent .link-card__desc {
  color: inherit;
}

/* Ilustração decorativa das ferramentas (posições e rotações extraídas do Figma, card de 775×263). */
.tools {
  --tile: clamp(3.5rem, 11.382cqi, 5.5133rem); /* 88.2px */

  position: relative;
  min-block-size: var(--card-min-height);
  overflow: hidden;
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-card);
  background-color: var(--color-surface-raised);
  container-type: inline-size;
}

.tool {
  position: absolute;
  inset-block-start: var(--y);
  inset-inline-start: var(--x);
  display: grid;
  place-items: center;
  inline-size: calc(var(--tile) * var(--scale, 1));
  aspect-ratio: 1;
  padding: calc(var(--tile) * 0.2267); /* 20px */
  border: var(--border-width) solid var(--color-outline);
  border-radius: calc(var(--tile) * 0.1814); /* 16px */
  translate: -50% -50%;
  rotate: var(--r);
  transition:
    border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.tool img {
  inline-size: 100%;
}

/* Modo física: ativado pelo JS (data-physics) quando o Matter.js carrega.
   A posição e a rotação passam a ser escritas em `transform` a cada frame;
   sem JS, a composição estática do Figma acima continua valendo. */
.tools[data-physics] {
  -webkit-user-select: none;
  user-select: none;
}

.tools[data-physics] .tool {
  inset-block-start: 0;
  inset-inline-start: 0;
  translate: none;
  rotate: none;
  cursor: grab;
  touch-action: none; /* arrastar o tile não rola a página no touch */
  will-change: transform;
}

.tools[data-physics] .tool img {
  pointer-events: none;
}

@media (hover: hover) {
  .tools[data-physics] .tool:hover {
    border-color: var(--color-text);
  }
}

.tools[data-physics] .tool[data-dragging] {
  border-color: var(--color-accent);
  background-color: var(--color-surface-raised);
  box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.45);
  cursor: grabbing;
}

.tool--claude {
  --x: 13.84%;
  --y: 33.32%;
  --r: 6.15deg;
}

.tool--codex {
  --x: 23.49%;
  --y: 68.36%;
  --r: -7.22deg;
}

.tool--figma {
  --x: 88.97%;
  --y: 74.39%;
  --r: 9.51deg;
  --scale: 0.9235; /* 81.5px: ícone menor no Figma */
}

.tool--photoshop {
  --x: 75.56%;
  --y: 79.07%;
  --r: 7.62deg;
}

.tool--chatgpt {
  --x: 80.43%;
  --y: 44.49%;
  --r: -12.64deg;
}

.tool--illustrator {
  --x: 9.54%;
  --y: 80.26%;
  --r: -12.65deg;
}

/* 10. Rodapé
   ========================================================================== */

.site-footer {
  border-block-start: var(--border);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  inline-size: min(100% - 2 * var(--gutter), var(--container));
  min-block-size: calc(var(--footer-height) - var(--border-width)); /* altura do Figma inclui a borda */
  margin-inline: auto;
  padding-block: var(--space-m);
  color: var(--color-text-subtle);
  font-weight: var(--fw-medium);
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-tight);
}

.site-footer__top {
  border-radius: 2px;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  transition: color var(--duration) var(--ease);
}

@media (hover: hover) {
  .site-footer__top:hover {
    color: var(--color-text);
  }
}