html, body { height: 100%; }
body { overflow: hidden; }
.app { position: relative; display: grid; grid-template-columns: 66fr 34fr; height: 100vh; height: 100svh; transition: grid-template-columns var(--dur-l) var(--curve); }
.left, .strip { min-width: 0; }
/* transição para o Estúdio: a coluna das imagens fecha e a do texto ocupa o ecrã todo (e o inverso ao voltar) */
html.collapsed .app { grid-template-columns: 100fr 0fr; }
.tag { transition: font-size var(--dur-l) var(--curve), max-width var(--dur-l) var(--curve), font-weight var(--dur-l) var(--curve), line-height var(--dur-l) var(--curve), letter-spacing var(--dur-l) var(--curve), margin-top var(--dur-l) var(--curve); }
/* o subtítulo é o mesmo texto nas duas páginas: ao fechar a coluna das imagens cresce e reorganiza-se até ser a frase do Estúdio */
html.collapsed .tag { font-size: clamp(26px, 4.4vw, 76px); max-width: 24ch; font-weight: 800; line-height: 1.02; letter-spacing: -0.015em; margin-top: var(--s8); }
.info, .pn { transition: opacity 0.4s var(--curve-fade) 0.35s; }
.strip { transition: opacity 0.4s var(--curve-fade) 0.35s; }
html.collapsed .info, html.collapsed .pn, html.collapsed .strip { opacity: 0; pointer-events: none; transition: opacity 0.25s var(--curve-fade) 0s; }
.left { position: relative; padding: var(--pad); display: flex; flex-direction: column; min-height: 0; }

/* bloco do projeto centrado no espaço livre da coluna (um pouco acima do meio) */
.info { margin-top: auto; margin-bottom: auto; padding-bottom: 6vh; position: relative; }
.row { display: grid; grid-template-columns: var(--label) 1fr; align-items: center; column-gap: var(--gap); }
.row + .row { margin-top: var(--s1); }
.indent { margin-left: calc(var(--label) + var(--gap)); }
.desc { margin-top: var(--s6); max-width: 38ch; display: grid; }
.desc .d { grid-area: 1 / 1; margin: 0; font-size: 11px; line-height: 1.4; font-weight: 700; text-transform: uppercase; color: var(--mute); transition: opacity var(--fade) var(--curve-fade) var(--delay), filter var(--fade) var(--curve-fade) var(--delay); }
.desc .d.pre, .desc .d.out { opacity: 0; filter: blur(2px); }
.view { display: inline-block; margin-top: var(--s4); font-size: 11px; line-height: 1.4; font-weight: 800; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--ink); }
.counter { position: absolute; right: 0; top: 0; font-family: var(--mono); font-size: 11px; line-height: 1.4; color: var(--mute); }

.pn { position: absolute; left: var(--pad); bottom: var(--pad); font-size: 11px; font-weight: 700; text-transform: uppercase; line-height: 1.5; }
.pn button { all: unset; cursor: pointer; }
.pn button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pn .lab { color: var(--mute); display: inline-block; min-width: 11ch; }

.strip { height: 100%; overflow: hidden; padding: 0 var(--pad) 0 0; }
.rail { position: relative; display: flex; flex-direction: column; gap: 10px; transform: translate3d(0, var(--t, 0px), 0); transition: transform var(--dur) var(--curve) var(--delay); will-change: transform; backface-visibility: hidden; }
.rail.noanim { transition: none; }
.card { flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: var(--ph); cursor: pointer; display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; opacity: 1; transition: opacity var(--fade) var(--curve-fade) var(--delay); }
.card.on { opacity: 1; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* hover (só com rato, sem "reduzir movimento"): zoom pequeno e suave dentro do próprio cartão; o cartão corta o excesso, por isso nunca sai da coluna */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card img { transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
  .card:hover img { transform: scale(1.055); }
}
.sr { position: absolute; left: -9999px; }

@media (min-width: 801px) { .rail { width: calc(34vw - var(--pad)); } }
@media (prefers-reduced-motion: reduce) { .app, .tag, .info, .pn, .strip { transition: none !important; } .track, .track span, .desc .d, .rail, .card { transition: none !important; } }
@media (max-width: 800px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .info { margin-bottom: var(--s4); }
  .row { grid-template-columns: 1fr; row-gap: var(--s1); }
  .info .row + .row { margin-top: var(--s4); }
  .indent { margin-left: 0; }
  .desc { margin-top: var(--s4); }
  .view { margin-top: var(--s4); }
  .pn { display: none; }
  .strip { padding: 0 var(--pad) var(--pad); }
  .rail { flex-direction: row; height: auto; width: max-content; transform: translate3d(var(--t, 0px), 0, 0); }
  .card { height: auto; width: 78vw; aspect-ratio: 3 / 2; }
}

/* abertura: as letras do nome sobem uma a uma ao centro; uma linha de carregamento enche; o nome voa para o canto (speed ramp); a coluna de fotografias abre e roda; o texto entra palavra a palavra */
html.intro .tag, html.intro .info, html.intro .pn, html.intro .legal, html.intro nav.top { opacity: 0; transition: none; }
html.intro .strip { opacity: 0; clip-path: inset(0 0 100% 0); transition: none; }
html.intro .word { opacity: 0; transform: translate(var(--ix, 0px), var(--iy, 0px)); }
html.intro.intro-split .word { opacity: 1; }
.lt { display: inline-block; padding: 0 0.12em; margin: 0 -0.12em; }
html.intro .lt { opacity: 0; transform: translate3d(0, 0.5em, 0); }
html.intro .word a { filter: blur(10px); }
/* o corte do logótipo: a metade de cima entra pela esquerda, a de baixo pela direita, e encaixam */
html.intro .wh-t { opacity: 0; transform: translateX(-1300px); }
html.intro .wh-b { opacity: 0; transform: translateX(1300px); }
html.intro.intro-ready .wh { opacity: 1; transform: none; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s var(--curve-fade); }
html.intro.intro-ready .word a { filter: none; transition: filter 0.9s var(--curve-fade); }
html.intro.intro-ready .lt { opacity: 1; transform: none; filter: none; transition: opacity 0.55s var(--curve-fade), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i) * 45ms); }
/* linha de carregamento */
.ibar { position: fixed; left: var(--pad); right: var(--pad); bottom: var(--pad); height: 2px; background: var(--rule); z-index: 30; pointer-events: none; transition: opacity 0.5s var(--curve-fade); }
.ibar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.ibar.run i { transform: scaleX(1); transition: transform 1.1s cubic-bezier(0.65, 0, 0.12, 1); }
.ibar.done { opacity: 0; }
/* sobe para o canto com arranque muito rápido e aterragem lenta (speed ramp) */
html.intro-go .word { transform: none; transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1), font-size var(--dur-l) var(--curve); }
html.intro-go .tag, html.intro-go .info, html.intro-go .pn, html.intro-go .legal { transition: none; }
html.intro-go .strip { clip-path: inset(0); transition: clip-path 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 0.4s var(--curve-fade) 0.15s; }
@keyframes i-up { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
@keyframes i-w { from { opacity: 0; transform: translate3d(0, 0.6em, 0); filter: blur(6px); } }
@keyframes i-fade { from { opacity: 0; } }
html.intro-go .tw { display: inline-block; animation: i-w 0.95s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.75s + var(--i) * 24ms); }
html.intro-go .info > * { animation: i-up 0.95s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(1.05s + var(--n, 0) * 80ms); }
html.intro-go .pn, html.intro-go .legal, html.intro-go nav.top { animation: i-fade 0.8s var(--curve-fade) 1.4s both; }
@media (max-width: 800px) { html.intro .strip { clip-path: inset(0 100% 0 0); } }
.rail.spin .card img { filter: blur(var(--b, 0px)); }
.rail.spin .card { transition: none; }

.legal { position: absolute; right: calc(34% + var(--pad)); bottom: var(--pad); display: flex; gap: var(--s4); font-size: 11px; font-weight: 700; line-height: 1.5; text-transform: uppercase; color: var(--mute); }
.legal a { text-decoration: none; }
.legal a:hover { color: var(--ink); }
html.collapsed .legal { opacity: 0; }
@media (max-width: 800px) { .app { grid-template-rows: minmax(0, 1fr) auto auto; } .legal { position: static; grid-row: 3; padding: var(--s2) var(--pad) calc(var(--s2) + env(safe-area-inset-bottom, 0px)); } }
/* ecrãs baixos: menos texto para não apertar */
@media (max-width: 800px) and (max-height: 700px) { .desc { display: none; } .view { margin-top: var(--s2); } .reel { --ts: 22px; } .info { padding-bottom: 0; } }

/* chegada vinda do Estúdio: o nome e o subtítulo já estão no sítio; o resto entra com arranque rápido e aterragem lenta */
html.arrive .info, html.arrive .pn, html.arrive .legal, html.arrive .strip { opacity: 0; transition: none; }
html.arrive .strip { transform: translateX(6%); }
html.arrive .info { transform: translateY(14px); }
.info, .strip { transition: opacity 0.5s var(--curve-fade) 0.1s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; }
.legal { transition: opacity 0.5s var(--curve-fade) 0.1s; }
html.collapsed .legal { transition-duration: 0.25s; transition-delay: 0s; }
@media (max-width: 800px) { .strip { touch-action: pan-x; } }

/* telemóvel: a mesma passagem (o subtítulo cresce até ser a frase do Estúdio, o resto esbate) */
@media (max-width: 800px) { html.collapsed .tag { font-size: clamp(24px, 7.4vw, 40px); max-width: 24ch; font-weight: 800; line-height: 1.02; letter-spacing: -0.015em; margin-top: var(--s6); } html.collapsed .strip { transform: translateX(-4%); transition: opacity .25s var(--curve-fade), transform .7s cubic-bezier(.16,1,.3,1); } html.collapsed .info { transform: translateY(-10px); } }

html.out body { opacity: 0; transition: opacity 0.35s var(--curve-fade); }

/* Tipo: leva ao mapa já filtrado */
.row.tr { position: relative; }
.tlink { position: absolute; inset: 0; z-index: 2; }
.tlink:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.row.tr:hover .track span.on { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }