/* reprodução do design "meet the artist" (canva, 1366px de largura).
   no desktop, cada elemento usa as coordenadas do canva multiplicadas por --u (1 px do canva).
   no celular, as seções viram fluxo normal empilhado. */

/*FONTES*/
@font-face { font-family: "Texturina"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/texturina-latin-900-italic.woff2") format("woff2"); }
@font-face { font-family: "Tiny5"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/tiny5-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
/*/FONTES*/

:root {
  --preto: #000000;
  --branco: #ffffff;
  --gelo: #ecf0f2;
  --laranja: #f26a1b;
  --laranja-claro: #ff8a3d;
  --f-titulo: "Texturina", "Palatino Linotype", Georgia, serif;
  --f-pixel: "Tiny5", "Courier New", ui-monospace, monospace;
  --f-mono: "IBM Plex Mono", "Courier New", ui-monospace, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--f-mono);
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px dashed var(--laranja-claro); outline-offset: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  background: var(--laranja); color: var(--preto); padding: .5rem .8rem; font-weight: 700;
}
.pular:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ---------- elementos comuns ---------- */
.s { position: relative; overflow: hidden; }
.fade { position: absolute; pointer-events: none; }

.t-texto {
  font-family: var(--f-mono);
  text-transform: uppercase;
  color: var(--branco);
  text-align: justify;
  hyphens: none;
}
.t-auron, .t-servicos span, .t-contato span {
  display: inline-block;
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform-origin: 0 0;
  filter: url(#aspero);
}
.t-auron {
  color: transparent;
  -webkit-text-stroke: 2px var(--branco);
  transform: scaleX(1.13);
}
@supports not (-webkit-text-stroke: 1px black) { .t-auron { color: var(--branco); } }
.t-domingues, .t-sub, .t-chamada, .t-email { font-family: var(--f-pixel); text-transform: uppercase; line-height: 1; white-space: nowrap; }
.papel, .t-handles, .t-tel, .t-lista { font-family: var(--f-mono); text-transform: uppercase; }

.flor { color: var(--branco); pointer-events: none; }
.voluta { color: var(--laranja); pointer-events: none; }

.s-hero { background: var(--preto) url("img/textura-tecido.webp") repeat; background-size: 200px 200px; }
.fade--hero { left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0), #000 92%); }
.s-sobre { background: var(--laranja) url("img/textura-laranja.webp") center / cover no-repeat; }
.fade--topo { left: 0; right: 0; top: 0; background: linear-gradient(to bottom, #000, rgba(0,0,0,0)); }
.fade--base { left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 96%); }
.s-servicos { background: var(--branco); color: var(--preto); }
.t-servicos span { color: var(--preto); transform: scaleX(1.528); }
.pixel-scroll { fill: var(--preto); transform: scaleX(-1); }
.t-sub { color: var(--preto); }
.t-lista { color: var(--preto); display: flex; flex-wrap: wrap; }
.t-lista li:not(:last-child)::after { content: ",\00a0"; }
.t-lista a:hover { color: #d13900; }
/* galeria e ilustração: mesma composição do canva em qualquer largura de tela */
.pagina { container-type: inline-size; --u: calc(100cqw / 1366); }
.s-galeria { background: var(--branco); height: calc(573 * var(--u)); padding: 0 !important; }
.s-ilustracao { background: var(--preto); height: calc(967 * var(--u)); padding: 0 !important; }
.s-galeria > .obra, .s-ilustracao > .obra { position: absolute; }
.obra--flyer, .obra--volta, .obra--define { top: 0; height: calc(575.7 * var(--u)); }
.obra--flyer { left: 0; width: calc(460.3 * var(--u)); }
.obra--define { left: calc(886 * var(--u)); width: calc(480 * var(--u)); }
.obra--volta { left: calc(460.3 * var(--u)); width: calc(458.6 * var(--u)); z-index: 1; }
.obra--ilustracao { left: calc(-11.7 * var(--u)); top: calc(-4.7 * var(--u)); width: calc(1378.8 * var(--u)); height: calc(983.6 * var(--u)); }
.s-contato { background: #0b0b0b url("img/textura-contato.webp") center / cover no-repeat; color: var(--gelo); }
.t-contato span { color: var(--gelo); transform: scaleX(1.56); }
.s-contato a:hover { color: var(--laranja-claro); }
.t-handles a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; }
.t-handles a:hover { text-decoration-color: currentColor; }

/* obras clicáveis */
.obra {
  display: block; padding: 0; margin: 0; border: 0; background: none;
  cursor: zoom-in; overflow: hidden; position: relative;
}
.obra img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .4s ease; }
.obra:hover img { transform: scale(1.02); }
.obra:focus-visible { outline-offset: -6px; }
.obra--poster { box-shadow: -10px 14px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3); overflow: visible; }
.obra--poster:hover img { transform: none; filter: brightness(1.04); }
.obra--ilustracao img { object-position: center; }

/* visor (lightbox) */
.visor {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh; margin: 0;
}
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: rgba(0,0,0,.92); }
.visor__img { max-width: min(92vw, 1600px); max-height: 86vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.visor__fechar {
  position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px));
  font: 15px/1 var(--f-pixel); text-transform: uppercase; letter-spacing: .06em;
  color: var(--branco); background: var(--preto); border: 2px solid var(--branco);
  padding: .7em 1em; cursor: pointer;
}
.visor__fechar:hover { background: var(--laranja); color: var(--preto); border-color: var(--laranja); }

.aviso {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0;
  font: 15px/1 var(--f-pixel); text-transform: uppercase; letter-spacing: .05em;
  background: var(--laranja); color: var(--preto); padding: .8em 1.2em;
  transition: opacity .2s, transform .2s; pointer-events: none;
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ================= desktop: coordenadas do canva ================= */
@media (min-width: 761px) {
  .s > * { position: absolute; margin: 0; }
  .s > .sr { position: absolute; }

  /* hero 1366 x 768 */
  .s-hero { height: calc(768 * var(--u)); background-size: calc(200 * var(--u)) calc(200 * var(--u)); }
  .fade--hero { top: calc(221.6 * var(--u)); height: auto; }
  .flor--esq { left: calc(42 * var(--u)); top: calc(26 * var(--u)); width: calc(345 * var(--u)); height: calc(284 * var(--u)); }
  .flor--dir { left: calc(1036 * var(--u)); top: calc(52 * var(--u)); width: calc(296 * var(--u)); height: calc(312 * var(--u)); transform: scaleX(-1); }
  .titulo { inset: 0; position: absolute; }
  .titulo > span { position: absolute; }
  .t-auron { left: calc(285 * var(--u)); top: calc(158.8 * var(--u)); font-size: calc(250.2 * var(--u)); -webkit-text-stroke-width: max(1.5px, calc(2.6 * var(--u))); }
  .t-domingues { left: calc(842 * var(--u)); top: calc(429.1 * var(--u)); font-size: calc(37.3 * var(--u)); }
  .papeis { inset: 0; position: absolute; }
  .papel { position: absolute; top: calc(675.5 * var(--u)); width: calc(460.3 * var(--u)); text-align: center; font-size: calc(26.1 * var(--u)); line-height: 1.2; }
  .papel--1 { left: calc(87.5 * var(--u)); }
  .papel--2 { left: calc(449.4 * var(--u)); }
  .papel--3 { left: calc(793.5 * var(--u)); }

  /* sobre 1366 x 1532 */
  .s-sobre { height: calc(1532 * var(--u)); }
  .fade--topo { height: calc(79.2 * var(--u)); }
  .fade--base { top: calc(1327.4 * var(--u)); height: auto; }
  .t-texto { font-size: calc(24.41 * var(--u)); line-height: 1.4; }
  .t-lead { left: calc(40.6 * var(--u)); top: calc(78.6 * var(--u)); width: calc(1284.9 * var(--u)); }
  .obra--poster { left: calc(55 * var(--u)); top: calc(220 * var(--u)); width: calc(771 * var(--u)); height: calc(1151 * var(--u)); }
  .t-col { left: calc(917.9 * var(--u)); width: calc(407.6 * var(--u)); }
  .t-col--1 { top: calc(207.5 * var(--u)); }
  .t-col--2 { top: calc(1027.6 * var(--u)); }

  /* serviços 1366 x 300 */
  .s-servicos { height: calc(300 * var(--u)); }
  .t-servicos { left: calc(43.8 * var(--u)); top: calc(24.6 * var(--u)); font-size: calc(125.4 * var(--u)); line-height: 1; }
  .pixel-scroll { left: calc(732 * var(--u)); top: calc(108 * var(--u)); width: calc(585 * var(--u)); height: calc(63 * var(--u)); }
  .t-sub { left: calc(40 * var(--u)); top: calc(183 * var(--u)); font-size: calc(33 * var(--u)); }
  .t-lista { left: calc(40.6 * var(--u)); top: calc(240.9 * var(--u)); width: calc(1284.9 * var(--u)); font-size: calc(24.41 * var(--u)); line-height: 1.4; }


  /* ilustração 1366 x 967 */

  /* contato 1366 x 858 */
  .s-contato { height: calc(858 * var(--u)); }
  .voluta--dir { left: calc(1080 * var(--u)); top: calc(-18 * var(--u)); width: calc(300 * var(--u)); height: calc(400 * var(--u)); }
  .voluta--esq { left: calc(-20 * var(--u)); top: calc(540 * var(--u)); width: calc(310 * var(--u)); height: calc(330 * var(--u)); transform: scale(-1, -1); }
  .t-contato { left: calc(55 * var(--u)); top: calc(28.7 * var(--u)); font-size: calc(125.4 * var(--u)); line-height: 1; }
  .t-handles { left: calc(64 * var(--u)); top: calc(178 * var(--u)); font-size: calc(28.76 * var(--u)); line-height: 1; white-space: nowrap; }
  .t-chamada { left: calc(64 * var(--u)); top: calc(232 * var(--u)); font-size: calc(29 * var(--u)); }
  .orn-contato { left: calc(58 * var(--u)); top: calc(284 * var(--u)); width: calc(300 * var(--u)); height: calc(32.3 * var(--u)); }
  .t-tel .rotulo, .t-email .rotulo { font-size: calc(17 * var(--u)); }
  .t-tel { left: calc(763.2 * var(--u)); top: calc(707.3 * var(--u)); width: calc(557.6 * var(--u)); text-align: right; font-size: calc(28.08 * var(--u)); line-height: .95; }
  .t-email { left: calc(120 * var(--u)); top: calc(762.1 * var(--u)); width: calc(1200.4 * var(--u)); text-align: right; font-size: calc(37.5 * var(--u)); }
}

/* ================= celular: fluxo empilhado ================= */
@media (max-width: 760px) {
  .pagina { --g: max(16px, env(safe-area-inset-left, 0px)); --gr: max(16px, env(safe-area-inset-right, 0px)); }
  .s { padding-left: var(--g); padding-right: var(--gr); }

  .s-hero { padding-block: 92px 36px; display: grid; gap: 28px; }
  .fade--hero { top: 40%; }
  .flor { position: absolute; width: 112px; height: 92px; }
  .flor--esq { left: 6px; top: 8px; }
  .flor--dir { right: 6px; top: 14px; transform: scaleX(-1); }
  .titulo { position: relative; display: grid; justify-items: center; }
  .t-auron { font-size: 30vw; -webkit-text-stroke-width: 1.5px; transform-origin: 50% 0; }
  .t-domingues { justify-self: end; font-size: 6vw; margin-top: 4px; }
  .papeis { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: 13px; letter-spacing: .04em; }

  .s-sobre { padding-block: 56px 96px; display: grid; gap: 26px; }
  .fade--topo { height: 48px; }
  .fade--base { height: 90px; }
  .t-texto { position: relative; font-size: 14px; line-height: 1.55; }
  .obra--poster { position: relative; width: 100%; aspect-ratio: 771 / 1151; }

  .s-servicos { padding-block: 22px 30px; display: grid; gap: 12px; }
  .t-servicos { overflow: visible; height: 21vw; }
  .t-servicos span { font-size: 14.5vw; }
  .pixel-scroll { width: 100%; height: auto; }
  .t-sub { font-size: 18px; }
  .t-lista { font-size: 14px; line-height: 1.6; }


  .s-contato { padding-block: 26px 40px; display: grid; gap: 10px; min-height: 520px; align-content: start; }
  .voluta { position: absolute; }
  .voluta--dir { right: -8px; top: -4px; width: 120px; height: 132px; }
  .voluta--esq { left: -6px; bottom: -4px; width: 104px; height: 132px; transform: scale(-1, -1); }
  .t-contato { position: relative; height: 24vw; }
  .t-contato span { font-size: 17.5vw; }
  .t-handles { position: relative; font-size: 14px; }
  .t-chamada { position: relative; font-size: 15px; white-space: normal; }
  .orn-contato { position: relative; width: 190px; height: auto; margin-top: 6px; }
  .t-tel .rotulo, .t-email .rotulo { font-size: 11px; }
  .t-tel, .t-email { position: relative; text-align: right; }
  .t-tel { margin-top: 170px; font-size: 15px; }
  .t-email { font-size: 19px; white-space: normal; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ================= interações ================= */

/* letras de auron */
.t-auron .letra { display: inline-block; transition: color .25s, translate .25s; }
.t-auron .letra:hover { color: var(--branco); translate: 0 -4%; }
.js-intro .t-auron .letra { animation: letra-entra .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 110ms + 250ms); }
@keyframes letra-entra { from { opacity: 0; translate: 0 18%; } }
.js-intro .t-domingues { animation: piscar-entra .8s steps(4) .95s both; }
@keyframes piscar-entra { 0%, 50% { opacity: 0; } 25%, 75%, 100% { opacity: 1; } }

/* arabescos se desenhando */
#flor-tracos path, #voluta-tracos path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js-intro #flor-tracos path { animation: desenhar 2.4s cubic-bezier(.45,.05,.2,1) both; }
@keyframes desenhar { from { stroke-dashoffset: 1; } }

/* coração */
.coracao { display: inline-block; animation: bater 1.6s ease-in-out infinite; color: var(--laranja-claro); }
@keyframes bater { 0%, 40%, 100% { scale: 1; } 15% { scale: 1.25; } 28% { scale: 1.1; } }

/* papéis: sublinhado ao passar o mouse */
.papel { background: linear-gradient(var(--laranja), var(--laranja)) no-repeat 50% 100% / 0 2px; transition: background-size .3s; padding-bottom: .15em; }
.papel:hover { background-size: 60% 2px; }

/* títulos "fervem" ao passar o mouse */
.t-servicos span:hover, .t-contato span:hover { filter: url(#aspero-vivo); }

/* lista de serviços: seleção em pixel */
.t-lista a { transition: background-color .12s steps(2), color .12s steps(2), box-shadow .12s steps(2); }
.t-lista a:hover, .t-lista a:focus-visible { background: var(--preto); color: var(--branco); box-shadow: 0 0 0 .14em var(--preto); outline: none; }
.s-servicos:hover .pixel-scroll { animation: pixel-onda 1s steps(4) infinite; }
@keyframes pixel-onda { 0%, 100% { translate: 0 0; } 25% { translate: 0 -3px; } 75% { translate: 0 3px; } }


/* dica no e-mail */
.t-email a { position: relative; }
.t-email a::before {
  content: attr(data-dica); position: absolute; right: 0; bottom: 115%;
  font: 13px/1 var(--f-pixel); letter-spacing: .05em; white-space: nowrap;
  background: var(--laranja); color: var(--preto); padding: .5em .7em;
  opacity: 0; translate: 0 6px; transition: opacity .15s, translate .15s; pointer-events: none;
}
.t-email a:hover::before, .t-email a:focus-visible::before { opacity: 1; translate: 0 0; }

/* volutas giram de leve com o mouse (variável vinda do JS) */
.voluta { transition: rotate .6s ease-out; }
.voluta--dir { rotate: calc(var(--giro, 0) * 6deg); }
.voluta--esq { rotate: calc(var(--giro, 0) * -6deg); }

/* visor com setas */
.visor__quadro { margin: 0; display: grid; justify-items: center; gap: 12px; }
.visor__legenda { font: 15px/1 var(--f-pixel); letter-spacing: .1em; color: var(--branco); }
.visor__seta {
  position: fixed; top: 50%; translate: 0 -50%;
  font: 28px/1 var(--f-pixel); color: var(--branco); background: var(--preto);
  border: 2px solid var(--branco); width: 52px; height: 52px; cursor: pointer;
}
.visor__seta:hover { background: var(--laranja); color: var(--preto); border-color: var(--laranja); }
.visor__seta--ant { left: calc(14px + env(safe-area-inset-left, 0px)); }
.visor__seta--prox { right: calc(14px + env(safe-area-inset-right, 0px)); }
.visor[open] .visor__img { animation: abrir-arte .3s ease-out; }
@keyframes abrir-arte { from { opacity: 0; scale: .96; } }

/* revelação e parallax com a rolagem (só em navegadores que suportam; sem isso, tudo já fica visível) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela { animation: surgir linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes surgir { from { opacity: 0; translate: 0 calc(40px); } }
    .titulo { animation: afastar linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes afastar { to { translate: 0 18%; opacity: .25; } }
    .flor--esq, .flor--dir { animation: flutuar linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes flutuar { to { translate: 0 -40px; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-intro .t-auron .letra, .js-intro .t-domingues, .js-intro #flor-tracos path, .coracao { animation: none !important; }
}

/* contato: detalhes */
.arroba, .sep, .destaque { color: var(--laranja); }
.destaque { font-style: normal; }
.sep { margin: 0 .35em; }
.t-handles a { transition: color .2s; }
.orn-contato { fill: var(--laranja); opacity: .9; }
.rotulo {
  display: inline-block; font-family: var(--f-pixel); text-transform: uppercase; letter-spacing: .1em;
  color: var(--preto); background: var(--laranja); padding: .25em .5em .2em; margin-right: .9em;
  vertical-align: .3em; line-height: 1;
}
.t-tel [data-fill], .t-email [data-fill] {
  background: linear-gradient(var(--laranja), var(--laranja)) no-repeat 100% 100% / 0 2px;
  transition: background-size .3s ease; padding-bottom: .12em;
}
.t-tel a:hover [data-fill], .t-email a:hover [data-fill], .t-tel a:focus-visible [data-fill], .t-email a:focus-visible [data-fill] { background-size: 100% 2px; }
.s-contato .t-tel a:hover, .s-contato .t-email a:hover { color: var(--gelo); }