@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Inter:wght@300;400;600;700&display=swap');

:root{
  --bg:#050505;
  --panel:#0b0b0b;
  --cream:#f4efe1;
  --gold:#d9aa45;
  --muted:#a99d87;
  --line:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 80% 0%,rgba(217,170,69,.08),transparent 26rem),
    var(--bg);
  color:var(--cream);
  font-family:Inter,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.nav{
  position:fixed;
  z-index:50;
  inset:0 0 auto 0;
  min-height:76px;
  padding:0 5.8vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  background:rgba(3,3,3,.72);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.brand,.nav a,h1,h2,h3,.btn,.links a,.textlink{
  font-family:Oswald,Impact,sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.brand{font-size:1.55rem;font-weight:700;color:#D4AF37}
.navlinks{display:flex;gap:2rem}
.navlinks a{font-size:.76rem;letter-spacing:.2em}
.nav a:hover{color:var(--gold)}

.hero{
  position:relative;
  min-height:100vh;
  background:
    linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.20) 42%,rgba(0,0,0,.04) 100%),
    url("assets/home-chimp-banner.jpg") center/cover no-repeat;
  overflow:hidden;
}
.heroShade{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 75% 16%,rgba(232,67,25,.18),transparent 25rem);
}
.noise{
  position:absolute;
  inset:-30%;
  opacity:.12;
  background-image:radial-gradient(circle,rgba(255,255,255,.45) 1px,transparent 1px);
  background-size:4px 4px;
  animation:grain 1.3s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-2%)}
  75%{transform:translate(1%,3%)}
  100%{transform:translate(0,0)}
}
.heroText{
  position:absolute;
  z-index:3;
  left:5.8vw;
  top:53%;
  transform:translateY(-45%);
  max-width:790px;
}
.kicker{
  margin:0 0 1.1rem;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.78rem;
  font-weight:700;
}
h1{
  font-size:clamp(4.3rem,12vw,11rem);
  line-height:.86;
  margin:0;
  text-shadow:0 0 30px rgba(0,0,0,.9), 0 0 8px rgba(212,175,55,.35); color:#D4AF37;
}
.tag{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.24em;
  line-height:1.72;
  margin:1.6rem 0 2rem;
  font-weight:700;
}
.buttons,.links{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.btn,.links a{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.4rem;
  border:1px solid rgba(217,170,69,.72);
  color:var(--gold);
  font-size:.8rem;
  transition:.22s ease;
}
.btn.primary,.btn:hover,.links a:hover{
  background:var(--gold);
  color:#050505;
}

section{
  padding:6rem 5.8vw;
  border-top:1px solid var(--line);
}
.statement{
  padding:3.6rem 5.8vw;
  background:#080808;
}
.statement p{
  max-width:1100px;
  margin:0;
  font-size:clamp(1.2rem,2vw,2.1rem);
  line-height:1.55;
  color:#d9d0bd;
}
.sectionHead{
  max-width:960px;
  margin-bottom:2.2rem;
}
h2{
  font-size:clamp(2.8rem,7vw,6.7rem);
  line-height:.95;
  margin:0 0 1rem;
}
.sectionHead p,.aboutText p,.release p{
  color:var(--muted);
  line-height:1.75;
}
.kingdom{
  background:
    radial-gradient(circle at 50% 0%,rgba(217,170,69,.1),transparent 32rem),
    #070707;
}
.kingdom img{
  width:100%;
  border:1px solid rgba(217,170,69,.25);
  box-shadow:0 30px 90px rgba(0,0,0,.72);
}

.releaseGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
}
.release{
  position:relative;
  background:#0c0c0c;
  border:1px solid var(--line);
  padding:1rem;
  overflow:hidden;
  transition:.25s ease;
}
.release:hover{
  transform:translateY(-6px);
  border-color:rgba(217,170,69,.65);
}
.release img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  filter:saturate(.92) contrast(1.03);
}
.release h3{
  font-size:1.45rem;
  margin:1rem 0 .35rem;
}
.release p{
  margin:.25rem 0 0;
}
.release.main{
  grid-column:span 3;
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:2rem;
  align-items:center;
}
.release.main img{
  aspect-ratio:16/9;
}
.release.main h3{
  font-size:clamp(2.2rem,5vw,5rem);
  line-height:.95;
}
.label{
  color:var(--gold)!important;
  text-transform:uppercase;
  letter-spacing:.25em;
  font-size:.75rem;
  font-weight:700;
}
.textlink{
  display:inline-block;
  margin-top:1rem;
  color:var(--gold);
  border-bottom:1px solid rgba(217,170,69,.6);
  padding-bottom:.3rem;
}

.videoGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
.videoCard{
  position:relative;
  min-height:260px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#111;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1rem;
  transition:.25s ease;
}
.videoCard img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.68;
  transition:.35s ease;
}
.videoCard::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.15));
}
.videoCard:hover{
  transform:translateY(-6px);
  border-color:rgba(217,170,69,.7);
}
.videoCard:hover img{
  transform:scale(1.05);
  opacity:.9;
}
.play{
  position:relative;
  z-index:2;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.75);
  border-radius:50%;
  margin-bottom:auto;
}
.videoCard strong,.videoCard small{
  position:relative;
  z-index:2;
}
.videoCard strong{
  font-family:Oswald,sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1.35rem;
}
.videoCard small{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.17em;
  margin-top:.35rem;
}

.about{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:3rem;
  align-items:start;
  background:#080808;
}
.aboutText p{
  font-size:1.08rem;
  max-width:760px;
}

.follow{
  text-align:center;
  background:
    radial-gradient(circle at center,rgba(217,170,69,.12),transparent 26rem),
    #050505;
}
.mark{
  width:118px;
  margin:0 auto 1.5rem;
  opacity:.92;
}
.follow h2{margin-bottom:2rem}
.links{justify-content:center}

footer{
  padding:2.5rem 5.8vw;
  text-align:center;
  color:var(--muted);
  border-top:1px solid var(--line);
}
footer span{
  display:block;
  font-family:Oswald,sans-serif;
  color:var(--cream);
  letter-spacing:.25em;
  margin-bottom:.45rem;
}
footer p{margin:0;font-size:.85rem}

.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s ease,transform .8s ease;
}
.reveal.visible{
  opacity:1;
  transform:none;
}

@media(max-width:1000px){
  .releaseGrid,.videoGrid{grid-template-columns:repeat(2,1fr)}
  .release.main{grid-column:span 2}
}
@media(max-width:760px){
  .nav{position:absolute;align-items:flex-start;flex-direction:column;padding:1rem 5vw}
  .navlinks{gap:1rem;flex-wrap:wrap}
  .navlinks a{font-size:.7rem}
  .heroText{left:5vw;right:5vw;top:58%}
  .tag{letter-spacing:.12em}
  section{padding:4rem 5vw}
  .releaseGrid,.videoGrid,.about,.release.main{grid-template-columns:1fr}
  .release.main{grid-column:auto}
}


.listen{
  padding:3rem 5.8vw;
  background:#060606;
}
.platforms{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.platforms a{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.4rem;
  border:1px solid rgba(217,170,69,.72);
  color:var(--gold);
  font-family:Oswald,Impact,sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.82rem;
  transition:.22s ease;
}
.platforms a:hover{
  background:var(--gold);
  color:#050505;
}

.embedGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.4rem;
}
.embedCard{
  background:#0b0b0b;
  border:1px solid var(--line);
  padding:1rem;
}
.embedWrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.embedWrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.embedCard h3{
  margin:1rem 0 .4rem;
  font-size:1.5rem;
}

@media(max-width:850px){
  .embedGrid{grid-template-columns:1fr}
}


.heroPlatforms{
  max-width:760px;
}
.btn.ghost{
  background:transparent;
  color:var(--gold);
}
.releaseLinks{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1rem;
}
.releaseLinks .textlink{
  margin-top:0;
}


/* V7 hero adjustments */
.hero{
  background-position:center center;
}
.heroText{
  text-shadow:0 6px 26px rgba(0,0,0,.35);
}
.hero .kicker,
.hero .tag{
  color:#b88722;
}
.hero h1{
  color:#17120c;
  text-shadow:
    0 1px 0 rgba(255,255,255,.25),
    0 8px 22px rgba(0,0,0,.22);
}
.hero .btn{
  background:rgba(5,5,5,.70);
  color:var(--gold);
  border-color:rgba(80,55,20,.75);
  backdrop-filter:blur(6px);
}
.hero .btn.primary{
  background:#17120c;
  color:var(--gold);
}
.hero .btn:hover{
  background:var(--gold);
  color:#050505;
}
.kingdom img{
  max-height:78vh;
  object-fit:cover;
  object-position:center;
}


/* V8 overrides */
.hero{
  background-position:center center;
}
.hero h1{
  color:#15110d;
  text-shadow:0 1px 0 rgba(255,255,255,.22),0 8px 28px rgba(0,0,0,.18);
}
.hero .kicker,.hero .tag{
  color:#a17625;
}
.hero .btn{
  background:rgba(10,8,6,.78);
  color:var(--gold);
  border-color:rgba(90,60,20,.70);
}
.hero .btn.primary{
  background:#111;
  color:var(--gold);
}
.hero .btn:hover{
  background:var(--gold);
  color:#050505;
}
.kingdom img{
  width:100%;
  max-height:none;
  object-fit:cover;
  object-position:center;
}

.hero-title,.home-title,h1{ text-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 1px rgba(212,175,55,.4); }


/* V11 — premium motion + stronger Moda Moore typography */
.hero{ isolation:isolate; }
.heroText{ z-index:6; }
.hero h1{
  color:#d4af37 !important;
  -webkit-text-stroke:1.35px rgba(10,7,3,.88);
  text-shadow:
    0 2px 0 rgba(0,0,0,.62),
    0 8px 22px rgba(0,0,0,.58),
    0 0 18px rgba(212,175,55,.22),
    0 0 2px rgba(255,240,190,.55) !important;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.45));
}
.hero .kicker,.hero .tag{
  color:#d6a638 !important;
  text-shadow:0 2px 10px rgba(0,0,0,.65), 0 0 1px rgba(255,230,160,.5);
}
.brand{
  color:#d4af37 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.75),0 0 12px rgba(212,175,55,.22);
}

.smokeLayer{
  position:absolute;
  z-index:4;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:screen;
  opacity:.28;
}
.smokeLayer span{
  position:absolute;
  width:18rem;
  height:18rem;
  border-radius:50%;
  background:
    radial-gradient(circle at 45% 45%,rgba(255,255,255,.22),transparent 22%),
    radial-gradient(circle at 60% 50%,rgba(210,190,255,.14),transparent 34%),
    radial-gradient(circle at 42% 60%,rgba(255,255,255,.10),transparent 42%);
  filter:blur(18px);
  transform-origin:center;
  animation:smokeDrift 16s ease-in-out infinite;
}
.smokeLayer span:nth-child(1){right:22%;top:31%;animation-delay:-2s;}
.smokeLayer span:nth-child(2){right:29%;top:21%;width:13rem;height:13rem;animation-delay:-7s;opacity:.65;}
.smokeLayer span:nth-child(3){right:17%;top:43%;width:10rem;height:10rem;animation-delay:-11s;opacity:.5;}
@keyframes smokeDrift{
  0%{transform:translate3d(0,24px,0) rotate(0deg) scale(.72);opacity:0;}
  18%{opacity:.45;}
  55%{opacity:.34;}
  100%{transform:translate3d(-44px,-102px,0) rotate(24deg) scale(1.18);opacity:0;}
}

.inkLayer{
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  opacity:.32;
}
.inkLayer span{
  position:absolute;
  width:19rem;
  height:19rem;
  border-radius:46% 54% 55% 45%;
  background:radial-gradient(circle at 45% 45%,rgba(95,55,130,.34),rgba(217,170,69,.08) 42%,transparent 68%);
  filter:blur(14px);
  transform:scale(.86) rotate(0deg);
  animation:inkBloom 19s ease-in-out infinite;
}
.inkLayer span:nth-child(1){left:23%;top:25%;animation-delay:-4s;}
.inkLayer span:nth-child(2){left:35%;bottom:13%;width:14rem;height:14rem;animation-delay:-9s;}
.inkLayer span:nth-child(3){right:26%;top:12%;width:16rem;height:16rem;animation-delay:-14s;}
@keyframes inkBloom{
  0%,100%{transform:scale(.82) rotate(-5deg);opacity:.18;}
  50%{transform:scale(1.08) rotate(8deg);opacity:.42;}
}

.release,.embedCard,.platforms a,.btn,.links a{
  will-change:transform,filter,box-shadow;
}
.release:hover,.embedCard:hover{
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 22px rgba(217,170,69,.16);
}
.release:hover img{
  transform:scale(1.025);
  filter:saturate(1.03) contrast(1.08) brightness(1.03);
}
.release img{transition:transform .5s ease,filter .5s ease;}
.btn:hover,.platforms a:hover,.links a:hover{
  box-shadow:0 0 24px rgba(217,170,69,.24), inset 0 0 18px rgba(255,255,255,.12);
}
.reveal{
  transition:opacity .9s ease,transform .9s ease,filter .9s ease;
  filter:blur(3px);
}
.reveal.visible{filter:blur(0);}

@media (prefers-reduced-motion: reduce){
  .noise,.smokeLayer span,.inkLayer span{animation:none!important;}
  .smokeLayer,.inkLayer{display:none;}
  html{scroll-behavior:auto;}
}