/* gabtavares.com — provisório.
   Azul elétrico sobre creme, tipografia gigante, stickers.
   Archivo Black no display, Space Grotesk nos rótulos, Yellowtail na assinatura.

   Duas notas de arquitetura:

   1. Aqui se usa rotate/scale/translate como propriedades separadas em vez de
      transform. Com transform, a animação de flutuar apagaria o scale do hover
      — a última regra leva tudo. Separadas, elas convivem.

   2. As cores dos SVGs são reescritas por seletor de atributo mais abaixo.
      Assim o modo escuro inverte os stickers junto com a página, sem eu ter
      que duplicar cada desenho. */

:root {
  --cream: #f2efe6;
  --paper: #fbfaf6;
  --ink: #111111;
  --blue: #1b34f5;
  --sobre-azul: #f4f4ff;
  --fantasma: .07;
  --display: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --grotesk: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --script: "Yellowtail", cursive;
}

:root[data-tema="escuro"] {
  --cream: #0e0e12;
  --paper: #191922;
  --ink: #f2efe6;
  --blue: #4257ff;
  --fantasma: .13;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--grotesk);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transition: background-color .35s ease, color .35s ease;
}

/* ---------- home ---------- */

.home {
  display: grid;
  place-items: center;
  position: relative;
}

.ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.ghost span {
  font-family: var(--display);
  font-size: 18vw;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: var(--blue);
  opacity: var(--fantasma);
  rotate: -4deg;
  will-change: translate;
}

.hero {
  position: relative;
  z-index: 2;
  padding: 16px;
  pointer-events: none;
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.045em;
  text-transform: uppercase;
  display: grid;
  justify-items: start;
  will-change: translate;
}

.w-em {
  font-size: min(6.8vw, 100px);
  color: var(--blue);
  position: relative;
}
.w-em::before {
  content: attr(data-t);
  position: absolute;
  left: .045em; top: .06em;
  color: var(--ink);
  opacity: .16;
  z-index: -1;
}

/* Uma linha, sempre: 12vw deixa a palavra em ~94% da largura em qualquer
   tela, então ela encolhe junto com o viewport em vez de quebrar. */
.w-con {
  font-size: min(12vw, 200px);
  color: var(--blue);
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.grp { display: flex; }
.w-con i { font-style: normal; display: inline-block; }
.w-con i:nth-child(4) {
  color: transparent;
  -webkit-text-stroke: 2px var(--blue);
}

/* ---------- stickers ---------- */

.stickers, .stamps { position: absolute; inset: 0; pointer-events: none; }
.stickers { z-index: 3; }
.stamps   { z-index: 6; }

.st {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  will-change: translate, scale;
}
.st svg { display: block; width: 100%; height: auto; overflow: visible; }
.st span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* as cores dos desenhos seguem o tema */
.st [fill="#1b34f5"]              { fill: var(--blue); }
.st [stroke="#1b34f5"]            { stroke: var(--blue); }
.st [fill="#111"]                 { fill: var(--ink); }
.st [stroke="#111"],
.st svg[stroke="#111"]            { stroke: var(--ink); }
.st [fill="#f2efe6"]              { fill: var(--cream); }
.st [fill="#fbfaf6"]              { fill: var(--paper); }

.st-tag    { width: 168px; top: 10%; left: 5%;  rotate: -7deg; }
.st-tag span    { color: var(--sobre-azul); font-size: 21px; padding-right: 14px; }

.st-year   { width: 74px;  top: 6%;  left: 26%; rotate: -10deg; }
.st-year span   { font-family: var(--grotesk); font-weight: 700; color: var(--cream); font-size: 16px; }

.st-arrows { width: 66px;  top: 12%; left: 45%; }

.st-stamp  { width: 108px; top: 7%;  right: 9%; }
.st-stamp span  { color: var(--ink); font-size: 17px; }

.st-burst  { width: 112px; top: 29%; right: 2%; }
.st-burst span  { color: var(--sobre-azul); font-size: 20px; }

.st-stripes{ width: 186px; top: 66%; left: 6%;  rotate: 4deg; }
.st-stripes span{ color: var(--sobre-azul); font-size: 26px; padding-bottom: 12px; }

.st-eyes   { width: 112px; top: 73%; left: 28%; rotate: -5deg; }

.st-script {
  top: 68%; left: 47%;
  rotate: -6deg;
  font-family: var(--script);
  font-size: clamp(38px, 5vw, 68px);
  color: var(--ink);
}
.st-script span {
  position: static;
  display: block;
  font-family: inherit;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.st-card   { width: 146px; top: 64%; right: 6%; rotate: 6deg; }
.st-card span   { font-family: var(--grotesk); font-weight: 700; letter-spacing: .1em; color: var(--blue); font-size: 11px; align-items: end; padding-bottom: 10px; }

/* ---------- seletor de tema ---------- */

.tema {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 100;
  width: 62px; height: 32px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .35s ease, background-color .35s ease;
}
.tema .bolinha {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  transition: translate .3s cubic-bezier(.3,1.4,.4,1), background-color .35s ease;
}
.tema[aria-checked="true"] .bolinha { translate: 30px 0; }
.tema:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); }
.tema:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Cursor próprio: um anel que engorda sobre o que é clicável.
   Fica fora do media query de hover de propósito — se a div só virasse
   position:fixed lá dentro, em tela de toque ela entraria no fluxo do grid e
   desalinharia a palavra central. */
.cursor {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  transition: opacity .2s ease, width .18s ease, height .18s ease,
              margin .18s ease, background-color .18s ease;
}

/* ---------- hover ---------- */

@media (hover: hover) and (pointer: fine) {
  .st { transition: scale .25s cubic-bezier(.2,1.4,.4,1), filter .25s ease; }
  .st:hover {
    scale: 1.16;
    filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--blue) 35%, transparent));
    z-index: 9;
  }

  .cursor { display: block; }
  .cursor.on { opacity: 1; }
  .cursor.grande {
    width: 54px; height: 54px;
    margin: -27px 0 0 -27px;
    background: color-mix(in srgb, var(--blue) 14%, transparent);
  }
  .cursor.clique { background: var(--blue); }
}

/* ---------- marquee ---------- */

.marquee {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  background: var(--blue);
  color: var(--sobre-azul);
  overflow: hidden;
  padding: 10px 0;
  border-top: 3px solid var(--ink);
  pointer-events: none;
  transition: background-color .35s ease, border-color .35s ease;
}
.track { display: flex; width: max-content; }
.track span {
  font-family: var(--display);
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 400;
  letter-spacing: .06em;
  padding-right: 1ch;
  white-space: nowrap;
}

/* ---------- animação ---------- */

@media (prefers-reduced-motion: no-preference) {
  .w-con i {
    animation: dropIn .5s cubic-bezier(.2,.9,.25,1) backwards;
    animation-delay: calc(var(--i) * .045s + .1s);
  }
  .w-em { animation: dropIn .55s cubic-bezier(.2,.9,.25,1) backwards; }
  .ghost span { animation: breathe 9s ease-in-out infinite; }

  .st {
    animation: pop .5s cubic-bezier(.2,1.5,.4,1) var(--d, 0s) backwards,
               float 6s ease-in-out calc(var(--d, 0s) + .5s) infinite;
  }

  .spin      { transform-origin: 60px 60px; animation: spin 14s linear infinite; }
  .spin-slow { transform-origin: 65px 65px; animation: spin 26s linear infinite; }
  .slide     { animation: slide 1.4s linear infinite; }
  .pupil     { animation: look 5s ease-in-out infinite; }
  .track     { animation: scroll 24s linear infinite; }
}

@keyframes dropIn {
  from { opacity: 0; translate: 0 .22em; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes pop   { from { opacity: 0; scale: .7; } }
@keyframes float { 50% { translate: 0 -9px; } }
@keyframes breathe { 50% { scale: 1.05; } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes slide  { to { transform: translateX(24px); } }
@keyframes look   { 0%,100% { transform: translateX(0); } 45% { transform: translateX(-9px); } 70% { transform: translateX(5px); } }
@keyframes scroll { to { transform: translateX(-33.333%); } }

/* ---------- reações ao clique ----------
   Cada sticker reage do seu jeito. A classe sai no fim, para poder repetir. */

.re-flip    { animation: reFlip    .6s ease both; }
.re-spin    { animation: reSpin    .8s cubic-bezier(.3,0,.2,1) both; }
.re-shake   { animation: reShake   .5s ease both; }
.re-pulse   { animation: rePulse   .55s cubic-bezier(.2,1.6,.3,1) both; }
.re-boom    { animation: reBoom    .6s cubic-bezier(.2,1.5,.3,1) both; }
.re-stretch { animation: reStretch .55s cubic-bezier(.2,1.5,.3,1) both; }
.re-tumble  { animation: reTumble  .7s cubic-bezier(.3,0,.2,1) both; }
.re-wiggle  { animation: reWiggle  .6s ease both; }

@keyframes reFlip    { 50% { transform: rotateY(180deg); scale: 1.15; } }
@keyframes reSpin    { to  { transform: rotate(720deg); } }
@keyframes reShake   { 15%,45%,75% { translate: -9px 0; } 30%,60%,90% { translate: 9px 0; } }
@keyframes rePulse   { 45% { scale: 1.35; } }
@keyframes reBoom    { 35% { scale: 1.9; } 70% { scale: .85; } }
@keyframes reStretch { 40% { scale: 1.9 .6; } 75% { scale: .8 1.3; } }
@keyframes reTumble  { to  { transform: rotateX(360deg); } }
@keyframes reWiggle  { 20% { rotate: 12deg; } 45% { rotate: -14deg; } 70% { rotate: 7deg; } }

/* ---------- adesivos colados pelo visitante ---------- */

.stamped { position: absolute; pointer-events: auto; cursor: pointer; }
@keyframes stampIn { from { opacity: 0; scale: .25; } to { opacity: 1; scale: 1; } }

/* ---------- responsivo ----------
   A palavra nunca quebra: 12vw a mantém em uma linha em qualquer largura.
   Os stickers vivem em duas faixas — topo e base — para não cruzarem a
   faixa central, onde a palavra mora. */

@media (min-width: 1600px) {
  .st-tag    { width: 210px; }
  .st-tag span    { font-size: 26px; padding-right: 18px; }
  .st-stamp  { width: 132px; }
  .st-stamp span  { font-size: 21px; }
  .st-stripes{ width: 230px; }
  .st-stripes span{ font-size: 32px; padding-bottom: 15px; }
  .st-card   { width: 180px; }
  .st-card span   { font-size: 13px; }
  .st-burst  { width: 140px; }
  .st-burst span  { font-size: 25px; }
  .st-eyes   { width: 140px; }
  .st-year   { width: 92px; }
  .st-year span   { font-size: 20px; }
  .st-arrows { width: 84px; }
}

@media (max-width: 1024px) {
  .st-tag    { width: 140px; }
  .st-tag span    { font-size: 18px; padding-right: 12px; }
  .st-stamp  { width: 92px; }
  .st-stamp span  { font-size: 15px; }
  .st-stripes{ width: 156px; }
  .st-stripes span{ font-size: 22px; padding-bottom: 10px; }
  .st-card   { width: 124px; }
  .st-card span   { font-size: 9px; }
  .st-burst  { width: 96px; }
  .st-burst span  { font-size: 17px; }
  .st-eyes   { width: 96px; }
  .st-year   { width: 64px; }
  .st-year span   { font-size: 14px; }
  .st-arrows { width: 56px; }
}

/* retrato alto: as faixas se aproximam do centro, senão sobra um vazio grande */
@media (max-width: 1000px) and (min-height: 850px) {
  .st-tag    { top: 15%; }
  .st-year   { top: 11%; }
  .st-stamp  { top: 14%; }
  .st-arrows { top: 19%; }
  .st-burst  { top: 31%; }
  .st-card   { top: 67%; }
  .st-stripes{ top: 70%; }
  .st-script { top: 73%; }
  .st-eyes   { top: 79%; }
}

@media (max-width: 720px) {
  .ghost span { font-size: 34vw; }
  .w-em  { font-size: 7vw; }

  .st-tag    { width: 120px; top: 11%; left: 4%; }
  .st-tag span    { font-size: 16px; padding-right: 10px; }
  .st-year   { width: 56px;  top: 30%; left: 9%; }
  .st-year span   { font-size: 13px; }
  .st-stamp  { width: 78px;  top: 11%; right: 5%; }
  .st-stamp span  { font-size: 12px; }
  .st-arrows { width: 48px;  top: 30%; left: auto; right: 14%; }
  .st-burst  { width: 84px;  top: 62%; right: 6%; }
  .st-burst span  { font-size: 15px; }
  .st-stripes{ width: 140px; top: 65%; left: 4%; }
  .st-stripes span{ font-size: 19px; padding-bottom: 9px; }
  .st-eyes   { width: 88px;  top: 78%; left: 7%; }
  .st-script { top: 75%; left: auto; right: 7%; font-size: 44px; }
  .st-card   { display: none; }
}

@media (max-width: 400px) {
  .st-tag    { width: 104px; }
  .st-tag span    { font-size: 14px; padding-right: 9px; }
  .st-arrows { display: none; }
  .st-script { font-size: 38px; top: 76%; }
}

/* deitado, ou janela baixa: sobra pouca altura, então menos elementos */
@media (max-height: 540px) and (min-width: 721px) {
  .w-em  { font-size: min(5vw, 54px); }
  .w-con { font-size: min(10.5vw, 120px); }
  .ghost span { font-size: 15vw; }
  .st-year, .st-arrows, .st-eyes, .st-script { display: none; }
  .st-tag    { width: 116px; top: 8%; }
  .st-tag span    { font-size: 15px; padding-right: 10px; }
  .st-stamp  { width: 76px;  top: 8%; }
  .st-stamp span  { font-size: 12px; }
  .st-stripes{ width: 128px; top: 68%; }
  .st-stripes span{ font-size: 18px; padding-bottom: 8px; }
  .st-card   { width: 100px; top: 60%; }
  .st-burst  { width: 78px; }
  .st-burst span  { font-size: 14px; }
}

@media (max-height: 420px) and (max-width: 720px) {
  .st-stripes, .st-eyes, .st-script, .st-burst, .st-year { display: none; }
}

/* ---------- 404 ---------- */

.stage { max-width: 46ch; padding: 24px; position: relative; z-index: 2; }
.eyebrow {
  margin: 0 0 1.5rem;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--blue);
}
.stage h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 11vw, 5.5rem);
  line-height: .9; letter-spacing: -.04em; font-weight: 400; text-transform: uppercase;
}
.line { margin: 1.25rem 0 0; font-size: 1.05rem; line-height: 1.5; max-width: 34ch; }
a { color: var(--blue); text-underline-offset: .2em; }