/* Movimento e imersão. As regras com .motion só valem quando o aparelho não pede menos animação. */

/* transição entre páginas (home <-> campus) */
@view-transition { navigation: auto; }
.c-cover { view-transition-name: cover; }
::view-transition-group(cover) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

/* entrada ao rolar */
.motion .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.motion .rv.in { opacity: 1; transform: none; }
.motion .bleed.rv, .motion .c-cover.rv, .motion .dark-img.rv { transform: translateY(40px) scale(.97); }
.motion .bleed.rv.in, .motion .c-cover.rv.in, .motion .dark-img.rv.in { transform: none; }

/* foto de abertura: zoom lento + paralaxe */
.bleed picture { overflow: hidden; border-radius: var(--r); }
.bleed img { border-radius: 0; }
.motion .bleed img { transform: translateY(var(--py, 0%)) scale(1.1); animation: kb 22s ease-in-out infinite alternate; }
@keyframes kb { from { scale: 1; } to { scale: 1.08; } }

/* faixa com os nomes dos campus */
.marquee { overflow: hidden; padding: clamp(28px, 5vw, 56px) 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: mq 60s linear infinite; }
.marquee-track span { font-size: clamp(34px, 7vw, 84px); font-weight: 800; letter-spacing: -.05em; line-height: 1; white-space: nowrap; padding-right: .5em; color: #d4d4d4; }
.marquee-track span:nth-child(3n+1) { color: var(--ink); }
.marquee-track span::after { content: "•"; margin-left: .5em; color: #d4d4d4; font-weight: 400; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* barra de progresso dos carrosséis */
.prog { height: 3px; background: var(--line); border-radius: 3px; margin: 18px auto 0; width: 120px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--ink); border-radius: 3px; transition: transform .15s linear; }
.c-photos + .prog, .gal-track + .prog { margin-top: 20px; }

/* linha do tempo horizontal */
.story { display: block; }
.story > div { max-width: 44em; }
.timeline { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: clamp(40px, 6vw, 72px) calc(-1 * var(--pad)) 0; padding: 0 var(--pad); scroll-padding-left: var(--pad); }
.timeline::-webkit-scrollbar { display: none; }
.timeline li { display: block; flex: none; width: clamp(200px, 22vw, 260px); border-top: 2px solid var(--ink); padding: 18px 0 0; scroll-snap-align: start; }
.timeline b { display: block; font-size: clamp(44px, 6vw, 72px); line-height: 1; letter-spacing: -.05em; }
.timeline span { display: block; margin-top: 12px; font-size: 16px; line-height: 1.45; }

/* cartões e fotos: resposta ao toque */
.card, .step, .near img, .gal-track img, .c-photos img { transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .15s, background .15s, color .15s; }
.card:active, .step:active { transform: scale(.985); }
@media (hover: hover) {
  .gal-track img:hover, .c-photos img:hover, .near:hover img { transform: scale(1.02); }
}

/* fotos do campus viram carrossel também no desktop quando não couberem */
@media (max-width: 900px) {
  .bleed picture { border-radius: 0; }
  .c-cover { view-transition-name: cover; }
}

@media (max-width:900px){.card .acts{gap:14px;font-size:14px;white-space:nowrap}.card .where{font-size:12px}}