.animations-page { color: var(--paper); background: #090b10; }
.animations-page .story-site-header { position: fixed; }
.catalog-eyebrow { margin: 0 0 1rem; color: #cbb8f3; font: 500 .68rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.catalog-eyebrow span { color: var(--acid); }
.catalog-intro { position: relative; min-height: min(680px,76svh); display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.7fr); align-items: center; overflow: hidden; padding: calc(var(--site-header-height) + clamp(2.8rem,6vw,5.5rem)) clamp(1.2rem,7vw,8rem) clamp(3rem,5vw,4.5rem); background: radial-gradient(circle at 72% 42%,rgba(104,74,178,.25),transparent 24%),radial-gradient(circle at 24% 78%,rgba(255,176,0,.07),transparent 28%),linear-gradient(135deg,#07090d,#101522); }
.catalog-intro::before { content: ''; position: absolute; inset: 0; opacity: .19; background-image: linear-gradient(rgba(245,240,231,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(245,240,231,.12) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg,transparent,#000 45%,#000); }
.catalog-intro-copy { position: relative; z-index: 2; width: min(760px,100%); }
.catalog-intro h1 { margin: 0 0 1.35rem; font: 700 clamp(3.8rem,7vw,7.1rem)/.8 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.catalog-intro h1 em,.catalog-invitation h2 em { color: var(--acid); font-style: normal; }
.catalog-intro-copy > p:last-child { max-width: 610px; margin: 0; color: rgba(245,240,231,.72); font-size: clamp(1rem,1.35vw,1.22rem); line-height: 1.65; }
.catalog-count { position: absolute; right: clamp(1.2rem,5vw,5rem); bottom: clamp(2rem,5vw,4rem); display: flex; align-items: end; gap: .8rem; margin: 0; }
.catalog-count strong { color: var(--acid); font: 700 clamp(2.7rem,5vw,5rem)/.75 var(--display); }
.catalog-count span { color: rgba(245,240,231,.58); font: .62rem/1.45 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.catalog-orbit { position: relative; justify-self: center; width: min(34vw,430px); aspect-ratio: 1; border: 1px solid rgba(188,161,244,.3); border-radius: 50%; animation: catalog-float 7s ease-in-out infinite; }
.catalog-orbit::before,.catalog-orbit::after { content: ''; position: absolute; inset: 15%; border: 1px solid rgba(245,240,231,.13); border-radius: 50%; }
.catalog-orbit::after { inset: 36%; background: radial-gradient(circle,#ffb000 0 6%,#8a63e8 7% 20%,transparent 22%); box-shadow: 0 0 80px rgba(116,76,199,.32); }
.catalog-orbit span { position: absolute; padding: .25rem .55rem; color: rgba(245,240,231,.64); background: #0c1018; font: .57rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.catalog-orbit span:nth-child(1) { top: 9%; left: 47%; }
.catalog-orbit span:nth-child(2) { right: -2%; bottom: 29%; }
.catalog-orbit span:nth-child(3) { bottom: 7%; left: 10%; }
.catalog-orbit i { position: absolute; top: 50%; left: 50%; width: 42%; height: 1px; background: linear-gradient(90deg,var(--acid),transparent); transform: rotate(-28deg); transform-origin: left; }
@keyframes catalog-float { 50% { transform: translateY(-10px) rotate(2deg); } }

.catalog { padding: clamp(4.5rem,8vw,8rem) clamp(1.2rem,6vw,7rem); background: #0c1019; }
.catalog-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(245,240,231,.16); }
.catalog-toolbar h2 { margin: 0; font: 700 clamp(2.4rem,4vw,4.1rem)/.9 var(--display); letter-spacing: -.025em; text-transform: uppercase; }
.catalog-toolbar .catalog-eyebrow { margin-bottom: .55rem; }
.catalog-filters { display: flex; flex-wrap: wrap; justify-content: end; gap: .45rem; }
.catalog-filters button { min-height: 44px; padding: .55rem .85rem; color: rgba(245,240,231,.68); background: transparent; border: 1px solid rgba(245,240,231,.2); cursor: pointer; font: 500 .65rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.catalog-filters button:hover { color: var(--paper); border-color: rgba(245,240,231,.48); }
.catalog-filters button[aria-pressed="true"] { color: #16110a; background: var(--acid); border-color: var(--acid); }
.catalog-filters button span { margin-left: .35rem; opacity: .6; }
.catalog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.3rem; }
.catalog-card[hidden] { display: none; }
.catalog-card { min-width: 0; background: #121724; border: 1px solid rgba(245,240,231,.17); }
.catalog-card-link { display: grid; grid-template-columns: minmax(170px,.68fr) minmax(0,1.32fr); height: 100%; color: inherit; text-decoration: none; transition: background .25s ease,border-color .25s ease; }
.catalog-card:hover { border-color: rgba(255,176,0,.65); }
.catalog-card-link:hover { background: #171c29; }
.catalog-image { position: relative; min-height: 350px; overflow: hidden; background: #07090d; }
.catalog-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(5,7,11,.05),rgba(5,7,11,.72)); }
.catalog-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06); transition: transform .7s cubic-bezier(.2,.7,.2,1),filter .4s ease; }
.catalog-card:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.04); }
.catalog-card:nth-child(1) .catalog-image img { object-position: center 40%; }
.catalog-card:nth-child(2) .catalog-image img { object-position: center 50%; }
.catalog-card:nth-child(3) .catalog-image img { object-position: center 56%; }
.catalog-card:nth-child(4) .catalog-image img { object-position: center; }
.catalog-image > span { position: absolute; z-index: 2; top: 1rem; left: 1rem; color: var(--acid); font: 500 .7rem var(--mono); }
.catalog-image > p { position: absolute; z-index: 2; right: 1rem; bottom: .9rem; left: 1rem; margin: 0; color: rgba(245,240,231,.85); font: 500 .61rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.catalog-card-copy { display: flex; flex-direction: column; padding: 1.5rem; }
.catalog-format { margin: 0 0 1.2rem; color: #c6b2f4; font: .62rem/1.5 var(--mono); letter-spacing: .045em; text-transform: uppercase; }
.catalog-card h3 { margin: 0 0 .8rem; font: 600 clamp(1.7rem,2.3vw,2.45rem)/1 var(--display); letter-spacing: -.015em; }
.catalog-card-copy > p:not(.catalog-format) { margin: 0; color: rgba(245,240,231,.7); font-size: .9rem; line-height: 1.55; }
.catalog-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(245,240,231,.13); }
.catalog-card dl div + div { padding-left: 1rem; border-left: 1px solid rgba(245,240,231,.13); }
.catalog-card dt { color: rgba(245,240,231,.42); font: .54rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.catalog-card dd { margin: .25rem 0 0; color: rgba(245,240,231,.82); font-size: .77rem; }
.catalog-action { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: auto; padding-top: 1rem; color: var(--acid); font-size: .82rem; font-weight: 600; }
.catalog-action b { font-size: 1.1rem; font-weight: 400; transition: transform .2s ease; }
.catalog-card:hover .catalog-action b { transform: translate(3px,-3px); }
.catalog-status { margin: 1.25rem 0 0; color: rgba(245,240,231,.45); font: .59rem var(--mono); letter-spacing: .04em; }
.catalog-invitation { padding: clamp(5rem,9vw,9rem) clamp(1.2rem,8vw,9rem); color: var(--ink); background: var(--paper); }
.catalog-invitation h2 { margin: 0 0 1.5rem; font: 700 clamp(3rem,6vw,6.3rem)/.84 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.catalog-invitation h2 em { color: #7050bd; }
.catalog-invitation > p:not(.catalog-eyebrow) { max-width: 650px; margin: 0 0 2rem; color: rgba(9,11,16,.67); font-size: 1rem; }
.catalog-invitation .catalog-eyebrow { color: #7050bd; }
.catalog-invitation .primary-action { width: min(100%,390px); justify-content: space-between; }

@media (max-width: 1000px) {
  .catalog-intro { min-height: min(650px,78svh); grid-template-columns: 1fr .58fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-image { min-height: 280px; }
}
@media (max-width: 700px) {
  .catalog-intro { min-height: 570px; grid-template-columns: 1fr; align-content: center; padding-top: calc(var(--site-header-height) + 2.8rem); }
  .catalog-intro h1 { font-size: clamp(3.35rem,16vw,4.8rem); }
  .catalog-orbit { position: absolute; right: -13vw; bottom: 7%; width: 48vw; opacity: .48; }
  .catalog-count { left: 1.2rem; right: auto; bottom: 2rem; }
  .catalog-toolbar { display: block; }
  .catalog-filters { justify-content: start; margin-top: 1.3rem; }
  .catalog-card-link { grid-template-columns: minmax(125px,.55fr) minmax(0,1.45fr); }
  .catalog-image { min-height: 320px; }
  .catalog-card-copy { padding: 1.15rem; }
  .catalog-card h3 { font-size: clamp(1.55rem,7vw,2rem); }
  .catalog-card dl { grid-template-columns: 1fr; }
  .catalog-card dl div + div { margin-top: .6rem; padding: .6rem 0 0; border-top: 1px solid rgba(245,240,231,.1); border-left: 0; }
}
@media (max-width: 430px) {
  .animations-page .site-header nav a:last-child { display: none; }
  .catalog-intro { min-height: 550px; }
  .catalog-intro-copy > p:last-child { font-size: .95rem; }
  .catalog-filters { display: grid; grid-template-columns: repeat(2,1fr); }
  .catalog-filters button:first-child { grid-column: 1 / -1; }
  .catalog-card-link { grid-template-columns: 1fr; }
  .catalog-image { min-height: 170px; max-height: 190px; }
  .catalog-card-copy { min-height: 300px; }
  .catalog-card dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-card dl div + div { margin: 0; padding: 0 0 0 .75rem; border-top: 0; border-left: 1px solid rgba(245,240,231,.1); }
}
@media (prefers-reduced-motion: reduce) { .catalog-orbit { animation: none; } .catalog-image img { transition: none; } }