/* ---- 0.1 CORES E FONTES (tokens) ---- */
  /* --ink / --ink-text     = faixa escura e sua cor de texto            */
  /* --paper / --paper-text = faixa clara e sua cor de texto             */
  /* --brass                = cor de destaque (dourado, ligado aos "Ouro") */
  :root{
    --ink:#14151a; --ink-text:#ece9e1; --ink-text-dim:#8d8c93;
    --paper:#e7e4dc; --paper-2:#d9d5cb; --paper-text:#17171a; --paper-text-dim:#67655d;
    --brass:#c8952f; --brass-deep:#8f6a1f;
    --line-ink:rgba(236,234,226,0.14); --line-paper:rgba(23,23,26,0.14);
    --mono:ui-monospace,"SF Mono","Cascadia Mono","Consolas",monospace;
    --sans:-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
    --display:'Jost',-apple-system,"Segoe UI",Arial,sans-serif;
    --chrome-bg:var(--paper); --chrome-text:var(--paper-text);
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark){ :root{ --chrome-bg:var(--ink); --chrome-text:var(--ink-text); } }
  :root[data-theme="dark"]{ --chrome-bg:var(--ink); --chrome-text:var(--ink-text); }
  :root[data-theme="light"]{ --chrome-bg:var(--paper); --chrome-text:var(--paper-text); }
  @font-face{ font-family:"Jost"; font-style:normal; font-weight:300; font-display:swap; src:url('../assets/fonts/jost300.woff2') format('woff2'); }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; background:var(--chrome-bg); color:var(--chrome-text); }
  body{ font-family:var(--sans); }
  ::selection{ background:var(--brass); color:#14151a; }
  a{ color:inherit; text-decoration:none; }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:4px; }
  img{ max-width:100%; display:block; }
  h1,h2,h3{ text-wrap:balance; margin:0; }
  p{ margin:0; }
  html{ scroll-behavior:smooth; }

  /* ---- 0.2 FAIXAS DE SEÇÃO (fundo claro/escuro que alterna) ---- */
  .scene{ position:relative; width:100%; padding:min(12vw,6.5rem) min(7vw,3.5rem); display:flex; flex-direction:column; }
  .scene[data-band="ink"]{ background:var(--ink); color:var(--ink-text); }
  .scene[data-band="paper"]{ background:var(--paper); color:var(--paper-text); }

  /* ---- 0.3 MENU FLUTUANTE (pílulas no topo) ---- */
  .pillnav{ position:fixed; top:1.25rem; left:0; right:0; z-index:60; display:flex; justify-content:center; gap:.5rem; pointer-events:none; }
  .pill{ pointer-events:auto; display:inline-flex; align-items:center; gap:.5rem; height:2.6rem; padding:0 1.1rem; border-radius:999px; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; border:1px solid transparent; cursor:pointer; background:none; transition:background .35s ease,color .35s ease,border-color .35s ease; }
  .pillnav.on-paper .pill{ background:rgba(23,23,26,0.06); color:var(--paper-text); border-color:rgba(23,23,26,0.1); }
  .pillnav.on-ink .pill{ background:rgba(236,234,226,0.08); color:var(--ink-text); border-color:rgba(236,234,226,0.14); }
  .pill.mark{ font-family:var(--sans); font-weight:800; letter-spacing:0; font-size:.85rem; padding:0 .9rem; }
  .pill.mark img{ height:1.6rem; display:block; }
  .pillnav.on-paper .pill.mark img{ filter:brightness(0); }
  .pill.status{ min-width:13rem; justify-content:center; }
  .pill.status .label{ font-family:var(--display); font-weight:300; letter-spacing:.1em; font-size:.78rem; }
  .pill.menu-btn{ font-size:1rem; width:2.6rem; justify-content:center; padding:0; }

  /* ---- 0.4 MENU CHEIO DE TELA (abre ao clicar no ☰) ---- */
  .menu-overlay{ position:fixed; inset:0; z-index:80; background:var(--ink); color:var(--ink-text); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; opacity:0; visibility:hidden; transition:opacity .4s ease; }
  .menu-overlay.open{ opacity:1; visibility:visible; }
  .overlay-close{ position:absolute; top:1.4rem; right:1.6rem; background:none; border:none; color:inherit; font-size:1.4rem; cursor:pointer; }
  .overlay-list{ list-style:none; margin:0; padding:0; text-align:center; }
  .overlay-list li{ margin:.55rem 0; }
  .overlay-list a{ font-family:var(--display); font-weight:300; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.15rem,3.4vw,1.8rem); display:inline-flex; gap:.9rem; align-items:baseline; }
  .overlay-list .current{ color:var(--brass); }

  /* ---- 1.0 BLOCO [1] ABERTURA (hero) ---- */
  .hero{ min-height:92vh; position:relative; overflow:hidden; }
  .hero-video-wrap{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
  .hero-video-frame{ position:absolute; top:-205px; bottom:-205px; left:0; right:0; width:100%; height:calc(100% + 410px); border:0; pointer-events:none; }
  .hero-video-bg{ position:absolute; inset:0; background-repeat:no-repeat; background-image:url(../assets/images/thumb-motion-1920x1080.jpg); background-size:cover; background-position:center; }
    @keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
    .hero-overlay{ position:absolute; inset:0; background:rgba(10,10,10,0.72); z-index:1; }
  .hero-content{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1.8rem; height:100%; padding-top:min(28vw,13rem); }
  .hero .kicker{ color:#fff; opacity:.82; }
  .hero .sub{ color:#fff; }
  .kicker{ font-family:var(--display); font-weight:300; font-size:.8rem; letter-spacing:.14em; color:var(--brass-deep); text-transform:uppercase; }
  .hero h1{ font-family:var(--display); font-size:clamp(2rem,5.8vw,4.2rem); line-height:1.1; font-weight:300; letter-spacing:.01em; max-width:22ch; text-transform:uppercase; color:#fff; }
  .hero .sub{ max-width:46ch; font-size:1.02rem; line-height:1.55; }

  /* ---- 2.0 BLOCO [2] IMAGEM QUE EXPANDE AO ROLAR ---- */

  /* ---- 3.0 BLOCO [3] GRADE DE TRABALHOS (4 cards) ---- */
  .work-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem; max-width:74rem; margin:0 auto; width:100%; }
  .work-card{ background:var(--paper-2); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
  .work-card, .work-card:visited{ color:var(--paper-text); }
  .work-img{ aspect-ratio:16/10; overflow:hidden; }
  .work-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
  .work-card:hover .work-img img{ transform:scale(1.16) rotate(-5deg); }
  .work-card h3{ font-family:var(--display); font-size:1.35rem; font-weight:300; text-transform:uppercase; padding:1.2rem 1.3rem 0; letter-spacing:.01em; }
  .work-card p{ padding:.5rem 1.3rem 1.3rem; color:var(--paper-text-dim); font-size:.92rem; line-height:1.5; }
  .work-card .go{ padding:0 1.3rem 1.3rem; font-family:var(--display); font-weight:300; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); }

  /* ---- 4.0 BLOCO [4] TEASER SOBRE MIM ---- */
  .about-grid{ display:grid; grid-template-columns:minmax(0,20rem) minmax(0,1fr); gap:3rem; max-width:66rem; margin:0 auto; align-items:center; width:100%; }
  .about-portrait{ border-radius:16px; overflow:hidden; aspect-ratio:1/1; }
  .about-portrait img{ width:100%; height:100%; object-fit:cover; }
  .about-text h2{ font-family:var(--display); font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:300; text-transform:uppercase; margin-bottom:1rem; letter-spacing:.02em; }
  .about-text p{ font-size:1.02rem; line-height:1.65; max-width:42ch; }
  [data-band="ink"] .about-text p{ color:var(--ink-text-dim); }
  [data-band="paper"] .about-text p{ color:var(--paper-text-dim); }
  .btn{ font-family:var(--display); font-weight:300; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; padding:.85rem 1.4rem; border-radius:999px; border:1px solid; display:inline-flex; margin-top:1.4rem; transition:background .2s ease,border-color .2s ease,color .2s ease; }
  [data-band="ink"] .btn{ border-color:var(--line-ink); }
  [data-band="paper"] .btn{ border-color:var(--line-paper); }
  .btn:hover{ border-color:var(--brass); color:var(--brass); }

  /* ---- 5.0 BLOCO [5] CONTATO / RODAPÉ ---- */
  .contact{ min-height:90vh; justify-content:center; align-items:center; text-align:center; gap:1.2rem; }
  .credits{ display:flex; flex-direction:column; gap:1rem; width:100%; max-width:32rem; margin:1.4rem auto 0; }
  .credit-row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-bottom:1px solid; padding-bottom:.85rem; }
  [data-band="ink"] .credit-row{ border-bottom-color:var(--line-ink); }
  [data-band="paper"] .credit-row{ border-bottom-color:var(--line-paper); }
  .credit-row .role{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; }
  [data-band="ink"] .credit-row .role{ color:var(--ink-text-dim); }
  [data-band="paper"] .credit-row .role{ color:var(--paper-text-dim); }
  .credit-row a{ font-size:1.08rem; font-weight:700; transition:color .2s ease; }
  .credit-row a:hover{ color:var(--brass-deep); }
  .fine-print{ font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; margin-top:2rem; }
  [data-band="ink"] .fine-print{ color:var(--ink-text-dim); }
  [data-band="paper"] .fine-print{ color:var(--paper-text-dim); }

  /* ---- 0.5 ANIMAÇÃO DE ENTRADA (fade + subida ao rolar) ---- */
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
  .reveal.in-view{ opacity:1; transform:none; }
  .reveal2{ transition-delay:.1s; } .reveal3{ transition-delay:.2s; } .reveal4{ transition-delay:.3s; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
    .reveal{ opacity:1; transform:none; }
    html{ scroll-behavior:auto; }
  }
  @media (max-width: 860px){
    .work-grid{ grid-template-columns:1fr; }
    .about-grid{ grid-template-columns:1fr; }
    .about-portrait{ max-width:13rem; margin:0 auto; }
    .pill.status{ min-width:0; }
    .pill.status .label{ display:none; }
    .hero{ padding-top:min(38vw,9rem); }
  }