@font-face {
  font-family: "F25 Executive";
  src: url("assets/fonts/F25_Executive.otf") format("opentype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night: #030713;
  --night-2: #071426;
  --moon: #e6f3ff;
  --cream: #eee9dd;
  --paper: #d8bf91;
  --paper-soft: #efe0bb;
  --ink: #070815;
  --ink-soft: rgba(7, 8, 21, 0.72);
  --red: #e9082f;
  --wine: #870719;
  --cyan: #9fcfff;
  --line: rgba(7, 8, 21, 0.1);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Libre Baskerville", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Anton, Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --type: "F25 Executive", var(--mono);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--cream);
  background: var(--night);
  font-family: var(--sans);
}

body.is-locked {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

video {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
  opacity: 0.23;
}

.site-header {
  position: fixed;
  inset: 18px 22px auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  pointer-events: none;
}

.main-nav {
  pointer-events: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(238, 233, 221, 0.16);
  border-radius: 999px;
  background: rgba(3, 7, 19, 0.56);
  backdrop-filter: blur(18px);
}

.main-nav a {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  color: rgba(238, 233, 221, 0.76);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 34px;
  text-transform: uppercase;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--ink);
  background: var(--moon);
  outline: 0;
}

.journey {
  position: relative;
  height: 1800svh;
  background: var(--night);
}

.journey-viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 48% 46%, rgba(27, 71, 118, 0.28), transparent 42%),
    linear-gradient(180deg, #02040a 0%, #050916 100%);
}

.journey-world {
  position: absolute;
  top: 0;
  left: 0;
  width: 8000px;
  height: 6600px;
  transform-origin: 0 0;
  will-change: transform;
}

.scene {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 2360px;
  height: 1380px;
  overflow: hidden;
  isolation: isolate;
}

.scene-hero {
  color: var(--cream);
  background: var(--night);
}

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.hero-video {
  background: var(--night);
}

.beach-bg {
  object-position: center 48%;
  filter: saturate(0.94) contrast(1.08);
}

.beach-grade,
.paper-grade,
.hospital-grade {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.beach-grade {
  background:
    linear-gradient(180deg, transparent 0 62%, rgba(3, 7, 19, 0.96) 82%, #030713 100%),
    linear-gradient(90deg, rgba(3, 7, 19, 0.82), rgba(3, 7, 19, 0.18) 48%, rgba(3, 7, 19, 0.56)),
    linear-gradient(180deg, rgba(3, 7, 19, 0.02), rgba(3, 7, 19, 0.54) 66%, rgba(3, 7, 19, 0.98) 94%),
    linear-gradient(180deg, transparent 0 58%, rgba(3, 7, 19, 0.96) 100%);
}

.scene-label,
.editorial-kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
}

.scene-label {
  color: rgba(230, 243, 255, 0.78);
}

.scene-label.dark,
.editorial-kicker {
  color: rgba(7, 8, 21, 0.72);
}

.editorial-scene h2,
.community-panel h2 {
  margin: 0;
  letter-spacing: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  max-width: 100%;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  outline: 0;
}

.button-light {
  color: var(--ink);
  background: var(--moon);
  box-shadow: 0 16px 34px rgba(115, 186, 255, 0.18);
}

.button-dark {
  color: var(--cream);
  border-color: rgba(238, 233, 221, 0.26);
  background: rgba(3, 7, 19, 0.6);
}

.button-ink {
  color: var(--cream);
  background: var(--ink);
}

.button-paper {
  color: var(--ink);
  border-color: rgba(7, 8, 21, 0.24);
  background: rgba(255, 255, 255, 0.18);
}

.poti-emblem {
  position: absolute;
  left: 50%;
  bottom: 238px;
  z-index: 6;
  width: 980px;
  opacity: var(--poti-alpha, 0);
  transform: translate3d(-50%, var(--poti-y, 420px), 0) scale(var(--poti-scale, 0.94));
  filter:
    drop-shadow(0 40px 80px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 44px rgba(158, 210, 255, 0.32));
  isolation: isolate;
  will-change: transform, opacity;
}

.poti-emblem::before,
.poti-emblem::after {
  position: absolute;
  inset: 2%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  content: "";
}

.poti-emblem::before {
  background:
    radial-gradient(circle, rgba(230, 243, 255, 0.66), rgba(120, 183, 255, 0.3) 34%, rgba(8, 24, 45, 0) 72%);
  filter: blur(34px);
  opacity: var(--poti-glow-alpha, 0);
  transform: scale(1.18);
}

.poti-emblem::after {
  inset: 16%;
  background:
    radial-gradient(circle, rgba(255, 246, 211, 0.72), rgba(156, 205, 255, 0.24) 38%, transparent 70%);
  filter: blur(20px);
  opacity: var(--poti-core-glow-alpha, 0);
}

.poti-emblem img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.editorial-scene {
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 79px, var(--line) 80px),
    linear-gradient(180deg, transparent 0 79px, var(--line) 80px),
    var(--cream);
  background-size: 80px 80px;
}

.editorial-scene::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 52%, rgba(7, 8, 21, 0.025));
  content: "";
}

.editorial-rule {
  position: absolute;
  top: 178px;
  left: 118px;
  width: 1080px;
  height: 2px;
  background: var(--ink);
  opacity: 0.82;
}

.editorial-dot {
  position: absolute;
  top: 166px;
  left: 1244px;
  width: 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
}

.editorial-kicker {
  position: absolute;
  top: 160px;
  left: 1304px;
}

.editorial-scene h2 {
  position: absolute;
  left: 215px;
  top: 242px;
  max-width: 1280px;
  font-family: var(--display);
  font-size: 10.4rem;
  font-weight: 400;
  line-height: 0.92;
  text-transform: uppercase;
}

.editorial-copy {
  position: absolute;
  width: 610px;
  color: var(--ink-soft);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.55;
}

.editorial-copy p {
  margin: 0 0 22px;
}

.studio-tagline {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1.18;
}

.studio-scene .editorial-rule {
  transform: translate3d(var(--studio-rule-x, 0), 0, 0);
  will-change: transform;
}

.studio-scene .editorial-dot,
.studio-scene .editorial-kicker {
  transform: translate3d(var(--studio-kicker-x, 0), var(--studio-kicker-y, 0), 0);
  will-change: transform;
}

.studio-scene h2 {
  transform: translate3d(var(--studio-title-x, 0), var(--studio-title-y, 0), 0);
  will-change: transform;
}

.studio-copy {
  right: 245px;
  top: 514px;
  transform: translate3d(var(--studio-copy-x, 0), var(--studio-copy-y, 0), 0);
  will-change: transform;
}

.coast-line {
  position: absolute;
  left: 215px;
  bottom: 144px;
  width: 760px;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1.28;
  transform: translate3d(var(--studio-coast-x, 0), var(--studio-coast-y, 0), 0);
  will-change: transform;
}

.editorial-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #151515;
}

.editorial-photo img,
.memory-polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-photo {
  right: 315px;
  bottom: 110px;
  width: 430px;
  height: 286px;
  transform:
    translate3d(var(--studio-photo-x, 0), var(--studio-photo-y, 0), 0)
    rotate(calc(-2deg + var(--studio-photo-r, 0deg)));
  will-change: transform;
}

.paper-scene {
  color: var(--cream);
  background: #050713;
}

.paper-bg {
  object-position: center;
  filter: saturate(0.9) contrast(1.08) brightness(0.72);
}

.game-hero-video {
  opacity: 0.94;
}

.paper-grade {
  background:
    linear-gradient(90deg, rgba(3, 7, 19, 0.72), rgba(3, 7, 19, 0.1) 42%, rgba(3, 7, 19, 0.72)),
    linear-gradient(180deg, rgba(3, 7, 19, 0.18), rgba(3, 7, 19, 0.78));
}

.paper-type {
  position: absolute;
  right: 170px;
  bottom: 150px;
  z-index: 5;
  width: 600px;
  padding: 34px 36px 38px;
  color: var(--ink);
  background: rgba(239, 224, 187, 0.86);
  box-shadow: 0 24px 70px rgba(32, 20, 11, 0.22);
  opacity: var(--paper-type-alpha, 0);
  transform: translate3d(0, var(--paper-type-y, 44px), 0);
  will-change: transform, opacity;
}

.paper-type .scene-label {
  font-family: var(--type);
  font-size: 0.96rem;
  font-weight: 400;
}

.paper-type p:not(.scene-label) {
  min-height: 178px;
  margin: 18px 0 0;
  font-family: var(--type);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.34;
}

.game-scene h2 {
  max-width: 1260px;
  font-size: 9.6rem;
}

.game-editorial-logo {
  position: absolute;
  top: 118px;
  right: 520px;
  z-index: 3;
  width: 390px;
  opacity: 0.82;
  pointer-events: none;
  transform: rotate(-2deg);
  filter: drop-shadow(0 22px 38px rgba(7, 8, 21, 0.16));
}

.fragment-list {
  position: absolute;
  left: 220px;
  bottom: 150px;
  display: grid;
  grid-template-columns: repeat(4, 190px);
  gap: 12px;
}

.fragment-list span {
  display: grid;
  place-items: center;
  min-height: 90px;
  color: var(--ink);
  border: 1px solid rgba(7, 8, 21, 0.18);
  background: rgba(239, 224, 187, 0.86);
  box-shadow: 0 14px 34px rgba(7, 8, 21, 0.08);
  font-family: var(--display);
  font-size: 2rem;
  text-transform: uppercase;
}

.fragment-list span:nth-child(1) {
  transform: rotate(-2deg);
}

.fragment-list span:nth-child(2) {
  transform: rotate(1.5deg);
}

.fragment-list span:nth-child(3) {
  transform: rotate(-1deg);
}

.fragment-list span:nth-child(4) {
  transform: rotate(2deg);
}

.game-copy {
  right: 250px;
  top: 470px;
}

.memory-polaroid {
  position: absolute;
  z-index: var(--photo-z, 6);
  margin: 0;
  padding: 16px 16px 54px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), transparent 42%),
    #f1e3c8;
  box-shadow:
    0 30px 80px rgba(7, 8, 21, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.84) inset;
  cursor: grab;
  opacity: var(--photo-opacity, 0);
  touch-action: none;
  user-select: none;
  transform:
    translate3d(calc(var(--photo-x, 0px) + var(--drag-x, 0px)), calc(var(--photo-y, 0px) + var(--drag-y, 0px)), 0)
    rotate(calc(var(--photo-r, 0deg) + var(--drag-r, 0deg)));
  will-change: transform, opacity;
}

.memory-polaroid::before {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(7, 8, 21, 0.08);
  pointer-events: none;
  content: "";
}

.memory-polaroid.is-dragging {
  cursor: grabbing;
}

.memory-polaroid img {
  pointer-events: none;
  filter: saturate(0.94) contrast(1.04);
}

.memory-polaroid figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  overflow: hidden;
  color: rgba(7, 8, 21, 0.68);
  font-family: var(--type);
  font-size: 0.92rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gameplay-photo {
  right: 285px;
  bottom: 132px;
  width: 590px;
  height: 338px;
  --photo-r: -2deg;
}

.fragment-a {
  left: 118px;
  top: 750px;
  width: 294px;
  height: 206px;
  --photo-r: 4deg;
}

.fragment-b {
  right: 118px;
  top: 238px;
  width: 312px;
  height: 214px;
  --photo-r: -5deg;
}

.fragment-c {
  left: 620px;
  bottom: 105px;
  width: 282px;
  height: 198px;
  --photo-r: -3deg;
}

.hospital-scene {
  background: #050713;
}

.hospital-bg {
  object-position: center;
  filter: saturate(0.82) contrast(1.12) brightness(0.76);
}

.hospital-grade {
  background:
    linear-gradient(90deg, rgba(3, 7, 19, 0.82), rgba(3, 7, 19, 0.18), rgba(3, 7, 19, 0.72)),
    linear-gradient(180deg, rgba(3, 7, 19, 0.24), rgba(3, 7, 19, 0.84));
}

.hospital-caption {
  position: absolute;
  left: 136px;
  bottom: 132px;
  max-width: 560px;
  margin: 0;
  color: rgba(238, 233, 221, 0.78);
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 800;
  text-transform: uppercase;
}

.team-marquee {
  position: absolute;
  top: 395px;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 90px;
  width: max-content;
  color: #f8f2e5;
  font-family: var(--display);
  font-size: 11.8rem;
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0 18px 55px rgba(0, 0, 0, 0.82);
  transform: translate3d(var(--team-title-x, 1220px), 0, 0);
  will-change: transform;
}

.team-scene h2 {
  max-width: 1140px;
  font-size: 9.3rem;
}

.team-intro {
  position: absolute;
  right: 420px;
  top: 398px;
  width: 545px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.14rem;
  font-weight: 800;
  line-height: 1.55;
}

.team-grid {
  position: absolute;
  right: 400px;
  bottom: 130px;
  display: grid;
  grid-template-columns: repeat(3, 360px);
  gap: 18px;
}

.team-card {
  min-height: 330px;
  padding: 28px;
  color: var(--cream);
  background: var(--ink);
}

.team-card:nth-child(2) {
  color: var(--ink);
  background: var(--red);
}

.team-card span {
  display: block;
  margin-bottom: 48px;
  color: currentColor;
  font-family: var(--mono);
  font-size: 0.84rem;
  font-weight: 900;
  opacity: 0.78;
}

.team-card h3 {
  margin: 0;
  color: currentColor;
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.02;
  text-transform: uppercase;
}

.team-card p {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.team-card small {
  display: block;
  margin-top: 28px;
  color: currentColor;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;
  opacity: 0.78;
}

.community-scene {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  padding: 116px 140px;
  color: var(--cream);
  background:
    radial-gradient(circle at 55% 38%, rgba(35, 78, 122, 0.32), transparent 36%),
    linear-gradient(180deg, #050713, #02040a 68%, #010208);
}

.community-panel {
  width: 920px;
  max-width: 100%;
  padding: 66px 72px;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 39px, rgba(7, 8, 21, 0.1) 40px),
    linear-gradient(180deg, transparent 0 39px, rgba(7, 8, 21, 0.1) 40px),
    var(--paper-soft);
  background-size: 40px 40px;
  box-shadow: 0 38px 100px rgba(0, 0, 0, 0.42);
}

.community-panel h2 {
  margin-top: 18px;
  font-family: var(--display);
  font-size: 7.6rem;
  font-weight: 400;
  line-height: 0.94;
  text-transform: uppercase;
}

.community-panel p:not(.editorial-kicker):not(.form-note) {
  max-width: 650px;
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.55;
}

.newsletter-form {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 38px;
}

.newsletter-form input {
  min-width: 0;
  flex: 1;
  height: 54px;
  border: 0;
  border-bottom: 3px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 800;
  outline: 0;
}

.newsletter-form input::placeholder {
  color: rgba(7, 8, 21, 0.45);
}

.form-note {
  min-height: 24px;
  margin: 16px 0 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.site-footer {
  width: 1500px;
  max-width: calc(100% - 280px);
  margin-top: 78px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
  align-items: end;
  gap: 42px;
  color: rgba(238, 233, 221, 0.72);
}

.site-footer strong {
  display: block;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.32rem;
}

.site-footer p {
  margin: 8px 0 0;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  max-width: 620px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.site-footer > a {
  justify-self: end;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 800;
}

.transition-wipe {
  position: absolute;
  inset: -34% -48%;
  z-index: 40;
  display: block;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 52% 48%, rgba(230, 243, 255, 0.34), transparent 26%),
    linear-gradient(
      112deg,
      rgba(3, 7, 19, 0.98) 0%,
      rgba(8, 24, 45, 0.96) 32%,
      rgba(238, 233, 221, 0.82) 52%,
      rgba(216, 191, 145, 0.72) 66%,
      rgba(3, 7, 19, 0.96) 100%
    );
  box-shadow: inset 0 0 170px rgba(230, 243, 255, 0.16);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  will-change: transform, opacity;
}

.transition-wipe::before,
.transition-wipe::after {
  position: absolute;
  inset: -5%;
  pointer-events: none;
  content: "";
}

.transition-wipe::before {
  background: url("assets/brand/poti-beach-memory.jpg") center / cover;
  filter: blur(18px) saturate(0.7);
  opacity: 0.18;
  transform: scale(1.08);
}

.transition-wipe::after {
  background:
    linear-gradient(90deg, transparent 0 47px, rgba(7, 8, 21, 0.16) 48px),
    linear-gradient(180deg, transparent 0 47px, rgba(7, 8, 21, 0.12) 48px),
    repeating-linear-gradient(108deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 12px);
  background-size: 48px 48px, 48px 48px, auto;
  mix-blend-mode: soft-light;
  opacity: 0.42;
}

.transition-wipe span {
  position: absolute;
  inset: -8%;
  margin: 0;
  transform-origin: center;
}

.transition-wipe span:nth-child(1) {
  background:
    linear-gradient(104deg, transparent 0 30%, rgba(230, 243, 255, 0.72) 46%, transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent);
  filter: blur(10px);
  opacity: 0.56;
}

.transition-wipe span:nth-child(2) {
  background:
    radial-gradient(ellipse at 36% 52%, rgba(238, 233, 221, 0.52), transparent 20%),
    linear-gradient(98deg, transparent 0 42%, rgba(216, 191, 145, 0.4) 50%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.48;
}

.transition-wipe span:nth-child(3) {
  background:
    repeating-linear-gradient(0deg, rgba(7, 8, 21, 0.07) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 62% 40%, rgba(3, 7, 19, 0.58), transparent 42%);
  opacity: 0.34;
}

.scroll-meter {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  width: 160px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(238, 233, 221, 0.16);
}

.scroll-meter span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cream);
  transform: translate3d(-100%, 0, 0);
}

@media (max-width: 920px) {
  .site-header {
    inset: 12px 12px auto;
  }

  .main-nav {
    gap: 2px;
    padding: 4px;
  }

  .main-nav a {
    min-height: 31px;
    padding: 0 8px;
    font-size: 0.66rem;
    line-height: 31px;
  }

  .scene {
    width: 1680px;
    height: 1260px;
  }

  .poti-emblem {
    left: 50%;
    bottom: 214px;
    width: 760px;
  }

  .editorial-rule {
    left: 70px;
    top: 126px;
    width: 650px;
  }

  .editorial-dot {
    left: 755px;
    top: 114px;
  }

  .editorial-kicker {
    left: 798px;
    top: 108px;
  }

  .editorial-scene h2 {
    left: 82px;
    top: 204px;
    max-width: 1040px;
    font-size: 7.2rem;
  }

  .editorial-copy {
    left: 88px;
    right: auto;
    top: 590px;
    width: 520px;
    font-size: 1.02rem;
  }

  .coast-line {
    left: 88px;
    bottom: 130px;
    width: 560px;
    font-size: 1.55rem;
  }

  .studio-photo {
    display: none;
  }

  .paper-type {
    left: 82px;
    right: auto;
    bottom: 95px;
    width: 560px;
  }

  .game-scene h2,
  .team-scene h2 {
    font-size: 6.7rem;
  }

  .game-editorial-logo {
    top: 112px;
    right: 284px;
    width: 320px;
  }

  .fragment-list {
    left: 88px;
    bottom: 128px;
    grid-template-columns: repeat(2, 180px);
  }

  .gameplay-photo {
    left: 630px;
    right: auto;
    bottom: 116px;
    width: 430px;
    height: 258px;
  }

  .fragment-a {
    left: 92px;
    top: 780px;
    width: 244px;
    height: 176px;
  }

  .fragment-b {
    left: 1045px;
    right: auto;
    top: 236px;
    width: 252px;
    height: 178px;
  }

  .fragment-c {
    left: 782px;
    bottom: 406px;
    width: 226px;
    height: 166px;
  }

  .team-marquee {
    top: 470px;
    font-size: 8.6rem;
  }

  .team-intro {
    left: 88px;
    right: auto;
    top: 610px;
    width: 520px;
  }

  .team-grid {
    left: 88px;
    right: auto;
    bottom: 108px;
    grid-template-columns: repeat(3, 278px);
  }

  .team-card {
    min-height: 300px;
    padding: 22px;
  }

  .team-card h3 {
    font-size: 1.78rem;
  }

  .community-scene {
    padding: 86px;
  }

  .community-panel {
    width: 670px;
    padding: 48px;
  }

  .community-panel h2 {
    font-size: 5.2rem;
  }

  .site-footer {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 26px;
  }

  .site-footer nav {
    justify-content: flex-start;
  }

  .site-footer > a {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .main-nav a {
    padding: 0 7px;
    font-size: 0.62rem;
  }

  .scene {
    width: 1280px;
    height: 1180px;
  }

  .actions {
    gap: 9px;
  }

  .button {
    min-height: 42px;
    padding: 0 13px;
    font-size: 0.68rem;
  }

  .poti-emblem {
    left: 50%;
    bottom: 194px;
    width: 590px;
  }

  .editorial-rule {
    left: 46px;
    width: 410px;
  }

  .editorial-dot {
    left: 492px;
  }

  .editorial-kicker {
    left: 530px;
    font-size: 0.76rem;
  }

  .editorial-scene h2 {
    left: 48px;
    max-width: 780px;
    font-size: 5.2rem;
  }

  .editorial-copy,
  .team-intro {
    left: 52px;
    width: 420px;
    font-size: 0.94rem;
  }

  .coast-line {
    left: 52px;
    width: 430px;
    font-size: 1.24rem;
  }

  .paper-type {
    left: 50px;
    width: 430px;
    padding: 28px;
  }

  .paper-type p:not(.scene-label) {
    min-height: 158px;
    font-size: 1.18rem;
  }

  .game-scene h2,
  .team-scene h2 {
    font-size: 4.7rem;
  }

  .game-editorial-logo {
    top: 122px;
    right: 198px;
    width: 260px;
  }

  .gameplay-photo {
    left: 370px;
    bottom: 126px;
    width: 352px;
    height: 222px;
  }

  .fragment-a {
    left: 54px;
    top: 790px;
    width: 210px;
    height: 156px;
  }

  .fragment-b {
    left: 820px;
    top: 306px;
    width: 214px;
    height: 154px;
  }

  .fragment-c {
    display: none;
  }

  .fragment-list {
    left: 52px;
    grid-template-columns: repeat(2, 150px);
  }

  .fragment-list span {
    min-height: 74px;
    font-size: 1.6rem;
  }

  .team-marquee {
    top: 490px;
    font-size: 6.8rem;
  }

  .team-grid {
    left: 52px;
    grid-template-columns: repeat(3, 240px);
    gap: 12px;
  }

  .team-card {
    min-height: 284px;
    padding: 18px;
  }

  .team-card h3 {
    font-size: 1.45rem;
  }

  .team-card small {
    font-size: 0.82rem;
  }

  .community-scene {
    padding: 52px;
  }

  .community-panel {
    width: 480px;
    padding: 34px;
  }

  .community-panel h2 {
    font-size: 3.65rem;
  }

  .newsletter-form {
    display: grid;
  }

  .site-footer {
    width: 480px;
    max-width: none;
  }

  .scroll-meter {
    right: 14px;
    bottom: 14px;
    width: 104px;
  }
}

.no-gsap .journey {
  height: auto;
}

.no-gsap .journey-viewport {
  position: relative;
  height: auto;
  overflow: visible;
}

.no-gsap .journey-world {
  position: relative;
  width: auto;
  height: auto;
  transform: none;
}

.no-gsap .scene {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  min-height: 100svh;
}

.no-gsap .transition-wipe,
.no-gsap .scroll-meter {
  display: none;
}

.no-gsap .poti-emblem,
.no-gsap .team-marquee,
.no-gsap .paper-type,
.no-gsap .memory-polaroid {
  opacity: 1;
  transform: none;
}