/*
  www/css/nations.css
  Nations wall: cream paper section with six propaganda posters.
  Poster art is textless; the slogan band, nation name and emblem sticker
  are HTML on top. js/tilt.js feeds --rx/--ry (tilt) and --gx/--gy (glare).
*/

.nations {
  background:
    radial-gradient(circle, rgba(10, 17, 24, .07) 1.2px, transparent 1.8px) 0 0 / 9px 9px,
    var(--paper);
  color: var(--ink);
}
.nations .section__title em { color: var(--rojo); }
.nations .eyebrow { background: var(--rojo); color: var(--ghost); }

.posters {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px);
}
.poster { perspective: 900px; }
.poster:nth-child(3n + 2) { margin-top: clamp(0px, 5vw, 72px); }

.poster__frame {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%;
  position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden;
  border: 4px solid var(--ink); background: var(--c1);
  box-shadow: 10px 12px 0 var(--ink);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--tilt, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.poster:nth-child(odd) .poster__frame { --tilt: -1.2deg; }
.poster:nth-child(even) .poster__frame { --tilt: 1deg; }
.poster.is-hover .poster__frame { transition-duration: .12s; box-shadow: 16px 20px 0 var(--ink); --tilt: 0deg; }
.poster__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Glare that follows the pointer */
.poster__glare {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.75), transparent 55%);
}
.poster.is-hover .poster__glare { opacity: 1; }

/* Slogan band covers the poster's bottom strip */
.poster__band {
  position: absolute; inset: auto 0 0; padding: 14px 16px 16px;
  background: var(--c1); color: var(--c2); border-top: 4px solid var(--ink);
  transform: translateZ(30px);
}
.poster__nation { display: block; font: 400 12px/1 var(--f-stencil); letter-spacing: .28em; text-transform: uppercase; color: var(--c2); opacity: .75; }
.poster__slogan {
  display: block; margin-top: 8px;
  font: 400 clamp(22px, 2.1vw, 32px)/.98 var(--f-stencil); text-transform: uppercase; letter-spacing: .01em;
  text-shadow: 3px 3px 0 var(--ink);
}
.poster__emblem {
  position: absolute; z-index: 2; top: 12px; right: 12px; width: 26%; height: auto;
  filter: drop-shadow(3px 4px 0 rgba(10, 17, 24, .55));
  transform: translateZ(50px) rotate(8deg); transition: transform .5s var(--ease-out);
}
.poster.is-hover .poster__emblem { transform: translateZ(70px) rotate(-4deg) scale(1.08); }
.poster__blurb { margin-top: 32px; max-width: 34ch; font-weight: 600; font-size: 15px; line-height: 1.45; }

@media (max-width: 980px) {
  .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poster:nth-child(3n + 2) { margin-top: 0; }
  .poster:nth-child(even) { margin-top: 48px; }
}
@media (max-width: 600px) {
  /* Mobile: one swipeable row with snap */
  .posters {
    display: flex; gap: 18px; margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) 24px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .posters::-webkit-scrollbar { display: none; }
  .poster { flex: 0 0 78%; scroll-snap-align: center; }
  .poster:nth-child(even) { margin-top: 0; }
}