/* ==========================================================================
   Mariana Rocha — Portfolio
   Recriado a partir do design do Canva "Portfolio MMR 2026".

   COMO FUNCIONA O LAYOUT
   Cada página do Canva tem 1024.5 x 576 "pontos" por tela (16:9).
   Cada tela aqui é um <section class="frame">, e cada elemento dentro dela
   é posicionado com as MESMAS coordenadas do Canva, usando variáveis:

     style="--x:58; --y:42; --w:300; --h:120"   (posição e tamanho, em pontos)
     style="--fs:14"                            (tamanho da fonte, em pontos)

   Tudo escala junto com a largura da tela, igual ao site do Canva.
   ========================================================================== */

/* Fonte original do Canva: Neue Montreal (Pangram Pangram).
   Se você colocar os arquivos em assets/fonts/, ela é usada automaticamente.
   Senão, cai para Inter Tight (Google Fonts), que é bem parecida. */
@font-face {
  font-family: "Neue Montreal";
  src: local("Neue Montreal"), local("NeueMontreal-Regular"),
       url("../fonts/NeueMontreal-Regular.woff2") format("woff2"),
       url("../fonts/NeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: local("Neue Montreal Bold"), local("NeueMontreal-Bold"),
       url("../fonts/NeueMontreal-Bold.woff2") format("woff2"),
       url("../fonts/NeueMontreal-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --ink: #000000;
  --font: "Neue Montreal", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Páginas escuras (Inside My Mind) */
body.dark { --bg: #000000; --ink: #ffffff; }

/* ---------- Tela 16:9 ---------- */
.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1024.5 / 576;
  overflow: hidden;
  container-type: inline-size;
}
/* Tela que cabe inteira na janela (usada na Home): encolhe para
   caber na altura da tela, centralizada, sem cortar nada. */
.frame.fit {
  width: min(100%, calc((100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 1024.5 / 576));
  margin-inline: auto;
}

/* 1 ponto do Canva, em unidades da tela */
.frame * { --u: calc(100cqw / 1024.5); }

/* ---------- Elemento posicionado ---------- */
.el {
  position: absolute;
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
}
.el[style*="--w"] { width: calc(var(--w) * var(--u)); }
.el[style*="--h"] { height: calc(var(--h) * var(--u)); }

/* Imagem simples ocupando a caixa inteira */
img.el, video.el { display: block; object-fit: cover; }

/* Caixa que recorta (como o "frame" do Canva).
   A <img> dentro dela usa coordenadas relativas à caixa. */
.crop { overflow: hidden; }
.crop > img {
  position: absolute;
  display: block;
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  max-width: none;
}
.flip { transform: scaleX(-1); }

/* ---------- Texto ---------- */
.t {
  font-size: calc(var(--fs, 14) * var(--u));
  line-height: 1.24;
  letter-spacing: -0.025em;   /* aproxima a largura da Neue Montreal */
  white-space: nowrap;
}
.t.wrap { white-space: normal; }
.t.up { text-transform: uppercase; }
.t.bold { font-weight: 700; }
.t.white { color: #fff; }
.t.center { transform: translateX(-50%); text-align: center; }
.t.spaced { letter-spacing: 0.14em; }
.t.right { transform: translateX(-100%); }

a { color: inherit; text-decoration: none; }
a.link, .link a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { opacity: .6; }

/* ---------- Home: vídeo sem controles ---------- */
.reel {
  overflow: hidden;
  background: #eee url("../reel-poster.jpg") center / cover no-repeat;
}
.reel video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}
.reel video::-webkit-media-controls,
.reel video::-webkit-media-controls-panel,
.reel video::-webkit-media-controls-play-button,
.reel video::-webkit-media-controls-start-playback-button,
.reel video::-webkit-media-controls-overlay-play-button,
.reel video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}

/* ---------- About: ícones de contato ---------- */
.icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* ---------- Inside My Mind: paleta de cores ---------- */
.swatch { outline: 1px solid #000; }