@font-face {
  font-family: "Martian Mono";
  src: url("assets/fonts/MartianMono.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}
@font-face {
  font-family: "Martian Grotesk xWd";
  src: url("assets/fonts/MartianGrotesk-xWdUlt.woff2") format("woff2");
  font-display: swap;
}

/* 1rem = 1px of the 1920px-wide Figma frame */
html { font-size: calc(100vw / 1920); overflow-x: clip; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #e54d33;
  color: #000;
  font-family: "Martian Mono", monospace;
  font-variation-settings: "wdth" 100;
  letter-spacing: -0.07em;
  line-height: normal;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wide { font-variation-settings: "wdth" 112.5; }

/* ticker */
.ticker {
  position: fixed; inset: 0 0 auto; height: 138rem; z-index: 0;
  background: #e54d33; color: #fff; overflow: hidden;
}
.ticker__track {
  position: absolute; left: -12rem; top: 20rem;
  display: flex; white-space: nowrap;
  font-size: 20rem; line-height: 1.05; font-variation-settings: "wdth" 112.5;
  animation: ticker 18s linear infinite;
}
.ticker__track span { padding-right: 100rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

.page { position: relative; z-index: 1; padding-top: 61rem; }

/* nav */
.nav {
  --nav-h: 176rem;
  position: sticky; top: 0; z-index: 10;
  height: var(--nav-h); margin-bottom: calc(-1 * var(--nav-h));
  border-radius: 50rem 50rem 0 0;
  background: url("assets/img/nav.webp") 0 0 / 100% 100%;
}
.nav::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  /* blur fades out over the lower 60% of the nav, measured from the bottom so it survives the extension below */
  mask-image: linear-gradient(to top, transparent, #000 calc(var(--nav-h) * .6));
  -webkit-mask-image: linear-gradient(to top, transparent, #000 calc(var(--nav-h) * .6));
}
/* iOS Safari paints the page under its translucent top bar: once stuck, continue the nav up there.
   One blur layer (::before) and a tint matching the nav's top edge, so there is no seam */
.is-stuck .nav::before { top: -200px; }
.is-stuck .nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 200px;
  background: rgba(255,255,255,.8);
}
.nav__logo {
  position: absolute; left: 633rem; top: 50rem;
  font: 15rem/normal "Martian Grotesk xWd", sans-serif; letter-spacing: -0.05em;
}
.nav__links {
  position: absolute; left: 818rem; top: 51rem;
  display: flex; gap: 30rem; font-size: 13rem;
}
.nav__links a, .footer a { transition: opacity .2s; }
.nav__links a:hover { opacity: .5; }

/* hero */
.top { position: relative; }
/* dark backing so the sheet's rounded bottom corners sit on the bottom gradient */
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60rem;
  background: #1b0906; z-index: 1;
}
.hero {
  position: sticky; top: 0;
  height: 712rem;
  background:
    url("assets/img/hero.webp") 0 0 / 100% 100% no-repeat,
    url("assets/img/hero-under.webp") 0 0 / 100% 517rem no-repeat,
    linear-gradient(51.44deg, #fff 17.731%, #ffb7ab 81.335%);
  border-radius: 50rem;
}
/* once the ticker is scrolled away the top corners straighten out */
.hero, .nav, .nav::before { transition: border-radius .5s cubic-bezier(.4,0,.2,1); }
.is-stuck .hero, .is-stuck .nav, .is-stuck .nav::before { border-top-left-radius: 0; border-top-right-radius: 0; }
.hero__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero__path text { font-size: 15px; fill: #000; letter-spacing: -0.07em; } /* svg user units = design px */
.hero__title {
  position: absolute; left: 0; right: 0; top: 192rem;
  display: flex; flex-direction: column; align-items: center;
  font-weight: 400; font-size: 40rem; line-height: 48rem; white-space: nowrap;
}
.hero__word { position: relative; display: block; width: 100%; height: 48rem; }
.hero__word span {
  position: absolute; left: 50%; top: 0; translate: -50% 0; white-space: nowrap;
  transition: transform .9s cubic-bezier(.65,0,.35,1), opacity .9s ease, filter .9s ease;
}
.hero__word span.is-out { transform: translateY(-45%); opacity: 0; filter: blur(10rem); }
.hero__word span.is-in { transform: translateY(45%); opacity: 0; filter: blur(10rem); transition: none; }

/* white sheet */
.sheet {
  position: relative; z-index: 2;
  margin-top: -195rem;
  background: #fff; border-radius: 50rem;
}
.story { height: calc(100vh + 1400rem); }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; border-radius: 50rem; }
.lead {
  position: absolute; left: 50%; top: 50%; width: 1340rem; margin-left: -670rem; translate: 0 -50%;
  font-size: 40rem; text-align: center;
}
.lead .w { opacity: .12; transition: opacity .15s linear; }
.app { position: absolute; inset: 0; will-change: transform, opacity, filter; }
.app__title {
  position: absolute; left: 0; right: 0; top: calc(50% - 311rem);
  font-weight: 400; font-size: 40rem; text-align: center; white-space: nowrap;
  font-variation-settings: "wdth" 112.5;
}

/* carousel */
.carousel.is-dragging { cursor: grabbing; }
.carousel {
  position: absolute; left: 0; right: 0; top: calc(50% - 138rem); height: 449.6rem;
  perspective: 1400rem; perspective-origin: 50% 50%;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.card {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  width: 449.6rem; height: 449.6rem; border-radius: 20rem; overflow: hidden;
  background: #f9f9f9;
  will-change: transform;
}
.card img { pointer-events: none; position: absolute; inset: 0; width: 450rem; height: 450rem; display: block; }
.card__fade {
  position: absolute; inset: 0; width: 450rem; height: 450rem;
  background: linear-gradient(rgba(255,255,255,0) 6.111%, #fff);
  backdrop-filter: blur(1.95rem); -webkit-backdrop-filter: blur(1.95rem);
}
.card__text { position: absolute; left: 28rem; top: 342.6rem; width: 402rem; display: flex; flex-direction: column; gap: 8rem; }
.card h3 { font-weight: 400; font-size: 17rem; white-space: nowrap; }
.card p { font-size: 14rem; color: rgba(0,0,0,.4); }

/* bottom */
.bottom {
  position: relative; height: 1063rem; overflow: hidden;
  background: linear-gradient(#1b0906, #e54d33);
}
.wip {
  position: absolute; left: 0; right: 0; top: 323rem;
  color: #fff; font-size: 40rem; text-align: center; font-variation-settings: "wdth" 112.5;
}
.footer > * { position: absolute; transform: translate(-50%, -50%) rotate(-6deg); }
.footer__sheet {
  left: 973.67rem; top: 986.98rem; width: 1863.636rem; height: 943.852rem;
  transform: translate(-50%, -50%) rotate(-6.41deg);
  background: #fff; border-radius: 50rem;
}
.footer__logo { left: 198.36rem; top: 706.34rem; font: 50rem/normal "Martian Grotesk xWd", sans-serif; letter-spacing: -0.05em; white-space: nowrap; }
.footer__col { width: 160rem; display: flex; flex-direction: column; white-space: nowrap; }
.footer__col h4 { font-weight: 400; font-size: 14rem; color: #1d1d1f; margin-bottom: 30rem; }
.footer__col a { font-size: 13rem; opacity: .3; }
.footer__col a:hover, .footer__langs a:hover { opacity: 1; }
.footer__col--map { left: 154rem; top: 855.1rem; gap: 0; }
.footer__col--map a + a { margin-top: 15rem; }
.footer__col--res { left: 384.36rem; top: 846.48rem; letter-spacing: 0; }
.footer__col--res a { line-height: 16rem; }
.footer__col--res a + a { margin-top: 15rem; }
.footer__langs { left: 187.11rem; top: 1029.72rem; display: flex; gap: 20rem; font-size: 13rem; letter-spacing: 0; white-space: nowrap; }
.footer__langs a:not(.is-active) { opacity: .3; }

/* ---------- mobile: 1rem = 1px of a 430px-wide frame ---------- */
@media (max-width: 767px) {
  html { font-size: calc(100vw / 430); }
  .ticker { height: 80rem; }
  .ticker__track { top: 12rem; font-size: 14rem; animation-duration: 14s; }
  .ticker__track span { padding-right: 40rem; }
  .page { padding-top: 40rem; }
  /* taller nav so the white fade has the same long tail as on desktop */
  .nav { --nav-h: 160rem; border-radius: 34rem 34rem 0 0; }
  .nav__logo { left: 0; right: 0; top: 22rem; text-align: center; font-size: 16rem; }
  .nav__links {
    left: 0; right: 0; top: 52rem; justify-content: center; gap: 14rem; font-size: 11rem;
    flex-wrap: wrap; padding: 0 16rem;
  }
  .hero {
    height: 600rem; border-radius: 34rem;
    background-size: auto 100%, auto 517rem, auto;
    background-position: 30% 0, 30% 0, 0 0;
  }
  .hero__path text { font-size: 12px; }
  .hero__title { top: 250rem; font-size: 30rem; line-height: 38rem; }
  .hero__word { height: 38rem; }
  .sheet { margin-top: -70rem; border-radius: 34rem; }
  .story { height: calc(100vh + 900rem); }
  .stage { border-radius: 34rem; }
  .lead { width: 380rem; margin-left: -190rem; font-size: 24rem; }
  .app__title { top: calc(50% - 230rem); font-size: 22rem; white-space: normal; padding: 0 24rem; line-height: 1.25; }
  .carousel { top: calc(50% - 140rem); height: 315rem; perspective: 900rem; }
  /* card markup stays in 450px units and is scaled by JS; bump text so it stays readable */
  .card__text { top: 280rem; left: 24rem; width: 400rem; }
  .card h3 { font-size: 23rem; }
  .card p { font-size: 18rem; }
  .bottom { height: auto; padding: 120rem 0 0; }
  .wip { position: static; font-size: 24rem; }
  .footer {
    position: relative; margin: 110rem -40rem -60rem; padding: 50rem 70rem 120rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 34rem 20rem;
    transform: rotate(-6deg); transform-origin: 50% 0;
  }
  .footer > * { position: static; transform: none; }
  .footer__sheet { position: absolute; inset: 0; width: auto; height: auto; transform: none; border-radius: 40rem; z-index: -1; }
  .footer__logo { grid-column: 1 / -1; font-size: 44rem; }
  .footer__col { width: auto; }
  .footer__col h4 { font-size: 14rem; }
  .footer__col a { font-size: 13rem; }
  .footer__col--res a { line-height: normal; }
  .footer__langs { grid-column: 1 / -1; font-size: 13rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}