/* ModuloDev — pôster e animação das artes geométricas */

.poster {
  --p-ink: var(--on-paper);
  --p-rule: color-mix(in srgb, var(--on-paper) 85%, transparent);
  --p-grid: color-mix(in srgb, var(--on-paper) 7%, transparent);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-height: calc(100svh - var(--header-h) - 96px);
  margin-inline: auto;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--p-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--p-grid) 1px, transparent 1px);
  background-size: calc(100% / 12) calc(100% / 16);
  color: var(--p-ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 50px 120px -30px rgba(0,0,0,.9),
    0 30px 70px -40px color-mix(in srgb, var(--red) 30%, transparent);
  transform: rotate(1.2deg);
  transition: transform .8s var(--ease);
}
.poster:hover { transform: rotate(0deg) translateY(-6px); }
.hero-grid .poster { max-width: 560px; width: auto; height: auto; }
@supports (aspect-ratio: 1) {
  .hero-grid .poster { width: min(100%, calc((100svh - var(--header-h) - 96px) * .75)); }
}

.poster-in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5.5cqw; }

.poster-cab {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4cqw;
  padding-bottom: 3cqw;
  border-bottom: .7cqw solid var(--p-rule);
}
.poster-nome { font-family: var(--f-display); font-size: 8.4cqw; font-weight: 400; letter-spacing: -.045em; line-height: .85; }
.poster-nome b { font-weight: 700; }
.poster-marca { display: flex; align-items: center; gap: 2.6cqw; }
.poster-logo { height: 1.15em; width: auto; max-width: 34cqw; object-fit: contain; }
.poster-marca:has(> span[hidden]) .poster-logo { height: 1.7em; max-width: 56cqw; }
.poster-nome small {
  display: block;
  margin-top: 2.2cqw;
  font-family: var(--f-mono);
  font-size: max(2.1cqw, 8.5px);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
}
.poster-serie {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .8cqw;
  font-family: var(--f-mono);
  font-size: max(2.1cqw, 8.5px);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.poster-serie span:first-child { background: var(--red); color: #fff; padding: .4cqw 1.4cqw; }

.poster-arte { position: relative; flex: 1; min-height: 0; margin-block: 2cqw; }
.poster-arte .arte { width: 100%; height: 100%; }
.poster-selo {
  position: absolute;
  top: 1cqw;
  left: 0;
  width: 17cqw;
  height: 17cqw;
  font-family: var(--f-mono);
  font-size: 8px;
  fill: currentColor;
  animation: gira 30s linear infinite;
}
.poster-selo rect { fill: var(--red); }
@keyframes gira { to { transform: rotate(360deg); } }

.poster-rodape {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4cqw;
  padding-top: 3cqw;
  border-top: .3cqw solid var(--p-rule);
}
.poster-num { font-family: var(--f-display); font-weight: 700; font-size: 17cqw; line-height: .78; letter-spacing: -.06em; color: var(--red); }
.poster-rodape dl { margin: 0; display: grid; gap: 1cqw; }
.poster-rodape dl div { display: flex; gap: 2.4cqw; justify-content: flex-end; align-items: baseline; }
.poster-rodape dt { font-family: var(--f-mono); font-size: max(1.9cqw, 8px); letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.poster-rodape dd { margin: 0; font-family: var(--f-display); font-size: max(3cqw, 11px); font-weight: 600; letter-spacing: -.02em; }

.poster-escuro {
  --p-ink: var(--text);
  --p-rule: var(--line-2);
  --p-grid: color-mix(in srgb, var(--text) 3.5%, transparent);
  background-color: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 50px 120px -40px rgba(0,0,0,.9);
  transform: rotate(-1.4deg);
}
.poster-escuro .poster-num { color: var(--lime); }
.poster-escuro .poster-serie span:first-child { background: var(--lime); color: var(--on-lime); }
.poster-escuro .poster-selo rect { fill: var(--lime); }

/* ------------------------------------------------ animação das artes */
.arte .sq, .arte .fd { transform-box: fill-box; transform-origin: center bottom; }
.arte .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js [data-anima]:not(.in) .arte .sq,
.js [data-anima]:not(.in) .arte .fd { opacity: 0; }
.in .arte .ln { animation: traco 1.2s var(--ease) calc(var(--i) * 18ms) forwards; }
.in .arte .sq { animation: cai .8s var(--ease) calc(.3s + var(--i) * 90ms) both; }
.in .arte .fd { animation: surge 1s var(--ease) calc(.6s + var(--i) * 90ms) both; }
@keyframes traco { to { stroke-dashoffset: 0; } }
@keyframes cai { from { opacity: 0; transform: translateY(-45%); } }
@keyframes surge { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .in .arte .sq, .in .arte .fd, .poster-selo { animation: none; }
  .arte .ln { stroke-dashoffset: 0; }
}