/* Footer sparkle artwork uploaded by the creator.
   The PNG is rendered as a real <img> element so it does not depend on JS or a pseudo-element background. */

.world-home .world-footer::before{
  content:none!important;
  display:none!important;
}

.world-home .footer-sparkles-art{
  position:absolute;
  z-index:1;
  left:-8px;
  bottom:-22px;
  width:min(49vw,860px);
  height:auto;
  max-width:none;
  pointer-events:none;
  opacity:.96;
  object-fit:contain;
  object-position:left bottom;
  filter:none;
  clip-path:inset(0 22% 0 0);
}

/* Hand-drawn BabyT sketch used in the footer. */
.world-home .world-footer::after{
  content:"";
  position:absolute;
  z-index:2;
  left:clamp(420px,32vw,520px);
  bottom:10px;
  width:205px;
  height:265px;
  background:url('./assets/media/babyt-character.webp?v=2') center bottom/contain no-repeat;
  opacity:1;
  filter:none;
  pointer-events:none;
}

.world-home .world-footer-grid{position:relative;z-index:3}

/* Community CTA: overlap only the lower edge of the panorama so the first artwork
   remains visible farther down before the star-world artwork fades in. */
.world-home .world-community.shell{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
.world-home .world-community{
  position:relative;
  isolation:isolate;
  z-index:3;
  overflow:hidden;
  min-height:56.25vw;
  margin-top:-90px;
  padding-top:calc(clamp(90px,6vw,122px) + 90px);
  padding-bottom:clamp(150px,11vw,220px);
  background:transparent;
}
.world-home .world-community::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  background-image:none;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,
    transparent 0,
    rgba(0,0,0,.18) 20px,
    rgba(0,0,0,.48) 44px,
    rgba(0,0,0,.80) 68px,
    #000 90px);
  mask-image:linear-gradient(180deg,
    transparent 0,
    rgba(0,0,0,.18) 20px,
    rgba(0,0,0,.48) 44px,
    rgba(0,0,0,.80) 68px,
    #000 90px);
  opacity:0;
  transition:opacity .18s ease-out;
}
/* Only fade the very bottom into the footer. The top is a real artwork-to-artwork crossfade. */
.world-home .world-community::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,
    #070a0f 0px,
    rgba(7,10,15,.55) 30px,
    rgba(7,10,15,0) 68px);
  opacity:0;
  transition:opacity .18s ease-out;
}

/* The community artwork, its mask and the bottom fade are revealed in the same
   frame as the panorama artwork. */
.world-home.artworks-loaded .world-community::before{
  background-image:url('./assets/world/community-world-background.png?v=3');
}
.world-home.artworks-loaded .world-community::before,
.world-home.artworks-loaded .world-community::after{
  opacity:1;
}

/* Community copy sits on the lower globe, matching the reference composition. */
.world-home .world-community > h2,
.world-home .world-community > .community-copy,
.world-home .world-community > .community-links{
  position:relative;
  z-index:1;
  transform:translateY(clamp(265px,18vw,350px));
}
.world-home .world-community > .world-kicker{display:none!important}
.world-home .world-community > h2{
  max-width:780px;
  margin:0 auto;
  color:#8edcff;
  font-family:"Nunito",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
  font-size:clamp(48px,4.15vw,70px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:.98;
  text-shadow:0 3px 14px rgba(20,72,160,.26);
}
.world-home .world-community .community-copy{
  max-width:640px;
  margin:18px auto 15px;
  color:#83d8ff;
  font-family:"Nunito",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
  font-size:clamp(15px,1.02vw,18px);
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1.24;
  text-shadow:0 2px 9px rgba(17,65,151,.34);
}

/* Compact bright-blue social buttons with the same rounded/double-edge feel as
   the reference, but using Brainrot Games' own YouTube/X/TikTok links. */
.world-home .world-community .community-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  width:auto;
  max-width:none;
  margin:0 auto;
  text-align:center;
}
.world-home .world-community .community-links>a{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:150px;
  min-width:150px;
  height:46px;
  min-height:46px;
  padding:0 17px;
  border:2px solid #79c7ff;
  border-radius:17px;
  background:linear-gradient(180deg,#5598ff 0%,#347ff2 48%,#2f6fe2 100%);
  box-shadow:
    0 0 0 1px rgba(72,83,222,.9),
    inset 0 0 0 2px rgba(255,255,255,.18),
    inset 0 2px 0 rgba(255,255,255,.30),
    inset 0 -3px 0 rgba(38,71,187,.34),
    0 3px 9px rgba(24,66,190,.22);
  color:#fff;
  font-family:"Nunito",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.world-home .world-community .community-links>a:hover{
  background:linear-gradient(180deg,#63a3ff 0%,#438af8 48%,#3779ea 100%);
  border-color:#a8ddff;
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:
    0 0 0 1px rgba(79,90,231,.95),
    inset 0 0 0 2px rgba(255,255,255,.22),
    inset 0 2px 0 rgba(255,255,255,.38),
    inset 0 -3px 0 rgba(38,71,187,.30),
    0 5px 13px rgba(24,66,190,.28);
}
.world-home .world-community .community-links>a>span:nth-child(2){
  display:flex;
  align-items:center;
  min-width:0;
}
.world-home .world-community .community-links strong{
  display:block;
  margin:0;
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1;
  letter-spacing:.015em;
  text-transform:uppercase;
  white-space:nowrap;
}
/* The old long middle label is replaced visually with the short social name. */
.world-home .world-community .community-links>a:nth-child(2) strong{
  font-size:0;
}
.world-home .world-community .community-links>a:nth-child(2) strong::after{
  content:"X";
  font-size:13px;
  font-weight:900;
}
.world-home .world-community .community-links small,
.world-home .world-community .community-links>a>span:last-child{
  display:none!important;
}
.world-home .world-community .social-symbol{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:0;
  color:#fff;
  font-size:17px;
  line-height:1;
  text-align:center;
}

@media(max-width:1100px){
  .world-home .footer-sparkles-art{
    left:-12px;
    bottom:-18px;
    width:min(62vw,650px);
    opacity:.9;
    clip-path:inset(0 22% 0 0);
  }
  .world-home .world-footer::after{
    left:27%;
    width:180px;
    height:240px;
    bottom:18px;
  }
  .world-home .world-community{min-height:56.25vw}
  .world-home .world-community::before{
    background-position:center center;
    background-size:cover;
  }
  .world-home .world-community > h2,
  .world-home .world-community > .community-copy,
  .world-home .world-community > .community-links{
    transform:translateY(clamp(205px,17vw,275px));
  }
}

@media(max-width:760px){
  .world-home .footer-sparkles-art{
    left:-80px;
    width:430px;
    bottom:-20px;
    opacity:.5;
    clip-path:inset(0 22% 0 0);
  }
  .world-home .world-footer::after{display:none}
  .world-home .world-community{
    min-height:760px;
    margin-top:-64px;
    padding-top:134px;
    padding-bottom:105px;
  }
  .world-home .world-community::before{
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 22px,rgba(0,0,0,.76) 44px,#000 64px);
    mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 22px,rgba(0,0,0,.76) 44px,#000 64px);
  }
  .world-home .world-community::after{
    background:linear-gradient(0deg,#070a0f 0,rgba(7,10,15,.48) 26px,rgba(7,10,15,0) 52px);
  }
  .world-home .world-community > h2,
  .world-home .world-community > .community-copy,
  .world-home .world-community > .community-links{
    transform:translateY(255px);
  }
  .world-home .world-community > h2{
    width:calc(100% - 36px);
    font-size:clamp(38px,11vw,52px);
  }
  .world-home .world-community .community-copy{
    width:calc(100% - 48px);
    margin-top:15px;
    margin-bottom:14px;
    font-size:14px;
  }
  .world-home .world-community .community-links{
    gap:8px;
    width:calc(100% - 30px);
  }
  .world-home .world-community .community-links>a{
    width:auto;
    min-width:0;
    flex:1 1 0;
    max-width:132px;
    height:42px;
    min-height:42px;
    padding:0 9px;
    border-radius:15px;
    gap:5px;
  }
  .world-home .world-community .community-links strong{font-size:10px}
  .world-home .world-community .community-links>a:nth-child(2) strong::after{font-size:10px}
  .world-home .world-community .social-symbol{width:15px;height:15px;font-size:14px}
}