/* creaydestruye — the arc. A light room for choosing, a black room for watching.
   One line never moves: it names what is in front of you and holds every control. */
:root {
  --paper: #f4f4f3; --ink: #121212; --mute: #5f5f5c; --night: #050505; --day: #f3f1ea; --dim: #a9a69d; --red: #ff3b1f;
  --face: 'Work Sans', system-ui, sans-serif; --m: clamp(16px, 1.6vw, 24px);
  --cut: cubic-bezier(.76, 0, .24, 1); --out: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html:has(body.arc), body.arc { height: 100%; overflow: hidden; }
body.arc { background: var(--paper); color: var(--ink); font: 500 13px/1.35 var(--face); -webkit-font-smoothing: antialiased; transition: background-color .5s ease, color .5s ease; }
body.arc.dark { background: var(--night); color: var(--day); }
body.arc ::selection { background: var(--red); color: var(--night); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── the arc ── */
.stage { position: fixed; inset: 0; perspective: 1600px; perspective-origin: 50% 40%; touch-action: pan-y; }
.card { all: unset; position: absolute; left: 50%; top: 0; cursor: pointer; overflow: hidden; background: #dcd9d2; transform-origin: 50% 100%; will-change: transform; }
.card > video, .card > img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .8s var(--out), filter .4s; }
.card:hover > video, .card:hover > img { transform: scale(1.04); }
.card.side > video, .card.side > img { filter: saturate(.85); }
.card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.stage.away { pointer-events: none; }

/* ── behind the arc: the piece's name in outline, and where you are ── */
.bigname { position: fixed; z-index: 0; left: 0; right: 0; top: calc(var(--ly, 62%) + (100vh - var(--ly, 62%)) * .58); transform: translateY(-50%); text-align: center; white-space: nowrap; pointer-events: none;
  font: 300 min(12vw, 17vh)/.9 var(--face); letter-spacing: -0.055em; color: var(--ink); transition: opacity .5s ease; }
.bigname .ch { display: inline-block; transition: transform .8s var(--out), opacity .5s ease; transition-delay: calc(var(--i) * 22ms); }
.bigname.pre .ch { transform: translateY(45%); opacity: 0; transition: none; }
.bigname.leave .ch { transform: translateY(-30%); opacity: 0; transition-duration: .22s; transition-delay: 0s; }
.num { position: fixed; z-index: 1; top: calc(var(--m) + 4px); left: 50%; transform: translateX(-50%); font: 400 12px/1 var(--face); font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--mute); pointer-events: none; transition: opacity .5s; }
.dark .bigname, .dark .num { opacity: 0; }
@media (max-width: 760px) { .bigname { top: calc(var(--ly, 68%) + (100vh - var(--ly, 68%)) * .72); font-size: min(16vw, 12vh); } }
.hint { z-index: 1; }
/* who and what, said once, on the home: the first answer a stranger needs */
.who { position: fixed; z-index: 2; left: var(--m); top: calc(var(--m) + 2px); max-width: 34ch; font: 400 13px/1.4 var(--face); color: var(--ink); transition: opacity .9s ease, transform 1.1s var(--out); }
/* the work hits first; who made it arrives a moment later */
.js-who .who:not(.in) { opacity: 0; transform: translateY(-8px); }
/* on the home the work is the headline: bigger pieces, bigger name */
.home .bigname { font-size: min(19vw, 27vh); letter-spacing: -0.065em; }
/* on the home every piece is in full colour */
.home .card.side > video, .home .card.side > img { filter: none; }
@media (max-width: 760px) { .home .bigname { font-size: min(21vw, 15vh); } }


.who a { color: inherit; text-decoration: none; }
.who b { font-weight: 500; }
.who span { color: var(--mute); }
.who .soon { display: block; margin-top: 10px; color: var(--red-ink); font-weight: 500; letter-spacing: .04em; }
.who .soon[hidden] { display: none; }
.who a:hover span, .who a:focus-visible span { color: var(--red-ink); }
.dark .who { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .bigname .ch { transition: none !important; } }

/* ── the line ── */
.line { position: fixed; z-index: 60; left: 0; right: 0; top: var(--ly, 62%); transform: translateY(-50%); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 0 var(--m); pointer-events: none; }
.line > * { pointer-events: auto; }
.line a, .line button { all: unset; pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; transition: color .2s; }
:root { --red-ink: #d42a0e; } /* the red, deep enough to read as text on paper (4.6:1) */
.line a:hover, .line button:hover { color: var(--red-ink); }
.dark .line a:hover, .dark .line button:hover { color: var(--red); }
.line :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.line .logo { justify-self: start; font-size: clamp(24px, 1.2rem + 1.1vw, 38px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; min-height: 44px; white-space: nowrap; }
.logo .sl { color: var(--red); display: inline-block; margin-left: .04em; transition: transform .5s var(--out); }
.logo:hover .sl, .logo:focus-visible .sl { transform: rotate(-14deg); }
/* the name holds still; «destruye» comes apart only with the cut, and is rebuilt as the page opens */
.logo .ch { display: inline-block; transition: transform .7s var(--out); }
.logo .d .ch { transition-delay: calc((var(--i) - 4) * 30ms); }
.logo.break .d .ch { transform: translate(var(--dx), var(--dy)) rotate(var(--rt)); transition-duration: .3s; transition-delay: 0s; }
.logo.break .sl { transform: rotate(24deg); }
.now { min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now b { font-weight: 500; }
.now i { font-style: normal; font-weight: 400; color: var(--mute); margin-left: 10px; }
.dark .now i { color: var(--dim); }
.now u { text-decoration: none; font-variant-numeric: tabular-nums; margin-left: 10px; }
.now.flip > * { display: inline-block; animation: flip .5s var(--out) both; }
.now.flip > i { animation-delay: .05s; } .now.flip > u { animation-delay: .1s; }
@keyframes flip { from { opacity: 0; transform: translateY(80%); } }
.acts { justify-self: end; display: flex; gap: 0 20px; white-space: nowrap; }
.acts [aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.acts [hidden] { display: none; }
.dark .line { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
/* in the black room the line sits over the work: a soft band of shade keeps it legible on any picture */
.line::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: -28px; bottom: -28px; background: linear-gradient(transparent, rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, .5) 70%, transparent); opacity: 0; transition: opacity .5s; pointer-events: none; }
.dark .line::before { opacity: 1; }
.hint { position: fixed; left: 0; right: 0; top: calc(var(--ly, 62%) + var(--lh, 44px) / 2 + 12px); text-align: center; color: var(--mute); font-size: 12px; font-weight: 400; transition: opacity .4s; }
.dark .hint { opacity: 0; }

/* ── the black room ── */
.room { position: fixed; inset: 0; z-index: 40; background: var(--night); visibility: hidden; }
.room.on { visibility: visible; }
.room > .m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: inset(0 0 0 0); transition: clip-path .9s var(--cut), transform 1.4s var(--out), opacity .5s ease; }
.room > .m.wait { clip-path: inset(49.5% 0 49.5% 0); transform: scale(1.08); }
.room > .m.gone { clip-path: inset(0 0 100% 0); opacity: 0; transition-duration: .55s; }
.room { cursor: pointer; }

/* ── the cut: the screen is destroyed in strips, then rebuilt ── */
.cut { position: fixed; inset: 0; z-index: 100; pointer-events: none; display: grid; grid-template-rows: repeat(7, 1fr); }
/* each strip overlaps its neighbours by a pixel, so no seam of the page shows between them, and moves on its own layer */
.cut i { display: block; margin: -1px 0; background: var(--night); transform: scaleX(0); transition: transform var(--cd, .42s) var(--cut); transition-delay: calc(var(--k) * var(--cs, 32ms)); will-change: transform; backface-visibility: hidden; }
.cut i:nth-child(odd) { transform-origin: left; } .cut i:nth-child(even) { transform-origin: right; }
.cut i.r { background: var(--red); }
.cut.shut i { transform: scaleX(1); }
.cut.open i:nth-child(odd) { transform-origin: right; } .cut.open i:nth-child(even) { transform-origin: left; }

@media (max-width: 760px) {
  .line { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 12px; }
  .line .now { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .line .logo { grid-column: 1 / -1; grid-row: 1; }
  .line .acts { grid-column: 1 / -1; grid-row: 3; justify-self: start; gap: 0 22px; }
  .line .acts a, .line .acts button { min-height: 44px; }
  /* on a phone the piece's details wrap to a second line instead of vanishing */
  .line .now { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
  .line .now i { margin-left: 0; } .line .now i::before { content: ' · '; }
  .who { max-width: calc(100% - 2 * var(--m) - 84px); font-size: 12px; }
  body.home .num { display: none; }
  .index .list a { padding: 5px 0; }
}
@media (min-width: 761px) and (max-width: 1100px) { .now i { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cut i, .room > .m, .card > * { transition-duration: .01s !important; transition-delay: 0s !important; }
  .now.flip > * { animation: none; }
}
.cut.now i { transition: none; }
/* the page is born covered: the strips are shut from the first frame, so nothing flashes before the cut opens */
html.cutting { background: var(--night); }
html.cutting .cut i { transform: scaleX(1); transition: none; }
.cut i:nth-child(4) { background: var(--red); }

/* ══ índice: every work on one line each; the one under the hand fills the screen ══ */
.index .list { position: fixed; z-index: 30; left: var(--m); top: var(--m); list-style: none; max-height: calc(var(--ly, 62%) - 48px); overflow: auto; scrollbar-width: none; }
.index .list li { overflow: hidden; }
.index .list.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000 calc(100% - 36px), transparent); }
.index .list a { display: flex; gap: 12px; align-items: baseline; padding: 1px 0; text-decoration: none; color: inherit; }
.index .list b { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
.index .list i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--mute); }
.index .list li > a { transform: translateY(0); transition: transform .5s var(--out), opacity .3s; transition-delay: calc(var(--i, 0) * 22ms); }
.index .list li.out > a { transform: translateY(105%); opacity: 0; transition-delay: 0s; }
.index .list a:hover b, .index .list a:focus-visible b { color: var(--red-ink); }
.index.over .list a:hover b, .index.over .list a:focus-visible b { color: var(--red); }
.index.over .list a:not(:hover):not(:focus-visible) { opacity: .55; }
.index.over { color: var(--day); }
.index.over .list i { color: var(--dim); }
.back { position: fixed; inset: 0; z-index: 10; background: var(--night); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.back.on { opacity: 1; }
.back::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.1) 70%); }
.back > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .45s ease, transform 1.4s var(--out); }
.back > .on { opacity: 1; transform: none; }
.index.over .line { text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.filters button { margin: 0 8px; }
.index .list li.armed b { color: var(--red); }
.index .list li.armed a::after { content: 'Toca otra vez para abrir'; font-size: 12px; font-weight: 400; color: var(--day); opacity: .8; }
.filters button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; }

/* ══ reading pages: the same line, docked on top; the same cut ══ */
body.page { --bg: var(--paper); --tone: #e9e9e6; --muted: #5f5f5c; --red-ink: #c4250d; background: var(--paper); color: var(--ink); }
body.page .line { top: 0; bottom: auto; transform: none; height: 76px; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); }
body.page main { padding-top: 76px; }
body.page .now b { font-weight: 500; }
body.page .shows { padding-top: 6vh !important; }
.marq { overflow: hidden; padding: 3vh 0 0; pointer-events: none; }
.marq > div { display: flex; width: max-content; animation: marq 70s linear infinite; }
.marq span { font: 300 clamp(96px, 20vw, 340px)/.92 var(--face); letter-spacing: -0.05em; color: var(--ink); padding-right: .3em; white-space: nowrap; }
@keyframes marq { to { transform: translateX(-50%); } }
/* words rise, pictures uncover, text slides: only travel, the content is always there without the script */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .18em; margin-bottom: -.18em; }
.w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--out); transition-delay: calc(var(--i) * 60ms); }
.in .w > span { transform: none; }
.uncover { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--cut); }
.uncover > img, .uncover > video { transition: transform 1.5s var(--out); }
.uncover:not(.in) > img, .uncover:not(.in) > video { transform: scale(1.15); }
.uncover.in { clip-path: inset(0 0 0 0); }
.slide { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .9s var(--out); transition-delay: calc(var(--i, 0) * 55ms); }
.slide.in { opacity: 1; transform: none; }
@media (max-width: 760px) {
  body.page .line { height: auto; padding-top: 10px; padding-bottom: 10px; }
  body.page main { padding-top: 144px; }
  body.page main.legal { padding-top: calc(144px + 4vh); }
  .index .list { max-height: calc(var(--ly, 68%) - 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .marq > div { animation: none; }
  .w > span, .uncover, .slide, .index .list li > a { transform: none !important; clip-path: none !important; opacity: 1 !important; }
}
.index.over .list { text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.shows h2 .w, .shows h2 .w > span { display: inline-block; padding-left: 0; }
/* contacto: the address itself is the picture */
body.page .contact { display: block; padding: 18vh var(--m) 14vh; }
body.page .contact h2 { max-width: 16ch; font: 300 clamp(28px, 2.4vw, 40px)/1.1 var(--face); letter-spacing: -0.025em; }
.contact .mail { display: block; margin: 6vh 0 5vh; font: 300 clamp(30px, 7.6vw, 150px)/1 var(--face); letter-spacing: -0.05em; color: var(--ink); text-decoration: none; white-space: nowrap; transition: color .3s; }
.contact .mail span { color: var(--red); }
.contact .mail:hover, .contact .mail:focus-visible { color: var(--red-ink); }
.contact .mail:hover span { color: var(--ink); }
body.page .contact-links { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; }
body.page .contact-links a { font-size: 17px; text-underline-offset: 4px; }
body.page .contact-links span { margin: 0; font-size: 15px; color: var(--mute); }
@media (max-width: 760px) { body.page .contact { padding: 12vh var(--m) 10vh; } .contact .mail { font-size: 8.4vw; } }

/* aviso legal: a plain reading column */
body.page main.legal, .legal { max-width: 760px; padding: calc(76px + 10vh) var(--m) 6vh; margin: 0 auto; font-size: 17px; line-height: 1.6; }
.legal h1 { font: 300 clamp(40px, 6vw, 84px)/1 var(--face); letter-spacing: -0.04em; margin-bottom: 18px; }
.legal .upd { color: var(--mute); font-size: 14px; margin-bottom: 7vh; }
.legal section { padding: 34px 0; border-top: 1px solid #d8d6d0; }
.legal h2 { font: 500 20px/1.3 var(--face); letter-spacing: -0.01em; margin-bottom: 14px; }
.legal p + p, .legal dl + p { margin-top: 16px; }
.legal dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; margin-top: 16px; }
.legal dt { color: var(--mute); }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: #c4250d; }
.legal mark.todo { background: #ffe0d9; color: #8a1c0a; padding: 0 4px; }
.legal-link { position: fixed; z-index: 55; right: calc(var(--m) - 12px); bottom: 0; padding: 12px; font: 400 11px/1 var(--face); color: var(--mute); text-decoration: none; }
.legal-link:hover, .legal-link:focus-visible { color: var(--red-ink); }
.dark .legal-link { opacity: 0; pointer-events: none; }
/* on a phone the big title owns the foot of the screen, so the legal link goes to the top corner */
@media (max-width: 760px) { body.arc:not(.index) .legal-link { bottom: auto; top: calc(var(--m) - 10px); } }
@media (max-width: 760px) { body.page main.legal { padding-top: calc(144px + 4vh); font-size: 16px; } .legal dl { grid-template-columns: 1fr; gap: 2px; } .legal dd { margin-bottom: 10px; } }
/* the old wall's .tile must not reach the four doors on Sobre mí */
body.page .tiles .tile { position: relative; display: block; left: auto; top: auto; cursor: pointer; will-change: auto; }
body.page .tiles .tile > img { transform: none; }
body.page .tiles .tile.uncover:not(.in) > img { transform: scale(1.15); }

/* ── the featured piece: BANG stands in the arc bigger than the rest, square like the film ── */
.card.feat { background: var(--night); }