* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
  --gold: #c9973a;
  --gold-bright: #f5c842;
  --parchment: #f0e6cc;
  --ink: #120b05;
  --rum: #5c2d0a;
  --blood: #8b1a1a;
  --accent: #7289da;
}

body {
  background: radial-gradient(circle at top left, rgba(245,200,66,0.08), transparent 14%),
              radial-gradient(circle at 18% 12%, rgba(245,200,66,0.06), transparent 10%),
              #0b0702;
  color: var(--parchment);
  font-family: 'Crimson Text', Georgia, serif;
  overflow-x: hidden;
}

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 3rem;
  transition: background 0.4s;
}
nav.scrolled {
  background: rgba(10,5,2,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201,151,58,0.15);
}
.nav-logo {
  font-family: 'Cinzel Decorative', serif; font-size: 1.1rem;
  color: var(--gold-bright); text-decoration: none;
  text-shadow: 0 0 20px rgba(245,200,66,0.5);
  opacity: 0; animation: fadeDown 0.8s 0.3s ease forwards;
}
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links li { opacity: 0; animation: fadeDown 0.6s ease forwards; }
.nav-links li:nth-child(1){animation-delay:0.4s}
.nav-links li:nth-child(2){animation-delay:0.5s}
.nav-links li:nth-child(3){animation-delay:0.6s}
.nav-links li:nth-child(4){animation-delay:0.7s}
.nav-links li:nth-child(5){animation-delay:0.8s}
.nav-links a {
  color: var(--parchment); text-decoration: none;
  font-family: 'Pirata One', cursive; font-size: 0.9rem;
  letter-spacing: 0.12em; opacity: 0.75; transition: all 0.25s;
  position: relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:1px; background:var(--gold-bright);
  transform:scaleX(0); transition:transform 0.25s;
}
.nav-links a:hover { opacity:1; color:var(--gold-bright); }
.nav-links a:hover::after { transform:scaleX(1); }
@media(max-width:650px){ nav{padding:1rem 1.5rem;} .nav-links{display:none;} }

@keyframes fadeDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(22px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes scaleIn  { from{opacity:0;transform:scale(0.82)} to{opacity:1;transform:scale(1)} }
@keyframes float    { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-16px) rotate(3deg)} }
@keyframes bob      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(9px)} }
@keyframes sparkle  { 0%{opacity:0;transform:translateY(0) scale(0)} 20%{opacity:1;transform:translateY(-30px) scale(1)} 100%{opacity:0;transform:translateY(-90px) scale(0.2)} }
@keyframes pulse-glow { 0%,100%{opacity:0.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} }
@keyframes title-glow {
  from{text-shadow:2px 2px 0 var(--rum),0 0 20px rgba(245,200,66,0.1)}
  to  {text-shadow:2px 2px 0 var(--rum),0 0 55px rgba(245,200,66,0.38)}
}
@keyframes shimmer-slide { from{left:-100%} to{left:160%} }

/* HERO */
#hero {
  position: relative; width: 100%; height: 100vh;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
#bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,rgba(10,5,2,0.5) 0%,rgba(10,5,2,0.3) 35%,rgba(10,5,2,0.68) 72%,rgba(10,5,2,1) 100%);
}
.hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; }
.skull {
  font-size: 4rem; display: block; margin-bottom: 1.2rem;
  filter: drop-shadow(0 0 30px var(--gold));
  animation: float 4s ease-in-out infinite, scaleIn 0.9s 0.1s ease both;
}
.hero-name {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(4.5rem, 13vw, 10rem); font-weight: 900;
  color: var(--gold-bright); line-height: 1;
  text-shadow: 0 0 60px rgba(245,200,66,0.6),0 0 120px rgba(245,200,66,0.2),4px 4px 0 var(--rum),8px 8px 0 rgba(0,0,0,0.5);
  margin-bottom: 0.6rem; opacity:0; animation: fadeUp 1s 0.5s cubic-bezier(0.2,0,0.2,1) forwards;
}
.hero-sub {
  font-family: 'Pirata One', cursive; font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--parchment); letter-spacing: 0.3em; text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0,0,0,1);
  margin-bottom: 1.5rem; opacity:0; animation: fadeUp 0.9s 0.9s ease forwards;
}
.hero-quote {
  font-size: clamp(1rem, 2vw, 1.2rem); font-style: italic;
  color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,1);
  max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.95;
  opacity:0; animation: fadeUp 0.9s 1.2s ease forwards;
}
.scroll-down {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--gold); font-family: 'Pirata One', cursive;
  font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase;
  opacity:0; animation: fadeIn 1s 1.8s ease forwards, bob 2.2s 2.8s ease-in-out infinite;
}
.scroll-down span { font-size: 1.4rem; }

.sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.spark {
  position: absolute; border-radius: 50%; background: var(--gold-bright); opacity: 0;
  animation: sparkle var(--d) var(--delay) ease-in-out infinite;
}

/* SECTIONS */
.section-wrap {
  padding: 7rem 0;
  background: rgba(8,4,2,0.88);
  border-top: 1px solid rgba(245,200,66,0.08);
  box-shadow: inset 0 0 120px rgba(0,0,0,0.25);
}
.section-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.label {
  font-family: 'Pirata One', cursive; font-size: 0.82rem;
  letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--gold); opacity: 0.8; margin-bottom: 0.8rem;
}
.section-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(2rem, 5vw, 3.2rem); color: var(--gold-bright);
  text-shadow: 2px 2px 0 var(--rum); margin-bottom: 1rem; line-height: 1.2;
}
.section-title.on { animation: title-glow 3s 0.5s ease-in-out infinite alternate; }
.divider {
  height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.4; margin-bottom: 3rem;
}

/* ABOUT */
#about {
  background: linear-gradient(180deg, rgba(10,6,3,0.98) 0%, rgba(8,4,2,0.94) 100%);
}
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
@media(max-width:880px){ .about-grid{grid-template-columns:1fr;gap:3rem;} }
.about-text p {
  font-size: 1.18rem; line-height: 2.1; color: #e8d7ad; margin-bottom: 1.2rem;
}
.about-text em { color: var(--gold-bright); font-style: italic; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--rum), var(--blood));
  border: 1px solid var(--gold); color: var(--gold-bright);
  font-family: 'Pirata One', cursive; font-size: 0.85rem;
  padding: 0.5rem 1.2rem; border-radius: 4px; letter-spacing: 0.12em;
  margin-top: 0.5rem; box-shadow: 0 0 25px rgba(201,151,58,0.15);
}
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat {
  background: rgba(92,45,10,0.25); border: 1px solid rgba(201,151,58,0.2);
  border-radius: 10px; padding: 1.6rem; text-align: center;
  transition: border-color 0.3s, transform 0.35s, box-shadow 0.35s;
  cursor: default;
}
.stat:hover { border-color: var(--gold); transform: translateY(-6px) scale(1.02); box-shadow: 0 12px 35px rgba(0,0,0,0.5),0 0 25px rgba(201,151,58,0.12); }
.stat-n { font-family: 'Cinzel Decorative', serif; font-size: 2.6rem; color: var(--gold-bright); display:block; text-shadow: 0 0 25px rgba(245,200,66,0.4); }
.stat-l { font-family: 'Pirata One', cursive; font-size: 0.78rem; letter-spacing: 0.2em; color: #d4c5a0; margin-top: 0.3rem; display:block; }

/* PROJECTS */
#projects { background: linear-gradient(180deg, rgba(10,6,3,0.96) 0%, rgba(9,5,3,0.98) 100%); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.6rem; }
.card {
  background: radial-gradient(circle at top left, rgba(245,200,66,0.08), transparent 34%),
              linear-gradient(180deg, rgba(18,10,4,0.92), rgba(13,43,62,0.5));
  border: 1px solid rgba(245,200,66,0.11); border-radius: 18px;
  padding: 2rem; position: relative; overflow: hidden;
  transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s, background 0.35s;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(245,200,66,0.8), transparent);
  opacity: 0; transition: opacity 0.35s;
}
.card:hover { border-color: rgba(245,200,66,0.4); transform: translateY(-8px); box-shadow: 0 26px 60px rgba(0,0,0,0.55),0 0 40px rgba(245,200,66,0.08); }
.card:hover::before { opacity: 1; }
.card-shimmer {
  position:absolute; top:0; left:-110%; width:55%; height:100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
}
.card:hover .card-shimmer { animation: shimmer-slide 0.75s ease forwards; }
.card-icon { font-size: 2.4rem; margin-bottom: 1rem; display: block; position: relative; z-index: 1; }
.card-era { font-family: 'Pirata One', cursive; font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-bright); opacity: 0.85; margin-bottom: 0.35rem; position: relative; z-index: 1; }
.card-name { font-family: 'Cinzel Decorative', serif; font-size: 1.05rem; color: #fff; margin-bottom: 0.9rem; line-height: 1.35; position: relative; z-index: 1; }
.card-desc { font-size: 1.08rem; line-height: 1.9; color: #ddd2b0; position: relative; z-index: 1; }
.tag {
  display:inline-block; background: rgba(245,200,66,0.1);
  border:1px solid rgba(245,200,66,0.2); color: var(--gold-bright);
  font-size: 0.72rem; padding: 4px 10px; border-radius: 999px;
  margin: 0.55rem 0.35rem 0 0; font-family: 'Pirata One', cursive; letter-spacing: 0.1em;
  position: relative; z-index: 1;
}

/* SERVERS */
#servers { background: linear-gradient(180deg, rgba(8,4,2,0.96), rgba(10,6,3,0.98)); }
.servers-intro { font-size: 1.14rem; line-height: 2.1; color: #e0d6b4; max-width: 720px; margin-bottom: 3rem; }
.servers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.4rem; }
.server-card {
  background: linear-gradient(160deg, rgba(30,30,80,0.35), rgba(13,43,62,0.5));
  border: 1px solid rgba(88,101,242,0.25); border-radius: 14px;
  padding: 1.8rem; position: relative; overflow: hidden;
  transition: all 0.35s; cursor: default;
}
.server-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, #7289da, transparent);
  opacity: 0; transition: opacity 0.35s;
}
.server-card:hover { border-color: rgba(114,137,218,0.6); transform: translateY(-6px); box-shadow: 0 20px 45px rgba(0,0,0,0.6),0 0 30px rgba(114,137,218,0.1); }
.server-card:hover::before { opacity: 1; }
.server-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #5865f2, #7289da);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 1.1rem;
  box-shadow: 0 0 20px rgba(88,101,242,0.3);
}
.server-status {
  display:inline-flex; align-items:center; gap:5px;
  font-family:'Pirata One',cursive; font-size:0.7rem; letter-spacing:0.2em;
  text-transform:uppercase; margin-bottom:0.5rem; color:#f5c842;
}
.server-status span { color:#f5c842; }
.status-dot { width:7px; height:7px; border-radius:50%; }
.status-dot.coming-soon { background:#faa61a; box-shadow:0 0 8px #faa61a; animation:status-pulse 2s ease-in-out infinite; }
.status-dot.active { background:#43b581; box-shadow:0 0 8px #43b581; }
@keyframes status-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.server-name { font-family:'Cinzel Decorative',serif; font-size:1rem; color:#c8d0ff; margin-bottom:0.7rem; line-height:1.3; }
.server-desc { font-size:1.02rem; line-height:1.85; color:#bbbfd4; }
.server-tag { display:inline-block; background:rgba(88,101,242,0.12);
  border:1px solid rgba(88,101,242,0.3); color:#7289da; font-size:0.68rem;
  padding:2px 9px; border-radius:3px; margin:0.5rem 0.25rem 0 0;
  font-family:'Pirata One',cursive; letter-spacing:0.1em;
}
.coming-soon-banner {
  display:inline-flex; align-items:center; gap:6px;
  background: linear-gradient(135deg, rgba(250,166,26,0.15), rgba(250,166,26,0.05));
  border:1px solid rgba(250,166,26,0.4); color:#faa61a;
  font-family:'Pirata One',cursive; font-size:0.72rem; letter-spacing:0.2em;
  text-transform:uppercase; padding:4px 12px; border-radius:4px; margin-top:0.8rem; display:block; width:fit-content;
}
.server-link {
  display:inline-flex; align-items:center; gap:8px;
  color: var(--accent); text-decoration:none;
  font-size:0.82rem; letter-spacing:0.17em; text-transform:uppercase;
  border-bottom:1px solid rgba(114,137,218,0.4); margin-top:1rem; position:relative;
}
.server-link:hover { color: #aab8ff; border-color: #aab8ff; }

/* SKILLS */
#skills { background: linear-gradient(180deg, rgba(8,4,2,0.96), rgba(7,3,1,0.96)); }
.pills { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.pill {
  background: linear-gradient(135deg, rgba(245,200,66,0.12), rgba(13,43,62,0.45));
  border:1px solid rgba(245,200,66,0.2); color:#f3e7b3;
  padding:0.75rem 1.45rem; border-radius:999px;
  font-family:'Pirata One',cursive; font-size:0.92rem;
  letter-spacing:0.08em; transition:all 0.28s; cursor:default;
}
.pill:hover { border-color:var(--gold-bright); color:#fff; transform:scale(1.06) translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,0.45),0 0 22px rgba(245,200,66,0.12); }

/* CONTACT */
#contact { background: var(--ink); }
.contact-box {
  background: linear-gradient(160deg, rgba(92,45,10,0.22), rgba(13,43,62,0.22));
  border:1px solid rgba(201,151,58,0.28); border-radius:18px;
  padding:4.5rem 2.5rem; max-width:600px; margin:0 auto; text-align:center;
  position:relative; overflow:hidden;
}
.contact-box::before {
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background: radial-gradient(circle at 50% 50%, rgba(201,151,58,0.04), transparent 60%);
  animation: pulse-glow 5s ease-in-out infinite;
}
.contact-box p { font-size:1.12rem; color:#e8d9b8; line-height:1.95; margin-bottom:2.2rem; position:relative; z-index:1; }
.contact-btn {
  display:inline-block;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold), var(--rum));
  color: var(--ink); font-family:'Cinzel Decorative',serif; font-size:0.9rem;
  font-weight:700; padding:1.05rem 2.8rem; border-radius:7px; text-decoration:none;
  letter-spacing:0.1em; position:relative; z-index:1;
  transition:all 0.35s; box-shadow:0 4px 24px rgba(201,151,58,0.3);
}
.contact-btn:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 12px 35px rgba(201,151,58,0.5); filter:brightness(1.08); }

footer {
  text-align:center; padding:2.5rem;
  border-top:1px solid rgba(245,200,66,0.08);
  background: rgba(4,3,2,0.8);
  font-family:'Pirata One',cursive; font-size:0.8rem;
  color:#b39f72; letter-spacing:0.25em;
}

/* REVEAL */
.reveal       { opacity:0; transform:translateY(32px); transition:opacity 0.75s cubic-bezier(0.2,0,0.2,1),transform 0.75s cubic-bezier(0.2,0,0.2,1); }
.reveal-left  { opacity:0; transform:translateX(-30px); transition:opacity 0.75s ease,transform 0.75s ease; }
.reveal-right { opacity:0; transform:translateX(30px);  transition:opacity 0.75s ease,transform 0.75s ease; }
.reveal.on,.reveal-left.on,.reveal-right.on { opacity:1; transform:translate(0); }

@media(max-width:980px) {
  .about-grid, .grid, .servers-grid { grid-template-columns: 1fr; }
  .section-wrap { padding: 5rem 0; }
  .section-inner { padding: 0 1.5rem; }
  .hero-content { padding: 1.5rem; }
  .hero-quote { max-width: 100%; }
}

@media(max-width:760px) {
  nav { padding: 1rem 1.5rem; }
  .nav-logo { font-size: 1rem; }
  .section-title { font-size: clamp(1.8rem, 7vw, 2.8rem); }
  .section-wrap { padding: 4.2rem 0; }
  .card, .server-card { padding: 1.6rem; }
  .card-name { font-size: 1rem; }
  .card-desc { font-size: 1rem; line-height: 1.85; }
  .server-name { font-size: 0.95rem; }
  .server-desc { font-size: 1rem; }
  .pill { padding: 0.65rem 1.2rem; font-size: 0.85rem; }
}

@media(max-width:640px){
  nav { padding: 0.9rem 1.2rem; }
  .nav-logo { font-size: 0.95rem; }
  .hero-name { font-size: clamp(3.2rem, 18vw, 5.8rem); }
  .hero-sub { font-size: 0.95rem; }
  .hero-quote { font-size: 0.95rem; margin-bottom: 1.4rem; }
  .hero-content { padding: 1rem; }
  .scroll-down { display: none; }
  .label { font-size: 0.78rem; letter-spacing: 0.35em; }
  .section-inner { padding: 0 1rem; }
  .about-text p, .server-desc, .card-desc { font-size: 1rem; line-height: 1.8; }
  .stats, .pills { gap: 0.9rem; }
  .server-card, .card { border-radius: 14px; }
  .server-status { gap: 4px; }
  .server-link { font-size: 0.78rem; }
  .contact-box { padding: 3rem 1.5rem; }
}

@media(max-width:480px) {
  nav { padding: 0.8rem 1rem; }
  .section-wrap { padding: 3.5rem 0; }
  .section-inner { padding: 0 0.75rem; }
  .about-grid, .grid, .servers-grid { gap: 1rem; }
  .card, .server-card { padding: 1.3rem; }
  .pill { width: 100%; justify-content: center; }
  .hero-name { font-size: clamp(2.8rem, 20vw, 4.8rem); }
  .hero-sub { letter-spacing: 0.18em; }
  .hero-quote { line-height: 1.7; }
}