/*! Desenvolvido por MTHBARROS · mthbarros.com.br | Agência Fellow Ship · agenciafellowship.com.br */
@font-face { font-family: "Dela Gothic One"; src: url("../fonts/dela-gothic-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --azul: #0626d4;
  --vermelho: #f40614;
  --ambar: #fca404;
  --cinza: #a49cac;
  --preto: #040406;
  --branco: #fff;
  --traco: 3px;
  --mola: cubic-bezier(.2, 1.45, .35, 1);
  --saida: cubic-bezier(.16, 1, .3, 1);
  --display: "Dela Gothic One", "Arial Black", sans-serif;
  --texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { background: var(--preto); color: var(--preto); font-family: var(--texto); font-size: 1.0625rem; line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; }
.sprite { position: absolute; width: 0; height: 0; }

/* ---------- a dobra: planta baixa azul ---------- */
.obra { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 100vh; min-height: 100svh; padding-top: clamp(1.2rem, 4vh, 2.6rem); background-color: var(--azul); background-image: linear-gradient(rgb(255 255 255 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .08) 1px, transparent 1px), linear-gradient(rgb(255 255 255 / .14) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .14) 1px, transparent 1px); background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px; color: var(--branco); overflow: clip; }
.obra-grade { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 3vw, 3rem); width: min(100% - 2.5rem, 1320px); margin-inline: auto; }
.obra-texto { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(.7rem, 1.9vh, 1.2rem); }

.selo { display: inline-block; padding: .3rem .9rem; background: var(--ambar); color: var(--preto); border: var(--traco) solid var(--preto); border-radius: 999px; font-size: .92rem; font-weight: 700; line-height: 1.3; }
.titulo { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, min(10.5vw, 15vh), 10rem); line-height: .98; letter-spacing: -.02em; text-shadow: .045em .045em 0 var(--preto); text-transform: uppercase; }
.titulo > span { display: block; white-space: nowrap; }
/* o acento do Á não pode encostar no S da linha de cima */
.titulo > span + span { margin-top: .13em; }
.titulo-obra { color: var(--ambar); }
.letra { display: inline-block; animation: onda 5.5s ease-in-out var(--o) infinite; }
@keyframes onda { 0%, 12%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 5% { transform: translate3d(0, -.09em, 0) rotate(var(--w)); } }
.obra-p { max-width: 33rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; line-height: 1.4; }

.progresso { width: min(100%, 33rem); }
.progresso-topo { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .45rem; font-weight: 600; line-height: 1.2; }
.progresso-topo b { font-family: var(--display); font-weight: 400; font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--ambar); }
.progresso-barra { height: 26px; background: var(--preto); border: var(--traco) solid var(--preto); border-radius: 999px; box-shadow: 4px 4px 0 var(--preto); overflow: hidden; }
.progresso-cheio { width: 100%; height: 100%; overflow: hidden; border-radius: 999px; transform: translate3d(-100%, 0, 0); transition: transform .3s linear; }
.progresso-cheio i { display: block; width: calc(100% + 56px); height: 100%; margin-left: -56px; background: repeating-linear-gradient(-45deg, var(--ambar) 0 14px, #2a2a30 14px 28px); animation: listras 1.1s linear infinite; }
@keyframes listras { to { transform: translate3d(39.6px, 0, 0); } }

.acoes { display: flex; flex-wrap: wrap; gap: .7rem .8rem; margin-top: .2rem; }
.botao { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; padding: .45rem 1.5rem; background: var(--branco); color: var(--preto); border: var(--traco) solid var(--preto); border-radius: 999px; box-shadow: 5px 5px 0 var(--preto); font-weight: 700; line-height: 1.15; text-align: center; transition: translate .22s var(--mola), box-shadow .22s var(--mola); }
.botao small { font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.botao small:empty { display: none; }
.botao-ambar { background: var(--ambar); animation: chama 1.5s ease-in-out infinite alternate; }
@keyframes chama { to { scale: 1.035; rotate: -1deg; } }
.botao:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--preto); }

/* entulho e estrelas soltas */
.entulho { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.entulho i { position: absolute; top: -40px; left: var(--x); width: var(--l); height: calc(var(--l) * .5); background: var(--c); border: 2px solid var(--preto); border-radius: 2px; animation: cai var(--t) linear var(--a) infinite; will-change: transform; }
@keyframes cai { to { transform: translate3d(var(--v), calc(100vh + 80px), 0) rotate(var(--g)); } }
.solta { position: absolute; z-index: 0; pointer-events: none; animation: gira 16s linear infinite; }
.solta-1 { left: 3%; top: 6%; width: clamp(38px, 6vw, 90px); height: clamp(38px, 6vw, 90px); fill: var(--vermelho); }
.solta-2 { left: 46%; top: 12%; width: clamp(26px, 3.6vw, 54px); height: clamp(26px, 3.6vw, 54px); fill: var(--ambar); animation-duration: 11s; }
.solta-3 { right: 3%; bottom: 22%; width: clamp(44px, 7vw, 110px); height: clamp(44px, 7vw, 110px); fill: var(--ambar); animation-direction: reverse; }
.solta-4 { left: 47%; bottom: 25%; width: clamp(26px, 3.4vw, 50px); height: clamp(26px, 3.4vw, 50px); fill: var(--branco); animation-duration: 9s; }
@keyframes gira { to { rotate: 360deg; } }

/* placa pendurada no alto */
.placa { position: absolute; z-index: 4; left: 52%; top: 0; display: grid; grid-template-columns: 1fr 1fr; justify-items: center; width: clamp(128px, 14vw, 190px); transform-origin: 50% 0; animation: balanca 3.6s ease-in-out infinite alternate; }
.placa-corrente { width: 5px; height: clamp(30px, 7vh, 72px); background: repeating-linear-gradient(var(--preto) 0 8px, var(--cinza) 8px 12px); }
.placa-chapa { grid-column: 1 / -1; width: 100%; padding: .5rem .5rem .6rem; background: var(--vermelho); border: var(--traco) solid var(--preto); border-radius: 10px; box-shadow: 5px 5px 0 var(--preto); font-family: var(--display); font-size: clamp(.92rem, 1.5vw, 1.3rem); line-height: 1.05; text-align: center; text-transform: uppercase; }
.placa-chapa small { display: block; font-family: var(--texto); font-size: .72em; font-weight: 700; letter-spacing: .08em; }
@keyframes balanca { from { rotate: -5deg; } to { rotate: 6deg; } }

/* ---------- cena: planta e elefante ---------- */
.cena { position: relative; display: grid; place-items: center; min-height: 0; align-self: stretch; }
.planta { --t: min(38vw, 62vh, 520px); position: absolute; left: 50%; top: 50%; width: var(--t); height: var(--t); translate: -50% -50%; pointer-events: none; }
.planta-rotulos { z-index: 3; }
.planta-sala { position: absolute; inset: 11%; border: 3px dashed rgb(255 255 255 / .85); }
.medida { position: absolute; padding: .12rem .5rem; background: var(--azul); border: 1px solid rgb(255 255 255 / .6); font-size: clamp(.72rem, 1vw, .86rem); font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.medida-sala { left: 50%; top: -5%; translate: -50% 0; }
.medida-elefante { left: 50%; bottom: -5%; translate: -50% 0; background: var(--ambar); color: var(--preto); border-color: var(--preto); font-weight: 700; }
.medida-elefante b { font-variant-numeric: tabular-nums; }

.elefante { --t: min(35vw, 54vh, 470px); --cresce: 1; position: relative; z-index: 2; width: var(--t); height: var(--t); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.elefante:focus-visible { outline-offset: 8px; }
/* o corpo é 1,6x maior e começa encolhido: o navegador desenha uma vez e depois só escala */
.elefante-corpo { position: absolute; left: -30%; top: -30%; display: block; width: 160%; height: 160%; scale: calc(var(--cresce) / 1.6); will-change: transform; transition: scale .5s var(--mola); animation: respira 2.6s ease-in-out infinite alternate; pointer-events: none; }
.elefante-corpo img { width: 100%; height: 100%; }
@keyframes respira { from { translate: 0 -1.4%; rotate: -1.6deg; } to { translate: 0 1.4%; rotate: 1.6deg; } }
.capacete { position: absolute; left: 15%; top: -7%; width: 50%; height: auto; rotate: -9deg; overflow: visible; }
.capacete-domo, .capacete-aba { fill: var(--ambar); stroke: var(--preto); stroke-width: 7; stroke-linejoin: round; }
.capacete-faixa { fill: #ffd061; stroke: var(--preto); stroke-width: 5; stroke-linejoin: round; }
.capacete-brilho { fill: none; stroke: var(--branco); stroke-width: 8; stroke-linecap: round; }

.fala { position: absolute; z-index: 5; right: 0; top: 11%; max-width: 15rem; padding: .55rem 1rem; background: var(--branco); color: var(--preto); border: var(--traco) solid var(--preto); border-radius: 18px 18px 18px 4px; box-shadow: 4px 4px 0 var(--preto); font-weight: 700; line-height: 1.2; }
.fala.bate { animation: fala-bate .45s var(--mola); }
@keyframes fala-bate { from { scale: .6; rotate: -6deg; } to { scale: 1; rotate: 0deg; } }

/* ---------- fitas de obra ---------- */
.fitas { position: relative; z-index: 2; height: clamp(58px, 7.4vh, 78px); margin-top: .5rem; pointer-events: none; }
.fita { position: absolute; left: -5%; right: -5%; top: 50%; padding: .42em 0; border-block: var(--traco) solid var(--preto); font-family: var(--display); font-size: clamp(.86rem, 1.5vw, 1.25rem); line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.fita-ambar { background: var(--ambar); color: var(--preto); rotate: -1.3deg; translate: 0 -62%; }
.fita-preta { background: var(--preto); color: var(--ambar); rotate: 1.3deg; translate: 0 -38%; }
.fita-trilho { display: flex; width: max-content; animation: trilho 30s linear infinite; }
.fita-volta { animation-direction: reverse; }
.fita-trilho > span { display: inline-flex; flex: none; align-items: center; gap: .6em; padding-right: .6em; }
.fita svg { flex: none; width: 1em; height: 1em; fill: currentColor; }
.fita-ambar svg { fill: var(--vermelho); }
@keyframes trilho { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- rodapé ---------- */
.rodape { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .1rem 1.4rem; padding: .55rem clamp(1.25rem, 3vw, 2.5rem); background: var(--preto); color: var(--cinza); font-size: .86rem; font-weight: 500; line-height: 1.35; }
.rodape-redes { display: flex; gap: 1.1rem; color: var(--branco); font-weight: 700; }
.rodape a { transition: color .2s; }
.rodape-credito a { color: var(--branco); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (hover: hover) {
  .botao:hover { translate: -2px -3px; box-shadow: 8px 8px 0 var(--preto); }
  .rodape a:hover { color: var(--ambar); }
}

/* estrelas do estouro */
.estouro { position: fixed; left: 0; top: 0; z-index: 30; width: 24px; height: 24px; pointer-events: none; }

/* entrada */
.chegando .selo, .chegando .obra-p, .chegando .progresso, .chegando .acoes { animation: sobe .7s var(--saida) var(--d, .75s) both; }
.chegando .progresso { --d: .95s; }
.chegando .acoes { --d: 1.15s; }
.chegando .selo { --d: .1s; }
.chegando .letra { animation: tijolo .75s var(--mola) var(--d) both; }
.chegando .elefante { animation: chega .9s var(--mola) .35s both; }
.chegando .capacete { animation: capacete-cai .7s var(--mola) 1.05s both; }
.chegando .planta-sala { animation: aparece .6s linear .2s both; }
.chegando .medida { animation: aparece .4s linear 1.15s both; }
.chegando .fala { animation: chega .55s var(--mola) 1.5s both; }
@keyframes sobe { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
@keyframes tijolo { from { opacity: 0; transform: translate3d(0, -115vh, 0) rotate(var(--r)); } 60% { opacity: 1; } }
@keyframes chega { from { opacity: 0; transform: translate3d(0, 60px, 0) scale(.5); } }
@keyframes capacete-cai { from { opacity: 0; transform: translate3d(0, -340%, 0); } 20% { opacity: 1; } }
@keyframes aparece { from { opacity: 0; } }

/* ---------- computador com pouca altura ---------- */
@media (max-height: 720px) and (min-width: 861px) {
  .titulo { font-size: clamp(2.6rem, 13vh, 8rem); }
  .obra-p { font-size: 1rem; }
}

/* ---------- celular e tablet: tudo na mesma tela, com o elefante ocupando o que sobra ---------- */
@media (max-width: 860px) {
  .obra { padding-top: .8rem; }
  .obra-grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; gap: 0; align-items: stretch; }
  .obra-texto { display: contents; }
  .selo { grid-row: 1; justify-self: start; max-width: calc(100% - 112px); padding: .18rem .7rem; font-size: .8rem; }
  .titulo { grid-row: 2; margin-top: .5rem; font-size: clamp(2.5rem, min(16vw, 7.6svh), 6rem); }
  .titulo > span + span { margin-top: .1em; }
  .cena { grid-row: 3; min-height: min(68vw, 34svh); margin-block: .3rem; }
  .obra-p { grid-row: 4; font-size: .96rem; line-height: 1.3; }
  .progresso { grid-row: 5; width: 100%; margin-top: .5rem; }
  .progresso-topo { margin-bottom: .22rem; font-size: .88rem; }
  .progresso-topo b { font-size: 1.02rem; }
  .progresso-barra { height: 17px; }
  .acoes { grid-row: 6; display: grid; grid-template-columns: 1.6fr 1fr; margin-top: .65rem; }
  .botao { min-height: 46px; padding: .3rem .5rem; font-size: .96rem; }
  .botao small { font-size: .7rem; }
  .placa { left: auto; right: 3%; width: 116px; }
  .placa-corrente { height: 10px; }
  /* no celular a placa vira uma linha só, para não encostar no título */
  .placa-chapa { padding: .24rem .2rem; border-radius: 8px; box-shadow: 3px 3px 0 var(--preto); font-size: .62rem; white-space: nowrap; }
  .placa-chapa small { display: inline; font-family: inherit; font-size: 1em; font-weight: 400; letter-spacing: 0; }
  .planta { --t: min(68vw, 32svh); }
  .elefante { --t: min(60vw, 28svh); }
  .medida-sala { left: 0; top: 0; translate: 0 0; }
  .medida-elefante { bottom: -3%; }
  .fala { right: 0; top: 2%; max-width: 9.5rem; padding: .32rem .65rem; font-size: .84rem; }
  .solta-1 { left: auto; right: 2%; top: 22%; }
  .solta-2 { display: none; }
  .solta-3 { right: auto; left: 2%; bottom: 36%; }
  .solta-4 { left: auto; right: 5%; bottom: 42%; }
  .fitas { height: 48px; margin-top: .25rem; }
  .fita { font-size: .78rem; }
  .rodape { justify-content: center; padding: .4rem .8rem; font-size: .76rem; text-align: center; }
  .rodape-redes { display: none; }
}

/* ---------- celular baixinho: encolhe o que der para continuar numa tela só ---------- */
@media (max-width: 860px) and (max-height: 700px) {
  .cena { min-height: 28svh; }
  .planta { --t: 28svh; }
  .elefante { --t: 25svh; }
  .obra-p { font-size: .84rem; line-height: 1.22; }
  .progresso { margin-top: .35rem; }
  .botao { min-height: 42px; }
  .acoes { margin-top: .5rem; }
  .fitas { height: 40px; }
  .fita { font-size: .7rem; }
  .rodape { font-size: .68rem; padding-block: .3rem; }
}
@media (max-width: 860px) and (max-height: 600px) {
  .selo, .progresso-topo { display: none; }
  .titulo { margin-top: 0; font-size: 2.2rem; }
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .entulho { display: none; }
  .elefante-corpo { translate: none; rotate: none; }
}