/* Lineup de Uanlov Vol II (SPEC.md §28.10): el cartel del flyer pegado como un poster, dos collages (bandas y DJ
   sets) de recortes a tijera y una página por artista. Papel negro, duotono y cintas del carrusel de Instagram.
   Fuentes: Onest (OFL) y Space Mono (OFL), no Origin (su licencia prohíbe la web, ver el manual de marca). */

.ul-root {
  --ul-ink: #121616;
  --ul-paper: #1b1d1d;
  --ul-cream: #eaead8;
  --ul-muted: #a9ab9a;
  --ul-orange: #fe963f;
  --ul-yellow: #fec600;
  --ul-pink: #fcaeda;
  --ul-cyan: #00b0fe;
  --ul-lime: #c6e64d;
  --ul-lila: #b79cf0;
  --ul-display: "Onest", "Arial Black", system-ui, sans-serif;
  --ul-mono: "Space Mono", ui-monospace, Consolas, monospace;
}

/* El sitio deja .festival-page con pointer-events:none (body.community-uanlov .festival-page): acá hay que
   devolverlos, con la misma especificidad o más, o las fotos no reciben el clic. */
body.community-uanlov .ul-root { pointer-events: auto; color: var(--ul-cream); }
.ul-root * { box-sizing: border-box; }
.ul-root img { display: block; max-width: 100%; height: auto; }
/* El sitio fija Anton de 40px a todo h1 (body.community-uanlov h1): acá manda la pieza. */
body.community-uanlov :where(.ul-root) h1 { font-size: inherit; font-family: var(--ul-display); font-weight: 900; letter-spacing: -.045em; color: inherit; margin: 0; }
body.community-uanlov .ul-root h2 { margin: 0; }

.ul-e { width: min(1180px, 100%); margin: 0 auto; }
.ul-e__list, .ul-e__artist { display: grid; grid-template-columns: minmax(0, 1fr); }
.ul-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- piezas comunes ---------- */
.ul-paper { background: var(--ul-paper) url("/img/communities/uanlov-lineup/poster-paper.jpg") center / 768px; }
.ul-mono { font: 700 12px/1.35 var(--ul-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ul-cream); margin: 0; }

.ul-tape {
  --c: var(--ul-cream);
  display: inline-block;
  margin: 0;
  padding: .14em .26em .06em;
  background: var(--c);
  color: var(--ul-ink);
  font: 900 1em/.92 var(--ul-display);
  letter-spacing: -.045em;
  text-transform: uppercase;
  clip-path: polygon(0 7%, 100% 0, 98.6% 100%, .8% 93%);
  transform: rotate(var(--r, -1.6deg));
  white-space: nowrap;
}
.ul-c-orange { --c: var(--ul-orange); }
.ul-c-yellow { --c: var(--ul-yellow); }
.ul-c-pink { --c: var(--ul-pink); }
.ul-c-cyan { --c: var(--ul-cyan); }
.ul-c-lime { --c: var(--ul-lime); }
.ul-c-lila { --c: var(--ul-lila); }
.ul-c-cream { --c: var(--ul-cream); }

.ul-deco { position: absolute; z-index: 0; pointer-events: none; user-select: none; }

.ul-c__date { padding: 8px 12px 7px; background: var(--ul-ink); transform: rotate(1.2deg); }
.ul-c__foot {
  display: grid; justify-items: center; gap: 16px;
  margin: 70px auto 0; padding: 22px 24px 24px;
  width: min(560px, 100%);
  background: #fffdf8; color: #14202b;
  border-radius: 16px 12px 15px 11px;
  transform: rotate(-.6deg);
  box-shadow: 0 18px 40px -12px rgba(14, 52, 96, .35);
  text-align: center;
}
.ul-c__foot h2 { margin: 0; font: 400 clamp(34px, 7vw, 46px)/1 Anton, Impact, sans-serif; color: #14202b; }

/* ---------- el cartel: un poster pegado con dos cintas ---------- */
.ul-e__postwrap {
  position: relative;
  width: min(820px, 100%);
  justify-self: center;
  transform: rotate(-.7deg);
  filter: drop-shadow(0 8px 11px rgba(10, 40, 80, .36));
}
.ul-e__poster { position: relative; width: 100%; min-width: 0; padding: 30px 18px 28px; overflow: hidden; }
.ul-e__poster::before, .ul-e__poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
}
.ul-e__poster::before {  /* brillo de cola */
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .09) 47%, rgba(255, 255, 255, .02) 53%, transparent 62%);
}
.ul-e__poster::after {   /* arrugas: se mezclan con lo que hay abajo, texto incluido */
  background: url("/img/communities/uanlov-lineup/poster-wrinkle.jpg") center / cover;
  mix-blend-mode: hard-light;
  opacity: .24;
}
.ul-e__poster .ul-deco { width: clamp(90px, 22%, 190px); }
/* Cinta en las cuatro esquinas: cada pedazo con su largo, color, ángulo y cortes (a mano, rasgados o con tijera).
   Es translúcida y con fibras, así se nota que es cinta y no un rectángulo. La sombra la pone el drop-shadow de
   .ul-e__postwrap, que sigue el recorte. */
.ul-e__tape {
  --tape: 232, 228, 204;
  position: absolute; z-index: 9; height: 38px; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .26), transparent 14% 86%, rgba(0, 0, 0, .08)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .07)),
    rgba(var(--tape), .82);
}
/* arriba a la izquierda: larga, ancha y rasgada en las dos puntas */
.ul-e__tape--tl {
  --tape: 233, 227, 196;
  width: clamp(104px, 21%, 158px); height: 42px; top: -10px; left: -34px; transform: rotate(-37deg);
  clip-path: polygon(0 12%, 4% 0, 7% 14%, 11% 3%, 100% 0, 96% 22%, 100% 41%, 95% 60%, 99% 80%, 94% 100%, 12% 100%, 8% 88%, 4% 100%, 1% 76%, 4% 52%, 0 33%);
}
/* arriba a la derecha: corta, estrecha y cortada al bies */
.ul-e__tape--tr {
  --tape: 244, 236, 168;
  width: clamp(70px, 14%, 108px); height: 30px; top: -5px; right: -24px; transform: rotate(31deg);
  clip-path: polygon(0 0, 100% 14%, 94% 100%, 0 82%);
}
/* abajo a la izquierda: mediana, con un diente en una punta y recta en la otra */
.ul-e__tape--bl {
  --tape: 218, 205, 168;
  width: clamp(88px, 18%, 136px); height: 34px; bottom: -4px; left: -22px; transform: rotate(43deg);
  clip-path: polygon(0 0, 92% 6%, 100% 0, 97% 34%, 100% 62%, 93% 100%, 4% 94%, 0 100%, 3% 58%, 0 30%);
}
/* abajo a la derecha: ancha, con muescas de tijera en un borde */
.ul-e__tape--br {
  --tape: 236, 236, 222;
  width: clamp(96px, 19%, 146px); height: 40px; bottom: -12px; right: -30px; transform: rotate(-33deg);
  clip-path: polygon(4% 0, 20% 8%, 36% 0, 100% 6%, 97% 50%, 100% 94%, 28% 100%, 18% 90%, 8% 100%, 0 70%, 5% 40%);
}

.ul-e__lines { position: relative; z-index: 1; min-width: 0; display: grid; gap: .04em; text-align: center; }
.ul-e__line {
  margin: 0;
  width: max-content;
  justify-self: center;
  white-space: nowrap;
  font: 900 40px/1 var(--ul-display);
  letter-spacing: -.045em;
  word-spacing: .12em;
  text-transform: uppercase;
  color: var(--ul-yellow);
  -webkit-text-stroke: .02em #3a2a00;
  text-shadow: 0 .05em 0 var(--ul-orange), 0 .09em 0 #c96a1c;
}
body.community-uanlov .ul-e__title { margin: .08em 0 .14em; line-height: .86; letter-spacing: -.05em; color: var(--ul-yellow); }
.ul-e__line a { display: inline; color: inherit; text-decoration: none; transition: color .15s ease; }
.ul-e__line a:hover, .ul-e__line a:focus-visible { color: var(--ul-cream); outline: none; }
.ul-e__line a:focus-visible { text-decoration: underline wavy var(--ul-cyan); text-underline-offset: .12em; }
.ul-e__line i { font-style: normal; color: var(--ul-orange); text-shadow: none; -webkit-text-stroke: 0; }

/* Letras del cartel: capas = estar (let) > vibrar (vib) > saltar (j). */
.ul-e__let { display: inline-block; position: relative; }
.ul-e__let--sp { width: .22em; }
.ul-e__vib, .ul-e__j, .ul-e__nl { display: inline-block; }
@keyframes ul-jump { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-.16em) rotate(-4deg); } 65% { transform: translateY(.03em) rotate(2deg); } }
@keyframes ul-vib {
  0%   { transform: translate(0, 0) rotate(0); }
  20%  { transform: translate(var(--vx), var(--vy)) rotate(var(--vr)); }
  40%  { transform: translate(calc(var(--vx) * -1), calc(var(--vy) * .4)) rotate(calc(var(--vr) * -1)); }
  60%  { transform: translate(calc(var(--vx) * .5), calc(var(--vy) * -1)) rotate(calc(var(--vr) * .6)); }
  80%  { transform: translate(calc(var(--vx) * -.6), calc(var(--vy) * .7)) rotate(calc(var(--vr) * -.8)); }
  100% { transform: translate(0, 0) rotate(0); }
}
.ul-e__j.is-jumping { animation: ul-jump .6s cubic-bezier(.3, 1.4, .5, 1) both; }
@media (prefers-reduced-motion: no-preference) {
  .ul-e__vibe .ul-e__vib, .ul-e__title .ul-e__vib { animation: ul-vib var(--vd, .7s) steps(1, end) infinite; animation-delay: var(--vl, 0s); }
  .ul-e__line a:hover .ul-e__nl, .ul-e__line a:focus-visible .ul-e__nl { animation: ul-jump .6s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 30ms); }
}
.ul-e__line a:hover .ul-e__nl, .ul-e__line a:focus-visible .ul-e__nl { color: var(--ul-cream); }

/* ---------- los collages ---------- */
.ul-f__both { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: start; width: min(1180px, 100%); margin: 56px auto 0; }
.ul-f__both > section { min-width: 0; }
.ul-f { container-type: inline-size; position: relative; width: 100%; }
.ul-f__title { position: absolute; z-index: 20; left: 50%; top: 0; transform: translateX(-50%) rotate(-2deg); }
body.community-uanlov .ul-f__title { margin: 0; font-size: 9.6cqw; }
.ul-f__title .ul-tape { --r: 0deg; white-space: nowrap; }
.ul-f__items { margin: 0; padding: 0; list-style: none; }

.ul-f__item { position: absolute; margin: 0; padding: 0; list-style: none; transform: rotate(var(--r, 0deg)); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.ul-f__item:has(.ul-f__hit:hover), .ul-f__item:has(.ul-f__hit:focus-visible), .ul-f__item.is-hot { z-index: 30 !important; transform: rotate(calc(var(--r) * .25)) translateY(-1.2cqw) scale(1.05); }
.ul-f__cut { position: relative; margin: 0; }
.ul-f__cut > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .9cqw 1.4cqw rgba(10, 40, 80, .42)); transition: filter .3s ease; }
.ul-f__cut > .ul-f__color { position: absolute; inset: 0; opacity: 0; filter: none; transition: opacity .35s ease; }
.ul-f__item:has(.ul-f__hit:hover) .ul-f__cut > img:first-child, .ul-f__item.is-hot .ul-f__cut > img:first-child { filter: drop-shadow(0 2.4cqw 2.2cqw rgba(10, 40, 80, .45)); }
.ul-f__item:has(.ul-f__hit:focus-visible) .ul-f__cut > img:first-child { filter: drop-shadow(0 0 .35cqw var(--ul-cyan)) drop-shadow(0 0 .35cqw var(--ul-cyan)); }
.ul-f__item.is-hot .ul-f__color, .ul-f__item:has(.ul-f__hit:hover) .ul-f__color, .ul-f__item:has(.ul-f__hit:focus-visible) .ul-f__color, .ul-f__item:has(.ul-f__hit:active) .ul-f__color { opacity: 1; }
.ul-f__hit { position: absolute; inset: 0; z-index: 2; display: block; -webkit-tap-highlight-color: transparent; }
.ul-f__hit:focus-visible { outline: none; }

.ul-f__tapes { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.ul-f__tape { position: absolute; pointer-events: auto; font-size: 4.4cqw; text-decoration: none; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.ul-f__tape:hover { transform: rotate(0deg) scale(1.06); }

@keyframes ul-assemble { from { opacity: 0; transform: translate(var(--fx, -8cqw), -5cqw) rotate(calc(var(--r) - 14deg)) scale(.88); } }
@media (prefers-reduced-motion: no-preference) {
  .ul-f__item.is-in { animation: ul-assemble .7s cubic-bezier(.2, 1.3, .4, 1) backwards; animation-delay: calc(var(--n, 0) * 110ms); }
}

/* ---------- la página de un artista ---------- */
.ul-e__artist { gap: 26px; }
.ul-e__back { justify-self: start; font-size: 18px; text-decoration: none; }
.ul-e__back:focus-visible, .ul-e__links a:focus-visible, .ul-e__next a:focus-visible { outline: 3px dashed var(--ul-ink); outline-offset: 4px; }
.ul-e__a { display: grid; gap: 22px; align-items: start; }
.ul-e__a-media { position: relative; width: min(560px, 94%); justify-self: center; }
.ul-e__cut { position: relative; margin: 0; transform: rotate(var(--r, 0deg)); transform-origin: 50% 0; }
.ul-e__cut > img { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 18px rgba(10, 40, 80, .4)); }
.ul-e__a-text { display: grid; gap: 16px; justify-items: start; min-width: 0; }
body.community-uanlov .ul-e__a-name { font-size: clamp(42px, 12vw, 84px); line-height: .95; }
.ul-e__a-name .ul-tape { white-space: normal; }
.ul-e__paper {
  display: grid; gap: 12px;
  padding: 20px 22px 18px;
  max-width: 60ch;
  background: #fffdf8; color: #14202b;
  border-radius: 3px;
  transform: rotate(.5deg);
  box-shadow: 0 18px 36px -14px rgba(10, 40, 80, .45);
}
/* El primer párrafo es la bajada en Onest (la letra del cartel); el resto va en Space Mono, como las etiquetas
   del lineup: bio de fanzine, no de formulario. */
.ul-e__paper p { margin: 0; font: 400 14px/1.7 var(--ul-mono); letter-spacing: -.01em; }
.ul-e__paper p:first-of-type { font: 700 clamp(17px, 4.6vw, 19px)/1.3 var(--ul-display); letter-spacing: -.025em; }
.ul-e__paper em { font-style: italic; font-weight: 700; }
.ul-e__paper blockquote { margin: 0; padding: 4px 0 4px 14px; border-left: 4px solid var(--q, var(--ul-orange)); font: 900 19px/1.25 var(--ul-display); letter-spacing: -.02em; }
.ul-e__links { display: flex; flex-wrap: wrap; gap: 10px 12px; padding-top: 4px; }
.ul-e__links a { font-size: 16px; text-decoration: none; }
.ul-e__next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.ul-e__next a { display: grid; gap: 8px; justify-items: start; color: inherit; text-decoration: none; }
.ul-e__next a:last-child { justify-items: end; text-align: right; }
.ul-e__next .ul-mono { background: var(--ul-ink); padding: 5px 8px; }
.ul-e__next .ul-tape { font-size: clamp(18px, 4.6vw, 30px); white-space: normal; }
.ul-e__next a:hover .ul-tape { --r: 0deg; }

/* La foto que "vuela" del collage a la página del artista (y de vuelta). */
::view-transition-old(ul-hero), ::view-transition-new(ul-hero) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, 1.2, .5, 1); }
::view-transition-old(ul-name), ::view-transition-new(ul-name) { animation-duration: .5s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

/* En celular el sitio deja 12px a los lados: las cintas se meten para no generar scroll horizontal. */
@media (max-width: 559px) {
  .ul-e__tape--tl { left: -4px; top: -6px; }
  .ul-e__tape--tr { right: -6px; }
  .ul-e__tape--bl { left: -2px; }
  .ul-e__tape--br { right: -2px; }
}
@media (min-width: 560px) and (max-width: 899px) { .ul-f__both { width: min(560px, 100%); } }
@media (min-width: 760px) {
  .ul-e__poster { padding: 44px 46px 38px; }
  .ul-e__a { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .ul-e__a-media { width: 100%; }
}
@media (min-width: 900px) { .ul-f__both { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }