/* =====================================================
   GAME LIBRARY HERO
===================================================== */

.game-library{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding:92px 24px 96px;
  color:#fff8e8;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,224,132,.42), transparent 30%),
    radial-gradient(circle at 18% 22%, rgba(42,178,91,.26), transparent 34%),
    radial-gradient(circle at 84% 20%, rgba(255,216,122,.18), transparent 30%),
    radial-gradient(circle at 50% 78%, rgba(28,111,62,.34), transparent 44%),
    linear-gradient(135deg, #020d07 0%, #062315 46%, #020d07 100%);
}


.game-library::after{
  display:none;
}

.game-library > *{
  position:relative;
  z-index:1;
}

/* =====================================================
   HERO CONTENT
===================================================== */

.game-library-hero{
  --heroGlowX:50%;
  --heroGlowY:32%;

  position:relative;
  width:min(1100px, 100% - 28px);
  margin:0 auto 66px;
  text-align:center;
  padding:34px 20px 22px;
  isolation:isolate;
}

.game-library-hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(760px, 92%);
  height:300px;
  transform:translateX(-50%);
  z-index:-2;
  border-radius:999px;
  background:
    radial-gradient(circle at var(--heroGlowX) var(--heroGlowY), rgba(255,216,122,.34), transparent 34%),
    radial-gradient(circle, rgba(255,216,122,.2), rgba(49,210,111,.08), transparent 70%);
  filter:blur(24px);
  animation:heroHaloBreathe 8s ease-in-out infinite;
}

.game-library-hero::after{
  content:"✦";
  position:absolute;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  color:rgba(255,216,122,.58);
  font-size:1.55rem;
  text-shadow:0 0 30px rgba(255,216,122,.62);
  animation:heroStarPulse 2.8s ease-in-out infinite;
}

.game-hero-stage{
  position:absolute;
  left:50%;
  top:52%;
  width:min(880px, 90%);
  height:260px;
  transform:translate(-50%, -50%);
  z-index:-3;
  border-radius:999px;
  background:
    radial-gradient(circle, rgba(255,216,122,.13), rgba(49,210,111,.05), transparent 72%);
  filter:blur(10px);
  animation:heroStagePulse 7s ease-in-out infinite;
}

.game-library-kicker{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:0 0 22px;
  padding:12px 26px;
  border-radius:999px;
  background:
    linear-gradient(135deg, rgba(255,248,232,.11), rgba(255,216,122,.08));
  border:1px solid rgba(255,216,122,.58);
  color:#ffe39a;
  font-family:Inter, Arial, sans-serif;
  font-size:.76rem;
  font-weight:950;
  letter-spacing:.23em;
  text-transform:uppercase;
  box-shadow:
    0 0 34px rgba(255,216,122,.16),
    inset 0 1px 0 rgba(255,255,255,.14);
  opacity:0;
  transform:translateY(-14px);
}

.game-library-kicker::before,
.game-library-kicker::after{
  content:"✦";
  color:#ffd35e;
}

.game-library-hero h1{
  position:relative;
  margin:0;
  color:#fff7df;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size:clamp(4.6rem, 9.4vw, 9.2rem);
  font-weight:700;
  line-height:.78;
  letter-spacing:-.05em;
  text-transform:none;
  text-shadow:
    0 6px 0 rgba(0,0,0,.35),
    0 22px 60px rgba(255,216,122,.26),
    0 0 38px rgba(255,216,122,.13);
  opacity:0;
  transform:translateY(22px);
}

.game-library-hero h1::before{
  content:attr(data-title);
  position:absolute;
  inset:0;
  z-index:-1;
  color:rgba(255,216,122,.18);
  filter:blur(30px);
  animation:titleHaloBreathe 6s ease-in-out infinite;
}

.game-library-hero h1::after{
  content:"";
  display:block;
  width:min(760px, 92%);
  height:4px;
  margin:26px auto 0;
  border-radius:999px;
  transform:scaleX(0);
  transform-origin:center;
  background:
    linear-gradient(90deg, transparent, rgba(55,214,109,.9), rgba(255,216,122,.95), rgba(55,214,109,.9), transparent);
  box-shadow:
    0 0 24px rgba(55,214,109,.24),
    0 0 24px rgba(255,216,122,.2);
}

.game-library-hero-copy{
  max-width:780px;
  margin:24px auto 0;
  color:rgba(255,248,232,.94);
  font-family:Inter, Arial, sans-serif;
  font-size:clamp(1rem, 1.45vw, 1.22rem);
  font-weight:750;
  line-height:1.75;
  text-wrap:balance;
  text-shadow:
    0 2px 12px rgba(0,0,0,.42),
    0 0 22px rgba(255,216,122,.1);
  opacity:0;
  transform:translateY(14px);
}

.game-library-hero-copy strong{
  color:#ffe39a;
  font-weight:950;
}

.game-library-hero-copy::after{
  content:"";
  display:block;
  width:min(620px, 78%);
  height:2px;
  margin:26px auto 0;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(85,255,147,.65),
      rgba(255,216,122,.9),
      rgba(85,255,147,.65),
      transparent
    );
  box-shadow:
    0 0 22px rgba(85,255,147,.18),
    0 0 20px rgba(255,216,122,.16);
}

.game-library-meta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin:30px auto 0;
}

.game-library-meta span{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:11px 18px;
  border-radius:999px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,216,122,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,248,232,.11), rgba(18,98,50,.28));
  border:1px solid rgba(255,216,122,.38);
  color:#ffe39a;
  font-family:Inter, Arial, sans-serif;
  font-size:.74rem;
  font-weight:950;
  letter-spacing:.085em;
  text-transform:uppercase;
  box-shadow:
    0 0 26px rgba(255,216,122,.1),
    0 12px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0;
  transform:translateY(12px) scale(.96);
}

.game-library-meta span::before{
  content:"";
  width:8px;
  height:8px;
  margin-right:9px;
  border-radius:999px;
  background:#55ff93;
  box-shadow:
    0 0 12px rgba(85,255,147,.75),
    0 0 24px rgba(85,255,147,.28);
}

.game-library-meta span::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-120%);
  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );
  animation:metaPillSweep 5.8s ease-in-out infinite;
}

/* =====================================================
   JS EFFECTS
===================================================== */

.game-hero-rays{
  position:absolute;
  inset:-90px 0 auto;
  height:360px;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}

.game-hero-rays span{
  position:absolute;
  top:-90px;
  width:160px;
  height:470px;
  transform-origin:top center;
  background:linear-gradient(to bottom, rgba(255,216,122,.13), transparent 76%);
  filter:blur(12px);
  opacity:.34;
  animation:heroRaySweep 8s ease-in-out infinite;
}

.game-hero-rays span:nth-child(1){
  left:12%;
  transform:rotate(26deg);
}

.game-hero-rays span:nth-child(2){
  left:36%;
  transform:rotate(10deg);
  animation-delay:1.2s;
}

.game-hero-rays span:nth-child(3){
  right:36%;
  transform:rotate(-10deg);
  animation-delay:2.1s;
}

.game-hero-rays span:nth-child(4){
  right:12%;
  transform:rotate(-26deg);
  animation-delay:3s;
}

.game-hero-particles{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

.game-hero-particles span{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  border-radius:999px;
  background:#ffe39a;
  box-shadow:
    0 0 12px rgba(255,216,122,.8),
    0 0 22px rgba(85,255,147,.22);
  opacity:0;
  animation:heroDust var(--speed) ease-in-out infinite;
  animation-delay:var(--delay);
}

/* =====================================================
   LOADED ENTRANCE
===================================================== */

.hero-loaded .game-library-kicker{
  animation:heroKickerIn .7s ease .25s forwards;
}

.hero-loaded h1{
  animation:heroTitleIn .8s ease .55s forwards, heroTitleFloat 16s ease-in-out 1.4s infinite;
}

.hero-loaded h1::after{
  animation:heroLineGrow .8s ease 1.05s forwards;
}

.hero-loaded .game-library-hero-copy{
  animation:heroCopyIn .7s ease .95s forwards;
}

.hero-loaded .game-library-meta span{
  animation:heroBadgeIn .55s ease forwards;
}

.hero-loaded .game-library-meta span:nth-child(1){
  animation-delay:1.25s;
}

.hero-loaded .game-library-meta span:nth-child(2){
  animation-delay:1.38s;
}

.hero-loaded .game-library-meta span:nth-child(3){
  animation-delay:1.51s;
}





/* =====================================================
   MOBILE
===================================================== */

@media (max-width:640px){

  .game-library{
    overflow:visible;
    padding:58px 14px 74px;
    background:
      radial-gradient(circle at 50% -6%, rgba(255,224,132,.22), transparent 24%),
      radial-gradient(circle at 12% 16%, rgba(42,178,91,.12), transparent 30%),
      linear-gradient(135deg, #020d07 0%, #062315 52%, #020d07 100%);
  }

  .game-library::before,
  .game-library::after,
  .game-library-hero::before,
  .game-library-hero::after,
  .game-library-hero h1::before,
  .game-hero-stage,
  .game-hero-rays,
  .game-hero-particles{
    content:none !important;
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .game-library-hero{
    width:100%;
    margin-bottom:34px;
    padding:22px 0 10px;
  }

  .game-library-kicker{
    gap:9px;
    margin-bottom:18px;
    padding:8px 13px;
    font-size:.58rem;
    letter-spacing:.12em;
    box-shadow:none;
  }

  .game-library-hero h1{
    font-size:clamp(3.05rem, 16vw, 4.7rem);
    line-height:.88;
    letter-spacing:-.045em;
    text-shadow:
      0 4px 0 rgba(0,0,0,.28),
      0 10px 26px rgba(255,216,122,.16);
  }

  .game-library-hero h1::after{
    width:86%;
    height:3px;
    margin-top:16px;
  }

  .game-library-hero-copy{
    max-width:94%;
    margin-top:18px;
    padding:0 4px;
    font-size:.95rem;
    line-height:1.58;
    font-weight:700;
    text-shadow:0 2px 10px rgba(0,0,0,.38);
  }

  .game-library-hero-copy::after{
    width:78%;
    margin-top:18px;
  }

  .game-library-meta{
    gap:8px;
    margin-top:20px;
  }

  .game-library-meta span{
    min-height:34px;
    padding:7px 10px;
    font-size:.58rem;
    letter-spacing:.055em;
    box-shadow:none;
  }

  .game-library-meta span::before{
    width:6px;
    height:6px;
    margin-right:7px;
  }

  .game-library-meta span::after{
    display:none;
  }

}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes heroStageSweep{
  0%, 100%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }
}

@keyframes heroHaloBreathe{
  0%, 100%{
    opacity:.82;
    transform:translateX(-50%) scale(.98);
  }

  50%{
    opacity:1;
    transform:translateX(-50%) scale(1.04);
  }
}

@keyframes heroStagePulse{
  0%, 100%{
    opacity:.7;
    transform:translate(-50%, -50%) scale(.98);
  }

  50%{
    opacity:1;
    transform:translate(-50%, -50%) scale(1.04);
  }
}

@keyframes heroStarPulse{
  0%, 100%{
    opacity:.35;
    transform:translateX(-50%) scale(.9);
  }

  50%{
    opacity:1;
    transform:translateX(-50%) scale(1.2);
  }
}

@keyframes titleHaloBreathe{
  0%, 100%{
    opacity:.5;
  }

  50%{
    opacity:1;
  }
}

@keyframes heroKickerIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes heroTitleIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes heroTitleFloat{
  0%, 100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-4px);
  }
}

@keyframes heroCopyIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes heroLineGrow{
  to{
    transform:scaleX(1);
  }
}

@keyframes heroBadgeIn{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes heroRaySweep{
  0%, 100%{
    opacity:.18;
    transform:translateX(-18px) rotate(14deg);
  }

  50%{
    opacity:.52;
    transform:translateX(20px) rotate(20deg);
  }
}

@keyframes heroDust{
  0%, 100%{
    opacity:0;
    transform:translateY(10px) scale(.4);
  }

  40%, 60%{
    opacity:.9;
    transform:translateY(-8px) scale(1);
  }
}

@keyframes metaPillSweep{
  0%, 56%{
    transform:translateX(-120%);
  }

  82%, 100%{
    transform:translateX(120%);
  }
}