.projects-page { min-height: 100svh; overflow-x: hidden; background: #06111f; }
.projects-stage { position: relative; isolation: isolate; min-height: 100svh; padding: clamp(112px, 13vh, 150px) clamp(24px, 4vw, 72px) 35px; display: flex; flex-direction: column; }
.projects-atmosphere { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(3, 11, 23, .84), rgba(3, 11, 23, .78) 42%, #06111f 100%), url('assets/mountain-infrastructure.457e77244b76.webp') center 28% / cover no-repeat; }
.projects-stage::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 90% 35%, rgba(29, 135, 232, .24), transparent 47%), radial-gradient(ellipse at 10% 88%, rgba(214, 104, 46, .11), transparent 36%); }
.projects-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; max-width: 1800px; width: 100%; margin: 0 auto clamp(24px, 3.2vh, 42px); }
.projects-kicker { margin: 0 0 12px; color: var(--blue); font: 600 10px var(--mono); letter-spacing: .17em; }
.projects-heading h1 { margin: 0; font: 800 clamp(72px, 8.8vw, 158px)/.76 var(--display); letter-spacing: -.022em; white-space: nowrap; }
.projects-heading h1 em { color: var(--blue); font-style: normal; }
.projects-heading > p { width: min(420px, 30%); margin: 0 0 3px; color: #d3e1ee; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.4; }
.projects-carousel { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: clamp(12px, 1.7vw, 28px); align-items: center; width: 100%; max-width: 1800px; margin: 0 auto; outline: none; }
.projects-viewport { overflow: hidden; min-width: 0; }
.projects-track { --visible-cards: 2; --card-gap: clamp(14px, 1.2vw, 22px); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--visible-cards) - 1) * var(--card-gap)) / var(--visible-cards)); gap: var(--card-gap); align-items: stretch; transition: transform .55s cubic-bezier(.2,.76,.16,1); will-change: transform; }
.project-card { --accent: #7fc8ff; display: flex; flex-direction: column; min-width: 0; min-height: min(590px, 58svh); overflow: hidden; border: 1px solid rgba(163, 205, 240, .42); background: linear-gradient(155deg, rgba(14, 37, 61, .98), rgba(6, 17, 30, .98)); box-shadow: 0 25px 70px rgba(0, 0, 0, .33), inset 0 1px 0 rgba(220, 240, 255, .1); }
.project-card:hover { border-color: var(--accent); }
.project-bucket { --accent: #ffad6c; }
.project-infinity { --accent: #7fc8ff; }
.project-checkdive { --accent: #69c9d8; }
.project-bumblewood { --accent: #afd788; }
.project-interviewee { --accent: #bc9dff; }
.project-greenhouse { --accent: #b9e5a9; }
.project-sorcery { --accent: #f2b878; }
.project-apexigames { --accent: #ffae69; }
.project-media { position: relative; flex: 0 0 clamp(210px, 28svh, 320px); min-height: 0; overflow: hidden; background: #0a1a2c; }
.project-media::after { content: ''; position: absolute; inset: 45% 0 0; pointer-events: none; background: linear-gradient(transparent, rgba(2, 10, 21, .65)); }
.project-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.76,.16,1); }
.project-card:hover .project-media img { transform: scale(1.035); }
.project-bucket .project-media img { object-position: 50% 40%; }
.project-infinity .project-media img { object-position: 50% 45%; }
.project-checkdive .project-media img { object-position: 50% 48%; }
.project-interviewee .project-media img { object-position: 50% 45%; }
.project-media-caption { position: absolute; z-index: 2; left: 19px; bottom: 16px; padding: 8px 10px; background: rgba(3, 13, 25, .78); border: 1px solid rgba(195, 223, 244, .32); color: #dceeff; font: 600 9px var(--mono); letter-spacing: .08em; }
.project-media-mark { position: absolute; z-index: 2; right: 24px; top: 12px; color: rgba(233, 248, 255, .64); font: 300 64px var(--body); }
.project-watch { position: absolute; z-index: 3; right: 19px; bottom: 16px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--accent); background: rgba(4, 17, 30, .88); color: #fff; font: 700 9px var(--mono); letter-spacing: .07em; cursor: pointer; }
.project-watch:hover { background: var(--accent); color: #06111f; }
.project-card-content { display: flex; flex: 1; flex-direction: column; padding: clamp(18px, 1.8vw, 29px); }
.project-meta, .project-bottom { display: flex; justify-content: space-between; gap: 12px; color: var(--accent); font: 600 clamp(8px, .62vw, 10px) var(--mono); letter-spacing: .1em; }
.project-meta { margin-bottom: clamp(13px, 1.7vh, 23px); }
.project-meta span:last-child { text-align: right; }
.project-card h2 { margin: 0; font: 800 clamp(43px, 4vw, 70px)/.86 var(--display); letter-spacing: -.016em; text-transform: uppercase; }
.project-card h2 em { color: var(--accent); font-style: normal; }
.project-card-content > p { max-width: 660px; margin: clamp(14px, 1.7vh, 22px) 0 clamp(20px, 2vh, 29px); color: #cddcec; font-size: clamp(14px, 1vw, 17px); line-height: 1.43; }
.project-bottom { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(171, 209, 237, .25); color: #9cb9d0; }
.project-bottom span:last-child, .project-bottom a, .project-bottom button { color: var(--accent); text-align: right; }
.project-bottom button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; cursor: pointer; }
.project-bottom a:hover, .project-bottom button:hover { text-decoration: underline; text-underline-offset: 3px; }
.projects-arrow { width: 64px; height: 92px; display: grid; place-items: center; border: 1px solid rgba(147, 204, 251, .6); background: rgba(6, 23, 41, .76); color: var(--blue); font: 300 57px/.6 var(--body); cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .2s; }
.projects-arrow:not(:disabled):hover { transform: scale(1.05); background: var(--blue); color: #06111f; }
.projects-arrow:disabled { opacity: .3; cursor: default; }
.projects-footline { display: flex; align-items: center; justify-content: space-between; gap: 25px; width: 100%; max-width: 1800px; margin: clamp(23px, 3vh, 39px) auto 0; padding-top: 17px; border-top: 1px solid rgba(171, 209, 237, .35); color: #a5c4dd; font: 600 10px var(--mono); letter-spacing: .1em; }
.projects-footline [data-project-range] { color: var(--blue); }
.project-workflow { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2vw, 30px); background: radial-gradient(circle at 80% 20%, rgba(100, 204, 135, .18), transparent 46%), linear-gradient(125deg, #091e2c, #133b3f); }
.project-workflow::after { display: none; }
.workflow-head { display: flex; justify-content: space-between; gap: 10px; color: #b7eec8; font: 700 10px var(--mono); letter-spacing: .12em; }
.workflow-steps { display: flex; justify-content: center; align-items: center; gap: clamp(5px, 1vw, 16px); }
.workflow-steps span { flex: 1; min-width: 0; padding: clamp(11px, 1.3vw, 22px) 4px; border: 1px solid rgba(172, 235, 191, .62); background: rgba(9, 35, 39, .83); color: #b9e5a9; text-align: center; font: 600 clamp(7px, .7vw, 10px) var(--mono); white-space: nowrap; }
.workflow-steps b { display: block; margin-top: 8px; color: #f1fff0; font: 700 clamp(10px, 1vw, 15px) var(--mono); }
.workflow-steps i { flex: 0 0 7px; height: 1px; background: #a6e8af; }
.workflow-readout { display: flex; flex-direction: column; gap: 5px; margin-bottom: 29px; color: #b9e5a9; font: 600 9px var(--mono); letter-spacing: .07em; }
.workflow-readout strong { color: #f0fff2; font-size: clamp(11px, 1vw, 15px); }
.project-video-dialog { width: min(1000px, calc(100vw - 40px)); max-height: calc(100svh - 40px); padding: 0; overflow: auto; border: 1px solid rgba(154, 211, 255, .6); background: #061320; color: #eaf5ff; box-shadow: 0 35px 110px #000; }
.project-video-dialog::backdrop { background: rgba(1, 6, 14, .85); backdrop-filter: blur(12px); }
.project-video-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 19px; color: var(--blue); font: 700 11px var(--mono); letter-spacing: .12em; }
.project-video-top button { width: 34px; height: 34px; border: 1px solid var(--line); background: transparent; color: var(--blue); cursor: pointer; }
.project-video-dialog video { display: block; width: 100%; max-height: calc(100svh - 105px); background: #000; }
@media (max-height: 850px) and (min-width: 801px) {
  .projects-stage { padding-top: 105px; }
  .projects-heading { margin-bottom: 20px; }
  .projects-heading h1 { font-size: clamp(70px, 7.3vw, 122px); }
  .project-card { min-height: 480px; }
  .project-media { flex-basis: clamp(185px, 26svh, 240px); }
  .projects-footline { margin-top: 16px; }
}
@media (max-width: 1100px) {
  .projects-heading h1 { font-size: clamp(65px, 8vw, 105px); }
  .projects-carousel { grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 10px; }
  .projects-arrow { width: 52px; height: 76px; font-size: 48px; }
  .project-card h2 { font-size: clamp(39px, 4.7vw, 60px); }
}
@media (max-width: 800px) {
  .projects-stage { padding: 105px 18px 25px; }
  .projects-heading { display: block; margin-bottom: 21px; }
  .projects-heading h1 { font-size: clamp(67px, 12vw, 100px); white-space: normal; }
  .projects-heading > p { width: min(100%, 550px); margin-top: 13px; font-size: 15px; }
  .projects-carousel { grid-template-columns: minmax(0, 1fr); position: relative; }
  .projects-track { --visible-cards: 1; }
  .projects-viewport { margin: 0 45px; }
  .projects-arrow { position: absolute; z-index: 5; top: 36%; width: 44px; height: 72px; }
  .projects-arrow:first-child { left: 0; }
  .projects-arrow:last-child { right: 0; }
  .project-card { min-height: 570px; }
  .project-media { flex-basis: 270px; }
  .project-card h2 { font-size: clamp(45px, 8vw, 65px); }
  .project-card-content > p { font-size: 16px; }
  .projects-hint { display: none; }
}
@media (max-width: 520px) {
  .projects-stage { padding: 95px 12px 22px; }
  .projects-kicker { font-size: 8px; }
  .projects-heading h1 { font-size: clamp(57px, 15vw, 83px); }
  .projects-heading > p { font-size: 14px; }
  .projects-viewport { margin: 0 33px; }
  .projects-arrow { top: 30%; width: 32px; height: 62px; font-size: 39px; }
  .project-card { min-height: 0; }
  .project-media { flex-basis: 210px; }
  .project-card-content { min-height: 285px; padding: 15px; }
  .project-card h2 { font-size: clamp(41px, 12vw, 63px); }
  .project-card-content > p { font-size: 14px; line-height: 1.42; }
  .project-meta, .project-bottom { font-size: 8px; letter-spacing: .04em; }
  .project-media-caption { left: 9px; bottom: 9px; max-width: 70%; font-size: 7px; }
  .project-watch { right: 9px; bottom: 9px; padding: 8px; font-size: 8px; }
  .project-watch span { display: none; }
  .workflow-head { font-size: 7px; }
  .workflow-steps { gap: 3px; }
  .workflow-steps i { flex-basis: 3px; }
  .workflow-steps span { font-size: 6px; }
  .workflow-steps b { font-size: 8px; }
  .projects-footline { gap: 10px; font-size: 9px; }
}
@media (max-width: 520px) and (max-height: 850px) {
  .projects-stage { padding-top: 85px; }
  .projects-heading { margin-bottom: 16px; }
  .project-media { flex-basis: 175px; }
  .project-card-content { padding: 13px; }
  .project-card-content > p { margin: 10px 0 14px; }
  .projects-footline { margin-top: 16px; }
}
@media (min-width: 801px) and (max-height: 800px) {
  .projects-stage { padding-top: 95px; }
  .projects-heading { margin-bottom: 12px; }
  .project-card { min-height: 0; }
  .project-media { flex-basis: 160px; }
  .project-card-content { padding: 16px; }
  .project-meta { margin-bottom: 10px; }
  .project-card-content > p { margin: 10px 0 13px; font-size: 14px; }
  .projects-footline { margin-top: 12px; padding-top: 12px; }
}
@media (min-width: 521px) and (max-width: 800px) and (max-height: 950px) {
  .projects-stage { padding-top: 98px; }
  .projects-heading { margin-bottom: 16px; }
  .project-card { min-height: 0; }
  .project-media { flex-basis: 240px; }
  .projects-footline { margin-top: 20px; }
}
@media (min-width: 521px) and (max-width: 800px) and (max-height: 800px) {
  .projects-stage { padding-top: 88px; }
  .projects-heading h1 { font-size: 70px; }
  .projects-heading > p { margin-top: 9px; }
  .project-media { flex-basis: 170px; }
  .projects-footline { margin-top: 12px; padding-top: 12px; }
}
@media (min-width: 521px) and (max-height: 800px) {
  .project-workflow { padding: 12px 16px; }
  .workflow-steps span { padding: 6px 3px; }
  .workflow-steps b { margin-top: 4px; }
  .workflow-readout { gap: 1px; margin-bottom: 38px; }
  .workflow-readout span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .projects-track, .project-media img, .projects-arrow { transition-duration: .01ms; }
}

/* The studio mascot appears when its carousel card comes into view. */
.project-apexigames .project-pixie-stage { isolation: isolate; background: radial-gradient(circle at 73% 50%, rgba(241, 142, 43, .49), transparent 34%), radial-gradient(circle at 47% 25%, rgba(125, 82, 225, .58), transparent 60%), linear-gradient(125deg, #090d2d, #3b2053 75%, #7c3d35); }
.project-apexigames .project-pixie-stage::after { display: none; }
.project-pixie-stage::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 236, 190, .75) 1px, transparent 1.4px); background-size: 31px 29px; opacity: .17; transform: rotate(-10deg) scale(1.2); }
.pixie-orbit { position: absolute; top: 50%; left: 67%; width: 290px; height: 290px; transform: translate(-50%, -50%) rotate(-19deg); border: 1px solid rgba(255, 206, 142, .31); border-radius: 50%; box-shadow: 0 0 60px rgba(238, 130, 44, .12), inset 0 0 65px rgba(238, 130, 44, .1); }
.pixie-orbit-two { width: 205px; height: 205px; transform: translate(-50%, -50%) rotate(27deg); border-style: dashed; opacity: .5; }
.pixie-wordmark { position: absolute; z-index: 1; top: 19%; left: 6%; color: #fff4e9; font: 900 clamp(52px, 5vw, 94px)/.73 var(--display); letter-spacing: -.035em; text-shadow: 0 10px 30px rgba(3, 7, 22, .45); }
.pixie-wordmark b { color: #ffb55f; font-weight: 900; }
.pixie-flight { position: absolute; z-index: 2; top: -11%; right: 5%; width: clamp(190px, 21vw, 335px); height: 130%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate(45%, 28%) rotate(-17deg) scale(.55); filter: drop-shadow(0 22px 24px rgba(14, 5, 26, .45)); }
.project-pixie-stage .pixie-flight img { display: block; width: 100%; height: auto; object-fit: contain; padding: 0; }
.project-apexigames.is-active .pixie-flight { animation: pixie-arrive 1.1s cubic-bezier(.18,.8,.18,1) .1s both, pixie-bob 4s ease-in-out 1.2s infinite alternate; }
.pixie-spark { position: absolute; z-index: 3; color: #ffd884; opacity: 0; text-shadow: 0 0 15px #ffad47; font-size: 24px; }
.pixie-spark-one { top: 19%; right: 25%; }
.pixie-spark-two { top: 64%; right: 8%; font-size: 16px; }
.pixie-spark-three { top: 35%; right: 4%; font-size: 12px; }
.project-apexigames.is-active .pixie-spark-one { animation: pixie-spark 2.7s ease-in-out 1.1s infinite; }
.project-apexigames.is-active .pixie-spark-two { animation: pixie-spark 2.7s ease-in-out 1.8s infinite; }
.project-apexigames.is-active .pixie-spark-three { animation: pixie-spark 2.7s ease-in-out 2.4s infinite; }
@keyframes pixie-arrive { to { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } }
@keyframes pixie-bob { from { opacity: 1; transform: translate(0, 0) rotate(-2deg) scale(1); } to { opacity: 1; transform: translate(0, -10px) rotate(2deg) scale(1.025); } }
@keyframes pixie-spark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 35%, 65% { opacity: 1; transform: scale(1.15) rotate(28deg); } }
@media (max-width: 1100px) { .pixie-wordmark { font-size: clamp(50px, 6vw, 79px); } .pixie-flight { width: clamp(170px, 22vw, 280px); } }
@media (max-width: 800px) { .pixie-flight { width: clamp(190px, 39vw, 300px); } }
@media (max-width: 520px) { .pixie-wordmark { top: 20%; font-size: 54px; } .pixie-flight { top: -6%; right: -12%; width: 220px; } .pixie-orbit { left: 70%; } }
@media (prefers-reduced-motion: reduce) { .project-apexigames.is-active .pixie-flight { opacity: 1; transform: none; animation: none; } .project-apexigames.is-active .pixie-spark { opacity: .8; animation: none; } }