/* página A Volta Por Cima. Usa as regras de texto da Cazé (css/caze.css) e as cores escuras dos Posters
   (classe page-posters no body). A cena é um canvas WebGL grudado na tela (js/avpc.js). */
/* fora do body (barra do celular recolhendo) também é escuro: nada de faixa clara embaixo (2026-11-09) */
html:has(> body.page-avpc) { background: #141417; }
.av { display: block; padding: 0; }
.av__track { position: relative; height: 100vh; height: 100svh; /* no caderno o JS estica pra rolar as páginas */ }
.av__stick { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #141417; }
.av__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.av__gl.is-hot { cursor: pointer; }
.av__gl.is-zoom { cursor: zoom-in; }
.av__vig { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 45%, transparent 55%, rgba(6, 6, 9, .6) 100%); }

/* descrição por cima da rua desfocada (igual aos Posters); some quando a pessoa escolhe */
.av__info { position: absolute; inset: 0; padding: 0 var(--gutter); pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 12, 15, .82) 0%, rgba(12, 12, 15, .52) 36%, rgba(12, 12, 15, 0) 58%); }
.av__info .cz__info { position: relative; pointer-events: auto; }
.av.is-in .av__info .cz__info { pointer-events: none; }
.av__go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.av__go .btn { margin: 0; }
.page-avpc .av__btn2 { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(236, 235, 231, .4); }
.page-avpc .av__btn2:hover { background: transparent; }

/* etiquetas da escolha, em cima do caderno e da arara (posição vem do JS) */
.av__pick { position: absolute; inset: 0; pointer-events: none; }
.av.is-in .av__tag { pointer-events: none; }
.av__tag { all: unset; position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transform-origin: 50% 100%;
  padding: 8px 12px 7px; background: #ecebe7; color: #141414; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); white-space: nowrap; font-family: var(--mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; will-change: transform; transition: background .25s, color .25s, opacity .4s; }
.av__tag b { font-weight: 400; font-size: 13px; }
.av__tag em { font-style: normal; color: #6b6964; font-size: 10px; transition: color .25s; }
.av__tag::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); }
.av__tag:hover, .av__tag:focus-visible, .av__tag.is-hot { background: var(--accent); color: #fff; }
.av__tag:hover em, .av__tag:focus-visible em, .av__tag.is-hot em { color: rgba(255, 255, 255, .8); }

/* barra de cima no caderno e na arara: voltar, onde está, trocar */
.av__bar { position: absolute; left: var(--gutter); right: var(--gutter); top: 64px; display: flex; align-items: center; gap: 18px; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .5s .3s; }
.av__bar[hidden] { display: none; }
.av.is-in .av__bar { opacity: 1; }
.av__bar button { all: unset; cursor: pointer; color: #fff; }
.av__bar button:hover, .av__bar button:focus-visible { color: var(--accent); }
.av__bar #avSwap { margin-left: auto; }
.av__bar span { color: rgba(255, 255, 255, .55); }

.av__hud { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 20px; display: flex; justify-content: flex-end; gap: 28px; color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .4s; pointer-events: none; }
.av__hint { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: rgba(255, 255, 255, .7); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); transition: opacity .4s; pointer-events: none; white-space: nowrap; }

/* camisa em foco: ficha à direita */
.av__shirt { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min(360px, 34vw); display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transition: opacity .5s; pointer-events: none; }
.av__shirt[hidden] { display: none; }
.av__shirt.is-on { opacity: 1; pointer-events: auto; }
.av__shirt-t { margin: 0; font-family: var(--sans); font-weight: 400; font-size: clamp(32px, 3.4vw, 56px); line-height: .92; letter-spacing: -.04em; }
.av__shirt-d { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.av__seg { display: inline-flex; align-self: flex-start; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(236, 235, 231, .35); padding: 3px; margin-top: 6px; }
.av__seg button { all: unset; cursor: pointer; padding: 7px 14px; border-radius: 999px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); transition: background .25s, color .25s; }
.av__seg button.is-on { background: var(--ink); color: #121212; }
.av__arrows { display: flex; gap: 10px; margin-top: 8px; }
.av__arrows button { all: unset; cursor: pointer; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 19px; color: #fff; border: 1px solid rgba(255, 255, 255, .25); transition: background .25s, color .25s; }
.av__arrows button:hover, .av__arrows button:focus-visible { background: #fff; color: #121212; }

/* sem WebGL 2: as artes e as camisas numa grade simples */
.av--flat .av__track { height: auto; }
.av--flat .av__stick { position: relative; height: auto; overflow: visible; background: none; }
.av--flat .av__gl, .av--flat .av__vig, .av--flat .av__hud, .av--flat .av__hint, .av--flat .av__pick, .av--flat .av__go { display: none; }
.av--flat .av__info { position: relative; background: none; }
.av__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; padding: 40px var(--gutter) 80px; }
.av__grid img { width: 100%; height: auto; display: block; }

.page-avpc .czl__fig video { display: block; max-width: 100%; max-height: calc(100svh - 130px); width: auto; height: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.page-avpc .czl__fig video[hidden] { display: none; }
.page-avpc .czl__fig img[hidden] { display: none; }

@media (max-width: 860px) {
  .av__info { background: linear-gradient(180deg, rgba(12, 12, 15, .78), rgba(12, 12, 15, .6) 70%, rgba(12, 12, 15, .3)); overflow: auto; }
  .av__info .cz__info { height: auto; min-height: 100%; padding: 84px 0 40px; }
  .av__info .cz__back { margin-bottom: 28px; }
  .av__bar { top: 56px; font-size: 11px; gap: 12px; }
  .av__shirt { top: auto; bottom: 18px; transform: none; left: var(--gutter); right: var(--gutter); width: auto; gap: 8px;
    background: rgba(12, 12, 15, .72); padding: 14px 16px; border-radius: 14px; backdrop-filter: blur(6px); }
  .av__shirt-t { font-size: 28px; }
  .av__shirt-d { font-size: 13px; }
  .av__shirt .av__arrows { position: absolute; right: 14px; top: 12px; margin: 0; }
  .av__arrows button { width: 38px; height: 38px; font-size: 16px; }
  .av__tag { font-size: 10px; padding: 7px 10px 6px; }
  .av__tag b { font-size: 12px; }
}
.page-avpc .cz__title, .page-avpc .av__shirt-t { color: #ecebe7; }
.av__pick { z-index: 2; }
.page-avpc .av__seg button { color: rgba(236, 235, 231, .7); }
.page-avpc .av__seg button.is-on { background: #ecebe7; color: #121212; }
.page-avpc .av__shirt-d { color: rgba(236, 235, 231, .74); }
/* camisa em foco: um escuro atrás da ficha pra ler bem */
.av__stick::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: linear-gradient(270deg, rgba(12, 12, 15, .82) 0%, rgba(12, 12, 15, .45) 32%, rgba(12, 12, 15, 0) 52%); }
.av.is-shirt .av__stick::after { opacity: 1; }
.av__shirt { z-index: 3; }
@media (max-width: 860px) { .av__stick::after { display: none; } }
/* (2026-11-09: os balões da vista geral aparecem no celular também) */

/* abertura: texto claro em cima da rua escura (o tema do site deixava as cores escuras aqui) */
.av__info { --ink: #f2f1ed; --ink-2: rgba(242, 241, 237, .86); --ink-3: rgba(242, 241, 237, .62); --line: rgba(242, 241, 237, .22); --accent: #7d9dff; color: var(--ink);
  background: linear-gradient(90deg, rgba(10, 10, 13, .9) 0%, rgba(10, 10, 13, .72) 34%, rgba(10, 10, 13, .25) 56%, rgba(10, 10, 13, 0) 66%); }
.av__info .cz__title { color: #f7f6f2; }
.av__info .cz__n, .av__info .cz__lede { color: #8eabff; }
.av__info .cz__desc { color: rgba(242, 241, 237, .88); text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.av__info .cz__c, .av__info .cz__back { color: rgba(242, 241, 237, .66); }
.av__info .lab__specs li { color: rgba(242, 241, 237, .62); border-color: rgba(242, 241, 237, .2); }
.av__info .lab__specs li span:last-child { color: #f2f1ed; }
.page-avpc .av__info .btn { background: #f2f1ed; color: #111; }
.page-avpc .av__info .av__btn2 { background: transparent; color: #f2f1ed; box-shadow: inset 0 0 0 1px rgba(242, 241, 237, .5); }
@media (max-width: 860px) { .av__info { background: linear-gradient(180deg, rgba(10, 10, 13, .86), rgba(10, 10, 13, .72) 70%, rgba(10, 10, 13, .4)); } }

/* vista geral (2026-11-09): um balão em cima do caderno, do boné e da arara, subindo e descendo em loop.
   O JS põe o botão no ponto em cima do objeto (translate); o miolo centraliza, sobe pra cima do ponto e flutua. */
.av__pick { transition: opacity .35s; }
.av .av__tag.av__balloon { all: unset; position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.av.is-over .av__balloon { pointer-events: auto; }
.av__balloon-in { position: absolute; left: 0; bottom: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 18px 8px; border-radius: 999px; background: #ecebe7; color: #141414; white-space: nowrap; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45); animation: av-bob 2.4s ease-in-out infinite; transition: background .25s, color .25s, scale .3s cubic-bezier(.2, .8, .1, 1); }
.av__balloon[data-av="cap"] .av__balloon-in { animation-delay: -.8s; }
.av__balloon[data-av="rack"] .av__balloon-in { animation-delay: -1.6s; }
.av__balloon-in::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px; margin-left: -5.5px; background: inherit; transform: rotate(45deg); border-radius: 0 0 2px 0; }
.av__balloon-in b { font-family: "Nimbus Sans", Arial, sans-serif; font-weight: 400; font-size: 17px; letter-spacing: -.01em; line-height: 1.1; }
.av__balloon-in small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6b6964; transition: color .25s; }
.av__balloon:hover .av__balloon-in, .av__balloon:focus-visible .av__balloon-in, .av__balloon.is-hot .av__balloon-in { background: #5c84ff; color: #fff; scale: 1.08; }
.av__balloon:hover small, .av__balloon:focus-visible small, .av__balloon.is-hot small { color: rgba(255, 255, 255, .82); }
@keyframes av-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .av__balloon-in { animation: none; } }
@media (max-width: 860px) { .av__balloon-in { padding: 7px 13px 6px; } .av__balloon-in b { font-size: 14px; } }

/* o texto da abertura desce um pouco: a pílula "← Trabalhos · Início" ficava em cima do "(Marca própria)" */
@media (min-width: 861px) { .av__info .cz__info { padding-top: 124px; padding-bottom: 48px; } }