/* Carlos Hilário — portfólio em vídeo controlado por scroll.
   Direção: editorial. Manrope reta para os rótulos e textos de apoio,
   Instrument Serif itálico como display. Roxo só como acento, nunca decoração. */

:root{
  --ink:#f6f4f9;
  --ink-dim:#c5bed2;
  --accent:#b98ce4;
  --hair:rgba(246,244,249,.22);
  --sans:'Manrope',system-ui,-apple-system,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --shadow-text:0 2px 20px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.6);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{margin:0;background:#000;scrollbar-width:none;overscroll-behavior:none;overflow-x:clip}
html::-webkit-scrollbar{display:none}
/* A altura total define quanto é preciso rolar para ir do início ao fim do vídeo.
   svh + dvh mantém a distância estável quando as barras do navegador móvel somem. */
body{margin:0;height:600vh;height:calc(500svh + 100dvh);background:#000;touch-action:pan-y pinch-zoom;
  font-family:var(--sans);-webkit-font-smoothing:antialiased}

/* O app.js desenha o quadro atual neste canvas no modo cover. */
.scene{position:fixed;top:0;left:0;display:block;width:100%;height:100vh;height:100dvh;
  background:#000;pointer-events:none}

/* ---------- base das legendas ---------- */
.caption{position:fixed;z-index:1;color:var(--ink);pointer-events:none;opacity:0;visibility:hidden;
  will-change:opacity,transform;text-shadow:var(--shadow-text);overflow-wrap:break-word}

.eyebrow{margin:0;font-family:var(--sans);font-size:clamp(.6875rem,.8vw,.8125rem);font-weight:600;
  line-height:1;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}

/* ---------- intro ---------- */
.intro{top:max(11dvh,calc(env(safe-area-inset-top) + 24px));
  right:max(7vw,env(safe-area-inset-right));width:min(46vw,720px);text-align:left;
  opacity:1;visibility:visible}
.intro .eyebrow{margin-bottom:clamp(14px,1.8vh,22px)}
.intro h1{margin:0;font-weight:400;line-height:1}
.intro .lede{display:block;font-family:var(--sans);font-size:clamp(1.0625rem,1.8vw,1.625rem);
  font-weight:500;letter-spacing:.015em;line-height:1.2;color:var(--ink-dim);
  margin-bottom:clamp(4px,.7vh,10px)}
.intro .name{display:block;font-family:var(--serif);font-style:italic;
  font-size:clamp(3rem,7.2vw,7rem);line-height:.94;letter-spacing:-.025em;color:var(--ink)}
/* A régua puxa a linha do cargo para a horizontal e tira o ar de coluna empilhada. */
.intro .role{display:flex;align-items:center;gap:clamp(10px,1.1vw,16px);
  margin:clamp(20px,2.6vh,32px) 0 0;font-family:var(--sans);
  font-size:clamp(.75rem,.95vw,.9375rem);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.4;color:var(--ink-dim)}
.intro .role::before{content:'';flex:0 0 clamp(28px,3.4vw,56px);height:1px;background:var(--hair)}

/* ---------- sobre ---------- */
/* Fica à direita: nesse trecho o Carlos ocupa a esquerda do quadro e a metade
   direita do topo é a área mais escura e vazia do vídeo. */
.about{left:auto;right:max(7vw,env(safe-area-inset-right));
  top:max(12dvh,calc(env(safe-area-inset-top) + 24px));width:min(42vw,640px);text-align:left}
.about .statement{margin:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.75rem,3.6vw,3.5rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--ink);text-wrap:balance}
.about .statement em{font-style:italic;color:var(--accent)}
.about .tags{margin:clamp(18px,2.2vh,26px) 0 0;font-family:var(--sans);
  font-size:clamp(.6875rem,.85vw,.875rem);font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;line-height:1.5;color:var(--ink-dim)}

/* ---------- abertura dos trabalhos ---------- */
/* Neste trecho as janelas flutuantes ocupam a faixa do meio do quadro (metade
   central da altura). Sobram pretas a faixa de cima e a de baixo; fica na de
   baixo, que é a mais escura e onde um título de seção cai naturalmente. */
.work-title{left:auto;right:max(7vw,env(safe-area-inset-right));top:auto;
  bottom:max(7dvh,calc(env(safe-area-inset-bottom) + 20px));
  width:min(46vw,720px);text-align:left}
.work-title h2{margin:0;font-weight:400}
.work-title .eyebrow{display:block;margin-bottom:clamp(10px,1.4vh,18px);color:var(--ink-dim)}
.work-title em{display:block;font-family:var(--serif);font-style:italic;
  font-size:clamp(3rem,7vw,6.5rem);line-height:1;letter-spacing:-.025em;color:var(--ink)}

/* ---------- contato (fim do scroll) ---------- */
/* O último trecho da rolagem dissolve o vídeo neste preto. O contato não
   disputa espaço com as janelas flutuantes do final: ele nasce no preto. */
.blackout{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:2;
  will-change:opacity}
.contact{left:0;right:0;top:50%;bottom:auto;transform:translateY(-50%);z-index:3;
  text-align:center;padding:0 clamp(1.25rem,6vw,4rem)}
.contact-inner{will-change:transform}
.contact .eyebrow{margin-bottom:clamp(12px,1.6vh,18px)}
.contact-title{margin:0 0 clamp(26px,3.4vh,40px);font-family:var(--serif);font-style:italic;
  font-weight:400;font-size:clamp(2rem,4.6vw,4rem);line-height:1.06;letter-spacing:-.025em;
  color:var(--ink);text-wrap:balance}
/* Quebra fixa: numa linha só, a frase encosta nas bordas do celular. */
.contact-title em{display:block;font-style:italic;color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.4vw,18px)}

/* Ícone dentro do próprio invólucro redondo, seta de saída no dela. */
.btn{pointer-events:auto;display:inline-flex;align-items:center;gap:clamp(9px,.85vw,13px);
  padding:9px 9px 9px 11px;border-radius:999px;border:1px solid var(--hair);
  background:rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--ink);text-decoration:none;text-shadow:none;font-family:var(--sans);
  font-size:clamp(.8125rem,.95vw,.9375rem);font-weight:600;letter-spacing:.05em;line-height:1;
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.btn-icon{display:grid;place-items:center;flex:none;width:2.3em;height:2.3em;border-radius:999px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  transition:background .45s var(--ease)}
.btn-icon svg{width:1.05em;height:1.05em}
.btn-label{padding-inline:3px}
.btn-go{display:grid;place-items:center;flex:none;width:1.9em;height:1.9em;border-radius:999px;
  color:var(--ink-dim);transition:transform .45s var(--ease),color .45s var(--ease)}
.btn-go svg{width:.95em;height:.95em}

.btn:hover{background:rgba(255,255,255,.13);border-color:rgba(246,244,249,.42);transform:translateY(-2px)}
.btn:hover .btn-icon{background:rgba(255,255,255,.16)}
.btn:hover .btn-go{transform:translate(2px,-2px);color:var(--ink)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.btn-primary{background:var(--accent);border-color:transparent;color:#1b1024}
.btn-primary .btn-icon{background:rgba(27,16,36,.15);border-color:rgba(27,16,36,.2)}
.btn-primary .btn-go{color:rgba(27,16,36,.7)}
.btn-primary:hover{background:#cba6f0;border-color:transparent}
.btn-primary:hover .btn-icon{background:rgba(27,16,36,.22)}
.btn-primary:hover .btn-go{color:#1b1024}

/* ---------- telas estreitas ---------- */
@media(max-width:700px){
  .intro{top:max(8dvh,calc(env(safe-area-inset-top) + 20px));
    left:32vw;right:max(6vw,env(safe-area-inset-right));width:auto}
  .intro .eyebrow{letter-spacing:.24em;margin-bottom:12px}
  .intro .lede{font-size:clamp(.9375rem,3.6vw,1.25rem)}
  .intro .name{font-size:clamp(2.25rem,10.5vw,3.75rem);line-height:.98;letter-spacing:-.02em}
  .intro .role{margin-top:18px;font-size:clamp(.6875rem,2.5vw,.8125rem);letter-spacing:.16em}
  .intro .role::before{flex-basis:20px}

  .about{left:max(7vw,env(safe-area-inset-left));right:max(6vw,env(safe-area-inset-right));
    top:max(9dvh,calc(env(safe-area-inset-top) + 20px));width:auto}
  .about .statement{font-size:clamp(1.5rem,7.4vw,2.5rem);line-height:1.14}
  .about .tags{margin-top:16px;font-size:clamp(.625rem,2.5vw,.75rem);letter-spacing:.2em}

  .work-title{left:max(7vw,env(safe-area-inset-left));right:max(6vw,env(safe-area-inset-right));
    top:auto;bottom:max(7dvh,calc(env(safe-area-inset-bottom) + 20px));width:auto}
  .work-title em{font-size:clamp(2.5rem,12vw,4.25rem)}

  .contact-title{font-size:clamp(1.5rem,7vw,2.25rem)}
  .actions{flex-direction:column;align-items:stretch;gap:10px}
  .btn{justify-content:flex-start;width:100%}
  .btn-go{margin-left:auto}
}

/* ---------- celular deitado ---------- */
@media(max-height:500px) and (orientation:landscape){
  .intro{top:max(6dvh,env(safe-area-inset-top));width:min(52vw,560px)}
  .intro .name{font-size:clamp(2rem,5.4vw,3.25rem)}
  .intro .role{margin-top:12px}
  .about{top:max(6dvh,env(safe-area-inset-top));width:min(52vw,560px)}
  .about .statement{font-size:clamp(1.25rem,3.4vw,2rem)}
  .about .tags{margin-top:12px}
  .work-title{bottom:max(6dvh,calc(env(safe-area-inset-bottom) + 12px));
    left:auto;right:max(6vw,env(safe-area-inset-right));width:min(46vw,520px)}
  .work-title em{font-size:clamp(2rem,5.4vw,3.25rem)}
  .contact-title{font-size:clamp(1.25rem,3.6vw,2rem);margin-bottom:18px}
}

@media(prefers-reduced-motion:reduce){
  .caption,.contact-inner{transform:none!important;will-change:opacity}
  .btn,.btn-icon,.btn-go{transition:none}
}