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

:root{
  --black: #0b0a08;
  --black-soft: #141210;
  --black-panel: #1c1916;
  --gold: #f3c317;
  --gold-bright: #ffe066;
  --gold-dim: #8a6c0e;
  --ash: #9c9588;
  --bone: #e9e3d3;
  --rule: #2c2722;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--bone);
  font-family:'Oswald', sans-serif;
  overflow-x:hidden;
}

h1,h2,h3,.eyebrow{font-family:'Cinzel', serif;}

/* texture */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(243,195,23,0.05), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(243,195,23,0.04), transparent 45%);
  pointer-events:none;
  z-index:0;
}

/* ============ NAV ============ */
nav{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:18px 6vw;
  background:rgba(11,10,8,0.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.brand{display:flex; align-items:center; gap:10px; justify-self:start;}
.nav-cta{justify-self:end;}
.brand-mark{width:26px; height:26px; flex-shrink:0;}
.brand-name{font-family:'Cinzel',serif; font-weight:800; letter-spacing:2px; font-size:1.1rem;}
.brand-name span{color:var(--gold);}
.nav-links{display:flex; gap:34px; list-style:none;}
.nav-links a{
  color:var(--ash); text-decoration:none; font-size:0.82rem;
  letter-spacing:2px; text-transform:uppercase; font-weight:500;
  transition:color .25s;
  position:relative;
}
.nav-links a:hover{color:var(--gold-bright);}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--gold); transition:width .25s;
}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  border:1px solid var(--gold-dim); color:var(--gold-bright);
  padding:9px 18px; font-size:0.78rem; letter-spacing:2px;
  text-decoration:none; text-transform:uppercase;
  transition:all .25s;
}
.nav-cta:hover{background:var(--gold); color:var(--black); border-color:var(--gold);}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:80px 6vw 60px;
  overflow:hidden;
}
.hero-glow{
  position:absolute; top:50%; left:50%; width:900px; height:900px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(243,195,23,0.08) 0%, transparent 60%);
  z-index:0; pointer-events:none;
}
#heroCircuit{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:0.55;
}
.eyebrow{
  color:var(--gold); letter-spacing:6px; font-size:0.78rem; font-weight:600;
  text-transform:uppercase; margin-bottom:22px; z-index:1;
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before, .eyebrow::after{content:""; width:34px; height:1px; background:var(--gold-dim);}

.hero h1{
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  line-height:1.02;
  letter-spacing:1px;
  z-index:1;
  text-transform:uppercase;
}
.hero h1 .stroke{
  -webkit-text-stroke:1.5px var(--gold);
  color:transparent;
}
.hero h1 .fill{
  color:var(--gold);
  text-shadow:0 0 40px rgba(243,195,23,0.35);
}

.hero-sub{
  margin-top:26px; max-width:560px; color:var(--ash); font-size:1.02rem;
  line-height:1.7; z-index:1; font-weight:300;
}

.hero-games{
  display:flex; align-items:center; gap:18px; margin-top:44px; z-index:1;
  flex-wrap:wrap; justify-content:center;
}
.hero-games span{
  font-family:'Cinzel', serif; font-weight:600; letter-spacing:2px;
  font-size:0.95rem; text-transform:uppercase; color:var(--bone);
  padding-bottom:6px; border-bottom:1px solid var(--gold-dim);
}
.hero-games-sep{
  color:var(--gold); font-family:'Oswald',sans-serif; border-bottom:none !important;
  font-size:0.85rem;
}

.hero-actions{display:flex; gap:18px; margin-top:46px; z-index:1; flex-wrap:wrap; justify-content:center;}
.btn-primary{
  background:var(--gold); color:var(--black); padding:15px 34px;
  text-decoration:none; font-weight:600; letter-spacing:2px; font-size:0.85rem;
  text-transform:uppercase; transition:all .25s; border:1px solid var(--gold);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.btn-primary:hover{background:var(--gold-bright); box-shadow:0 0 30px rgba(243,195,23,0.4);}
.btn-secondary{
  border:1px solid var(--rule); color:var(--bone); padding:15px 34px;
  text-decoration:none; font-weight:500; letter-spacing:2px; font-size:0.85rem;
  text-transform:uppercase; transition:all .25s;
}
.btn-secondary:hover{border-color:var(--gold-dim); color:var(--gold-bright);}

/* ============ SECTION SHARED ============ */
section{position:relative; z-index:1; padding:110px 6vw;}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:56px; flex-wrap:wrap; gap:20px;
  border-bottom:1px solid var(--rule); padding-bottom:24px;
}
.section-head .tag{
  color:var(--gold); letter-spacing:4px; font-size:0.75rem; text-transform:uppercase; margin-bottom:10px; display:block;
}
.section-head h2{font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:1px; text-transform:uppercase;}
.section-head p{color:var(--ash); max-width:380px; font-size:0.92rem; line-height:1.6;}

/* ============ VIDEO SHOWCASE ============ */
.filter-bar{display:flex; gap:10px; margin-bottom:40px; flex-wrap:wrap;}
.filter-btn{
  background:transparent; border:1px solid var(--rule); color:var(--ash);
  padding:10px 20px; font-family:'Oswald',sans-serif; font-size:0.75rem; letter-spacing:2px;
  text-transform:uppercase; cursor:pointer; transition:all .2s;
}
.filter-btn:hover{border-color:var(--gold-dim); color:var(--gold-bright);}
.filter-btn.active{background:var(--gold); color:var(--black); border-color:var(--gold);}

.video-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:26px;
}
.video-card{
  background:var(--black-soft); border:1px solid var(--rule);
  transition:transform .25s, border-color .25s, box-shadow .25s;
  cursor:pointer; text-decoration:none; color:inherit; display:block;
}
.video-card:hover{
  transform:translateY(-6px); border-color:var(--gold-dim);
  box-shadow:0 18px 40px rgba(0,0,0,0.5);
}
.thumb{
  position:relative; aspect-ratio:16/9; width:100%;
  background:#0b0a08;
  display:flex; align-items:flex-end; justify-content:flex-start; overflow:hidden;
}
.thumb-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.video-card:hover .thumb-img{transform:scale(1.04);}
.thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
  pointer-events:none;
}
.play-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(243,195,23,0.15); border:2px solid rgba(243,195,23,0.5);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:var(--gold-bright);
  opacity:0; transition:opacity .25s; z-index:2;
}
.video-card:hover .play-icon{opacity:1;}
.thumb .duration{
  position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,0.8);
  color:var(--bone); font-size:0.72rem; padding:2px 7px; letter-spacing:1px;
}
.thumb .game-badge{
  position:absolute; top:10px; left:10px; font-size:0.65rem; letter-spacing:1.5px;
  color:var(--black); background:var(--gold); padding:4px 9px; text-transform:uppercase;
  font-weight:600;
}
.video-meta{padding:18px 20px;}
.video-meta h4{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:0.98rem; line-height:1.4;
  margin-bottom:10px; color:var(--bone);
}
.video-meta .sub{
  display:flex; justify-content:space-between; color:var(--ash); font-size:0.75rem; letter-spacing:0.5px;
}

.show-more{
  display:block; margin:50px auto 0; background:transparent; border:1px solid var(--gold-dim);
  color:var(--gold); padding:14px 40px; font-family:'Oswald',sans-serif; letter-spacing:2px;
  text-transform:uppercase; font-size:0.8rem; cursor:pointer; transition:all .25s;
}
.show-more:hover{background:var(--gold); color:var(--black);}

/* ============ ABOUT / CTA ============ */
.about{
  max-width:760px;
}
.about-mark{
  width:30px; height:30px; display:block; margin-bottom:28px;
}
.about-copy p{
  color:var(--bone); line-height:1.85; font-size:1.15rem; font-weight:300;
  margin-bottom:24px; max-width:720px;
}
.about-copy p:last-child{margin-bottom:0;}
.about-copy strong{color:var(--gold-bright); font-weight:600;}

.follow-strip{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:60px 6vw; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:30px;
}
.follow-strip h2{font-size:clamp(1.6rem,3.5vw,2.2rem); text-transform:uppercase; letter-spacing:1px; max-width:520px;}
.follow-links{display:flex; gap:16px; flex-wrap:wrap;}

footer{padding:50px 6vw; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .brand-name{font-size:0.95rem;}
footer .fine{color:var(--ash); font-size:0.78rem; letter-spacing:1px;}

/* ============ VIDEO MODAL ============ */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.modal-overlay.open{opacity:1; pointer-events:all;}
.modal-box{
  background:var(--black-soft); border:1px solid var(--rule);
  width:100%; max-width:900px;
  transform:translateY(30px) scale(0.97);
  transition:transform .35s cubic-bezier(.16,.8,.3,1);
}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
.modal-player{position:relative; aspect-ratio:16/9; width:100%; background:#000;}
.modal-player iframe{position:absolute; inset:0; width:100%; height:100%;}
.modal-close{
  position:absolute; top:-42px; right:0;
  background:transparent; border:none; color:var(--ash);
  font-size:1.4rem; cursor:pointer; line-height:1;
  transition:color .2s;
}
.modal-close:hover{color:var(--gold-bright);}
.modal-box{position:relative;}
.modal-info{padding:18px 22px; border-top:1px solid var(--rule);}
.modal-info h3{font-family:'Oswald',sans-serif; font-weight:500; font-size:1.05rem; color:var(--bone); line-height:1.4;}
.modal-meta{display:flex; gap:20px; margin-top:8px; color:var(--ash); font-size:0.78rem;}


.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
}
.reveal.visible{opacity:1; transform:translateY(0);}

.hero-in{opacity:0; transform:translateY(18px);}
.hero-in.play{
  animation:heroIn .9s cubic-bezier(.16,.8,.3,1) forwards;
}
@keyframes heroIn{
  to{opacity:1; transform:translateY(0);}
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.visible, .hero-in, .hero-in.play{
    opacity:1 !important; transform:none !important; animation:none !important; transition:none !important;
  }
}
@media (max-width:860px){
  .nav-links{display:none;}
  .about-copy p{font-size:1.02rem;}
  .hero-games{gap:10px;}
}