/* Import base gallery styles */
@import url('gallery.css');

/* Use real local event photos as category thumbnails (no stock images) */
.indoor{background-image:url('1/DSC06003.JPG');background-position:center;background-size:cover}
.iapl{background-image:url('_IAPL%20-%20INTRA%20ASSOCIATION%20PREMIER%20LEAGUE_/IMG_1769.JPG');background-position:center;background-size:cover}
.football{background-image:url('ARISE%20FOOTBALL%20CHAMPIONSHIP%20S1/IMG_1757.JPG');background-position:center;background-size:cover}

/* Three category cards */
.categories{grid-template-columns:repeat(3,1fr)}
.categories .category{opacity:0;transform:translateY(34px) scale(.97);animation:gallery-card-in .8s cubic-bezier(.2,.8,.2,1) forwards;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,filter .45s ease}
.categories .category:nth-child(1){animation-delay:.18s}.categories .category:nth-child(2){animation-delay:.32s}.categories .category:nth-child(3){animation-delay:.46s}
.categories .category:before{content:"";position:absolute;inset:-40%;z-index:-1;background:linear-gradient(115deg,transparent 39%,rgba(255,255,255,.34) 50%,transparent 61%);transform:translateX(-72%) rotate(8deg);transition:transform .7s ease;pointer-events:none}
.categories .category:after{transition:background .45s ease}
.categories .category:hover{transform:translateY(-12px) scale(1.015);box-shadow:0 24px 40px rgba(0,0,0,.22);filter:saturate(1.14)}
.categories .category:hover:before{transform:translateX(72%) rotate(8deg)}
.categories .category:hover:after{background:linear-gradient(180deg,rgba(240,68,46,.08),rgba(0,0,0,.9))}
header{animation:gallery-fade-in .65s ease both}main>.tag,main>h1,main>.lead{animation:gallery-rise .75s cubic-bezier(.2,.8,.2,1) both}main>h1{animation-delay:.1s}main>.lead{animation-delay:.22s}
@keyframes gallery-card-in{to{opacity:1;transform:translateY(0) scale(1)}}@keyframes gallery-fade-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}@keyframes gallery-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){header,main>.tag,main>h1,main>.lead,.categories .category{animation:none;opacity:1;transform:none}.categories .category,.categories .category:hover{transition:none;transform:none}.categories .category:before{display:none}}
@media(max-width:720px){.categories{grid-template-columns:1fr}}