/* leolsilveira.com — pixel-art landing page. No build step. */

:root {
  --ink: #2a1f3d;
  --ink-deep: #1c1429;
  --cream: #fbf1dc;
  --muted: #5b4a6b;
  --yellow: #ffc93c;
  --yellow-d: #d99a14;
  --orange: #ff9a1f;
  --orange-d: #c96d0a;
  --red: #a01c1c;
  --red-d: #6e1010;
  --gold: #ffe14d;
  --soil: #5a3a22;
  --soil-d: #4f321d;
  --cloud: #f6f9ff;
  --cloud-shade: #dce6fa;
  --focus: #ff4fa3;
  --display: 'Press Start 2P', ui-monospace, monospace;
  --body: 'Pixelify Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--ink);
}

img { max-width: 100%; }

a:focus-visible {
  outline: 4px dashed var(--focus);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  font-weight: 600;
}
.skip:focus { top: 16px; }

/* ---------- Sprites (sprite strips animated with steps()) ---------- */

.sprite {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: pixelated;
}

.sprite--coin {
  width: 32px;
  height: 40px;
  background-image: url(/assets/sprites/coin.png);
  background-size: 384px 40px;
}
.sprite--coin-sm {
  width: 24px;
  height: 30px;
  background-image: url(/assets/sprites/coin.png);
  background-size: 288px 30px;
}
.sprite--runner {
  width: 72px;
  height: 90px;
  background-image: url(/assets/sprites/runner.png);
  background-size: 288px 90px;
}
.sprite--cyclist {
  width: 72px;
  height: 90px;
  background-image: url(/assets/sprites/cyclist.png);
  background-size: 144px 90px;
}
.sprite--goose {
  width: 96px;
  height: 80px;
  background-image: url(/assets/sprites/goose.png);
  background-size: 192px 80px;
}
/* Vote pela Floresta: the Guardiã (4 run frames) and the guardians (2 idle frames), 24×24 art at 3× */
.sprite--guardia {
  width: 96px;
  height: 96px;
  background-image: url(/assets/sprites/guardians/guardia.png);
  background-size: 384px 96px;
}
/* Biela Bike Fit: Biela the mechanic (idle, blink, cheer, cheer-talk), 24×29 art at 3× */
.sprite--mechanic {
  width: 72px;
  height: 87px;
  background-image: url(/assets/sprites/mechanic.png);
  background-size: 288px 87px;
}
.sprite--npc {
  --fw: 72px;
  width: var(--fw);
  height: var(--fw);
  background-image: var(--npc);
  background-size: calc(var(--fw) * 2) var(--fw);
}

/* ---------- Hero / sky ---------- */

.sky {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom,
    #5aa9ec 0 18%, #68b1ee 18% 36%, #7bbcf1 36% 52%,
    #92c8f4 52% 66%, #abd5f6 66% 78%, #c6e2f7 78% 100%);
}

.cloud {
  position: absolute;
  width: var(--w);
  height: var(--h);
  background: var(--cloud);
  box-shadow: inset 0 -5px 0 var(--cloud-shade);
}
.cloud::before {
  content: '';
  position: absolute;
  left: 22%;
  bottom: 100%;
  width: 48%;
  height: 80%;
  background: var(--cloud);
}
.cloud--a { --w: 132px; --h: 24px; left: 9%; top: 140px; }
.cloud--b { --w: 168px; --h: 28px; right: 11%; top: 116px; }
.cloud--c { --w: 88px; --h: 18px; left: 4%; top: 330px; }

.nav {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 24px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 10px;
}

.logo {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 1px;
  color: #fff;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-shadow: 2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink), 0 4px var(--ink);
}

.nav__right {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.hud {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 8px;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--display);
  font-size: 11px;
}

.chip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  text-decoration: none;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
.chip-link:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.chip-link:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.chip-link--light { border-color: var(--cream); box-shadow: 0 4px 0 #000; }
.chip-link--light:hover { box-shadow: 0 6px 0 #000; }
.chip-link--light:active { box-shadow: 0 1px 0 #000; }

/* Language switch: EN / PT segmented chip */
.lang {
  display: inline-flex;
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  background: var(--cream);
}
.lang__btn {
  min-width: 44px;
  min-height: 38px;
  padding: 0 10px;
  margin: 0;
  font-family: var(--display);
  font-size: 11px;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.lang__btn + .lang__btn { border-left: 3px solid var(--ink); }
.lang__btn:hover { background: #fff; }
.lang__btn[aria-pressed="true"] {
  color: var(--yellow);
  background: var(--ink);
  cursor: default;
}
.lang__btn:focus-visible {
  outline: 4px dashed var(--focus);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

.intro {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 88px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.tag-dark {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 1px;
  color: #fff;
  background: var(--ink);
  padding: 8px 12px;
}

.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 6.4vw, 60px);
  line-height: 1.25;
  color: var(--yellow);
  text-shadow:
    4px 0 var(--ink), -4px 0 var(--ink), 0 4px var(--ink), 0 -4px var(--ink),
    4px 4px var(--ink), -4px 4px var(--ink), 4px -4px var(--ink), -4px -4px var(--ink),
    0 9px var(--ink);
}

.plate {
  margin: 0;
  max-width: 620px;
  padding: 16px 22px;
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  font-size: 21px;
  font-weight: 500;
}

/* ---------- Buttons ---------- */

.btn {
  --btn-bg: var(--yellow);
  --btn-d: var(--yellow-d);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 16px 22px 20px;
  font-family: var(--display);
  font-size: 14px;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 3px solid var(--ink);
  box-shadow: inset 0 -6px 0 var(--btn-d);
  text-decoration: none;
  transition: transform 80ms steps(2);
}
.btn:hover { filter: brightness(1.07); }
.btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 -2px 0 var(--btn-d);
}
.btn--card {
  margin-top: auto;
  align-self: flex-start;
  font-size: 13px;
  padding: 14px 18px 18px;
}
.btn--orange { --btn-bg: var(--orange); --btn-d: var(--orange-d); }
.btn--mint { --btn-bg: #3fd3a0; --btn-d: #1d8a68; }
.btn--white { --btn-bg: #fff; --btn-d: #bdbab2; }
.btn--red {
  --btn-bg: var(--red);
  --btn-fg: var(--gold);
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 -8px 0 var(--red-d);
}
.btn--red:active { box-shadow: inset 0 0 0 3px var(--gold), inset 0 -3px 0 var(--red-d); }

/* ---------- Stage: characters on the ground ---------- */

.stage {
  position: relative;
  height: 200px;
  margin-top: 24px;
}

.stage .sprite--runner,
.stage .sprite--cyclist,
.stage .sprite--guardia {
  position: absolute;
  bottom: 62px;
  z-index: 2;
}
.stage .sprite--guardia { bottom: 66px; }
.stage .sprite--runner { left: 6%; }
.stage .sprite--cyclist { left: 22%; }
.stage .sprite--guardia { left: 36%; }

.stage .sprite--mechanic {
  position: absolute;
  left: 10%;
  bottom: 62px;
  z-index: 1;
}

.stage .sprite--coin { position: absolute; }
.coin--1 { left: calc(50% - 76px); bottom: 128px; }
.coin--2 { left: calc(50% - 16px); bottom: 142px; }
.coin--3 { left: calc(50% + 44px); bottom: 128px; }

.goose {
  position: absolute;
  right: 9%;
  bottom: 62px;
  z-index: 1;
}
.goose .sprite--goose { display: block; transform: scaleX(-1); }

.bubble {
  position: absolute;
  right: 64px;
  bottom: 86px;
  padding: 8px 12px;
  background: #fff;
  border: 3px solid var(--ink);
  font-family: var(--display);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}
.bubble::after {
  content: '';
  position: absolute;
  right: -3px;
  bottom: -12px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68px;
  background: #8a5a32;
  border-top: 4px solid var(--ink);
}
.ground::before {
  content: '';
  display: block;
  height: 20px;
  background: repeating-linear-gradient(90deg, #7cc06a 0 16px, #6bb35a 16px 24px, #7cc06a 24px 40px, #8fcf78 40px 48px);
  border-bottom: 6px solid #4f9a45;
}
.ground::after {
  content: '';
  display: block;
  height: 38px;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, #6b4325 22px 30px, transparent 30px 64px),
    repeating-linear-gradient(0deg, transparent 0 12px, #7a4e2b 12px 16px);
}

/* ---------- Projects ---------- */

.soil {
  display: block;
  padding: 72px 24px 96px;
  background-color: var(--soil);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 46px, var(--soil-d) 46px 54px, transparent 54px 120px),
    repeating-linear-gradient(0deg, transparent 0 58px, var(--soil-d) 58px 64px, transparent 64px 130px);
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.section-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.3;
  color: var(--cream);
  text-shadow: 0 5px var(--ink);
}
.section-head p {
  margin: 0;
  font-size: 20px;
  color: #f3dfb8;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 40px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--cream);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform 100ms steps(2), box-shadow 100ms steps(2);
}
.card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--ink);
}

.card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.world {
  font-family: var(--display);
  font-size: 10px;
  color: var(--world);
  background: var(--ink);
  padding: 7px 9px;
}

.domain {
  font-size: 16px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 4px solid var(--ink);
  background: var(--shot-bg, var(--ink));
}
.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot--kindle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  background: repeating-linear-gradient(45deg, #dedad0 0 8px, #d4cfc3 8px 16px);
}
.kindle {
  display: block;
  height: 100%;
  aspect-ratio: 600 / 720;
  padding: 8px 8px 14px;
  background: #333033;
  border-radius: 6px;
}
.kindle img {
  object-position: top;
  filter: grayscale(1) contrast(0.95);
}

.sticker {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 9px;
  font-family: var(--display);
  font-size: 9px;
  color: var(--ink);
  background: #ff8a6b;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(3deg);
}

.card h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
}

.card p { margin: 0; }

.card .note {
  padding: 8px 12px;
  font-size: 17px;
  background: #ffe9a8;
  border: 2px dashed var(--ink);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: 3px 9px;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid var(--ink);
}

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 64px 24px 48px;
  text-align: center;
  color: var(--cream);
  background: var(--ink);
  border-top: 6px solid var(--ink-deep);
}
.footer p { margin: 0; }

.cast {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
  margin-bottom: 8px;
}
.cast__row {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
}
.cast__ground {
  height: 26px;
  margin-top: -2px;
  background: #8a5a32;
  border-top: 4px solid #1c1429;
  box-shadow: 0 6px 0 #1c1429;
}
.cast__ground::before {
  content: '';
  display: block;
  height: 10px;
  background: repeating-linear-gradient(90deg, #7cc06a 0 16px, #6bb35a 16px 24px, #7cc06a 24px 40px, #8fcf78 40px 48px);
  border-bottom: 4px solid #4f9a45;
}
.footer__title {
  font-family: var(--display);
  font-size: clamp(14px, 2.2vw, 20px);
  line-height: 1.4;
  color: var(--yellow);
}
.footer__text { max-width: 520px; color: #d9cfe6; }
.footer__small { margin-top: 8px !important; font-size: 15px; color: #b5a8c7; }

/* ---------- Phones ---------- */

@media (max-width: 600px) {
  body { font-size: 18px; }
  .nav { padding: 16px 16px 0; }
  .logo { font-size: 12px; }
  .chip-link { font-size: 16px; padding: 6px 12px; }
  /* Switch sits beside the logo; the other chips wrap to the next row */
  .lang { order: 1; margin-left: auto; }
  .nav__right { order: 2; margin-left: 0; }
  .intro { padding: 56px 16px 0; gap: 24px; }
  .plate { font-size: 19px; padding: 14px 16px; }
  .cloud--c { display: none; }
  .stage { height: 180px; }
  .goose { right: 4%; }
  .stage .sprite--mechanic { left: 4%; }
  .soil { padding: 56px 16px 72px; }
  .wrap { gap: 36px; }
  .grid { gap: 28px; }
  .card { padding: 16px; box-shadow: 6px 6px 0 var(--ink); }
  .card h3 { font-size: 17px; }
  .cast__row { gap: 6px; padding: 0 8px; }
  .cast .sprite--npc { --fw: 48px; }
  .cast__extra { display: none; }
}

/* ---------- Motion (only for people who haven't asked for less) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .stage .sprite--coin { animation: coin-spin 1.2s steps(12) infinite, bob 2.4s steps(4) infinite; }
  .coin--2 { animation-delay: -0.4s, -0.8s !important; }
  .coin--3 { animation-delay: -0.8s, -1.6s !important; }
  .hud .sprite--coin-sm { animation: coin-spin-sm 1.6s steps(12) infinite; }

  .stage .sprite--runner {
    left: 0;
    animation: run-frames 0.5s steps(4) infinite, travel 17s linear -3s infinite;
  }
  .stage .sprite--cyclist {
    left: 0;
    animation: ride-frames 0.3s steps(2) infinite, travel 10s linear -7s infinite;
  }

  .stage .sprite--guardia {
    left: 0;
    animation: guardia-frames 0.45s steps(4) infinite, travel 13s linear -10s infinite;
  }

  .cast .sprite--npc { animation: idle 0.9s steps(2) infinite; }
  .cast .sprite--npc:nth-child(2n) { animation-delay: -0.45s; }
  .cast .sprite--npc:nth-child(3n) { animation-duration: 1.1s; }

  .goose .sprite--goose { animation: honk 6s step-end infinite; }
  .stage .sprite--mechanic { animation: mechanic 7s step-end infinite; }
  .bubble { animation: honk-bubble 6s step-end infinite; }

  .cloud--a { animation: drift 14s steps(14) infinite alternate; }
  .cloud--b { animation: drift 18s steps(18) infinite alternate-reverse; }
  .cloud--c { animation: drift 11s steps(11) infinite alternate; }

  .blink { animation: blink 1s step-end infinite; }
}

@keyframes coin-spin { to { background-position: -384px 0; } }
@keyframes coin-spin-sm { to { background-position: -288px 0; } }
@keyframes run-frames { to { background-position: -288px 0; } }
@keyframes ride-frames { to { background-position: -144px 0; } }
@keyframes guardia-frames { to { background-position: -384px 0; } }
@keyframes idle { to { background-position: calc(var(--fw) * -2) 0; } }
@keyframes bob { 50% { translate: 0 -6px; } }
@keyframes travel {
  from { transform: translateX(-100px); }
  to { transform: translateX(calc(100vw + 20px)); }
}
@keyframes honk {
  0% { background-position: 0 0; }
  70% { background-position: -96px 0; }
  73% { background-position: 0 0; }
  76% { background-position: -96px 0; }
  90% { background-position: 0 0; }
}
/* idle → blink → idle → wrench up, chatting → idle → blink */
@keyframes mechanic {
  0% { background-position: 0 0; }
  28% { background-position: -72px 0; }
  30% { background-position: 0 0; }
  50% { background-position: -144px 0; }
  53% { background-position: -216px 0; }
  56% { background-position: -144px 0; }
  59% { background-position: -216px 0; }
  62% { background-position: -144px 0; }
  65% { background-position: -216px 0; }
  68% { background-position: -144px 0; }
  80% { background-position: 0 0; }
  92% { background-position: -72px 0; }
  94% { background-position: 0 0; }
}
@keyframes honk-bubble {
  0% { opacity: 0; }
  70% { opacity: 1; }
  90% { opacity: 0; }
}
@keyframes drift { to { translate: 48px 0; } }
@keyframes blink { 50% { opacity: 0; } }