:root{
  --accent:#0FAE63;
  --scrollLag:0;
}

html{scroll-behavior:smooth}
body{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#000;
  color:#fff;
  overscroll-behavior: none;
}

.noise::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.18;
  pointer-events:none;
}

.card-glow{
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,0 24px 70px rgba(0,0,0,.55);
}

.glass-input{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:border-color .25s ease,box-shadow .25s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
.glass-input:focus{
  outline:none;
  border-color:rgba(15,174,99,.55);
  box-shadow:0 0 0 1px rgba(15,174,99,.25) inset,0 18px 60px rgba(15,174,99,.10);
}

.btn-filter{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.85);
  border-radius:9999px;
  padding:.6rem .9rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.btn-filter:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.07);
  border-color:rgba(15,174,99,.35);
  box-shadow:0 18px 60px rgba(15,174,99,.08);
}
.btn-filter[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(15,174,99,.20),rgba(15,174,99,.08));
  border-color:rgba(15,174,99,.45);
  box-shadow:0 18px 70px rgba(15,174,99,.10);
}

@keyframes btnShimmer{
  0%{transform:translateX(-160%) skewX(-18deg);opacity:0}
  10%{opacity:1}
  100%{transform:translateX(260%) skewX(-18deg);opacity:0}
}

.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    border: 1px solid rgba(15, 174, 99, .38);
    color: rgba(255, 255, 255, .92);
    background:
        radial-gradient(120% 140% at 20% 20%, rgba(255, 255, 255, .10), transparent 55%),
        linear-gradient(180deg, rgba(15, 174, 99, .18), rgba(15, 174, 99, .08));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .45) inset,
        0 10px 30px rgba(0, 0, 0, .50);
    transition:
        transform .55s cubic-bezier(.16, 1, .3, 1),
        box-shadow .55s cubic-bezier(.16, 1, .3, 1),
        border-color .35s ease,
        background .35s ease;
    overflow: hidden;
    transform: translateZ(0);
}

.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 120% at 30% 0%, rgba(255, 255, 255, .14), transparent 55%);
    opacity: .75;
    pointer-events: none;
}

.btn-primary::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -40%;
    width: 38%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    filter: blur(.3px);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-160%) skewX(-18deg);
}

.btn-primary:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 174, 99, .55);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .10) inset,
        0 22px 70px rgba(15, 174, 99, .20),
        0 18px 55px rgba(0, 0, 0, .55);
    background:
        radial-gradient(120% 140% at 20% 20%, rgba(255, 255, 255, .12), transparent 55%),
        linear-gradient(180deg, rgba(15, 174, 99, .24), rgba(15, 174, 99, .10));
}

.btn-primary:hover::after {
    animation: btnShimmer .95s cubic-bezier(.16, 1, .3, 1);
}

.btn-primary.sm {
    padding: .55rem 1.05rem;
    font-size: .75rem;
    letter-spacing: .08em;
    font-weight: 700;
}

.btn-primary.md {
    padding: .85rem 1.45rem;
    font-size: .85rem;
    letter-spacing: .06em;
    font-weight: 800;
}

.btn-primary.lg {
    padding: 1rem 1.8rem;
    font-size: .9rem; 
    letter-spacing: .06em;
    font-weight: 800;
}

.skeleton{
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.10), rgba(255,255,255,.06));
  background-size:200% 100%;
  animation:sk 1.1s infinite linear;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

.hero-glow{
  background:
    radial-gradient(1200px 650px at 15% 30%, rgba(15,174,99,.35), transparent 60%),
    radial-gradient(900px 550px at 85% 40%, rgba(15,174,99,.18), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.92));
}

.game-card{
  transition:transform .75s cubic-bezier(.16,1,.3,1),box-shadow .75s cubic-bezier(.16,1,.3,1),border-color .4s ease;
  will-change:transform,box-shadow,border-color;
  transform: translateZ(0); 
  backface-visibility: hidden;
}
.game-card:hover{
  transform:translateY(-6px);
  border-color:rgba(15,174,99,.45);
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,0 28px 90px rgba(15,174,99,.10),0 24px 70px rgba(0,0,0,.60);
}

.reveal{
  opacity:0;
  transform:translateY(18px) scale(.99);
  filter:blur(10px);
  transition:opacity 900ms cubic-bezier(.16,1,.3,1),transform 900ms cubic-bezier(.16,1,.3,1),filter 900ms cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform,filter;
}
.reveal.active{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.reveal[data-stagger]{
  transition-delay:var(--d,0ms);
}

.glide{
  transform:translate3d(0, calc(var(--scrollLag) * 0.06px), 0);
}

@keyframes floatDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(18px,-10px,0) scale(1.03)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
.float-drift{animation:floatDrift 10s cubic-bezier(.16,1,.3,1) infinite}
.float-drift.slow{animation-duration:14s}
.float-drift.reverse{animation-direction:reverse}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .float-drift{animation:none}
  .glide{transform:none}
  .btn-primary:hover,.btn-framer:hover,.btn-filter:hover,.game-card:hover{transform:none}
  .btn-primary:hover::after{animation:none}
}

.card-in{
  opacity:0;
  transform:translateY(16px) scale(.985);
  filter:blur(10px);
  transition:
    opacity 900ms cubic-bezier(.16,1,.3,1),
    transform 900ms cubic-bezier(.16,1,.3,1),
    filter 900ms cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform,filter;
}

.card-in.active{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

.card-in{
  transition-delay:var(--d,0ms);
}

.game-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 240px at 50% 115%, rgba(15,174,99,.22), transparent 60%),
    radial-gradient(600px 220px at 20% 10%, rgba(255,255,255,.10), transparent 55%);
  opacity:.0;
  transition:opacity 700ms cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}

.group:hover .game-card::after{
  opacity:.85;
}

@media (prefers-reduced-motion: reduce){
  .card-in{opacity:1;transform:none;filter:none;transition:none}
  .game-card::after{display:none}
}

#scrollWrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden; 
}

.scroll-wrap {
    will-change: transform;
}