/* Two alternating compositions: overlapping App recordings and a frameless catalog. */
.gameplay {
  --gameplay-gap: clamp(36px, 5vw, 80px);
  --gameplay-space: clamp(76px, 8vw, 128px);
  --gameplay-heading: clamp(36px, 4vw, 58px);
  --gameplay-body: 16px;
  --gameplay-copy-width: 370px;
  --demo-width: 44%;
  --demo-base-left: 28%;
  --demo-side-inset: 3%;
  --demo-center: 37%;
  --demo-base-center: 64%;
  --demo-center-offset: -50%;
  --demo-fade-start: 12%;
  --demo-fade-top: 16%;
  --demo-fade-bottom: 84%;
  --demo-fade-end: 88%;
  --demo-base-layer: 3;
  --demo-map-layer: 2;
  --demo-quest-layer: 1;
  --demo-stage-ratio: 1 / .96;
  --demo-radius: 24px;
  --demo-border: 3px;
  --demo-shadow: 0 18px 30px -10px #243e3c38;
  --catalog-gap: 14px;
  --catalog-loop-duration: 60s;
  padding-top: var(--gameplay-space);
  overflow: clip;
}
.gameplay-block { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: var(--gameplay-gap); }
.gameplay-copy { position: relative; min-width: 0; }
.gameplay-copy h2 { font-size: var(--gameplay-heading); line-height: 1.35; letter-spacing: -.045em; }
.gameplay-copy p { font-size: var(--gameplay-body); max-width: var(--gameplay-copy-width); margin-top: 28px; color: var(--muted); line-height: 1.95; }
.gameplay-visual { min-width: 0; position: relative; isolation: isolate; }
.gameplay-adventure { padding-bottom: var(--gameplay-space); }
.gameplay-adventure .gameplay-copy { grid-column: 2; grid-row: 1; }
.gameplay-adventure .gameplay-visual { grid-column: 1; grid-row: 1; }
.paired-demos { aspect-ratio: var(--demo-stage-ratio); mask-image: linear-gradient(to bottom, transparent var(--demo-fade-start), #000 var(--demo-fade-top), #000 var(--demo-fade-bottom), transparent var(--demo-fade-end)); }
.demo-screen { position: absolute; top: var(--demo-center); transform: translateY(var(--demo-center-offset)); width: var(--demo-width); aspect-ratio: 576 / 1120; border: var(--demo-border) solid #fffdf5; border-radius: var(--demo-radius); overflow: hidden; background: #aedc9c; box-shadow: var(--demo-shadow); pointer-events: none; }
.demo-map { left: var(--demo-side-inset); z-index: var(--demo-map-layer); }
.demo-base { --demo-center: var(--demo-base-center); left: var(--demo-base-left); z-index: var(--demo-base-layer); }
.demo-quest { right: var(--demo-side-inset); z-index: var(--demo-quest-layer); }
.demo-poster, .demo-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo-video { position: absolute; inset: 0; opacity: 0; }
.demo-video.is-playing { opacity: 1; }
.gameplay-quests { background: #243e3c; color: #fffbed; padding-block: var(--gameplay-space); overflow: clip; }
.gameplay-quests .gameplay-block { grid-template-columns: 1fr 1.5fr; }
.gameplay-quests .gameplay-copy { grid-column: 1; grid-row: 1; }
.gameplay-quests .gameplay-visual { grid-column: 2; grid-row: 1; }
.gameplay-quests .gameplay-copy p { color: #c5d9d1; }
.quest-visual { height: clamp(480px, 45vw, 660px); }
.catalog-perspective { width: 100%; height: 100%; perspective: 1500px; mask-image: linear-gradient(transparent, #000 12%, #000 83%, transparent); }
.catalog-flow { display: grid; grid-template-columns: repeat(var(--catalog-columns), minmax(0,1fr)); gap: var(--catalog-gap); width: 100%; height: 100%; transform: rotateX(8deg) rotateY(-12deg) rotateZ(9deg); pointer-events: none; }
.catalog-lane { min-width: 0; }
.catalog-track { animation: catalog-scroll var(--catalog-loop-duration) linear infinite; animation-play-state: paused; will-change: transform; }
.catalog-set { display: grid; gap: var(--catalog-gap); padding-bottom: var(--catalog-gap); }
.catalog-lane:nth-child(2) { --catalog-loop-duration: 72s; }
.catalog-lane:nth-child(even) .catalog-track { animation-direction: reverse; }
.catalog-lane:nth-child(3) { --catalog-loop-duration: 66s; }
.catalog-lane:nth-child(4) { --catalog-loop-duration: 78s; }
.catalog-lane:nth-child(5) { --catalog-loop-duration: 69s; }
.catalog-tile { overflow: hidden; border-radius: 13px; border: 1px solid #d5dee4; }
.catalog-art { aspect-ratio: 1; background: #10c3ad var(--item-surface) center / cover; padding: 18%; }
.catalog-art img { width: 100%; height: 100%; object-fit: contain; filter: url(#item-outline); }
.catalog-tile.is-locked .catalog-art { filter: grayscale(1); }
.catalog-tile.is-locked img { filter: url(#bird-undiscovered); }
.motion-stage.is-visible .catalog-track { animation-play-state: running; }
@keyframes catalog-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (max-width: 1000px) {
  .gameplay { --gameplay-heading: 37px; --gameplay-gap: 35px; --demo-border: 3px; --demo-radius: 22px; --catalog-gap: 10px; }
  .gameplay-block { grid-template-columns: 1.3fr 1fr; }
  .gameplay-quests .gameplay-block { grid-template-columns: 1fr 1.3fr; }
  .catalog-tile { border-radius: 10px; }
}
@media (max-width: 760px) {
  .gameplay { --gameplay-heading: clamp(34px, 8vw, 46px); --gameplay-body: 15px; --gameplay-gap: 32px; --demo-border: 2px; --demo-radius: 13px; --catalog-gap: 9px; }
  .gameplay-block, .gameplay-quests .gameplay-block { grid-template-columns: 1fr; }
  .gameplay-block .gameplay-copy { grid-column: 1; grid-row: 1; }
  .gameplay-block .gameplay-visual { grid-column: 1; grid-row: 2; }
  .gameplay-copy p { max-width: none; margin-top: 20px; }
  .paired-demos { margin-inline: -8px; }
  .quest-visual { height: min(125vw, 530px); }
  .catalog-perspective { width: calc(100% + 16px); margin-left: -8px; }
  .catalog-flow { transform: rotateX(5deg) rotateY(-8deg) rotateZ(9deg); }
  .catalog-tile { border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-track { animation: none; will-change: auto; }
  .catalog-lane:nth-child(even) .catalog-track { transform: translateY(-8%); }
  .demo-video { display: none; }
}