/* Homepage — the library */

.site-nav {
  display: flex;
  gap: 8px;
}
@media (max-width: 559px) {
  .site-nav__library {
    display: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--u) * 3) var(--gutter) calc(var(--u) * 1.5);
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
}
.blob--violet {
  width: 38rem;
  height: 38rem;
  left: -14rem;
  top: 6%;
  background: rgb(108 76 255 / 0.28);
  animation: drift 42s var(--ease-io) infinite alternate;
}
.blob--coral {
  width: 32rem;
  height: 32rem;
  right: -10rem;
  top: 34%;
  background: rgb(255 75 110 / 0.22);
  animation: drift 42s var(--ease-io) -21s infinite alternate-reverse;
}
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12vw, -6vh) scale(1.12); }
  100% { transform: translate(-4vw, 8vh) scale(0.94); }
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
.hero__eyebrow {
  margin-bottom: var(--u-2);
}
.hero__title {
  font-size: clamp(3.4rem, 15.5vw, 12.6rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  font-weight: 700;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.hero__title .line > span {
  display: inline-block;
}
.hero__title em.accent {
  font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--paper);
  padding-right: 0.08em;
  white-space: nowrap;
}
.wobble span[aria-hidden] {
  display: inline-block;
  animation: bob 4.2s var(--ease-io) calc(var(--k) * -0.42s) infinite;
  transform-origin: 50% 70%;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-0.06em) rotate(-4.2deg); }
  75% { transform: translateY(0.03em) rotate(2.1deg); }
}

.hero__foot {
  margin-top: var(--u);
  display: flex;
  flex-direction: column;
  gap: var(--u-2);
}
.hero__lede {
  max-width: 34rem;
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--paper-60);
}
.hero__lede strong {
  color: var(--paper);
  font-weight: 500;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (min-width: 760px) {
  .hero__foot {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* entrance */
.rise {
  animation: rise 1.05s var(--ease) calc(0.12s + var(--i) * 0.084s) both;
}
@keyframes rise {
  from { transform: translateY(105%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.hero__eyebrow.rise,
.hero__lede.rise,
.hero__ctas.rise {
  animation-name: fade-up;
}
@keyframes fade-up {
  from { transform: translateY(var(--u-2)); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- Tickers ---------- */
.ticker {
  border-block: 1px solid var(--line);
  padding: var(--u-2) 0;
  overflow: hidden;
  user-select: none;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 42s linear infinite;
}
.ticker--reverse .ticker__track {
  animation-direction: reverse;
}
.ticker ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticker li {
  display: flex;
  align-items: center;
  gap: var(--u-2);
  padding-right: var(--u-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 7vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(246 243 238 / 0.92);
}
.ticker li::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
}
.ticker--outline li {
  color: transparent;
  -webkit-text-stroke: 1px var(--paper);
}
@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ---------- Library ---------- */
.library {
  padding: calc(var(--u) * 2.5) var(--gutter) calc(var(--u) * 2);
  max-width: 1600px;
  margin: 0 auto;
  outline: none;
}
.library__head {
  margin-bottom: calc(var(--u) * 1.5);
}
.library__head .eyebrow {
  margin-bottom: var(--u-4);
}
.library__head h2 {
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.library__note {
  margin: var(--u-2) 0 0;
  color: var(--paper-60);
  max-width: 28rem;
}
.library__note a {
  text-decoration: underline;
}
.num {
  font-variant-numeric: tabular-nums;
}

/* ---------- The deck: sticky, stacking, tilting cards ---------- */
.deck {
  list-style: none;
  margin: 0;
  padding: 0 0 calc(var(--u) * 2);
  --stick: calc(var(--u) * 2);
  --card-h: min(calc(100svh - var(--u) * 3.5), 760px);
}
.deck__item {
  position: sticky;
  top: calc(var(--stick) + var(--i) * var(--u-4));
  padding-bottom: calc(var(--u) * 1.5);
}
.deck__item:last-child {
  padding-bottom: 0;
}

.card {
  --p: 0;
  position: relative;
  display: block;
  height: var(--card-h);
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  isolation: isolate;
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--p) * 0.07)) rotate(calc(var(--p) * var(--tilt) * 1deg));
  box-shadow: 0 -24px 60px rgb(0 0 0 / 0.55);
  -webkit-tap-highlight-color: transparent;
}
.card::after {
  /* dims the card as the next one slides over it */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--ink);
  opacity: calc(var(--p) * 0.62);
  pointer-events: none;
}

.card__ambient {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  max-width: none;
  object-fit: cover;
  z-index: -1;
  opacity: 0.55;
}
.card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease), filter var(--t) var(--ease);
}
.card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(11 11 12 / 0.1) 0%, rgb(11 11 12 / 0) 38%, rgb(11 11 12 / 0.82) 100%);
  pointer-events: none;
}

.card__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--u-2) calc(var(--u-2) + 4px) calc(var(--u-2) + 4px);
  pointer-events: none;
}
.card__index {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--paper-60);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card__title {
  font-size: clamp(3.2rem, 15vw, 9.4rem);
  line-height: 0.84;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-weight: 700;
  text-wrap: balance;
}
.card__title em.accent {
  font-weight: 500;
  display: inline-block;
}
.card--live .card__title em.accent {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--paper);
  transition: color var(--t) var(--ease);
}
.card--live:hover .card__title em.accent,
.card--live:focus-visible .card__title em.accent {
  color: var(--paper);
}
.card--live:hover .card__media img,
.card--live:focus-visible .card__media img {
  transform: scale(1.042);
}
.card--live:focus-visible {
  outline-offset: 6px;
}

@media (min-width: 900px) {
  .card__media {
    left: auto;
    width: 46%;
    inset-block: var(--u-2);
    right: var(--u-2);
    border-radius: 18px;
  }
  .card__shade {
    display: none;
  }
  .card__body {
    right: 48%;
    padding: calc(var(--u) * 0.75) var(--u);
  }
  .card__title {
    font-size: clamp(4rem, 8.4vw, 9.4rem);
  }
}

/* coming soon */
.card--soon .card__media img {
  filter: blur(10px) brightness(0.62) saturate(0.8);
  transform: scale(1.12);
}
.card--soon .card__title {
  color: transparent;
  -webkit-text-stroke: 1px rgb(246 243 238 / 0.7);
}
.card--soon .card__title em.accent {
  -webkit-text-stroke: 0;
  color: rgb(246 243 238 / 0.9);
}
.redact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--u-2);
}
.redact i {
  display: block;
  height: 12px;
  width: var(--w);
  background: rgb(246 243 238 / 0.18);
  border-radius: 2px;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgb(246 243 238 / 0.25);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgb(11 11 12 / 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  animation: pulse 2.1s ease-in-out infinite;
}
@keyframes pulse {
  50% { opacity: 0.25; }
}

/* glitch peek */
.glitch {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.glitch--a {
  background-color: rgb(255 75 110 / 0.35);
  background-blend-mode: multiply;
}
.glitch--b {
  background-color: rgb(108 76 255 / 0.4);
  background-blend-mode: multiply;
}
.card--soon:hover .card__media img,
.card--soon.is-glitching .card__media img {
  filter: blur(3px) brightness(0.92) saturate(1.1);
  transform: scale(1.08);
}
.card--soon:hover .glitch,
.card--soon.is-glitching .glitch {
  opacity: 1;
  animation: glitch-a 420ms steps(1) infinite;
}
.card--soon:hover .glitch--b,
.card--soon.is-glitching .glitch--b {
  animation-name: glitch-b;
  animation-duration: 840ms;
}
.card--soon:hover .card__title,
.card--soon.is-glitching .card__title {
  animation: title-jitter 420ms steps(2) infinite;
}
@keyframes glitch-a {
  0% { clip-path: inset(8% 0 78% 0); transform: translateX(-12px); }
  20% { clip-path: inset(42% 0 41% 0); transform: translateX(14px); }
  40% { clip-path: inset(70% 0 12% 0); transform: translateX(-6px); }
  60% { clip-path: inset(22% 0 62% 0); transform: translateX(9px); }
  80% { clip-path: inset(88% 0 2% 0); transform: translateX(-14px); }
  100% { clip-path: inset(55% 0 30% 0); transform: translateX(4px); }
}
@keyframes glitch-b {
  0% { clip-path: inset(60% 0 22% 0); transform: translateX(10px); }
  25% { clip-path: inset(4% 0 84% 0); transform: translateX(-8px); }
  50% { clip-path: inset(34% 0 52% 0); transform: translateX(16px); }
  75% { clip-path: inset(78% 0 8% 0); transform: translateX(-10px); }
  100% { clip-path: inset(15% 0 70% 0); transform: translateX(6px); }
}
@keyframes title-jitter {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-2px, 1px) skewX(-4.2deg); }
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.site-footer__cta {
  position: relative;
  text-align: center;
  padding: calc(var(--u) * 2.5) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u-2);
}
.site-footer__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.4;
  background: radial-gradient(60% 60% at 20% 20%, var(--violet), transparent 60%),
    radial-gradient(50% 50% at 85% 80%, var(--coral), transparent 60%);
}
.site-footer__cta h2 {
  font-size: clamp(2.6rem, 9vw, 5.6rem);
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.site-footer__base {
  border-top: 1px solid var(--line);
  padding: var(--u-2) var(--gutter) calc(var(--u-2) + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: 1600px;
  margin: 0 auto;
}
.brand-small {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}
.fine {
  margin: 0;
  font-size: 12px;
  color: var(--paper-40);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transform: none;
  }
  .ticker__track {
    animation: none;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}