/* homepage games section: Deck (cards slide over each other as you scroll) */
#games{--ink:#101a2b;--gold:#ffd21e;--ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.3,1.5,.5,1);padding:84px 0 0;background:#fff;color:var(--ink);line-height:1.5}
#games h2,#games h3,#games p{margin:0}
#games :focus-visible{outline:3px solid rgba(16,26,43,.55);outline-offset:4px;border-radius:12px}
.games-head{--lift:clamp(40px,5vw,72px);position:relative;z-index:3;top:calc(-1 * var(--lift));max-width:1000px;margin:0 auto 36px;padding:0 22px}
.games-head h2{letter-spacing:.1em;font:400 clamp(40px,6.2vw,70px)/1 Comicy,Helvetica,sans-serif;text-transform:uppercase;text-align:center;background:#ffcf1d;-webkit-background-clip:text;background-clip:text;color:transparent}

/* card parts */
.deck-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10%}
.deck-chip{display:inline-block;padding:5px 14px;border:2px solid #ffcf1d;border-radius:999px;color:var(--ink);font:700 12px/1.2 Inter,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.deck-date{border-color:rgba(16,26,43,.16);color:#4a5468}
.deck-icon{flex:none;width:56px;height:56px;object-fit:cover;border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.deck-meta{display:grid;min-width:0;line-height:1.25}
.deck-meta b{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-meta span{font-size:13.5px;color:#4a5468;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-act{display:flex;align-items:center;gap:14px;margin-top:24px;align-self:end;width:100%;max-width:400px}
/* simple button: solid yellow pill, black outline, one hard shadow, presses down */
.deck-btn{flex:none;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:88px;min-height:44px;padding:0 24px;color:#fff;font:700 15px/1 Inter,sans-serif;text-decoration:none;background:linear-gradient(115deg,#22a2ff,#1e6cff);border-radius:999px;transition:translate .15s var(--ease),filter .2s,scale .15s var(--ease)}
.deck-btn::before{content:"";width:46px;height:21px;background:url(../uploads/poki-logo.png) center/contain no-repeat}
.deck-btn:hover{filter:brightness(1.08);translate:0 -1px}
.deck-btn:active{scale:.96}

/* the deck */
.c-deck{max-width:1000px;margin:0 auto;padding:0 22px 140px}
.c-card{position:sticky;top:calc(24px + var(--i) * 18px);display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:stretch;min-height:380px;margin-bottom:48px;padding:34px 40px;background:#f5f5f7;border-radius:30px;box-shadow:0 2px 6px rgba(0,0,0,.05),0 18px 40px rgba(0,0,0,.1);transform-origin:50% 0;will-change:transform;
 opacity:0;translate:0 90px;rotate:var(--tilt);transition:opacity .7s var(--ease),translate .9s var(--spring),rotate 1s var(--spring),box-shadow .4s var(--ease)}
.c-card:last-child{margin-bottom:0}
.c-card.in{opacity:1;translate:0 0;rotate:0deg}
.c-card.in:hover{box-shadow:0 4px 10px rgba(0,0,0,.06),0 26px 54px rgba(0,0,0,.15)}
.c-copy{display:grid;justify-items:start;align-content:start;grid-template-rows:auto auto auto 1fr}
.c-copy h3{margin-top:28px;font:800 clamp(28px,3.4vw,38px)/1.25 Inter,Helvetica,sans-serif;letter-spacing:-.025em;color:var(--ink)}
.c-copy h3{justify-self:stretch;max-width:400px}
#games .c-desc{max-width:400px;margin-top:18px;color:#3a4458;font-size:17.5px;line-height:1.5}
/* content staggers in after the card lands */
.st{opacity:0;translate:0 22px;transition:opacity .6s var(--ease),translate .7s var(--ease);transition-delay:calc(.25s + var(--s) * .09s)}
.c-card.in .st{opacity:1;translate:0 0}
/* art: pops in with an overshoot, drifts with scroll (--py), straightens on hover */
.c-art{--base:2deg;perspective:900px;align-self:center}
.c-card:nth-child(even) .c-art{--base:-2deg}
.c-art-in{overflow:hidden;aspect-ratio:1/1;background:#fff;border-radius:24px;box-shadow:0 16px 36px rgba(0,0,0,.16);
 opacity:0;scale:.82;rotate:calc(var(--base) * 4);translate:0 calc(40px + var(--py,0px));transition:opacity .5s .3s var(--ease),scale .9s .3s var(--spring),rotate .9s .3s var(--spring),translate .9s .3s var(--spring)}
.c-card.in .c-art-in{opacity:1;scale:1;rotate:var(--base);translate:0 var(--py,0px);transition:opacity .5s .3s var(--ease),scale .9s .3s var(--spring),rotate .9s .3s var(--spring),translate .1s linear}
.c-card.in:hover .c-art-in{rotate:0deg;scale:1.03;transition:rotate .5s var(--spring),scale .5s var(--spring),translate .1s linear}
.c-art-in img{display:block;width:100%;height:100%;object-fit:cover}

@media(max-width:820px){
 .c-card{grid-template-columns:1fr;gap:22px;min-height:0;padding:24px 22px 30px;top:calc(16px + var(--i) * 12px)}
 .c-art{order:-1;max-width:250px;margin:0 auto}
 .c-copy{justify-items:stretch}
 .c-copy h3{margin-top:10px;max-width:none}
 #games .c-desc{max-width:none;margin-top:20px}
 .deck-tags{margin-bottom:14px}
 .deck-act{max-width:none}
}
@media(prefers-reduced-motion:reduce){
 #games *,#games *::before,#games *::after{transition:none!important;animation:none!important}
 .c-card{position:static;transform:none!important;opacity:1;translate:none;rotate:none}
 .st,.c-art-in{opacity:1;translate:none;scale:1}
 .c-art-in{rotate:0deg}
}

/* no white strip between the deck and the footer */
#games+.site-footer{margin-top:0}