/* Ampazat Games — game hub */
@font-face{font-family:"Teko";src:url(assets/fonts/teko-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Teko";src:url(assets/fonts/teko-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Teko";src:url(assets/fonts/teko-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow";src:url(assets/fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(assets/fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(assets/fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#111113; --bg-2:#141416; --deep:#0d0d0f; --slate:#1c1b1f;
  --text:#f4f2f0; --body:#b9b4b1; --muted:#8f8a87;
  --red:#e5231a; --red-hot:#ff3b2f; --amber:#f2b63d;
  --rail:64px; --z:1; --vhz:900;
  --display:"Teko", "Arial Narrow", sans-serif;
  --sans:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p,h1,h2,h3{margin:0}
em{font-style:italic;color:var(--text)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--red);color:#fff;padding:10px 14px;text-decoration:none}
.skip:focus{top:12px}

.site{position:relative;zoom:var(--z)}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}

/* type */
.kicker{font-family:var(--display);font-size:24px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);line-height:1.1}
.title-xl{font-family:var(--display);font-weight:600;font-size:100px;line-height:.84;text-transform:uppercase;color:#fff;margin-top:4px}
.title-xl--sm{font-size:88px;line-height:.86}
.title-lg{font-family:var(--display);font-weight:600;font-size:72px;line-height:.88;text-transform:uppercase;color:#fff;margin-top:4px}
.sub{font-family:var(--display);font-size:30px;text-transform:uppercase;color:var(--muted);margin-top:6px}
.body{font-size:17px;line-height:1.6;color:var(--body);max-width:28em;margin-top:20px}
.note{font-size:14px;color:var(--muted);margin-top:16px}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-block;text-decoration:none;font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:12px 28px 9px;border-radius:999px;transition:background .2s,border-color .2s}
.btn--red{background:var(--red);color:#fff;box-shadow:0 10px 30px rgba(229,35,26,.4)}
.btn--red:hover{background:var(--red-hot)}
.btn--line{color:#fff;border:2px solid var(--red)}
.btn--line:hover{border-color:#fff}
.copy .btn{margin-top:28px}

/* nav */
.nav{position:fixed;top:0;left:0;right:var(--rail);z-index:40;background:linear-gradient(rgba(17,17,19,.95),rgba(17,17,19,0))}
.nav__inner{display:flex;align-items:center;gap:40px;padding-top:16px;padding-bottom:16px}
.nav__brand img{height:46px;width:auto}
.nav__links{display:flex;flex-wrap:wrap;gap:28px;font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:.04em;text-transform:uppercase}
.nav__links a{text-decoration:none;color:#a8a4a2;transition:color .2s}
.nav__links a:hover{color:#fff}

/* rail */
.rail{position:fixed;top:0;right:0;bottom:0;width:var(--rail);z-index:41;background:var(--red);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px 0}
.rail__num{font-family:var(--display);font-size:22px;font-weight:600;color:#fff}
.rail__dots{display:flex;flex-direction:column;align-items:center;gap:12px}
.rail__dots i{display:block;width:4px;height:10px;border-radius:2px;background:rgba(255,255,255,.45);transition:height .3s,background .3s}
.rail__dots i.on{height:32px;background:#fff}
.rail__label{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);font-size:18px;letter-spacing:.18em;text-transform:uppercase;color:#fff}

/* pinned scenes */
.scene{position:relative}
.scene--hero{height:1700px}
.scene--games{height:3200px}
.scene--flood{height:2000px}
.scene--concepts{height:2800px}
.scene--name{height:2200px}
.pin{position:sticky;top:0;height:calc(var(--vhz) * 1px);overflow:hidden;padding-right:var(--rail);background:var(--bg)}
.pin--games{background:var(--bg-2)}
.pin--deep{background:var(--deep)}
.pin--glow{background:radial-gradient(800px 600px at 30% 55%,rgba(229,35,26,.18),transparent 70%),var(--bg)}
.split{height:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:50px;align-items:center;padding-top:90px;padding-bottom:40px}
.split--flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* hero */
.hero__bg{position:absolute;inset:0;background:radial-gradient(900px 600px at var(--gx,22%) 45%,rgba(229,35,26,.28),transparent 70%),radial-gradient(700px 500px at 85% 95%,rgba(120,20,30,.3),transparent 70%),var(--bg)}
.ghost{position:absolute;left:-2%;bottom:-8%;font-family:var(--display);font-weight:700;font-size:380px;line-height:.8;color:rgba(255,255,255,.03);white-space:nowrap;will-change:transform}
.hero__grid{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;padding-top:96px;padding-bottom:40px}
.hero__logo{width:230px;filter:drop-shadow(0 20px 34px rgba(0,0,0,.6))}
.hero__left .kicker{margin-top:26px;font-size:22px}
.hero__title{font-family:var(--display);font-weight:600;font-size:82px;line-height:.86;text-transform:uppercase;color:#fff}
.hero__lede{margin-top:18px;max-width:27em;font-size:16px;color:var(--body)}
.pick__pre{font-family:var(--display);font-size:22px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pick__title{font-family:var(--display);font-weight:600;font-size:80px;line-height:1;text-transform:uppercase;color:#fff;margin-top:-10px}
.cards{margin-top:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:end}
.card-wrap{transform:translate3d(260px,0,0);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s ease}
.is-ready .card-wrap{transform:none;opacity:1}
.card-wrap:nth-child(1){transition-delay:.15s}.card-wrap:nth-child(2){transition-delay:.25s}.card-wrap:nth-child(3){transition-delay:.35s}.card-wrap:nth-child(4){transition-delay:.45s}
.card{position:relative;display:block;height:290px;border-radius:24px;text-decoration:none;box-shadow:0 30px 60px rgba(0,0,0,.5);will-change:transform}
.card-wrap:nth-child(even) .card{margin-bottom:26px}
.card--red{background:linear-gradient(160deg,#e5231a,#7a0d12)}
.card--dark{background:linear-gradient(160deg,#3a2e30,#1a1517)}
.card--slate{background:linear-gradient(160deg,#2a2a30,#17171b)}
.card__art{position:absolute;left:50%;bottom:var(--b);width:var(--w);max-width:none;transform:translate3d(-50%,24px,0) scale(.92);filter:drop-shadow(0 18px 22px rgba(0,0,0,.55));will-change:transform}
.card__soon{position:absolute;left:0;right:0;top:40px;text-align:center;font-family:var(--display);font-weight:700;font-size:120px;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.14)}
.card__meta{position:absolute;left:18px;right:18px;bottom:18px;display:block}
.card__name{display:block;font-family:var(--display);font-size:26px;font-weight:600;line-height:1;text-transform:uppercase;color:#fff}
.card__tag{display:block;margin-top:4px;font-size:13px;font-weight:600;color:var(--body)}
.card__tag--live{color:#ff7a70}
.card__tag--dev{color:var(--amber)}
.card:hover{box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.18)}

/* out now */
.slide{position:absolute;inset:0 var(--rail) 0 0;will-change:transform}
#slideKb{transform:translate3d(105%,0,0)}
.stats{display:flex;gap:34px;margin-top:26px}
.stats b{display:block;font-family:var(--display);font-size:40px;line-height:1;color:#fff}
.stats span{font-size:13px;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pills span{font-size:13px;font-weight:600;color:#fff;background:rgba(229,35,26,.2);border:1px solid rgba(229,35,26,.6);padding:5px 12px;border-radius:999px}
.panel{position:relative;height:460px;border-radius:32px;overflow:hidden}
.panel--red{background:linear-gradient(135deg,#e5231a 0%,#a3121a 55%,#4a0a10 100%);box-shadow:0 40px 90px rgba(229,35,26,.25)}
.panel--board{background:linear-gradient(135deg,#2a2426 0%,#1b1719 60%,#120f10 100%);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.panel--slate{background:var(--slate)}
.road{position:absolute;left:-10%;right:-10%;will-change:transform}
.road--a{top:66%;height:6px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 60px,transparent 60px 120px)}
.road--b{top:84%;height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 30px,transparent 30px 90px)}
.panel__ghost{position:absolute;right:24px;top:14px;font-family:var(--display);font-weight:700;font-size:150px;line-height:1;color:rgba(255,255,255,.08)}
.jeep{position:absolute;left:10%;bottom:52px;width:76%;filter:drop-shadow(0 30px 30px rgba(0,0,0,.5));will-change:transform}
.board-grid{position:absolute;inset:40px;border-radius:18px;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px}
.cube{position:absolute;filter:drop-shadow(0 24px 24px rgba(0,0,0,.5));will-change:transform}
.cube--1{left:6%;bottom:56px;width:34%}
.cube--2{left:34%;bottom:150px;width:36%}
.cube--3{right:5%;bottom:40px;width:34%}
.flash{position:absolute;left:40px;right:40px;top:50%;height:4px;border-radius:2px;background:#fff;box-shadow:0 0 30px #fff;opacity:0}
.panel__soon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-weight:700;font-size:150px;line-height:.82;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.12)}
.water{position:absolute;left:0;right:0;bottom:0;height:6%;background:linear-gradient(rgba(70,140,200,.55),rgba(20,60,110,.85));border-top:2px solid rgba(200,230,255,.7)}

/* concepts */
.outline-text{position:absolute;left:0;top:50%;font-family:var(--display);font-weight:700;font-size:380px;line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.08);transform:translate3d(200px,-50%,0);will-change:transform}
.apex{position:absolute;inset:0 var(--rail) 0 0}
.apex__car{position:absolute;left:50%;top:52%;width:760px;transform:translate(-50%,-50%);will-change:transform}
.apex__car img{position:relative;width:100%;filter:drop-shadow(0 40px 40px rgba(0,0,0,.7))}
.apex__smoke{position:absolute;right:-40%;top:30%;width:70%;height:60%;background:radial-gradient(closest-side,rgba(230,230,240,.35),transparent);filter:blur(20px)}
.apex__copy{position:absolute;left:0;right:0;bottom:70px}
.apex__row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.apex__row .body{margin-top:0;max-width:26em}
.gear-layer{position:absolute;inset:0 var(--rail) 0 0;background:var(--deep);transform:translate3d(0,105%,0);will-change:transform}

/* story */
.story{padding:170px var(--rail) 170px 0;background:var(--bg)}
.story__grid{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:60px;align-items:start;will-change:transform}
.story__text{font-size:20px;line-height:1.7;color:#c9c4c1;max-width:40em;margin-top:8px}

/* the name */
.count{position:relative;height:520px;display:flex;align-items:center;justify-content:center}
.count__stone{height:480px;width:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.count__num{position:absolute;font-family:var(--display);font-weight:700;font-size:280px;line-height:1;color:#fff;text-shadow:0 12px 50px rgba(0,0,0,.6)}
.found{font-family:var(--display);font-weight:600;font-size:54px;line-height:1;text-transform:uppercase;color:var(--red);margin-top:26px;opacity:0}

/* contact */
.contact{padding:140px var(--rail) 50px 0;background:var(--deep)}
.contact__title{font-family:var(--display);font-weight:600;font-size:130px;line-height:.82;text-transform:uppercase;color:#fff}
.contact .body{max-width:none}
.contact .actions{margin-top:32px}
.footer{margin-top:120px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.footer img{height:42px;width:auto}

/* ---------- phones and small tablets: stacked, no pinning ---------- */
.is-mobile .site{zoom:1}
.is-mobile{--rail:0px}
.is-mobile .rail{display:none}
.is-mobile .nav__links{display:none}
.is-mobile .nav{background:rgba(17,17,19,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.is-mobile .scene{height:auto}
.is-mobile .pin{position:relative;height:auto;overflow:visible;padding:0}
.is-mobile .split,.is-mobile .split--flip,.is-mobile .split--even,.is-mobile .hero__grid,.is-mobile .story__grid{grid-template-columns:1fr;height:auto;padding-top:110px;padding-bottom:60px;gap:36px}
.is-mobile .wrap{padding-left:20px;padding-right:20px}
.is-mobile .hero__title{font-size:64px}
.is-mobile .title-xl{font-size:72px}
.is-mobile .title-lg{font-size:56px}
.is-mobile .contact__title{font-size:76px}
.is-mobile .ghost,.is-mobile .outline-text{display:none}
.is-mobile .cards{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:70px;row-gap:70px}
.is-mobile .card{height:230px}
.is-mobile .card__art{width:min(var(--w),118%)}
.is-mobile .apex__car{width:92%;margin:0 auto}
.is-mobile .split,.is-mobile .split--flip,.is-mobile .split--even{padding-top:56px;padding-bottom:20px}
.is-mobile #slideZo .split{padding-top:70px}
.is-mobile .story__grid{padding-top:0;padding-bottom:0;gap:20px}
.is-mobile .gear-layer .split{padding-top:40px}
.is-mobile .scene--name .split{padding-top:40px;padding-bottom:40px}
.is-mobile .card-wrap:nth-child(even) .card{margin-bottom:0}
.is-mobile .slide,.is-mobile .apex,.is-mobile .gear-layer{position:relative;inset:auto;transform:none!important}
.is-mobile .panel{height:300px}
.is-mobile .panel__ghost{font-size:90px}
.is-mobile .panel__soon{font-size:90px}
.is-mobile .apex{padding-top:40px}
.is-mobile .apex__car{position:relative;left:auto;top:auto;width:100%;transform:none}
.is-mobile .apex__copy{position:relative;bottom:auto;margin-top:16px;padding-bottom:0}
.is-mobile .count{height:360px}
.is-mobile .count__stone{height:330px}
.is-mobile .count__num{display:none}
.is-mobile .found{opacity:1}
.is-mobile .story{padding:56px 0 30px}
.is-mobile .contact{padding:90px 0 40px}

@media (prefers-reduced-motion: reduce){
  .card-wrap{transition:none}
}